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

2026-01-23 12:33:26 +08:00
parent 084aeebf13
commit 7992ee9902
5 changed files with 1172 additions and 664 deletions
@@ -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> 
@@ -261,10 +261,10 @@
          <el-input v-model="editForm.UserName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="邮箱" prop="Email">
-          <el-input v-model="editForm.Email" placeholder="请输入邮箱" disabled />
+          <el-input v-model="editForm.Email" placeholder="请输入邮箱"  />
        </el-form-item>
        <el-form-item label="手机号" prop="Phone">
-          <el-input v-model="editForm.Phone" placeholder="请输入手机号" disabled />
+          <el-input v-model="editForm.Phone" placeholder="请输入手机号"  />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="editForm.Age" :min="0" :max="150" style="width: 100%" />
@@ -740,7 +740,7 @@ const handleEditUser = async () => {
  editForm.Email = userInfo.value.Email
  editForm.Phone = userInfo.value.Phone
  editForm.Age = userInfo.value.Age || ''
-  editForm.Sex = userInfo.value.Sex || ''
+  editForm.Sex = userInfo.value.Sex ? "男" : "女" || ''
  editForm.UserGroupId = userInfo.value.UserGroupId
  editForm.RecommendUserId = userInfo.value.RecommendUserId || ''
  editForm.CoverID = userInfo.value.CoverID || ''
@@ -799,8 +799,11 @@ const submitEditForm = async () => {
      age: editForm.Age,
      sex: editForm.Sex,
      recommend_id: editForm.RecommendUserId,
-      cover_id: editForm.CoverID
+      cover_id: editForm.CoverID,
+      email: editForm.Email,
+      phone: editForm.Phone
    }
+    console.log("提交编辑表单数据：",data)
    const res = await updateUserInfo(data)
    if (res.data.code === 200) {
      ElMessage.success('用户信息更新成功')
@@ -825,11 +828,19 @@ const handleAvatarManage = async () => {
  avatarForm.user_id = userInfo.value.UserId
  avatarForm.cover_id = userInfo.value.CoverID || ''
  
+  // 获取头像信息进行渲染
  if (userInfo.value.CoverID) {
-     const res = await getFileDetail({ file_id: userInfo.value.CoverID })
-     if (res.data.code === 200) {
-       avatarPreviewUrl.value = res.data.data.url
-     }
+    try {
+      const res = await getFileDetail({ file_id: userInfo.value.CoverID })
+      if (res.data.code === 200) {
+        avatarPreviewUrl.value = res.data.data.url
+      } else {
+        avatarPreviewUrl.value = ''
+      }
+    } catch (error) {
+      console.error('获取头像信息失败:', error)
+      avatarPreviewUrl.value = ''
+    }
  } else {
    avatarPreviewUrl.value = ''
  }
@@ -86,7 +86,9 @@
          <div v-for="row in userList" :key="row.UserId" class="user-card">
            <div class="card-header">
              <el-checkbox v-model="row.selected" @change="handleCardSelect(row)" />
-              <el-avatar :size="48" :src="row.avatarUrl || ''" class="card-avatar" />
+              <el-avatar :size="48" :src="row.avatarUrl" class="card-avatar">
+                <el-icon :size="24"><User /></el-icon>
+              </el-avatar>
              <div class="card-user-info">
                <div class="card-username">{{ row.UserName }}</div>
                <div class="card-email">{{ row.Email || '未设置邮箱' }}</div>
@@ -159,7 +161,9 @@
            </el-table-column>
            <el-table-column prop="CoverID" label="头像" width="100">
              <template #default="{ row }">
-                <el-avatar :size="40" :src="row.avatarUrl || ''" />
+                <el-avatar :size="40" :src="row.avatarUrl">
+                  <el-icon :size="20"><User /></el-icon>
+                </el-avatar>
              </template>
            </el-table-column>
            <el-table-column prop="Phone" label="手机号码" width="130">
@@ -251,31 +255,65 @@
        :rules="userRules"
        label-width="100px"
      >
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="userForm.username" placeholder="请输入用户名" />
-        </el-form-item>
-        <el-form-item label="密码" prop="password" v-if="dialogType === 'add'">
-          <el-input v-model="userForm.password" type="password" placeholder="请输入密码" show-password />
-        </el-form-item>
-        <el-form-item label="手机号" prop="Phone">
+        <!-- 新增用户表单 -->
+        <template v-if="dialogType === 'add'">
+          <el-form-item label="用户名" prop="username">
+            <el-input v-model="userForm.username" placeholder="请输入用户名" />
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="userForm.password" type="password" placeholder="请输入密码" show-password />
+          </el-form-item>
+          <el-form-item label="手机号" prop="Phone">
            <el-input v-model="userForm.Phone" placeholder="请输入手机号" />
          </el-form-item>
-        <!-- 编辑时显示其他字段 -->
-        <template v-if="dialogType === 'edit'">
-          <el-form-item label="邮箱" prop="Email">
-            <el-input v-model="userForm.Email" placeholder="请输入邮箱" />
+        </template>
+        <!-- 编辑用户表单 -->
+        <template v-else>
+          <el-form-item label="用户ID">
+            <el-input v-model="userForm.user_id" disabled />
          </el-form-item>
-          <el-form-item label="用户组" prop="UserGroupId">
-            <el-select v-model="userForm.UserGroupId" placeholder="请选择用户组" style="width: 100%">
-              <el-option label="默认用户组" :value="1" />
-              <el-option label="VIP用户组" :value="2" />
+          <el-form-item label="用户名" prop="user_name">
+            <el-input v-model="userForm.user_name" placeholder="请输入用户名" />
+          </el-form-item>
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="userForm.email" placeholder="请输入邮箱" />
+          </el-form-item>
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="userForm.phone" placeholder="请输入手机号" />
+          </el-form-item>
+          <el-form-item label="性别" prop="sex">
+            <el-select v-model="userForm.sex" placeholder="请选择性别" style="width: 100%">
+              <el-option label="男" value="男" />
+              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
-          <el-form-item label="实名姓名" prop="RealName.Name">
-            <el-input v-model="userForm.RealName.Name" placeholder="请输入实名姓名" />
+          <el-form-item label="年龄" prop="age">
+            <el-input-number v-model="userForm.age" :min="0" :max="150" placeholder="请输入年龄" style="width: 100%" />
          </el-form-item>
-          <el-form-item label="身份证号" prop="RealName.IdCard">
-            <el-input v-model="userForm.RealName.IdCard" placeholder="请输入身份证号" />
+          <el-form-item label="推介人" prop="recommend_id">
+            <div class="recommend-user-selector">
+              <el-input 
+                v-model="selectedRecommendUserName" 
+                placeholder="点击选择推介用户" 
+                readonly 
+                @click="showUserSelector = true"
+              >
+                <template #append>
+                  <el-button @click="showUserSelector = true">
+                    <el-icon><Search /></el-icon>
+                  </el-button>
+                </template>
+              </el-input>
+              <el-button 
+                v-if="userForm.recommend_id" 
+                type="danger" 
+                link 
+                @click="clearRecommendUser"
+                class="clear-btn"
+              >
+                清除
+              </el-button>
+            </div>
          </el-form-item>
        </template>
      </el-form>
@@ -287,6 +325,12 @@
      </template>
    </el-dialog>

+    <!-- 推介用户选择器 -->
+    <UserListSelector
+      v-model="showUserSelector"
+      :current-user-id="userForm.recommend_id"
+      @confirm="handleRecommendUserConfirm"
+    />

    <!-- 修改头像对话框 -->
    <el-dialog
@@ -362,15 +406,40 @@
    <el-dialog
      v-model="groupDialogVisible"
      title="修改用户组"
-      width="400px"
+      width="500px"
      append-to-body
    >
-      <el-form :model="groupForm" label-width="80px">
+      <el-form :model="groupForm" label-width="100px">
        <el-form-item label="用户ID">
          <el-input v-model="groupForm.user_id" disabled />
        </el-form-item>
-        <el-form-item label="用户组ID">
-          <el-input v-model="groupForm.user_group_id" placeholder="请输入用户组ID" />
+        <el-form-item label="当前用户组">
+          <el-input v-model="groupForm.current_group_name" disabled placeholder="未分配用户组" />
+        </el-form-item>
+        <el-form-item label="选择用户组">
+          <div class="group-selector-wrapper">
+            <el-input 
+              v-model="selectedGroupName" 
+              placeholder="点击选择用户组" 
+              readonly 
+              @click="showGroupSelector = true"
+            >
+              <template #append>
+                <el-button @click="showGroupSelector = true">
+                  <el-icon><Search /></el-icon>
+                </el-button>
+              </template>
+            </el-input>
+            <el-button 
+              v-if="groupForm.user_group_id" 
+              type="danger" 
+              link 
+              @click="clearSelectedGroup"
+              class="clear-btn"
+            >
+              清除
+            </el-button>
+          </div>
        </el-form-item>
      </el-form>
      <template #footer>
@@ -381,6 +450,13 @@
      </template>
    </el-dialog>

+    <!-- 用户组选择器 -->
+    <UserGroupSelector
+      v-model="showGroupSelector"
+      :current-group-id="groupForm.user_group_id"
+      @confirm="handleGroupSelectorConfirm"
+    />
+
    <!-- 实名信息对话框 -->
    <el-dialog
      v-model="realnameDialogVisible"
@@ -399,10 +475,18 @@
          <el-input v-model="realnameForm.id_card" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="实名类型">
-          <el-input-number v-model="realnameForm.type" :min="0" :max="2" />
+          <el-select v-model="realnameForm.type" placeholder="请选择实名类型" style="width: 100%">
+            <el-option label="个人认证" :value="0" />
+            <el-option label="企业认证" :value="1" />
+          </el-select>
        </el-form-item>
-        <el-form-item label="状态">
-          <el-input-number v-model="realnameForm.status" :min="0" :max="1" />
+        <el-form-item label="认证状态">
+          <el-select v-model="realnameForm.status" placeholder="请选择认证状态" style="width: 100%">
+            <el-option label="未认证" :value="0" />
+            <el-option label="已认证" :value="1" />
+            <el-option label="认证中" :value="2" />
+            <el-option label="认证失败" :value="3" />
+          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
@@ -417,14 +501,39 @@
    <el-dialog
      v-model="loginHistoryDialogVisible"
      title="用户登录记录"
-      width="800px"
+      width="900px"
      append-to-body
    >
-      <el-table :data="loginHistory" style="width: 100%">
-        <el-table-column prop="ip" label="IP地址" />
-        <el-table-column prop="user_agent" label="用户代理" />
-        <el-table-column prop="created_at" label="登录时间" />
+      <el-table :data="loginHistory" style="width: 100%" v-loading="loginHistoryLoading">
+        <el-table-column prop="Id" label="ID" width="80" />
+        <el-table-column prop="Host" label="IP地址" width="150" />
+        <el-table-column prop="Location" label="登录地点" width="120" />
+        <el-table-column prop="Type" label="登录方式" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.Type === 'password' ? 'primary' : 'success'" size="small">
+              {{ row.Type === 'password' ? '密码登录' : row.Type }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="Origin" label="来源" show-overflow-tooltip />
+        <el-table-column prop="CreatedAt" label="登录时间" width="180">
+          <template #default="{ row }">
+            {{ formatDate(row.CreatedAt) }}
+          </template>
+        </el-table-column>
      </el-table>
+      <div class="dialog-pagination">
+        <el-pagination
+          v-model:current-page="loginHistoryParams.page"
+          v-model:page-size="loginHistoryParams.count"
+          :page-sizes="[10, 20, 50]"
+          :total="loginHistoryTotal"
+          layout="total, sizes, prev, pager, next"
+          background
+          @size-change="handleLoginHistorySizeChange"
+          @current-change="handleLoginHistoryPageChange"
+        />
+      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="loginHistoryDialogVisible = false">关闭</el-button>
@@ -436,15 +545,36 @@
    <el-dialog
      v-model="operationHistoryDialogVisible"
      title="用户操作记录"
-      width="800px"
+      width="900px"
      append-to-body
    >
-      <el-table :data="operationHistory" style="width: 100%">
-        <el-table-column prop="action" label="操作" />
-        <el-table-column prop="description" label="描述" />
-        <el-table-column prop="ip" label="IP地址" />
-        <el-table-column prop="created_at" label="操作时间" />
+      <el-table :data="operationHistory" style="width: 100%" v-loading="operationHistoryLoading">
+        <el-table-column prop="Id" label="ID" width="80" />
+        <el-table-column prop="Type" label="操作类型" width="120">
+          <template #default="{ row }">
+            <el-tag type="info" size="small">{{ row.Type }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="Note" label="操作说明" show-overflow-tooltip />
+        <el-table-column prop="Route" label="接口路由" width="200" show-overflow-tooltip />
+        <el-table-column prop="CreatedAt" label="操作时间" width="180">
+          <template #default="{ row }">
+            {{ formatDate(row.CreatedAt) }}
+          </template>
+        </el-table-column>
      </el-table>
+      <div class="dialog-pagination">
+        <el-pagination
+          v-model:current-page="operationHistoryParams.page"
+          v-model:page-size="operationHistoryParams.count"
+          :page-sizes="[10, 20, 50]"
+          :total="operationHistoryTotal"
+          layout="total, sizes, prev, pager, next"
+          background
+          @size-change="handleOperationHistorySizeChange"
+          @current-change="handleOperationHistoryPageChange"
+        />
+      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="operationHistoryDialogVisible = false">关闭</el-button>
@@ -456,8 +586,43 @@
      :userId="currentEditUser.UserId"
      :current-cover-id="currentEditUser.CoverID"
      @confirm="handleAvatarConfirm"
-
    />
+
+    <!-- 模拟登录对话框 -->
+    <el-dialog v-model="tokenDialogVisible" title="模拟登录" width="450px" append-to-body>
+      <div class="token-container">
+        <el-form label-width="100px">
+          <el-form-item label="选择环境">
+            <el-select v-model="selectedEnvironment" placeholder="请选择登录环境" size="large" style="width: 100%">
+              <el-option label="正式环境" value="production">
+                <div class="env-option">
+                  <span>正式环境</span>
+                  <span class="env-url">www.007yjs.com</span>
+                </div>
+              </el-option>
+              <el-option label="测试环境" value="test">
+                <div class="env-option">
+                  <span>测试环境</span>
+                  <span class="env-url">apiserver.s1f.ren</span>
+                </div>
+              </el-option>
+              <el-option label="本地环境" value="local">
+                <div class="env-option">
+                  <span>本地环境</span>
+                  <span class="env-url">localhost:5173</span>
+                </div>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="tokenDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmJump" :disabled="!selectedEnvironment">确认跳转</el-button>
+        </div>
+      </template>
+    </el-dialog>
  </div>
 </template>

@@ -467,8 +632,11 @@ import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Delete, Search, ArrowDown, View, User, Edit, Refresh, Position, RefreshLeft } from '@element-plus/icons-vue'
 import AvatarSelector from '@/components/admin/AvatarSelector.vue'
+import UserListSelector from '@/components/admin/UserListSelector.vue'
+import UserGroupSelector from '@/components/admin/UserGroupSelector.vue'
 import { 
-  getUserList, 
+  getUserList,
+  getUserInfo,
  deleteUser, 
  createTask, 
  updateUserInfo, 
@@ -497,44 +665,61 @@ const queryParams = reactive({

 // 用户表单
 const userForm = reactive({
-  UserId: undefined,
+  // 新增用户字段
  username: '',
-  Email: '',
-  Phone: '',
  password: '',
-  UserGroupId: undefined,
-  RealName: {
-    Name: '',
-    IdCard: ''
-  }
+  Phone: '',
+  // 编辑用户字段
+  user_id: '',
+  user_name: '',
+  email: '',
+  phone: '',
+  sex: '',
+  age: 0,
+  cover_id: '',
+  recommend_id: ''
 })
+
+// 推介用户选择相关
+const showUserSelector = ref(false)
+const selectedRecommendUserName = ref('')
+
+// 推介用户选择确认
+const handleRecommendUserConfirm = (user) => {
+  if (user) {
+    userForm.recommend_id = String(user.user_id)
+    selectedRecommendUserName.value = `${user.user_name} (ID: ${user.user_id})`
+  }
+  showUserSelector.value = false
+}
+
+// 清除推介用户
+const clearRecommendUser = () => {
+  userForm.recommend_id = ''
+  selectedRecommendUserName.value = ''
+}
 const showAvatarSelector = ref(false)
 const currentEditUser = ref({})

 // 表单规则
 const userRules = computed(() => {
-  const baseRules = {
-    UserName: [
-      { required: true, message: '请输入用户名', trigger: 'blur' }
-    ]
-  }
-  
-  // 新建用户时添加密码验证
  if (dialogType.value === 'add') {
-    baseRules.Password = [
-      { required: true, message: '请输入密码', trigger: 'blur' },
-      { min: 6, message: '密码长度至少6位', trigger: 'blur' }
-    ]
+    return {
+      username: [
+        { required: true, message: '请输入用户名', trigger: 'blur' }
+      ],
+      password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        { min: 6, message: '密码长度至少6位', trigger: 'blur' }
+      ]
+    }
+  } else {
+    return {
+      user_name: [
+        { required: true, message: '请输入用户名', trigger: 'blur' }
+      ]
+    }
  }
-  
-  // 编辑用户时添加其他字段验证
-  if (dialogType.value === 'edit') {
-    baseRules.Email = [
-      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
-    ]
-  }
-  
-  return baseRules
 })

 // 状态数据
@@ -569,8 +754,28 @@ const passwordForm = reactive({
 const groupDialogVisible = ref(false)
 const groupForm = reactive({
  user_id: '',
-  user_group_id: ''
+  user_group_id: '',
+  current_group_name: ''
 })
+const showGroupSelector = ref(false)
+const selectedGroupName = ref('')
+
+// 用户组选择确认
+const handleGroupSelectorConfirm = (group) => {
+  if (group) {
+    const groupId = group.group_id || group.GroupId || group.id || group.Id
+    const groupName = group.group_name || group.name || group.Name
+    groupForm.user_group_id = groupId
+    selectedGroupName.value = `${groupName} (ID: ${groupId})`
+  }
+  showGroupSelector.value = false
+}
+
+// 清除选择的用户组
+const clearSelectedGroup = () => {
+  groupForm.user_group_id = ''
+  selectedGroupName.value = ''
+}

 // 实名信息管理相关
 const realnameDialogVisible = ref(false)
@@ -585,10 +790,35 @@ const realnameForm = reactive({
 // 登录记录相关
 const loginHistoryDialogVisible = ref(false)
 const loginHistory = ref([])
+const loginHistoryLoading = ref(false)
+const loginHistoryTotal = ref(0)
+const loginHistoryParams = reactive({
+  user_id: '',
+  page: 1,
+  count: 10
+})

 // 操作记录相关
 const operationHistoryDialogVisible = ref(false)
 const operationHistory = ref([])
+const operationHistoryLoading = ref(false)
+const operationHistoryTotal = ref(0)
+const operationHistoryParams = reactive({
+  user_id: '',
+  page: 1,
+  count: 10
+})
+
+// 模拟登录相关
+const tokenDialogVisible = ref(false)
+const loginToken = ref('')
+const loginExpire = ref('')
+const selectedEnvironment = ref('')
+const environments = {
+  production: 'https://www.007yjs.com',
+  test: 'https://apiserver.s1f.ren',
+  local: 'http://localhost:5173'
+}

 // 获取用户列表
 const fetchUserList = async () => {
@@ -670,34 +900,59 @@ const handleAdd = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
  Object.assign(userForm, {
+    // 新增用户字段
    username: '',
    password: '',
-    Email: '',
    Phone: '',
-    UserGroupId: undefined,
-    RealName: {
-      Name: '',
-      IdCard: ''
-    }
+    // 编辑用户字段
+    user_id: '',
+    user_name: '',
+    email: '',
+    phone: '',
+    sex: '',
+    age: 0,
+    cover_id: '',
+    recommend_id: ''
  })
+  selectedRecommendUserName.value = ''
  userFormRef.value?.resetFields()
 }

-// 编辑用户
-const handleEdit = (row) => {
-  dialogType.value = 'edit'
-  dialogVisible.value = true
-  Object.assign(userForm, {
-    UserId: row.UserId,
-    username: row.username,
-    Email: row.Email,
-    Phone: row.Phone,
-    UserGroupId: row.UserGroupId,
-    RealName: {
-      Name: row.RealName?.Name || '',
-      IdCard: row.RealName?.IdCard || ''
+// 编辑用户 - 通过getUserInfo获取用户详情
+const handleEdit = async (row) => {
+  const userId = row.user_id || row.UserId
+  try {
+    const res = await getUserInfo({ user_id: userId })
+    if (res.data.code === 200) {
+      const user = res.data.data
+      dialogType.value = 'edit'
+      dialogVisible.value = true
+      // 根据用户详情接口返回的数据映射字段
+      // Sex: true=男, false=女
+      const sexValue = user.Sex === true ? '男' : (user.Sex === false ? '女' : '')
+      Object.assign(userForm, {
+        user_id: String(user.UserId),
+        user_name: user.UserName || '',
+        email: user.Email || '',
+        phone: user.Phone || '',
+        sex: sexValue,
+        age: user.Age || 0,
+        cover_id: user.CoverID ? String(user.CoverID) : '',
+        recommend_id: user.RecommendUserId ? String(user.RecommendUserId) : ''
+      })
+      // 设置推介用户显示
+      if (user.RecommendUserId) {
+        selectedRecommendUserName.value = `推介人ID: ${user.RecommendUserId}`
+      } else {
+        selectedRecommendUserName.value = ''
+      }
+    } else {
+      ElMessage.error('获取用户信息失败')
    }
-  })
+  } catch (error) {
+    console.error('获取用户信息失败:', error)
+    ElMessage.error('获取用户信息失败')
+  }
 }

 // 删除用户
@@ -796,15 +1051,33 @@ const handleBalanceManage = (row) => {
 const handleSimulateLogin = async (row) => {
  try {
    const res = await mockUserLogin({ user_id: row.UserId })
-    if (res.code === 200) {
-      ElMessage.success('模拟登录成功')
-      // 可以跳转到用户视角页面
+    if (res.data?.code === 200) {
+      loginToken.value = res.data.data.token || ''
+      loginExpire.value = res.data.data.expire_time || ''
+      selectedEnvironment.value = ''
+      tokenDialogVisible.value = true
+    } else {
+      ElMessage.error(res.data?.message || '模拟登录失败')
    }
  } catch (error) {
    ElMessage.error('模拟登录失败')
  }
 }

+// 确认跳转
+const confirmJump = () => {
+  if (!selectedEnvironment.value) {
+    ElMessage.warning('请选择登录环境')
+    return
+  }
+  const baseUrl = environments[selectedEnvironment.value]
+  const url = `${baseUrl}/token-login?token=${loginToken.value}&expire=${loginExpire.value}`
+  window.open(url, '_blank')
+  const envName = selectedEnvironment.value === 'production' ? '正式' : selectedEnvironment.value === 'test' ? '测试' : '本地'
+  ElMessage.success(`正在跳转到${envName}环境`)
+  tokenDialogVisible.value = false
+}
+
 // 提交表单
 const submitForm = () => {
  userFormRef.value?.validate(async (valid) => {
@@ -816,14 +1089,24 @@ const submitForm = () => {
          const createData = {
            username: userForm.username,
            password: userForm.password,
-            phone:userForm.Phone
-
+            phone: userForm.Phone
          }
          res = await createTask(createData)
-        
        } else {
-          // 编辑用户传递完整信息
-          res = await updateUserInfo(userForm)
+          // 编辑用户 - 按照接口文档传递参数
+          // sex: 接口需要 "true" 表示男，"false" 表示女
+          const sexValue = userForm.sex === '男' ? 'true' : (userForm.sex === '女' ? 'false' : '')
+          const updateData = {
+            user_id: userForm.user_id,
+            user_name: userForm.user_name,
+            email: userForm.email || '',
+            phone: userForm.phone || '',
+            sex: sexValue,
+            age: String(userForm.age),
+            cover_id: userForm.cover_id || '',
+            recommend_id: userForm.recommend_id || ''
+          }
+          res = await updateUserInfo(updateData)
        }
        if (res.data.code === 200) {
          ElMessage.success(dialogType.value === 'add' ? '新增成功' : '修改成功')
@@ -857,21 +1140,9 @@ const handleAvatarModify = async (row) => {
  avatarForm.cover_id = row.CoverID || ''
  currentEditUser.value = row
  
-  // 获取当前头像URL
-  if (row.CoverID) {
-    try {
-      const res = await getFileDetail({ file_id: row.CoverID })
-      console.log("获取头像1234：", res)
-      if (res.data.code === 200) {
-        currentAvatarUrl.value = res.data.data.url
-      }
-    } catch (error) {
-      console.error('获取头像失败:', error)
-      currentAvatarUrl.value = ''
-    }
-  } else {
-    currentAvatarUrl.value = ''
-  }
+  // 直接使用 row.avatarUrl（来自 user.cover）渲染当前头像
+  // row.avatarUrl 已经在 fetchUserList 中从 user.cover 映射过来
+  currentAvatarUrl.value = row.avatarUrl || ''
  
  avatarDialogVisible.value = true
 }
@@ -883,64 +1154,161 @@ const handleAvatarConfirm = async (data) => {
  ElMessage.success('头像选择成功，请点击确定按钮保存')
 }

-// 修改密码
-const handlePasswordModify = (row) => {
-  passwordForm.user_id = row.UserId
-  passwordForm.password = ''
-  passwordDialogVisible.value = true
+// 修改密码 - 通过getUserInfo获取用户详情
+const handlePasswordModify = async (row) => {
+  const userId = row.user_id || row.UserId
+  try {
+    const res = await getUserInfo({ user_id: userId })
+    if (res.data.code === 200) {
+      const user = res.data.data
+      passwordForm.user_id = user.UserId
+      passwordForm.password = ''
+      passwordDialogVisible.value = true
+    } else {
+      ElMessage.error('获取用户信息失败')
+    }
+  } catch (error) {
+    console.error('获取用户信息失败:', error)
+    ElMessage.error('获取用户信息失败')
+  }
 }

-// 修改用户组
-const handleGroupModify = (row) => {
-  groupForm.user_id = row.UserId
-  groupForm.user_group_id = row.UserGroupId || ''
-  groupDialogVisible.value = true
+// 修改用户组 - 通过getUserInfo获取用户详情
+const handleGroupModify = async (row) => {
+  const userId = row.user_id || row.UserId
+  try {
+    const res = await getUserInfo({ user_id: userId })
+    if (res.data.code === 200) {
+      const user = res.data.data
+      groupForm.user_id = user.UserId
+      groupForm.user_group_id = user.UserGroupId || ''
+      groupForm.current_group_name = user.UserGroup?.Name || '未分配用户组'
+      // 设置当前选择的用户组显示
+      if (user.UserGroupId && user.UserGroup?.Name) {
+        selectedGroupName.value = `${user.UserGroup.Name} (ID: ${user.UserGroupId})`
+      } else {
+        selectedGroupName.value = ''
+      }
+      groupDialogVisible.value = true
+    } else {
+      ElMessage.error('获取用户信息失败')
+    }
+  } catch (error) {
+    console.error('获取用户信息失败:', error)
+    ElMessage.error('获取用户信息失败')
+  }
 }

-// 修改实名信息
-const handleRealnameModify = (row) => {
-  realnameForm.user_id = row.UserId
-  realnameForm.name = row.RealName?.Name || ''
-  realnameForm.id_card = row.RealName?.IdCard || ''
-  realnameForm.type = row.RealName?.Type || 0
-  realnameForm.status = row.RealName?.Status || 0
-  realnameDialogVisible.value = true
+// 修改实名信息 - 通过getUserInfo获取用户详情
+const handleRealnameModify = async (row) => {
+  const userId = row.user_id || row.UserId
+  try {
+    const res = await getUserInfo({ user_id: userId })
+    if (res.data.code === 200) {
+      const user = res.data.data
+      realnameForm.user_id = user.UserId
+      realnameForm.name = user.RealName?.Name || ''
+      realnameForm.id_card = user.RealName?.IdCard || ''
+      realnameForm.type = user.RealName?.Type || 0
+      realnameForm.status = user.RealName?.Status || 0
+      realnameDialogVisible.value = true
+    } else {
+      ElMessage.error('获取用户信息失败')
+    }
+  } catch (error) {
+    console.error('获取用户信息失败:', error)
+    ElMessage.error('获取用户信息失败')
+  }
 }

 // 获取登录记录
 const handleLoginHistory = async (row) => {
  try {
-    const res = await getUserLoginRecord({ 
-      user_id: row.UserId, 
-      page: 1, 
-      count: 20 
-    })
-    if (res.code === 200) {
-      loginHistory.value = res.data.data || []
-      loginHistoryDialogVisible.value = true
-    }
+    loginHistoryParams.user_id = row.UserId
+    loginHistoryParams.page = 1
+    loginHistoryDialogVisible.value = true
+    await fetchLoginHistory()
  } catch (error) {
    ElMessage.error('获取登录记录失败')
  }
 }

+// 获取登录记录数据
+const fetchLoginHistory = async () => {
+  loginHistoryLoading.value = true
+  try {
+    const res = await getUserLoginRecord({
+      user_id: loginHistoryParams.user_id,
+      page: loginHistoryParams.page,
+      count: loginHistoryParams.count
+    })
+    if (res.data?.code === 200) {
+      loginHistory.value = res.data.data?.data || []
+      loginHistoryTotal.value = res.data.data?.all_count || 0
+    }
+  } catch (error) {
+    console.error('获取登录记录失败:', error)
+  } finally {
+    loginHistoryLoading.value = false
+  }
+}
+
+// 登录记录分页处理
+const handleLoginHistorySizeChange = (size) => {
+  loginHistoryParams.count = size
+  loginHistoryParams.page = 1
+  fetchLoginHistory()
+}
+
+const handleLoginHistoryPageChange = (page) => {
+  loginHistoryParams.page = page
+  fetchLoginHistory()
+}
+
 // 获取操作记录
 const handleOperationHistory = async (row) => {
  try {
-    const res = await getUserOperationRecord({ 
-      user_id: row.UserId, 
-      page: 1, 
-      count: 20 
-    })
-    if (res.code === 200) {
-      operationHistory.value = res.data.data || []
-      operationHistoryDialogVisible.value = true
-    }
+    operationHistoryParams.user_id = row.UserId
+    operationHistoryParams.page = 1
+    operationHistoryDialogVisible.value = true
+    await fetchOperationHistory()
  } catch (error) {
    ElMessage.error('获取操作记录失败')
  }
 }

+// 获取操作记录数据
+const fetchOperationHistory = async () => {
+  operationHistoryLoading.value = true
+  try {
+    const res = await getUserOperationRecord({
+      user_id: operationHistoryParams.user_id,
+      page: operationHistoryParams.page,
+      count: operationHistoryParams.count
+    })
+    if (res.data?.code === 200) {
+      operationHistory.value = res.data.data?.data || []
+      operationHistoryTotal.value = res.data.data?.all_count || 0
+    }
+  } catch (error) {
+    console.error('获取操作记录失败:', error)
+  } finally {
+    operationHistoryLoading.value = false
+  }
+}
+
+// 操作记录分页处理
+const handleOperationHistorySizeChange = (size) => {
+  operationHistoryParams.count = size
+  operationHistoryParams.page = 1
+  fetchOperationHistory()
+}
+
+const handleOperationHistoryPageChange = (page) => {
+  operationHistoryParams.page = page
+  fetchOperationHistory()
+}
+

 // 提交头像修改
 const submitAvatarModify = async () => {
@@ -984,7 +1352,7 @@ const submitGroupModify = async () => {
      user_id: groupForm.user_id,
      user_group_id: groupForm.user_group_id
    })
-    if (res.code === 200) {
+    if (res.data.code === 200) {
      ElMessage.success('用户组修改成功')
      groupDialogVisible.value = false
      fetchUserList()
@@ -1499,6 +1867,23 @@ onMounted(() => {
  padding: 0;
 }

+.recommend-user-selector,
+.group-selector-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.recommend-user-selector .el-input,
+.group-selector-wrapper .el-input {
+  flex: 1;
+}
+
+.recommend-user-selector .clear-btn,
+.group-selector-wrapper .clear-btn {
+  flex-shrink: 0;
+}

 .action-buttons {
  display: flex;
@@ -1613,5 +1998,29 @@ onMounted(() => {
 :deep(.el-card__body) {
  padding: 0;
 }
+
+/* 弹窗分页样式 */
+.dialog-pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 模拟登录样式 */
+.token-container {
+  padding: 10px 0;
+}
+
+.env-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.env-url {
+  font-size: 12px;
+  color: #909399;
+}
 </style>

@@ -1,13 +1,108 @@
 ✅已完成、⚠️部分完成、❌未完成这样显示
 -----------------------------------------------------------------------------------------------需要解决

-1.http://localhost:5173/user/group将当前页面弹窗的高度进行限制为屏幕大小的80%并且进行分页数为很大的时候进行内部的滚动条进行查看
+
+
+以下是请求用户详情信息的接口响应数据：
+{
+    "code": 200,
+    "message": "Success",
+    "data": {
+        "UserId": 1680,
+        "UserName": "testuser111",
+        "Password": "$2a$10$iOH6CYfaOsVxvRsUotcDNeAyH19Fot3Bou7chuoB8tUqg6cTyxuKG",
+        "UserGroup": {
+            "Id": 1,
+            "HigherLevelId": 0,
+            "Name": "Lv1",
+            "Auth": "1",
+            "FloorPrice": 0,
+            "Fixed": false,
+            "UserGroupDiscount": null,
+            "IsDeleted": false,
+            "CreatedAt": "2024-11-05T05:15:33+08:00",
+            "UpdatedAt": "2024-11-05T05:15:35+08:00",
+            "omitempty": null
+        },
+        "UserGroupId": 1,
+        "AdminGroup": {
+            "id": 0,
+            "name": "",
+            "auth": "",
+            "note": "",
+            "CreatedAt": "0001-01-01T00:00:00Z",
+            "UpdatedAt": "0001-01-01T00:00:00Z",
+            "omitempty": null
+        },
+        "AdminGroupId": null,
+        "Cover": {
+            "id": 3,
+            "realName": "7EE71869106645BA1C2BA93D298C8C5B.png",
+            "saveName": "173073670020",
+            "savePath": "static/files/2024-11-04/173073670020",
+            "size": 72075,
+            "type": "work_order",
+            "content": "",
+            "userId": 20,
+            "openDow": false,
+            "CreatedAt": "2024-11-05T00:11:40.628+08:00",
+            "UpdatedAt": "2024-11-05T00:11:40.628+08:00",
+            "omitempty": null
+        },
+        "CoverID": 3,
+        "IsDeleted": false,
+        "Sex": true,
+        "Age": 15,
+        "Phone": "13888888888",
+        "Email": "q21234043@gmail.com",
+        "IdcAgent": {
+            "Id": 0,
+            "UserId": 0,
+            "AgentLevent": 0,
+            "AgentLevelName": "",
+            "Uid": "",
+            "IdcCreatedAt": 0,
+            "CreatedAt": "0001-01-01T00:00:00Z",
+            "UpdatedAt": "0001-01-01T00:00:00Z",
+            "omitempty": null
+        },
+        "RealName": {
+            "Id": 0,
+            "UserId": 0,
+            "Name": "",
+            "IdCard": "",
+            "Status": 0,
+            "Type": 0,
+            "CreatedAt": "0001-01-01T00:00:00Z",
+            "UpdatedAt": "0001-01-01T00:00:00Z",
+            "omitempty": null
+        },
+        "EnterpriseInfo": {
+            "Id": 0,
+            "UserId": 0,
+            "Name": "",
+            "BusinessNumber": "",
+            "CreatedAt": "0001-01-01T00:00:00Z",
+            "UpdatedAt": "0001-01-01T00:00:00Z",
+            "omitempty": null
+        },
+        "RecommendUserId": 1679,
+        "CreatedAt": "2025-12-31T16:48:31.85729+08:00",
+        "UpdatedAt": "2026-01-23T11:01:01.384933+08:00",
+        "omitempty": null
+    }
+}
+
+1.用户列表点击修改用户组弹出弹窗用户组id使用组件UserGroupSelector.vue文件进行选择，并且使用选择样式需要符合整体选择框样式

 ### TODO List
- [x] ✅ 用户组页面弹窗高度限制
-  - 弹窗最大高度限制为屏幕的80%
-  - 内容区域使用 el-scrollbar 实现内部滚动
-  - 用户组表单弹窗、成员列表弹窗均已添加滚动支持
+- [x] ✅ 导入UserGroupSelector组件
+- [x] ✅ 修改用户组弹窗使用选择器组件
+- [x] ✅ 显示当前用户组名称
+- [x] ✅ 点击选择用户组打开选择器弹窗
+- [x] ✅ 选择后显示用户组名称和ID
+- [x] ✅ 添加清除功能
+- [x] ✅ 样式与推介人选择器保持一致

 -----------------------------------------------------------------------------------------------需要解决

@@ -19,6 +114,8 @@
   - 列表展示使用formatDate函数
   - 时间选择器正确显示毫秒级时间戳
   - 提交时转换为秒级时间戳
+4.后续每次写的页面，组件都需要兼容移动端
+5.只要是关于选择用户，文件，优惠卷，代金卷的都使用组件



@@ -7,53 +7,9 @@
  },
  "tags": [],
  "paths": {
-    "/api/v1/admin/good/spec/list": {
-      "get": {
-        "summary": "获取商品参数列表",
-        "deprecated": false,
-        "description": "",
-        "tags": [],
-        "parameters": [
-          {
-            "name": "good_id",
-            "in": "query",
-            "description": "商品id",
-            "required": false,
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "Authorization",
-            "in": "header",
-            "description": "",
-            "example": "Bearer {{token}}",
-            "schema": {
-              "type": "string",
-              "default": "Bearer {{token}}"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {}
-                }
-              }
-            },
-            "headers": {}
-          }
-        },
-        "security": []
-      }
-    },
-    "/api/v1/admin/good/spec/create": {
+    "/api/v1/admin/user/user/update": {
      "post": {
-        "summary": "创建商品参数",
+        "summary": "更新用户信息",
        "deprecated": false,
        "description": "",
        "tags": [],
@@ -75,471 +31,45 @@
              "schema": {
                "type": "object",
                "properties": {
-                  "good_id": {
-                    "description": "商品id",
-                    "example": 0,
-                    "type": "integer"
-                  },
-                  "arg_name": {
-                    "description": "参数名称",
+                  "user_id": {
+                    "description": "用户ID",
                    "example": "",
                    "type": "string"
                  },
-                  "arg_type": {
-                    "description": "参数类型 string | number | select",
+                  "sex": {
+                    "description": "性别 true 男 false 女",
                    "example": "",
                    "type": "string"
                  },
-                  "arg_step": {
-                    "description": "参数值步进值（number 类型参数）",
-                    "example": 0,
-                    "type": "integer"
-                  },
-                  "arg_max": {
-                    "description": "参数值最大值（number 类型参数）",
-                    "example": 0,
-                    "type": "integer"
-                  },
-                  "arg_min": {
-                    "description": "参数值最小值（number 类型参数）",
-                    "example": 0,
-                    "type": "integer"
-                  }
-                }
-              }
-            }
-          }
-        },
-        "responses": {
-          "200": {
-            "description": "",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {}
-                }
-              }
-            },
-            "headers": {}
-          }
-        },
-        "security": []
-      }
-    },
-    "/api/v1/admin/good/spec/detail": {
-      "get": {
-        "summary": "获取商品参数详情",
-        "deprecated": false,
-        "description": "",
-        "tags": [],
-        "parameters": [
-          {
-            "name": "good_id",
-            "in": "query",
-            "description": "商品id",
-            "required": false,
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "arg_id",
-            "in": "query",
-            "description": "参数id",
-            "required": false,
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "Authorization",
-            "in": "header",
-            "description": "",
-            "example": "Bearer {{token}}",
-            "schema": {
-              "type": "string",
-              "default": "Bearer {{token}}"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {}
-                }
-              }
-            },
-            "headers": {}
-          }
-        },
-        "security": []
-      }
-    },
-    "/api/v1/admin/good/spec/update": {
-      "post": {
-        "summary": "更新商品参数",
-        "deprecated": false,
-        "description": "",
-        "tags": [],
-        "parameters": [
-          {
-            "name": "good_id",
-            "in": "query",
-            "description": "商品id",
-            "required": false,
-            "example": "",
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "arg_id",
-            "in": "query",
-            "description": "参数id",
-            "required": false,
-            "example": "",
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "arg_name",
-            "in": "query",
-            "description": "参数名称",
-            "required": false,
-            "example": "",
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "arg_type",
-            "in": "query",
-            "description": "参数类型 string | number | select",
-            "required": false,
-            "example": "",
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "arg_step",
-            "in": "query",
-            "description": "参数值步进值（number 类型参数）",
-            "required": false,
-            "example": 0,
-            "schema": {
-              "type": "integer"
-            }
-          },
-          {
-            "name": "arg_max",
-            "in": "query",
-            "description": "参数值最大值（number 类型参数）",
-            "required": false,
-            "example": 0,
-            "schema": {
-              "type": "integer"
-            }
-          },
-          {
-            "name": "arg_min",
-            "in": "query",
-            "description": "参数值最小值（number 类型参数）",
-            "required": false,
-            "example": 0,
-            "schema": {
-              "type": "integer"
-            }
-          },
-          {
-            "name": "Authorization",
-            "in": "header",
-            "description": "",
-            "example": "Bearer {{token}}",
-            "schema": {
-              "type": "string",
-              "default": "Bearer {{token}}"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {}
-                }
-              }
-            },
-            "headers": {}
-          }
-        },
-        "security": []
-      }
-    },
-    "/api/v1/admin/good/spec/delete": {
-      "delete": {
-        "summary": "删除商品参数",
-        "deprecated": false,
-        "description": "",
-        "tags": [],
-        "parameters": [
-          {
-            "name": "good_id",
-            "in": "query",
-            "description": "商品id",
-            "required": false,
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "arg_id",
-            "in": "query",
-            "description": "参数id",
-            "required": false,
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "Authorization",
-            "in": "header",
-            "description": "",
-            "example": "Bearer {{token}}",
-            "schema": {
-              "type": "string",
-              "default": "Bearer {{token}}"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {}
-                }
-              }
-            },
-            "headers": {}
-          }
-        },
-        "security": []
-      }
-    },
-    "/api/v1/admin/good/spec/add_value": {
-      "post": {
-        "summary": "增加商品参数值",
-        "deprecated": false,
-        "description": "",
-        "tags": [],
-        "parameters": [
-          {
-            "name": "Authorization",
-            "in": "header",
-            "description": "",
-            "example": "Bearer {{token}}",
-            "schema": {
-              "type": "string",
-              "default": "Bearer {{token}}"
-            }
-          }
-        ],
-        "requestBody": {
-          "content": {
-            "multipart/form-data": {
-              "schema": {
-                "type": "object",
-                "properties": {
-                  "good_id": {
-                    "description": "商品id",
-                    "example": 0,
-                    "type": "integer"
-                  },
-                  "arg_id": {
-                    "description": "参数id",
-                    "example": 0,
-                    "type": "integer"
-                  },
-                  "attr_name": {
-                    "description": "值名称",
+                  "age": {
+                    "description": "年龄",
                    "example": "",
                    "type": "string"
                  },
-                  "attr_value": {
-                    "description": "参数值 (select 类型使用)",
+                  "cover_id": {
+                    "description": "头像id",
                    "example": "",
                    "type": "string"
                  },
-                  "index": {
-                    "description": "商品参数排序索引",
-                    "example": 0,
-                    "type": "integer"
-                  },
-                  "attr_range": {
-                    "description": "参数值范围 (number类型使用)",
-                    "example": 0,
-                    "type": "integer"
-                  },
-                  "range_type": {
-                    "description": "参数值范围类型 after \\ before \\ equal (number类型使用)",
+                  "user_name": {
+                    "description": "用户名",
                    "example": "",
                    "type": "string"
                  },
-                  "attr_price": {
-                    "description": "价格",
-                    "example": 0,
-                    "type": "integer"
-                  }
-                }
-              }
-            }
-          }
-        },
-        "responses": {
-          "200": {
-            "description": "",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {}
-                }
-              }
-            },
-            "headers": {}
-          }
-        },
-        "security": []
-      }
-    },
-    "/api/v1/admin/good/spec/delete_value": {
-      "delete": {
-        "summary": "删除商品参数值",
-        "deprecated": false,
-        "description": "",
-        "tags": [],
-        "parameters": [
-          {
-            "name": "good_id",
-            "in": "query",
-            "description": "商品id",
-            "required": false,
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "attr_id",
-            "in": "query",
-            "description": "参数值id",
-            "required": false,
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "Authorization",
-            "in": "header",
-            "description": "",
-            "example": "Bearer {{token}}",
-            "schema": {
-              "type": "string",
-              "default": "Bearer {{token}}"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {}
-                }
-              }
-            },
-            "headers": {}
-          }
-        },
-        "security": []
-      }
-    },
-    "/api/v1/admin/good/spec/update_value": {
-      "post": {
-        "summary": "更新商品参数值",
-        "deprecated": false,
-        "description": "",
-        "tags": [],
-        "parameters": [
-          {
-            "name": "Authorization",
-            "in": "header",
-            "description": "",
-            "example": "Bearer {{token}}",
-            "schema": {
-              "type": "string",
-              "default": "Bearer {{token}}"
-            }
-          }
-        ],
-        "requestBody": {
-          "content": {
-            "multipart/form-data": {
-              "schema": {
-                "type": "object",
-                "properties": {
-                  "good_id": {
-                    "description": "商品id",
-                    "example": 0,
-                    "type": "integer"
-                  },
-                  "attr_id": {
-                    "description": "参数值id",
+                  "recommend_id": {
+                    "description": "推介用户id",
                    "example": "",
                    "type": "string"
                  },
-                  "attr_name": {
-                    "description": "值名称",
+                  "phone": {
+                    "description": "手机号码",
                    "example": "",
                    "type": "string"
                  },
-                  "attr_value": {
-                    "description": "参数值 (select 类型使用)",
+                  "email": {
+                    "description": "邮箱",
                    "example": "",
                    "type": "string"
-                  },
-                  "attr_range": {
-                    "description": "参数值范围 (number类型使用)",
-                    "example": 0,
-                    "type": "integer"
-                  },
-                  "index": {
-                    "description": "商品参数排序索引",
-                    "example": 0,
-                    "type": "integer"
-                  },
-                  "range_type": {
-                    "description": "参数值范围类型 after \\ before \\ equal (number类型使用)",
-                    "example": "",
-                    "type": "string"
-                  },
-                  "attr_price": {
-                    "description": "价格",
-                    "example": 0,
-                    "type": "integer"
                  }
                }
              }