fix:修改用户列表的更多中的相关操作

src/views/dashboard/Dashboard.vue

@@ -13,7 +13,7 @@
               <el-icon><component :is="card.icon" /></el-icon>
             </div>
           </div>
-          <div class="card-footer">
+          <!-- <div class="card-footer">
             <span>较昨日</span>
             <span :class="card.trend > 0 ? 'up' : 'down'">
               {{ card.trend > 0 ? '+' : '' }}{{ card.trend }}%
@@ -23,13 +23,13 @@
           </div>
           <div class="progress-bar">
             <div class="progress-inner" :style="{width: card.progress + '%', background: card.progressColor}"></div>
-          </div>
+          </div> -->
         </el-card>
       </el-col>
     </el-row>
 
     <!-- 图表部分 -->
-    <el-row :gutter="24" class="chart-row">
+    <!-- <el-row :gutter="24" class="chart-row">
       <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
         <el-card class="chart-card" shadow="hover">
           <div class="chart-header">
@@ -116,10 +116,137 @@
           <div class="chart-container" ref="customerChartRef"></div>
         </el-card>
       </el-col>
+    </el-row> -->
+
+    <!-- 数据列表区域 -->
+    <el-row :gutter="24" class="list-row">
+      <!-- 最近用户 -->
+      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+        <el-card class="list-card" shadow="hover" v-loading="listLoading">
+          <div class="card-header-custom">
+            <div class="header-left">
+              <el-icon class="header-icon user-icon"><User /></el-icon>
+              <h3>最近用户</h3>
+            </div>
+            <el-link type="primary" :underline="false" class="view-all" @click="goToUserList">
+              查看全部 <el-icon class="el-icon--right"><Right /></el-icon>
+            </el-link>
+          </div>
+          <div class="list-content">
+            <div v-if="recentUsers.length === 0" class="empty-tip">暂无数据</div>
+            <div v-for="item in recentUsers" :key="item.id" class="list-item" @click="goToUserDetail(item.id)">
+              <div class="item-main">
+                <div class="item-title">{{ item.name }}</div>
+                <div class="item-sub">{{ item.email }}</div>
+              </div>
+              <div class="item-extra">
+                <div class="item-id">ID: {{ item.id }}</div>
+                <div class="item-time">{{ formatDate(item.createdAt) }}</div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      
+      <!-- 最近订单 -->
+      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+        <el-card class="list-card" shadow="hover" v-loading="listLoading">
+          <div class="card-header-custom">
+            <div class="header-left">
+              <el-icon class="header-icon order-icon"><ShoppingCart /></el-icon>
+              <h3>最近订单</h3>
+            </div>
+            <el-link type="primary" :underline="false" class="view-all" @click="goToOrderList">
+              查看全部 <el-icon class="el-icon--right"><Right /></el-icon>
+            </el-link>
+          </div>
+          <div class="list-content">
+            <div v-if="recentOrders.length === 0" class="empty-tip">暂无数据</div>
+            <div v-for="item in recentOrders" :key="item.id" class="list-item" @click="showOrderDetail(item)">
+              <div class="item-main">
+                <div class="item-title">{{ item.name }}</div>
+                <div class="item-sub">用户ID: {{ item.userId }}</div>
+              </div>
+              <div class="item-extra">
+                <el-tag :type="getOrderStatusType(item.state)" size="small">
+                  {{ getOrderStatusText(item.state) }}
+                </el-tag>
+                <div class="item-price">¥{{ (item.price / 100).toFixed(2) }}</div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      
+      <!-- 最近工单 -->
+      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+        <el-card class="list-card" shadow="hover" v-loading="listLoading">
+          <div class="card-header-custom">
+            <div class="header-left">
+              <el-icon class="header-icon ticket-icon"><Tickets /></el-icon>
+              <h3>最近工单</h3>
+            </div>
+            <el-link type="primary" :underline="false" class="view-all" @click="goToTicketList">
+              查看全部 <el-icon class="el-icon--right"><Right /></el-icon>
+            </el-link>
+          </div>
+          <div class="list-content">
+            <div v-if="recentTickets.length === 0" class="empty-tip">暂无数据</div>
+            <div v-for="item in recentTickets" :key="item.id" class="list-item" @click="goToTicketDetail(item.id)">
+              <div class="item-main">
+                <div class="item-title">{{ item.title || '工单 #' + item.id }}</div>
+                <div class="item-sub">用户ID: {{ item.userId }}</div>
+              </div>
+              <div class="item-extra">
+                <el-tag :type="getTicketStatusType(item.status)" size="small">
+                  {{ getTicketStatusText(item.status) }}
+                </el-tag>
+                <div class="item-time">{{ formatDate(item.createdAt) }}</div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
     </el-row>
 
