From f1ee5b340cb303bf95bdad671b6b7dd0cc63082f Mon Sep 17 00:00:00 2001
From: huangzhenbao <17818024429@163.com>
Date: Mon, 26 Jan 2026 17:27:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=A7=E7=BB=AD=E5=AE=8C=E5=96=84=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/admin/index.uvue | 870 ++++++++++++++++++---------------------
 static/finance.svg       |   1 +
 static/homepage.svg      |   1 +
 static/order.svg         |   1 +
 static/setting.svg       |   1 +
 static/shopping.svg      |   1 +
 static/statistics.svg    |   1 +
 static/user.svg          |   1 +
 8 files changed, 411 insertions(+), 466 deletions(-)
 create mode 100644 static/finance.svg
 create mode 100644 static/homepage.svg
 create mode 100644 static/order.svg
 create mode 100644 static/setting.svg
 create mode 100644 static/shopping.svg
 create mode 100644 static/statistics.svg
 create mode 100644 static/user.svg

diff --git a/layouts/admin/index.uvue b/layouts/admin/index.uvue
index eb483647..aafa6957 100644
--- a/layouts/admin/index.uvue
+++ b/layouts/admin/index.uvue
@@ -1,366 +1,409 @@
 <template>
   <view class="admin-layout">
-    <!-- 左侧固定深色 Sider -->
+    <!-- 主侧边栏 -->
     <view class="admin-sider" :class="{ 'sider-collapsed': isCollapsed }">
       <!-- Logo区域 -->
       <view class="sider-header">
         <view class="logo">
-          <text class="logo-text">{{ isCollapsed ? 'M' : 'Mall Admin' }}</text>
+          <image class="logo-img" src="/static/logo.png" mode="aspectFit" />
+          <text class="logo-text" v-if="!isCollapsed">商城后台</text>
         </view>
         <view class="collapse-btn" @click="toggleCollapse">
           <text class="iconfont">{{ isCollapsed ? 'icon-menu-unfold' : 'icon-menu-fold' }}</text>
         </view>
       </view>
 
-      <!-- 一级菜单 (icon bar) -->
-      <view class="menu-primary">
+      <!-- 一级菜单（图标 + 文案；折叠时只显示图标） -->
+      <scroll-view class="menu-primary" scroll-y="true">
         <view
           v-for="menu in menuList"
           :key="menu.id"
           class="menu-item-primary"
-          :class="{ 'active': activeMenu === menu.id }"
+          :class="{ active: activeMenu === menu.id }"
           @click="handleMenuClick(menu)"
         >
-          <text class="iconfont menu-icon">{{ menu.icon }}</text>
+          <image class="menu-icon-img" :src="menu.icon" mode="aspectFit" />
+          <text class="menu-title" v-if="!isCollapsed">{{ menu.title }}</text>
         </view>
-      </view>
-
-      <!-- 二级菜单栏 (当前一级下的文字菜单) -->
-      <view class="menu-secondary" v-if="!isCollapsed">
-        <view class="secondary-header">
-          <text class="secondary-title">{{ activeMenuTitle }}</text>
-        </view>
-        <view class="secondary-content">
-          <view
-            v-for="subMenu in activeSubMenus"
-            :key="subMenu.id"
-            class="sub-menu-item"
-            :class="{ 'active': activeSubMenu === subMenu.id }"
-            @click="handleSubMenuClick(subMenu)"
-          >
-            <text class="sub-menu-text">{{ subMenu.title }}</text>
-          </view>
-        </view>
-      </view>
+      </scroll-view>
     </view>
 
-    <!-- 主内容区 -->
+    <!-- 主内容区：二级侧边栏 + 右侧内容 -->
     <view class="admin-main" :class="{ 'main-collapsed': isCollapsed }">
-      <!-- 顶部 Header -->
-      <view class="admin-header">
-        <view class="header-left">
-          <view class="breadcrumb">
-            <text class="breadcrumb-item">{{ currentPageTitle }}</text>
-          </view>
+      <!-- 二级侧边栏（分组） -->
+      <view class="content-sider" v-if="activeGroups.length > 0">
+        <view class="content-sider-header">
+          <text class="content-sider-title">{{ activeMenuTitle }}</text>
         </view>
-        <view class="header-right">
-          <view class="header-action" @click="handleSearch">
-            <text class="iconfont icon-search"></text>
-          </view>
-          <view class="header-action" @click="handleNotification">
-            <text class="iconfont icon-bell"></text>
-            <view class="notification-dot" v-if="hasNotification"></view>
-          </view>
-          <view class="header-action" @click="handleFullscreen">
-            <text class="iconfont icon-fullscreen"></text>
-          </view>
-          <view class="header-user" @click="handleUserMenu">
-            <image class="user-avatar" src="/static/avatar/default.png" />
-            <text class="user-name">管理员</text>
-            <text class="iconfont icon-down"></text>
-          </view>
-        </view>
-      </view>
 
-      <!-- 多标签页 Tab Bar -->
-      <view class="admin-tabs">
-        <scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false">
-          <view class="tabs-container">
-            <view
-              v-for="tab in tabs"
-              :key="tab.id"
-              class="tab-item"
-              :class="{ 'active': activeTab === tab.id }"
-              @click="switchTab(tab.id)"
-            >
-              <text class="tab-title">{{ tab.title }}</text>
-              <view class="tab-close" v-if="tabs.length > 1" @click.stop="closeTab(tab.id)">
-                <text class="iconfont icon-close"></text>
+        <scroll-view class="content-sider-scroll" scroll-y="true">
+          <view class="group-wrap">
+            <view v-for="group in activeGroups" :key="group.id" class="group-block">
+              <view class="group-header" @click="toggleGroup(group.id)">
+                <text class="group-title">{{ group.title }}</text>
+                <text class="group-arrow">{{ isGroupOpen(group.id) ? '▾' : '▸' }}</text>
+              </view>
+
+              <view v-if="isGroupOpen(group.id)" class="group-children">
+                <view
+                  v-for="sub in group.children"
+                  :key="sub.id"
+                  class="content-sub-menu-item"
+                  :class="{ active: activeSubMenu === sub.id }"
+                  @click="handleSubMenuClick(sub, group.id)"
+                >
+                  <text class="content-sub-menu-text">{{ sub.title }}</text>
+                </view>
               </view>
             </view>
           </view>
         </scroll-view>
       </view>
 
