diff --git a/src/api/login.js b/src/api/login.js
index dccf8fd..7c7b654 100644
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -7,4 +7,14 @@ export const userLogin = (username,password) => {
 
 export const getUserInfo = () => {
     return request.get("/api/v1/users/info/info")
+}
+
+// 获取交换token（用于无感刷新）
+export const getRefreshToken = (domain) => {
+    return request.get("/api/v1/users/info/refresh_token", { domain })
+}
+
+// 使用交换token获取新的access token
+export const refreshAccessToken = (refresh_token) => {
+    return request.post("/api/v1/user/refresh_token", { refresh_token })
 }
\ No newline at end of file
diff --git a/src/components/layout/AdminLayout.vue b/src/components/layout/AdminLayout.vue
index b2d2ec9..7eeec0b 100644
--- a/src/components/layout/AdminLayout.vue
+++ b/src/components/layout/AdminLayout.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="admin-layout">
+  <div class="admin-layout" :class="{ 'sidebar-collapsed': isCollapsed, 'mobile-open': isMobileMenuOpen }">
+    <!-- 移动端遮罩层 -->
+    <div class="mobile-overlay" v-if="isMobileMenuOpen" @click="closeMobileMenu"></div>
+    
     <!-- 侧边栏 -->
-    <div class="sidebar">
+    <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
       <div class="logo-container">
-        <img src="@/assets/logo.png" alt="Logo" class="logo-img" />
+        <img src="@/assets/logo.png" alt="Logo" class="logo-img" v-show="!isCollapsed" />
+        <img src="@/assets/logo.svg" alt="Logo" class="logo-img-mini" v-show="isCollapsed" />
       </div>
       <el-scrollbar class="sidebar-scrollbar">
         <el-menu
@@ -13,11 +17,20 @@
           text-color="#34495e"
           active-text-color="#2c3e50"
           :unique-opened="true"
+          :collapse="isCollapsed"
+          :collapse-transition="false"
           router
         >
           <sidebar-menu-item v-for="menu in menus" :key="menu.path" :menu="menu" />
         </el-menu>
       </el-scrollbar>
+      <!-- 收缩按钮 -->
+      <div class="collapse-btn" @click="toggleCollapse">
+        <el-icon :size="18">
+          <Fold v-if="!isCollapsed" />
+          <Expand v-else />
+        </el-icon>
+      </div>
     </div>
 
     <!-- 主区域 -->
@@ -25,10 +38,14 @@
       <!-- 顶部导航 -->
       <div class="navbar">
         <div class="navbar-left">
+          <!-- 移动端菜单按钮 -->
+          <el-button type="text" class="mobile-menu-btn" @click="toggleMobileMenu">
+            <el-icon :size="22"><Menu /></el-icon>
+          </el-button>
           <breadcrumb />
         </div>
         <div class="navbar-right">
-          <div class="navbar-item">
+          <div class="navbar-item hidden-mobile">
             <el-tooltip content="全屏" placement="bottom">
               <el-button type="text" class="header-btn" @click="toggleFullScreen">
                 <el-icon :size="18"><full-screen /></el-icon>
@@ -39,9 +56,9 @@
           <div class="navbar-item">
             <el-dropdown trigger="click">
               <div class="avatar-container">
-                <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
-                <span class="username">{{ userStore.userInfo.user_name }}</span>
-                <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                <el-avatar :size="32" :src="userStore.getUserAvatar() || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
+                <span class="username hidden-mobile">{{ userStore.userInfo.user_name }}</span>
+                <el-icon class="el-icon--right hidden-mobile"><arrow-down /></el-icon>
               </div>
               <template #dropdown>
                 <el-dropdown-menu>
@@ -81,7 +98,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import SidebarMenuItem from './SidebarMenuItem.vue'
 import Breadcrumb from './Breadcrumb.vue'
@@ -92,7 +109,10 @@ import {
   ArrowDown,
   User,
   Key,
-  SwitchButton
+  SwitchButton,
+  Fold,
+  Expand,
+  Menu
 } from '@element-plus/icons-vue'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import { ElMessageBox } from 'element-plus'
@@ -105,11 +125,46 @@ const router = useRouter()
 // 侧边栏菜单数据
 const menus = ref(menuConfig)
 
+// 侧边栏收缩状态
+const isCollapsed = ref(false)
+
+// 移动端菜单状态
+const isMobileMenuOpen = ref(false)
+
+// 检测是否是移动端
+const isMobile = ref(false)
+
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+  // 移动端默认收起侧边栏
+  if (isMobile.value) {
+    isCollapsed.value = false
+    isMobileMenuOpen.value = false
+  }
+}
+
 // 获取当前激活的菜单项
 const activeMenu = computed(() => {
   return route.path
 })
 
+// 切换侧边栏收缩
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+  // 保存状态到localStorage
+  localStorage.setItem('sidebarCollapsed', isCollapsed.value)
+}
+
+// 切换移动端菜单
+const toggleMobileMenu = () => {
+  isMobileMenuOpen.value = !isMobileMenuOpen.value
+}
+
+// 关闭移动端菜单
+const closeMobileMenu = () => {
+  isMobileMenuOpen.value = false
+}
+
 // 切换全屏
 const toggleFullScreen = () => {
   if (!document.fullscreenElement) {
@@ -129,9 +184,35 @@ const handleLogout = () => {
     type: 'warning'
   }).then(() => {
     localStorage.removeItem('token')
+    localStorage.removeItem('tokenExpire')
+    localStorage.removeItem('userInfo')
+    userStore.clearUserInfo()
     router.push('/login')
   }).catch(() => {})
 }
+
+// 监听路由变化，移动端自动关闭菜单
+router.afterEach(() => {
+  if (isMobile.value) {
+    closeMobileMenu()
+  }
+})
+
+onMounted(() => {
+  // 恢复侧边栏状态
+  const savedState = localStorage.getItem('sidebarCollapsed')
+  if (savedState !== null) {
+    isCollapsed.value = savedState === 'true'
+  }
+  
+  // 检测设备类型
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+})
 </script>
 
 <style scoped>
@@ -141,6 +222,18 @@ const handleLogout = () => {
   width: 100%;
 }
 
