feat: order page

src/api/spring/avatar/index.js

@@ -53,3 +53,11 @@ export function toggleEnable(id, isEnabled) {
     data: { isEnabled },
   })
 }
+
+export function getCreateList(data) {
+  return request({
+    url: '/management/api/spring/avatar/create/list',
+    method: 'get',
+    params: data,
+  })
+}

src/api/spring/fortune/card/index.js

@@ -8,6 +8,14 @@ export function getList(data) {
   })
 }
 
+export function getDrawList(data) {
+  return request({
+    url: 'management/api/spring/fortune/card/draw/list',
+    method: 'get',
+    params: data,
+  })
+}
+
 export function doAdd(data) {
   return request({
     url: '/management/api/spring/fortune/card',

src/api/spring/index/tips.js

@@ -0,0 +1,63 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/management/api/spring/index/tips/list',
+    method: 'get',
+    params: data,
+  })
+}
+
+export function doAdd(data) {
+  return request({
+    url: '/management/api/spring/index/tips',
+    method: 'post',
+    data,
+  })
+}
+
+export function doEdit(id, data) {
+  return request({
+    url: `/management/api/spring/index/tips/${id}`,
+    method: 'put',
+    data,
+  })
+}
+
+export function doDelete(data) {
+  return request({
+    url: '/management/api/spring/index/tips/delete',
+    method: 'put',
+    data,
+  })
+}
+
+export function doMoveUp(id) {
+  return request({
+    url: `/management/api/spring/index/tips/moveUp/${id}`,
+    method: 'patch',
+  })
+}
+
+export function doMoveDown(id) {
+  return request({
+    url: `/management/api/spring/index/tips/moveDown/${id}`,
+    method: 'patch',
+  })
+}
+
+export function toggleEnable(id, isEnabled) {
+  return request({
+    url: `/management/api/spring/index/tips/enable/${id}`,
+    method: 'patch',
+    data: { isEnabled },
+  })
+}
+
+export function getItemDetail(data) {
+  return request({
+    url: '/management/api/spring/index/tips/check',
+    method: 'get',
+    params: data,
+  })
+}

src/api/spring/user/index.js

@@ -8,6 +8,22 @@ export function getUserList(data) {
   })
 }
 
+export function getVipUserList(data) {
+  return request({
+    url: '/management/api/spring/user/vip/list',
+    method: 'get',
+    params: data,
+  })
+}
+
+export function getUserOrderList(data) {
+  return request({
+    url: '/management/api/spring/user/order/list',
+    method: 'get',
+    params: data,
+  })
+}
+
 export function getUserFeedbackList(data) {
   return request({
     url: '/management/api/common/feedback/list',

src/api/system/index.js

@@ -7,3 +7,11 @@ export function getDeviceList(data) {
     params: data,
   })
 }
+
+export function getTrackingLogsList(data) {
+  return request({
+    url: 'management/api/system/tracking-logs/list',
+    method: 'get',
+    params: data,
+  })
+}

src/router/index.js

@@ -73,6 +73,12 @@ export const asyncRoutes = [
             component: () => import('@/views/spring/index/recommend/index'),
             meta: { title: '推介列表', icon: 'list' },
           },
+          {
+            path: 'tips',
+            name: 'tips',
+            component: () => import('@/views/spring/index/tips/index'),
+            meta: { title: '首页跳转', icon: 'list' },
+          },
         ],
       },
       {
@@ -169,6 +175,12 @@ export const asyncRoutes = [
             component: () => import('@/views/spring/avatar/avatarDecor/index'),
             meta: { title: '头像挂饰' },
           },
+          {
+            path: 'record',
+            name: 'AvatarRecord',
+            component: () => import('@/views/spring/avatar/record/index'),
+            meta: { title: '头像记录' },
+          },
         ],
       },
       {
@@ -189,6 +201,12 @@ export const asyncRoutes = [
             component: () => import('@/views/spring/fortune/card/index'),
             meta: { title: '抽签卡片' },
           },
+          {
+            path: 'drawRecord',
+            name: 'DrawRecord',
+            component: () => import('@/views/spring/fortune/drawRecord/index'),
+            meta: { title: '抽签记录' },
+          },
         ],
       },
       {
@@ -209,6 +227,18 @@ export const asyncRoutes = [
             component: () => import('@/views/spring/user/user/index'),
             meta: { title: '用户' },
           },
+          {
+            path: 'vipUser',
+            name: 'VipUser',
+            component: () => import('@/views/spring/user/vipUser/index'),
+            meta: { title: '会员用户' },
+          },
+          {
+            path: 'userOrder',
+            name: 'UserOrder',
+            component: () => import('@/views/spring/user/order/index'),
+            meta: { title: '订单' },
+          },
           {
             path: 'userChat',
             name: 'UserChat',
@@ -243,174 +273,174 @@ export const asyncRoutes = [
       },
     ],
   },