-      <!-- 页面内容区 (flex:1 height:0 scroll-view) -->
-      <scroll-view class="page-content" scroll-y="true" :style="{ flex: '1', height: '0' }">
-        <view class="page-wrapper">
-          <slot></slot>
+      <!-- 右侧内容区 -->
+      <view class="content-area">
+        <!-- 顶部 Header -->
+        <view class="admin-header">
+          <view class="header-left">
+            <view class="breadcrumb">
+              <text class="breadcrumb-item">{{ activeMenuTitle }}</text>
+              <text class="breadcrumb-separator" v-if="activeSubMenuTitle"> / </text>
+              <text class="breadcrumb-item active" v-if="activeSubMenuTitle">{{ activeSubMenuTitle }}</text>
+            </view>
+          </view>
+
+          <view class="header-right">
+            <view class="header-action" @click="handleSearch">
+              <text class="iconfont icon-search"></text>
+            </view>
+            <view class="header-action" @click="handleNotification">
+              <text class="iconfont icon-bell"></text>
+              <view class="notification-dot" v-if="hasNotification"></view>
+            </view>
+            <view class="header-action" @click="handleFullscreen">
+              <text class="iconfont icon-fullscreen"></text>
+            </view>
+            <view class="header-user" @click="handleUserMenu">
+              <image class="user-avatar" src="/static/avatar/default.png" mode="aspectFill" />
+              <text class="user-name">管理员</text>
+              <text class="iconfont icon-down"></text>
+            </view>
+          </view>
         </view>
-      </scroll-view>
+
+        <!-- 页面内容区 -->
+        <scroll-view class="page-content" scroll-y="true">
+          <view class="page-wrapper">
+            <slot></slot>
+          </view>
+        </scroll-view>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
+
+type SubMenu = { id: string; title: string; path: string }
+type MenuGroup = { id: string; title: string; children: SubMenu[] }
+type MenuItem = { id: string; title: string; icon: string; path: string; groups?: MenuGroup[] }
 
-// Props
 const props = defineProps<{
   currentPage: string
 }>()
 
-// 响应式数据
 const isCollapsed = ref(false)
-const activeMenu = ref('dashboard')
+const activeMenu = ref('home')
 const activeSubMenu = ref('')
 const hasNotification = ref(true)
 
-// 标签页数据
-const tabs = ref([
-  { id: 'dashboard', title: '首页', closable: false }
-])
-const activeTab = ref('dashboard')
+// 当前激活菜单下：展开的分组
+const openGroupIds = ref<string[]>([])
 