+/* 移动端遮罩层 */
+.mobile-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 998;
+}
+
 /* 侧边栏样式 */
 .sidebar {
   width: 260px;
@@ -148,7 +241,15 @@ const handleLogout = () => {
   background-color: #ffffff;
   border-right: 1px solid #e1e8ed;
   overflow: hidden;
-  z-index: 20;
+  z-index: 999;
+  transition: width 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.sidebar.collapsed {
+  width: 64px;
 }
 
 .logo-container {
@@ -159,6 +260,7 @@ const handleLogout = () => {
   padding: 0 20px;
   background-color: #ffffff;
   border-bottom: 1px solid #e1e8ed;
+  flex-shrink: 0;
 }
 
 .logo-img {
@@ -167,8 +269,15 @@ const handleLogout = () => {
   object-fit: contain;
 }
 
+.logo-img-mini {
+  height: 32px;
+  width: 32px;
+  object-fit: contain;
+}
+
 .sidebar-scrollbar {
-  height: calc(100vh - 70px);
+  flex: 1;
+  overflow: hidden;
 }
 
 .sidebar-menu {
@@ -178,6 +287,32 @@ const handleLogout = () => {
   padding: 0;
 }
 
+/* 收缩按钮 */
+.collapse-btn {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid #e1e8ed;
+  cursor: pointer;
+  color: #7f8c8d;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.collapse-btn:hover {
+  color: #2c3e50;
+  background-color: #f8f9fa;
+}
+
+/* 移动端菜单按钮 */
+.mobile-menu-btn {
+  display: none;
+  margin-right: 12px;
+  padding: 8px;
+  color: #34495e;
+}
+
 /* 主容器样式 */
 .main-container {
   flex: 1;
@@ -185,6 +320,7 @@ const handleLogout = () => {
   flex-direction: column;
   background-color: #f0f2f5;
   overflow: hidden;
+  min-width: 0;
 }
 
 /* 顶部导航栏样式 */
@@ -197,18 +333,21 @@ const handleLogout = () => {
   align-items: center;
   justify-content: space-between;
   z-index: 10;
+  flex-shrink: 0;
 }
 
 .navbar-left {
   display: flex;
   align-items: center;
   flex: 1;
+  min-width: 0;
 }
 
 .navbar-right {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
 }
 
 .navbar-item {
@@ -286,6 +425,63 @@ const handleLogout = () => {
   opacity: 0;
 }
 
+/* 移动端隐藏元素 */
+.hidden-mobile {
+  display: flex;
+}
+
+/* 移动端响应式 */
+@media (max-width: 768px) {
+  .mobile-overlay {
+    display: block;
+  }
+  
+  .sidebar {
+    position: fixed;
+    left: -260px;
+    top: 0;
+    bottom: 0;
+    transition: left 0.3s ease;
+  }
+  
+  .sidebar.collapsed {
+    width: 260px;
+    left: -260px;
+  }
+  
+  .admin-layout.mobile-open .sidebar {
+    left: 0;
+  }
+  
+  .admin-layout.mobile-open .sidebar.collapsed {
+    left: 0;
+  }
+  
+  .collapse-btn {
+    display: none;
+  }
+  
+  .mobile-menu-btn {
+    display: flex;
+  }
+  
+  .hidden-mobile {
+    display: none !important;
+  }
+  
+  .navbar {
+    padding: 0 12px;
+  }
+  
+  .content-container {
+    padding: 12px;
+  }
+  
+  .main-container {
+    width: 100%;
+  }
+}
+
 :deep(.el-dropdown-menu) {
   border-radius: 0;
   border: 1px solid #e1e8ed;
diff --git a/src/config/menus.js b/src/config/menus.js
index c56db70..f69141c 100644
--- a/src/config/menus.js
+++ b/src/config/menus.js
@@ -85,12 +85,10 @@ export const menus = [
       {
         path: '/activity/signin',
         title: '签到活动'
-      },{
-        path:'/activity/groupbuy',
-        title:'拼团活动',
-      },{
-        path:'/activity/groupbuy-type',
-        title:'拼团类型'
+      },
+      {
+        path: '/activity/groupbuy',
+        title: '拼团管理'
       }
     ]
   },
@@ -166,11 +164,7 @@ export const menus = [
         title: '域名白名单'
       },
       {
-        path: '/system/setting-group',
-        title: '配置组管理'
-      },
-      {
-        path: '/system/setting-list',
+        path: '/system/setting-manage',
         title: '配置管理'
       }
     ]
diff --git a/src/router/index.js b/src/router/index.js
index aa8142f..162ff31 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -332,18 +332,10 @@ const routes = [
           },
           {
             path: '/activity/groupbuy',
-            name: 'GroupBuyActivity',
-            component: () => import('../views/activity/GroupBuyActivity.vue'),
+            name: 'GroupBuyManage',
+            component: () => import('../views/activity/GroupBuyManage.vue'),
             meta: {
-              title: '拼团活动'
-            }
-          },
-          {
-            path: '/activity/groupbuy-type',
-            name: 'GroupBuyType',
-            component: () => import('../views/activity/GroupBuyType.vue'),
-            meta: {
-              title: '拼团类型'
+              title: '拼团管理'
             }
           }
         ]
@@ -390,15 +382,9 @@ const routes = [
             meta: { title: '域名白名单' }
           },
           {
-            path: 'setting-group',
-            name: 'SettingGroup',
-            component: () => import('../views/system/SettingGroup.vue'),
-            meta: { title: '配置组管理' }
-          },
-          {
-            path: 'setting-list',
-            name: 'SettingList',
-            component: () => import('../views/system/Setting.vue'),
+            path: 'setting-manage',
+            name: 'SettingManage',
+            component: () => import('../views/system/SettingManage.vue'),
             meta: { title: '配置管理' }
           }
         ]
diff --git a/src/store/userStore.js b/src/store/userStore.js
index 87f521f..764b9a9 100644
--- a/src/store/userStore.js
+++ b/src/store/userStore.js
@@ -4,11 +4,28 @@ import {ref} from "vue";
 
 export const useUserStore = defineStore('userStore',() => {
 
-    let userInfo = ref({})
+    // 初始化时从localStorage读取用户信息
+    const savedUserInfo = localStorage.getItem('userInfo')
+    let userInfo = ref(savedUserInfo ? JSON.parse(savedUserInfo) : {})
 
     function setUserInfo(u){
         userInfo.value = u
+        // 同步保存到localStorage
+        if (u && Object.keys(u).length > 0) {
+            localStorage.setItem('userInfo', JSON.stringify(u))
+        }
     }
 
-    return {userInfo,setUserInfo}
+    // 清除用户信息
+    function clearUserInfo() {
+        userInfo.value = {}
+        localStorage.removeItem('userInfo')
+    }
+
+    // 获取用户头像
+    function getUserAvatar() {
+        return userInfo.value?.cover || ''
+    }
+
+    return {userInfo, setUserInfo, clearUserInfo, getUserAvatar}
 })
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
index 249a052..7a39598 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { ElMessage } from 'element-plus'
 import router from '@/router'
+import {getRefreshToken,refreshAccessToken} from "@/api/login.js";
 
 // 基础URL
 const baseUrl = 'https://apiservertest.s1f.ren'  // SSL证书有问题
@@ -10,18 +11,100 @@ const baseUrl = 'https://apiservertest.s1f.ren'  // SSL证书有问题
 // 检查URL是否需要认证
 const urlNeedAuth = (url) => {
   // 这里可以添加不需要认证的URL列表
-  const noAuthUrls = ['/v1/user/login', '/v1/user/check/get_code_img', '/v1/user/register']
+  const noAuthUrls = ['/v1/user/login', '/v1/user/check/get_code_img', '/v1/user/register', '/v1/user/refresh_token']
   return !noAuthUrls.some(noAuthUrl => url.includes(noAuthUrl))
 }
 
 // 检查token是否过期
 const isTokenExpired = () => {
   const token = localStorage.getItem('token')
+  const expire = localStorage.getItem('tokenExpire')
   if (!token) return true
   
-  // 这里可以添加token过期检查逻辑，如果有JWT可以解析它
-  // 简单实现，仅检查token是否存在
-  return false
+  // 检查过期时间
+  if (expire) {
+    const expireTime = parseInt(expire) * 1000 // 转换为毫秒
+    const now = Date.now()
+    return now >= expireTime
+  }
+  
+  // 没有过期时间时，默认认为Token已过期（因为无法验证有效性）
+  return true
+}
+
+// 检查token是否即将过期（5分钟内）
+const isTokenExpiringSoon = () => {
+  const expire = localStorage.getItem('tokenExpire')
+  if (!expire) return false
+  
+  const expireTime = parseInt(expire) * 1000 // 转换为毫秒
+  const now = Date.now()
+  const fiveMinutes = 5 * 60 * 1000 // 5分钟
+  
+  // 如果已过期，返回false（由isTokenExpired处理）
+  if (now >= expireTime) return false
+  
+  // 如果在5分钟内过期，返回true
+  return (expireTime - now) <= fiveMinutes
+}
+
+// 正在刷新token的标志
+let isRefreshing = false
+// 等待刷新token的请求队列
+let refreshSubscribers = []
+
+// 添加请求到队列
+const subscribeTokenRefresh = (callback) => {
+  refreshSubscribers.push(callback)
+}
+
+// 刷新token后执行队列中的请求
+const onTokenRefreshed = (newToken) => {
+  refreshSubscribers.forEach(callback => callback(newToken))
+  refreshSubscribers = []
+}
+
+// 执行token刷新
+const doRefreshToken = async () => {
+  try {
+    const domain = window.location.hostname
+    // 获取交换token
+    const refreshTokenRes = await getRefreshToken(domain,{
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('token')}`
+      }
+    })
+    
+    if (refreshTokenRes.data?.code === 200 && refreshTokenRes.data?.data?.refresh_token) {
+      // 使用交换token获取新的access token
+      const newTokenRes = await refreshAccessToken(refreshTokenRes.data.data.refresh_token)
+      
+      if (newTokenRes.data?.code === 200 && newTokenRes.data?.data?.token) {
+        const { token, expire } = newTokenRes.data.data
+        localStorage.setItem('token', token)
+        if (expire) {
+          localStorage.setItem('tokenExpire', expire.toString())
+        }
+        return token
+      }
+    }
+    // 刷新失败，触发登出逻辑
+    localStorage.removeItem('token')
+    localStorage.removeItem('tokenExpire')
+    localStorage.removeItem('userInfo')
+    ElMessage.warning('登录过期，请重新登录')
+    router.push('/login')
+    return null
+  } catch (error) {
+    console.error('Token刷新失败:', error)
+    // 刷新失败，触发登出逻辑
+    localStorage.removeItem('token')
+    localStorage.removeItem('tokenExpire')
+    localStorage.removeItem('userInfo')
+    ElMessage.warning('登录过期，请重新登录')
+    router.push('/login')
+    return null
+  }
 }
 
 class Request {
@@ -122,19 +205,63 @@ export const http2 = axios.create({
     headers: {},
 });
 
-http2.interceptors.request.use(config => {
-    const token = localStorage.getItem('token'); // 假设 token 存储在 localStorage
-    if(urlNeedAuth(config.url) && isTokenExpired()){
-        if (token){
-            localStorage.removeItem('token');
-            ElMessage.warning('登陆过期，请重新登陆')
+http2.interceptors.request.use(async config => {
+    const token = localStorage.getItem('token')
+    
+    // 检查是否需要认证
+    if (urlNeedAuth(config.url)) {
+        // 检查token是否已过期
+        if (isTokenExpired()) {
+            if (token) {
+                localStorage.removeItem('token')
+                localStorage.removeItem('tokenExpire')
+                localStorage.removeItem('userInfo')
+                ElMessage.warning('登录过期，请重新登录')
+            }
+            router.push('/login')
+            return Promise.reject(new Error('Token已过期'))
+        }
+        
+        // 检查token是否即将过期，进行无感刷新
+        if (isTokenExpiringSoon() && !isRefreshing) {
+            isRefreshing = true
+            try {
+                const newToken = await doRefreshToken()
+                if (newToken) {
+                    console.log('Token已无感刷新')
+                    onTokenRefreshed(newToken)
+                    config.headers.Authorization = `Bearer ${newToken}`
+                } else {
+                    // 刷新失败，doRefreshToken已处理登出逻辑，直接拒绝请求
+                    return Promise.reject(new Error('Token刷新失败'))
+                }
+            } catch (error) {
+                console.error('Token刷新异常:', error)
+                // 刷新异常，doRefreshToken已处理登出逻辑，直接拒绝请求
+                return Promise.reject(error)
+            } finally {
+                isRefreshing = false
+            }
+        } else if (isRefreshing) {
+            // 正在刷新，等待刷新完成
+            return new Promise((resolve, reject) => {
+                subscribeTokenRefresh((newToken) => {
+                    if (newToken) {
+                        config.headers.Authorization = `Bearer ${newToken}`
+                        // 重新发送原始请求
+                        resolve(config)
+                    } else {
+                        reject(new Error('Token刷新失败'))
+                    }
+                })
+            })
+        } else {
+            // 正常情况，直接使用token
+            config.headers.Authorization = `Bearer ${token}`
         }
-        router.push('/login')
-        return Promise.reject();
     }
-    config.headers.Authorization = `Bearer ${token}`;
-
-    config.url = config.url
+    // 不需要认证的请求，不添加token
+    
     return config
 })
 
diff --git a/src/utils/tool.js b/src/utils/tool.js
index c54e2dd..1596c86 100644
--- a/src/utils/tool.js
+++ b/src/utils/tool.js
@@ -18,7 +18,7 @@ export const formatDate = (dateStr) => {
   return `${year}-${month}-${day} ${hours}:${minutes}`
 }
 /**
- * 时间格式转 Unix 时间戳（毫秒级）
+ * 时间格式转 Unix 时间戳（秒级）
  * @param {string|Date} time - 输入时间（支持 '2025-10-28 00:00:00'、'2025/10/28'、Date 对象等）
  * @returns {number|null} 转换后的毫秒级时间戳（失败返回 null）
  */
@@ -50,10 +50,62 @@ export function timeToTimestamp(time) {
       return null;
     }
   
-    return Math.floor(timestamp / 1000); // 返回毫秒级时间戳（如 1751107200000）
+    return Math.floor(timestamp / 1000); // 返回秒级时间戳（如 1751107200000）
   }
 
 
   export function reducenum(num){
     return num / 100
-  }
\ No newline at end of file
+  }
+
+/**
+ * 将 ISO 格式时间字符串转换为毫秒级时间戳（用于时间选择器）
+ * @param {string|Date|number} time - 输入时间（支持 ISO 格式字符串如 '2023-11-08T01:10:00+08:00'、Date 对象、时间戳等）
+ * @returns {number|null} 转换后的毫秒级时间戳（失败或无效时间返回 null）
+ */
+export function isoToMilliseconds(time) {
+  // 处理空值
+  if (!time || time === null || time === undefined) {
+    return null
+  }
+
+  // 处理特殊的无效时间标识
+  if (typeof time === 'string' && (time === '0001-01-01T00:00:00Z' || time === '0001-01-01T00:00:00+00:00')) {
+    return null
+  }
+
+  // 如果已经是数字（时间戳），直接返回
+  if (typeof time === 'number') {
+    // 如果是秒级时间戳（小于 13 位），转换为毫秒
+    if (time < 1000000000000) {
+      return time * 1000
+    }
+    return time
+  }
+
+  // 处理 Date 对象
+  if (time instanceof Date) {
+    const timestamp = time.getTime()
+    return isNaN(timestamp) ? null : timestamp
+  }
+
+  // 处理字符串格式
+  if (typeof time === 'string') {
+    try {
+      const date = new Date(time)
+      const timestamp = date.getTime()
+      
+      // 检查是否为有效时间
+      if (isNaN(timestamp)) {
+        return null
+      }
+      
+      return timestamp
+    } catch (error) {
+      console.error('时间转换失败:', error)
+      return null
+    }
+  }
+
+  return null
+}
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 88bf59b..045b908 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -105,16 +105,24 @@ const forgetPassword = () => {
 const handleLogin = () => {
   loginFormRef.value?.validate(async valid =>{
     window.localStorage.removeItem('token')
+    window.localStorage.removeItem('tokenExpire')
+    window.localStorage.removeItem('userInfo')
     if (valid) {
       loading.value = true
       let resp = await userLogin(loginForm.username, loginForm.password)
       console.log("login:",resp)
       loading.value = false
       if(resp.code === 200){
-
-        window.localStorage.setItem('token',resp.data.token)
+        // 保存token和过期时间
+        window.localStorage.setItem('token', resp.data.token)
+        if (resp.data.expire) {
+          window.localStorage.setItem('tokenExpire', resp.data.expire.toString())
+        }
+        
         let userInfo = await getUserInfo()
         if(userInfo.data.is_admin){
+          // 保存用户信息到localStorage
+          window.localStorage.setItem('userInfo', JSON.stringify(userInfo.data))
           await router.push('/dashboard')
         } else {
           ElMessage.warning('你不是管理员，不能登陆到后台控制面板')
diff --git a/src/views/activity/GroupBuyManage.vue b/src/views/activity/GroupBuyManage.vue
new file mode 100644
index 0000000..04c5875
--- /dev/null
+++ b/src/views/activity/GroupBuyManage.vue
@@ -0,0 +1,906 @@
+<template>
+  <div class="group-buy-manage-container">
+    <el-card class="main-container" shadow="never">
+      <el-tabs v-model="activeTab" class="group-buy-tabs">
+        <!-- 拼团活动标签页 -->
+        <el-tab-pane label="拼团活动" name="activity">
+          <div class="header-actions">
+            <el-button type="primary" icon="Plus" @click="openCreateDialog">
+              创建随机队伍
+            </el-button>
+            <el-button type="success" icon="Download" @click="handleExport" :loading="exportLoading">
+              导出成功队伍
+            </el-button>
+            <el-button type="info" icon="Refresh" @click="fetchGroupList" :loading="activityLoading">
+              刷新列表
+            </el-button>
+            <el-button type="danger" @click="handleClearAll">
+              清除所有队伍
+            </el-button>
+            <el-button type="warning" @click="showClearUserDialog = true">
+              清除用户队伍
+            </el-button>
+          </div>
+
+          <div class="table-section">
+            <el-table :data="groupList" v-loading="activityLoading" stripe border>
+              <el-table-column prop="id" label="队伍ID" />
+              <el-table-column prop="name" label="队伍名称" min-width="150" />
+              <el-table-column prop="currentMembers" label="当前人数" width="100" align="center" />
+              <el-table-column prop="maxMembers" label="需要人数" width="100" align="center" />
+              <el-table-column label="状态" width="120">
+                <template #default="{ row }">
+                  <el-tag :type="getStatusType(row.status)">
+                    {{ getStatusText(row.status) }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="280" fixed="right">
+                <template #default="{ row }">
+                  <el-button
+                    v-if="row.status === 'pending'"
+                    type="primary"
+                    size="small"
+                    @click="handleAddRandomUser(row)"
+                    :loading="row.addingUser"
+                  >
+                    添加伪人
+                  </el-button>
+                  <el-button
+                    v-if="row.status === 'success'"
+                    type="success"
+                    size="small"
+                    @click="handleSetOrder(row)"
+                    :loading="row.settingOrder"
+                  >
+                    下发订单
+                  </el-button>
+                  <el-button
+                    type="info"
+                    size="small"
+                    @click="handleViewMembers(row)"
+                  >
+                    查看详情
+                  </el-button>
+                  <el-button
+                    type="danger"
+                    size="small"
+                    @click="handleRemoveGroup(row)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-tab-pane>
+
+        <!-- 拼团类型标签页 -->
+        <el-tab-pane label="拼团类型" name="type">
+          <div class="header-actions">
+            <el-button type="primary" icon="Plus" @click="handleAddType">新增类型</el-button>
+            <el-select v-model="searchTag" placeholder="请选择标签" style="width: 180px; margin-left: 12px" @change="handleTagChange">
+              <el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
+            </el-select>
+            <el-input v-model="searchKey" placeholder="关键词搜索" style="width: 200px; margin-left: 12px" clearable :disabled="!searchTag" @keyup.enter="fetchTypeList" />
+            <el-button type="info" icon="Refresh" @click="fetchTypeList" :loading="typeLoading" :disabled="!searchTag" style="margin-left: 12px">刷新</el-button>
+          </div>
+
+          <div class="table-section">
+            <el-empty v-if="!searchTag" description="请先选择标签" />
+            <template v-else>
+              <el-table :data="typeTableData" v-loading="typeLoading" stripe border>
+                <el-table-column prop="id" label="ID" width="80" />
+                <el-table-column prop="name" label="名称" min-width="120" />
+                <el-table-column label="价格" width="120">
+                  <template #default="{ row }">¥{{ (row.price / 100).toFixed(2) }}</template>
+                </el-table-column>
+                <el-table-column label="续费价格" width="120">
+                  <template #default="{ row }">¥{{ (row.renewPrice / 100).toFixed(2) }}</template>
+                </el-table-column>
+                <el-table-column prop="maxPerson" label="拼团人数" width="100" align="center" />
+                <el-table-column prop="tag" label="标签" width="120">
+                  <template #default="{ row }">
+                    <el-tag v-if="row.tag" type="info">{{ row.tag }}</el-tag>
+                    <span v-else>-</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="过期时间" width="180">
+                  <template #default="{ row }">{{ row.expireTime ? formatTime(row.expireTime) : '永久' }}</template>
+                </el-table-column>
+                <el-table-column prop="note" label="备注" min-width="150" show-overflow-tooltip />
+                <el-table-column label="操作" width="160" fixed="right">
+                  <template #default="{ row }">
+                    <el-button type="primary" size="small" @click="handleEditType(row)">编辑</el-button>
+                    <el-button type="danger" size="small" @click="handleDeleteType(row)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div class="pagination-wrapper">
+                <el-pagination v-model:current-page="typePage" v-model:page-size="typePageSize" :total="typeTotal" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next" @size-change="fetchTypeList" @current-change="fetchTypeList" />
+              </div>
+            </template>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+
+    <!-- 创建随机队伍对话框 -->
+    <el-dialog
+      v-model="showCreateDialog"
+      title="创建随机伪人队伍"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <el-form :model="createForm" :rules="createRules" ref="createFormRef" label-width="100px">
+        <el-form-item label="队伍名称" prop="name">
+          <el-input v-model="createForm.name" placeholder="请输入队伍名称" />
+        </el-form-item>
+        <el-form-item label="标签" prop="tag">
+          <el-select v-model="createForm.tag" placeholder="请选择标签" style="width: 100%" @change="handleCreateTagChange">
+            <el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="拼团类型" prop="groupBuyTypeId">
+          <el-select v-model="createForm.groupBuyTypeId" placeholder="请先选择标签" :disabled="!createForm.tag" style="width: 100%">
+            <el-option v-for="item in createTypeList" :key="item.id" :label="`${item.name} (${item.maxPerson}人)`" :value="item.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showCreateDialog = false">取消</el-button>
+        <el-button type="primary" @click="handleCreate" :loading="createLoading">
+          创建
+        </el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 查看成员对话框 -->
+    <el-dialog
+      v-model="showMembersDialog"
+      title="队伍成员列表"
+      width="700px"
+    >
+      <el-table :data="currentMembers" border stripe>
+        <el-table-column label="头像" width="80" align="center">
+          <template #default="{ row }">
+            <el-avatar :size="50" :src="row.cover" v-if="row.cover">
+              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
+            </el-avatar>
+            <el-avatar :size="50" v-else>
+              {{ row.username?.charAt(0) || '?' }}
+            </el-avatar>
+          </template>
+        </el-table-column>
+        <el-table-column prop="userId" label="用户ID" width="100" />
+        <el-table-column prop="username" label="用户名" min-width="120" />
+        <el-table-column label="队长" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag v-if="row.teamLeader" type="warning" size="small">队长</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" align="center">
+          <template #default="{ row }">
+            <el-button type="danger" size="small" @click="handleClearUserGroups(row.userId)">清除队伍</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <!-- 清除用户队伍对话框 -->
+    <el-dialog
+      v-model="showClearUserDialog"
+      title="清除指定用户的所有队伍"
+      width="400px"
+      :close-on-click-modal="false"
+    >
+      <el-form :model="clearUserForm" label-width="80px">
+        <el-form-item label="用户ID">
+          <el-input v-model="clearUserForm.userId" placeholder="请输入用户ID" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showClearUserDialog = false">取消</el-button>
+        <el-button type="danger" @click="handleClearUserSubmit" :loading="clearUserLoading">确认清除</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 拼团类型表单对话框 -->
+    <el-dialog v-model="typeDialogVisible" :title="isEditType ? '编辑拼团类型' : '新增拼团类型'" width="500px" :close-on-click-modal="false">
+      <el-form :model="typeForm" :rules="typeRules" ref="typeFormRef" label-width="100px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="typeForm.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="价格(分)" prop="price">
+          <el-input-number v-model="typeForm.price" :min="0" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="续费价格(分)" prop="renewPrice">
+          <el-input-number v-model="typeForm.renewPrice" :min="0" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="拼团人数" prop="maxPerson">
+          <el-input-number v-model="typeForm.maxPerson" :min="2" :max="100" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="标签" prop="tag">
+          <el-select v-model="typeForm.tag" placeholder="选择标签" filterable allow-create style="width: 100%">
+            <el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="过期时间" prop="expireTime">
+          <el-date-picker v-model="typeForm.expireTime" type="datetime" placeholder="选择过期时间" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="备注字段">
+          <div class="note-fields-container">
+            <el-button type="primary" size="small" @click="addNoteField" style="margin-bottom: 10px">+ 添加字段</el-button>
+            <el-table :data="typeForm.noteFields" border size="small" v-if="typeForm.noteFields.length">
+              <el-table-column label="名称" min-width="120">
+                <template #default="{ row }">
+                  <el-input v-model="row.label" placeholder="如：内存" size="small" />
+                </template>
+              </el-table-column>
+              <el-table-column label="默认值" min-width="120">
+                <template #default="{ row }">
+                  <el-input v-model="row.defaultValue" placeholder="如：20GB" size="small" />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="60" align="center">
+                <template #default="{ $index }">
+                  <el-button type="danger" size="small" link @click="removeNoteField($index)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="typeDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleTypeSubmit" :loading="typeSubmitLoading">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  getGroupBuyList,
+  getGroupBuyDetail,
+  addRandomUser,
+  addRandomGroup,
+  exportIdcInfo,
+  setOrder
+} from '@/api/admin/activity'
+import { 
+  getGroupBuyTypeList, 
+  getGroupBuyTypeTags, 
+  removeGroupBuy, 
+  clearAllGroupBuy, 
+  clearUserGroupBuy,
+  addGroupBuyType,
+  updateGroupBuyType,
+  deleteGroupBuyType
+} from '@/api/groupBuy'
+
+const route = useRoute()
+
+// 当前激活的标签页
+const activeTab = ref('activity')
+
+// ==================== 拼团活动相关 ====================
+const activityLoading = ref(false)
+const exportLoading = ref(false)
+const createLoading = ref(false)
+const groupList = ref([])
+
+const showCreateDialog = ref(false)
+const showMembersDialog = ref(false)
+const showClearUserDialog = ref(false)
+const currentMembers = ref([])
+const clearUserLoading = ref(false)
+const clearUserForm = reactive({ userId: '' })
+
+const createFormRef = ref(null)
+const createForm = reactive({
+  name: '',
+  tag: '',
+  groupBuyTypeId: ''
+})
+const createTypeList = ref([])
+const tagList = ref([])
+
+const createRules = {
+  name: [
+    { required: true, message: '请输入队伍名称', trigger: 'blur' }
+  ],
+  tag: [
+    { required: true, message: '请选择标签', trigger: 'change' }
+  ],
+  groupBuyTypeId: [
+    { required: true, message: '请选择拼团类型', trigger: 'change' }
+  ]
+}
+
+// ==================== 拼团类型相关 ====================
+const typeLoading = ref(false)
+const typeTableData = ref([])
+const typeTotal = ref(0)
+const typePage = ref(1)
+const typePageSize = ref(10)
+const searchKey = ref('')
+const searchTag = ref('')
+const typeDialogVisible = ref(false)
+const isEditType = ref(false)
+const typeSubmitLoading = ref(false)
+const typeFormRef = ref(null)
+
+const typeForm = reactive({ 
+  id: '', 
+  name: '', 
+  price: 0, 
+  renewPrice: 0, 
+  maxPerson: 5, 
+  tag: '', 
+  expireTime: null, 
+  noteFields: [] 
+})
+
+const typeRules = {
+  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
+  renewPrice: [{ required: true, message: '请输入续费价格', trigger: 'blur' }],
+  maxPerson: [{ required: true, message: '请输入拼团人数', trigger: 'blur' }],
+  tag: [{ required: true, message: '请选择标签', trigger: 'change' }],
+  expireTime: [{ required: true, message: '请选择过期时间', trigger: 'change' }]
+}
+
+// ==================== 通用方法 ====================
+const formatTime = (timeStr) => {
+  if (!timeStr) return '-'
+  return new Date(timeStr).toLocaleString('zh-CN')
+}
+
+// 获取标签列表
+const fetchTags = async () => {
+  try {
+    const res = await getGroupBuyTypeTags()
+    if (res.code === 200) {
+      tagList.value = res.data || []
+    }
+  } catch (error) {
+    console.error('获取标签失败:', error)
+  }
+}
+
+// ==================== 拼团活动方法 ====================
+// 根据 tag 获取拼团类型列表（用于创建对话框）
+const fetchCreateTypeListByTag = async (tag) => {
+  try {
+    const res = await getGroupBuyTypeList({ page: 1, count: 100, tag })
+    if (res.code === 200) {
+      createTypeList.value = res.data?.data || []
+    }
+  } catch (error) {
+    console.error('获取拼团类型失败:', error)
+  }
+}
+
+// tag 变化时获取对应的拼团类型（创建对话框）
+const handleCreateTagChange = (tag) => {
+  createForm.groupBuyTypeId = ''
+  createTypeList.value = []
+  if (tag) {
+    fetchCreateTypeListByTag(tag)
+  }
+}
+
+// 打开创建对话框
+const openCreateDialog = () => {
+  createForm.name = ''
+  createForm.tag = ''
+  createForm.groupBuyTypeId = ''
+  createTypeList.value = []
+  fetchTags()
+  showCreateDialog.value = true
+}
+
+// 获取队伍列表
+const fetchGroupList = async () => {
+  activityLoading.value = true
+  try {
+    const res = await getGroupBuyList()
+    if (res.data.code === 200) {
+      const allGroups = res.data.data.group_buy_list || []
+      const lackGroups = res.data.data.lack_group_buy_list || []
+      const successGroups = res.data.data.success_group_buy_list || []
+      
+      const successIds = successGroups.map(g => g.group_buy_id)
+      const lackIds = lackGroups.map(g => g.group_buy_id)
+      
+      groupList.value = allGroups.map(group => {
+        let status = 'empty'
+        if (successIds.includes(group.group_buy_id)) {
+          status = 'success'
+        } else if (lackIds.includes(group.group_buy_id)) {
+          status = 'pending'
+        }
+        
+        return {
+          id: group.group_buy_id,
+          name: group.name,
+          type: group.maxPerson === 5 ? 0 : 1,
+          currentMembers: group.users?.length || 0,
+          maxMembers: group.maxPerson,
+          status: status,
+          createTime: group.createTime || '-',
+          members: group.users || [],
+          addingUser: false,
+          settingOrder: false
+        }
+      })
+      
+      ElMessage.success(`加载成功，共 ${allGroups.length} 个队伍`)
+    } else {
+      ElMessage.error(res.message || '获取队伍列表失败')
+    }
+  } catch (error) {
+    console.error('获取队伍列表出错:', error)
+    ElMessage.error('网络错误，请稍后重试')
+  } finally {
+    activityLoading.value = false
+  }
+}
+
+const getStatusText = (status) => {
+  const statusMap = {
+    'empty': '空队伍',
+    'pending': '进行中',
+    'success': '已满员'
+  }
+  return statusMap[status] || status
+}
+
+const getStatusType = (status) => {
+  const typeMap = {
+    'empty': 'info',
+    'pending': 'warning',
+    'success': 'success'
+  }
+  return typeMap[status] || ''
+}
+
+const handleCreate = async () => {
+  if (!createFormRef.value) return
+  
+  await createFormRef.value.validate(async (valid) => {
+    if (valid) {
+      createLoading.value = true
+      try {
+        const res = await addRandomGroup({ name: createForm.name, group_buy_type_id: String(createForm.groupBuyTypeId) })
+        
+        if (res.data.code === 200) {
+          ElMessage.success(`创建成功！队伍ID: ${res.data.group_buy_id}`)
+          showCreateDialog.value = false
+          createForm.name = ''
+          createForm.groupBuyTypeId = ''
+          fetchGroupList()
+        } else {
+          ElMessage.error(res.message || '创建失败')
+        }
+      } catch (error) {
+        console.error('创建队伍出错:', error)
+        ElMessage.error('网络错误，请稍后重试')
+      } finally {
+        createLoading.value = false
+      }
+    }
+  })
+}
+
+const handleAddRandomUser = async (row) => {
+  row.addingUser = true
+  try {
+    const res = await addRandomUser(row.id)
+    if (res.data.code === 200) {
+      ElMessage.success('添加伪人成功')
+      fetchGroupList()
+    } else {
+      ElMessage.error(res.message || '添加伪人失败')
+    }
+  } catch (error) {
+    console.error('添加伪人出错:', error)
+    ElMessage.error('网络错误，请稍后重试')
+  } finally {
+    row.addingUser = false
+  }
+}
+
+const handleSetOrder = async (row) => {
+  try {
+    await ElMessageBox.confirm(
+      '确定要为该队伍下发订单吗？',
+      '确认操作',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+    
+    row.settingOrder = true
+    try {
+      const res = await setOrder(row.id)
+      if (res.data.code === 200) {
+        ElMessage.success('订单下发成功')
+        fetchGroupList()
+      } else {
+        ElMessage.error(res.message || '订单下发失败')
+      }
+    } catch (error) {
+      console.error('下发订单出错:', error)
+      ElMessage.error('网络错误，请稍后重试')
+    } finally {
+      row.settingOrder = false
+    }
+  } catch {
+    // 用户取消操作
+  }
+}
+
+const handleViewMembers = async (row) => {
+  try {
+    const res = await getGroupBuyDetail(row.id)
+    if (res && res.data && res.data.code === 200) {
+      const detail = res.data.data
+      currentMembers.value = (detail.users || []).map(member => ({
+        userId: member.user_id,
+        username: member.user_name || `用户${member.user_id}`,
+        cover: member.cover || '',
+        teamLeader: member.team_leader || false,
+        idcUid: member.idc_uid || '-',
+        idcPhone: member.idc_phone || '-'
+      }))
+      
+      row.name = detail.name
+      row.currentMembers = detail.users?.length || 0
+      row.maxMembers = detail.maxPerson
+      row.members = detail.users || []
+    } else {
+      currentMembers.value = row.members.map(member => ({
+        userId: member.user_id,
+        username: member.user_name || `用户${member.user_id}`,
+        cover: member.cover || '',
+        teamLeader: member.team_leader || false,
+        idcUid: member.idc_uid || '-',
+        idcPhone: member.idc_phone || '-'
+      }))
+    }
+    showMembersDialog.value = true
+  } catch (error) {
+    console.error('获取成员信息失败:', error)
+    currentMembers.value = row.members.map(member => ({
+      userId: member.user_id,
+      username: member.user_name || `用户${member.user_id}`,
+      cover: member.cover || '',
+      teamLeader: member.team_leader || false,
+      idcUid: member.idc_uid || '-',
+      idcPhone: member.idc_phone || '-'
+    }))
+    showMembersDialog.value = true
+  }
+}
+
+const handleExport = async () => {
+  exportLoading.value = true
+  try {
+    const res = await exportIdcInfo()
+    
+    if (res.data && res.data.code === 200) {
+      const jsonStr = JSON.stringify(res.data.data, null, 2)
+      const blob = new Blob([jsonStr], { type: 'application/json' })
+      const url = window.URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `拼团成功队伍_${new Date().getTime()}.json`
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(url)
+      
+      ElMessage.success('导出成功')
+    } else {
+      ElMessage.error(res.data?.message || '导出失败')
+    }
+  } catch (error) {
+    console.error('导出出错:', error)
+    ElMessage.error('导出失败，请稍后重试')
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+const handleRemoveGroup = async (row) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该队伍吗？', '确认删除', { type: 'warning' })
+    const res = await removeGroupBuy(row.id)
+    if (res.code === 200) {
+      ElMessage.success('删除成功')
+      fetchGroupList()
+    } else {
+      ElMessage.error(res.message || '删除失败')
+    }
+  } catch { /* 取消 */ }
+}
+
+const handleClearAll = async () => {
+  try {
+    await ElMessageBox.confirm('确定要清除所有队伍吗？此操作不可恢复！', '危险操作', { type: 'error', confirmButtonText: '确定清除' })
+    const res = await clearAllGroupBuy()
+    if (res.code === 200) {
+      ElMessage.success('已清除所有队伍')
+      fetchGroupList()
+    } else {
+      ElMessage.error(res.message || '清除失败')
+    }
+  } catch { /* 取消 */ }
+}
+
+const handleClearUserGroups = async (userId) => {
+  try {
+    await ElMessageBox.confirm(`确定要清除用户 ${userId} 的所有队伍吗？`, '确认操作', { type: 'warning' })
+    const res = await clearUserGroupBuy(userId)
+    if (res.code === 200) {
+      ElMessage.success('清除成功')
+      showMembersDialog.value = false
+      fetchGroupList()
+    } else {
+      ElMessage.error(res.message || '清除失败')
+    }
+  } catch { /* 取消 */ }
+}
+
+const handleClearUserSubmit = async () => {
+  if (!clearUserForm.userId) {
+    ElMessage.warning('请输入用户ID')
+    return
+  }
+  clearUserLoading.value = true
+  try {
+    const res = await clearUserGroupBuy(clearUserForm.userId)
+    if (res.code === 200) {
+      ElMessage.success('清除成功')
+      showClearUserDialog.value = false
+      clearUserForm.userId = ''
+      fetchGroupList()
+    } else {
+      ElMessage.error(res.message || '清除失败')
+    }
+  } catch (error) {
+    console.error('清除用户队伍失败:', error)
+    ElMessage.error('网络错误')
+  } finally {
+    clearUserLoading.value = false
+  }
+}
+
+// ==================== 拼团类型方法 ====================
+const fetchTypeList = async () => {
+  typeLoading.value = true
+  try {
+    const res = await getGroupBuyTypeList({ page: typePage.value, count: typePageSize.value, key: searchKey.value || undefined, tag: searchTag.value || undefined })
+    if (res.code === 200) {
+      typeTableData.value = res.data?.data || []
+      typeTotal.value = res.data?.all_count || 0
+    } else {
+      ElMessage.error(res.data.message || '获取列表失败')
+    }
+  } catch (error) {
+    console.error('获取列表失败:', error)
+    ElMessage.error('网络错误')
+  } finally {
+    typeLoading.value = false
+  }
+}
+
+const handleTagChange = (tag) => {
+  typePage.value = 1
+  searchKey.value = ''
+  typeTableData.value = []
+  typeTotal.value = 0
+  if (tag) {
+    fetchTypeList()
+  }
+}
+
+const handleAddType = () => {
+  isEditType.value = false
+  Object.assign(typeForm, { id: '', name: '', price: 0, renewPrice: 0, maxPerson: 5, tag: '', expireTime: null, noteFields: [] })
+  typeDialogVisible.value = true
+}
+
+const handleEditType = (row) => {
+  isEditType.value = true
+  let noteFields = []
+  try {
+    noteFields = row.note ? JSON.parse(row.note) : []
+  } catch { noteFields = [] }
+  Object.assign(typeForm, { id: row.id, name: row.name, price: row.price, renewPrice: row.renewPrice, maxPerson: row.maxPerson, tag: row.tag || '', expireTime: row.expireTime || null, noteFields })
+  typeDialogVisible.value = true
+}
+
+const addNoteField = () => {
+  typeForm.noteFields.push({ label: '', defaultValue: '' })
+}
+
+const removeNoteField = (index) => {
+  typeForm.noteFields.splice(index, 1)
+}
+
+const handleTypeSubmit = async () => {
+  if (!typeFormRef.value) return
+  await typeFormRef.value.validate(async (valid) => {
+    if (!valid) return
+    typeSubmitLoading.value = true
+    try {
+      const noteJson = JSON.stringify(typeForm.noteFields.filter(f => f.label))
+      const data = {
+        name: typeForm.name,
+        price: String(typeForm.price),
+        renew_price: String(typeForm.renewPrice),
+        max_person: String(typeForm.maxPerson),
+        tag: typeForm.tag,
+        expire_time: typeForm.expireTime ? Math.floor(new Date(typeForm.expireTime).getTime() / 1000) : 0,
+        note: noteJson
+      }
+      if (isEditType.value) data.id = String(typeForm.id)
+      const res = isEditType.value ? await updateGroupBuyType(data) : await addGroupBuyType(data)
+      if (res.code === 200) {
+        ElMessage.success(isEditType.value ? '修改成功' : '新增成功')
+        typeDialogVisible.value = false
+        fetchTypeList()
+        fetchTags()
+      } else {
+        ElMessage.error(res.message || '操作失败')
+      }
+    } catch (error) {
+      console.error('提交失败:', error)
+      ElMessage.error('网络错误')
+    } finally {
+      typeSubmitLoading.value = false
+    }
+  })
+}
+
+const handleDeleteType = async (row) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该拼团类型吗？', '确认删除', { type: 'warning' })
+    const res = await deleteGroupBuyType(row.id)
+    if (res.code === 200) {
+      ElMessage.success('删除成功')
+      fetchTypeList()
+      fetchTags()
+    } else {
+      ElMessage.error(res.data.message || '删除失败')
+    }
+  } catch { /* 取消 */ }
+}
+
+// 监听标签页切换
+watch(activeTab, (newVal) => {
+  if (newVal === 'activity') {
+    fetchGroupList()
+  } else if (newVal === 'type') {
+    fetchTags()
+  }
+})
+
+// 初始化
+onMounted(() => {
+  fetchGroupList()
+  fetchTags()
+  
+  // 检查路由参数决定初始标签页
+  if (route.query.tab === 'type') {
+    activeTab.value = 'type'
+  }
+})
+</script>
+
+<style scoped>
+.group-buy-manage-container {
+  padding: 0;
+}
+
+.main-container {
+  border: 1px solid #e1e8ed;
+  background: #ffffff;
+}
+
+.group-buy-tabs {
+  padding: 0 20px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 0;
+  border-bottom: 1px solid #e1e8ed;
+  background: #fafbfc;
+  margin: 0 -20px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.table-section {
+  padding: 20px 0;
+}
+
+.pagination-wrapper {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.note-fields-container {
+  width: 100%;
+}
+
+/* 表格样式优化 */
+:deep(.el-table) {
+  border: none;
+  color: #2c3e50;
+}
+
+:deep(.el-table__header) {
+  background: #f8f9fa;
+}
+
+:deep(.el-table th) {
+  background: #f8f9fa !important;
+  border-bottom: 2px solid #e1e8ed;
+  color: #2c3e50;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+:deep(.el-table td) {
+  border-bottom: 1px solid #f0f2f5;
+  color: #34495e;
+}
+
+:deep(.el-table tr:hover > td) {
+  background-color: #f8f9fa !important;
+}
+
+:deep(.el-card__body) {
+  padding: 0;
+}
+
+:deep(.el-tabs__header) {
+  margin: 0;
+  padding: 0 0 0 0;
+  border-bottom: 1px solid #e1e8ed;
+}
+
+:deep(.el-tabs__nav-wrap::after) {
+  display: none;
+}
+
+:deep(.el-tabs__item) {
+  padding: 0 20px;
+  height: 50px;
+  line-height: 50px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+:deep(.el-tabs__item.is-active) {
+  color: #2c3e50;
+  font-weight: 600;
+}
+
+:deep(.el-tabs__active-bar) {
+  background-color: #2c3e50;
+}
+</style>
diff --git a/src/views/order/OrderList.vue b/src/views/order/OrderList.vue
index f2e0349..434866f 100644
--- a/src/views/order/OrderList.vue
+++ b/src/views/order/OrderList.vue
@@ -186,36 +186,64 @@
           <el-input v-model="orderForm.table" placeholder="请输入所属表" />
         </el-form-item>
         <el-form-item label="用户ID" prop="user_id">
-          <div class="selector-field">
-            <div class="selector-info" v-if="selectedUserInfo">
-              <el-tag type="primary" effect="plain">
-                ID: {{ orderForm.user_id }} - {{ selectedUserInfo.user_name }}
-              </el-tag>
-            </div>
-            <div class="selector-actions">
-              <el-button type="primary" @click="userSelectorVisible = true">
+          <el-input
+            v-if="selectedUserInfo"
+            :model-value="`${selectedUserInfo.user_name} (ID: ${orderForm.user_id})`"
+            readonly
+            style="width: 100%"
+          >
+            <template #suffix>
+              <el-icon class="clear-icon" @click="clearUser"><Close /></el-icon>
+            </template>
+            <template #append>
+              <el-button @click="userSelectorVisible = true">
                 <el-icon><User /></el-icon>
-                {{ orderForm.user_id ? '更换用户' : '选择用户' }}
               </el-button>
-              <el-button v-if="orderForm.user_id" @click="clearUser">清除</el-button>
-            </div>
-          </div>
+            </template>
+          </el-input>
+          <el-input
+            v-else
+            placeholder="请选择用户"
+            readonly
+            style="width: 100%"
+            @click="userSelectorVisible = true"
+          >
+            <template #append>
+              <el-button @click="userSelectorVisible = true">
+                <el-icon><User /></el-icon>
+              </el-button>
+            </template>
+          </el-input>
         </el-form-item>
         <el-form-item label="商品ID" prop="commodity_id">
-          <div class="selector-field">
-            <div class="selector-info" v-if="selectedProductInfo">
-              <el-tag type="success" effect="plain">
-                ID: {{ orderForm.commodity_id }} - {{ selectedProductInfo.name }}
-              </el-tag>
-            </div>
-            <div class="selector-actions">
-              <el-button type="success" @click="productSelectorVisible = true">
+          <el-input
+            v-if="selectedProductInfo"
+            :model-value="`${selectedProductInfo.name} (ID: ${orderForm.commodity_id})`"
+            readonly
+            style="width: 100%"
+          >
+            <template #suffix>
+              <el-icon class="clear-icon" @click="clearProduct"><Close /></el-icon>
+            </template>
+            <template #append>
+              <el-button @click="productSelectorVisible = true">
                 <el-icon><ShoppingCart /></el-icon>
-                {{ orderForm.commodity_id ? '更换商品' : '选择商品' }}
               </el-button>
-              <el-button v-if="orderForm.commodity_id" @click="clearProduct">清除</el-button>
-            </div>
-          </div>
+            </template>
+          </el-input>
+          <el-input
+            v-else
+            placeholder="请选择商品"
+            readonly
+            style="width: 100%"
+            @click="productSelectorVisible = true"
+          >
+            <template #append>
+              <el-button @click="productSelectorVisible = true">
+                <el-icon><ShoppingCart /></el-icon>
+              </el-button>
+            </template>
+          </el-input>
         </el-form-item>
         <el-form-item label="购买数量" prop="pay_num">
           <el-input-number v-model="orderForm.pay_num" :min="1" placeholder="请输入数量" style="width: 100%" />
@@ -227,39 +255,74 @@
           <el-input-number v-model="orderForm.renew_price" :min="0" placeholder="请输入续费价格(分)" style="width: 100%" />
         </el-form-item>
         <el-form-item label="过期时间" prop="expire_time">
-          <el-input-number v-model="orderForm.expire_time" :min="0" placeholder="请输入过期时间(时间戳)" style="width: 100%" />
+          <el-date-picker
+            v-model="orderForm.expire_time"
+            type="datetime"
+            placeholder="请选择过期时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="x"
+            style="width: 100%"
+          />
         </el-form-item>
         <el-form-item label="优惠码ID" prop="discount_code_id">
-          <div class="selector-field">
-            <div class="selector-info" v-if="selectedDiscountCodeInfo">
-              <el-tag type="warning" effect="plain">
-                ID: {{ orderForm.discount_code_id }} - {{ selectedDiscountCodeInfo.name || selectedDiscountCodeInfo.code }}
-              </el-tag>
-            </div>
-            <div class="selector-actions">
-              <el-button type="warning" @click="discountCodeSelectorVisible = true">
+          <el-input
+            v-if="selectedDiscountCodeInfo"
+            :model-value="`${selectedDiscountCodeInfo.name || selectedDiscountCodeInfo.code} (ID: ${orderForm.discount_code_id})`"
+            readonly
+            style="width: 100%"
+          >
+            <template #suffix>
+              <el-icon class="clear-icon" @click="clearDiscountCode"><Close /></el-icon>
+            </template>
+            <template #append>
+              <el-button @click="discountCodeSelectorVisible = true">
                 <el-icon><Ticket /></el-icon>
-                {{ orderForm.discount_code_id ? '更换优惠码' : '选择优惠码' }}
               </el-button>
-              <el-button v-if="orderForm.discount_code_id" @click="clearDiscountCode">清除</el-button>
-            </div>
-          </div>
+            </template>
+          </el-input>
+          <el-input
+            v-else
+            placeholder="请选择优惠码（可选）"
+            readonly
+            style="width: 100%"
+            @click="discountCodeSelectorVisible = true"
+          >
+            <template #append>
+              <el-button @click="discountCodeSelectorVisible = true">
+                <el-icon><Ticket /></el-icon>
+              </el-button>
+            </template>
+          </el-input>
         </el-form-item>
         <el-form-item label="代金券ID" prop="coupon_id">
-          <div class="selector-field">
-            <div class="selector-info" v-if="selectedVoucherInfo">
-              <el-tag type="danger" effect="plain">
-                ID: {{ orderForm.coupon_id }} - {{ selectedVoucherInfo.name || selectedVoucherInfo.code }}
-              </el-tag>
-            </div>
-            <div class="selector-actions">
-              <el-button type="danger" @click="voucherSelectorVisible = true">
+          <el-input
+            v-if="selectedVoucherInfo"
+            :model-value="`${selectedVoucherInfo.name || selectedVoucherInfo.code} (ID: ${orderForm.coupon_id})`"
+            readonly
+            style="width: 100%"
+          >
+            <template #suffix>
+              <el-icon class="clear-icon" @click="clearVoucher"><Close /></el-icon>
+            </template>
+            <template #append>
+              <el-button @click="voucherSelectorVisible = true">
                 <el-icon><Money /></el-icon>
-                {{ orderForm.coupon_id ? '更换代金券' : '选择代金券' }}
               </el-button>
-              <el-button v-if="orderForm.coupon_id" @click="clearVoucher">清除</el-button>
-            </div>
-          </div>
+            </template>
+          </el-input>
+          <el-input
+            v-else
+            placeholder="请选择代金券（可选）"
+            readonly
+            style="width: 100%"
+            @click="voucherSelectorVisible = true"
+          >
+            <template #append>
+              <el-button @click="voucherSelectorVisible = true">
+                <el-icon><Money /></el-icon>
+              </el-button>
+            </template>
+          </el-input>
         </el-form-item>
         <el-form-item label="订单状态" prop="state">
           <el-radio-group v-model="orderForm.state">
@@ -319,12 +382,13 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Delete, Search, Download, Refresh, User, ShoppingCart, Ticket, Money } from '@element-plus/icons-vue'
+import { Plus, Delete, Search, Download, Refresh, User, ShoppingCart, Ticket, Money, Close } from '@element-plus/icons-vue'
 import { getOrderList, getOrderDetail, createOrder, updateOrder, deleteOrder } from '@/api/admin/order'
 import UserListSelector from '@/components/admin/UserListSelector.vue'
 import ProductSelector from '@/components/admin/ProductSelector.vue'
 import DiscountCodeSelector from '@/components/admin/DiscountCodeSelector.vue'
 import VoucherSelector from '@/components/admin/VoucherSelector.vue'
+import { isoToMilliseconds, timeToTimestamp, formatDate as formatDateTool } from '@/utils/tool'
 
 // 查询参数
 const queryParams = reactive({
@@ -415,7 +479,17 @@ const fetchOrderList = async () => {
     const res = await getOrderList(params)
     console.log('订单列表数据:', res.data)
     if (res.data.code === 200) {
-      orderList.value = res.data.data.list || []
+      // 处理时间数据：将ISO格式转换为毫秒级时间戳（用于时间选择器）
+      const list = (res.data.data.list || []).map(item => {
+        if (item.expireTime) {
+          // 保存原始时间用于显示
+          item._originalExpireTime = item.expireTime
+          // 转换为毫秒级时间戳用于时间选择器
+          item._expireTimeMs = isoToMilliseconds(item.expireTime)
+        }
+        return item
+      })
+      orderList.value = list
       total.value = res.data.data.all_count || 0
     }
   } catch (error) {
@@ -426,16 +500,9 @@ const fetchOrderList = async () => {
   }
 }
 
-// 格式化日期
+// 格式化日期 - 使用工具函数
 const formatDate = (dateStr) => {
-  if (!dateStr) return '-'
-  const date = new Date(dateStr)
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  const hours = String(date.getHours()).padStart(2, '0')
-  const minutes = String(date.getMinutes()).padStart(2, '0')
-  return `${year}-${month}-${day} ${hours}:${minutes}`
+  return formatDateTool(dateStr)
 }
 
 // 获取订单状态类型
@@ -536,6 +603,14 @@ const handleEdit = (row) => {
   dialogVisible.value = true
   clearAllSelections()
   
+  // 处理过期时间：优先使用已转换的时间戳，否则转换ISO格式
+  let expireTimeMs = null
+  if (row._expireTimeMs !== undefined) {
+    expireTimeMs = row._expireTimeMs
+  } else if (row.expireTime) {
+    expireTimeMs = isoToMilliseconds(row.expireTime)
+  }
+  
   Object.assign(orderForm, {
     order_id: row.id,
     name: row.name,
@@ -545,7 +620,7 @@ const handleEdit = (row) => {
     pay_num: row.payNum,
     price: row.price,
     renew_price: row.renewPrice,
-    expire_time: row.expireTime ? new Date(row.expireTime).getTime() / 1000 : 0,
+    expire_time: expireTimeMs,
     discount_code_id: 0, // 从详情接口获取
     coupon_id: 0, // 从详情接口获取
     state: row.state,
@@ -604,6 +679,13 @@ const submitForm = () => {
   orderFormRef.value?.validate(async (valid) => {
     if (valid) {
       try {
+        // 处理过期时间：将毫秒级时间戳转换为秒级时间戳
+        let expireTimeSeconds = 0
+        if (orderForm.expire_time) {
+          const timestamp = timeToTimestamp(new Date(orderForm.expire_time))
+          expireTimeSeconds = timestamp || 0
+        }
+        
         // 准备提交的数据
         const submitData = {
           name: orderForm.name,
@@ -613,7 +695,7 @@ const submitForm = () => {
           pay_num: Number(orderForm.pay_num),
           price: Number(orderForm.price),
           renew_price: Number(orderForm.renew_price),
-          expire_time: Number(orderForm.expire_time),
+          expire_time: expireTimeSeconds,
           discount_code_id: Number(orderForm.discount_code_id),
           coupon_id: Number(orderForm.coupon_id),
           state: Number(orderForm.state),
@@ -865,22 +947,14 @@ onMounted(() => {
   100% { background-position: -200% 0; }
 }
 
-/* 选择器字段样式 */
-.selector-field {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
+/* 选择器清除图标样式 */
+.clear-icon {
+  cursor: pointer;
+  color: #909399;
+  transition: color 0.2s;
 }
 
-.selector-info {
-  display: flex;
-  align-items: center;
-}
-
-.selector-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
+.clear-icon:hover {
+  color: #f56c6c;
 }
 </style>
diff --git a/src/views/product/ProductList.vue b/src/views/product/ProductList.vue
index de9898d..16a120c 100644
--- a/src/views/product/ProductList.vue
+++ b/src/views/product/ProductList.vue
@@ -500,12 +500,26 @@ const fetchProductList = async () => {
       // 计算未删除数据的总数（API返回的all_count包含已删除的，需要减去已删除的数量）
       const deletedCount = allData.filter(item => item.delete == true).length
       total.value = (res.data.data.data.length || 0) - deletedCount
-      productList.value = productList.value.map(item => {
-        item.image = item.coverId ? getFileDetail({ file_id: item.coverId }).then(res => res.data.data.url) : ''
+      
+      // 异步获取所有商品的封面图片
+      const imagePromises = productList.value.map(async (item) => {
+        if (item.coverId) {
+          try {
+            const fileRes = await getFileDetail({ file_id: item.coverId })
+            item.image = fileRes.data?.data?.url || ''
+          } catch (error) {
+            console.error('获取商品图片失败:', error)
+            item.image = ''
+          }
+        } else {
+          item.image = ''
+        }
         return item
       })
+      
+      // 等待所有图片加载完成
+      await Promise.all(imagePromises)
       console.log('productList', productList.value)
-
     }
   } catch (error) {
     ElMessage.error('获取商品列表失败')
diff --git a/src/views/profile/UserInfo.vue b/src/views/profile/UserInfo.vue
index a4e080e..af72ee4 100644
--- a/src/views/profile/UserInfo.vue
+++ b/src/views/profile/UserInfo.vue
@@ -184,25 +184,57 @@ import {
   User, Edit, Document, Timer, EditPen, Message, 
   Phone, OfficeBuilding, UploadFilled 
 } from '@element-plus/icons-vue'
+import { useUserStore } from '@/store/userStore.js'
 
 // 是否处于编辑模式
 const isEditing = ref(false)
 const loading = ref(false)
 
+const userStore = useUserStore()
+
+// 从localStorage或store获取用户信息
+const getSavedUserInfo = () => {
+  const savedInfo = userStore.userInfo
+  if (savedInfo && Object.keys(savedInfo).length > 0) {
+    return {
+      username: savedInfo.user_name || '',
+      realName: savedInfo.real_name?.Name || savedInfo.user_name || '',
+      email: savedInfo.email || '',
+      phone: savedInfo.phone || '',
+      department: savedInfo.admin_group?.name || '',
+      position: savedInfo.is_admin ? '管理员' : '普通用户',
+      role: savedInfo.admin_group?.name || '普通用户',
+      createTime: savedInfo.created_at || '',
+      lastLogin: savedInfo.created_at || '',
+      bio: savedInfo.admin_group?.note || '',
+      avatar: savedInfo.cover || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+      sex: savedInfo.sex || '',
+      age: savedInfo.age || '',
+      userId: savedInfo.user_id || '',
+      userGroup: savedInfo.user_group?.Name || ''
+    }
+  }
+  return {
+    username: '',
+    realName: '',
+    email: '',
+    phone: '',
+    department: '',
+    position: '',
+    role: '',
+    createTime: '',
+    lastLogin: '',
+    bio: '',
+    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+    sex: '',
+    age: '',
+    userId: '',
+    userGroup: ''
+  }
+}
+
 // 用户信息数据
-const userInfo = reactive({
-  username: 'admin',
-  realName: '管理员',
-  email: 'admin@example.com',
-  phone: '13800138000',
-  department: '技术部',
-  position: '系统管理员',
-  role: '超级管理员',
-  createTime: '2023-01-01 00:00:00',
-  lastLogin: '2023-06-15 10:30:45',
-  bio: '系统管理员，负责系统的日常维护和管理工作。拥有丰富的系统管理经验，精通Linux服务器配置和维护，熟悉网络安全，对系统性能优化有独到见解。',
-  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
-})
+const userInfo = reactive(getSavedUserInfo())
 
 // 表单数据
 const userForm = reactive({...userInfo})
@@ -296,9 +328,9 @@ const handleAvatarSuccess = (res) => {
 // 获取用户信息
 const fetchUserInfo = async () => {
   try {
-    // 模拟API调用
-    await new Promise(resolve => setTimeout(resolve, 500))
-    // 实际项目中，应该从后端获取用户信息并更新userInfo
+    // 从store获取最新用户信息
+    const savedInfo = getSavedUserInfo()
+    Object.assign(userInfo, savedInfo)
   } catch (error) {
     ElMessage.error('获取用户信息失败')
     console.error(error)
diff --git a/src/views/system/SettingManage.vue b/src/views/system/SettingManage.vue
new file mode 100644
index 0000000..15c682b
--- /dev/null
+++ b/src/views/system/SettingManage.vue
@@ -0,0 +1,918 @@
+<template>
+  <div class="setting-manage-container">
+    <el-card class="main-container" shadow="never">
+      <el-tabs v-model="activeTab" class="setting-tabs">
+        <!-- 配置组管理标签页 -->
+        <el-tab-pane label="配置组管理" name="group">
+          <!-- 搜索和操作栏 -->
+          <div class="filter-section">
+            <div class="filter-content">
+              <el-form :inline="true" :model="groupQueryParams" class="search-form">
+                <el-form-item label="关键词筛选">
+                  <el-input v-model="groupQueryParams.key" placeholder="请输入关键词" clearable style="width: 200px" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="handleGroupQuery">
+                    <el-icon><Search /></el-icon>查询
+                  </el-button>
+                  <el-button @click="resetGroupQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+              <div class="action-bar">
+                <el-button type="primary" @click="handleAddGroup">
+                  <el-icon><Plus /></el-icon>新增配置组
+                </el-button>
+                <el-button type="danger" :disabled="!selectedGroupRows.length" @click="handleBatchDeleteGroup">
+                  <el-icon><Delete /></el-icon>批量删除
+                </el-button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 配置组列表 -->
+          <div class="table-section">
+            <el-table
+              v-loading="groupLoading"
+              :data="groupList"
+              @selection-change="handleGroupSelectionChange"
+              style="width: 100%"
+              :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+            >
+              <el-table-column type="selection" width="55" />
+              <el-table-column prop="id" label="ID" width="80" />
+              <el-table-column prop="name" label="名称" min-width="200" />
+              <el-table-column prop="note" label="备注" min-width="250" show-overflow-tooltip />
+              <el-table-column label="创建时间" width="180">
+                <template #default="{ row }">
+                  {{ formatDate(row.CreatedAt) }}
+                </template>
+              </el-table-column>
+              <el-table-column label="更新时间" width="180">
+                <template #default="{ row }">
+                  {{ formatDate(row.UpdatedAt) }}
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="200" fixed="right">
+                <template #default="{ row }">
+                  <el-button type="primary" link @click="handleEditGroup(row)">编辑</el-button>
+                  <el-button type="success" link @click="viewGroupSettings(row)">查看配置</el-button>
+                  <el-button type="danger" link @click="handleDeleteGroup(row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            
+            <!-- 分页 -->
+            <el-pagination
+              v-model:current-page="groupQueryParams.page"
+              v-model:page-size="groupQueryParams.count"
+              :page-sizes="[10, 20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="groupTotal"
+              @size-change="handleGroupSizeChange"
+              @current-change="handleGroupCurrentChange"
+              background
+              class="pagination"
+            />
+          </div>
+        </el-tab-pane>
+
+        <!-- 配置管理标签页 -->
+        <el-tab-pane label="配置管理" name="setting">
+          <!-- 搜索和操作栏 -->
+          <div class="filter-section">
+            <div class="filter-content">
+              <el-form :inline="true" :model="settingQueryParams" class="search-form">
+                <el-form-item label="配置组">
+                  <el-select v-model="settingQueryParams.group_id" placeholder="请选择配置组" clearable style="width: 200px" @change="handleSettingQuery">
+                    <el-option
+                      v-for="group in allGroupList"
+                      :key="group.id"
+                      :label="group.name"
+                      :value="group.id"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="关键词筛选">
+                  <el-input v-model="settingQueryParams.key" placeholder="请输入关键词" clearable style="width: 200px" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="handleSettingQuery">
+                    <el-icon><Search /></el-icon>查询
+                  </el-button>
+                  <el-button @click="resetSettingQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+              <div class="action-bar">
+                <el-button type="primary" @click="handleAddSetting">
+                  <el-icon><Plus /></el-icon>新增配置
+                </el-button>
+                <el-button type="danger" :disabled="!selectedSettingRows.length" @click="handleBatchDeleteSetting">
+                  <el-icon><Delete /></el-icon>批量删除
+                </el-button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 配置列表 -->
+          <div class="table-section">
+            <el-table
+              v-loading="settingLoading"
+              :data="settingList"
+              @selection-change="handleSettingSelectionChange"
+              style="width: 100%"
+              :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+            >
+              <el-table-column type="selection" width="55" />
+              <el-table-column prop="id" label="ID" width="80" />
+              <el-table-column prop="name" label="名称" min-width="150" />
+              <el-table-column prop="value" label="值" min-width="200" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span v-if="row.type === 'bool'">{{ row.value ? '是' : '否' }}</span>
+                  <span v-else>{{ row.value }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="type" label="类型" width="100">
+                <template #default="{ row }">
+                  <el-tag :type="getTypeColor(row.type)">
+                    {{ row.type || '未知' }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="settingGroupID" label="配置组" width="150" />
+              <el-table-column label="是否开放" width="100">
+                <template #default="{ row }">
+                  <el-switch
+                    v-model="row.open"
+                    @change="handleToggleOpen(row)"
+                    :disabled="toggleLoading === row.id"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column prop="note" label="备注" min-width="200" show-overflow-tooltip />
+              <el-table-column label="创建时间" width="180">
+                <template #default="{ row }">
+                  {{ formatDate(row.CreatedAt) }}
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="150" fixed="right">
+                <template #default="{ row }">
+                  <el-button type="primary" link @click="handleEditSetting(row)">编辑</el-button>
+                  <el-button type="danger" link @click="handleDeleteSetting(row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            
+            <!-- 分页 -->
+            <el-pagination
+              v-model:current-page="settingQueryParams.page"
+              v-model:page-size="settingQueryParams.count"
+              :page-sizes="[10, 20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="settingTotal"
+              @size-change="handleSettingSizeChange"
+              @current-change="handleSettingCurrentChange"
+              background
+              class="pagination"
+            />
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+
+    <!-- 配置组表单对话框 -->
+    <el-dialog
+      v-model="groupDialogVisible"
+      :title="groupDialogTitle"
+      width="500px"
+      destroy-on-close
+    >
+      <el-form
+        ref="groupFormRef"
+        :model="groupForm"
+        :rules="groupRules"
+        label-width="100px"
+      >
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="groupForm.name" placeholder="请输入配置组名称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="note">
+          <el-input
+            v-model="groupForm.note"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入备注信息"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="groupDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitGroupForm">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 配置表单对话框 -->
+    <el-dialog
+      v-model="settingDialogVisible"
+      :title="settingDialogTitle"
+      width="600px"
+      destroy-on-close
+    >
+      <el-form
+        ref="settingFormRef"
+        :model="settingForm"
+        :rules="settingRules"
+        label-width="120px"
+      >
+        <el-form-item label="配置组" prop="settingGroupID">
+          <el-select v-model="settingForm.settingGroupID" placeholder="请选择配置组" style="width: 100%">
+            <el-option
+              v-for="group in allGroupList"
+              :key="group.id"
+              :label="group.name"
+              :value="group.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="settingForm.name" placeholder="请输入配置名称" />
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
+          <el-select v-model="settingForm.type" placeholder="请选择类型" style="width: 100%" @change="handleTypeChange">
+            <el-option label="字符串 (string)" value="string" />
+            <el-option label="整数 (int)" value="int" />
+            <el-option label="浮点数 (float)" value="float" />
+            <el-option label="布尔值 (bool)" value="bool" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="值" prop="value">
+          <el-input
+            v-if="settingForm.type === 'string'"
+            v-model="settingForm.value"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入配置值"
+          />
+          <el-input-number
+            v-else-if="settingForm.type === 'int'"
+            v-model="settingForm.value"
+            :controls="false"
+            placeholder="请输入整数"
+            style="width: 100%"
+          />
+          <el-input-number
+            v-else-if="settingForm.type === 'float'"
+            v-model="settingForm.value"
+            :controls="false"
+            :precision="2"
+            placeholder="请输入浮点数"
+            style="width: 100%"
+          />
+          <el-switch
+            v-else-if="settingForm.type === 'bool'"
+            v-model="settingForm.value"
+          />
+          <el-input
+            v-else
+            v-model="settingForm.value"
+            placeholder="请输入配置值"
+          />
+        </el-form-item>
+        <el-form-item label="是否开放访问">
+          <el-switch v-model="settingForm.open" />
+          <span style="margin-left: 10px; color: #909399; font-size: 12px;">
+            开启后允许公开访问
+          </span>
+        </el-form-item>
+        <el-form-item label="备注" prop="note">
+          <el-input
+            v-model="settingForm.note"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入备注信息"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="settingDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitSettingForm">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, Plus, Delete } from '@element-plus/icons-vue'
+import {
+  getSettingGroupList,
+  getSettingGroupInfo,
+  createSettingGroup,
+  updateSettingGroup,
+  deleteSettingGroup,
+  getSettingList,
+  getSettingInfo,
+  createSetting,
+  updateSetting,
+  setSettingOpen,
+  deleteSetting
+} from '@/api/admin/setting'
+
+const route = useRoute()
+
+// 当前激活的标签页
+const activeTab = ref('group')
+
+// ==================== 配置组相关 ====================
+const groupQueryParams = reactive({
+  key: '',
+  page: 1,
+  count: 10
+})
+
+const groupForm = reactive({
+  id: undefined,
+  name: '',
+  note: ''
+})
+
+const groupRules = {
+  name: [
+    { required: true, message: '请输入配置组名称', trigger: 'blur' }
+  ]
+}
+
+const groupLoading = ref(false)
+const groupList = ref([])
+const allGroupList = ref([]) // 用于下拉选择的完整列表
+const groupTotal = ref(0)
+const selectedGroupRows = ref([])
+const groupDialogVisible = ref(false)
+const groupDialogTitle = ref('新增配置组')
+const groupFormRef = ref(null)
+
+// ==================== 配置相关 ====================
+const settingQueryParams = reactive({
+  group_id: undefined,
+  key: '',
+  page: 1,
+  count: 10
+})
+
+const settingForm = reactive({
+  id: undefined,
+  name: '',
+  value: '',
+  type: 'string',
+  settingGroupID: undefined,
+  open: false,
+  note: ''
+})
+
+const settingRules = {
+  name: [
+    { required: true, message: '请输入配置名称', trigger: 'blur' }
+  ],
+  value: [
+    { required: true, message: '请输入配置值', trigger: 'blur' }
+  ],
+  type: [
+    { required: true, message: '请选择配置类型', trigger: 'change' }
+  ],
+  settingGroupID: [
+    { required: true, message: '请选择配置组', trigger: 'change' }
+  ]
+}
+
+const settingLoading = ref(false)
+const settingList = ref([])
+const settingTotal = ref(0)
+const selectedSettingRows = ref([])
+const settingDialogVisible = ref(false)
+const settingDialogTitle = ref('新增配置')
+const settingFormRef = ref(null)
+const toggleLoading = ref(null)
+
+// 格式化日期时间
+const formatDate = (dateString) => {
+  if (!dateString) return '-'
+  const date = new Date(dateString)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
+// 获取类型颜色
+const getTypeColor = (type) => {
+  const colorMap = {
+    'string': 'primary',
+    'int': 'success',
+    'float': 'warning',
+    'bool': 'info'
+  }
+  return colorMap[type] || ''
+}
+
+// ==================== 配置组方法 ====================
+const fetchGroupList = async () => {
+  groupLoading.value = true
+  try {
+    const res = await getSettingGroupList(groupQueryParams)
+    if (res.data.code === 200) {
+      groupList.value = res.data.data.data || []
+      groupTotal.value = res.data.data.all_count || 0
+    }
+  } catch (error) {
+    console.error('获取配置组列表失败:', error)
+    ElMessage.error('获取配置组列表失败')
+  } finally {
+    groupLoading.value = false
+  }
+}
+
+const fetchAllGroupList = async () => {
+  try {
+    const res = await getSettingGroupList({ page: 1, count: 1000 })
+    if (res.data.code === 200) {
+      allGroupList.value = res.data.data.data || []
+    }
+  } catch (error) {
+    console.error('获取配置组列表失败:', error)
+  }
+}
+
+const handleGroupQuery = () => {
+  groupQueryParams.page = 1
+  fetchGroupList()
+}
+
+const resetGroupQuery = () => {
+  groupQueryParams.key = ''
+  groupQueryParams.page = 1
+  fetchGroupList()
+}
+
+const handleGroupSelectionChange = (selection) => {
+  selectedGroupRows.value = selection
+}
+
+const handleGroupSizeChange = (size) => {
+  groupQueryParams.count = size
+  fetchGroupList()
+}
+
+const handleGroupCurrentChange = (page) => {
+  groupQueryParams.page = page
+  fetchGroupList()
+}
+
+const handleAddGroup = () => {
+  groupDialogTitle.value = '新增配置组'
+  Object.assign(groupForm, {
+    id: undefined,
+    name: '',
+    note: ''
+  })
+  groupDialogVisible.value = true
+}
+
+const handleEditGroup = async (row) => {
+  groupDialogTitle.value = '编辑配置组'
+  try {
+    const res = await getSettingGroupInfo({ setting_group_id: row.id })
+    if (res.data.code === 200) {
+      Object.assign(groupForm, {
+        id: res.data.data.id,
+        name: res.data.data.name || '',
+        note: res.data.data.note || ''
+      })
+      groupDialogVisible.value = true
+    }
+  } catch (error) {
+    console.error('获取配置组详情失败:', error)
+    ElMessage.error('获取配置组详情失败')
+  }
+}
+
+const viewGroupSettings = (row) => {
+  activeTab.value = 'setting'
+  settingQueryParams.group_id = row.id
+  fetchSettingList()
+}
+
+const handleDeleteGroup = (row) => {
+  ElMessageBox.confirm(`确认删除配置组 "${row.name}" 吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await deleteSettingGroup({ setting_group_id: row.id })
+      if (res.data.code === 200) {
+        ElMessage.success('删除成功')
+        fetchGroupList()
+        fetchAllGroupList()
+      }
+    } catch (error) {
+      console.error('删除失败:', error)
+      ElMessage.error(error.response?.data?.message || '删除失败')
+    }
+  }).catch(() => {})
+}
+
+const handleBatchDeleteGroup = () => {
+  if (selectedGroupRows.value.length === 0) {
+    ElMessage.warning('请至少选择一条记录')
+    return
+  }
+  ElMessageBox.confirm(`确认删除选中的 ${selectedGroupRows.value.length} 条记录吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const deletePromises = selectedGroupRows.value.map(row => 
+        deleteSettingGroup({ setting_group_id: row.id })
+      )
+      await Promise.all(deletePromises)
+      ElMessage.success('批量删除成功')
+      fetchGroupList()
+      fetchAllGroupList()
+    } catch (error) {
+      console.error('批量删除失败:', error)
+      ElMessage.error('批量删除失败')
+    }
+  }).catch(() => {})
+}
+
+const submitGroupForm = () => {
+  groupFormRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        const submitData = {
+          name: groupForm.name,
+          note: groupForm.note
+        }
+        if (groupForm.id) {
+          submitData.id = groupForm.id
+        }
+        const res = groupForm.id 
+          ? await updateSettingGroup(submitData)
+          : await createSettingGroup(submitData)
+        if (res.data.code === 200) {
+          ElMessage.success(groupForm.id ? '修改成功' : '创建成功')
+          groupDialogVisible.value = false
+          fetchGroupList()
+          fetchAllGroupList()
+        }
+      } catch (error) {
+        console.error('提交失败:', error)
+        ElMessage.error(error.response?.data?.message || '提交失败')
+      }
+    }
+  })
+}
+
+// ==================== 配置方法 ====================
+const fetchSettingList = async () => {
+  settingLoading.value = true
+  try {
+    const params = { ...settingQueryParams }
+    if (!params.group_id) {
+      delete params.group_id
+    }
+    const res = await getSettingList(params)
+    if (res.data.code === 200) {
+      settingList.value = res.data.data.data || []
+      settingTotal.value = res.data.data.all_count || 0
+    }
+  } catch (error) {
+    console.error('获取配置列表失败:', error)
+    ElMessage.error('获取配置列表失败')
+  } finally {
+    settingLoading.value = false
+  }
+}
+
+const handleSettingQuery = () => {
+  settingQueryParams.page = 1
+  fetchSettingList()
+}
+
+const resetSettingQuery = () => {
+  settingQueryParams.group_id = undefined
+  settingQueryParams.key = ''
+  settingQueryParams.page = 1
+  fetchSettingList()
+}
+
+const handleSettingSelectionChange = (selection) => {
+  selectedSettingRows.value = selection
+}
+
+const handleSettingSizeChange = (size) => {
+  settingQueryParams.count = size
+  fetchSettingList()
+}
+
+const handleSettingCurrentChange = (page) => {
+  settingQueryParams.page = page
+  fetchSettingList()
+}
+
+const handleTypeChange = (type) => {
+  if (type === 'bool') {
+    settingForm.value = false
+  } else if (type === 'int' || type === 'float') {
+    settingForm.value = 0
+  } else {
+    settingForm.value = ''
+  }
+}
+
+const handleAddSetting = () => {
+  settingDialogTitle.value = '新增配置'
+  Object.assign(settingForm, {
+    id: undefined,
+    name: '',
+    value: '',
+    type: 'string',
+    settingGroupID: settingQueryParams.group_id || undefined,
+    open: false,
+    note: ''
+  })
+  settingDialogVisible.value = true
+}
+
+const handleEditSetting = async (row) => {
+  settingDialogTitle.value = '编辑配置'
+  try {
+    const res = await getSettingInfo({ id: row.id })
+    if (res.data.code === 200) {
+      const data = res.data.data
+      Object.assign(settingForm, {
+        id: data.id,
+        name: data.name || '',
+        value: data.value,
+        type: data.type || 'string',
+        settingGroupID: data.settingGroupID,
+        open: data.open || false,
+        note: data.note || ''
+      })
+      if (data.type === 'bool') {
+        settingForm.value = data.value === true || data.value === 'true' || data.value === 1
+      } else if (data.type === 'int') {
+        settingForm.value = parseInt(data.value) || 0
+      } else if (data.type === 'float') {
+        settingForm.value = parseFloat(data.value) || 0
+      }
+      settingDialogVisible.value = true
+    }
+  } catch (error) {
+    console.error('获取配置详情失败:', error)
+    ElMessage.error('获取配置详情失败')
+  }
+}
+
+const handleToggleOpen = async (row) => {
+  toggleLoading.value = row.id
+  try {
+    const res = await setSettingOpen({
+      id: row.id,
+      open: row.open
+    })
+    if (res.data.code === 200) {
+      ElMessage.success('修改成功')
+    } else {
+      row.open = !row.open
+      ElMessage.error(res.data.message || '修改失败')
+    }
+  } catch (error) {
+    row.open = !row.open
+    console.error('修改失败:', error)
+    ElMessage.error(error.response?.data?.message || '修改失败')
+  } finally {
+    toggleLoading.value = null
+  }
+}
+
+const handleDeleteSetting = (row) => {
+  ElMessageBox.confirm(`确认删除配置 "${row.name}" 吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await deleteSetting({ id: row.id })
+      if (res.data.code === 200) {
+        ElMessage.success('删除成功')
+        fetchSettingList()
+      }
+    } catch (error) {
+      console.error('删除失败:', error)
+      ElMessage.error(error.response?.data?.message || '删除失败')
+    }
+  }).catch(() => {})
+}
+
+const handleBatchDeleteSetting = () => {
+  if (selectedSettingRows.value.length === 0) {
+    ElMessage.warning('请至少选择一条记录')
+    return
+  }
+  ElMessageBox.confirm(`确认删除选中的 ${selectedSettingRows.value.length} 条记录吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const deletePromises = selectedSettingRows.value.map(row => 
+        deleteSetting({ id: row.id })
+      )
+      await Promise.all(deletePromises)
+      ElMessage.success('批量删除成功')
+      fetchSettingList()
+    } catch (error) {
+      console.error('批量删除失败:', error)
+      ElMessage.error('批量删除失败')
+    }
+  }).catch(() => {})
+}
+
+const submitSettingForm = () => {
+  settingFormRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        const submitData = {
+          name: settingForm.name,
+          value: String(settingForm.value),
+          type: settingForm.type,
+          setting_group_id: settingForm.settingGroupID,
+          open: settingForm.open,
+          note: settingForm.note
+        }
+        if (settingForm.id) {
+          submitData.id = settingForm.id
+        }
+        const res = settingForm.id 
+          ? await updateSetting(submitData)
+          : await createSetting(submitData)
+        if (res.data.code === 200) {
+          ElMessage.success(settingForm.id ? '修改成功' : '创建成功')
+          settingDialogVisible.value = false
+          fetchSettingList()
+        }
+      } catch (error) {
+        console.error('提交失败:', error)
+        ElMessage.error(error.response?.data?.message || '提交失败')
+      }
+    }
+  })
+}
+
+// 监听标签页切换
+watch(activeTab, (newVal) => {
+  if (newVal === 'group') {
+    fetchGroupList()
+  } else if (newVal === 'setting') {
+    fetchSettingList()
+  }
+})
+
+// 初始化
+onMounted(() => {
+  fetchGroupList()
+  fetchAllGroupList()
+  
+  // 检查路由参数决定初始标签页
+  if (route.query.tab === 'setting') {
+    activeTab.value = 'setting'
+    fetchSettingList()
+  }
+})
+</script>
+
+<style scoped>
+.setting-manage-container {
+  padding: 0;
+}
+
+.main-container {
+  border: 1px solid #e1e8ed;
+  background: #ffffff;
+}
+
+.setting-tabs {
+  padding: 0 20px;
+}
+
+.filter-section {
+  padding: 0;
+  border-bottom: 1px solid #e1e8ed;
+  background: #fafbfc;
+  margin: 0 -20px;
+}
+
+.filter-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.search-form {
+  margin: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.search-form :deep(.el-form-item) {
+  margin-bottom: 0;
+  margin-right: 12px;
+}
+
+.action-bar {
+  display: flex;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.table-section {
+  padding: 20px 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  padding: 16px 0;
+  border-top: 1px solid #e1e8ed;
+  justify-content: flex-end;
+}
+
+/* 表格样式优化 */
+:deep(.el-table) {
+  border: none;
+  color: #2c3e50;
+}
+
+:deep(.el-table__header) {
+  background: #f8f9fa;
+}
+
+:deep(.el-table th) {
+  background: #f8f9fa !important;
+  border-bottom: 2px solid #e1e8ed;
+  color: #2c3e50;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+:deep(.el-table td) {
+  border-bottom: 1px solid #f0f2f5;
+  color: #34495e;
+}
+
+:deep(.el-table tr:hover > td) {
+  background-color: #f8f9fa !important;
+}
+
+:deep(.el-card__body) {
+  padding: 0;
+}
+
+:deep(.el-tabs__header) {
+  margin: 0;
+  padding: 0 0 0 0;
+  border-bottom: 1px solid #e1e8ed;
+}
+
+:deep(.el-tabs__nav-wrap::after) {
+  display: none;
+}
+
+:deep(.el-tabs__item) {
+  padding: 0 20px;
+  height: 50px;
+  line-height: 50px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+:deep(.el-tabs__item.is-active) {
+  color: #2c3e50;
+  font-weight: 600;
+}
+
+:deep(.el-tabs__active-bar) {
+  background-color: #2c3e50;
+}
+</style>
diff --git a/src/views/system/SystemFile.vue b/src/views/system/SystemFile.vue
index 78b6d17..b5d1f66 100644
--- a/src/views/system/SystemFile.vue
+++ b/src/views/system/SystemFile.vue
@@ -56,7 +56,7 @@
           </el-table-column>
           <el-table-column prop="type" label="文件类型" width="120">
             <template #default="{ row }">
-              <el-tag :type="getFileTypeColor(row.type)">
+              <el-tag :type="getFileTypeColor(row.type, row.url, row.realName)">
                 {{ row.type || '未知' }}
               </el-tag>
             </template>
@@ -112,7 +112,7 @@
           <div class="preview-label">文件预览</div>
           <div class="preview-content">
             <el-image
-              v-if="isImageFile(fileDetail.type) && fileDetail.url"
+              v-if="isImageFile(fileDetail.type, fileDetail.url, fileDetail.realName) && fileDetail.url"
               :src="fileDetail.url"
               fit="contain"
               style="max-width: 100%; max-height: 400px; border-radius: 8px;"
@@ -140,7 +140,7 @@
           <el-descriptions-item label="真实文件名" label-align="right" :span="2">{{ fileDetail.realName }}</el-descriptions-item>
           <el-descriptions-item label="保存名称" label-align="right">{{ fileDetail.saveName }}</el-descriptions-item>
           <el-descriptions-item label="文件类型" label-align="right">
-            <el-tag :type="getFileTypeColor(fileDetail.type)">{{ fileDetail.type || '未知' }}</el-tag>
+            <el-tag :type="getFileTypeColor(fileDetail.type, fileDetail.url, fileDetail.realName)">{{ fileDetail.type || '未知' }}</el-tag>
           </el-descriptions-item>
           <el-descriptions-item label="文件大小" label-align="right">{{ formatFileSize(fileDetail.size) }}</el-descriptions-item>
           <el-descriptions-item label="是否公开" label-align="right">
@@ -302,14 +302,37 @@ const uploadForm = reactive({
 const uploadFileList = ref([])
 
 // 判断是否为图片文件
-const isImageFile = (type) => {
-  const imageTypes = ['cover', 'image', 'avatar', 'photo', 'picture']
-  return imageTypes.includes(type?.toLowerCase())
+const isImageFile = (type, url, realName) => {
+  // 检查type字段
+  const imageTypes = ['cover', 'image', 'avatar', 'photo', 'picture', 'work_order']
+  if (type && imageTypes.includes(type?.toLowerCase())) {
+    return true
+  }
+  
+  // 检查文件扩展名
+  if (realName) {
+    const extension = realName.split('.').pop()?.toLowerCase()
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico']
+    if (extension && imageExtensions.includes(extension)) {
+      return true
+    }
+  }
+  
+  // 检查URL中的文件扩展名
+  if (url) {
+    const urlExtension = url.split('.').pop()?.toLowerCase().split('?')[0]
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico']
+    if (urlExtension && imageExtensions.includes(urlExtension)) {
+      return true
+    }
+  }
+  
+  return false
 }
 
 // 获取文件类型颜色
-const getFileTypeColor = (type) => {
-  if (isImageFile(type)) return 'success'
+const getFileTypeColor = (type, url, realName) => {
+  if (isImageFile(type, url, realName)) return 'success'
   const colorMap = {
     'document': 'primary',
     'video': 'warning',
@@ -394,8 +417,12 @@ const handleView = async (row) => {
     const res = await getFileDetail({ file_id: row.id })
     console.log('文件详情数据:', res.data)
     if (res.data.code === 200) {
-      fileDetail.value = res.data.data.data
-      fileDetail.value.url = res.data.data.url
+      // 确保正确设置文件详情和URL
+      const fileData = res.data.data.data || res.data.data
+      fileDetail.value = {
+        ...fileData,
+        url: fileData.url || res.data.data.url || ''
+      }
       detailDialogVisible.value = true
     }
   } catch (error) {
@@ -597,7 +624,7 @@ const handleCustomUpload = async (options) => {
 
     // 根据返回码严格区分成功和失败
     if (res && res.data && res.data.code === 200) {
-      onSuccess(res.data.data, file)
+      console.log("上传成功")
     } else {
       const errorMsg = res?.data?.message || res?.data?.msg || '上传失败'
       const error = new Error(errorMsg)
@@ -612,13 +639,9 @@ const handleCustomUpload = async (options) => {
 
 // 上传成功
 const handleUploadSuccess = (response, file, fileList) => {
-  console.log('上传成功文件:', file)
-console.log('上传成功文件列表：',fileList)
 
 
-  // 成功回调只会在 code === 200 时触发
-  // ElMessage.success(`文件 ${file.name} 上传成功`)
-  // 更新文件列表状态
+
   uploadFileList.value = fileList
   // 如果所有文件都上传成功，关闭对话框并刷新列表
   const allSuccess = fileList.every(f => f.status === 'success')
diff --git a/src/views/user/UserDetail.vue b/src/views/user/UserDetail.vue
index ce4b548..a9afbab 100644
--- a/src/views/user/UserDetail.vue
+++ b/src/views/user/UserDetail.vue
@@ -44,24 +44,32 @@
               </div>
             </div>
           </div>
-          
-          <div class="profile-stats">
-             <div class="stat-item">
-               <div class="stat-label">实名状态</div>
-               <div class="stat-value">
-                 <el-tag :type="userInfo.RealName?.Status === 1 ? 'success' : 'warning'" size="small" effect="light">
-                   {{ getRealNameStatusText(userInfo.RealName?.Status) }}
-                 </el-tag>
-               </div>
-             </div>
-             <div class="stat-item">
-               <div class="stat-label">推荐人ID</div>
-               <div class="stat-value">{{ userInfo.RecommendUserId || '-' }}</div>
-             </div>
-             <div class="stat-item">
-               <div class="stat-label">用户组ID</div>
-               <div class="stat-value">{{ userInfo.UserGroupId || '-' }}</div>
-             </div>
+          <!-- 统一的用户数据概览区域 -->
+          <div class="profile-stats-unified">
+            <!-- 余额数据 -->
+            <div class="stat-item" v-for="balance in userBalanceList" :key="balance.id">
+              <div class="stat-label">{{ balance.typeName }}</div>
+              <div class="stat-value" :style="{ color: balance.typeColor }">{{ formatBalance(balance.price) }}</div>
+            </div>
+            <!-- 分隔线 -->
+            <el-divider direction="vertical" v-if="userBalanceList.length > 0" class="stats-divider" />
+            <!-- 其他状态数据 -->
+            <div class="stat-item">
+              <div class="stat-label">实名状态</div>
+              <div class="stat-value">
+                <el-tag :type="userInfo.RealName?.Status === 1 ? 'success' : 'warning'" size="small" effect="light">
+                  {{ getRealNameStatusText(userInfo.RealName?.Status) }}
+                </el-tag>
+              </div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">推荐人ID</div>
+              <div class="stat-value">{{ userInfo.RecommendUserId || '-' }}</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">用户组ID</div>
+              <div class="stat-value">{{ userInfo.UserGroupId || '-' }}</div>
+            </div>
           </div>
         </div>
         
@@ -298,19 +306,34 @@
           </el-select>
         </el-form-item>
         <el-form-item label="推荐人">
-          <div class="recommend-user-selector">
-            <div class="selected-user" v-if="recommendUserInfo.UserId">
-              <el-avatar :size="32" :src="recommendUserInfo.Avatar" />
-              <span class="user-name">{{ recommendUserInfo.UserName }}</span>
-              <span class="user-id">(ID: {{ recommendUserInfo.UserId }})</span>
-              <el-button type="danger" link size="small" @click="clearRecommendUser">
-                <el-icon><Close /></el-icon>
+          <el-input
+            v-if="recommendUserInfo.UserId"
+            :model-value="`${recommendUserInfo.UserName} (ID: ${recommendUserInfo.UserId})`"
+            readonly
+            style="width: 100%"
+          >
+            <template #suffix>
+              <el-icon class="clear-icon" @click="clearRecommendUser"><Close /></el-icon>
+            </template>
+            <template #append>
+              <el-button @click="showUserSelectorDialog = true">
+                <el-icon><User /></el-icon>
               </el-button>
-            </div>
-            <el-button v-else type="primary" plain @click="showUserSelectorDialog = true">
-              <el-icon><User /></el-icon> 选择推荐人
-            </el-button>
-          </div>
+            </template>
+          </el-input>
+          <el-input
+            v-else
+            placeholder="请选择推荐人"
+            readonly
+            style="width: 100%"
+            @click="showUserSelectorDialog = true"
+          >
+            <template #append>
+              <el-button @click="showUserSelectorDialog = true">
+                <el-icon><User /></el-icon>
+              </el-button>
+            </template>
+          </el-input>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -559,6 +582,16 @@ const userBalance = ref({
   total_consume: 0
 })
 
+// 用户余额列表（用于概览卡片展示）
+const userBalanceList = ref([])
+
+// 余额类型映射
+const balanceTypeMap = {
+  entity: { name: '云钻', type: 'cloud_diamond', color: '#409EFF' },
+  general: { name: '云币', type: 'cloud_coin', color: '#67C23A' },
+  withdraw: { name: '云点', type: 'cloud_points', color: '#E6A23C' }
+}
+
 // 编辑用户相关
 const editDialogVisible = ref(false)
 const editForm = reactive({
@@ -684,6 +717,8 @@ const fetchUserInfo = async () => {
       if (userInfo.value.CoverID) {
         fetchCurrentAvatar(userInfo.value.CoverID)
       }
+      // 获取用户余额列表
+      fetchUserBalanceList(userId)
     }
   } catch (error) {
     ElMessage.error('获取用户信息失败')
@@ -692,6 +727,25 @@ const fetchUserInfo = async () => {
   }
 }
 
+// 获取用户余额列表（用于概览卡片展示）
+const fetchUserBalanceList = async (userId) => {
+  try {
+    const res = await getUserBalanceCount({ user_id: userId })
+    if (res.data.code === 200) {
+      // 只保留映射类型中存在的余额
+      userBalanceList.value = (res.data.data || []).filter(item => {
+        return balanceTypeMap[item.type]
+      }).map(item => ({
+        ...item,
+        typeName: balanceTypeMap[item.type]?.name || item.type,
+        typeColor:  '#000000'
+      }))
+    }
+  } catch (error) {
+    console.error('获取用户余额失败:', error)
+  }
+}
+
 // 刷新数据
 const refreshData = () => {
   fetchUserInfo()
@@ -1038,7 +1092,7 @@ const handleViewOrder = (row) => {
 const handleViewTicket = (row) => {
   router.push({
     path: '/ticket/detail',
-    query: { work_id: row.work_id }
+    query: { id: row.work_id }
   })
 }
 
@@ -1286,6 +1340,12 @@ const formatDate = (dateString) => {
   })
 }
 
+// 余额格式化（分转元，保留2位小数）
+const formatBalance = (price) => {
+  if (price === undefined || price === null) return '0.00'
+  return (price / 100).toFixed(2)
+}
+
 const loadUserData = async () => {  
   if(!route.query.user_id){
     ElMessage.error('缺少用户ID参数');
@@ -1375,6 +1435,7 @@ onActivated(() => {
   display: flex;
   align-items: center;
   gap: 24px;
+  flex-shrink: 0;
 }
 
 .avatar-wrapper {
@@ -1435,27 +1496,37 @@ onActivated(() => {
   margin-left: 4px;
 }
 
-.profile-stats {
+/* 统一的用户数据概览区域 */
+.profile-stats-unified {
   display: flex;
-  gap: 32px;
+  align-items: center;
+  gap: 24px;
+  margin-left: auto;
+  flex-wrap: wrap;
 }
 
-.stat-item {
+.profile-stats-unified .stat-item {
   text-align: center;
+  min-width: 70px;
 }
 
-.stat-label {
+.profile-stats-unified .stat-label {
   font-size: 12px;
   color: #909399;
   margin-bottom: 4px;
 }
 
-.stat-value {
+.profile-stats-unified .stat-value {
   font-size: 16px;
   font-weight: 600;
   color: #303133;
 }
 
+.stats-divider {
+  height: 40px;
+  margin: 0 8px;
+}
+
 .action-divider {
   margin: 0 0 20px 0;
 }
@@ -1540,28 +1611,15 @@ onActivated(() => {
 }
 
 /* 推荐人选择器 */
-.recommend-user-selector {
-  width: 100%;
-}
-
-.selected-user {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  background: #f5f7fa;
-  border-radius: 6px;
-  border: 1px solid #e4e7ed;
-}
-
-.selected-user .user-name {
-  font-weight: 500;
-  color: #303133;
-}
-
-.selected-user .user-id {
+/* 推荐人选择器样式 */
+.clear-icon {
+  cursor: pointer;
   color: #909399;
-  font-size: 12px;
+  transition: color 0.2s;
+}
+
+.clear-icon:hover {
+  color: #f56c6c;
 }
 
 
@@ -1671,12 +1729,17 @@ onActivated(() => {
     gap: 20px;
   }
   
-  .profile-stats {
+  .profile-stats-unified {
     width: 100%;
-    justify-content: space-around;
+    justify-content: flex-start;
     background: #f9fafc;
     padding: 16px;
     border-radius: 8px;
+    margin-left: 0;
+  }
+  
+  .stats-divider {
+    display: none;
   }
   
   .balance-overview {
@@ -1688,5 +1751,13 @@ onActivated(() => {
   .balance-overview {
     grid-template-columns: 1fr;
   }
+  
+  .profile-stats-unified {
+    gap: 16px;
+  }
+  
+  .profile-stats-unified .stat-item {
+    min-width: 60px;
+  }
 }
 </style>
diff --git a/src/views/user/UserGroup.vue b/src/views/user/UserGroup.vue
index db105d0..66b9aba 100644
--- a/src/views/user/UserGroup.vue
+++ b/src/views/user/UserGroup.vue
@@ -141,20 +141,34 @@
           <el-input v-model="groupForm.auth" type="textarea" :rows="4" placeholder="请输入权限配置（JSON格式）" />
         </el-form-item>
         <el-form-item label="下一级用户组ID">
-          <div class="selector-field">
-            <div class="selector-info" v-if="selectedHigherGroupInfo">
-              <el-tag type="primary" effect="plain">
-                ID: {{ groupForm.higher_level_id }} - {{ selectedHigherGroupInfo.group_name || selectedHigherGroupInfo.name }}
-              </el-tag>
-            </div>
-            <div class="selector-actions">
-              <el-button type="primary" @click="groupSelectorVisible = true">
+          <el-input
+            v-if="selectedHigherGroupInfo"
+            :model-value="`${selectedHigherGroupInfo.Name || selectedHigherGroupInfo.name} (ID: ${groupForm.higher_level_id})`"
+            readonly
+            style="width: 100%"
+          >
+            <template #suffix>
+              <el-icon class="clear-icon" @click="clearHigherGroup"><Close /></el-icon>
+            </template>
+            <template #append>
+              <el-button @click="groupSelectorVisible = true">
                 <el-icon><Connection /></el-icon>
-                {{ groupForm.higher_level_id ? '更换用户组' : '选择用户组' }}
               </el-button>
-              <el-button v-if="groupForm.higher_level_id" @click="clearHigherGroup">清除</el-button>
-            </div>
-          </div>
+            </template>
+          </el-input>
+          <el-input
+            v-else
+            placeholder="请选择下一级用户组（可选）"
+            readonly
+            style="width: 100%"
+            @click="groupSelectorVisible = true"
+          >
+            <template #append>
+              <el-button @click="groupSelectorVisible = true">
+                <el-icon><Connection /></el-icon>
+              </el-button>
+            </template>
+          </el-input>
         </el-form-item>
         
         <!-- 用户组选择器 -->
@@ -274,7 +288,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Refresh, Edit, User, Delete, Connection } from '@element-plus/icons-vue'
+import { Plus, Refresh, Edit, User, Delete, Connection, Close } from '@element-plus/icons-vue'
 import { 
   getUserGroupList, 
   getUserGroupMemberList, 
@@ -747,22 +761,14 @@ onMounted(() => {
   100% { background-position: -200% 0; }
 }
 
-/* 选择器字段样式 */
-.selector-field {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
+/* 选择器清除图标样式 */
+.clear-icon {
+  cursor: pointer;
+  color: #909399;
+  transition: color 0.2s;
 }
 
-.selector-info {
-  display: flex;
-  align-items: center;
-}
-
-.selector-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
+.clear-icon:hover {
+  color: #f56c6c;
 }
 </style>
diff --git a/src/views/user/UserList.vue b/src/views/user/UserList.vue
index 1579a86..7ebe8ba 100644
--- a/src/views/user/UserList.vue
+++ b/src/views/user/UserList.vue
@@ -4,35 +4,42 @@
     <el-card class="main-container" shadow="never">
       <!-- 搜索和操作栏 -->
       <div class="filter-section">
-        <div class="filter-content">
-          <el-form :inline="true" :model="queryParams" class="search-form">
-            <el-form-item label="关键字">
-              <el-input v-model="queryParams.key" placeholder="请输入用户名/邮箱" clearable style="width: 200px" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleQuery">
-                <el-icon><Search /></el-icon>查询
-              </el-button>
-              <el-button @click="resetQuery">重置</el-button>
-              <el-button type="success" @click="fetchUserList">
-                <el-icon><Refresh /></el-icon>刷新
-              </el-button>
-            </el-form-item>
-            <el-form-item label="用户ID">
-              <el-input 
-                v-model="jumpUserId" 
-                placeholder="输入用户ID跳转" 
-                clearable 
-                style="width: 150px"
-                @keyup.enter="handleJumpToUser"
-              />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="warning" @click="handleJumpToUser">
-                <el-icon><Position /></el-icon>跳转
-              </el-button>
-            </el-form-item>
-          </el-form>
+        <!-- 第一行：搜索区域 -->
+        <div class="filter-row search-row">
+          <div class="search-group">
+            <span class="search-label">关键字</span>
+            <el-input 
+              v-model="queryParams.key" 
+              placeholder="请输入用户名/邮箱" 
+              clearable 
+              class="search-input"
+            />
+          </div>
+          <div class="search-group">
+            <span class="search-label">用户ID</span>
+            <el-input 
+              v-model="jumpUserId" 
+              placeholder="输入ID跳转" 
+              clearable 
+              class="search-input-small"
+              @keyup.enter="handleJumpToUser"
+            />
+          </div>
+          <div class="search-buttons">
+            <el-button type="primary" @click="handleQuery">
+              <el-icon><Search /></el-icon><span class="btn-text">查询</span>
+            </el-button>
+            <el-button @click="resetQuery">重置</el-button>
+            <el-button type="success" @click="fetchUserList">
+              <el-icon><Refresh /></el-icon><span class="btn-text">刷新</span>
+            </el-button>
+            <el-button type="warning" @click="handleJumpToUser">
+              <el-icon><Position /></el-icon><span class="btn-text">跳转</span>
+            </el-button>
+          </div>
+        </div>
+        <!-- 第二行：操作栏 -->
+        <div class="filter-row action-row">
           <div class="action-bar">
             <el-button type="primary" @click="handleAdd">
               <el-icon><Plus /></el-icon>新增用户
@@ -70,12 +77,69 @@
           <div class="skeleton-cell skeleton-action"></div>
         </div>
       </div>
-      <!-- 数据表格 -->
+      
+      <!-- 移动端卡片列表 -->
+      <div v-else class="mobile-card-list">
+        <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" />
+            <div class="card-user-info">
+              <div class="card-username">{{ row.UserName }}</div>
+              <div class="card-email">{{ row.Email || '未设置邮箱' }}</div>
+            </div>
+            <el-tag :type="row.IsDeleted ? 'danger' : 'success'" size="small">
+              {{ row.IsDeleted ? '已删除' : '正常' }}
+            </el-tag>
+          </div>
+          <div class="card-body">
+            <div class="card-info-row">
+              <span class="card-label">用户ID:</span>
+              <span class="card-value">{{ row.UserId }}</span>
+            </div>
+            <div class="card-info-row">
+              <span class="card-label">手机号:</span>
+              <span class="card-value">{{ row.Phone || '未设置' }}</span>
+            </div>
+            <div class="card-info-row">
+              <span class="card-label">用户组:</span>
+              <span class="card-value">{{ row.UserGroup?.Name || '默认用户组' }}</span>
+            </div>
+            <div class="card-info-row">
+              <span class="card-label">实名:</span>
+              <span class="card-value">{{ row.RealName?.Name || '未实名' }}</span>
+            </div>
+            <div class="card-info-row">
+              <span class="card-label">注册时间:</span>
+              <span class="card-value">{{ formatDate(row.CreatedAt) }}</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <el-button type="primary" size="small" @click="handleUserDetail(row)">详情</el-button>
+            <el-dropdown trigger="click" @command="(command) => handleCommand(command, row)">
+              <el-button size="small">更多<el-icon><ArrowDown /></el-icon></el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="edit">编辑用户</el-dropdown-item>
+                  <el-dropdown-item command="avatar">修改头像</el-dropdown-item>
+                  <el-dropdown-item command="password">修改密码</el-dropdown-item>
+                  <el-dropdown-item command="group">修改用户组</el-dropdown-item>
+                  <el-dropdown-item command="realname">实名信息</el-dropdown-item>
+                  <el-dropdown-item command="balance">余额管理</el-dropdown-item>
+                  <el-dropdown-item command="delete" divided>删除用户</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 数据表格（PC端） -->
       <el-table
-        v-else
+        v-if="!loading"
         :data="userList"
         @selection-change="handleSelectionChange"
-        style="width: 100%"
+        class="desktop-table"
         :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
       >
         <el-table-column type="selection" width="55" />
@@ -969,52 +1033,276 @@ onMounted(() => {
   background: #fafbfc;
 }
 
-.filter-content {
+.filter-row {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 16px 20px;
-  gap: 20px;
+  padding: 12px 20px;
+  gap: 16px;
   flex-wrap: wrap;
 }
 
-.search-form {
-  margin: 0;
-  flex: 1;
+.filter-row:not(:last-child) {
+  border-bottom: 1px solid #ebeef5;
+}
+
+.search-row {
+  padding: 16px 20px;
+}
+
+.action-row {
+  padding: 12px 20px;
+  background: #fff;
+}
+
+.search-group {
   display: flex;
   align-items: center;
-  gap: 12px;
-  min-width: 400px;
+  gap: 8px;
 }
 
-.search-form :deep(.el-form-item) {
-  margin-bottom: 0;
-}
-
-.search-form :deep(.el-form-item__label) {
-  margin-right: 8px;
+.search-label {
+  font-size: 14px;
+  color: #606266;
   white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.search-input {
+  width: 200px;
+}
+
+.search-input-small {
+  width: 140px;
+}
+
+.search-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.btn-text {
+  margin-left: 4px;
 }
 
 .action-bar {
   display: flex;
   gap: 12px;
+  flex-wrap: wrap;
+}
+
+/* 移动端卡片列表样式 */
+.mobile-card-list {
+  display: none;
+  padding: 16px;
+  gap: 16px;
+}
+
+.user-card {
+  background: #fff;
+  border: 1px solid #e1e8ed;
+  padding: 16px;
+  margin-bottom: 12px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.card-avatar {
   flex-shrink: 0;
 }
 
-@media (max-width: 768px) {
-  .filter-content {
+.card-user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.card-username {
+  font-size: 16px;
+  font-weight: 600;
+  color: #2c3e50;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-email {
+  font-size: 12px;
+  color: #909399;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-body {
+  padding: 12px 0;
+}
+
+.card-info-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 0;
+  font-size: 13px;
+}
+
+.card-label {
+  color: #909399;
+  flex-shrink: 0;
+}
+
+.card-value {
+  color: #2c3e50;
+  text-align: right;
+  word-break: break-all;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f2f5;
+}
+
+/* PC端表格显示 */
+.desktop-table {
+  display: table;
+  width: 100%;
+}
+
+/* 平板适配 */
+@media (max-width: 1024px) {
+  .search-row {
     flex-direction: column;
     align-items: stretch;
+    gap: 12px;
   }
   
-  .search-form {
-    min-width: 100%;
+  .search-group {
+    width: 100%;
+  }
+  
+  .search-input,
+  .search-input-small {
+    flex: 1;
+    width: auto !important;
+  }
+  
+  .search-buttons {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .filter-row {
+    padding: 12px 16px;
+  }
+  
+  .search-row {
+    padding: 12px 16px;
+    gap: 10px;
+  }
+  
+  .action-row {
+    padding: 10px 16px;
+  }
+  
+  .search-group {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+  
+  .search-label {
+    font-size: 13px;
+  }
+  
+  .search-input,
+  .search-input-small {
+    width: 100% !important;
+  }
+  
+  .search-buttons {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+    width: 100%;
+  }
+  
+  .search-buttons .el-button {
+    margin: 0;
+    width: 100%;
+  }
+  
+  .btn-text {
+    display: none;
   }
   
   .action-bar {
     width: 100%;
-    justify-content: flex-end;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+  
+  .action-bar .el-button {
+    margin: 0;
+    width: 100%;
+  }
+  
+  /* 移动端显示卡片，隐藏表格 */
+  .mobile-card-list {
+    display: block;
+  }
+  
+  .desktop-table {
+    display: none !important;
+  }
+  
+  /* 分页移动端样式 */
+  .pagination {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 16px;
+  }
+  
+  .pagination :deep(.el-pagination__sizes),
+  .pagination :deep(.el-pagination__jump) {
+    display: none;
+  }
+}
+
+/* 超小屏幕适配 */
+@media (max-width: 480px) {
+  .filter-row {
+    padding: 10px 12px;
+  }
+  
+  .search-buttons {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  
+  .search-buttons .el-button {
+    padding: 8px 0;
+    font-size: 12px;
+  }
+  
+  .action-bar {
+    grid-template-columns: 1fr 1fr;
+  }
+  
+  .action-bar .el-button {
+    font-size: 13px;
+    padding: 8px 12px;
   }
 }
 
diff --git a/问题.MD b/问题.MD
index 11ea35e..28fc64d 100644
--- a/问题.MD
+++ b/问题.MD
@@ -1,6 +1,27 @@
 ✅已完成、⚠️部分完成、❌未完成这样显示
 -----------------------------------------------------------------------------------------------需要解决
-统计现在的项目结构，接口，页面，css，全局主题
+
+
+1.http://localhost:5173/user/list对于用户列表的样式在窗口拖动宽度变小的时候会造成样式错位，需要将其兼容移动端样式
+
+2.侧边栏添加推出和收回样式，需要兼容移动端展示，AdminLayout 组件需要进行兼容修改
+
+
+
+
+-----------------------------------------------------------------------------------------------需要解决
+
+规则限制：
+1.在-------需要解决的中间进行写是否解决问题的判断也可以列todolist便于查看是否完成
+2.不要将我原本的问题进行删除了，只需要在范围的最后面添加todolist判断对应问题是否完成就可以了
+3.在以后只要有添加时间选择器就要遵循以下规则     
+时间选择器接受的是毫秒级时间戳，获取时的时间转换，将ISO格式转换为毫秒级时间戳
+   - 列表展示使用formatDate函数
+   - 时间选择器正确显示毫秒级时间戳
+   - 提交时转换为秒级时间戳
+
+
+
 
 ## 一、项目结构 ✅