-  {
+  // {
-    path: '/maomaotou',
+  //   path: '/maomaotou',
-    component: Layout,
+  //   component: Layout,
-    redirect: 'noRedirect',
+  //   redirect: 'noRedirect',
-    name: 'CxshMini',
+  //   name: 'CxshMini',
-    meta: { title: '猫猫头', icon: 'cat', permissions: ['admin'] },
+  //   meta: { title: '猫猫头', icon: 'cat', permissions: ['admin'] },
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'cat',
+  //       path: 'cat',
-        component: EmptyLayout,
+  //       component: EmptyLayout,
-        alwaysShow: true,
+  //       alwaysShow: true,
-        redirect: 'noRedirect',
+  //       redirect: 'noRedirect',
-        name: 'cat',
+  //       name: 'cat',
-        meta: {
+  //       meta: {
-          title: '猫猫',
+  //         title: '猫猫',
-          icon: 'cat',
+  //         icon: 'cat',
-          permissions: ['admin'],
+  //         permissions: ['admin'],
-        },
+  //       },
-        children: [
+  //       children: [
-          {
+  //         {
-            path: 'cat',
+  //           path: 'cat',
-            name: 'Cat',
+  //           name: 'Cat',
-            component: () => import('@/views/maomao/cat/cat/index'),
+  //           component: () => import('@/views/maomao/cat/cat/index'),
-            meta: { title: '猫猫' },
+  //           meta: { title: '猫猫' },
-          },
+  //         },
-        ],
+  //       ],
-      },
+  //     },
-      {
+  //     {
-        path: 'post',
+  //       path: 'post',
-        component: EmptyLayout,
+  //       component: EmptyLayout,
-        alwaysShow: true,
+  //       alwaysShow: true,
-        redirect: 'noRedirect',
+  //       redirect: 'noRedirect',
-        name: 'Post',
+  //       name: 'Post',
-        meta: {
+  //       meta: {
-          title: '帖子',
+  //         title: '帖子',
-          icon: 'post',
+  //         icon: 'post',
-          permissions: ['admin'],
+  //         permissions: ['admin'],
-        },
+  //       },
-        children: [
+  //       children: [
-          {
+  //         {
-            path: 'post',
+  //           path: 'post',
-            name: 'Post',
+  //           name: 'Post',
-            component: () => import('@/views/maomao/post/post/index'),
+  //           component: () => import('@/views/maomao/post/post/index'),
-            meta: { title: '帖子' },
+  //           meta: { title: '帖子' },
-          },
+  //         },
-        ],
+  //       ],
-      },
+  //     },
-      {
+  //     {
-        path: 'user',
+  //       path: 'user',
-        component: EmptyLayout,
+  //       component: EmptyLayout,
-        alwaysShow: true,
+  //       alwaysShow: true,
-        redirect: 'noRedirect',
+  //       redirect: 'noRedirect',
-        name: 'User',
+  //       name: 'User',
-        meta: {
+  //       meta: {
-          title: '用户',
+  //         title: '用户',
-          icon: 'user',
+  //         icon: 'user',
-          permissions: ['admin'],
+  //         permissions: ['admin'],
-        },
+  //       },
-        children: [
+  //       children: [
-          {
+  //         {
-            path: 'user',
+  //           path: 'user',
-            name: 'User',
+  //           name: 'User',
-            component: () => import('@/views/maomao/user/user/index'),
+  //           component: () => import('@/views/maomao/user/user/index'),
-            meta: { title: '用户' },
+  //           meta: { title: '用户' },
-          },
+  //         },
-          {
+  //         {
-            path: 'userChat',
+  //           path: 'userChat',
-            name: 'UserChat',
+  //           name: 'UserChat',
-            component: () => import('@/views/maomao/user/chat/index'),
+  //           component: () => import('@/views/maomao/user/chat/index'),
-            meta: { title: '聊天' },
+  //           meta: { title: '聊天' },
-          },
+  //         },
-        ],
+  //       ],
-      },
+  //     },
-    ],
+  //   ],
-  },
+  // },
-  {
+  // {
-    path: '/cxshMini',
+  //   path: '/cxshMini',
-    component: Layout,
+  //   component: Layout,
-    redirect: 'noRedirect',
+  //   redirect: 'noRedirect',
-    name: 'CxshMini',
+  //   name: 'CxshMini',
-    meta: { title: '小程序', icon: 'comment', permissions: ['admin', 'csxh_admin', 'csxh_user'] },
+  //   meta: { title: '小程序', icon: 'comment', permissions: ['admin', 'csxh_admin', 'csxh_user'] },
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'home',
+  //       path: 'home',
-        component: EmptyLayout,
+  //       component: EmptyLayout,
-        alwaysShow: true,
+  //       alwaysShow: true,
-        redirect: 'noRedirect',
+  //       redirect: 'noRedirect',
-        name: 'Home',
+  //       name: 'Home',
-        meta: {
+  //       meta: {
-          title: '首页',
+  //         title: '首页',
-          icon: 'home',
+  //         icon: 'home',
-          permissions: ['admin', 'csxh_admin', 'csxh_user'],
+  //         permissions: ['admin', 'csxh_admin', 'csxh_user'],
-        },
+  //       },
-        children: [
+  //       children: [
-          {
+  //         {
-            path: 'banner',
+  //           path: 'banner',
-            name: 'Banner',
+  //           name: 'Banner',
-            component: () => import('@/views/cxshMini/home/banner/index'),
+  //           component: () => import('@/views/cxshMini/home/banner/index'),
-            meta: { title: '轮播图' },
+  //           meta: { title: '轮播图' },
-          },
+  //         },
-          {
+  //         {
-            path: 'news',
+  //           path: 'news',
-            name: 'News',
+  //           name: 'News',
-            component: () => import('@/views/cxshMini/home/news/index'),
+  //           component: () => import('@/views/cxshMini/home/news/index'),
-            meta: { title: '花絮动态' },
+  //           meta: { title: '花絮动态' },
-          },
+  //         },
-          {
+  //         {
-            path: 'createNews',
+  //           path: 'createNews',
-            name: 'CreateNews',
+  //           name: 'CreateNews',
-            component: () => import('@/views/cxshMini/home/createNews/index'),
+  //           component: () => import('@/views/cxshMini/home/createNews/index'),
-            meta: { title: '新建花絮' },
+  //           meta: { title: '新建花絮' },
-          },
+  //         },
-        ],
+  //       ],
-      },
+  //     },
-      {
+  //     {
-        path: 'anli',
+  //       path: 'anli',
-        component: EmptyLayout,
+  //       component: EmptyLayout,
-        alwaysShow: true,
+  //       alwaysShow: true,
-        redirect: 'noRedirect',
+  //       redirect: 'noRedirect',
-        name: 'Anli',
+  //       name: 'Anli',
-        meta: {
+  //       meta: {
-          title: '精彩案例',
+  //         title: '精彩案例',
-          icon: 'handshake',
+  //         icon: 'handshake',
-          permissions: ['admin', 'csxh_admin', 'csxh_user'],
+  //         permissions: ['admin', 'csxh_admin', 'csxh_user'],
-        },
+  //       },
-        children: [
+  //       children: [
-          {
+  //         {
-            path: 'article',
+  //           path: 'article',
-            name: 'Article',
+  //           name: 'Article',
-            component: () => import('@/views/cxshMini/anli/article/index'),
+  //           component: () => import('@/views/cxshMini/anli/article/index'),
-            meta: { title: '新建案例' },
+  //           meta: { title: '新建案例' },
-          },
+  //         },
-          {
+  //         {
-            path: 'list',
+  //           path: 'list',
-            name: 'List',
+  //           name: 'List',
-            component: () => import('@/views/cxshMini/anli/list/index'),
+  //           component: () => import('@/views/cxshMini/anli/list/index'),
-            meta: { title: '案例列表' },
+  //           meta: { title: '案例列表' },
-          },
+  //         },
-          {
+  //         {
-            path: 'category',
+  //           path: 'category',
-            name: 'Category',
+  //           name: 'Category',
-            component: () => import('@/views/cxshMini/anli/category/index'),
+  //           component: () => import('@/views/cxshMini/anli/category/index'),
-            meta: { title: '案例分类' },
+  //           meta: { title: '案例分类' },
-          },
+  //         },
-        ],
+  //       ],
-      },
+  //     },
-      {
+  //     {
-        path: 'lianxi',
+  //       path: 'lianxi',
-        component: EmptyLayout,
+  //       component: EmptyLayout,
-        alwaysShow: true,
+  //       alwaysShow: true,
-        redirect: 'noRedirect',
+  //       redirect: 'noRedirect',
-        name: 'Lianxi',
+  //       name: 'Lianxi',
-        meta: {
+  //       meta: {
-          title: '联系我们',
+  //         title: '联系我们',
-          icon: 'user-friends',
+  //         icon: 'user-friends',
-          permissions: ['admin', 'csxh_admin', 'csxh_user'],
+  //         permissions: ['admin', 'csxh_admin', 'csxh_user'],
-        },
+  //       },
-        children: [
+  //       children: [
-          {
+  //         {
-            path: 'member',
+  //           path: 'member',
-            name: 'Member',
+  //           name: 'Member',
-            component: () => import('@/views/cxshMini/lianxi/member/index'),
+  //           component: () => import('@/views/cxshMini/lianxi/member/index'),
-            meta: { title: '成员' },
+  //           meta: { title: '成员' },
-          },
+  //         },
-        ],
+  //       ],
-      },
+  //     },
-    ],
+  //   ],
-  },
+  // },
   /* {
     path: "/test",
     component: Layout,

src/utils/index.js

@@ -70,6 +70,18 @@ export function formatTime(time, option) {
   const now = new Date()
   const diff = (now - time) / 1000
 
+  if (diff < 0) {
+    const absDiff = Math.abs(diff)
+    if (absDiff < 30) {
+      return '刚刚'
+    } else if (absDiff < 3600) {
+      return `${Math.ceil(absDiff / 60)}分钟后`
+    } else if (absDiff < 3600 * 24) {
+      return `${Math.ceil(absDiff / 3600)}小时后`
+    } else if (absDiff < 3600 * 24 * 2) {
+      return '1天后'
+    }
+  } else {
     if (diff < 30) {
       return '刚刚'
     } else if (diff < 3600) {
@@ -79,6 +91,7 @@ export function formatTime(time, option) {
     } else if (diff < 3600 * 24 * 2) {
       return '1天前'
     }
+  }
 
   if (option) {
     return parseTime(time, option)

src/views/index/components/TrackingCharts.vue

@@ -0,0 +1,528 @@
+<template>
+  <div class="tracking-charts">
+    <el-row :gutter="20" style="margin-bottom: 20px">
+      <el-col :span="4">
+        <el-card shadow="never">
+          <div style="font-size: 14px; color: #909399">当前上报总数</div>
+          <div style="font-size: 24px; font-weight: bold; color: #303133; margin-top: 5px">{{ list.length }}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="4">
+        <el-card shadow="never">
+          <div style="font-size: 14px; color: #909399">用户数</div>
+          <div style="font-size: 24px; font-weight: bold; color: #303133; margin-top: 5px">{{ userOptions.length }}</div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-card class="filter-card" shadow="never">
+      <el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
+        <el-form-item label="App">
+          <el-select v-model="queryForm.appId" filterable>
+            <el-option v-for="(label, value) in appMap" :key="value" :label="label" :value="value">
+              <span style="float: left">{{ label }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{ value }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="User ID">
+          <el-select v-model="queryForm.userId" allow-create clearable default-first-option filterable placeholder="请输入或选择User ID">
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value">
+              <span style="float: left">{{ item.label }}</span>
+              <span v-if="item.value !== item.label" style="float: right; color: #8492a6; font-size: 13px; margin-left: 20px">
+                {{ item.value }}
+              </span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件名称">
+          <el-select v-model="queryForm.eventName" clearable filterable placeholder="全部事件">
+            <el-option v-for="(label, value) in eventNameMap" :key="value" :label="label" :value="value">
+              <span style="float: left">{{ label }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{ value }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件类型">
+          <el-select v-model="queryForm.eventType" clearable placeholder="全部类型">
+            <el-option v-for="(label, value) in eventTypeMap" :key="value" :label="label" :value="value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间范围">
+          <el-date-picker
+            v-model="queryForm.dateRange"
+            :default-time="['00:00:00', '23:59:59']"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            range-separator="至"
+            start-placeholder="开始日期"
+            type="datetimerange"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
+          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <div v-loading="loading" class="charts-container">
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-card class="chart-card" shadow="never">
+            <div slot="header"><span>时段趋势</span></div>
+            <v-chart autoresize class="chart" :option="trendOption" />
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="12">
+          <el-card class="chart-card" shadow="never">
+            <div slot="header"><span>事件名称分布</span></div>
+            <v-chart autoresize class="chart" :option="eventNameOption" @click="handleEventNameClick" />
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card class="chart-card" shadow="never">
+            <div slot="header"><span>事件类型分布</span></div>
+            <v-chart autoresize class="chart" :option="eventTypeOption" @click="handleEventTypeClick" />
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="24">
+          <el-card class="chart-card" shadow="never">
+            <div slot="header"><span>页面访问排行</span></div>
+            <v-chart autoresize class="chart" :option="pageOption" />
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="24">
+          <el-card shadow="never">
+            <div slot="header" style="display: flex; justify-content: space-between; align-items: center">
+              <span>
+                详细日志列表
+                <span v-if="filterText" style="font-size: 12px; color: #666">({{ filterText }})</span>
+              </span>
+              <el-button v-if="isFiltered" size="mini" type="text" @click="clearFilter">清除筛选</el-button>
+            </div>
+            <el-table :data="paginatedList" style="width: 100%">
+              <el-table-column label="时间" prop="createdAt" width="160">
+                <template slot-scope="{ row }">
+                  {{ formatTime(row.createdAt) }}
+                </template>
+              </el-table-column>
+              <el-table-column label="事件名称" prop="eventName" show-overflow-tooltip>
+                <template slot-scope="{ row }">
+                  {{ eventNameMap[row.eventName] || row.eventName }}
+                </template>
+              </el-table-column>
+              <el-table-column label="事件类型" prop="eventType" show-overflow-tooltip>
+                <template slot-scope="{ row }">
+                  {{ eventTypeMap[row.eventType] || row.eventType }}
+                </template>
+              </el-table-column>
+              <el-table-column label="页面" prop="page" show-overflow-tooltip />
+              <el-table-column label="元素ID" prop="elementId" show-overflow-tooltip />
+              <el-table-column label="访问地址" prop="address" show-overflow-tooltip />
+              <el-table-column label="元素内容" prop="elementContent" show-overflow-tooltip />
+              <el-table-column label="User ID" prop="userId" show-overflow-tooltip>
+                <template slot-scope="{ row }">
+                  <el-link type="primary" :underline="false" @click="goToUser(row.userId)">{{ row.userId }}</el-link>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-pagination
+              background
+              :current-page="currentPage"
+              layout="total, sizes, prev, pager, next, jumper"
+              :page-size="pageSize"
+              :page-sizes="[10, 20, 50, 100]"
+              style="margin-top: 20px; text-align: right"
+              :total="total"
+              @current-change="handleCurrentChange"
+              @size-change="handleSizeChange"
+            />
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getTrackingLogsList } from '@/api/system'
+  import { use } from 'echarts/core'
+  import { CanvasRenderer } from 'echarts/renderers'
+  import { LineChart, PieChart, BarChart } from 'echarts/charts'
+  import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
+  import VChart from 'vue-echarts'
+  import dayjs from 'dayjs'
+  import { groupBy, countBy } from 'lodash'
+  import { eventNameMap, eventTypeMap, appMap, userMap } from '../utils'
+
+  use([CanvasRenderer, LineChart, PieChart, BarChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
+
+  export default {
+    name: 'TrackingCharts',
+    components: {
+      VChart,
+    },
+    data() {
+      return {
+        eventNameMap,
+        eventTypeMap,
+        appMap,
+        userMap,
+        loading: false,
+        queryForm: {
+          appId: '69665538a49b8ae3be50fe5d',
+          userId: '',
+          eventName: '',
+          eventType: '',
+          dateRange: [],
+        },
+        userOptions: [],
+        pickerOptions: {
+          shortcuts: [
+            {
+              text: '今天',
+              onClick(picker) {
+                const end = new Date()
+                const start = new Date()
+                start.setHours(0, 0, 0, 0)
+                end.setHours(23, 59, 59, 999)
+                picker.$emit('pick', [start, end])
+              },
+            },
+            {
+              text: '昨天',
+              onClick(picker) {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24)
+                start.setHours(0, 0, 0, 0)
+                end.setTime(end.getTime() - 3600 * 1000 * 24)
+                end.setHours(23, 59, 59, 999)
+                picker.$emit('pick', [start, end])
+              },
+            },
+            {
+              text: '最近一周',
+              onClick(picker) {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+                picker.$emit('pick', [start, end])
+              },
+            },
+          ],
+        },
+        list: [],
+        filteredList: [],
+        currentPage: 1,
+        pageSize: 10,
+        isFiltered: false,
+        filterText: '',
+        trendOption: {},
+        eventNameOption: {},
+        eventTypeOption: {},
+        pageOption: {},
+      }
+    },
+    computed: {
+      total() {
+        return this.filteredList.length
+      },
+      paginatedList() {
+        const start = (this.currentPage - 1) * this.pageSize
+        const end = start + this.pageSize
+        return this.filteredList.slice(start, end)
+      },
+    },
+    created() {
+      // 默认选中今天
+      const end = new Date()
+      const start = new Date()
+      start.setHours(0, 0, 0, 0)
+      end.setHours(23, 59, 59, 999)
+      this.queryForm.dateRange = [dayjs(start).format('YYYY-MM-DD HH:mm:ss'), dayjs(end).format('YYYY-MM-DD HH:mm:ss')]
+
+      this.fetchData()
+    },
+    methods: {
+      formatTime(time) {
+        return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
+      },
+      async fetchData() {
+        this.loading = true
+        try {
+          const params = {
+            appId: this.queryForm.appId,
+            userId: this.queryForm.userId || undefined,
+            eventName: this.queryForm.eventName || undefined,
+            eventType: this.queryForm.eventType || undefined,
+            startTime: this.queryForm.dateRange ? this.queryForm.dateRange[0] : undefined,
+            endTime: this.queryForm.dateRange ? this.queryForm.dateRange[1] : undefined,
+            pageNo: 1,
+            pageSize: 10000, // 获取足够多的数据进行前端统计，或者应该依赖后端聚合接口
+          }
+
+          const { data } = await getTrackingLogsList(params)
+          this.list = data.list || []
+
+          // 如果没有筛选用户，则更新用户选项列表
+          if (!this.queryForm.userId) {
+            const userIds = this.list.map((item) => item.userId).filter(Boolean)
+            const uniqueUsers = [...new Set(userIds)]
+            this.userOptions = uniqueUsers.map((id) => ({ value: id, label: this.userMap[id] || id }))
+          }
+
+          this.filteredList = [...this.list]
+          this.isFiltered = false
+          this.filterText = ''
+          this.currentPage = 1
+          this.processData()
+        } catch (error) {
+          console.error(error)
+          this.$baseMessage('获取数据失败', 'error')
+        } finally {
+          this.loading = false
+        }
+      },
+      handleQuery() {
+        this.fetchData()
+      },
+      resetQuery() {
+        this.queryForm.appId = '69665538a49b8ae3be50fe5d'
+        this.queryForm.userId = ''
+        this.queryForm.eventName = ''
+        this.queryForm.eventType = ''
+        const end = new Date()
+        const start = new Date()
+        start.setHours(0, 0, 0, 0)
+        end.setHours(23, 59, 59, 999)
+        this.queryForm.dateRange = [dayjs(start).format('YYYY-MM-DD HH:mm:ss'), dayjs(end).format('YYYY-MM-DD HH:mm:ss')]
+        this.fetchData()
+      },
+      handleSizeChange(val) {
+        this.pageSize = val
+        this.currentPage = 1
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val
+      },
+      clearFilter() {
+        this.filteredList = [...this.list]
+        this.isFiltered = false
+        this.filterText = ''
+        this.currentPage = 1
+      },
+      goToUser(userId) {
+        if (!userId) return
+        this.$router.push({
+          path: '/spring/user/user',
+          query: { userId },
+        })
+      },
+      handleEventNameClick(params) {
+        const name = params.name
+        // name 可能是中文映射名，需要反向查找 key，或者在 processData 时把 key 存入
+        // 简单起见，processData 中 name 已经是中文名或者 key 了。
+        // 如果我们用中文名展示，过滤时比较麻烦。
+        // 最好在 processData 中让 echarts data item 包含原始 key。
+
+        // 重新检查 processData
+        // const eventNameData = Object.keys(eventNameCounts).map((key) => ({
+        //   name: this.eventNameMap[key] || key,
+        //   value: eventNameCounts[key],
+        //   key: key // 添加原始 key
+        // }))
+
+        const key = params.data.key || params.name // 如果没有 key 属性，回退到 name
+        this.filteredList = this.list.filter((item) => {
+          const itemKey = item.eventName
+          const itemName = this.eventNameMap[itemKey] || itemKey
+          // 如果 params.data.key 存在，则精确匹配 key
+          if (params.data.key) {
+            return item.eventName === params.data.key
+          }
+          return itemName === name
+        })
+        this.isFiltered = true
+        this.filterText = `筛选事件: ${name}`
+        this.currentPage = 1
+      },
+      handleEventTypeClick(params) {
+        const name = params.name
+        const key = params.data.key || params.name
+        this.filteredList = this.list.filter((item) => {
+          if (params.data.key) {
+            return item.eventType === params.data.key
+          }
+          const itemKey = item.eventType
+          const itemName = this.eventTypeMap[itemKey] || itemKey
+          return itemName === name
+        })
+        this.isFiltered = true
+        this.filterText = `筛选类型: ${name}`
+        this.currentPage = 1
+      },
+      processData() {
+        // 1. 时段趋势
+        const logsByHour = groupBy(this.list, (item) => dayjs(item.createdAt).format('HH:00'))
+        const hours = []
+        const counts = []
+        for (let i = 0; i < 24; i++) {
+          const hour = `${String(i).padStart(2, '0')}:00`
+          hours.push(hour)
+          counts.push(logsByHour[hour] ? logsByHour[hour].length : 0)
+        }
+        this.trendOption = {
+          tooltip: {
+            trigger: 'axis',
+          },
+          xAxis: {
+            type: 'category',
+            data: hours,
+          },
+          yAxis: {
+            type: 'value',
+          },
+          series: [
+            {
+              data: counts,
+              type: 'line',
+              smooth: true,
+              areaStyle: {},
+            },
+          ],
+        }
+
+        // 2. 事件名称分布
+        const eventNameCounts = countBy(this.list, 'eventName')
+        const eventNameData = Object.keys(eventNameCounts).map((key) => ({
+          name: this.eventNameMap[key] || key,
+          value: eventNameCounts[key],
+          key: key, // 保存原始key
+        }))
+        this.eventNameOption = {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{b}: {c} ({d}%)',
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+          },
+          series: [
+            {
+              name: '事件名称',
+              type: 'pie',
+              radius: '50%',
+              data: eventNameData,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)',
+                },
+              },
+            },
+          ],
+        }
+
+        // 3. 事件类型分布
+        const eventTypeCounts = countBy(this.list, 'eventType')
+        const eventTypeData = Object.keys(eventTypeCounts).map((key) => ({
+          name: this.eventTypeMap[key] || key,
+          value: eventTypeCounts[key],
+          key: key, // 保存原始key
+        }))
+        this.eventTypeOption = {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{b}: {c} ({d}%)',
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+          },
+          series: [
+            {
+              name: '事件类型',
+              type: 'pie',
+              radius: '50%',
+              data: eventTypeData,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)',
+                },
+              },
+            },
+          ],
+        }
+
+        // 4. 页面访问排行
+        const pageCounts = countBy(this.list, 'page')
+        // 排序并取前10
+        const sortedPages = Object.keys(pageCounts)
+          .sort((a, b) => pageCounts[b] - pageCounts[a])
+          .slice(0, 10)
+        const pageData = sortedPages.map((key) => pageCounts[key])
+
+        this.pageOption = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+            },
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true,
+          },
+          xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01],
+          },
+          yAxis: {
+            type: 'category',
+            data: sortedPages,
+          },
+          series: [
+            {
+              name: '访问次数',
+              type: 'bar',
+              data: pageData,
+            },
+          ],
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .tracking-charts {
+    padding: 20px;
+  }
+  .filter-card {
+    margin-bottom: 20px;
+  }
+  .chart-card {
+    height: 400px;
+  }
+  .chart {
+    height: 300px;
+  }
+</style>

src/views/index/index.vue

@@ -1,569 +1,19 @@
 <template>
   <div class="index-container">
-    <!-- <el-row :gutter="20">
+    <tracking-charts />
-      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
-        <el-alert v-if="noticeList">
-          <div style="display: flex; align-items: center; justify-content: center">
-            <a href="https://github.com/zxwk1998/vue-admin-better" target="_blank">
-              <img
-                src="https://img.shields.io/github/stars/zxwk1998/vue-admin-better?style=flat-square&label=Stars&logo=github"
-                style="margin-right: 10px"
-              />
-            </a>
-            <p v-html="noticeList.notice"></p>
-          </div>
-        </el-alert>
-      </el-col>
-      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
-        <el-card shadow="never">
-          <div slot="header">
-            <span>访问量</span>
-          </div>
-          <vab-chart autoresize :option="fwl" />
-          <div class="bottom">
-            <span>
-              日均访问量:
-
-              {{ config1.endVal }}
-            </span>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
-        <el-card shadow="never">
-          <div slot="header">
-            <span>授权数</span>
-          </div>
-          <vab-chart autoresize :option="sqs" />
-          <div class="bottom">
-            <span>
-              总授权数:
-              {{ config2.endVal }}
-            </span>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col v-for="(item, index) in iconList" :key="index" :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
-        <router-link target="_blank" :to="item.link">
-          <el-card class="icon-panel" shadow="never">
-            <vab-icon :icon="['fas', item.icon]" :style="{ color: item.color }" />
-            <p>{{ item.title }}</p>
-          </el-card>
-        </router-link>
-      </el-col>
-
-      <el-col :lg="11" :md="24" :sm="24" :xl="11" :xs="24">
-        <el-card class="card" shadow="never">
-          <div slot="header">
-            <span>依赖信息</span>
-            <div style="float: right">部署时间:{{ updateTime }}</div>
-          </div>
-
-          <table class="table">
-            <tr>
-              <td>@vue/cli版本</td>
-              <td>{{ devDependencies['@vue/cli-service'] }}</td>
-              <td>vue版本</td>
-              <td>{{ dependencies['vue'] }}</td>
-            </tr>
-            <tr>
-              <td>vuex版本</td>
-              <td>{{ dependencies['vuex'] }}</td>
-              <td>vue-router版本</td>
-              <td>{{ dependencies['vue-router'] }}</td>
-            </tr>
-            <tr>
-              <td>element-ui版本</td>
-              <td>{{ dependencies['element-ui'] }}</td>
-              <td>axios版本</td>
-              <td>{{ dependencies['axios'] }}</td>
-            </tr>
-            <tr>
-              <td>eslint版本</td>
-              <td>{{ devDependencies['eslint'] }}</td>
-              <td>prettier版本</td>
-              <td>{{ devDependencies['prettier'] }}</td>
-            </tr>
-            <tr>
-              <td>sass版本</td>
-              <td>{{ devDependencies['sass'] }}</td>
-              <td>mockjs版本</td>
-              <td>{{ dependencies['mockjs'] }}</td>
-            </tr>
-            <tr>
-              <td>layouts版本</td>
-              <td>{{ dependencies['layouts'] }}</td>
-              <td>lodash版本</td>
-              <td>{{ dependencies['lodash'] }}</td>
-            </tr>
-          </table>
-          <br />
-          <el-alert :closable="false" :title="userAgent" type="info" />
-          <br />
-        </el-card>
-      </el-col>
-      <el-col :lg="13" :md="13" :sm="24" :xl="13" :xs="24">
-        <el-card shadow="never">
-          <div slot="header">
-            <span>其他信息</span>
-          </div>
-          <div style="text-align: center">
-            <vab-colorful-icon icon-class="vab" style="font-size: 140px" />
-            <h1 style="font-size: 30px">vue-admin-better</h1>
-          </div>
-          <div class="bottom-btn"></div>
-        </el-card>
-      </el-col>
-    </el-row> -->
   </div>
 </template>
 
 <script>
-  // import VabChart from '@/plugins/echarts'
+  import TrackingCharts from './components/TrackingCharts'
-  import { dependencies, devDependencies } from '../../../package.json'
-  import { getNoticeList } from '@/api/notice'
 
   export default {
     name: 'Index',
     components: {
-      // VabChart,
+      TrackingCharts,
     },
     data() {
-      return {
+      return {}
-        timer: 0,
-        updateTime: process.env.VUE_APP_UPDATE_TIME,
-        nodeEnv: process.env.NODE_ENV,
-        dependencies: dependencies,
-        devDependencies: devDependencies,
-        config1: {
-          startVal: 0,
-          endVal: this.$baseLodash.random(20000, 60000),
-          decimals: 0,
-          prefix: '',
-          suffix: '',
-          separator: ',',
-          duration: 8000,
-        },
-        config2: {
-          startVal: 0,
-          endVal: this.$baseLodash.random(1000, 20000),
-          decimals: 0,
-          prefix: '',
-          suffix: '',
-          separator: ',',
-          duration: 8000,
-        },
-        config3: {
-          startVal: 0,
-          endVal: this.$baseLodash.random(1000, 20000),
-          decimals: 0,
-          prefix: '',
-          suffix: '',
-          separator: ',',
-          duration: 8000,
-        },
-
-        //访问量
-        fwl: {
-          color: ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'],
-          backgroundColor: 'rgba(252,252,252,0)',
-          grid: {
-            top: '4%',
-            left: '2%',
-            right: '4%',
-            bottom: '0%',
-            containLabel: true,
-          },
-          xAxis: [
-            {
-              type: 'category',
-              boundaryGap: false,
-              data: [],
-              axisTick: {
-                alignWithLabel: true,
-              },
-            },
-          ],
-          yAxis: [
-            {
-              type: 'value',
-            },
-          ],
-          series: [
-            {
-              name: '访问量',
-              type: 'line',
-              data: [],
-              smooth: true,
-              areaStyle: {},
-            },
-          ],
-        },
-        //授权数
-        sqs: {
-          color: ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'],
-          backgroundColor: 'rgba(252,252,252,0)',
-          grid: {
-            top: '4%',
-            left: '2%',
-            right: '4%',
-            bottom: '0%',
-            containLabel: true,
-          },
-          xAxis: [
-            {
-              type: 'category',
-              /*boundaryGap: false,*/
-              data: ['0时', '4时', '8时', '12时', '16时', '20时', '24时'],
-              axisTick: {
-                alignWithLabel: true,
-              },
-            },
-          ],
-          yAxis: [
-            {
-              type: 'value',
-            },
-          ],
-          series: [
-            {
-              name: '授权数',
-              type: 'bar',
-              barWidth: '60%',
-              data: [10, 52, 20, 33, 39, 33, 22],
-            },
-          ],
-        },
-        //词云
-        cy: {
-          grid: {
-            top: '4%',
-            left: '2%',
-            right: '4%',
-            bottom: '0%',
-          },
-          series: [
-            {
-              type: 'wordCloud',
-              gridSize: 15,
-              sizeRange: [12, 40],
-              rotationRange: [0, 0],
-              width: '100%',
-              height: '100%',
-              textStyle: {
-                normal: {
-                  color() {
-                    const arr = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#975FE5']
-                    let index = Math.floor(Math.random() * arr.length)
-                    return arr[index]
-                  },
-                },
-              },
-              data: [
-                {
-                  name: 'vue-admin-better',
-                  value: 15000,
-                },
-                {
-                  name: 'element',
-                  value: 10081,
-                },
-                {
-                  name: 'beautiful',
-                  value: 9386,
-                },
-
-                {
-                  name: 'vue',
-                  value: 6500,
-                },
-                {
-                  name: 'zxwk1998',
-                  value: 6000,
-                },
-                {
-                  name: 'good',
-                  value: 4500,
-                },
-                {
-                  name: 'success',
-                  value: 3800,
-                },
-                {
-                  name: 'never',
-                  value: 3000,
-                },
-                {
-                  name: 'boy',
-                  value: 2500,
-                },
-                {
-                  name: 'girl',
-                  value: 2300,
-                },
-                {
-                  name: 'github',
-                  value: 2000,
-                },
-                {
-                  name: 'hbuilder',
-                  value: 1900,
-                },
-                {
-                  name: 'dcloud',
-                  value: 1800,
-                },
-                {
-                  name: 'china',
-                  value: 1700,
-                },
-                {
-                  name: '1204505056',
-                  value: 1600,
-                },
-                {
-                  name: '972435319',
-                  value: 1500,
-                },
-                {
-                  name: 'young',
-                  value: 1200,
-                },
-                {
-                  name: 'old',
-                  value: 1100,
-                },
-                {
-                  name: 'vuex',
-                  value: 900,
-                },
-                {
-                  name: 'router',
-                  value: 800,
-                },
-                {
-                  name: 'money',
-                  value: 700,
-                },
-                {
-                  name: 'qingdao',
-                  value: 800,
-                },
-                {
-                  name: 'yantai',
-                  value: 9000,
-                },
-                {
-                  name: 'author is very cool',
-                  value: 9200,
-                },
-              ],
-            },
-          ],
-        },
-
-        //更新日志
-        reverse: true,
-        activities: [],
-        noticeList: [],
-        //其他信息
-        userAgent: navigator.userAgent,
-        //卡片图标
-        iconList: [
-          {
-            icon: 'video',
-            title: '视频播放器',
-            link: '/vab/player',
-            color: '#ffc069',
-          },
-          {
-            icon: 'table',
-            title: '表格',
-            link: '/vab/table/comprehensiveTable',
-            color: '#5cdbd3',
-          },
-          {
-            icon: 'laptop-code',
-            title: '源码',
-            link: 'https://github.com/zxwk1998/vue-admin-better',
-            color: '#b37feb',
-          },
-          {
-            icon: 'book',
-            title: '书籍',
-            link: '',
-            color: '#69c0ff',
-          },
-          {
-            icon: 'bullhorn',
-            title: '公告',
-            link: '',
-            color: '#ff85c0',
-          },
-          {
-            icon: 'gift',
-            title: '礼物',
-            link: '',
-            color: '#ffd666',
-          },
-
-          {
-            icon: 'balance-scale-left',
-            title: '公平的世界',
-            link: '',
-            color: '#ff9c6e',
-          },
-          {
-            icon: 'coffee',
-            title: '休息一下',
-            link: '',
-            color: '#95de64',
-          },
-        ],
-      }
-    },
-    created() {
-      this.fetchData()
-    },
-    beforeDestroy() {
-      clearInterval(this.timer)
-    },
-    mounted() {
-      let base = +new Date(2020, 1, 1)
-      let oneDay = 24 * 3600 * 1000
-      let date = []
-
-      let data = [Math.random() * 1500]
-      let now = new Date(base)
-
-      const addData = (shift) => {
-        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
-        date.push(now)
-        data.push(this.$baseLodash.random(20000, 60000))
-
-        if (shift) {
-          date.shift()
-          data.shift()
-        }
-
-        now = new Date(+new Date(now) + oneDay)
-      }
-
-      for (let i = 1; i < 6; i++) {
-        addData()
-      }
-      addData(true)
-      this.fwl.xAxis[0].data = date
-      this.fwl.series[0].data = data
-      this.timer = setInterval(() => {
-        addData(true)
-        this.fwl.xAxis[0].data = date
-        this.fwl.series[0].data = data
-      }, 3000)
-    },
-    methods: {
-      handleClick(e) {
-        this.$baseMessage(`点击了${e.name},这里可以写跳转`)
-      },
-      handleZrClick() {},
-      handleChangeTheme() {
-        this.$baseEventBus.$emit('theme')
-      },
-      async fetchData() {
-        const res = await getNoticeList()
-        this.noticeList = res.data
-      },
     },
   }
 </script>
