From f832d26a0d12cc4751786eab27146e16ea452f32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=AE=E6=A2=A6?= <ls909275705@gmail.com>
Date: Mon, 25 Sep 2023 16:04:32 +0800
Subject: [PATCH 01/10] =?UTF-8?q?=E7=AB=99=E5=86=85=E4=BF=A1=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E5=A2=9E=E5=8A=A0=20Member=20=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/NotifyTemplateSendForm.vue       | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/views/system/notify/template/NotifyTemplateSendForm.vue b/src/views/system/notify/template/NotifyTemplateSendForm.vue
index 78103d71..964f6b98 100644
--- a/src/views/system/notify/template/NotifyTemplateSendForm.vue
+++ b/src/views/system/notify/template/NotifyTemplateSendForm.vue
@@ -15,7 +15,21 @@
           type="textarea"
         />
       </el-form-item>
-      <el-form-item label="接收人" prop="userId">
+      <el-form-item label="用户类型" prop="userType">
+        <el-radio-group v-model="formData.userType">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
+            :key="dict.value"
+            :label="dict.value as number"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-show="formData.userType === 1" label="接收人ID" prop="userId">
+        <el-input v-model="formData.userId" style="width: 160px" />
+      </el-form-item>
+      <el-form-item v-show="formData.userType === 2" label="接收人" prop="userId">
         <el-select v-model="formData.userId" placeholder="请选择接收人">
           <el-option
             v-for="item in userOption"
@@ -46,6 +60,7 @@
 <script lang="ts" setup>
 import * as UserApi from '@/api/system/user'
 import * as NotifyTemplateApi from '@/api/system/notify/template'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
 defineOptions({ name: 'SystemNotifyTemplateSendForm' })
 
@@ -57,6 +72,7 @@ const formData = ref({
   content: '',
   params: {},
   userId: null,
+  userType: 1,
   templateCode: '',
   templateParams: new Map()
 })
@@ -122,7 +138,8 @@ const resetForm = () => {
     params: {},
     mobile: '',
     templateCode: '',
-    templateParams: new Map()
+    templateParams: new Map(),
+    userType: 1
   } as any
   formRef.value?.resetFields()
 }

From 36bb90fbb8246fc7e40b3f0794fc4600d50cc6ff Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 15 Oct 2023 00:54:28 +0800
Subject: [PATCH 02/10] =?UTF-8?q?=E8=90=A5=E9=94=80=E6=B4=BB=E5=8A=A8?=
 =?UTF-8?q?=EF=BC=9A=E6=96=B0=E5=A2=9E=E6=96=87=E7=AB=A0=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/articleCategory/index.ts   |  39 +++
 .../articleCategory/ArticleCategoryForm.vue   | 117 +++++++++
 .../mall/promotion/articleCategory/index.vue  | 225 ++++++++++++++++++
 3 files changed, 381 insertions(+)
 create mode 100644 src/api/mall/promotion/articleCategory/index.ts
 create mode 100644 src/views/mall/promotion/articleCategory/ArticleCategoryForm.vue
 create mode 100644 src/views/mall/promotion/articleCategory/index.vue