+    <!-- 订单详情弹窗 -->
+    <el-dialog
+      v-model="orderDetailVisible"
+      title="订单详情"
+      width="600px"
+      append-to-body
+      class="order-detail-dialog"
+    >
+      <el-descriptions :column="2" border v-if="currentOrder">
+        <el-descriptions-item label="订单ID">{{ currentOrder.id }}</el-descriptions-item>
+        <el-descriptions-item label="订单名称">{{ currentOrder.name }}</el-descriptions-item>
+        <el-descriptions-item label="用户ID">{{ currentOrder.userId }}</el-descriptions-item>
+        <el-descriptions-item label="商品ID">{{ currentOrder.commodityId }}</el-descriptions-item>
+        <el-descriptions-item label="订单金额">
+          <span class="detail-price">¥{{ (currentOrder.price / 100).toFixed(2) }}</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="续费价格">
+          <span class="detail-renew-price">¥{{ (currentOrder.renewPrice / 100).toFixed(2) }}</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="数量">{{ currentOrder.payNum }}</el-descriptions-item>
+        <el-descriptions-item label="订单状态">
+          <el-tag :type="getOrderStatusType(currentOrder.state)">
+            {{ getOrderStatusText(currentOrder.state) }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="支付方式">{{ currentOrder.payType || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ formatDate(currentOrder.createdAt) }}</el-descriptions-item>
+      </el-descriptions>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="orderDetailVisible = false">关闭</el-button>
+          <el-button type="primary" @click="goToOrderList">查看全部订单</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
     <!-- 最近活动和待办事项 -->
-    <el-row :gutter="24" class="activity-row">
+    <!-- <el-row :gutter="24" class="activity-row">
       <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
         <el-card class="activity-card" shadow="hover">
           <div class="card-header-custom">
@@ -207,28 +334,45 @@
           </div>
         </el-card>
       </el-col>
-    </el-row>
+    </el-row> -->
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, watch, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { 
   User, ShoppingCart, Money, DataAnalysis, 
   MoreFilled, ArrowUp, ArrowDown, Right,
   Download, Refresh, Check, Delete, Plus,
-  Setting, Calendar, Filter
+  Setting, Calendar, Filter, Tickets, View
 } from '@element-plus/icons-vue'
 import * as echarts from 'echarts'
 import Qrcode from '@/components/Qrcode.vue'
 import {useUserStore} from "@/store/userStore.js";
+import { getUserList } from '@/api/admin/user'
+import { getOrderList } from '@/api/admin/order'
+import { getTicketCount, getTickerList } from '@/api/ticket'
 
 const userStore = useUserStore()
+const router = useRouter()
+
+// 统计数据
+const userCount = ref(0)
+const orderCount = ref(0)
+const ticketCount = ref(0)
+
+// 列表数据
+const recentUsers = ref([])
+const recentOrders = ref([])
+const recentTickets = ref([])
+const listLoading = ref(false)
+
 // 数据统计卡片
-const statisticsCards = ref([
+const statisticsCards = computed(() => [
   { 
-    title: '访问量', 
-    value: '8,846', 
+    title: '用户量', 
+    value: userCount.value.toLocaleString(), 
     icon: 'User', 
     trend: 12.5, 
     class: 'visitors',
@@ -237,7 +381,7 @@ const statisticsCards = ref([
   },
   { 
     title: '订单量', 
-    value: '1,257', 
+    value: orderCount.value.toLocaleString(), 
     icon: 'ShoppingCart', 
     trend: 5.2, 
     class: 'orders',
@@ -245,9 +389,9 @@ const statisticsCards = ref([
     progressColor: 'rgba(82, 196, 26, 0.8)'
   },
   { 
-    title: '销售额', 
-    value: '¥ 125,430', 
-    icon: 'Money', 
+    title: '工单量', 
+    value: ticketCount.value.toLocaleString(), 
+    icon: 'Tickets', 
     trend: -2.3, 
     class: 'sales',
     progress: 52,
@@ -264,6 +408,150 @@ const statisticsCards = ref([
   }
 ])
 
+// 获取统计数据
+const fetchStatistics = async () => {
+  try {
+    // 获取用户数量
+    const userRes = await getUserList({ page: 1, count: 1, key: '' })
+    console.log("用户数量，",userRes)
+    if (userRes.data?.code === 200) {
+      userCount.value = userRes.data.data.all_count || 0
+    }
+    
+    // 获取订单数量
+    const orderRes = await getOrderList({ page: 1, count: 1 })
+    console.log("订单数量，",orderRes)
+    if (orderRes.data?.code === 200) {
+      orderCount.value = orderRes.data.data.all_count || 0
+    }
+    
+    // 获取工单数量
+    const ticketRes = await getTicketCount()
+    console.log("工单数量，",ticketRes)
+    if (ticketRes.code === 200) {
+      ticketCount.value = ticketRes.data?.all_count  || 0
+    }
+  } catch (error) {
+    console.error('获取统计数据失败:', error)
+  }
+}
+
+// 获取最近列表数据
+const fetchRecentLists = async () => {
+  listLoading.value = true
+  try {
+    // 获取最近用户
+    const userRes = await getUserList({ page: 1, count: 5, key: '' })
+    if (userRes.data?.code === 200) {
+      recentUsers.value = (userRes.data.data.data || []).map(user => ({
+        id: user.user_id,
+        name: user.user_name,
+        email: user.email || '未设置',
+        phone: user.phone || '未设置',
+        createdAt: user.created_at
+      }))
+    }
+    
+    // 获取最近订单
+    const orderRes = await getOrderList({ page: 1, count: 5 })
+    if (orderRes.data?.code === 200) {
+      recentOrders.value = (orderRes.data.data.list || []).map(order => ({
+        id: order.id,
+        name: order.name,
+        userId: order.userId,
+        commodityId: order.commodityId,
+        price: order.price,
+        renewPrice: order.renewPrice || 0,
+        payNum: order.payNum || 1,
+        state: order.state,
+        payType: order.payType,
+        createdAt: order.CreatedAt
+      }))
+    }
+    
+    // 获取最近工单
+    const ticketRes = await getTickerList(5, 1)
+    console.log("最近工单，",ticketRes)
+    if (ticketRes.code === 200) {
+      recentTickets.value = (ticketRes.data.data?.list || ticketRes.data.data || []).map(ticket => ({
+        id: ticket.work_id || ticket.id,
+        title: ticket.title,
+        status: ticket.status,
+        userId: ticket.user?.userId,
+        createdAt: ticket.created_at || ticket.CreatedAt
+      }))
+    }
+  } catch (error) {
+    console.error('获取列表数据失败:', error)
+  } finally {
+    listLoading.value = false
+  }
+}
+
+// 格式化日期
+const formatDate = (dateString) => {
+  if (!dateString) return '-'
+  const date = new Date(dateString)
+  return date.toLocaleString('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// 获取订单状态
+const getOrderStatusText = (state) => {
+  const statusMap = { 0: '待支付', 1: '已支付', 2: '已失效' }
+  return statusMap[state] || '未知'
+}
+
+const getOrderStatusType = (state) => {
+  const typeMap = { 0: 'warning', 1: 'success', 2: 'info' }
+  return typeMap[state] || 'info'
+}
+
+// 获取工单状态
+const getTicketStatusText = (status) => {
+  const statusMap = { 0: '待处理', 1: '处理中', 2: '已回复', 3: '已解决' }
+  return statusMap[status] || '未知'
+}
+
+const getTicketStatusType = (status) => {
+  const typeMap = { 0: 'danger', 1: 'warning', 2: 'primary', 3: 'success' }
+  return typeMap[status] || 'info'
+}
+
+// 跳转到详情页
+const goToUserDetail = (userId) => {
+  router.push({ path: '/user/detail', query: { user_id: userId } })
+}
+
+const goToUserList = () => {
+  router.push('/user/list')
+}
+
+const goToOrderList = () => {
+  router.push('/order/list')
+}
+
+const goToTicketList = () => {
+  router.push('/ticket/list')
+}
+
+const goToTicketDetail = (ticketId) => {
+  router.push({ path: '/ticket/detail', query: { work_id: ticketId } })
+}
+
+// 订单详情弹窗
+const orderDetailVisible = ref(false)
+const currentOrder = ref(null)
+
+const showOrderDetail = (order) => {
+  currentOrder.value = order
+  orderDetailVisible.value = true
+}
+
 // 客户构成数据
 const customerData = ref([
   { name: '企业客户', value: 1048, percentage: 33, color: '#1890ff' },
@@ -331,6 +619,10 @@ const getPriorityType = (priority) => {
 }
 
 onMounted(() => {
+  // 获取统计数据和列表数据
+  fetchStatistics()
+  fetchRecentLists()
+  
   initSalesChart()
   initCustomerChart()
   
@@ -870,6 +1162,150 @@ watch(salesRange, (newVal) => {
   gap: 8px;
 }
 
+/* 列表卡片样式 */
+.list-row {
+  margin-bottom: 24px;
+}
+
+.list-card {
+  margin-bottom: 24px;
+  border-radius: 12px;
+  border: none;
+  height: 410px;
+  display: flex;
+  flex-direction: column;
+}
+
+.list-card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+}
+
+.header-icon {
+  font-size: 20px;
+  margin-right: 8px;
+}
+
+.user-icon {
+  color: #1890ff;
+}
+
+.order-icon {
+  color: #52c41a;
+}
+
+.ticket-icon {
+  color: #faad14;
+}
+
+.list-content {
+  padding: 0 20px 20px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.empty-tip {
+  text-align: center;
+  color: #8c8c8c;
+  padding: 40px 0;
+}
+
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.list-item:last-child {
+  border-bottom: none;
+}
+
+.list-item:hover {
+  background-color: #fafafa;
+  margin: 0 -20px;
+  padding: 12px 20px;
+}
+
+.item-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.item-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #262626;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 4px;
+}
+
+.item-sub {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.item-extra {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+  margin-left: 12px;
+}
+
+.item-id {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.item-time {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.item-price {
+  font-size: 14px;
+  font-weight: 600;
+  color: #f56c6c;
+}
+
+/* 订单详情弹窗样式 */
+.order-detail-dialog :deep(.el-descriptions__label) {
+  width: 100px;
+  font-weight: 500;
+  color: #606266;
+}
+
+.order-detail-dialog :deep(.el-descriptions__content) {
+  color: #2c3e50;
+}
+
+.detail-price {
+  color: #f56c6c;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.detail-renew-price {
+  color: #409eff;
+  font-weight: 500;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
 @media (max-width: 768px) {
   .dashboard-container {
     padding: 12px;
@@ -888,5 +1324,30 @@ watch(salesRange, (newVal) => {
   .todo-list {
     height: 320px;
   }
+  
+  .list-card {
+    height: auto;
+    min-height: 300px;
+  }
+  
+  .list-content {
+    min-height: 200px;
+    max-height: 1000px;
+  }
+  
+  .order-detail-dialog :deep(.el-dialog) {
+    width: 90% !important;
+    margin: 5vh auto !important;
+  }
+  
+  .order-detail-dialog :deep(.el-descriptions) {
+    --el-descriptions-item-bordered-label-background: #fafafa;
+  }
+  
+  .order-detail-dialog :deep(.el-descriptions__label),
+  .order-detail-dialog :deep(.el-descriptions__content) {
+    padding: 8px 12px;
+    font-size: 13px;
+  }
 }
 </style>