-<style lang="scss" scoped>
-  .index-container {
-    padding: 0 !important;
-    margin: 0 !important;
-    background: #f5f7f8 !important;
-
-    ::v-deep {
-      .el-alert {
-        padding: $base-padding;
-
-        &--info.is-light {
-          min-height: 82px;
-          padding: $base-padding;
-          margin-bottom: 15px;
-          color: #909399;
-          background-color: $base-color-white;
-          border: 1px solid #ebeef5;
-        }
-      }
-
-      .el-card__body {
-        .echarts {
-          width: 100%;
-          height: 115px;
-        }
-      }
-    }
-
-    .card {
-      ::v-deep {
-        .el-card__body {
-          .echarts {
-            width: 100%;
-            height: 305px;
-          }
-        }
-      }
-    }
-
-    .bottom {
-      padding-top: 20px;
-      margin-top: 5px;
-      color: #595959;
-      text-align: left;
-      border-top: 1px solid $base-border-color;
-    }
-
-    .table {
-      width: 100%;
-      color: #666;
-      border-collapse: collapse;
-      background-color: #fff;
-
-      td {
-        position: relative;
-        min-height: 20px;
-        padding: 9px 15px;
-        font-size: 14px;
-        line-height: 20px;
-        border: 1px solid #e6e6e6;
-
-        &:nth-child(odd) {
-          width: 20%;
-          text-align: right;
-          background-color: #f7f7f7;
-        }
-      }
-    }
-
-    .icon-panel {
-      height: 117px;
-      text-align: center;
-      cursor: pointer;
-
-      svg {
-        font-size: 40px;
-      }
-
-      p {
-        margin-top: 10px;
-      }
-    }
-
-    .bottom-btn {
-      button {
-        margin: 5px 10px 15px 0;
-      }
-    }
-  }
-</style>