-// 菜单数据 (CRMEB 风格)
-const menuList = ref([
+// ✅ 你 static 里 6 个 svg：homepage / user / shopping / order / statistics / setting
+// 菜单多于 6 个时允许复用（财务、统计都用 statistics.svg）
+const menuList = ref<MenuItem[]>([
   {
-    id: 'dashboard',
+    id: 'home',
     title: '首页',
-    icon: 'icon-dashboard',
+    icon: '/static/homepage.svg',
     path: '/pages/mall/admin/index',
-    subMenus: []
+    groups: []
   },
   {
     id: 'user',
-    title: '用户管理',
-    icon: 'icon-user',
+    title: '用户',
+    icon: '/static/user.svg',
     path: '/pages/mall/admin/user-management',
-    subMenus: [
-      { id: 'user-list', title: '用户列表', path: '/pages/mall/admin/user-management' },
-      { id: 'user-add', title: '添加用户', path: '/pages/mall/admin/user-management?action=add' }
+    groups: [
+      {
+        id: 'user-group',
+        title: '用户管理',
+        children: [
+          { id: 'user-list', title: '用户列表', path: '/pages/mall/admin/user-management' },
+          { id: 'user-add', title: '添加用户', path: '/pages/mall/admin/user-management?action=add' }
+        ]
+      }
     ]
   },
   {
     id: 'product',
-    title: '商品管理',
-    icon: 'icon-shopping',
+    title: '商品',
+    icon: '/static/shopping.svg',
     path: '/pages/mall/admin/product-management',
-    subMenus: [
-      { id: 'product-list', title: '商品列表', path: '/pages/mall/admin/product-management' },
-      { id: 'product-add', title: '添加商品', path: '/pages/mall/admin/product-management?action=add' },
-      { id: 'category', title: '商品分类', path: '/pages/mall/admin/product-management?tab=category' }
+    groups: [
+      {
+        id: 'product-group',
+        title: '商品管理',
+        children: [
+          { id: 'product-list', title: '商品列表', path: '/pages/mall/admin/product-management' },
+          { id: 'product-add', title: '添加商品', path: '/pages/mall/admin/product-management?action=add' },
+          { id: 'category', title: '商品分类', path: '/pages/mall/admin/product-management?tab=category' }
+        ]
+      }
     ]
   },
   {
     id: 'order',
-    title: '订单管理',
-    icon: 'icon-order',
+    title: '订单',
+    icon: '/static/order.svg',
     path: '/pages/mall/admin/order-management',
-    subMenus: [
-      { id: 'order-list', title: '订单列表', path: '/pages/mall/admin/order-management' },
-      { id: 'order-detail', title: '订单详情', path: '/pages/mall/admin/order-management?action=detail' }
+    groups: [
+      {
+        id: 'order-group',
+        title: '订单管理',
+        children: [
+          { id: 'order-list', title: '订单列表', path: '/pages/mall/admin/order-management' },
+          { id: 'order-detail', title: '订单详情', path: '/pages/mall/admin/order-management?action=detail' }
+        ]
+      }
     ]
   },
   {
     id: 'finance',
-    title: '财务管理',
-    icon: 'icon-finance',
+    title: '财务',
+    icon: '/static/finance.svg',
     path: '/pages/mall/admin/finance-management',
-    subMenus: [
-      { id: 'finance-overview', title: '财务概览', path: '/pages/mall/admin/finance-management' },
-      { id: 'withdrawals', title: '提现管理', path: '/pages/mall/admin/finance-management?tab=withdrawals' }
+    groups: [
+      {
+        id: 'finance-group',
+        title: '财务管理',
+        children: [
+          { id: 'finance-overview', title: '财务概览', path: '/pages/mall/admin/finance-management' },
+          { id: 'withdrawals', title: '提现管理', path: '/pages/mall/admin/finance-management?tab=withdrawals' }
+        ]
+      }
     ]
   },
   {
     id: 'statistics',
-    title: '用户统计',
-    icon: 'icon-statistics',
+    title: '统计',
+    icon: '/static/statistics.svg',
     path: '/pages/mall/admin/user-statistics',
-    subMenus: [
-      { id: 'user-stats', title: '用户统计', path: '/pages/mall/admin/user-statistics' },
-      { id: 'behavior', title: '用户行为', path: '/pages/mall/admin/user-statistics?tab=behavior' }
-    ]
+    groups: []
   },
   {
     id: 'system',
-    title: '系统设置',
-    icon: 'icon-setting',
+    title: '设置',
+    icon: '/static/setting.svg',
     path: '/pages/mall/admin/system-settings',
-    subMenus: [
-      { id: 'basic', title: '基本设置', path: '/pages/mall/admin/system-settings' },
-      { id: 'security', title: '安全设置', path: '/pages/mall/admin/system-settings?tab=security' },
-      { id: 'email', title: '邮件设置', path: '/pages/mall/admin/system-settings?tab=email' }
+    groups: [
+      {
+        id: 'system-group',
+        title: '系统设置',
+        children: [
+          { id: 'basic', title: '基本设置', path: '/pages/mall/admin/system-settings' },
+          { id: 'security', title: '安全设置', path: '/pages/mall/admin/system-settings?tab=security' },
+          { id: 'email', title: '邮件设置', path: '/pages/mall/admin/system-settings?tab=email' }
+        ]
+      }
     ]
   }
 ])
 
-// 计算属性
+/** ✅ 关键：把 currentPage（可能是子菜单 id）反推到顶级菜单 + 子菜单 */
+const resolveActiveByPageId = (pageId: string) => {
+  // 1) 命中顶级
+  const top = menuList.value.find(m => m.id === pageId)
+  if (top) {
+    const first = getFirstChild(top)
+    return { menuId: top.id, subId: first ? first.id : '', groupId: first ? first.groupId : '' }
+  }
+
+  // 2) 命中二级：groups.children
+  for (let i = 0; i < menuList.value.length; i++) {
+    const m = menuList.value[i]
+    const gs = m.groups || []
+    for (let g = 0; g < gs.length; g++) {
+      const group = gs[g]
+      for (let c = 0; c < group.children.length; c++) {
+        const child = group.children[c]
+        if (child.id === pageId) {
+          return { menuId: m.id, subId: child.id, groupId: group.id }
+        }
+      }
+    }
+  }
+
+  // 3) 找不到：回退到首页
+  return { menuId: 'home', subId: '', groupId: '' }
+}
+
+const getFirstChild = (menu: MenuItem) => {
+  const gs = menu.groups || []
+  if (gs.length === 0) return null
+  if (gs[0].children.length === 0) return null
+  return { ...gs[0].children[0], groupId: gs[0].id }
+}
+
+const setOpenGroupsForMenu = (menuId: string, forceOpenGroupId: string) => {
+  const m = menuList.value.find(x => x.id === menuId)
+  const gs = (m && m.groups) ? m.groups : []
+  // 默认全展开；如果传了 forceOpenGroupId，确保它在列表里
+  const ids = gs.map(g => g.id)
+  openGroupIds.value = ids
+  if (forceOpenGroupId && ids.indexOf(forceOpenGroupId) < 0) {
+    openGroupIds.value.push(forceOpenGroupId)
+  }
+}
+
+watch(
+  () => props.currentPage,
+  (val) => {
+    const r = resolveActiveByPageId(val || 'home')
+    activeMenu.value = r.menuId
+    activeSubMenu.value = r.subId
+    setOpenGroupsForMenu(r.menuId, r.groupId)
+  },
+  { immediate: true }
+)
+
 const activeMenuTitle = computed(() => {
-  const menu = menuList.value.find(m => m.id === activeMenu.value)
-  return menu ? menu.title : '管理后台'
+  const m = menuList.value.find(x => x.id === activeMenu.value)
+  return m ? m.title : '后台'
 })
 
-const activeSubMenus = computed(() => {
-  const menu = menuList.value.find(m => m.id === activeMenu.value)
-  return menu ? menu.subMenus || [] : []
+const activeGroups = computed(() => {
+  const m = menuList.value.find(x => x.id === activeMenu.value)
+  return (m && m.groups) ? m.groups : []
 })
 
-const currentPageTitle = computed(() => {
-  const menu = menuList.value.find(m => m.id === props.currentPage)
-  return menu ? menu.title : '管理后台'
+const activeSubMenuTitle = computed(() => {
+  const gs = activeGroups.value
+  for (let g = 0; g < gs.length; g++) {
+    const group = gs[g]
+    const sub = group.children.find(x => x.id === activeSubMenu.value)
+    if (sub) return sub.title
+  }
+  return ''
 })
 
-// 方法
 const toggleCollapse = () => {
   isCollapsed.value = !isCollapsed.value
 }
 
-const handleMenuClick = (menu: any) => {
-  activeMenu.value = menu.id
-  activeSubMenu.value = menu.subMenus && menu.subMenus.length > 0 ? menu.subMenus[0].id : ''
-
-  // 添加或切换标签页
-  const existingTab = tabs.value.find(tab => tab.id === menu.id)
-  if (!existingTab) {
-    tabs.value.push({
-      id: menu.id,
-      title: menu.title,
-      closable: true
-    })
-  }
-  activeTab.value = menu.id
-
-  // 只跳转到已在 pages.json 中声明的页面，不带 query 参数
-  uni.navigateTo({
-    url: menu.path
-  })
+const isGroupOpen = (groupId: string) => {
+  return openGroupIds.value.indexOf(groupId) >= 0
 }
 
-const handleSubMenuClick = (subMenu: any) => {
+const toggleGroup = (groupId: string) => {
+  const idx = openGroupIds.value.indexOf(groupId)
+  if (idx >= 0) openGroupIds.value.splice(idx, 1)
+  else openGroupIds.value.push(groupId)
+}
+
+// ✅ 后台切页建议用 redirectTo，避免页面栈越堆越深；目标页必须在 pages.json 注册 :contentReference[oaicite:2]{index=2}
+const go = (url: string) => {
+  uni.redirectTo({ url })
+}
+
+const handleMenuClick = (menu: MenuItem) => {
+  activeMenu.value = menu.id
+
+  const first = getFirstChild(menu)
+  if (first) {
+    activeSubMenu.value = first.id
+    setOpenGroupsForMenu(menu.id, first.groupId || '')
+    go(first.path)
+  } else {
+    activeSubMenu.value = ''
+    setOpenGroupsForMenu(menu.id, '')
+    go(menu.path)
+  }
+}
+
+const handleSubMenuClick = (subMenu: SubMenu, groupId: string) => {
   activeSubMenu.value = subMenu.id
-  // ✅ 保留完整的路径（包括 query 参数），让页面内部通过 onLoad(options) 处理 tab 切换
-  uni.navigateTo({
-    url: subMenu.path
-  })
+  if (!isGroupOpen(groupId)) openGroupIds.value.push(groupId)
+  go(subMenu.path)
 }
 
 const handleSearch = () => {
-  uni.showToast({
-    title: '搜索功能',
-    icon: 'none'
-  })
+  uni.showToast({ title: '搜索功能', icon: 'none' })
 }
-
 const handleNotification = () => {
-  uni.showToast({
-    title: '通知中心',
-    icon: 'none'
-  })
+  uni.showToast({ title: '通知中心', icon: 'none' })
 }
-
 const handleFullscreen = () => {
-  uni.showToast({
-    title: '全屏切换',
-    icon: 'none'
-  })
+  uni.showToast({ title: '全屏切换', icon: 'none' })
 }
-
 const handleUserMenu = () => {
   uni.showActionSheet({
     itemList: ['个人信息', '退出登录'],
     success: (res) => {
-      if (res.tapIndex === 0) {
-        uni.showToast({
-          title: '个人信息',
-          icon: 'none'
-        })
-      } else {
-        uni.showToast({
-          title: '退出登录',
-          icon: 'none'
-        })
-      }
+      uni.showToast({ title: res.tapIndex === 0 ? '个人信息' : '退出登录', icon: 'none' })
     }
   })
 }
-
-const switchTab = (tabId: string) => {
-  activeTab.value = tabId
-  const menu = menuList.value.find(m => m.id === tabId)
-  if (menu) {
-    activeMenu.value = tabId
-    uni.navigateTo({
-      url: menu.path
-    })
-  }
-}
-
-const closeTab = (tabId: string) => {
-  const index = tabs.value.findIndex(tab => tab.id === tabId)
-  if (index > -1 && tabs.value[index].closable) {
-    tabs.value.splice(index, 1)
-
-    // 如果关闭的是当前标签，切换到上一个
-    if (activeTab.value === tabId && tabs.value.length > 0) {
-      activeTab.value = tabs.value[Math.max(0, index - 1)].id
-      const menu = menuList.value.find(m => m.id === activeTab.value)
-      if (menu) {
-        activeMenu.value = activeTab.value
-        uni.navigateTo({
-          url: menu.path
-        })
-      }
-    }
-  }
-}
 </script>
 
 <style>
-/* ===== AdminLayout 样式 ===== */
 .admin-layout {
   display: flex;
   height: 100vh;
   background-color: #f0f2f5;
 }
 
-/* ===== 左侧 Sider ===== */
+/* ===== 主侧边栏 ===== */
 .admin-sider {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
-  width: 240px;
+  width: 220px;
   background-color: #001529;
-  transition: width 0.3s ease;
   z-index: 1000;
   display: flex;
   flex-direction: column;
+  transition: width 0.25s ease;
 }
-
 .admin-sider.sider-collapsed {
   width: 80px;
 }
 
-/* Sider Header */
 .sider-header {
   height: 64px;
+  padding: 0 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 24px;
-  border-bottom: 1px solid #002140;
   background-color: #002140;
+  border-bottom: 1px solid #002140;
 }
 
 .logo {
   display: flex;
   align-items: center;
+  gap: 10px;
+}
+.logo-img {
+  width: 28px;
+  height: 28px;
 }
-
 .logo-text {
-  color: #ffffff;
-  font-size: 18px;
+  color: #fff;
+  font-size: 16px;
   font-weight: 600;
 }
 
@@ -370,161 +413,182 @@ const closeTab = (tabId: string) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  color: #ffffff;
-  border-radius: 4px;
-  transition: background-color 0.2s;
+  color: #fff;
+  border-radius: 6px;
+}
+.collapse-btn:active {
+  background-color: rgba(255,255,255,0.12);
 }
 
-.collapse-btn:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-/* 一级菜单 (Icon Bar) */
 .menu-primary {
-  padding: 16px 0;
-  border-bottom: 1px solid #002140;
+  flex: 1;
+  padding: 10px 0;
 }
 
 .menu-item-primary {
+  margin: 8px 10px;
+  padding: 10px 8px;
+  border-radius: 10px;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  height: 48px;
-  margin: 8px 16px;
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.65);
-  border-radius: 6px;
-  transition: all 0.2s;
+  gap: 6px;
+  color: rgba(255,255,255,0.80);
 }
-
-.menu-item-primary:hover {
-  background-color: #1890ff;
-  color: #ffffff;
-}
-
 .menu-item-primary.active {
   background-color: #1890ff;
-  color: #ffffff;
+  color: #fff;
+}
+.menu-item-primary:active {
+  background-color: rgba(24,144,255,0.65);
 }
 
-.menu-icon {
-  font-size: 20px;
+.menu-icon-img {
+  width: 22px;
+  height: 22px;
+  
+}
+.menu-title {
+  font-size: 12px;
+  color: inherit;
 }
 
-/* 二级菜单栏 */
-.menu-secondary {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background-color: #000c17;
-}
-
-.secondary-header {
-  padding: 16px 24px;
-  border-bottom: 1px solid #002140;
-}
-
-.secondary-title {
-  color: #ffffff;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.secondary-content {
-  flex: 1;
-  padding: 8px 0;
-}
-
-.sub-menu-item {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  padding: 0 24px;
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.65);
-  transition: all 0.2s;
-}
-
-.sub-menu-item:hover {
-  background-color: rgba(255, 255, 255, 0.05);
-  color: #ffffff;
-}
-
-.sub-menu-item.active {
-  background-color: rgba(24, 144, 255, 0.2);
-  color: #1890ff;
-  border-right: 3px solid #1890ff;
-}
-
-.sub-menu-text {
-  font-size: 14px;
-}
-
-/* ===== 主内容区 ===== */
+/* ===== 主内容区：二级侧边栏 + 内容区（横向布局，避免二级菜单跑到顶部）===== */
 .admin-main {
-  flex: 1;
-  margin-left: 240px;
-  transition: margin-left 0.3s ease;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
+  margin-left: 220px;
+  width: calc(100% - 220px);
+  height: 100vh;
+  display: flex;              /* 关键：横向 */
+  flex-direction: row;        /* 关键：横向 */
+  transition: margin-left 0.25s ease, width 0.25s ease;
 }
-
 .admin-main.main-collapsed {
   margin-left: 80px;
+  width: calc(100% - 80px);
 }
 
-/* ===== 顶部 Header ===== */
+/* ===== 二级侧边栏（分组导航）===== */
+.content-sider {
+  width: 220px;
+  height: 100%;
+  background-color: #ffffff;
+  border-right: 1px solid #e8e8e8;
+  display: flex;
+  flex-direction: column;
+}
+.content-sider-header {
+  height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+  background-color: #fafafa;
+}
+.content-sider-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+.content-sider-scroll {
+  flex: 1;
+}
+
+.group-wrap {
+  padding: 10px 0;
+}
+
+.group-block {
+  margin-bottom: 10px;
+}
+
+.group-header {
+  padding: 10px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #595959;
+}
+.group-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+.group-arrow {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.group-children {
+  padding: 4px 0;
+}
+
+.content-sub-menu-item {
+  height: 38px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  color: #595959;
+  border-left: 3px solid transparent;
+}
+.content-sub-menu-item:active {
+  background-color: #f5f5f5;
+}
+.content-sub-menu-item.active {
+  background-color: #e6f7ff;
+  color: #1890ff;
+  border-left-color: #1890ff;
+  font-weight: 600;
+}
+.content-sub-menu-text {
+  font-size: 13px;
+}
+
+/* ===== 右侧内容区 ===== */
+.content-area {
+  flex: 1;
+  min-width: 0; /* 防止横向溢出 */
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #f0f2f5;
+}
+
+/* 顶部 Header */
 .admin-header {
   height: 64px;
   background-color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 24px;
+  padding: 0 18px;
   border-bottom: 1px solid #e8e8e8;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
-
-.header-left {
-  display: flex;
-  align-items: center;
-}
-
 .breadcrumb {
-  font-size: 16px;
+  font-size: 15px;
   color: #666666;
 }
-
 .breadcrumb-item {
   color: #1890ff;
 }
-
+.breadcrumb-item.active {
+  color: #262626;
+}
 .header-right {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 12px;
 }
-
 .header-action {
-  position: relative;
-  width: 40px;
-  height: 40px;
+  width: 38px;
+  height: 38px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  color: #666666;
-  border-radius: 6px;
-  transition: all 0.2s;
+  color: #666;
 }
-
-.header-action:hover {
+.header-action:active {
   background-color: #f5f5f5;
-  color: #1890ff;
 }
-
 .notification-dot {
   position: absolute;
   top: 8px;
@@ -533,143 +597,40 @@ const closeTab = (tabId: string) => {
   height: 8px;
   background-color: #ff4d4f;
   border-radius: 50%;
-  border: 2px solid #ffffff;
+  border: 2px solid #fff;
 }
-
 .header-user {
   display: flex;
   align-items: center;
   gap: 8px;
-  cursor: pointer;
-  padding: 8px 12px;
-  border-radius: 6px;
-  transition: background-color 0.2s;
+  padding: 6px 10px;
+  border-radius: 10px;
 }
-
-.header-user:hover {
+.header-user:active {
   background-color: #f5f5f5;
 }
-
 .user-avatar {
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
 }
-
 .user-name {
-  font-size: 14px;
-  color: #666666;
+  font-size: 13px;
+  color: #666;
 }
 
-/* ===== 多标签页 Tab Bar ===== */
-.admin-tabs {
-  height: 44px;
-  background-color: #ffffff;
-  border-bottom: 1px solid #e8e8e8;
-  flex-shrink: 0;
-}
-
-.tabs-scroll {
-  height: 100%;
-}
-
-.tabs-container {
-  display: flex;
-  height: 100%;
-  min-width: 100%;
-}
-
-.tab-item {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  height: 100%;
-  cursor: pointer;
-  border-right: 1px solid #e8e8e8;
-  background-color: #fafafa;
-  transition: all 0.2s;
-  position: relative;
-}
-
-.tab-item:hover {
-  background-color: #f0f0f0;
-}
-
-.tab-item.active {
-  background-color: #ffffff;
-  border-bottom: 2px solid #1890ff;
-  color: #1890ff;
-}
-
-.tab-title {
-  font-size: 14px;
-  margin-right: 8px;
-  white-space: nowrap;
-}
-
-.tab-close {
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: background-color 0.2s;
-}
-
-.tab-close:hover {
-  background-color: #e8e8e8;
-}
-
-/* ===== 页面内容区 ===== */
+/* 页面内容区 */
 .page-content {
   flex: 1;
+  height: 100%;
   background-color: #f0f2f5;
 }
-
 .page-wrapper {
-  padding: 24px;
-  min-height: calc(100vh - 108px);
+  padding: 18px;
+  min-height: 100%;
 }
 
-/* ===== 响应式设计 ===== */
-@media (max-width: 768px) {
-  .admin-sider {
-    width: 200px;
-  }
-
-  .admin-sider.sider-collapsed {
-    width: 0;
-    overflow: hidden;
-  }
-
-  .admin-main {
-    margin-left: 200px;
-  }
-
-  .admin-main.main-collapsed {
-    margin-left: 0;
-  }
-
-  .admin-header {
-    padding: 0 16px;
-  }
-
-  .page-wrapper {
-    padding: 16px;
-  }
-
-  .header-right {
-    gap: 8px;
-  }
-
-  .header-action {
-    width: 36px;
-    height: 36px;
-  }
-}
-
-/* ===== 图标字体 ===== */
+/* iconfont（保留你现有的 header/折叠按钮图标） */
 .iconfont {
   font-family: 'iconfont';
   font-size: 16px;
@@ -677,27 +638,4 @@ const closeTab = (tabId: string) => {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-/* ===== 滚动条样式 ===== */
-.admin-sider ::-webkit-scrollbar,
-.page-content ::-webkit-scrollbar {
-  width: 6px;
-}
-
-.admin-sider ::-webkit-scrollbar-track,
-.page-content ::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-}
-
-.admin-sider ::-webkit-scrollbar-thumb,
-.page-content ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 3px;
-}
-
-.admin-sider ::-webkit-scrollbar-thumb:hover,
-.page-content ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.5);
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/static/finance.svg b/static/finance.svg
new file mode 100644
index 00000000..33e7f082
--- /dev/null
+++ b/static/finance.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1769417164326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20559" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M192 960H96c-17.67 0-32-14.33-32-32V480c0-17.67 14.33-32 32-32h96c17.67 0 32 14.33 32 32v448c0 17.67-14.33 32-32 32z m-64-64h32V512h-32v384zM437.33 960h-96c-17.67 0-32-14.33-32-32V608c0-17.67 14.33-32 32-32h96c17.67 0 32 14.33 32 32v320c0 17.67-14.32 32-32 32z m-64-64h32V640h-32v256zM682.67 960h-96c-17.67 0-32-14.33-32-32V608c0-17.67 14.33-32 32-32h96c17.67 0 32 14.33 32 32v320c0 17.67-14.33 32-32 32z m-64-64h32V640h-32v256zM928 960h-96c-17.67 0-32-14.33-32-32V480c0-17.67 14.33-32 32-32h96c17.67 0 32 14.33 32 32v448c0 17.67-14.33 32-32 32z m-64-64h32V512h-32v384zM512 512c-59.83 0-116.08-23.3-158.39-65.61C311.3 404.08 288 347.83 288 288s23.3-116.08 65.61-158.39C395.92 87.3 452.17 64 512 64s116.08 23.3 158.39 65.61C712.7 171.92 736 228.17 736 288s-23.3 116.08-65.61 158.39C628.08 488.7 571.83 512 512 512z m0-384c-88.22 0-160 71.78-160 160s71.78 160 160 160 160-71.78 160-160-71.78-160-160-160z" p-id="20560" fill="#ffffff"></path><path d="M489.83 375.89v-36.33h-43.36c-9.38 0-14.06-4.28-14.06-12.89 0.77-7.03 5.46-11.32 14.06-12.89h43.36v-19.92h-43.36c-9.38 0-14.06-4.28-14.06-12.89 0.77-7.03 5.46-11.32 14.06-12.89h24.61l-37.5-52.73c-3.92-3.11-5.47-7.42-4.69-12.89 0.77-13.28 8.2-20.69 22.27-22.27 7.03 0.79 12.89 3.92 17.58 9.38l43.36 62.11 43.36-62.11c3.9-5.46 9.76-8.59 17.58-9.38 13.28 1.57 20.69 8.99 22.27 22.27 0 5.47-1.57 9.78-4.69 12.89l-37.5 52.73h24.61c7.8 1.57 12.49 5.86 14.06 12.89-0.79 8.61-5.47 12.89-14.06 12.89h-43.36v19.92h43.36c7.8 1.57 12.49 5.86 14.06 12.89-0.79 8.61-5.47 12.89-14.06 12.89h-43.36v36.33c-0.79 13.29-8.2 19.92-22.27 19.92-14.85 0-22.27-6.63-22.27-19.92z" p-id="20561" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/static/homepage.svg b/static/homepage.svg
new file mode 100644
index 00000000..d3cc2cd4
--- /dev/null
+++ b/static/homepage.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1769417272835" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21779" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M969.6 502.4l-118.4-112-323.2-300.8c-9.6-9.6-22.4-9.6-32 0l-313.6 297.6c-3.2 3.2-6.4 6.4-9.6 9.6l-118.4 112c-9.6 9.6-9.6 22.4 0 32s22.4 9.6 32 0l83.2-80 0 393.6c0 48 41.6 89.6 92.8 89.6l83.2 0c38.4 0 70.4-28.8 70.4-67.2l0-217.6 99.2 0 99.2 0 0 217.6c0 35.2 32 67.2 70.4 67.2l83.2 0c51.2 0 92.8-38.4 92.8-89.6l0-396.8 80 73.6c9.6 9.6 22.4 9.6 32 0C979.2 524.8 979.2 512 969.6 502.4zM809.6 857.6c0 25.6-19.2 44.8-44.8 44.8l-83.2 0c-12.8 0-22.4-9.6-22.4-22.4L659.2 640c0-12.8-9.6-22.4-22.4-22.4l-121.6 0-121.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 240c0 12.8-9.6 22.4-22.4 22.4l-83.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-438.4 294.4-281.6 294.4 281.6L809.6 857.6z" p-id="21780" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/static/order.svg b/static/order.svg
new file mode 100644
index 00000000..35f0c485
--- /dev/null
+++ b/static/order.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1769417734574" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27067" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M800.037628 928.016126 223.962372 928.016126c-52.980346 0-95.983874-43.003528-95.983874-95.983874l0-639.892491c0-52.980346 43.003528-95.983874 95.983874-95.983874l575.903242 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 639.892491C896.021502 884.840585 852.84596 928.016126 800.037628 928.016126zM223.962372 159.973123c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 639.892491c0 17.717453 14.449185 31.994625 31.994625 31.994625l575.903242 0c17.717453 0 31.994625-14.277171 31.994625-31.994625l0-639.892491c0-17.545439-14.277171-31.994625-31.994625-31.994625L223.962372 159.973123z" fill="#ffffff" p-id="27068"></path><path d="M640.924576 544.768688 287.779607 544.768688c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-17.717453 14.277171-31.994625 31.994625-31.994625l353.144969 0c17.717453 0 31.994625 14.277171 31.994625 31.994625C672.9192 530.491517 658.642029 544.768688 640.924576 544.768688z" fill="#ffffff" p-id="27069"></path><path d="M734.84428 735.532337l-447.236687 0c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l447.236687 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S752.561734 735.532337 734.84428 735.532337z" fill="#ffffff" p-id="27070"></path><path d="M255.784982 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S255.784982 278.834873 255.784982 305.325046z" fill="#ffffff" p-id="27071"></path><path d="M463.061986 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S463.061986 278.834873 463.061986 305.325046z" fill="#ffffff" p-id="27072"></path><path d="M671.199059 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S671.199059 278.834873 671.199059 305.325046z" fill="#ffffff" p-id="27073"></path></svg>
\ No newline at end of file
diff --git a/static/setting.svg b/static/setting.svg
new file mode 100644
index 00000000..2c0b27bd
--- /dev/null
+++ b/static/setting.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1769417366593" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26013" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M919.6 405.6l-57.2-8c-12.7-1.8-23-10.4-28-22.1-11.3-26.7-25.7-51.7-42.9-74.5-7.7-10.2-10-23.5-5.2-35.3l21.7-53.5c6.7-16.4 0.2-35.3-15.2-44.1L669.1 96.6c-15.4-8.9-34.9-5.1-45.8 8.9l-35.4 45.3c-7.9 10.2-20.7 14.9-33.5 13.3-14-1.8-28.3-2.8-42.8-2.8-14.5 0-28.8 1-42.8 2.8-12.8 1.6-25.6-3.1-33.5-13.3l-35.4-45.3c-10.9-14-30.4-17.8-45.8-8.9L230.4 168c-15.4 8.9-21.8 27.7-15.2 44.1l21.7 53.5c4.8 11.9 2.5 25.1-5.2 35.3-17.2 22.8-31.7 47.8-42.9 74.5-5 11.8-15.3 20.4-28 22.1l-57.2 8C86 408 72.9 423 72.9 440.8v142.9c0 17.7 13.1 32.7 30.6 35.2l57.2 8c12.7 1.8 23 10.4 28 22.1 11.3 26.7 25.7 51.7 42.9 74.5 7.7 10.2 10 23.5 5.2 35.3l-21.7 53.5c-6.7 16.4-0.2 35.3 15.2 44.1L354 927.8c15.4 8.9 34.9 5.1 45.8-8.9l35.4-45.3c7.9-10.2 20.7-14.9 33.5-13.3 14 1.8 28.3 2.8 42.8 2.8 14.5 0 28.8-1 42.8-2.8 12.8-1.6 25.6 3.1 33.5 13.3l35.4 45.3c10.9 14 30.4 17.8 45.8 8.9l123.7-71.4c15.4-8.9 21.8-27.7 15.2-44.1l-21.7-53.5c-4.8-11.8-2.5-25.1 5.2-35.3 17.2-22.8 31.7-47.8 42.9-74.5 5-11.8 15.3-20.4 28-22.1l57.2-8c17.6-2.5 30.6-17.5 30.6-35.2V440.8c0.2-17.8-12.9-32.8-30.5-35.2z m-408 245.5c-76.7 0-138.9-62.2-138.9-138.9s62.2-138.9 138.9-138.9 138.9 62.2 138.9 138.9-62.2 138.9-138.9 138.9z" fill="#ffffff" p-id="26014"></path></svg>
\ No newline at end of file
diff --git a/static/shopping.svg b/static/shopping.svg
new file mode 100644
index 00000000..719cbd21
--- /dev/null
+++ b/static/shopping.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1769417326653" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23918" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M800.037628 928.016126 223.962372 928.016126c-52.980346 0-95.983874-43.003528-95.983874-95.983874l0-639.892491c0-52.980346 43.003528-95.983874 95.983874-95.983874l575.903242 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 639.892491C896.021502 884.840585 852.84596 928.016126 800.037628 928.016126zM223.962372 159.973123c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 639.892491c0 17.717453 14.449185 31.994625 31.994625 31.994625l575.903242 0c17.717453 0 31.994625-14.277171 31.994625-31.994625l0-639.892491c0-17.545439-14.277171-31.994625-31.994625-31.994625L223.962372 159.973123z" fill="#ffffff" p-id="23919"></path><path d="M640.924576 544.768688 287.779607 544.768688c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-17.717453 14.277171-31.994625 31.994625-31.994625l353.144969 0c17.717453 0 31.994625 14.277171 31.994625 31.994625C672.9192 530.491517 658.642029 544.768688 640.924576 544.768688z" fill="#ffffff" p-id="23920"></path><path d="M734.84428 735.532337l-447.236687 0c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l447.236687 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S752.561734 735.532337 734.84428 735.532337z" fill="#ffffff" p-id="23921"></path><path d="M255.784982 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S255.784982 278.834873 255.784982 305.325046z" fill="#ffffff" p-id="23922"></path><path d="M463.061986 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S463.061986 278.834873 463.061986 305.325046z" fill="#ffffff" p-id="23923"></path><path d="M671.199059 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S671.199059 278.834873 671.199059 305.325046z" fill="#ffffff" p-id="23924"></path></svg>
\ No newline at end of file
diff --git a/static/statistics.svg b/static/statistics.svg
new file mode 100644
index 00000000..1b909a0c
--- /dev/null
+++ b/static/statistics.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1769417346887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24969" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M992 672h-24c-4.4 0-8-3.6-8-8V136c0-4.4 3.6-8 8-8h24c17.7 0 32-14.3 32-32s-14.3-32-32-32H580c-2.2 0-4-1.8-4-4 0-16.6-6.7-31.6-17.6-42.4C547.6 6.7 532.6 0 516 0h-8c-33.1 0-60 26.9-60 60 0 1.1-0.4 2.1-1.2 2.8-0.7 0.7-1.7 1.2-2.8 1.2H32C14.3 64 0 78.3 0 96c0 8.8 3.6 16.8 9.4 22.6 5.8 5.8 13.8 9.4 22.6 9.4h24c4.4 0 8 3.6 8 8v528c0 4.4-3.6 8-8 8H32c-17.7 0-32 14.3-32 32 0 8.8 3.6 16.8 9.4 22.6 5.8 5.8 13.8 9.4 22.6 9.4h364.1c10.2 0 17.8 9.5 15.6 19.5L360.4 986c-4.3 19.5 10.5 38 30.5 38 7.3 0 14.2-2.5 19.6-6.9 5.4-4.3 9.4-10.5 10.9-17.6l50.7-228c1-4.7 7.9-3.9 7.9 0.9v220.3c0 17.3 14 31.2 31.2 31.2h1.5c17.3 0 31.2-14 31.2-31.2V772.4c0-4.8 6.9-5.5 7.9-0.9l50.7 228c3.2 14.3 15.8 24.4 30.5 24.5h0.1c20 0 34.9-18.5 30.5-38l-51.3-230.5c-2.2-10 5.4-19.5 15.6-19.5H992c17.7 0 32-14.3 32-32 0-8.8-3.6-16.8-9.4-22.6-5.8-5.8-13.8-9.4-22.6-9.4z m-704-68V420c0-2.2 1.8-4 4-4h56c2.2 0 4 1.8 4 4v184c0 2.2-1.8 4-4 4h-56c-2.2 0-4-1.8-4-4z m128 0V388c0-2.2 1.8-4 4-4h56c2.2 0 4 1.8 4 4v216c0 2.2-1.8 4-4 4h-56c-2.2 0-4-1.8-4-4z m128 0V324c0-2.2 1.8-4 4-4h56c2.2 0 4 1.8 4 4v280c0 2.2-1.8 4-4 4h-56c-2.2 0-4-1.8-4-4z m192 0c0 2.2-1.8 4-4 4h-56c-2.2 0-4-1.8-4-4V228c0-2.2 1.8-4 4-4h56c2.2 0 4 1.8 4 4v376z" p-id="24970" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/static/user.svg b/static/user.svg
new file mode 100644
index 00000000..d3d547f2
--- /dev/null
+++ b/static/user.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1769417307751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22862" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M511.913993 941.605241c-255.612968 0-385.311608-57.452713-385.311608-170.810012 0-80.846632 133.654964-133.998992 266.621871-151.88846L393.224257 602.049387c-79.986561-55.904586-118.86175-153.436587-118.86175-297.240383 0-139.33143 87.211154-222.586259 233.423148-222.586259l7.912649 0c146.211994 0 233.423148 83.254829 233.423148 222.586259 0 54.184445 0 214.67361-117.829666 297.412397l-0.344028 16.685369c132.966907 18.061482 266.105829 71.041828 266.105829 151.716445C897.225601 884.152528 767.526961 941.605241 511.913993 941.605241zM507.957668 141.567613c-79.470519 0-174.250294 28.382328-174.250294 163.241391 0 129.698639 34.230808 213.469511 104.584579 255.784982 8.944734 5.332437 14.277171 14.965228 14.277171 25.286074l0 59.344868c0 15.309256-11.524945 28.0383-26.662187 29.414413-144.319839 14.449185-239.959684 67.429531-239.959684 95.983874 0 92.199563 177.346548 111.637158 325.966739 111.637158 148.792206 0 325.966739-19.26558 325.966739-111.637158 0-28.726356-95.639845-81.534688-239.959684-95.983874-15.48127-1.548127-27.006215-14.621199-26.662187-30.102469l1.376113-59.344868c0.172014-10.148833 5.676466-19.437594 14.277171-24.770032 70.525785-42.487485 103.208466-123.678145 103.208466-255.784982 0-135.031077-94.779775-163.241391-174.250294-163.241391L507.957668 141.567613 507.957668 141.567613z" fill="#ffffff" p-id="22863"></path></svg>
\ No newline at end of file