diff --git a/src/api/mall/promotion/articleCategory/index.ts b/src/api/mall/promotion/articleCategory/index.ts
new file mode 100644
index 00000000..5795a41b
--- /dev/null
+++ b/src/api/mall/promotion/articleCategory/index.ts
@@ -0,0 +1,39 @@
+import request from '@/config/axios'
+
+export interface ArticleCategoryVO {
+  id: number
+  name: string
+  picUrl: string
+  status: number
+  sort: number
+}
+
+// 查询分类列表
+export const getArticleCategoryPage = async (params) => {
+  return await request.get({ url: `/promotion/article-category/page`, params })
+}
+
+// 查询分类详情
+export const getArticleCategory = async (id: number) => {
+  return await request.get({ url: `/promotion/article-category/get?id=` + id })
+}
+
+// 新增分类
+export const createArticleCategory = async (data: ArticleCategoryVO) => {
+  return await request.post({ url: `/promotion/article-category/create`, data })
+}
+
+// 修改分类
+export const updateArticleCategory = async (data: ArticleCategoryVO) => {
+  return await request.put({ url: `/promotion/article-category/update`, data })
+}
+
+// 删除分类
+export const deleteArticleCategory = async (id: number) => {
+  return await request.delete({ url: `/promotion/article-category/delete?id=` + id })
+}
+
+// 导出分类 Excel
+export const exportArticleCategory = async (params) => {
+  return await request.download({ url: `/promotion/article-category/export-excel`, params })
+}
diff --git a/src/views/mall/promotion/articleCategory/ArticleCategoryForm.vue b/src/views/mall/promotion/articleCategory/ArticleCategoryForm.vue
new file mode 100644
index 00000000..4b7f2948
--- /dev/null
+++ b/src/views/mall/promotion/articleCategory/ArticleCategoryForm.vue
@@ -0,0 +1,117 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+    >
+      <el-form-item label="分类名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入分类名称" />
+      </el-form-item>
+      <el-form-item label="图标地址" prop="picUrl">
+        <UploadImg v-model="formData.picUrl" height="80px" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  picUrl: undefined,
+  status: undefined,
+  sort: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ArticleCategoryApi.getArticleCategory(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ArticleCategoryApi.ArticleCategoryVO
+    if (formType.value === 'create') {
+      await ArticleCategoryApi.createArticleCategory(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ArticleCategoryApi.updateArticleCategory(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    picUrl: undefined,
+    status: undefined,
+    sort: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mall/promotion/articleCategory/index.vue b/src/views/mall/promotion/articleCategory/index.vue
new file mode 100644
index 00000000..d201b3a3
--- /dev/null
+++ b/src/views/mall/promotion/articleCategory/index.vue
@@ -0,0 +1,225 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="分类名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          class="!w-240px"
+          clearable
+          placeholder="请输入分类名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button
+          v-hasPermi="['promotion:article-category:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+        <el-button
+          v-hasPermi="['promotion:article-category:export']"
+          :loading="exportLoading"
+          plain
+          type="success"
+          @click="handleExport"
+        >
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="编号" prop="id" />
+      <el-table-column align="center" label="分类名称" prop="name" />
+      <el-table-column label="分类图图" min-width="80">
+        <template #default="{ row }">
+          <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="状态" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="排序" prop="sort" />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180px"
+      />
+      <el-table-column align="center" label="操作">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['promotion:article-category:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-hasPermi="['promotion:article-category:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ArticleCategoryForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
+import ArticleCategoryForm from './ArticleCategoryForm.vue'
+import { createImageViewer } from '@/components/ImageViewer'
+
+defineOptions({ name: 'ArticleCategory' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  status: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 分类图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ArticleCategoryApi.getArticleCategoryPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ArticleCategoryApi.deleteArticleCategory(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ArticleCategoryApi.exportArticleCategory(queryParams)
+    download.excel(data, '分类.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

From befffb3f7d7f94f1c4028b0dea595b43bb67d356 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 15 Oct 2023 16:14:09 +0800
Subject: [PATCH 03/10] =?UTF-8?q?=E8=90=A5=E9=94=80=E6=B4=BB=E5=8A=A8?=
 =?UTF-8?q?=EF=BC=9A=E6=96=B0=E5=A2=9E=E6=96=87=E7=AB=A0=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/spu.ts                   |   2 +-
 src/api/mall/promotion/article/index.ts       |  47 +++
 .../mall/promotion/articleCategory/index.ts   |  17 +-
 .../mall/promotion/article/ArticleForm.vue    | 236 +++++++++++++
 .../category}/ArticleCategoryForm.vue         |   2 +
 .../category}/index.vue                       |   2 +-
 src/views/mall/promotion/article/index.vue    | 321 ++++++++++++++++++
 7 files changed, 619 insertions(+), 8 deletions(-)
 create mode 100644 src/api/mall/promotion/article/index.ts
 create mode 100644 src/views/mall/promotion/article/ArticleForm.vue
 rename src/views/mall/promotion/{articleCategory => article/category}/ArticleCategoryForm.vue (98%)
 rename src/views/mall/promotion/{articleCategory => article/category}/index.vue (99%)
 create mode 100644 src/views/mall/promotion/article/index.vue

diff --git a/src/api/mall/product/spu.ts b/src/api/mall/product/spu.ts
index c78bef47..5cc4d8fe 100644
--- a/src/api/mall/product/spu.ts
+++ b/src/api/mall/product/spu.ts
@@ -104,5 +104,5 @@ export const exportSpu = async (params) => {
 
 // 获得商品 SPU 精简列表
 export const getSpuSimpleList = async () => {
-  return request.get({ url: '/product/spu/get-simple-list' })
+  return request.get({ url: '/product/spu/list-all-simple' })
 }
diff --git a/src/api/mall/promotion/article/index.ts b/src/api/mall/promotion/article/index.ts
new file mode 100644
index 00000000..c2941d05
--- /dev/null
+++ b/src/api/mall/promotion/article/index.ts
@@ -0,0 +1,47 @@
+import request from '@/config/axios'
+
+export interface ArticleVO {
+  id: number
+  categoryId: number
+  title: string
+  author: string
+  picUrl: string
+  introduction: string
+  browseCount: string
+  sort: number
+  status: number
+  spuId: number
+  recommendHot: boolean
+  recommendBanner: boolean
+  content: string
+}
+
+// 查询文章管理列表
+export const getArticlePage = async (params) => {
+  return await request.get({ url: `/promotion/article/page`, params })
+}
+
+// 查询文章管理详情
+export const getArticle = async (id: number) => {
+  return await request.get({ url: `/promotion/article/get?id=` + id })
+}
+
+// 新增文章管理
+export const createArticle = async (data: ArticleVO) => {
+  return await request.post({ url: `/promotion/article/create`, data })
+}
+
+// 修改文章管理
+export const updateArticle = async (data: ArticleVO) => {
+  return await request.put({ url: `/promotion/article/update`, data })
+}
+
+// 删除文章管理
+export const deleteArticle = async (id: number) => {
+  return await request.delete({ url: `/promotion/article/delete?id=` + id })
+}
+
+// 导出文章管理 Excel
+export const exportArticle = async (params) => {
+  return await request.download({ url: `/promotion/article/export-excel`, params })
+}
diff --git a/src/api/mall/promotion/articleCategory/index.ts b/src/api/mall/promotion/articleCategory/index.ts
index 5795a41b..2950d759 100644
--- a/src/api/mall/promotion/articleCategory/index.ts
+++ b/src/api/mall/promotion/articleCategory/index.ts
@@ -8,32 +8,37 @@ export interface ArticleCategoryVO {
   sort: number
 }
 
-// 查询分类列表
+// 查询文章分类列表
 export const getArticleCategoryPage = async (params) => {
   return await request.get({ url: `/promotion/article-category/page`, params })
 }
 
-// 查询分类详情
+// 查询文章分类精简信息列表
+export const getSimpleArticleCategoryList = async () => {
+  return await request.get({ url: `/promotion/article-category/list-all-simple` })
+}
+
+// 查询文章分类详情
 export const getArticleCategory = async (id: number) => {
   return await request.get({ url: `/promotion/article-category/get?id=` + id })
 }
 
-// 新增分类
+// 新增文章分类
 export const createArticleCategory = async (data: ArticleCategoryVO) => {
   return await request.post({ url: `/promotion/article-category/create`, data })
 }
 
-// 修改分类
+// 修改文章分类
 export const updateArticleCategory = async (data: ArticleCategoryVO) => {
   return await request.put({ url: `/promotion/article-category/update`, data })
 }
 
-// 删除分类
+// 删除文章分类
 export const deleteArticleCategory = async (id: number) => {
   return await request.delete({ url: `/promotion/article-category/delete?id=` + id })
 }
 
-// 导出分类 Excel
+// 导出文章分类 Excel
 export const exportArticleCategory = async (params) => {
   return await request.download({ url: `/promotion/article-category/export-excel`, params })
 }
diff --git a/src/views/mall/promotion/article/ArticleForm.vue b/src/views/mall/promotion/article/ArticleForm.vue
new file mode 100644
index 00000000..36fc1340
--- /dev/null
+++ b/src/views/mall/promotion/article/ArticleForm.vue
@@ -0,0 +1,236 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="70%">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+    >
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="文章分类" prop="categoryId">
+            <el-select v-model="formData.categoryId" placeholder="请选择">
+              <el-option
+                v-for="item in categoryList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="文章标题" prop="title">
+            <el-input v-model="formData.title" placeholder="请输入文章标题" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="文章作者" prop="author">
+            <el-input v-model="formData.author" placeholder="请输入文章作者" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="文章简介" prop="introduction">
+            <el-input v-model="formData.introduction" placeholder="请输入文章简介" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="文章封面" prop="picUrl">
+            <UploadImg v-model="formData.picUrl" height="80px" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="浏览次数" prop="browseCount">
+            <el-input-number
+              v-model="formData.browseCount"
+              :min="0"
+              clearable
+              controls-position="right"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="排序" prop="sort">
+            <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="商品关联" prop="spuId">
+            <el-select v-model="formData.spuId" placeholder="请选择">
+              <el-option
+                v-for="item in spuList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="是否热门" prop="recommendHot">
+            <el-radio-group v-model="formData.recommendHot">
+              <el-radio
+                v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="是否轮播图" prop="recommendBanner">
+            <el-radio-group v-model="formData.recommendBanner">
+              <el-radio
+                v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="文章内容">
+            <Editor v-model="formData.content" height="150px" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
+import * as ArticleApi from '@/api/mall/promotion/article'
+import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+
+defineOptions({ name: 'PromotionArticleForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  categoryId: undefined,
+  title: undefined,
+  author: undefined,
+  picUrl: undefined,
+  introduction: undefined,
+  browseCount: 0,
+  sort: 0,
+  status: 0,
+  spuId: undefined,
+  recommendHot: false,
+  recommendBanner: false,
+  content: undefined
+})
+const formRules = reactive({
+  categoryId: [{ required: true, message: '分类id不能为空', trigger: 'blur' }],
+  title: [{ required: true, message: '文章标题不能为空', trigger: 'blur' }],
+  picUrl: [{ required: true, message: '文章封面图片地址不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
+  spuId: [{ required: true, message: '商品关联id不能为空', trigger: 'blur' }],
+  recommendHot: [{ required: true, message: '是否热门(小程序)不能为空', trigger: 'blur' }],
+  recommendBanner: [{ required: true, message: '是否轮播图(小程序)不能为空', trigger: 'blur' }],
+  content: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ArticleApi.getArticle(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ArticleApi.ArticleVO
+    if (formType.value === 'create') {
+      await ArticleApi.createArticle(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ArticleApi.updateArticle(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    categoryId: undefined,
+    title: undefined,
+    author: undefined,
+    picUrl: undefined,
+    introduction: undefined,
+    browseCount: 0,
+    sort: 0,
+    status: 0,
+    spuId: undefined,
+    recommendHot: false,
+    recommendBanner: false,
+    content: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+const categoryList = ref<ArticleCategoryApi.ArticleCategoryVO[]>([])
+const spuList = ref<ProductSpuApi.Spu[]>([])
+onMounted(async () => {
+  categoryList.value =
+    (await ArticleCategoryApi.getSimpleArticleCategoryList()) as ArticleCategoryApi.ArticleCategoryVO[]
+  spuList.value = (await ProductSpuApi.getSpuSimpleList()) as ProductSpuApi.Spu[]
+})
+</script>
diff --git a/src/views/mall/promotion/articleCategory/ArticleCategoryForm.vue b/src/views/mall/promotion/article/category/ArticleCategoryForm.vue
similarity index 98%
rename from src/views/mall/promotion/articleCategory/ArticleCategoryForm.vue
rename to src/views/mall/promotion/article/category/ArticleCategoryForm.vue
index 4b7f2948..39b1fc0f 100644
--- a/src/views/mall/promotion/articleCategory/ArticleCategoryForm.vue
+++ b/src/views/mall/promotion/article/category/ArticleCategoryForm.vue
@@ -38,6 +38,8 @@
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
 
+defineOptions({ name: 'PromotionArticleCategoryForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
diff --git a/src/views/mall/promotion/articleCategory/index.vue b/src/views/mall/promotion/article/category/index.vue
similarity index 99%
rename from src/views/mall/promotion/articleCategory/index.vue
rename to src/views/mall/promotion/article/category/index.vue
index d201b3a3..32d385c3 100644
--- a/src/views/mall/promotion/articleCategory/index.vue
+++ b/src/views/mall/promotion/article/category/index.vue
@@ -135,7 +135,7 @@ import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
 import ArticleCategoryForm from './ArticleCategoryForm.vue'
 import { createImageViewer } from '@/components/ImageViewer'
 
-defineOptions({ name: 'ArticleCategory' })
+defineOptions({ name: 'PromotionArticleCategory' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
diff --git a/src/views/mall/promotion/article/index.vue b/src/views/mall/promotion/article/index.vue
new file mode 100644
index 00000000..7f5f4b70
--- /dev/null
+++ b/src/views/mall/promotion/article/index.vue
@@ -0,0 +1,321 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="80px"
+    >
+      <el-form-item label="文章分类" prop="categoryId">
+        <el-select
+          v-model="queryParams.categoryId"
+          class="!w-240px"
+          placeholder="全部"
+          @keyup.enter="handleQuery"
+        >
+          <el-option
+            v-for="item in categoryList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="文章标题" prop="title">
+        <el-input
+          v-model="queryParams.title"
+          class="!w-240px"
+          clearable
+          placeholder="请输入文章标题"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="文章作者" prop="author">
+        <el-input
+          v-model="queryParams.author"
+          class="!w-240px"
+          clearable
+          placeholder="请输入文章作者"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关联商品" prop="spuId">
+        <el-select
+          v-model="queryParams.spuId"
+          class="!w-240px"
+          placeholder="全部"
+          @keyup.enter="handleQuery"
+        >
+          <el-option v-for="item in spuList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="热门" prop="recommendHot">
+        <el-select v-model="queryParams.recommendHot" class="!w-240px" clearable placeholder="全部">
+          <el-option
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="轮播图" prop="recommendBanner">
+        <el-select
+          v-model="queryParams.recommendBanner"
+          class="!w-240px"
+          clearable
+          placeholder="全部"
+        >
+          <el-option
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button
+          v-hasPermi="['promotion:article:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+        <el-button
+          v-hasPermi="['promotion:article:export']"
+          :loading="exportLoading"
+          plain
+          type="success"
+          @click="handleExport"
+        >
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="文章分类" prop="categoryId">
+        <template #default="scope">
+          {{ categoryList.find((item) => item.id === scope.row.categoryId)?.name }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="关联商品" prop="spuId" width="300">
+        <template #default="scope">
+          <el-image
+            :preview-src-list="[spuList.find((item) => item.id === scope.row.spuId)?.picUrl]"
+            :src="spuList.find((item) => item.id === scope.row.spuId)?.picUrl"
+            class="mr-[10px] h-40px w-40px v-middle"
+            preview-teleported
+          />
+          {{ spuList.find((item) => item.id === scope.row.spuId)?.name }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="文章标题" prop="title" />
+      <el-table-column align="center" label="文章作者" prop="author" />
+      <el-table-column align="center" label="文章封面" prop="picUrl">
+        <template #default="{ row }">
+          <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="文章简介" prop="introduction" />
+      <el-table-column align="center" label="浏览次数" prop="browseCount" />
+      <el-table-column align="center" label="排序" prop="sort" />
+      <el-table-column align="center" label="状态" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="热门" prop="recommendHot">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.recommendHot" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="轮播图" prop="recommendBanner">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.recommendBanner" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180px"
+      />
+      <el-table-column align="center" fixed="right" label="操作" width="120">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['promotion:article:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-hasPermi="['promotion:article:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ArticleForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as ArticleApi from '@/api/mall/promotion/article'
+import ArticleForm from './ArticleForm.vue'
+import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import { createImageViewer } from '@/components/ImageViewer'
+
+defineOptions({ name: 'PromotionArticle' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  categoryId: undefined,
+  spuId: undefined,
+  title: null,
+  author: null,
+  status: undefined,
+  recommendHot: undefined,
+  recommendBanner: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+/** 文章封面预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ArticleApi.getArticlePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ArticleApi.deleteArticle(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ArticleApi.exportArticle(queryParams)
+    download.excel(data, '文章管理.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+const categoryList = ref<ArticleCategoryApi.ArticleCategoryVO[]>([])
+const spuList = ref<ProductSpuApi.Spu[]>([])
+onMounted(async () => {
+  await getList()
+  categoryList.value =
+    (await ArticleCategoryApi.getSimpleArticleCategoryList()) as ArticleCategoryApi.ArticleCategoryVO[]
+  spuList.value = (await ProductSpuApi.getSpuSimpleList()) as ProductSpuApi.Spu[]
+})
+</script>

From 3802fee661b59cb43f07b3b44a8f8e94a500d111 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Mon, 16 Oct 2023 09:51:19 +0800
Subject: [PATCH 04/10] =?UTF-8?q?=E5=95=86=E5=9F=8E=EF=BC=9A=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=95=86=E5=9F=8E=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/statistics/member.ts             |  32 +++
 src/api/mall/statistics/pay.ts                |   6 +
 src/api/mall/statistics/trade.ts              |  54 +++++
 .../ShortcutDateRangePicker/index.vue         |  89 ++++++++
 src/utils/index.ts                            |  13 ++
 .../mall/home/components/ComparisonCard.vue   |  42 ++++
 .../home/components/MemberStatisticsCard.vue  |  91 ++++++++
 .../home/components/OperationDataCard.vue     |  91 ++++++++
 .../mall/home/components/ShortcutCard.vue     |  79 +++++++
 .../mall/home/components/TradeTrendCard.vue   | 208 +++++++++++++++++
 src/views/mall/home/index.vue                 | 113 ++++++++++
 .../member/components/MemberFunnelCard.vue    | 119 ++++++++++
 .../member/components/MemberTerminalCard.vue  |  69 ++++++
 src/views/mall/statistics/member/index.vue    | 213 ++----------------
 src/views/mall/statistics/trade/index.vue     |  94 +-------
 15 files changed, 1038 insertions(+), 275 deletions(-)
 create mode 100644 src/api/mall/statistics/pay.ts
 create mode 100644 src/components/ShortcutDateRangePicker/index.vue
 create mode 100644 src/views/mall/home/components/ComparisonCard.vue
 create mode 100644 src/views/mall/home/components/MemberStatisticsCard.vue
 create mode 100644 src/views/mall/home/components/OperationDataCard.vue
 create mode 100644 src/views/mall/home/components/ShortcutCard.vue
 create mode 100644 src/views/mall/home/components/TradeTrendCard.vue
 create mode 100644 src/views/mall/home/index.vue
 create mode 100644 src/views/mall/statistics/member/components/MemberFunnelCard.vue
 create mode 100644 src/views/mall/statistics/member/components/MemberTerminalCard.vue

diff --git a/src/api/mall/statistics/member.ts b/src/api/mall/statistics/member.ts
index d4680d3d..e0d77e40 100644
--- a/src/api/mall/statistics/member.ts
+++ b/src/api/mall/statistics/member.ts
@@ -54,6 +54,20 @@ export interface MemberTerminalStatisticsRespVO {
   userCount: number
 }
 
+/** 会员数量统计 Response VO */
+export interface MemberCountRespVO {
+  /** 用户访问量 */
+  visitUserCount: string
+  /** 新增用户数量 */
+  createUserCount: number
+}
+
+/** 会员注册数量 Response VO */
+export interface MemberRegisterCountRespVO {
+  date: string
+  count: number
+}
+
 // 查询会员统计
 export const getMemberSummary = () => {
   return request.get<MemberSummaryRespVO>({
@@ -89,3 +103,21 @@ export const getMemberTerminalStatisticsList = () => {
     url: '/statistics/member/get-terminal-statistics-list'
   })
 }
+
+// 获得用户数量量对照
+export const getUserCountComparison = () => {
+  return request.get<TradeStatisticsComparisonRespVO<MemberCountRespVO>>({
+    url: '/statistics/member/user-count-comparison'
+  })
+}
+
+// 获得会员注册数量列表
+export const getMemberRegisterCountList = (
+  beginTime: dayjs.ConfigType,
+  endTime: dayjs.ConfigType
+) => {
+  return request.get<MemberRegisterCountRespVO[]>({
+    url: '/statistics/member/register-count-list',
+    params: { times: [formatDate(beginTime), formatDate(endTime)] }
+  })
+}
diff --git a/src/api/mall/statistics/pay.ts b/src/api/mall/statistics/pay.ts
new file mode 100644
index 00000000..1593f38d
--- /dev/null
+++ b/src/api/mall/statistics/pay.ts
@@ -0,0 +1,6 @@
+import request from '@/config/axios'
+
+/** 获取钱包充值金额 */
+export const getWalletRechargePrice = async () => {
+  return await request.get<number>({ url: `/statistics/pay/wallet-recharge-price` })
+}
diff --git a/src/api/mall/statistics/trade.ts b/src/api/mall/statistics/trade.ts
index f7829ccb..76da08ca 100644
--- a/src/api/mall/statistics/trade.ts
+++ b/src/api/mall/statistics/trade.ts
@@ -33,6 +33,36 @@ export interface TradeTrendSummaryRespVO {
   orderRefundPrice: number
 }
 
+/** 交易订单数量 Response VO */
+export interface TradeOrderCountRespVO {
+  /** 待发货 */
+  undelivered?: number
+  /** 待核销 */
+  pickUp?: number
+  /** 退款中 */
+  afterSaleApply?: number
+  /** 提现待审核 */
+  auditingWithdraw?: number
+}
+
+/** 交易订单统计 Response VO */
+export interface TradeOrderSummaryRespVO {
+  /** 支付订单商品数 */
+  orderPayCount?: number
+  /** 总支付金额，单位：分 */
+  orderPayPrice?: number
+}
+
+/** 订单量趋势统计 Response VO */
+export interface TradeOrderTrendRespVO {
+  /** 日期 */
+  date: string
+  /** 订单数量 */
+  orderPayCount: number
+  /** 订单支付金额 */
+  orderPayPrice: number
+}
+
 // 查询交易统计
 export const getTradeStatisticsSummary = () => {
   return request.get<TradeStatisticsComparisonRespVO<TradeSummaryRespVO>>({
@@ -64,6 +94,30 @@ export const exportTradeTrend = (params: TradeTrendReqVO) => {
   })
 }
 
+// 获得交易订单数量
+export const getOrderCount = async () => {
+  return await request.get<TradeOrderCountRespVO>({ url: `/statistics/trade/order-count` })
+}
+
+// 获得交易订单数量对照
+export const getOrderComparison = async () => {
+  return await request.get<TradeStatisticsComparisonRespVO<TradeOrderSummaryRespVO>>({
+    url: `/statistics/trade/order-comparison`
+  })
+}
+
+// 获得订单量趋势统计
+export const getOrderCountTrendComparison = (
+  type: number,
+  beginTime: dayjs.ConfigType,
+  endTime: dayjs.ConfigType
+) => {
+  return request.get<TradeStatisticsComparisonRespVO<TradeOrderTrendRespVO>[]>({
+    url: '/statistics/trade/order-count-trend',
+    params: { type, beginTime: formatDate(beginTime), endTime: formatDate(endTime) }
+  })
+}
+
 /** 时间参数需要格式化, 确保接口能识别 */
 const formatDateParam = (params: TradeTrendReqVO) => {
   return { times: [formatDate(params.times[0]), formatDate(params.times[1])] } as TradeTrendReqVO
diff --git a/src/components/ShortcutDateRangePicker/index.vue b/src/components/ShortcutDateRangePicker/index.vue
new file mode 100644
index 00000000..d7fa90cb
--- /dev/null
+++ b/src/components/ShortcutDateRangePicker/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="flex flex-row items-center gap-2">
+    <el-radio-group v-model="shortcutDays" @change="handleShortcutDaysChange">
+      <el-radio-button :label="1">昨天</el-radio-button>
+      <el-radio-button :label="7">最近7天</el-radio-button>
+      <el-radio-button :label="30">最近30天</el-radio-button>
+    </el-radio-group>
+    <el-date-picker
+      v-model="times"
+      value-format="YYYY-MM-DD HH:mm:ss"
+      type="daterange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+      :shortcuts="shortcuts"
+      class="!w-240px"
+      @change="emitDateRangePicker"
+    />
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import dayjs from 'dayjs'
+import * as DateUtil from '@/utils/formatTime'
+
+/** 快捷日期范围选择组件 */
+defineOptions({ name: 'ShortcutDateRangePicker' })
+
+const shortcutDays = ref(7) // 日期快捷天数（单选按钮组）, 默认7天
+const times = ref<[dayjs.ConfigType, dayjs.ConfigType]>(['', '']) // 时间范围参数
+defineExpose({ times }) // 暴露时间范围参数
+/** 日期快捷选择 */
+const shortcuts = [
+  {
+    text: '昨天',
+    value: () => DateUtil.getDayRange(new Date(), -1)
+  },
+  {
+    text: '最近7天',
+    value: () => DateUtil.getLast7Days()
+  },
+  {
+    text: '本月',
+    value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')]
+  },
+  {
+    text: '最近30天',
+    value: () => DateUtil.getLast30Days()
+  },
+  {
+    text: '最近1年',
+    value: () => DateUtil.getLast1Year()
+  }
+]
+
+/** 设置时间范围 */
+function setTimes() {
+  const beginDate = dayjs().subtract(shortcutDays.value, 'd')
+  const yesterday = dayjs().subtract(1, 'd')
+  times.value = DateUtil.getDateRange(beginDate, yesterday)
+}
+
+/** 快捷日期单选按钮选中 */
+const handleShortcutDaysChange = async () => {
+  // 设置时间范围
+  setTimes()
+  // 发送时间范围选中事件
+  await emitDateRangePicker()
+}
+
+/** 触发事件：时间范围选中 */
+const emits = defineEmits<{
+  (e: 'change', times: [dayjs.ConfigType, dayjs.ConfigType]): void
+}>()
+/** 触发时间范围选中事件 */
+const emitDateRangePicker = async () => {
+  // 开始与截止在同一天的, 折线图出不来, 需要延长一天
+  if (DateUtil.isSameDay(times.value[0], times.value[1])) {
+    // 前天
+    times.value[0] = DateUtil.formatDate(dayjs(times.value[0]).subtract(1, 'd'))
+  }
+  emits('change', times.value)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  handleShortcutDaysChange()
+})
+</script>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 6c9a5df2..e6b3173c 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -233,3 +233,16 @@ export const yuanToFen = (amount: string | number): number => {
 export const fenToYuan = (price: string | number): number => {
   return formatToFraction(price)
 }
+
+/**
+ * 计算环比
+ *
+ * @param value 当前数值
+ * @param reference 对比数值
+ */
+export const calculateRelativeRate = (value?: number, reference?: number) => {
+  // 防止除0
+  if (!reference) return 0
+
+  return ((100 * ((value || 0) - reference)) / reference).toFixed(0)
+}
diff --git a/src/views/mall/home/components/ComparisonCard.vue b/src/views/mall/home/components/ComparisonCard.vue
new file mode 100644
index 00000000..ee1c2f0c
--- /dev/null
+++ b/src/views/mall/home/components/ComparisonCard.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
+    <div class="flex items-center justify-between text-gray-500">
+      <span>{{ title }}</span>
+      <el-tag>{{ tag }}</el-tag>
+    </div>
+    <div class="flex flex-row items-baseline justify-between">
+      <CountTo :prefix="prefix" :end-val="value" :decimals="decimals" class="text-3xl" />
+      <span :class="toNumber(percent) > 0 ? 'text-red-500' : 'text-green-500'">
+        {{ Math.abs(toNumber(percent)) }}%
+        <Icon :icon="toNumber(percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'" class="!text-sm" />
+      </span>
+    </div>
+    <el-divider class="mb-1! mt-2!" />
+    <div class="flex flex-row items-center justify-between text-sm">
+      <span class="text-gray-500">昨日数据</span>
+      <span>{{ prefix || '' }}{{ reference }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { toNumber } from 'lodash-es'
+import { calculateRelativeRate } from '@/utils'
+
+/** 交易对照卡片 */
+defineOptions({ name: 'ComparisonCard' })
+
+const props = defineProps({
+  title: propTypes.string.def('').isRequired,
+  tag: propTypes.string.def(''),
+  prefix: propTypes.string.def(''),
+  value: propTypes.number.def(0).isRequired,
+  reference: propTypes.number.def(0).isRequired,
+  decimals: propTypes.number.def(0)
+})
+
+// 计算环比
+const percent = computed(() =>
+  calculateRelativeRate(props.value as number, props.reference as number)
+)
+</script>
diff --git a/src/views/mall/home/components/MemberStatisticsCard.vue b/src/views/mall/home/components/MemberStatisticsCard.vue
new file mode 100644
index 00000000..2f9d7ab5
--- /dev/null
+++ b/src/views/mall/home/components/MemberStatisticsCard.vue
@@ -0,0 +1,91 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <CardTitle title="用户统计" />
+    </template>
+    <!-- 折线图 -->
+    <Echart :height="300" :options="lineChartOptions" />
+  </el-card>
+</template>
+<script lang="ts" setup>
+import dayjs from 'dayjs'
+import { EChartsOption } from 'echarts'
+import * as MemberStatisticsApi from '@/api/mall/statistics/member'
+import { formatDate } from '@/utils/formatTime'
+import { CardTitle } from '@/components/Card'
+
+/** 会员用户统计卡片 */
+defineOptions({ name: 'MemberStatisticsCard' })
+
+const loading = ref(true) // 加载中
+/** 折线图配置 */
+const lineChartOptions = reactive<EChartsOption>({
+  dataset: {
+    dimensions: ['date', 'count'],
+    source: []
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true
+  },
+  legend: {
+    top: 50
+  },
+  series: [{ name: '注册量', type: 'line', smooth: true, areaStyle: {} }],
+  toolbox: {
+    feature: {
+      // 数据区域缩放
+      dataZoom: {
+        yAxisIndex: false // Y轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '会员统计' } // 保存为图片
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    },
+    padding: [5, 10]
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      formatter: (date: string) => formatDate(date, 'MM-DD')
+    }
+  },
+  yAxis: {
+    axisTick: {
+      show: false
+    }
+  }
+}) as EChartsOption
+
+const getMemberRegisterCountList = async () => {
+  loading.value = true
+  // 查询最近一月数据
+  const beginTime = dayjs().subtract(30, 'd').startOf('d')
+  const endTime = dayjs().endOf('d')
+  const list = await MemberStatisticsApi.getMemberRegisterCountList(beginTime, endTime)
+  // 更新 Echarts 数据
+  if (lineChartOptions.dataset && lineChartOptions.dataset['source']) {
+    lineChartOptions.dataset['source'] = list
+  }
+  loading.value = false
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getMemberRegisterCountList()
+})
+</script>
diff --git a/src/views/mall/home/components/OperationDataCard.vue b/src/views/mall/home/components/OperationDataCard.vue
new file mode 100644
index 00000000..cae09a3e
--- /dev/null
+++ b/src/views/mall/home/components/OperationDataCard.vue
@@ -0,0 +1,91 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <CardTitle title="运营数据" />
+    </template>
+    <div class="flex flex-row flex-wrap items-center gap-8 p-4">
+      <div
+        v-for="item in data"
+        :key="item.name"
+        class="h-20 w-20% flex flex-col cursor-pointer items-center justify-center gap-2"
+        @click="handleClick(item.routerName)"
+      >
+        <CountTo
+          :prefix="item.prefix"
+          :end-val="item.value"
+          :decimals="item.decimals"
+          class="text-3xl"
+        />
+        <span class="text-center">{{ item.name }}</span>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script lang="ts" setup>
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
+import * as PayStatisticsApi from '@/api/mall/statistics/pay'
+import { CardTitle } from '@/components/Card'
+
+/** 运营数据卡片 */
+defineOptions({ name: 'OperationDataCard' })
+
+const router = useRouter() // 路由
+
+/** 数据 */
+const data = reactive({
+  orderUndelivered: { name: '待发货订单', value: 9, routerName: 'TradeOrder' },
+  orderAfterSaleApply: { name: '退款中订单', value: 4, routerName: 'TradeAfterSale' },
+  orderWaitePickUp: { name: '待核销订单', value: 0, routerName: 'TradeOrder' },
+  productAlertStock: { name: '库存预警', value: 0, routerName: 'ProductSpu' },
+  productForSale: { name: '上架商品', value: 0, routerName: 'ProductSpu' },
+  productInWarehouse: { name: '仓库商品', value: 0, routerName: 'ProductSpu' },
+  withdrawAuditing: { name: '提现待审核', value: 0, routerName: 'TradeBrokerageWithdraw' },
+  rechargePrice: {
+    name: '账户充值',
+    value: 0.0,
+    prefix: '￥',
+    decimals: 2,
+    routerName: 'PayWalletRecharge'
+  }
+})
+
+/** 查询订单数据 */
+const getOrderData = async () => {
+  const orderCount = await TradeStatisticsApi.getOrderCount()
+  data.orderUndelivered.value = orderCount.undelivered
+  data.orderAfterSaleApply.value = orderCount.afterSaleApply
+  data.orderWaitePickUp.value = orderCount.pickUp
+  data.withdrawAuditing.value = orderCount.auditingWithdraw
+}
+
+/** 查询商品数据 */
+const getProductData = async () => {
+  // TODO: @芋艿：这个接口的返回值，是不是用命名字段更好些？
+  const productCount = await ProductSpuApi.getTabsCount()
+  data.productForSale.value = productCount['0']
+  data.productInWarehouse.value = productCount['1']
+  data.productAlertStock.value = productCount['3']
+}
+
+/** 查询钱包充值数据 */
+const getWalletRechargeData = async () => {
+  data.rechargePrice.value = await PayStatisticsApi.getWalletRechargePrice()
+}
+
+/**
+ * 跳转到对应页面
+ *
+ * @param routerName 路由页面组件的名称
+ */
+const handleClick = (routerName: string) => {
+  router.push({ name: routerName })
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getOrderData()
+  getProductData()
+  getWalletRechargeData()
+})
+</script>
diff --git a/src/views/mall/home/components/ShortcutCard.vue b/src/views/mall/home/components/ShortcutCard.vue
new file mode 100644
index 00000000..9fdd5cd4
--- /dev/null
+++ b/src/views/mall/home/components/ShortcutCard.vue
@@ -0,0 +1,79 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <CardTitle title="快捷入口" />
+    </template>
+    <div class="flex flex-row flex-wrap gap-8 p-4">
+      <div
+        v-for="menu in menuList"
+        :key="menu.name"
+        class="h-20 w-20% flex flex-col cursor-pointer items-center justify-center gap-2"
+        @click="handleMenuClick(menu.routerName)"
+      >
+        <div :class="menu.bgColor" class="rounded p-3 text-white">
+          <Icon :icon="menu.icon" class="text-7.5!" />
+        </div>
+        <span>{{ menu.name }}</span>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script lang="ts" setup>
+/** 快捷入口卡片 */
+import { CardTitle } from '@/components/Card'
+
+defineOptions({ name: 'ShortcutCard' })
+
+const router = useRouter() // 路由
+
+/** 菜单列表 */
+const menuList = [
+  { name: '用户管理', icon: 'ep:user-filled', bgColor: 'bg-red-400', routerName: 'MemberUser' },
+  {
+    name: '商品管理',
+    icon: 'fluent-mdl2:product',
+    bgColor: 'bg-orange-400',
+    routerName: 'ProductSpu'
+  },
+  { name: '订单管理', icon: 'ep:list', bgColor: 'bg-yellow-500', routerName: 'TradeOrder' },
+  {
+    name: '售后管理',
+    icon: 'ri:refund-2-line',
+    bgColor: 'bg-green-600',
+    routerName: 'TradeAfterSale'
+  },
+  {
+    name: '分销管理',
+    icon: 'fa-solid:project-diagram',
+    bgColor: 'bg-cyan-500',
+    routerName: 'TradeBrokerageUser'
+  },
+  {
+    name: '优惠券',
+    icon: 'ep:ticket',
+    bgColor: 'bg-blue-500',
+    routerName: 'PromotionCoupon'
+  },
+  {
+    name: '拼团活动',
+    icon: 'fa:group',
+    bgColor: 'bg-purple-500',
+    routerName: 'PromotionBargainActivity'
+  },
+  {
+    name: '佣金提现',
+    icon: 'vaadin:money-withdraw',
+    bgColor: 'bg-rose-500',
+    routerName: 'TradeBrokerageWithdraw'
+  }
+]
+
+/**
+ * 跳转到菜单对应页面
+ *
+ * @param routerName 路由页面组件的名称
+ */
+const handleMenuClick = (routerName: string) => {
+  router.push({ name: routerName })
+}
+</script>
diff --git a/src/views/mall/home/components/TradeTrendCard.vue b/src/views/mall/home/components/TradeTrendCard.vue
new file mode 100644
index 00000000..6aa9fdcc
--- /dev/null
+++ b/src/views/mall/home/components/TradeTrendCard.vue
@@ -0,0 +1,208 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="flex flex-row items-center justify-between">
+        <CardTitle title="交易量趋势" />
+        <!-- 查询条件 -->
+        <div class="flex flex-row items-center gap-2">
+          <el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange">
+            <el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :label="key">
+              {{ value.name }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+      </div>
+    </template>
+    <!-- 折线图 -->
+    <Echart :height="300" :options="eChartOptions" />
+  </el-card>
+</template>
+<script lang="ts" setup>
+import dayjs, { Dayjs } from 'dayjs'
+import { EChartsOption } from 'echarts'
+import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
+import { fenToYuan } from '@/utils'
+import { formatDate } from '@/utils/formatTime'
+import { CardTitle } from '@/components/Card'
+
+/** 交易量趋势 */
+defineOptions({ name: 'TradeTrendCard' })
+
+enum TimeRangeTypeEnum {
+  DAY30 = 1,
+  WEEK = 7,
+  MONTH = 30,
+  YEAR = 365
+} // 日期类型
+const timeRangeType = ref(TimeRangeTypeEnum.DAY30) // 日期快捷选择按钮, 默认30天
+const loading = ref(true) // 加载中
+// 时间范围 Map
+const timeRange = new Map()
+  .set(TimeRangeTypeEnum.DAY30, {
+    name: '30天',
+    series: [
+      { name: '订单金额', type: 'bar', smooth: true, data: [] },
+      { name: '订单数量', type: 'line', smooth: true, data: [] }
+    ]
+  })
+  .set(TimeRangeTypeEnum.WEEK, {
+    name: '周',
+    series: [
+      { name: '上周金额', type: 'bar', smooth: true, data: [] },
+      { name: '本周金额', type: 'bar', smooth: true, data: [] },
+      { name: '上周数量', type: 'line', smooth: true, data: [] },
+      { name: '本周数量', type: 'line', smooth: true, data: [] }
+    ]
+  })
+  .set(TimeRangeTypeEnum.MONTH, {
+    name: '月',
+    series: [
+      { name: '上月金额', type: 'bar', smooth: true, data: [] },
+      { name: '本月金额', type: 'bar', smooth: true, data: [] },
+      { name: '上月数量', type: 'line', smooth: true, data: [] },
+      { name: '本月数量', type: 'line', smooth: true, data: [] }
+    ]
+  })
+  .set(TimeRangeTypeEnum.YEAR, {
+    name: '年',
+    series: [
+      { name: '去年金额', type: 'bar', smooth: true, data: [] },
+      { name: '今年金额', type: 'bar', smooth: true, data: [] },
+      { name: '去年数量', type: 'line', smooth: true, data: [] },
+      { name: '今年数量', type: 'line', smooth: true, data: [] }
+    ]
+  })
+/** 图表配置 */
+const eChartOptions = reactive<EChartsOption>({
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true
+  },
+  legend: {
+    top: 50,
+    data: []
+  },
+  series: [],
+  toolbox: {
+    feature: {
+      // 数据区域缩放
+      dataZoom: {
+        yAxisIndex: false // Y轴不缩放
+      },
+      brush: {
+        type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
+      },
+      saveAsImage: { show: true, name: '订单量趋势' } // 保存为图片
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    },
+    padding: [5, 10]
+  },
+  xAxis: {
+    type: 'category',
+    inverse: true,
+    boundaryGap: false,
+    axisTick: {
+      show: false
+    },
+    data: [],
+    axisLabel: {
+      formatter: (date: string) => {
+        switch (timeRangeType.value) {
+          case TimeRangeTypeEnum.DAY30:
+            return formatDate(date, 'MM-DD')
+          case TimeRangeTypeEnum.WEEK:
+            let weekDay = formatDate(date, 'ddd')
+            if (weekDay == '0') weekDay = '日'
+            return '周' + weekDay
+          case TimeRangeTypeEnum.MONTH:
+            return formatDate(date, 'D')
+          case TimeRangeTypeEnum.YEAR:
+            return formatDate(date, 'M') + '月'
+          default:
+            return date
+        }
+      }
+    }
+  },
+  yAxis: {
+    axisTick: {
+      show: false
+    }
+  }
+}) as EChartsOption
+
+/** 时间范围类型单选按钮选中 */
+const handleTimeRangeTypeChange = async () => {
+  // 设置时间范围
+  let beginTime: Dayjs
+  let endTime: Dayjs
+  switch (timeRangeType.value) {
+    case TimeRangeTypeEnum.WEEK:
+      beginTime = dayjs().startOf('week')
+      endTime = dayjs().endOf('week')
+      break
+    case TimeRangeTypeEnum.MONTH:
+      beginTime = dayjs().startOf('month')
+      endTime = dayjs().endOf('month')
+      break
+    case TimeRangeTypeEnum.YEAR:
+      beginTime = dayjs().startOf('year')
+      endTime = dayjs().endOf('year')
+      break
+    case TimeRangeTypeEnum.DAY30:
+    default:
+      beginTime = dayjs().subtract(30, 'day').startOf('d')
+      endTime = dayjs().endOf('d')
+      break
+  }
+  // 发送时间范围选中事件
+  await getOrderCountTrendComparison(beginTime, endTime)
+}
+
+/** 查询订单数量趋势对照数据 */
+const getOrderCountTrendComparison = async (
+  beginTime: dayjs.ConfigType,
+  endTime: dayjs.ConfigType
+) => {
+  loading.value = true
+  // 查询数据
+  const list = await TradeStatisticsApi.getOrderCountTrendComparison(
+    timeRangeType.value,
+    beginTime,
+    endTime
+  )
+  // 处理数据
+  const dates: string[] = []
+  const series = [...timeRange.get(timeRangeType.value).series]
+  for (let item of list) {
+    dates.push(item.value.date)
+    if (series.length === 2) {
+      series[0].data.push(fenToYuan(item?.value?.orderPayPrice || 0)) // 当前金额
+      series[1].data.push(fenToYuan(item?.value?.orderPayCount || 0)) // 对照数量
+    } else {
+      series[0].data.push(fenToYuan(item?.reference?.orderPayPrice || 0)) // 对照金额
+      series[1].data.push(fenToYuan(item?.value?.orderPayPrice || 0)) // 当前金额
+      series[2].data.push(item?.reference?.orderPayCount || 0) // 对照数量
+      series[3].data.push(item?.value?.orderPayCount || 0) // 当前数量
+    }
+  }
+  eChartOptions.xAxis!['data'] = dates
+  eChartOptions.series = series
+  // legend在4个切换到2个的时候，还是显示成4个，需要手动配置一下
+  eChartOptions.legend['data'] = series.map((item) => item.name)
+  loading.value = false
+}
+
+/** 初始化 **/
+onMounted(() => {
+  handleTimeRangeTypeChange()
+})
+</script>
diff --git a/src/views/mall/home/index.vue b/src/views/mall/home/index.vue
new file mode 100644
index 00000000..95e2e1da
--- /dev/null
+++ b/src/views/mall/home/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="flex flex-col">
+    <!-- 数据对照 -->
+    <el-row :gutter="16" class="row">
+      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
+        <ComparisonCard
+          tag="今日"
+          title="销售额"
+          prefix="￥"
+          ::decimals="2"
+          :value="fenToYuan(orderComparison?.value?.orderPayPrice || 0)"
+          :reference="fenToYuan(orderComparison?.reference?.orderPayPrice || 0)"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
+        <ComparisonCard
+          tag="今日"
+          title="用户访问量"
+          :value="userComparison?.value?.visitUserCount || 0"
+          :reference="userComparison?.reference?.visitUserCount || 0"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
+        <ComparisonCard
+          tag="今日"
+          title="订单量"
+          :value="fenToYuan(orderComparison?.value?.orderPayCount || 0)"
+          :reference="fenToYuan(orderComparison?.reference?.orderPayCount || 0)"
+        />
+      </el-col>
+      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
+        <ComparisonCard
+          tag="今日"
+          title="新增用户"
+          :value="userComparison?.value?.createUserCount || 0"
+          :reference="userComparison?.reference?.createUserCount || 0"
+        />
+      </el-col>
+    </el-row>
+    <el-row :gutter="16" class="row">
+      <el-col :md="12">
+        <!-- 快捷入口 -->
+        <ShortcutCard />
+      </el-col>
+      <el-col :md="12">
+        <!-- 运营数据 -->
+        <OperationDataCard />
+      </el-col>
+    </el-row>
+    <el-row :gutter="16" class="mb-4">
+      <el-col :md="18" :sm="24">
+        <!-- 会员概览 -->
+        <MemberFunnelCard />
+      </el-col>
+      <el-col :md="6" :sm="24">
+        <!-- 会员终端 -->
+        <MemberTerminalCard />
+      </el-col>
+    </el-row>
+    <!-- 交易量趋势 -->
+    <TradeTrendCard class="mb-4" />
+    <!-- 会员统计 -->
+    <MemberStatisticsCard />
+  </div>
+</template>
+<script lang="ts" setup>
+import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
+import * as MemberStatisticsApi from '@/api/mall/statistics/member'
+import {
+  TradeOrderSummaryRespVO,
+  TradeStatisticsComparisonRespVO
+} from '@/api/mall/statistics/trade'
+import { MemberCountRespVO } from '@/api/mall/statistics/member'
+import { fenToYuan } from '@/utils'
+import ComparisonCard from './components/ComparisonCard.vue'
+import MemberStatisticsCard from './components/MemberStatisticsCard.vue'
+import OperationDataCard from './components/OperationDataCard.vue'
+import ShortcutCard from './components/ShortcutCard.vue'
+import TradeTrendCard from './components/TradeTrendCard.vue'
+import MemberTerminalCard from '@/views/mall/statistics/member/components/MemberTerminalCard.vue'
+import MemberFunnelCard from '@/views/mall/statistics/member/components/MemberFunnelCard.vue'
+
+/** 商城首页 */
+defineOptions({ name: 'MallHome' })
+
+const loading = ref(true) // 加载中
+const orderComparison = ref<TradeStatisticsComparisonRespVO<TradeOrderSummaryRespVO>>() // 交易对照数据
+const userComparison = ref<TradeStatisticsComparisonRespVO<MemberCountRespVO>>() // 用户对照数据
+
+/** 查询交易对照卡片数据 */
+const getOrderComparison = async () => {
+  orderComparison.value = await TradeStatisticsApi.getOrderComparison()
+}
+
+/** 查询会员用户数量对照卡片数据 */
+const getUserCountComparison = async () => {
+  userComparison.value = await MemberStatisticsApi.getUserCountComparison()
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  loading.value = true
+  await Promise.all([getOrderComparison(), getUserCountComparison()])
+  loading.value = false
+})
+</script>
+<style lang="scss" scoped>
+.row {
+  .el-col {
+    margin-bottom: 1rem;
+  }
+}
+</style>
diff --git a/src/views/mall/statistics/member/components/MemberFunnelCard.vue b/src/views/mall/statistics/member/components/MemberFunnelCard.vue
new file mode 100644
index 00000000..15c954e1
--- /dev/null
+++ b/src/views/mall/statistics/member/components/MemberFunnelCard.vue
@@ -0,0 +1,119 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="my--1.5 flex flex-row items-center justify-between">
+        <CardTitle title="会员概览" />
+        <!-- 查询条件 -->
+        <ShortcutDateRangePicker @change="handleTimeRangeChange" />
+      </div>
+    </template>
+    <div class="min-w-225 py-1.75" v-loading="loading">
+      <div class="relative h-24 flex">
+        <div class="h-full w-75% bg-blue-50 <lg:w-35% <xl:w-55%">
+          <div class="ml-15 h-full flex flex-col justify-center">
+            <div class="font-bold">
+              注册用户数量：{{ analyseData?.comparison?.value?.userCount || 0 }}
+            </div>
+            <div class="mt-2 text-3.5">
+              环比增长率：{{
+                calculateRelativeRate(
+                  analyseData?.comparison?.value?.userCount,
+                  analyseData?.comparison?.reference?.userCount
+                )
+              }}%
+            </div>
+          </div>
+        </div>
+        <div
+          class="trapezoid1 ml--38.5 mt-1.5 h-full w-77 flex flex-col items-center justify-center bg-blue-5 text-3.5 text-white"
+        >
+          <span class="text-6 font-bold">{{ analyseData?.visitorCount || 0 }}</span>
+          <span>访客</span>
+        </div>
+      </div>
+      <div class="relative h-24 flex">
+        <div class="h-full w-75% flex bg-cyan-50 <lg:w-35% <xl:w-55%">
+          <div class="ml-15 h-full flex flex-col justify-center">
+            <div class="font-bold">
+              活跃用户数量：{{ analyseData?.comparison?.value?.activeUserCount || 0 }}
+            </div>
+            <div class="mt-2 text-3.5">
+              环比增长率：{{
+                calculateRelativeRate(
+                  analyseData?.comparison?.value?.activeUserCount,
+                  analyseData?.comparison?.reference?.activeUserCount
+                )
+              }}%
+            </div>
+          </div>
+        </div>
+        <div
+          class="trapezoid2 ml--28 mt-1.7 h-25 w-56 flex flex-col items-center justify-center bg-cyan-5 text-3.5 text-white"
+        >
+          <span class="text-6 font-bold">{{ analyseData?.orderUserCount || 0 }}</span>
+          <span>下单</span>
+        </div>
+      </div>
+      <div class="relative h-24 flex">
+        <div class="w-75% flex bg-slate-50 <lg:w-35% <xl:w-55%">
+          <div class="ml-15 h-full flex flex-row gap-x-16">
+            <div class="flex flex-col justify-center">
+              <div class="font-bold">
+                充值用户数量：{{ analyseData?.comparison?.value?.rechargeUserCount || 0 }}
+              </div>
+              <div class="mt-2 text-3.5">
+                环比增长率：{{
+                  calculateRelativeRate(
+                    analyseData?.comparison?.value?.rechargeUserCount,
+                    analyseData?.comparison?.reference?.rechargeUserCount
+                  )
+                }}%
+              </div>
+            </div>
+            <div class="flex flex-col justify-center">
+              <div class="font-bold">客单价：{{ fenToYuan(analyseData?.atv || 0) }}</div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="trapezoid3 ml--18 mt-3.25 h-23 w-36 flex flex-col items-center justify-center bg-slate-5 text-3.5 text-white"
+        >
+          <span class="text-6 font-bold">{{ analyseData?.payUserCount || 0 }}</span>
+          <span>成交用户</span>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script lang="ts" setup>
+import * as MemberStatisticsApi from '@/api/mall/statistics/member'
+import dayjs from 'dayjs'
+import { calculateRelativeRate, fenToYuan } from '@/utils'
+import { MemberAnalyseRespVO } from '@/api/mall/statistics/member'
+import { CardTitle } from '@/components/Card'
+
+/** 会员概览卡片 */
+defineOptions({ name: 'MemberFunnelCard' })
+
+const loading = ref(true) // 加载中
+const analyseData = ref<MemberAnalyseRespVO>() // 会员分析数据
+
+/** 查询会员概览数据列表 */
+const handleTimeRangeChange = async (times: [dayjs.ConfigType, dayjs.ConfigType]) => {
+  loading.value = true
+  // 查询数据
+  analyseData.value = await MemberStatisticsApi.getMemberAnalyse({ times })
+  loading.value = false
+}
+</script>
+<style lang="scss" scoped>
+.trapezoid1 {
+  transform: perspective(5em) rotateX(-11deg);
+}
+.trapezoid2 {
+  transform: perspective(7em) rotateX(-20deg);
+}
+.trapezoid3 {
+  transform: perspective(3em) rotateX(-13deg);
+}
+</style>
diff --git a/src/views/mall/statistics/member/components/MemberTerminalCard.vue b/src/views/mall/statistics/member/components/MemberTerminalCard.vue
new file mode 100644
index 00000000..7bbab76c
--- /dev/null
+++ b/src/views/mall/statistics/member/components/MemberTerminalCard.vue
@@ -0,0 +1,69 @@
+<template>
+  <el-card shadow="never" v-loading="loading">
+    <template #header>
+      <CardTitle title="会员终端" />
+    </template>
+    <Echart :height="300" :options="terminalChartOptions" />
+  </el-card>
+</template>
+<script lang="ts" setup>
+import * as MemberStatisticsApi from '@/api/mall/statistics/member'
+import { EChartsOption } from 'echarts'
+import { MemberTerminalStatisticsRespVO } from '@/api/mall/statistics/member'
+import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
+import { CardTitle } from '@/components/Card'
+
+/** 会员终端卡片 */
+defineOptions({ name: 'MemberTerminalCard' })
+
+const loading = ref(true) // 加载中
+
+/** 会员终端统计图配置 */
+const terminalChartOptions = reactive<EChartsOption>({
+  tooltip: {
+    trigger: 'item',
+    confine: true,
+    formatter: '{a} <br/>{b} : {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'right'
+  },
+  roseType: 'area',
+  series: [
+    {
+      name: '会员终端',
+      type: 'pie',
+      label: {
+        show: false
+      },
+      labelLine: {
+        show: false
+      },
+      data: []
+    }
+  ]
+}) as EChartsOption
+
+/** 按照终端，查询会员统计列表 */
+const getMemberTerminalStatisticsList = async () => {
+  loading.value = true
+  const list = await MemberStatisticsApi.getMemberTerminalStatisticsList()
+  const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL)
+  terminalChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
+    const userCount = list.find(
+      (item: MemberTerminalStatisticsRespVO) => item.terminal === dictData.value
+    )?.userCount
+    return {
+      name: dictData.label,
+      value: userCount || 0
+    }
+  })
+  loading.value = false
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getMemberTerminalStatisticsList()
+})
+</script>
diff --git a/src/views/mall/statistics/member/index.vue b/src/views/mall/statistics/member/index.vue
index e76e861c..713f7776 100644
--- a/src/views/mall/statistics/member/index.vue
+++ b/src/views/mall/statistics/member/index.vue
@@ -44,118 +44,20 @@
     </el-row>
     <el-row :gutter="16" class="mb-4">
       <el-col :md="18" :sm="24">
-        <el-card shadow="never">
-          <template #header>
-            <div class="flex flex-row items-center justify-between">
-              <span>会员概览</span>
-              <!-- 查询条件 -->
-              <div class="my--2 flex flex-row items-center gap-2">
-                <el-radio-group v-model="shortcutDays" @change="handleDateTypeChange">
-                  <el-radio-button :label="1">昨天</el-radio-button>
-                  <el-radio-button :label="7">最近7天</el-radio-button>
-                  <el-radio-button :label="30">最近30天</el-radio-button>
-                </el-radio-group>
-                <el-date-picker
-                  v-model="queryParams.times"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  type="daterange"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-                  :shortcuts="shortcuts"
-                  class="!w-240px"
-                  @change="getMemberAnalyse"
-                />
-              </div>
-            </div>
-          </template>
-          <div class="min-w-225 py-1.75" v-loading="analyseLoading">
-            <div class="relative h-24 flex">
-              <div class="h-full w-75% bg-blue-50 <lg:w-35% <xl:w-55%">
-                <div class="ml-15 h-full flex flex-col justify-center">
-                  <div class="font-bold">
-                    注册用户数量：{{ analyseData?.comparison?.value?.userCount || 0 }}
-                  </div>
-                  <div class="mt-2 text-3.5">
-                    环比增长率：{{
-                      calculateRelativeRate(
-                        analyseData?.comparison?.value?.userCount,
-                        analyseData?.comparison?.reference?.userCount
-                      )
-                    }}%
-                  </div>
-                </div>
-              </div>
-              <div
-                class="trapezoid1 ml--38.5 mt-1.5 h-full w-77 flex flex-col items-center justify-center bg-blue-5 text-3.5 text-white"
-              >
-                <span class="text-6 font-bold">{{ analyseData?.visitorCount || 0 }}</span>
-                <span>访客</span>
-              </div>
-            </div>
-            <div class="relative h-24 flex">
-              <div class="h-full w-75% flex bg-cyan-50 <lg:w-35% <xl:w-55%">
-                <div class="ml-15 h-full flex flex-col justify-center">
-                  <div class="font-bold">
-                    活跃用户数量：{{ analyseData?.comparison?.value?.activeUserCount || 0 }}
-                  </div>
-                  <div class="mt-2 text-3.5">
-                    环比增长率：{{
-                      calculateRelativeRate(
-                        analyseData?.comparison?.value?.activeUserCount,
-                        analyseData?.comparison?.reference?.activeUserCount
-                      )
-                    }}%
-                  </div>
-                </div>
-              </div>
-              <div
-                class="trapezoid2 ml--28 mt-1.7 h-25 w-56 flex flex-col items-center justify-center bg-cyan-5 text-3.5 text-white"
-              >
-                <span class="text-6 font-bold">{{ analyseData?.orderUserCount || 0 }}</span>
-                <span>下单</span>
-              </div>
-            </div>
-            <div class="relative h-24 flex">
-              <div class="w-75% flex bg-slate-50 <lg:w-35% <xl:w-55%">
-                <div class="ml-15 h-full flex flex-row gap-x-16">
-                  <div class="flex flex-col justify-center">
-                    <div class="font-bold">
-                      充值用户数量：{{ analyseData?.comparison?.value?.rechargeUserCount || 0 }}
-                    </div>
-                    <div class="mt-2 text-3.5">
-                      环比增长率：{{
-                        calculateRelativeRate(
-                          analyseData?.comparison?.value?.rechargeUserCount,
-                          analyseData?.comparison?.reference?.rechargeUserCount
-                        )
-                      }}%
-                    </div>
-                  </div>
-                  <div class="flex flex-col justify-center">
-                    <div class="font-bold">客单价：{{ fenToYuan(analyseData?.atv || 0) }}</div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="trapezoid3 ml--18 mt-3.25 h-23 w-36 flex flex-col items-center justify-center bg-slate-5 text-3.5 text-white"
-              >
-                <span class="text-6 font-bold">{{ analyseData?.payUserCount || 0 }}</span>
-                <span>成交用户</span>
-              </div>
-            </div>
-          </div>
-        </el-card>
+        <!-- 会员概览 -->
+        <MemberFunnelCard />
       </el-col>
       <el-col :md="6" :sm="24">
-        <el-card shadow="never" header="会员终端" v-loading="loading">
-          <Echart :height="300" :options="terminalChartOptions" />
-        </el-card>
+        <!-- 会员终端 -->
+        <MemberTerminalCard />
       </el-col>
     </el-row>
     <el-row :gutter="16">
       <el-col :md="18" :sm="24">
-        <el-card shadow="never" header="会员地域分布">
+        <el-card shadow="never">
+          <template #header>
+            <CardTitle title="会员地域分布" />
+          </template>
           <el-row v-loading="loading">
             <el-col :span="10">
               <Echart :height="300" :options="areaChartOptions" />
@@ -206,7 +108,10 @@
         </el-card>
       </el-col>
       <el-col :md="6" :sm="24">
-        <el-card shadow="never" header="会员性别比例" v-loading="loading">
+        <el-card shadow="never" v-loading="loading">
+          <template #header>
+            <CardTitle title="会员性别比例" />
+          </template>
           <Echart :height="300" :options="sexChartOptions" />
         </el-card>
       </el-col>
@@ -214,63 +119,34 @@
   </div>
 </template>
 <script lang="ts" setup>
-import * as TradeMemberApi from '@/api/mall/statistics/member'
+import * as MemberStatisticsApi from '@/api/mall/statistics/member'
 import TradeTrendValue from '../trade/components/TradeTrendValue.vue'
 import { EChartsOption } from 'echarts'
 import china from '@/assets/map/json/china.json'
-import dayjs from 'dayjs'
 import { fenToYuan } from '@/utils'
-import * as DateUtil from '@/utils/formatTime'
 import {
-  MemberAnalyseRespVO,
   MemberAreaStatisticsRespVO,
   MemberSexStatisticsRespVO,
-  MemberAnalyseReqVO,
   MemberSummaryRespVO,
   MemberTerminalStatisticsRespVO
 } from '@/api/mall/statistics/member'
 import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
 import echarts from '@/plugins/echarts'
 import { fenToYuanFormat } from '@/utils/formatter'
+import MemberFunnelCard from './components/MemberFunnelCard.vue'
+import MemberTerminalCard from './components/MemberTerminalCard.vue'
+import { CardTitle } from '@/components/Card'
 
 /** 会员统计 */
 defineOptions({ name: 'MemberStatistics' })
 
 const loading = ref(true) // 加载中
-const analyseLoading = ref(true) // 会员概览加载中
-const queryParams = reactive<MemberAnalyseReqVO>({ times: ['', ''] }) // 会员概览查询参数
-const shortcutDays = ref(7) // 日期快捷天数（单选按钮组）, 默认7天
 const summary = ref<MemberSummaryRespVO>() // 会员统计数据
-const analyseData = ref<MemberAnalyseRespVO>() // 会员分析数据
 const areaStatisticsList = shallowRef<MemberAreaStatisticsRespVO[]>() // 省份会员统计
 
 // 注册地图
 echarts?.registerMap('china', china!)
 
-/** 日期快捷选择 */
-const shortcuts = [
-  {
-    text: '昨天',
-    value: () => DateUtil.getDayRange(new Date(), -1)
-  },
-  {
-    text: '最近7天',
-    value: () => DateUtil.getLast7Days()
-  },
-  {
-    text: '本月',
-    value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')]
-  },
-  {
-    text: '最近30天',
-    value: () => DateUtil.getLast30Days()
-  },
-  {
-    text: '最近1年',
-    value: () => DateUtil.getLast1Year()
-  }
-]
-
 /** 会员终端统计图配置 */
 const terminalChartOptions = reactive<EChartsOption>({
   tooltip: {
@@ -357,37 +233,14 @@ const areaChartOptions = reactive<EChartsOption>({
   ]
 }) as EChartsOption
 
-/** 计算环比 */
-const calculateRelativeRate = (value?: number, reference?: number) => {
-  // 防止除0
-  if (!reference) return 0
-
-  return ((100 * ((value || 0) - reference)) / reference).toFixed(0)
-}
-
-/** 设置时间范围 */
-function setTimes() {
-  const beginDate = dayjs().subtract(shortcutDays.value, 'd')
-  const yesterday = dayjs().subtract(1, 'd')
-  queryParams.times = DateUtil.getDateRange(beginDate, yesterday)
-}
-
-/** 处理会员概览查询（日期单选按钮组选择后） */
-const handleDateTypeChange = async () => {
-  // 设置时间范围
-  setTimes()
-  // 查询数据
-  await getMemberAnalyse()
-}
-
 /** 查询会员统计 */
 const getMemberSummary = async () => {
-  summary.value = await TradeMemberApi.getMemberSummary()
+  summary.value = await MemberStatisticsApi.getMemberSummary()
 }
 
 /** 按照省份，查询会员统计列表 */
 const getMemberAreaStatisticsList = async () => {
-  const list = await TradeMemberApi.getMemberAreaStatisticsList()
+  const list = await MemberStatisticsApi.getMemberAreaStatisticsList()
   areaStatisticsList.value = list.map((item: MemberAreaStatisticsRespVO) => {
     return {
       ...item,
@@ -412,7 +265,7 @@ const getMemberAreaStatisticsList = async () => {
 
 /** 按照性别，查询会员统计列表 */
 const getMemberSexStatisticsList = async () => {
-  const list = await TradeMemberApi.getMemberSexStatisticsList()
+  const list = await MemberStatisticsApi.getMemberSexStatisticsList()
   const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
   sexChartOptions.series[0].data = dictDataList.map((dictData: DictDataType) => {
     const userCount = list.find((item: MemberSexStatisticsRespVO) => item.sex === dictData.value)
@@ -426,7 +279,7 @@ const getMemberSexStatisticsList = async () => {
 
 /** 按照终端，查询会员统计列表 */
 const getMemberTerminalStatisticsList = async () => {
-  const list = await TradeMemberApi.getMemberTerminalStatisticsList()
+  const list = await MemberStatisticsApi.getMemberTerminalStatisticsList()
   const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL)
   terminalChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
     const userCount = list.find(
@@ -439,20 +292,6 @@ const getMemberTerminalStatisticsList = async () => {
   })
 }
 
-/** 查询会员概览数据列表 */
-const getMemberAnalyse = async () => {
-  analyseLoading.value = true
-  const times = queryParams.times
-  // 开始与截止在同一天的, 环比出不来, 需要延长一天
-  if (DateUtil.isSameDay(times[0], times[1])) {
-    // 前天
-    times[0] = DateUtil.formatDate(dayjs(times[0]).subtract(1, 'd'))
-  }
-  // 查询数据
-  analyseData.value = await TradeMemberApi.getMemberAnalyse({ times })
-  analyseLoading.value = false
-}
-
 /** 初始化 **/
 onMounted(async () => {
   loading.value = true
@@ -460,8 +299,7 @@ onMounted(async () => {
     getMemberSummary(),
     getMemberTerminalStatisticsList(),
     getMemberAreaStatisticsList(),
-    getMemberSexStatisticsList(),
-    handleDateTypeChange()
+    getMemberSexStatisticsList()
   ])
   loading.value = false
 })
@@ -472,13 +310,4 @@ onMounted(async () => {
     margin-bottom: 1rem;
   }
 }
-.trapezoid1 {
-  transform: perspective(5em) rotateX(-11deg);
-}
-.trapezoid2 {
-  transform: perspective(7em) rotateX(-20deg);
-}
-.trapezoid3 {
-  transform: perspective(3em) rotateX(-13deg);
-}
 </style>
diff --git a/src/views/mall/statistics/trade/index.vue b/src/views/mall/statistics/trade/index.vue
index 8fc2d0cb..e5290dca 100644
--- a/src/views/mall/statistics/trade/index.vue
+++ b/src/views/mall/statistics/trade/index.vue
@@ -59,25 +59,9 @@
       <template #header>
         <!-- 标题 -->
         <div class="flex flex-row items-center justify-between">
-          <span>交易状况</span>
+          <CardTitle title="交易状况" />
           <!-- 查询条件 -->
-          <div class="flex flex-row items-center gap-2">
-            <el-radio-group v-model="shortcutDays" @change="handleDateTypeChange">
-              <el-radio-button :label="1">昨天</el-radio-button>
-              <el-radio-button :label="7">最近7天</el-radio-button>
-              <el-radio-button :label="30">最近30天</el-radio-button>
-            </el-radio-group>
-            <el-date-picker
-              v-model="queryParams.times"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-              :shortcuts="shortcuts"
-              class="!w-240px"
-              @change="getTradeTrendData"
-            />
+          <ShortcutDateRangePicker ref="shortcutDateRangePicker" @change="getTradeTrendData">
             <el-button
               class="ml-4"
               @click="handleExport"
@@ -86,7 +70,7 @@
             >
               <Icon icon="ep:download" class="mr-1" />导出
             </el-button>
-          </div>
+          </ShortcutDateRangePicker>
         </div>
       </template>
       <!-- 统计值 -->
@@ -233,13 +217,11 @@ import { EChartsOption } from 'echarts'
 import {
   TradeStatisticsComparisonRespVO,
   TradeSummaryRespVO,
-  TradeTrendReqVO,
   TradeTrendSummaryRespVO
 } from '@/api/mall/statistics/trade'
-import dayjs from 'dayjs'
-import { fenToYuan } from '@/utils'
-import * as DateUtil from '@/utils/formatTime'
+import { calculateRelativeRate, fenToYuan } from '@/utils'
 import download from '@/utils/download'
+import { CardTitle } from '@/components/Card'
 
 /** 交易统计 */
 defineOptions({ name: 'TradeStatistics' })
@@ -249,34 +231,9 @@ const message = useMessage() // 消息弹窗
 const loading = ref(true) // 加载中
 const trendLoading = ref(true) // 交易状态加载中
 const exportLoading = ref(false) // 导出的加载中
-const queryParams = reactive<TradeTrendReqVO>({ times: ['', ''] }) // 交易状况查询参数
-const shortcutDays = ref(7) // 日期快捷天数（单选按钮组）, 默认7天
 const summary = ref<TradeStatisticsComparisonRespVO<TradeSummaryRespVO>>() // 交易统计数据
 const trendSummary = ref<TradeStatisticsComparisonRespVO<TradeTrendSummaryRespVO>>() // 交易状况统计数据
-
-/** 日期快捷选择 */
-const shortcuts = [
-  {
-    text: '昨天',
-    value: () => DateUtil.getDayRange(new Date(), -1)
-  },
-  {
-    text: '最近7天',
-    value: () => DateUtil.getLast7Days()
-  },
-  {
-    text: '本月',
-    value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')]
-  },
-  {
-    text: '最近30天',
-    value: () => DateUtil.getLast30Days()
-  },
-  {
-    text: '最近1年',
-    value: () => DateUtil.getLast1Year()
-  }
-]
+const shortcutDateRangePicker = ref()
 
 /** 折线图配置 */
 const lineChartOptions = reactive<EChartsOption>({
@@ -333,29 +290,6 @@ const lineChartOptions = reactive<EChartsOption>({
   }
 }) as EChartsOption
 
-/** 计算环比 */
-const calculateRelativeRate = (value?: number, reference?: number) => {
-  // 防止除0
-  if (!reference) return 0
-
-  return ((100 * ((value || 0) - reference)) / reference).toFixed(0)
-}
-
-/** 设置时间范围 */
-function setTimes() {
-  const beginDate = dayjs().subtract(shortcutDays.value, 'd')
-  const yesterday = dayjs().subtract(1, 'd')
-  queryParams.times = DateUtil.getDateRange(beginDate, yesterday)
-}
-
-/** 处理交易状况查询（日期单选按钮组选择后） */
-const handleDateTypeChange = async () => {
-  // 设置时间范围
-  setTimes()
-  // 查询数据
-  await getTradeTrendData()
-}
-
 /** 处理交易状况查询 */
 const getTradeTrendData = async () => {
   trendLoading.value = true
@@ -370,20 +304,14 @@ const getTradeStatisticsSummary = async () => {
 
 /** 查询交易状况数据统计 */
 const getTradeTrendSummary = async () => {
-  loading.value = true
-  trendSummary.value = await TradeStatisticsApi.getTradeTrendSummary(queryParams)
-  loading.value = false
+  const times = shortcutDateRangePicker.value.times
+  trendSummary.value = await TradeStatisticsApi.getTradeTrendSummary({ times })
 }
 
 /** 查询交易状况数据列表 */
 const getTradeTrendList = async () => {
-  const times = queryParams.times
-  // 开始与截止在同一天的, 折线图出不来, 需要延长一天
-  if (DateUtil.isSameDay(times[0], times[1])) {
-    // 前天
-    times[0] = DateUtil.formatDate(dayjs(times[0]).subtract(1, 'd'))
-  }
   // 查询数据
+  const times = shortcutDateRangePicker.value.times
   const list = await TradeStatisticsApi.getTradeTrendList({ times })
   // 处理数据
   for (let item of list) {
@@ -405,7 +333,8 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await TradeStatisticsApi.exportTradeTrend(queryParams)
+    const times = shortcutDateRangePicker.value.times
+    const data = await TradeStatisticsApi.exportTradeTrend({ times })
     download.excel(data, '交易状况.xls')
   } catch {
   } finally {
@@ -416,7 +345,6 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(async () => {
   await getTradeStatisticsSummary()
-  await handleDateTypeChange()
 })
 </script>
 <style lang="scss" scoped>

From 99172ea088332104ded558fd12a70326e4f0bdf5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 16 Oct 2023 09:57:46 +0800
Subject: [PATCH 05/10] =?UTF-8?q?code=20review=EF=BC=9A=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/promotion/article/index.ts       |  5 --
 .../mall/promotion/articleCategory/index.ts   |  5 --
 .../article/category/ArticleCategoryForm.vue  |  5 +-
 .../mall/promotion/article/category/index.vue | 34 +-------
 src/views/mall/promotion/article/index.vue    | 78 +------------------
 5 files changed, 10 insertions(+), 117 deletions(-)

diff --git a/src/api/mall/promotion/article/index.ts b/src/api/mall/promotion/article/index.ts
index c2941d05..824958ad 100644
--- a/src/api/mall/promotion/article/index.ts
+++ b/src/api/mall/promotion/article/index.ts
@@ -40,8 +40,3 @@ export const updateArticle = async (data: ArticleVO) => {
 export const deleteArticle = async (id: number) => {
   return await request.delete({ url: `/promotion/article/delete?id=` + id })
 }
-
-// 导出文章管理 Excel
-export const exportArticle = async (params) => {
-  return await request.download({ url: `/promotion/article/export-excel`, params })
-}
diff --git a/src/api/mall/promotion/articleCategory/index.ts b/src/api/mall/promotion/articleCategory/index.ts
index 2950d759..47f5e934 100644
--- a/src/api/mall/promotion/articleCategory/index.ts
+++ b/src/api/mall/promotion/articleCategory/index.ts
@@ -37,8 +37,3 @@ export const updateArticleCategory = async (data: ArticleCategoryVO) => {
 export const deleteArticleCategory = async (id: number) => {
   return await request.delete({ url: `/promotion/article-category/delete?id=` + id })
 }
-
-// 导出文章分类 Excel
-export const exportArticleCategory = async (params) => {
-  return await request.download({ url: `/promotion/article-category/export-excel`, params })
-}
diff --git a/src/views/mall/promotion/article/category/ArticleCategoryForm.vue b/src/views/mall/promotion/article/category/ArticleCategoryForm.vue
index 39b1fc0f..ac7e9f38 100644
--- a/src/views/mall/promotion/article/category/ArticleCategoryForm.vue
+++ b/src/views/mall/promotion/article/category/ArticleCategoryForm.vue
@@ -37,6 +37,7 @@
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
+import { CommonStatusEnum } from '@/utils/constants'
 
 defineOptions({ name: 'PromotionArticleCategoryForm' })
 
@@ -111,8 +112,8 @@ const resetForm = () => {
     id: undefined,
     name: undefined,
     picUrl: undefined,
-    status: undefined,
-    sort: undefined
+    status: CommonStatusEnum.ENABLE,
+    sort: 0
   }
   formRef.value?.resetFields()
 }
diff --git a/src/views/mall/promotion/article/category/index.vue b/src/views/mall/promotion/article/category/index.vue
index 32d385c3..73d1420c 100644
--- a/src/views/mall/promotion/article/category/index.vue
+++ b/src/views/mall/promotion/article/category/index.vue
@@ -56,16 +56,6 @@
           <Icon class="mr-5px" icon="ep:plus" />
           新增
         </el-button>
-        <el-button
-          v-hasPermi="['promotion:article-category:export']"
-          :loading="exportLoading"
-          plain
-          type="success"
-          @click="handleExport"
-        >
-          <Icon class="mr-5px" icon="ep:download" />
-          导出
-        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -73,19 +63,19 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
-      <el-table-column align="center" label="编号" prop="id" />
-      <el-table-column align="center" label="分类名称" prop="name" />
+      <el-table-column align="center" label="编号" prop="id" min-width="100" />
+      <el-table-column align="center" label="分类名称" prop="name" min-width="240" />
       <el-table-column label="分类图图" min-width="80">
         <template #default="{ row }">
           <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="状态" prop="status">
+      <el-table-column align="center" label="状态" prop="status" min-width="150">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="排序" prop="sort" />
+      <el-table-column align="center" label="排序" prop="sort" min-width="150" />
       <el-table-column
         :formatter="dateFormatter"
         align="center"
@@ -130,7 +120,6 @@
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
 import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
 import ArticleCategoryForm from './ArticleCategoryForm.vue'
 import { createImageViewer } from '@/components/ImageViewer'
@@ -203,21 +192,6 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await ArticleCategoryApi.exportArticleCategory(queryParams)
-    download.excel(data, '分类.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
-
 /** 初始化 **/
 onMounted(() => {
   getList()
diff --git a/src/views/mall/promotion/article/index.vue b/src/views/mall/promotion/article/index.vue
index 7f5f4b70..a5bbd73c 100644
--- a/src/views/mall/promotion/article/index.vue
+++ b/src/views/mall/promotion/article/index.vue
@@ -32,15 +32,6 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="文章作者" prop="author">
-        <el-input
-          v-model="queryParams.author"
-          class="!w-240px"
-          clearable
-          placeholder="请输入文章作者"
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态">
           <el-option
@@ -51,41 +42,6 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="关联商品" prop="spuId">
-        <el-select
-          v-model="queryParams.spuId"
-          class="!w-240px"
-          placeholder="全部"
-          @keyup.enter="handleQuery"
-        >
-          <el-option v-for="item in spuList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="热门" prop="recommendHot">
-        <el-select v-model="queryParams.recommendHot" class="!w-240px" clearable placeholder="全部">
-          <el-option
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="轮播图" prop="recommendBanner">
-        <el-select
-          v-model="queryParams.recommendBanner"
-          class="!w-240px"
-          clearable
-          placeholder="全部"
-        >
-          <el-option
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
@@ -115,16 +71,6 @@
           <Icon class="mr-5px" icon="ep:plus" />
           新增
         </el-button>
-        <el-button
-          v-hasPermi="['promotion:article:export']"
-          :loading="exportLoading"
-          plain
-          type="success"
-          @click="handleExport"
-        >
-          <Icon class="mr-5px" icon="ep:download" />
-          导出
-        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -215,9 +161,8 @@
 </template>
 
 <script lang="ts" setup>
-import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
 import * as ArticleApi from '@/api/mall/promotion/article'
 import ArticleForm from './ArticleForm.vue'
 import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
@@ -236,12 +181,9 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   categoryId: undefined,
-  spuId: undefined,
   title: null,
-  author: null,
   status: undefined,
-  recommendHot: undefined,
-  recommendBanner: undefined,
+  spuId: undefined,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
@@ -295,25 +237,11 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await ArticleApi.exportArticle(queryParams)
-    download.excel(data, '文章管理.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
-
 const categoryList = ref<ArticleCategoryApi.ArticleCategoryVO[]>([])
 const spuList = ref<ProductSpuApi.Spu[]>([])
 onMounted(async () => {
   await getList()
+  // 加载分类、商品列表
   categoryList.value =
     (await ArticleCategoryApi.getSimpleArticleCategoryList()) as ArticleCategoryApi.ArticleCategoryVO[]
   spuList.value = (await ProductSpuApi.getSpuSimpleList()) as ProductSpuApi.Spu[]

From e1a72779d4f29455a83837495317e74ec9608a84 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Mon, 16 Oct 2023 13:00:13 +0800
Subject: [PATCH 06/10] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=EF=BC=9AReview?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/statistics/common.ts             |  5 +++
 src/api/mall/statistics/member.ts             | 16 ++++-----
 src/api/mall/statistics/trade.ts              | 27 ++++++--------
 src/views/mall/home/index.vue                 | 10 +++---
 .../member/components/MemberFunnelCard.vue    | 14 ++++----
 src/views/mall/statistics/member/index.vue    |  4 +--
 src/views/mall/statistics/trade/index.vue     | 35 +++++++++----------
 7 files changed, 53 insertions(+), 58 deletions(-)
 create mode 100644 src/api/mall/statistics/common.ts

diff --git a/src/api/mall/statistics/common.ts b/src/api/mall/statistics/common.ts
new file mode 100644
index 00000000..3d964392
--- /dev/null
+++ b/src/api/mall/statistics/common.ts
@@ -0,0 +1,5 @@
+/** 数据对照 Response VO */
+export interface DataComparisonRespVO<T> {
+  value: T
+  reference: T
+}
diff --git a/src/api/mall/statistics/member.ts b/src/api/mall/statistics/member.ts
index e0d77e40..28d5a78c 100644
--- a/src/api/mall/statistics/member.ts
+++ b/src/api/mall/statistics/member.ts
@@ -1,6 +1,6 @@
 import request from '@/config/axios'
 import dayjs from 'dayjs'
-import { TradeStatisticsComparisonRespVO } from '@/api/mall/statistics/trade'
+import { DataComparisonRespVO } from '@/api/mall/statistics/common'
 import { formatDate } from '@/utils/formatTime'
 
 /** 会员分析 Request VO */
@@ -10,17 +10,17 @@ export interface MemberAnalyseReqVO {
 
 /** 会员分析 Response VO */
 export interface MemberAnalyseRespVO {
-  visitorCount: number
+  visitUserCount: number
   orderUserCount: number
   payUserCount: number
   atv: number
-  comparison: TradeStatisticsComparisonRespVO<MemberAnalyseComparisonRespVO>
+  comparison: DataComparisonRespVO<MemberAnalyseComparisonRespVO>
 }
 
 /** 会员分析对照数据 Response VO */
 export interface MemberAnalyseComparisonRespVO {
-  userCount: number
-  activeUserCount: number
+  registerUserCount: number
+  visitUserCount: number
   rechargeUserCount: number
 }
 
@@ -29,8 +29,8 @@ export interface MemberAreaStatisticsRespVO {
   areaId: number
   areaName: string
   userCount: number
-  orderCreateCount: number
-  orderPayCount: number
+  orderCreateUserCount: number
+  orderPayUserCount: number
   orderPayPrice: number
 }
 
@@ -106,7 +106,7 @@ export const getMemberTerminalStatisticsList = () => {
 
 // 获得用户数量量对照
 export const getUserCountComparison = () => {
-  return request.get<TradeStatisticsComparisonRespVO<MemberCountRespVO>>({
+  return request.get<DataComparisonRespVO<MemberCountRespVO>>({
     url: '/statistics/member/user-count-comparison'
   })
 }
diff --git a/src/api/mall/statistics/trade.ts b/src/api/mall/statistics/trade.ts
index 76da08ca..ef2a2b2b 100644
--- a/src/api/mall/statistics/trade.ts
+++ b/src/api/mall/statistics/trade.ts
@@ -1,12 +1,7 @@
 import request from '@/config/axios'
 import dayjs from 'dayjs'
 import { formatDate } from '@/utils/formatTime'
-
-/** 交易统计对照 Response VO */
-export interface TradeStatisticsComparisonRespVO<T> {
-  value: T
-  reference: T
-}
+import { DataComparisonRespVO } from '@/api/mall/statistics/common'
 
 /** 交易统计 Response VO */
 export interface TradeSummaryRespVO {
@@ -24,11 +19,11 @@ export interface TradeTrendReqVO {
 /** 交易状况统计 Response VO */
 export interface TradeTrendSummaryRespVO {
   time: string
-  turnover: number
+  turnoverPrice: number
   orderPayPrice: number
   rechargePrice: number
   expensePrice: number
-  balancePrice: number
+  orderWalletPayPrice: number
   brokerageSettlementPrice: number
   orderRefundPrice: number
 }
@@ -65,31 +60,31 @@ export interface TradeOrderTrendRespVO {
 
 // 查询交易统计
 export const getTradeStatisticsSummary = () => {
-  return request.get<TradeStatisticsComparisonRespVO<TradeSummaryRespVO>>({
+  return request.get<DataComparisonRespVO<TradeSummaryRespVO>>({
     url: '/statistics/trade/summary'
   })
 }
 
 // 获得交易状况统计
 export const getTradeTrendSummary = (params: TradeTrendReqVO) => {
-  return request.get<TradeStatisticsComparisonRespVO<TradeTrendSummaryRespVO>>({
+  return request.get<DataComparisonRespVO<TradeTrendSummaryRespVO>>({
     url: '/statistics/trade/trend/summary',
     params: formatDateParam(params)
   })
 }
 
 // 获得交易状况明细
-export const getTradeTrendList = (params: TradeTrendReqVO) => {
+export const getTradeStatisticsList = (params: TradeTrendReqVO) => {
   return request.get<TradeTrendSummaryRespVO[]>({
-    url: '/statistics/trade/trend/list',
+    url: '/statistics/trade/list',
     params: formatDateParam(params)
   })
 }
 
 // 导出交易状况明细
-export const exportTradeTrend = (params: TradeTrendReqVO) => {
+export const exportTradeStatisticsExcel = (params: TradeTrendReqVO) => {
   return request.download({
-    url: '/statistics/trade/trend/export-excel',
+    url: '/statistics/trade/export-excel',
     params: formatDateParam(params)
   })
 }
@@ -101,7 +96,7 @@ export const getOrderCount = async () => {
 
 // 获得交易订单数量对照
 export const getOrderComparison = async () => {
-  return await request.get<TradeStatisticsComparisonRespVO<TradeOrderSummaryRespVO>>({
+  return await request.get<DataComparisonRespVO<TradeOrderSummaryRespVO>>({
     url: `/statistics/trade/order-comparison`
   })
 }
@@ -112,7 +107,7 @@ export const getOrderCountTrendComparison = (
   beginTime: dayjs.ConfigType,
   endTime: dayjs.ConfigType
 ) => {
-  return request.get<TradeStatisticsComparisonRespVO<TradeOrderTrendRespVO>[]>({
+  return request.get<DataComparisonRespVO<TradeOrderTrendRespVO>[]>({
     url: '/statistics/trade/order-count-trend',
     params: { type, beginTime: formatDate(beginTime), endTime: formatDate(endTime) }
   })
diff --git a/src/views/mall/home/index.vue b/src/views/mall/home/index.vue
index 95e2e1da..ede05bff 100644
--- a/src/views/mall/home/index.vue
+++ b/src/views/mall/home/index.vue
@@ -66,10 +66,8 @@
 <script lang="ts" setup>
 import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
 import * as MemberStatisticsApi from '@/api/mall/statistics/member'
-import {
-  TradeOrderSummaryRespVO,
-  TradeStatisticsComparisonRespVO
-} from '@/api/mall/statistics/trade'
+import { DataComparisonRespVO } from '@/api/mall/statistics/common'
+import { TradeOrderSummaryRespVO } from '@/api/mall/statistics/trade'
 import { MemberCountRespVO } from '@/api/mall/statistics/member'
 import { fenToYuan } from '@/utils'
 import ComparisonCard from './components/ComparisonCard.vue'
@@ -84,8 +82,8 @@ import MemberFunnelCard from '@/views/mall/statistics/member/components/MemberFu
 defineOptions({ name: 'MallHome' })
 
 const loading = ref(true) // 加载中
-const orderComparison = ref<TradeStatisticsComparisonRespVO<TradeOrderSummaryRespVO>>() // 交易对照数据
-const userComparison = ref<TradeStatisticsComparisonRespVO<MemberCountRespVO>>() // 用户对照数据
+const orderComparison = ref<DataComparisonRespVO<TradeOrderSummaryRespVO>>() // 交易对照数据
+const userComparison = ref<DataComparisonRespVO<MemberCountRespVO>>() // 用户对照数据
 
 /** 查询交易对照卡片数据 */
 const getOrderComparison = async () => {
diff --git a/src/views/mall/statistics/member/components/MemberFunnelCard.vue b/src/views/mall/statistics/member/components/MemberFunnelCard.vue
index 15c954e1..fc847ef3 100644
--- a/src/views/mall/statistics/member/components/MemberFunnelCard.vue
+++ b/src/views/mall/statistics/member/components/MemberFunnelCard.vue
@@ -12,13 +12,13 @@
         <div class="h-full w-75% bg-blue-50 <lg:w-35% <xl:w-55%">
           <div class="ml-15 h-full flex flex-col justify-center">
             <div class="font-bold">
-              注册用户数量：{{ analyseData?.comparison?.value?.userCount || 0 }}
+              注册用户数量：{{ analyseData?.comparison?.value?.registerUserCount || 0 }}
             </div>
             <div class="mt-2 text-3.5">
               环比增长率：{{
                 calculateRelativeRate(
-                  analyseData?.comparison?.value?.userCount,
-                  analyseData?.comparison?.reference?.userCount
+                  analyseData?.comparison?.value?.registerUserCount,
+                  analyseData?.comparison?.reference?.registerUserCount
                 )
               }}%
             </div>
@@ -27,7 +27,7 @@
         <div
           class="trapezoid1 ml--38.5 mt-1.5 h-full w-77 flex flex-col items-center justify-center bg-blue-5 text-3.5 text-white"
         >
-          <span class="text-6 font-bold">{{ analyseData?.visitorCount || 0 }}</span>
+          <span class="text-6 font-bold">{{ analyseData?.visitUserCount || 0 }}</span>
           <span>访客</span>
         </div>
       </div>
@@ -35,13 +35,13 @@
         <div class="h-full w-75% flex bg-cyan-50 <lg:w-35% <xl:w-55%">
           <div class="ml-15 h-full flex flex-col justify-center">
             <div class="font-bold">
-              活跃用户数量：{{ analyseData?.comparison?.value?.activeUserCount || 0 }}
+              活跃用户数量：{{ analyseData?.comparison?.value?.visitUserCount || 0 }}
             </div>
             <div class="mt-2 text-3.5">
               环比增长率：{{
                 calculateRelativeRate(
-                  analyseData?.comparison?.value?.activeUserCount,
-                  analyseData?.comparison?.reference?.activeUserCount
+                  analyseData?.comparison?.value?.visitUserCount,
+                  analyseData?.comparison?.reference?.visitUserCount
                 )
               }}%
             </div>
diff --git a/src/views/mall/statistics/member/index.vue b/src/views/mall/statistics/member/index.vue
index 713f7776..4790bd5a 100644
--- a/src/views/mall/statistics/member/index.vue
+++ b/src/views/mall/statistics/member/index.vue
@@ -82,14 +82,14 @@
                 />
                 <el-table-column
                   label="订单创建数量"
-                  prop="orderCreateCount"
+                  prop="orderCreateUserCount"
                   align="center"
                   min-width="135"
                   sortable
                 />
                 <el-table-column
                   label="订单支付数量"
-                  prop="orderPayCount"
+                  prop="orderPayUserCount"
                   align="center"
                   min-width="135"
                   sortable
diff --git a/src/views/mall/statistics/trade/index.vue b/src/views/mall/statistics/trade/index.vue
index e5290dca..7a7b905c 100644
--- a/src/views/mall/statistics/trade/index.vue
+++ b/src/views/mall/statistics/trade/index.vue
@@ -84,11 +84,11 @@
             icon-bg-color="text-blue-500"
             prefix="￥"
             :decimals="2"
-            :value="fenToYuan(trendSummary?.value?.turnover || 0)"
+            :value="fenToYuan(trendSummary?.value?.turnoverPrice || 0)"
             :percent="
               calculateRelativeRate(
-                trendSummary?.value?.turnover,
-                trendSummary?.reference?.turnover
+                trendSummary?.value?.turnoverPrice,
+                trendSummary?.reference?.turnoverPrice
               )
             "
           />
@@ -156,11 +156,11 @@
             icon-bg-color="text-cyan-500"
             prefix="￥"
             :decimals="2"
-            :value="fenToYuan(trendSummary?.value?.balancePrice || 0)"
+            :value="fenToYuan(trendSummary?.value?.orderWalletPayPrice || 0)"
             :percent="
               calculateRelativeRate(
-                trendSummary?.value?.balancePrice,
-                trendSummary?.reference?.balancePrice
+                trendSummary?.value?.orderWalletPayPrice,
+                trendSummary?.reference?.orderWalletPayPrice
               )
             "
           />
@@ -214,11 +214,8 @@ import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
 import TradeStatisticValue from './components/TradeStatisticValue.vue'
 import TradeTrendValue from './components/TradeTrendValue.vue'
 import { EChartsOption } from 'echarts'
-import {
-  TradeStatisticsComparisonRespVO,
-  TradeSummaryRespVO,
-  TradeTrendSummaryRespVO
-} from '@/api/mall/statistics/trade'
+import { DataComparisonRespVO } from '@/api/mall/statistics/common'
+import { TradeSummaryRespVO, TradeTrendSummaryRespVO } from '@/api/mall/statistics/trade'
 import { calculateRelativeRate, fenToYuan } from '@/utils'
 import download from '@/utils/download'
 import { CardTitle } from '@/components/Card'
@@ -231,14 +228,14 @@ const message = useMessage() // 消息弹窗
 const loading = ref(true) // 加载中
 const trendLoading = ref(true) // 交易状态加载中
 const exportLoading = ref(false) // 导出的加载中
-const summary = ref<TradeStatisticsComparisonRespVO<TradeSummaryRespVO>>() // 交易统计数据
-const trendSummary = ref<TradeStatisticsComparisonRespVO<TradeTrendSummaryRespVO>>() // 交易状况统计数据
+const summary = ref<DataComparisonRespVO<TradeSummaryRespVO>>() // 交易统计数据
+const trendSummary = ref<DataComparisonRespVO<TradeTrendSummaryRespVO>>() // 交易状况统计数据
 const shortcutDateRangePicker = ref()
 
 /** 折线图配置 */
 const lineChartOptions = reactive<EChartsOption>({
   dataset: {
-    dimensions: ['date', 'turnover', 'orderPayPrice', 'rechargePrice', 'expensePrice'],
+    dimensions: ['date', 'turnoverPrice', 'orderPayPrice', 'rechargePrice', 'expensePrice'],
     source: []
   },
   grid: {
@@ -293,7 +290,7 @@ const lineChartOptions = reactive<EChartsOption>({
 /** 处理交易状况查询 */
 const getTradeTrendData = async () => {
   trendLoading.value = true
-  await Promise.all([getTradeTrendSummary(), getTradeTrendList()])
+  await Promise.all([getTradeTrendSummary(), getTradeStatisticsList()])
   trendLoading.value = false
 }
 
@@ -309,13 +306,13 @@ const getTradeTrendSummary = async () => {
 }
 
 /** 查询交易状况数据列表 */
-const getTradeTrendList = async () => {
+const getTradeStatisticsList = async () => {
   // 查询数据
   const times = shortcutDateRangePicker.value.times
-  const list = await TradeStatisticsApi.getTradeTrendList({ times })
+  const list = await TradeStatisticsApi.getTradeStatisticsList({ times })
   // 处理数据
   for (let item of list) {
-    item.turnover = fenToYuan(item.turnover)
+    item.turnoverPrice = fenToYuan(item.turnoverPrice)
     item.orderPayPrice = fenToYuan(item.orderPayPrice)
     item.rechargePrice = fenToYuan(item.rechargePrice)
     item.expensePrice = fenToYuan(item.expensePrice)
@@ -334,7 +331,7 @@ const handleExport = async () => {
     // 发起导出
     exportLoading.value = true
     const times = shortcutDateRangePicker.value.times
-    const data = await TradeStatisticsApi.exportTradeTrend({ times })
+    const data = await TradeStatisticsApi.exportTradeStatisticsExcel({ times })
     download.excel(data, '交易状况.xls')
   } catch {
   } finally {

From 661e72bcfda629a14b09d70eb5a2b68ad37c0e5d Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Mon, 16 Oct 2023 13:15:17 +0800
Subject: [PATCH 07/10] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=EF=BC=9A=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/statistics/member/index.vue | 20 ++++++++++----------
 src/views/mall/statistics/trade/index.vue  |  1 -
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/views/mall/statistics/member/index.vue b/src/views/mall/statistics/member/index.vue
index 4790bd5a..2d4348e9 100644
--- a/src/views/mall/statistics/member/index.vue
+++ b/src/views/mall/statistics/member/index.vue
@@ -145,7 +145,7 @@ const summary = ref<MemberSummaryRespVO>() // 会员统计数据
 const areaStatisticsList = shallowRef<MemberAreaStatisticsRespVO[]>() // 省份会员统计
 
 // 注册地图
-echarts?.registerMap('china', china!)
+echarts?.registerMap('china', china as any)
 
 /** 会员终端统计图配置 */
 const terminalChartOptions = reactive<EChartsOption>({
@@ -207,8 +207,8 @@ const areaChartOptions = reactive<EChartsOption>({
     formatter: (params: any) => {
       return `${params?.data?.areaName || params?.name}<br/>
 会员数量：${params?.data?.userCount || 0}<br/>
-订单创建数量：${params?.data?.orderCreateCount || 0}<br/>
-订单支付数量：${params?.data?.orderPayCount || 0}<br/>
+订单创建数量：${params?.data?.orderCreateUserCount || 0}<br/>
+订单支付数量：${params?.data?.orderPayUserCount || 0}<br/>
 订单支付金额：${fenToYuan(params?.data?.orderPayPrice || 0)}`
     }
   },
@@ -254,20 +254,20 @@ const getMemberAreaStatisticsList = async () => {
   })
   let min = 0
   let max = 0
-  areaChartOptions.series[0].data = areaStatisticsList.value.map((item) => {
-    min = Math.min(min, item.orderPayCount)
-    max = Math.max(max, item.orderPayCount)
-    return { ...item, name: item.areaName, value: item.orderPayCount || 0 }
+  areaChartOptions.series![0].data = areaStatisticsList.value.map((item) => {
+    min = Math.min(min, item.orderPayUserCount || 0)
+    max = Math.max(max, item.orderPayUserCount || 0)
+    return { ...item, name: item.areaName, value: item.orderPayUserCount || 0 }
   })
-  areaChartOptions.visualMap.min = min
-  areaChartOptions.visualMap.max = max
+  areaChartOptions.visualMap!['min'] = min
+  areaChartOptions.visualMap!['max'] = max
 }
 
 /** 按照性别，查询会员统计列表 */
 const getMemberSexStatisticsList = async () => {
   const list = await MemberStatisticsApi.getMemberSexStatisticsList()
   const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
-  sexChartOptions.series[0].data = dictDataList.map((dictData: DictDataType) => {
+  sexChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
     const userCount = list.find((item: MemberSexStatisticsRespVO) => item.sex === dictData.value)
       ?.userCount
     return {
diff --git a/src/views/mall/statistics/trade/index.vue b/src/views/mall/statistics/trade/index.vue
index 7a7b905c..b7dfc667 100644
--- a/src/views/mall/statistics/trade/index.vue
+++ b/src/views/mall/statistics/trade/index.vue
@@ -225,7 +225,6 @@ defineOptions({ name: 'TradeStatistics' })
 
 const message = useMessage() // 消息弹窗
 
-const loading = ref(true) // 加载中
 const trendLoading = ref(true) // 交易状态加载中
 const exportLoading = ref(false) // 导出的加载中
 const summary = ref<DataComparisonRespVO<TradeSummaryRespVO>>() // 交易统计数据

From 2bfc9c3b13e40cfb8e83c06d012bd94165367648 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Mon, 16 Oct 2023 13:25:15 +0800
Subject: [PATCH 08/10] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=EF=BC=9A=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E4=BC=9A=E5=91=98=E6=80=A7=E5=88=AB=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=EF=BC=8C=E5=AD=98=E5=9C=A8=E6=9C=AA=E7=9F=A5=E7=9A=84=E6=83=85?=
 =?UTF-8?q?=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/statistics/member/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/mall/statistics/member/index.vue b/src/views/mall/statistics/member/index.vue
index 2d4348e9..67b28460 100644
--- a/src/views/mall/statistics/member/index.vue
+++ b/src/views/mall/statistics/member/index.vue
@@ -267,6 +267,7 @@ const getMemberAreaStatisticsList = async () => {
 const getMemberSexStatisticsList = async () => {
   const list = await MemberStatisticsApi.getMemberSexStatisticsList()
   const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
+  dictDataList.push({ label: '未知', value: null } as any)
   sexChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
     const userCount = list.find((item: MemberSexStatisticsRespVO) => item.sex === dictData.value)
       ?.userCount

From edfd03903f2c9ebff4446e3d93c0fe07e416d7e3 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Mon, 16 Oct 2023 14:26:04 +0800
Subject: [PATCH 09/10] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=EF=BC=9A=E4=BC=9A?=
 =?UTF-8?q?=E5=91=98=E7=BB=88=E7=AB=AF=E7=BB=9F=E8=AE=A1=EF=BC=8C=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E6=9C=AA=E7=9F=A5=E7=BB=88=E7=AB=AF=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/statistics/member/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/mall/statistics/member/index.vue b/src/views/mall/statistics/member/index.vue
index 67b28460..0d77f6c7 100644
--- a/src/views/mall/statistics/member/index.vue
+++ b/src/views/mall/statistics/member/index.vue
@@ -282,6 +282,7 @@ const getMemberSexStatisticsList = async () => {
 const getMemberTerminalStatisticsList = async () => {
   const list = await MemberStatisticsApi.getMemberTerminalStatisticsList()
   const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL)
+  dictDataList.push({ label: '未知', value: null } as any)
   terminalChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
     const userCount = list.find(
       (item: MemberTerminalStatisticsRespVO) => item.terminal === dictData.value

From 66ec61080171302caa77f06145d835bb6c2ba7fe Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 16 Oct 2023 21:55:11 +0800
Subject: [PATCH 10/10] =?UTF-8?q?code=20review=EF=BC=9A=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/article/ArticleForm.vue    | 12 +++--
 src/views/mall/promotion/article/index.vue    | 48 ++++++-------------
 2 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/src/views/mall/promotion/article/ArticleForm.vue b/src/views/mall/promotion/article/ArticleForm.vue
index 36fc1340..92976931 100644
--- a/src/views/mall/promotion/article/ArticleForm.vue
+++ b/src/views/mall/promotion/article/ArticleForm.vue
@@ -8,6 +8,11 @@
       label-width="110px"
     >
       <el-row>
+        <el-col :span="12">
+          <el-form-item label="文章标题" prop="title">
+            <el-input v-model="formData.title" placeholder="请输入文章标题" />
+          </el-form-item>
+        </el-col>
         <el-col :span="12">
           <el-form-item label="文章分类" prop="categoryId">
             <el-select v-model="formData.categoryId" placeholder="请选择">
@@ -20,11 +25,6 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
-          <el-form-item label="文章标题" prop="title">
-            <el-input v-model="formData.title" placeholder="请输入文章标题" />
-          </el-form-item>
-        </el-col>
         <el-col :span="12">
           <el-form-item label="文章作者" prop="author">
             <el-input v-model="formData.author" placeholder="请输入文章作者" />
@@ -40,6 +40,7 @@
             <UploadImg v-model="formData.picUrl" height="80px" />
           </el-form-item>
         </el-col>
+        <!-- TODO @puhui999：浏览次数，不能修改 -->
         <el-col :span="12">
           <el-form-item label="浏览次数" prop="browseCount">
             <el-input-number
@@ -68,6 +69,7 @@
             </el-radio-group>
           </el-form-item>
         </el-col>
+        <!-- TODO @puhui999：可以使用 SpuTableSelect -->
         <el-col :span="12">
           <el-form-item label="商品关联" prop="spuId">
             <el-select v-model="formData.spuId" placeholder="请选择">
diff --git a/src/views/mall/promotion/article/index.vue b/src/views/mall/promotion/article/index.vue
index a5bbd73c..fb5c48d8 100644
--- a/src/views/mall/promotion/article/index.vue
+++ b/src/views/mall/promotion/article/index.vue
@@ -78,51 +78,31 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
-      <el-table-column align="center" label="文章分类" prop="categoryId">
-        <template #default="scope">
-          {{ categoryList.find((item) => item.id === scope.row.categoryId)?.name }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="关联商品" prop="spuId" width="300">
-        <template #default="scope">
-          <el-image
-            :preview-src-list="[spuList.find((item) => item.id === scope.row.spuId)?.picUrl]"
-            :src="spuList.find((item) => item.id === scope.row.spuId)?.picUrl"
-            class="mr-[10px] h-40px w-40px v-middle"
-            preview-teleported
-          />
-          {{ spuList.find((item) => item.id === scope.row.spuId)?.name }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="文章标题" prop="title" />
-      <el-table-column align="center" label="文章作者" prop="author" />
-      <el-table-column align="center" label="文章封面" prop="picUrl">
+      <el-table-column align="center" label="编号" prop="id" min-width="60" />
+      <el-table-column align="center" label="封面" prop="picUrl" min-width="80">
         <template #default="{ row }">
           <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="文章简介" prop="introduction" />
-      <el-table-column align="center" label="浏览次数" prop="browseCount" />
-      <el-table-column align="center" label="排序" prop="sort" />
-      <el-table-column align="center" label="状态" prop="status">
+      <el-table-column align="center" label="标题" prop="title" min-width="180" />
+      <el-table-column align="center" label="分类" prop="categoryId" min-width="180">
+        <template #default="scope">
+          {{ categoryList.find((item) => item.id === scope.row.categoryId)?.name }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="浏览量" prop="browseCount" min-width="180" />
+      <el-table-column align="center" label="作者" prop="author" min-width="180" />
+      <el-table-column align="center" label="文章简介" prop="introduction" min-width="250" />
+      <el-table-column align="center" label="排序" prop="sort" min-width="60" />
+      <el-table-column align="center" label="状态" prop="status" min-width="60">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="热门" prop="recommendHot">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.recommendHot" />
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="轮播图" prop="recommendBanner">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.recommendBanner" />
-        </template>
-      </el-table-column>
       <el-table-column
         :formatter="dateFormatter"
         align="center"
-        label="创建时间"
+        label="发布时间"
         prop="createTime"
         width="180px"
       />