src/views/index/utils/index.js

@@ -0,0 +1,39 @@
+export const eventNameMap = {
+  avatar_load_more: '头像加载更多',
+  avatar_page_visit: '头像页访问',
+  fortune_page_visit: '抽签页访问',
+  greeting_page_visit: '祝福页访问',
+  mine_page_visit: '我的页访问',
+  make_page_visit: '制作页访问',
+  index_page_visit: '首页访问',
+  card_tpl_choose: '选择祝福卡片模板',
+  card_title_choose: '选择祝福卡片标题',
+  avatar_choose_album: '选择头像相册',
+  index_function_select: '首页功能选择',
+  index_goto_make: '首页推荐跳转',
+  index_recommend_click: '首页推荐点击',
+  wallpaper_page_visit: '壁纸页访问',
+  wallpaper_preview_click: '壁纸预览点击',
+  card_text_choose: '选择祝福卡片文本',
+}
+
+export const eventTypeMap = {
+  jump: '跳转',
+  click: '点击',
+  select: '选择',
+  load_more: '加载更多',
+  visit: '访问',
+}
+
+export const appMap = {
+  '69665538a49b8ae3be50fe5d': '新春祝福',
+}
+
+export const userMap = {
+  '697efa4082f6cf96027632b8': '姐夫',
+  '69886ce32e3c1bb264902e29': '爸爸',
+  '6985a7c7f76d8026019f4e28': '妈妈',
+  '697a34996c4283e7b5904dbd': '哎萌',
+  '6973765449d17414b66970a2': '我',
+  '697da7f1af55ae2451863526': '姐姐',
+}

src/views/spring/avatar/record/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="avatar-record-container">
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.keyword" clearable placeholder="请输入查询条件" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-left-panel>
+    </vab-query-form>
+
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
+      <el-table-column align="center" label="生成结果" width="100">
+        <template slot-scope="scope">
+          <el-tooltip class="item" :content="scope.row.id" effect="dark" placement="top">
+            <el-image fit="cover" :preview-src-list="[scope.row.imageUrl]" :src="scope.row.imageUrl" style="width: 50px; height: 50px" />
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column align="left" label="信息" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div>
+            <div>
+              <strong>设备：</strong>
+              <template v-if="row.deviceId">
+                <el-link type="primary" :underline="false" @click="goToDevice(row.deviceId)">{{ row.deviceModel || row.deviceId }}</el-link>
+              </template>
+              <template v-else>--</template>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="left" label="作者信息" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div class="author-cell">
+            <img alt="avatar" class="author-avatar" :src="row?.fromUser?.avatar" />
+            <div class="author-meta">
+              <div>
+                <strong>id：</strong>
+                {{ row?.fromUser?.id || '--' }}
+              </div>
+              <div>
+                <strong>昵称：</strong>
+                {{ row?.fromUser?.nickname || '--' }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="创建时间" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ formatTime(row.createdAt) }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+  import { getCreateList } from '@/api/spring/avatar'
+  import { formatTime } from '@/utils'
+
+  export default {
+    name: 'AvatarRecord',
+    data() {
+      return {
+        host: 'https://file.lihailezzc.com/',
+        list: null,
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          keyword: '',
+        },
+        timeOutID: null,
+      }
+    },
+    created() {
+      const { id } = this.$route.query || {}
+      if (id) {
+        this.queryForm.keyword = id
+        this.queryForm.pageNo = 1
+      }
+      this.fetchData()
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    methods: {
+      formatTime,
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      goToDevice(deviceId) {
+        this.$router.push({ path: '/spring/user/userChat', query: { deviceId } })
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data } = await getCreateList(this.queryForm)
+        this.list = data.list
+        this.total = data.totalCount
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 300)
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .author-option {
+    display: flex;
+    align-items: center;
+  }
+  .author-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 8px;
+  }
+  .author-name {
+    font-size: 14px;
+  }
+  .author-cell {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .author-avatar {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+  .author-meta {
+    display: flex;
+    flex-direction: column;
+  }
+  .image-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .grid-image {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+</style>

src/views/spring/blessing/generateRecord/index.vue

@@ -64,24 +64,6 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column align="left" label="交互信息" show-overflow-tooltip>
-        <template #default="{ row }">
-          <div>
-            <div>
-              <strong>查看数：</strong>
-              {{ row.viewCount }}
-            </div>
-            <div>
-              <strong>分享数：</strong>
-              {{ row.shareCount }}
-            </div>
-            <div>
-              <strong>保存数：</strong>
-              {{ row.saveCount }}
-            </div>
-          </div>
-        </template>
-      </el-table-column>
       <el-table-column align="left" label="作者信息" show-overflow-tooltip>
         <template #default="{ row }">
           <div class="author-cell">

src/views/spring/fortune/card/index.vue

@@ -31,7 +31,12 @@
       <el-table-column align="center" label="卡片" width="100">
         <template slot-scope="scope">
           <el-tooltip class="item" :content="scope.row.title" effect="dark" placement="top">
-            <el-image fit="cover" :preview-src-list="[scope.row.imageUrl]" :src="scope.row.imageUrl" style="width: 50px; height: 50px" />
+            <el-image
+              fit="cover"
+              :preview-src-list="[scope.row.imageUrl]"
+              :src="getThumbUrl(scope.row.imageUrl)"
+              style="width: 50px; height: 50px"
+            />
           </el-tooltip>
         </template>
       </el-table-column>
@@ -82,6 +87,7 @@
   import { doDelete, getList } from '@/api/spring/fortune/card'
   import { formatTime } from '@/utils'
   import Edit from './components/AppManagementEdit'
+  import { getThumbUrl } from '@/utils/blessing'
 
   export default {
     name: 'AppManagement',
@@ -111,6 +117,7 @@
       clearTimeout(this.timeOutID)
     },
     methods: {
+      getThumbUrl,
       setSelectRows(val) {
         this.selectRows = val
       },

src/views/spring/fortune/drawRecord/index.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="draw-record-container">
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.keyword" clearable placeholder="请输入查询条件" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-left-panel>
+    </vab-query-form>
+
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
+      <el-table-column align="center" label="抽签结果" width="100">
+        <template slot-scope="scope">
+          <el-tooltip class="item" :content="scope.row.id" effect="dark" placement="top">
+            <el-image
+              fit="cover"
+              :preview-src-list="[scope.row.imageUrl]"
+              :src="getThumbUrl(scope.row.imageUrl)"
+              style="width: 50px; height: 50px"
+            />
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column align="left" label="信息" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div>
+            <div>
+              <strong>设备：</strong>
+              <template v-if="row.deviceId">
+                <el-link type="primary" :underline="false" @click="goToDevice(row.deviceId)">{{ row.deviceModel || row.deviceId }}</el-link>
+              </template>
+              <template v-else>--</template>
+            </div>
+            <div>
+              <strong>卡片id：</strong>
+              <template v-if="row.cardId">
+                <el-link type="primary" :underline="false" @click="goToCard(row.cardId)">{{ row.cardId }}</el-link>
+              </template>
+              <template v-else>--</template>
+            </div>
+          </div>
+        </template>
+      </el-table-column> -->
+      <el-table-column align="left" label="抽签人" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div class="author-cell">
+            <img alt="avatar" class="author-avatar" :src="row?.fromUser?.avatar" />
+            <div class="author-meta">
+              <div>
+                <strong>id：</strong>
+                {{ row?.fromUser?.id || '--' }}
+              </div>
+              <div>
+                <strong>昵称：</strong>
+                {{ row?.fromUser?.nickname || '--' }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="创建时间" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ formatTime(row.createdAt) }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+  import { getDrawList } from '@/api/spring/fortune/card'
+  import { formatTime } from '@/utils'
+  import { getThumbUrl } from '@/utils/blessing'
+
+  export default {
+    name: 'DrawRecord',
+    data() {
+      return {
+        host: 'https://file.lihailezzc.com/',
+        list: null,
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          keyword: '',
+        },
+        timeOutID: null,
+      }
+    },
+    created() {
+      const { id } = this.$route.query || {}
+      if (id) {
+        this.queryForm.keyword = id
+        this.queryForm.pageNo = 1
+      }
+      this.fetchData()
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    methods: {
+      getThumbUrl,
+      formatTime,
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      goToDevice(deviceId) {
+        this.$router.push({ path: '/spring/user/userChat', query: { deviceId } })
+      },
+      goToCard(cardId) {
+        // Assuming there is a card detail or list page, but for now just placeholder or link to card list
+        this.$router.push({ path: '/spring/fortune/card', query: { id: cardId } })
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data } = await getDrawList(this.queryForm)
+        this.list = data.list
+        this.total = data.totalCount
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 300)
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .author-option {
+    display: flex;
+    align-items: center;
+  }
+  .author-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 8px;
+  }
+  .author-name {
+    font-size: 14px;
+  }
+  .author-cell {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .author-avatar {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+  .author-meta {
+    display: flex;
+    flex-direction: column;
+  }
+  .image-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .grid-image {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+</style>

src/views/spring/index/recommend/components/RecommendEdit.vue

@@ -40,6 +40,8 @@
         <el-select v-model="form.tag" placeholder="请选择标签" style="width: 100%">
           <el-option label="最新" value="new" />
           <el-option label="热门" value="hot" />
+          <el-option label="精选" value="featured" />
+          <el-option label="爆款" value="hot2" />
           <el-option label="无" value="" />
         </el-select>
       </el-form-item>

src/views/spring/index/recommend/index.vue

@@ -43,6 +43,8 @@
         <template #default="{ row }">
           <el-tag v-if="row.tag === 'new'" type="success">最新</el-tag>
           <el-tag v-else-if="row.tag === 'hot'" type="danger">热门</el-tag>
+          <el-tag v-else-if="row.tag === 'featured'" type="info">精选</el-tag>
+          <el-tag v-else-if="row.tag === 'hot2'" type="warning">爆款</el-tag>
           <span v-else>{{ row.tag || '--' }}</span>
         </template>
       </el-table-column>

src/views/spring/index/tips/components/AppManagementEdit.vue

@@ -0,0 +1,110 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+      <el-form-item label="文案" prop="text">
+        <el-input v-model="form.text" autocomplete="off" :rows="2" type="textarea" />
+      </el-form-item>
+      <el-form-item label="跳转地址" prop="url">
+        <el-input v-model="form.url" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="标签" prop="tag">
+        <el-select v-model="form.tag" placeholder="请选择标签" style="width: 100%">
+          <el-option label="新品" value="new" />
+          <el-option label="热门" value="hot" />
+          <el-option label="爆款" value="hot2" />
+          <el-option label="精选" value="featured" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="类型" prop="type">
+        <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%">
+          <el-option label="默认" value="" />
+          <el-option label="页面" value="path" />
+          <el-option label="tab页" value="switchTab" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否启用" prop="isEnabled">
+        <el-switch v-model="form.isEnabled" active-text="启用" :active-value="true" inactive-text="禁用" :inactive-value="false" />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit, doAdd } from '@/api/spring/index/tips'
+
+  export default {
+    name: 'AppManagementEdit',
+    data() {
+      return {
+        id: '',
+        form: {
+          text: '',
+          url: '',
+          tag: '',
+          type: '',
+          isEnabled: true,
+        },
+        rules: {
+          text: [{ required: true, trigger: 'blur', message: '请输入文案' }],
+          url: [{ required: true, trigger: 'blur', message: '请输入跳转地址' }],
+          isEnabled: [{ required: true, trigger: 'blur', message: '请选择是否启用' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+          this.form = {
+            text: '',
+            url: '',
+            tag: '',
+            type: '',
+            isEnabled: true,
+          }
+        } else {
+          this.title = '编辑'
+          this.form = {
+            text: row.text,
+            url: row.url,
+            tag: row.tag,
+            type: row.type,
+            isEnabled: row.isEnabled,
+          }
+          this.id = row.id
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.id = ''
+        this.dialogFormVisible = false
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            if (this.id) {
+              const { msg } = await doEdit(this.id, this.form)
+              this.$baseMessage(msg, 'success')
+            } else {
+              const { msg } = await doAdd(this.form)
+              this.$baseMessage(msg, 'success')
+            }
+            this.$emit('fetch-data')
+            this.close()
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>

src/views/spring/index/tips/index.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="tips-container">
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button>
+        <!-- <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button> -->
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.keyword" clearable placeholder="请输入查询条件" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
+      <el-table-column align="center" label="排序" prop="sort" show-overflow-tooltip />
+      <el-table-column align="center" label="文案" prop="text" show-overflow-tooltip />
+      <el-table-column align="center" label="跳转地址" prop="url" show-overflow-tooltip />
+      <el-table-column align="center" label="标签" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-tag v-if="row.tag === 'new'" type="success">新品</el-tag>
+          <el-tag v-else-if="row.tag === 'hot'" type="danger">热门</el-tag>
+          <el-tag v-else-if="row.tag === 'hot2'" type="warning">爆款</el-tag>
+          <el-tag v-else-if="row.tag === 'featured'" type="info">精选</el-tag>
+          <span v-else>--</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="类型" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span v-if="row.type === 'path'">页面</span>
+          <span v-else-if="row.type === 'switchTab'">tab页</span>
+          <span v-else>默认</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="是否启用" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-switch active-color="#13ce66" inactive-color="#ff4949" :value="row.isEnabled" @change="handleToggleEnable(row, $event)" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button :disabled="!scope.row.isEnabled || isFirstEnabled(scope.row)" type="text" @click="handleMoveUp(scope.row)">
+            上移
+          </el-button>
+          <el-button :disabled="!scope.row.isEnabled || isLastEnabled(scope.row)" type="text" @click="handleMoveDown(scope.row)">
+            下移
+          </el-button>
+          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <edit ref="edit" @fetch-data="fetchData" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, getList, toggleEnable, doMoveUp, doMoveDown } from '@/api/spring/index/tips'
+  import Edit from './components/AppManagementEdit'
+
+  export default {
+    name: 'Tips',
+    components: { Edit },
+    data() {
+      return {
+        list: null,
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          keyword: '',
+        },
+        timeOutID: null,
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    methods: {
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row && row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: [row.id] })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids.split(',') })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data } = await getList(this.queryForm)
+        this.list = data.list
+        this.total = data.totalCount
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 300)
+      },
+      async handleToggleEnable(row, val) {
+        const prev = row.isEnabled
+        row.isEnabled = val
+        try {
+          const { msg } = await toggleEnable(row.id, val)
+          if (msg) this.$baseMessage(msg, 'success')
+          this.fetchData()
+        } catch (e) {
+          row.isEnabled = prev
+          this.$baseMessage('更新失败', 'error')
+        }
+      },
+      async handleMoveUp(row) {
+        try {
+          const { msg } = await doMoveUp(row.id)
+          if (msg) this.$baseMessage(msg, 'success')
+          this.fetchData()
+        } catch (e) {
+          this.$baseMessage('操作失败', 'error')
+        }
+      },
+      async handleMoveDown(row) {
+        try {
+          const { msg } = await doMoveDown(row.id)
+          if (msg) this.$baseMessage(msg, 'success')
+          this.fetchData()
+        } catch (e) {
+          this.$baseMessage('操作失败', 'error')
+        }
+      },
+      isFirstEnabled(row) {
+        if (!this.list || this.list.length === 0) return false
+        const enabled = this.list.filter((item) => item.isEnabled)
+        if (enabled.length === 0) return false
+        return enabled[0].id === row.id
+      },
+      isLastEnabled(row) {
+        if (!this.list || this.list.length === 0) return false
+        const enabled = this.list.filter((item) => item.isEnabled)
+        if (enabled.length === 0) return false
+        return enabled[enabled.length - 1].id === row.id
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .content-cell {
+    white-space: pre-wrap;
+    word-break: break-word;
+    line-height: 1.6;
+  }
+</style>

src/views/spring/user/order/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="user-order-container">
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.userId" clearable placeholder="请输入User ID" />
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.outTradeNo" clearable placeholder="请输入订单号" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-left-panel>
+    </vab-query-form>
+
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
+      <el-table-column align="center" label="订单号" prop="outTradeNo" show-overflow-tooltip />
+
+      <el-table-column align="center" label="用户信息">
+        <template #default="{ row }">
+          <div v-if="row.detail" style="display: flex; align-items: center; justify-content: center">
+            <img
+              v-if="row.detail.avatar"
+              :src="row.detail.avatar"
+              style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; object-fit: cover"
+            />
+            <div style="text-align: left">
+              <div>{{ row.detail.nickname || row.userId }}</div>
+              <div style="font-size: 12px; color: #909399">
+                ID:
+                <el-link type="primary" :underline="false" @click="goToUser(row.userId)">{{ row.userId }}</el-link>
+              </div>
+            </div>
+          </div>
+          <el-link v-else type="primary" :underline="false" @click="goToUser(row.userId)">{{ row.userId }}</el-link>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="商品描述" prop="description" show-overflow-tooltip />
+
+      <el-table-column align="center" label="金额" prop="totalAmount" width="120">
+        <template #default="{ row }">
+          <span style="color: #f56c6c; font-weight: bold">¥{{ (row.totalAmount / 100).toFixed(2) }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="支付渠道">
+        <template #default="{ row }">
+          <el-tag v-if="row.provider === 'wechat'" size="small" type="success">微信</el-tag>
+          <el-tag v-else-if="row.provider === 'alipay'" size="small" type="primary">支付宝</el-tag>
+          <el-tag v-else-if="row.provider === 'douyin'" size="small" type="warning">抖音</el-tag>
+          <span v-else>{{ row.provider }}</span>
+          <div style="font-size: 12px; color: #909399; margin-top: 4px">{{ row.channel }}</div>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="状态" prop="tradeState" width="120">
+        <template #default="{ row }">
+          <el-tag v-if="row.tradeState === 'SUCCESS'" type="success">支付成功</el-tag>
+          <el-tag v-else-if="row.tradeState === 'REFUND'" type="warning">已退款</el-tag>
+          <el-tag v-else-if="row.tradeState === 'NOTPAY'" type="info">未支付</el-tag>
+          <el-tag v-else-if="row.tradeState === 'CLOSED'" type="info">已关闭</el-tag>
+          <el-tag v-else-if="row.tradeState === 'PAYERROR'" type="danger">支付失败</el-tag>
+          <el-tag v-else>{{ row.tradeState }}</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="VIP计划" prop="vipPlanId" show-overflow-tooltip width="140">
+        <template #default="{ row }">
+          {{ row.vipPlanId || '-' }}
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="创建时间" prop="createdAt" width="170">
+        <template #default="{ row }">
+          {{ formatTime(row.createdAt) }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+  import { getUserOrderList } from '@/api/spring/user'
+  import { formatTime } from '@/utils'
+
+  export default {
+    name: 'UserOrder',
+    data() {
+      return {
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          userId: '',
+          outTradeNo: '',
+        },
+      }
+    },
+    created() {
+      if (this.$route.query.userId) {
+        this.queryForm.userId = this.$route.query.userId
+      }
+      this.fetchData()
+    },
+    methods: {
+      formatTime,
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        try {
+          const { data } = await getUserOrderList(this.queryForm)
+          this.list = data.list
+          this.total = data.totalCount
+        } catch (error) {
+          console.error(error)
+        } finally {
+          this.listLoading = false
+        }
+      },
+      goToUser(userId) {
+        this.$router.push({
+          path: '/spring/user/user',
+          query: { userId },
+        })
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .user-order-container {
+    padding: 20px;
+  }
+</style>

src/views/spring/user/saveRecord/index.vue

@@ -7,6 +7,9 @@
       <!-- </vab-query-form-left-panel> -->
       <vab-query-form-left-panel :span="12">
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.userId" clearable placeholder="请输入用户id" />
+          </el-form-item>
           <el-form-item>
             <el-input v-model.trim="queryForm.keyword" clearable placeholder="请输入查询条件" />
           </el-form-item>
@@ -133,11 +136,15 @@
           pageSize: 10,
           scene: '',
           keyword: '',
+          userId: '',
         },
         timeOutID: null,
       }
     },
     created() {
+      if (this.$route.query.userId) {
+        this.queryForm.userId = this.$route.query.userId
+      }
       this.fetchData()
     },
 

src/views/spring/user/shareRecord/index.vue

@@ -8,7 +8,10 @@
       <vab-query-form-left-panel :span="12">
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
           <el-form-item>
-            <el-input v-model.trim="queryForm.keyword" clearable placeholder="请输入查询条件" />
+            <el-input v-model.trim="queryForm.userId" clearable placeholder="请输入用户id" />
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.keyword" clearable placeholder="请输入 shareToken" />
           </el-form-item>
           <el-form-item>
             <el-select v-model="queryForm.scene" clearable placeholder="请选择分享场景" @change="queryData">
@@ -133,6 +136,7 @@
           pageSize: 10,
           scene: '',
           keyword: '',
+          userId: '',
         },
         timeOutID: null,
       }
@@ -141,6 +145,9 @@
       if (this.$route.query.keyword) {
         this.queryForm.keyword = this.$route.query.keyword
       }
+      if (this.$route.query.userId) {
+        this.queryForm.userId = this.$route.query.userId
+      }
       this.fetchData()
     },
 

src/views/spring/user/user/index.vue

@@ -8,7 +8,7 @@
       <vab-query-form-left-panel :span="12">
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
           <el-form-item>
-            <el-input v-model.trim="queryForm.permission" clearable placeholder="请输入查询条件" />
+            <el-input v-model.trim="queryForm.userId" clearable placeholder="请输入查询条件" />
           </el-form-item>
           <el-form-item>
             <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
@@ -44,20 +44,20 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column align="left" label="小程序信息" show-overflow-tooltip>
+      <el-table-column align="left" label="使用信息" show-overflow-tooltip>
         <template #default="{ row }">
           <div>
             <div>
-              <strong>粉丝：</strong>
+              <strong>分享数：</strong>
-              {{ row.followers }}
+              <el-link type="primary" :underline="false" @click="goToShareRecord(row.id)">{{ row.shareCount }}</el-link>
             </div>
             <div>
-              <strong>关注数：</strong>
+              <strong>查看数：</strong>
-              {{ row.followings }}
+              <el-link type="primary" :underline="false" @click="goToViewRecord(row.id)">{{ row.viewCount }}</el-link>
             </div>
             <div>
-              <strong>好友：</strong>
+              <strong>保存数：</strong>
-              {{ row.friends }}
+              <el-link type="primary" :underline="false" @click="goToSaveRecord(row.id)">{{ row.saveCount }}</el-link>
             </div>
           </div>
         </template>
@@ -104,12 +104,15 @@
         queryForm: {
           pageNo: 1,
           pageSize: 10,
-          permission: '',
+          userId: '',
         },
         timeOutID: null,
       }
     },
     created() {
+      if (this.$route.query.userId) {
+        this.queryForm.userId = this.$route.query.userId
+      }
       this.fetchData()
     },
 
@@ -164,6 +167,15 @@
       goToDevice(deviceId) {
         this.$router.push({ path: '/spring/user/userChat', query: { deviceId } })
       },
+      goToShareRecord(userId) {
+        this.$router.push({ path: '/spring/user/shareRecord', query: { userId } })
+      },
+      goToViewRecord(userId) {
+        this.$router.push({ path: '/spring/user/viewRecord', query: { userId } })
+      },
+      goToSaveRecord(userId) {
+        this.$router.push({ path: '/spring/user/saveRecord', query: { userId } })
+      },
       async fetchData() {
         this.listLoading = true
         const { data } = await getUserList(this.queryForm)

src/views/spring/user/viewRecord/index.vue

@@ -8,7 +8,7 @@
       <vab-query-form-left-panel :span="12">
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
           <el-form-item>
-            <el-input v-model.trim="queryForm.keyword" clearable placeholder="请输入查询条件" />
+            <el-input v-model.trim="queryForm.userId" clearable placeholder="请输入查询条件" />
           </el-form-item>
           <el-form-item>
             <el-select v-model="queryForm.scene" clearable placeholder="请选择浏览场景" @change="queryData">
@@ -134,11 +134,15 @@
           pageSize: 10,
           scene: '',
           keyword: '',
+          userId: '',
         },
         timeOutID: null,
       }
     },
     created() {
+      if (this.$route.query.userId) {
+        this.queryForm.userId = this.$route.query.userId
+      }
       this.fetchData()
     },
 

src/views/spring/user/vipUser/index.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="cat-user-container">
+    <vab-query-form>
+      <!-- <vab-query-form-left-panel :span="12"> -->
+      <!-- <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button> -->
+      <!-- <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button> -->
+      <!-- </vab-query-form-left-panel> -->
+      <vab-query-form-left-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.userId" clearable placeholder="请输入查询条件" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-left-panel>
+    </vab-query-form>
+
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
+      <el-table-column align="center" label="头像" show-overflow-tooltip>
+        <template #default="{ row }">
+          <img alt="image" :src="row.detail.avatar" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
+        </template>
+      </el-table-column>
+      <el-table-column align="left" label="信息" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div>
+            <div>
+              <strong>名称：</strong>
+              {{ row.detail.nickname }}
+            </div>
+            <div>
+              <strong>平台：</strong>
+              {{ row.source }}
+            </div>
+            <div>
+              <strong>设备 id：</strong>
+              <template v-if="row.deviceId">
+                <el-link type="primary" :underline="false" @click="goToDevice(row.deviceId)">{{ row.deviceId }}</el-link>
+              </template>
+              <template v-else>--</template>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="left" label="使用信息" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div>
+            <div>
+              <strong>分享数：</strong>
+              <el-link type="primary" :underline="false" @click="goToShareRecord(row.detail.id)">{{ row.shareCount }}</el-link>
+            </div>
+            <div>
+              <strong>查看数：</strong>
+              <el-link type="primary" :underline="false" @click="goToViewRecord(row.detail.id)">{{ row.viewCount }}</el-link>
+            </div>
+            <div>
+              <strong>保存数：</strong>
+              <el-link type="primary" :underline="false" @click="goToSaveRecord(row.detail.id)">{{ row.saveCount }}</el-link>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="left" label="会员时间" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div>
+            <div>
+              <strong>开始时间：</strong>
+              {{ formatTime(row.startAt) }}
+            </div>
+            <div>
+              <strong>结束时间：</strong>
+              {{ formatTime(row.endAt) }}
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="状态" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-tag v-if="isExpired(row.endAt)" type="danger">已过期</el-tag>
+          <el-tag v-else type="success">生效中</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="剩余天数" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ getRemainingDays(row.endAt) }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="创建时间" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ formatTime(row.createdAt) }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="操作" show-overflow-tooltip width="200">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+  import { getVipUserList } from '@/api/spring/user'
+  import { formatTime } from '@/utils'
+
+  export default {
+    name: 'VipUser',
+    data() {
+      return {
+        host: 'https://file.lihailezzc.com/',
+        list: null,
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          userId: '',
+        },
+        timeOutID: null,
+      }
+    },
+    created() {
+      if (this.$route.query.userId) {
+        this.queryForm.userId = this.$route.query.userId
+      }
+      this.fetchData()
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    methods: {
+      formatTime,
+      parseDate(time) {
+        if (typeof time === 'string' && !isNaN(Date.parse(time))) {
+          return new Date(time)
+        } else if (`${time}`.length === 10) {
+          return new Date(parseInt(time) * 1000)
+        } else {
+          return new Date(+time)
+        }
+      },
+      isExpired(time) {
+        if (!time) return true
+        const date = this.parseDate(time)
+        if (isNaN(date.getTime())) return true
+        return date.getTime() < Date.now()
+      },
+      getRemainingDays(time) {
+        if (!time) return '--'
+        const date = this.parseDate(time)
+        if (isNaN(date.getTime())) return '--'
+        const diff = date.getTime() - Date.now()
+        if (diff < 0) return '0天'
+        const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
+        return `${days}天`
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: [row.id] })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids.split(',') })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      goToDevice(deviceId) {
+        this.$router.push({ path: '/spring/user/userChat', query: { deviceId } })
+      },
+      goToShareRecord(userId) {
+        this.$router.push({ path: '/spring/user/shareRecord', query: { userId } })
+      },
+      goToViewRecord(userId) {
+        this.$router.push({ path: '/spring/user/viewRecord', query: { userId } })
+      },
+      goToSaveRecord(userId) {
+        this.$router.push({ path: '/spring/user/saveRecord', query: { userId } })
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data } = await getVipUserList(this.queryForm)
+        this.list = data.list
+        this.total = data.totalCount
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 300)
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .author-option {
+    display: flex;
+    align-items: center;
+  }
+  .author-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 8px;
+  }
+  .author-name {
+    font-size: 14px;
+  }
+  .image-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .grid-image {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+</style>