refactor: consolidate menu handling logic and update related components

杨刚
1 parent 74bd4291
Showing 20 changed files with 2136 additions and 310 deletions
src/App.vue
src/api/index.ts
src/components/AppMenuTree.vue
src/config/menu.ts
src/layouts/MainLayout.vue
src/router/index.ts
src/stores/auth.ts
src/style.css
src/types/auth.ts
src/utils/menu.ts
src/views/Login.vue
src/views/admin/AdminUserList.vue
src/views/config/FeePlanList.vue
src/views/dashboard/DashboardHome.vue
src/views/dispatch/DispatchRuleList.vue
src/views/rider/RiderList.vue
src/views/substation/SubstationList.vue
src/views/system/MenuManage.vue
src/views/system/RoleList.vue
src/views/system/RoleMenuAssign.vue
 <template>
-  <a-config-provider
-    :theme="{
-      algorithm: app.isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
-      token: {
-        colorPrimary: '#8c7cf0',
-        borderRadius: 12,
-        fontFamily: 'Outfit, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'
-      }
-    }"
-  >
+  <a-config-provider :theme="themeConfig">
     <router-view />
   </a-config-provider>
 </template>
  
 <script setup lang="ts">
-import { theme } from 'ant-design-vue'
+import { computed } from 'vue'
 import { useAppStore } from '@/stores/app'
  
 const app = useAppStore()
+
+const themeConfig = computed(() => ({
+  token: {
+    colorPrimary: '#8c7cf0',
+    borderRadius: 12,
+    fontFamily: 'Outfit, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif',
+    ...(app.isDarkMode
+      ? {
+          colorBgBase: '#14111d',
+          colorBgLayout: '#14111d',
+          colorBgContainer: '#1e1a2e',
+          colorBgElevated: '#28243c',
+          colorTextBase: '#eeecf1',
+          colorText: '#eeecf1',
+          colorTextSecondary: '#c7c3d5',
+          colorTextTertiary: '#a4a0b8',
+          colorTextQuaternary: '#8a869b',
+          colorTextHeading: '#ffffff',
+          colorTextDescription: '#a4a0b8',
+          colorTextPlaceholder: '#8a869b',
+          colorTextDisabled: '#7f7a93',
+          colorIcon: '#d9d6e5',
+          colorIconHover: '#ffffff',
+          colorBorder: 'rgba(255, 255, 255, 0.14)',
+          colorBorderSecondary: 'rgba(255, 255, 255, 0.1)',
+          colorFill: 'rgba(255, 255, 255, 0.16)',
+          colorFillSecondary: 'rgba(255, 255, 255, 0.12)',
+          colorFillTertiary: 'rgba(255, 255, 255, 0.08)',
+          colorFillQuaternary: 'rgba(255, 255, 255, 0.06)',
+          colorFillAlter: 'rgba(255, 255, 255, 0.06)',
+        }
+      : {}),
+  },
+}))
 </script>
  
 <style>
-/* Loading bar simulation */
 body::before {
   content: "";
   position: fixed;
 import request from '@/utils/request'
  
+// 系统菜单管理
+export const systemMenuApi = {
+  tree: () => request.get('/api/platform/system/menu/tree'),
+  add: (data: any) => request.post('/api/platform/system/menu/add', data),
+  edit: (data: any) => request.put('/api/platform/system/menu/edit', data),
+  del: (id: number) => request.delete('/api/platform/system/menu/del', { params: { id } }),
+  setVisible: (id: number, visible: number) =>
+    request.post('/api/platform/system/menu/setVisible', null, { params: { id, visible } }),
+  setStatus: (id: number, status: number) =>
+    request.post('/api/platform/system/menu/setStatus', null, { params: { id, status } }),
+}
+
+export const systemRoleApi = {
+  list: (includeDisabled = false) => request.get('/api/platform/system/role/list', { params: { includeDisabled } }),
+  add: (data: any) => request.post('/api/platform/system/role/add', data),
+  edit: (data: any) => request.put('/api/platform/system/role/edit', data),
+  ban: (id: number) => request.post('/api/platform/system/role/ban', null, { params: { id } }),
+  cancelBan: (id: number) => request.post('/api/platform/system/role/cancelBan', null, { params: { id } }),
+  del: (id: number) => request.delete('/api/platform/system/role/del', { params: { id } }),
+  menuTree: (roleId: number) => request.get(`/api/platform/system/role/${roleId}/menu-tree`),
+  assignMenus: (roleId: number, data: { menuIds: number[] }) =>
+    request.post(`/api/platform/system/role/${roleId}/menus`, data),
+}
+
 // 城市管理
 export const cityApi = {
   tree: () => request.get('/api/platform/city/tree'),
@@ -36,7 +60,18 @@ export const substationApi = {
   cancelBan: (id: number) => request.post('/api/platform/substation/cancelBan', null, { params: { id } }),
   del: (id: number) => request.delete('/api/platform/substation/del', { params: { id } }),
   changePassword: (data: { id: number; oldPassword: string; newPassword: string }) =>
-    request.post('/api/platform/substation/changePassword', data),
+    request.post('/api/platform/substation/changePassword', data, { params: { id: data.id } }),
+}
+
+export const adminUserApi = {
+  list: (keyword?: string) => request.get('/api/platform/admin-user/list', { params: { keyword } }),
+  add: (data: any) => request.post('/api/platform/admin-user/add', data),
+  edit: (data: any) => request.put('/api/platform/admin-user/edit', data),
+  ban: (id: number) => request.post('/api/platform/admin-user/ban', null, { params: { id } }),
+  cancelBan: (id: number) => request.post('/api/platform/admin-user/cancelBan', null, { params: { id } }),
+  del: (id: number) => request.delete('/api/platform/admin-user/del', { params: { id } }),
+  changePassword: (data: { id: number; oldPassword: string; newPassword: string }) =>
+    request.post('/api/platform/admin-user/changePassword', data, { params: { id: data.id } }),
 }
  
 // 商家管理
+<template>
+  <template v-for="menu in menus" :key="menu.code">
+    <a-sub-menu v-if="menu.children?.length" :key="menu.code">
+      <template #icon>
+        <component :is="resolveIcon(menu.icon)" v-if="resolveIcon(menu.icon)" />
+      </template>
+      <template #title>{{ menu.name }}</template>
+      <AppMenuTree :menus="menu.children" />
+    </a-sub-menu>
+    <a-menu-item v-else :key="menu.path || menu.code">
+      <template #icon>
+        <component :is="resolveIcon(menu.icon)" v-if="resolveIcon(menu.icon)" />
+      </template>
+      {{ menu.name }}
+    </a-menu-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { MenuNode } from '@/types/auth'
+import {
+  ApiOutlined,
+  ApartmentOutlined,
+  ControlOutlined,
+  GlobalOutlined,
+  HomeOutlined,
+  ShopOutlined,
+  StarOutlined,
+  UnorderedListOutlined,
+  UserOutlined,
+} from '@ant-design/icons-vue'
+
+withDefaults(defineProps<{ menus: MenuNode[] }>(), {
+  menus: () => [],
+})
+
+const iconMap: Record<string, Component> = {
+  HomeOutlined,
+  GlobalOutlined,
+  ApartmentOutlined,
+  ShopOutlined,
+  UserOutlined,
+  StarOutlined,
+  UnorderedListOutlined,
+  ControlOutlined,
+  ApiOutlined,
+}
+
+function resolveIcon(icon?: string) {
+  if (!icon) return null
+  return iconMap[icon] || null
+}
+</script>
+import type { MenuNode } from '@/types/auth'
+
+export interface QuickLinkItem {
+  path: string
+  title: string
+  desc: string
+}
+
+export const iconRegistry: Record<string, string> = {
+  HomeOutlined: 'home',
+  GlobalOutlined: 'global',
+  ApartmentOutlined: 'apartment',
+  ShopOutlined: 'shop',
+  UserOutlined: 'user',
+  StarOutlined: 'star',
+  UnorderedListOutlined: 'unordered-list',
+  ControlOutlined: 'control',
+  ApiOutlined: 'api',
+}
+
+export const pinnedQuickLinks: QuickLinkItem[] = [
+  { path: '/city', title: '租户管理', desc: '配置配送费、骑手等级与租户信息' },
+  { path: '/rider', title: '骑手管理', desc: '查看骑手、设置等级和账号状态' },
+  { path: '/order', title: '订单列表', desc: '集中处理配送中的订单流转' },
+  { path: '/substation', title: '分站管理', desc: '维护租户站点账号和菜单分配' },
+  { path: '/system/menu', title: '菜单管理', desc: '维护平台与分站菜单树结构' },
+  { path: '/admin-user', title: '平台账号', desc: '维护平台账号与平台菜单角色绑定' },
+]
+
+export function hasVisibleChildren(menu: MenuNode) {
+  return Array.isArray(menu.children) && menu.children.length > 0
+}
@@ -17,56 +17,11 @@
       <div class="menu-scroll">
         <a-menu
           v-model:selectedKeys="selectedKeys"
-          :theme="app.isDarkMode ? 'dark' : 'light'"
           mode="inline"
           :inline-collapsed="collapsed"
           @click="onMenuClick"
         >
-          <a-menu-item key="/dashboard">
-            <template #icon><home-outlined /></template>
-            工作台
-          </a-menu-item>
-          <a-menu-item v-if="isAdmin" key="/city">
-            <template #icon><global-outlined /></template>
-            租户管理
-          </a-menu-item>
-          <a-menu-item v-if="isAdmin" key="/substation">
-            <template #icon><apartment-outlined /></template>
-            分站管理
-          </a-menu-item>
-          <a-sub-menu key="merchant">
-            <template #icon><shop-outlined /></template>
-            <template #title>商家管理</template>
-            <a-menu-item key="/merchant/enter">入驻申请</a-menu-item>
-            <a-menu-item key="/merchant/store">店铺管理</a-menu-item>
-          </a-sub-menu>
-          <a-menu-item key="/rider">
-            <template #icon><user-outlined /></template>
-            骑手管理
-          </a-menu-item>
-          <a-menu-item key="/rider/evaluate">
-            <template #icon><star-outlined /></template>
-            骑手评价
-          </a-menu-item>
-          <a-sub-menu key="orders">
-            <template #icon><unordered-list-outlined /></template>
-            <template #title>订单管理</template>
-            <a-menu-item key="/order">订单列表</a-menu-item>
-            <a-menu-item key="/refund">退款管理</a-menu-item>
-            <a-menu-item key="/delivery/order">配送订单</a-menu-item>
-          </a-sub-menu>
-          <a-sub-menu key="config">
-            <template #icon><control-outlined /></template>
-            <template #title>配置中心</template>
-            <a-menu-item key="/config/fee-plan">配送费配置</a-menu-item>
-            <a-menu-item key="/dispatch/rule">调度配置</a-menu-item>
-          </a-sub-menu>
-          <a-sub-menu key="open">
-            <template #icon><api-outlined /></template>
-            <template #title>开放平台</template>
-            <a-menu-item key="/open">应用管理</a-menu-item>
-            <a-menu-item key="/open/mock-delivery">模拟推单</a-menu-item>
-          </a-sub-menu>
+          <AppMenuTree :menus="auth.menus" />
         </a-menu>
       </div>
  
@@ -83,18 +38,22 @@
             <menu-unfold-outlined />
           </button>
           <div class="topbar-header-info">
-            <transition name="breadcrumb-fade" mode="out-in">
-              <a-breadcrumb :key="route.path" class="custom-breadcrumb">
-                <template #separator>
-                  <span class="bc-separator"><right-outlined /></span>
-                </template>
-                <a-breadcrumb-item v-for="(bc, idx) in breadcrumbs" :key="idx">
-                  <span :class="idx === breadcrumbs.length - 1 ? 'bc-last' : 'bc-parent'">
-                    {{ bc.title }}
-                  </span>
-                </a-breadcrumb-item>
-              </a-breadcrumb>
-            </transition>
+            <a-breadcrumb class="custom-breadcrumb" separator="/">
+              <a-breadcrumb-item key="home">
+                <router-link :to="auth.fallbackHomePath">
+                  <home-outlined />
+                </router-link>
+              </a-breadcrumb-item>
+              <a-breadcrumb-item v-for="bc in breadcrumbs" :key="bc.code || bc.path || bc.name">
+                <router-link v-if="bc.path && bc.path !== route.path" :to="bc.path">
+                  {{ bc.name }}
+                </router-link>
+                <span v-else :class="bc.path === route.path ? 'bc-last' : 'bc-parent'">
+                  {{ bc.name }}
+                </span>
+              </a-breadcrumb-item>
+            </a-breadcrumb>
+            <h1>{{ currentTitle }}</h1>
           </div>
         </div>
         <div class="topbar-actions">
@@ -129,8 +88,8 @@
             <a-button type="text" class="profile-button">
               <span class="profile-avatar">{{ avatarText }}</span>
               <span class="profile-copy">
-                <strong>{{ auth.userInfo?.userNickname || '管理员' }}</strong>
-                <small>{{ auth.userInfo?.role === 'admin' ? '超级管理员' : '分站管理员' }}</small>
+                <strong>{{ auth.user?.userNickname || '管理员' }}</strong>
+                <small>{{ auth.user?.role === 'admin' ? '超级管理员' : '分站管理员' }}</small>
               </span>
               <down-outlined />
             </a-button>
@@ -165,72 +124,33 @@
       </div>
       <a-menu
         v-model:selectedKeys="selectedKeys"
-        :theme="app.isDarkMode ? 'dark' : 'light'"
         mode="inline"
-        @click="onMenuClick(); collapsed = true"
+        @click="onMobileMenuClick"
       >
-        <a-menu-item key="/dashboard">
-          <template #icon><home-outlined /></template>
-          工作台
-        </a-menu-item>
-        <a-menu-item v-if="isAdmin" key="/city">
-          <template #icon><global-outlined /></template>
-          租户管理
-        </a-menu-item>
-        <a-menu-item v-if="isAdmin" key="/substation">
-          <template #icon><apartment-outlined /></template>
-          分站管理
-        </a-menu-item>
-        <a-sub-menu key="merchant">
-          <template #icon><shop-outlined /></template>
-          <template #title>商家管理</template>
-          <a-menu-item key="/merchant/enter">入驻申请</a-menu-item>
-          <a-menu-item key="/merchant/store">店铺管理</a-menu-item>
-        </a-sub-menu>
-        <a-menu-item key="/rider">
-          <template #icon><user-outlined /></template>
-          骑手管理
-        </a-menu-item>
-        <a-menu-item key="/rider/evaluate">
-          <template #icon><star-outlined /></template>
-          骑手评价
-        </a-menu-item>
-        <a-sub-menu key="orders">
-          <template #icon><unordered-list-outlined /></template>
-          <template #title>订单管理</template>
-          <a-menu-item key="/order">订单列表</a-menu-item>
-          <a-menu-item key="/refund">退款管理</a-menu-item>
-          <a-menu-item key="/delivery/order">配送订单</a-menu-item>
-        </a-sub-menu>
-        <a-sub-menu key="config">
-          <template #icon><control-outlined /></template>
-          <template #title>配置中心</template>
-          <a-menu-item key="/config/fee-plan">配送费配置</a-menu-item>
-          <a-menu-item key="/dispatch/rule">调度配置</a-menu-item>
-        </a-sub-menu>
-        <a-sub-menu key="open">
-          <template #icon><api-outlined /></template>
-          <template #title>开放平台</template>
-          <a-menu-item key="/open">应用管理</a-menu-item>
-          <a-menu-item key="/open/mock-delivery">模拟推单</a-menu-item>
-        </a-sub-menu>
+        <AppMenuTree :menus="auth.menus" />
       </a-menu>
     </a-drawer>
   </div>
 </template>
  
 <script setup lang="ts">
-import { theme } from 'ant-design-vue'
-import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useAppStore } from '@/stores/app'
+import { findMenuTrailByPath } from '@/utils/menu'
+import AppMenuTree from '@/components/AppMenuTree.vue'
 import {
-  GlobalOutlined, ApartmentOutlined, ShopOutlined,
-  UserOutlined, UnorderedListOutlined, ApiOutlined, DownOutlined, StarOutlined,
-  CalendarOutlined, MenuFoldOutlined, MenuUnfoldOutlined, HomeOutlined, ControlOutlined,
-  FullscreenOutlined, FullscreenExitOutlined, BellOutlined,
-  BulbOutlined, BulbFilled, RightOutlined
+  BellOutlined,
+  BulbFilled,
+  BulbOutlined,
+  CalendarOutlined,
+  DownOutlined,
+  FullscreenExitOutlined,
+  FullscreenOutlined,
+  HomeOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
 } from '@ant-design/icons-vue'
  
 const router = useRouter()
@@ -239,8 +159,9 @@ const auth = useAuthStore()
 const app = useAppStore()
 const collapsed = ref(false)
 const selectedKeys = ref([route.path])
-
 const isMobile = ref(window.innerWidth <= 960)
+const isFullscreen = ref(false)
+
 function handleResize() {
   isMobile.value = window.innerWidth <= 960
 }
@@ -248,53 +169,18 @@ function handleResize() {
 onMounted(() => {
   window.addEventListener('resize', handleResize)
 })
+
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize)
 })
  
-watch(() => route.path, (p) => { selectedKeys.value = [p] })
-
-const isAdmin = computed(() => auth.userInfo?.role === 'admin')
-
-// Breadcrumbs logic
-const menuParents: Record<string, string> = {
-  '/merchant/enter': '商家管理',
-  '/merchant/store': '商家管理',
-  '/order': '订单管理',
-  '/refund': '订单管理',
-  '/delivery/order': '订单管理',
-  '/config/fee-plan': '配置中心',
-  '/dispatch/rule': '配置中心',
-  '/open': '开放平台',
-  '/open/mock-delivery': '开放平台',
-}
-
-const breadcrumbs = computed(() => {
-  const list = []
-  const parentTitle = menuParents[route.path]
-  if (parentTitle) {
-    list.push({ title: parentTitle, path: '' })
-  }
-  if (route.meta && route.meta.title) {
-    list.push({ title: route.meta.title as string, path: route.path })
-  }
-  return list
+watch(() => route.path, (path) => {
+  selectedKeys.value = [path]
 })
  
-const isFullscreen = ref(false)
-function toggleFullscreen() {
-  if (!document.fullscreenElement) {
-    document.documentElement.requestFullscreen()
-    isFullscreen.value = true
-  } else {
-    if (document.exitFullscreen) {
-      document.exitFullscreen()
-      isFullscreen.value = false
-    }
-  }
-}
-
-const avatarText = computed(() => (auth.userInfo?.userNickname || '管理员').slice(0, 1))
+const breadcrumbs = computed(() => findMenuTrailByPath(auth.menus, route.path))
+const currentTitle = computed(() => breadcrumbs.value[breadcrumbs.value.length - 1]?.name || (route.meta.title as string) || '外卖管理')
+const avatarText = computed(() => (auth.user?.userNickname || '管理员').slice(0, 1))
 const todayLabel = computed(() => new Intl.DateTimeFormat('zh-CN', {
   month: 'long',
   day: 'numeric',
@@ -305,6 +191,23 @@ function onMenuClick({ key }: { key: string }) {
   router.push(key)
 }
  
+function onMobileMenuClick({ key }: { key: string }) {
+  router.push(key)
+  collapsed.value = true
+}
+
+function toggleFullscreen() {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen()
+    isFullscreen.value = true
+    return
+  }
+  if (document.exitFullscreen) {
+    document.exitFullscreen()
+    isFullscreen.value = false
+  }
+}
+
 function handleLogout() {
   auth.logout()
   router.push('/login')
@@ -378,7 +281,7 @@ function handleLogout() {
   border-radius: 12px;
   border: none;
   background: var(--line-strong);
-  color: var(--brand);
+  color: var(--brand-deep);
   cursor: pointer;
   margin-bottom: 12px;
 }
@@ -417,38 +320,44 @@ function handleLogout() {
   flex-direction: column;
 }
  
-.brand-copy strong {
-  font-size: 15px;
-  line-height: 1.35;
-}
-
-.brand-copy span {
-  margin-top: 2px;
-  font-size: 11px;
-  line-height: 1.4;
-}
-
 .brand-copy strong,
 .profile-copy strong,
-.hero-copy h2,
-.insight-card strong,
-h1 {
+.topbar-header-info h1,
+.drawer-brand strong {
   font-family: 'Outfit', sans-serif;
   color: var(--text-dark);
 }
  
+.brand-copy strong {
+  font-size: 15px;
+  line-height: 1.35;
+}
+
 .brand-copy span,
 .profile-copy small,
-.eyebrow,
-.hero-copy p,
-.insight-card p,
-.note-list {
+.date-pill,
+.bc-parent {
   color: var(--text-soft);
 }
  
+.brand-copy span {
+  margin-top: 2px;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
 :deep(.ant-menu) {
   min-height: 100%;
   background: transparent;
+  border-inline-end: none;
+}
+
+.soft-sider :deep(.ant-menu-item),
+.soft-sider :deep(.ant-menu-submenu-title),
+.soft-sider :deep(.ant-menu-title-content),
+.soft-sider :deep(.ant-menu-item .anticon),
+.soft-sider :deep(.ant-menu-submenu-title .anticon) {
+  color: var(--text-main);
 }
  
 .soft-sider.collapsed :deep(.ant-menu) {
@@ -463,6 +372,13 @@ h1 {
   padding: 12px;
 }
  
+.sider-foot p {
+  margin: 8px 0 0;
+  color: var(--text-soft);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
 .soft-chip {
   display: inline-flex;
   align-items: center;
@@ -490,21 +406,46 @@ h1 {
   gap: 18px;
 }
  
-.soft-topbar h1 {
-  margin: 4px 0 0;
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.topbar-header-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.topbar-header-info h1 {
+  margin: 0;
   font-size: 22px;
   line-height: 1.3;
 }
  
-.eyebrow {
-  margin: 0;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  font-size: 10px;
-  font-weight: 700;
+:deep(.custom-breadcrumb) {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+:deep(.custom-breadcrumb li) {
+  display: inline-flex;
+  align-items: center;
+}
+
+.bc-parent,
+.bc-last {
+  font-size: 13px;
+}
+
+.bc-last {
+  color: var(--text-dark);
 }
  
-.topbar-actions {
+.topbar-actions,
+.header-action-group {
   display: flex;
   align-items: center;
   gap: 10px;
@@ -593,69 +534,6 @@ h1 {
   display: none !important;
 }
  
-.topbar-left {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.topbar-header-info {
-  display: flex;
-  align-items: center;
-  height: 40px;
-}
-
-:deep(.custom-breadcrumb) {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0;
-}
-
-:deep(.custom-breadcrumb li) {
-  display: inline-flex;
-  align-items: center;
-}
-
-.bc-separator {
-  font-size: 11px;
-  opacity: 0.6;
-  color: var(--text-soft);
-  margin: 0 4px;
-}
-
-.bc-parent {
-  color: var(--text-soft) !important;
-  font-size: 14px;
-}
-
-.bc-last {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-main) !important;
-  letter-spacing: 0.5px;
-}
-
-/* Breadcrumb transition */
-.breadcrumb-fade-enter-active,
-.breadcrumb-fade-leave-active {
-  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-.breadcrumb-fade-enter-from {
-  opacity: 0;
-  transform: translateX(10px);
-}
-.breadcrumb-fade-leave-to {
-  opacity: 0;
-  transform: translateX(-10px);
-}
-
-.header-action-group {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-right: 8px;
-}
-
 .mobile-menu-trigger {
   width: 40px;
   height: 40px;
@@ -677,15 +555,16 @@ h1 {
   padding: 12px 16px 24px;
 }
  
-
 .fade-slide-enter-active,
 .fade-slide-leave-active {
   transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
+
 .fade-slide-enter-from {
   opacity: 0;
   transform: translateY(10px);
 }
+
 .fade-slide-leave-to {
   opacity: 0;
   transform: translateY(-10px);
@@ -696,7 +575,7 @@ h1 {
     grid-template-columns: 1fr;
     padding: 12px;
   }
-  
+
   .hide-sm {
     display: none !important;
   }
@@ -714,12 +593,8 @@ h1 {
     width: auto;
   }
  
-  .soft-topbar h1 {
+  .topbar-header-info h1 {
     font-size: 20px;
   }
-
-  .hero-copy h2 {
-    font-size: 28px;
-  }
 }
 </style>
@@ -99,6 +99,30 @@ const router = createRouter({
           component: () => import('@/views/open/OpenMockDelivery.vue'),
           meta: { title: '模拟推单' },
         },
+        {
+          path: 'system/menu',
+          name: 'SystemMenu',
+          component: () => import('@/views/system/MenuManage.vue'),
+          meta: { title: '菜单管理' },
+        },
+        {
+          path: 'system/role',
+          name: 'SystemRole',
+          component: () => import('@/views/system/RoleList.vue'),
+          meta: { title: '角色管理' },
+        },
+        {
+          path: 'system/role-menu',
+          name: 'SystemRoleMenu',
+          component: () => import('@/views/system/RoleMenuAssign.vue'),
+          meta: { title: '角色菜单' },
+        },
+        {
+          path: 'admin-user',
+          name: 'AdminUser',
+          component: () => import('@/views/admin/AdminUserList.vue'),
+          meta: { title: '平台账号' },
+        },
       ],
     },
     { path: '/:pathMatch(.*)*', redirect: '/' },
@@ -110,13 +134,21 @@ router.beforeEach((to) =&gt; {
   if (!to.meta.public && !auth.token) {
     return { path: '/login' }
   }
-  
-  // Start loading progress
+
+  if (!to.meta.public && auth.token) {
+    if (!auth.menus.length) {
+      auth.logout()
+      return { path: '/login' }
+    }
+    if (to.path !== '/' && !auth.hasPath(to.path)) {
+      return { path: auth.fallbackHomePath }
+    }
+  }
+
   document.body.classList.add('loading')
 })
  
 router.afterEach(() => {
-  // Stop loading progress
   setTimeout(() => {
     document.body.classList.remove('loading')
   }, 300)
+import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import type { AuthUser, LoginResponse, MenuNode } from '@/types/auth'
+import { findFirstMenuPath, flattenMenuPaths } from '@/utils/menu'
  
 export const useAuthStore = defineStore('auth', () => {
   const token = ref(localStorage.getItem('token') || '')
-  const userInfo = ref<any>(JSON.parse(localStorage.getItem('userInfo') || 'null'))
+  const user = ref<AuthUser | null>(JSON.parse(localStorage.getItem('user') || 'null'))
+  const menus = ref<MenuNode[]>(JSON.parse(localStorage.getItem('menus') || '[]'))
+  const homePath = ref(localStorage.getItem('homePath') || '')
+
+  const isAdmin = computed(() => user.value?.role === 'admin')
+  const flatMenuPaths = computed(() => flattenMenuPaths(menus.value))
+  const fallbackHomePath = computed(() => homePath.value || findFirstMenuPath(menus.value) || '/dashboard')
  
   function setToken(t: string) {
     token.value = t
     localStorage.setItem('token', t)
   }
  
-  function setUserInfo(info: any) {
-    userInfo.value = info
-    localStorage.setItem('userInfo', JSON.stringify(info))
+  function setSession(payload: LoginResponse) {
+    token.value = payload.token
+    user.value = payload.user
+    menus.value = payload.menus || []
+    homePath.value = payload.homePath || findFirstMenuPath(menus.value) || '/dashboard'
+    localStorage.setItem('token', token.value)
+    localStorage.setItem('user', JSON.stringify(user.value))
+    localStorage.setItem('menus', JSON.stringify(menus.value))
+    localStorage.setItem('homePath', homePath.value)
+  }
+
+  function hasPath(path: string) {
+    return flatMenuPaths.value.includes(path)
   }
  
   function logout() {
     token.value = ''
-    userInfo.value = null
+    user.value = null
+    menus.value = []
+    homePath.value = ''
     localStorage.removeItem('token')
-    localStorage.removeItem('userInfo')
+    localStorage.removeItem('user')
+    localStorage.removeItem('menus')
+    localStorage.removeItem('homePath')
   }
  
-  return { token, userInfo, setToken, setUserInfo, logout }
+  return {
+    token,
+    user,
+    menus,
+    homePath,
+    isAdmin,
+    flatMenuPaths,
+    fallbackHomePath,
+    setToken,
+    setSession,
+    hasPath,
+    logout,
+  }
 })
@@ -326,6 +326,45 @@ a {
   font-size: var(--font-size-sm);
 }
  
+.dark .ant-tag,
+.dark .ant-tag.ant-tag-default,
+.dark .ant-tag:not([class*='ant-tag-']) {
+  background: rgba(255, 255, 255, 0.1) !important;
+  color: var(--text-main) !important;
+}
+
+.dark .ant-tag-green {
+  background: rgba(82, 196, 26, 0.18) !important;
+  color: #b7eb8f !important;
+}
+
+.dark .ant-tag-red,
+.dark .ant-tag-volcano,
+.dark .ant-tag-error {
+  background: rgba(255, 77, 79, 0.18) !important;
+  color: #ffb3b3 !important;
+}
+
+.dark .ant-tag-orange,
+.dark .ant-tag-gold,
+.dark .ant-tag-warning {
+  background: rgba(250, 173, 20, 0.18) !important;
+  color: #ffd666 !important;
+}
+
+.dark .ant-tag-blue,
+.dark .ant-tag-processing,
+.dark .ant-tag-cyan {
+  background: rgba(22, 119, 255, 0.2) !important;
+  color: #91caff !important;
+}
+
+.dark .ant-tag-purple,
+.dark .ant-tag-magenta {
+  background: rgba(114, 46, 209, 0.2) !important;
+  color: #d3adf7 !important;
+}
+
 .ant-menu {
   background: transparent !important;
   font-size: var(--font-size-md);
@@ -338,7 +377,6 @@ a {
   margin-block: 4px !important;
   width: calc(100% - 16px) !important;
   font-size: var(--font-size-md) !important;
-  color: var(--text-main);
 }
  
 .ant-form-item {
@@ -352,10 +390,11 @@ a {
   font-size: var(--font-size-md);
 }
  
-.ant-menu-item-selected,
-.ant-menu-submenu-selected > .ant-menu-submenu-title {
-  background: var(--panel-tint) !important;
-  color: var(--brand) !important;
+.ant-menu-light .ant-menu-item-selected,
+.ant-menu-light > .ant-menu .ant-menu-item-selected,
+.ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title {
+  background: linear-gradient(135deg, rgba(140, 124, 240, 0.18), rgba(255, 212, 235, 0.3)) !important;
+  color: var(--brand-deep) !important;
 }
  
 .ant-menu-submenu-popup .ant-menu {
@@ -384,10 +423,183 @@ a {
  
 .ant-menu-item:hover,
 .ant-menu-submenu-title:hover {
-  color: var(--brand) !important;
+  color: var(--brand-deep) !important;
   background: var(--line) !important;
 }
  
+.dark .ant-menu-item,
+.dark .ant-menu-submenu-title,
+.dark .ant-menu-title-content,
+.dark .ant-menu-item a,
+.dark .ant-menu-item .anticon,
+.dark .ant-menu-submenu-title .anticon,
+.dark .ant-dropdown-menu-item,
+.dark .ant-dropdown-menu-title-content,
+.dark .ant-breadcrumb,
+.dark .ant-breadcrumb a,
+.dark .ant-breadcrumb-link,
+.dark .ant-breadcrumb-separator,
+.dark .ant-empty-description,
+.dark .ant-form-item-label > label,
+.dark .ant-form-item-explain,
+.dark .ant-modal .ant-modal-close,
+.dark .ant-modal .ant-modal-close-x,
+.dark .ant-modal-confirm-body,
+.dark .ant-modal-confirm-content,
+.dark .ant-modal-confirm-title,
+.dark .ant-popconfirm-message,
+.dark .ant-popconfirm-description,
+.dark .ant-tree,
+.dark .ant-tree .ant-tree-node-content-wrapper,
+.dark .ant-tree .ant-tree-iconEle,
+.dark .ant-tree .ant-tree-switcher,
+.dark .ant-select-arrow,
+.dark .ant-select-clear,
+.dark .ant-picker-suffix,
+.dark .ant-input-password-icon,
+.dark .ant-pagination,
+.dark .ant-pagination .ant-pagination-item-link,
+.dark .ant-radio-wrapper,
+.dark .ant-radio-button-wrapper,
+.dark .ant-switch,
+.dark .ant-descriptions,
+.dark .ant-descriptions-item-content,
+.dark .ant-descriptions-item-label,
+.dark .ant-tag,
+.dark .ant-btn .anticon,
+.dark .ant-btn-text,
+.dark .ant-btn-link,
+.dark .ant-btn-default {
+  color: var(--text-main) !important;
+}
+
+.dark .ant-menu-submenu-arrow,
+.dark .ant-menu-submenu-arrow::before,
+.dark .ant-menu-submenu-arrow::after,
+.dark .ant-breadcrumb-separator,
+.dark .ant-select-arrow,
+.dark .ant-picker-suffix,
+.dark .ant-input-password-icon,
+.dark .ant-tree .ant-tree-switcher,
+.dark .ant-modal .ant-modal-close-x,
+.dark .ant-btn .anticon {
+  color: var(--text-soft) !important;
+  border-color: var(--text-soft) !important;
+}
+
+.dark .ant-menu-light .ant-menu-item-selected,
+.dark .ant-menu-light > .ant-menu .ant-menu-item-selected,
+.dark .ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title,
+.dark .ant-tree .ant-tree-node-content-wrapper:hover,
+.dark .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
+.dark .ant-pagination .ant-pagination-item-active {
+  background: rgba(140, 124, 240, 0.2) !important;
+  color: var(--brand-soft) !important;
+}
+
+.dark .ant-menu-light .ant-menu-item-selected .anticon,
+.dark .ant-menu-light .ant-menu-item-selected .ant-menu-title-content,
+.dark .ant-menu-light > .ant-menu .ant-menu-item-selected .anticon,
+.dark .ant-menu-light > .ant-menu .ant-menu-item-selected .ant-menu-title-content,
+.dark .ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title .anticon,
+.dark .ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title .ant-menu-title-content,
+.dark .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
+.dark .ant-pagination .ant-pagination-item-active a,
+.dark .ant-pagination .ant-pagination-item-active .anticon {
+  color: var(--brand-soft) !important;
+}
+
+.dark .ant-popover .ant-popover-inner,
+.dark .ant-popconfirm .ant-popover-inner,
+.dark .ant-dropdown .ant-dropdown-menu,
+.dark .ant-select-dropdown,
+.dark .ant-picker-dropdown,
+.dark .ant-tooltip .ant-tooltip-inner,
+.dark .ant-drawer .ant-drawer-content,
+.dark .ant-drawer .ant-drawer-header,
+.dark .ant-drawer .ant-drawer-body,
+.dark .ant-table-wrapper .ant-table,
+.dark .ant-table-wrapper .ant-table-container,
+.dark .ant-table-wrapper .ant-table-thead > tr > th,
+.dark .ant-table-wrapper .ant-table-tbody > tr > td {
+  background: var(--panel-strong) !important;
+  color: var(--text-main) !important;
+  border-color: var(--line) !important;
+}
+
+.dark .ant-select-dropdown .ant-select-item,
+.dark .ant-select-dropdown .ant-select-item-option-content,
+.dark .ant-select-dropdown .ant-empty-description {
+  color: var(--text-main) !important;
+}
+
+.dark .ant-select-dropdown .ant-select-item-option-active,
+.dark .ant-select-dropdown .ant-select-item-option-selected,
+.dark .ant-dropdown-menu-item:hover,
+.dark .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
+  background: rgba(140, 124, 240, 0.2) !important;
+  color: var(--text-main) !important;
+}
+
+.dark .ant-select-dropdown .ant-select-item-option-selected .ant-select-item-option-content,
+.dark .ant-select-dropdown .ant-select-item-option-active .ant-select-item-option-content {
+  color: var(--text-main) !important;
+}
+
+.dark .ant-select .ant-select-selection-item,
+.dark .ant-select .ant-select-selection-placeholder,
+.dark .ant-tree-select .ant-select-selection-item,
+.dark .ant-tree-select .ant-select-selection-placeholder,
+.dark .ant-input::placeholder,
+.dark .ant-input-password input::placeholder,
+.dark .ant-input-number input::placeholder,
+.dark .ant-picker input::placeholder,
+.dark .ant-form-item-extra,
+.dark .ant-form-item-explain,
+.dark .ant-form-item-explain-error,
+.dark .ant-form-item-explain-warning,
+.dark .ant-empty-footer,
+.dark .ant-empty-normal,
+.dark .ant-empty-image,
+.dark .ant-empty-image svg,
+.dark .ant-pagination .ant-pagination-item,
+.dark .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
+.dark .ant-pagination .ant-pagination-next .ant-pagination-item-link,
+.dark .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled),
+.dark .ant-radio-group-solid .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled),
+.dark .ant-table-wrapper .ant-table-cell,
+.dark .ant-table-wrapper .ant-table-column-sorter,
+.dark .ant-table-wrapper .ant-table-filter-trigger,
+.dark .ant-table-wrapper .ant-empty-description,
+.dark .ant-modal .ant-modal-header,
+.dark .ant-modal .ant-modal-footer,
+.dark .ant-modal .ant-modal-title,
+.dark .ant-modal .ant-modal-close,
+.dark .ant-popover .ant-popover-title,
+.dark .ant-popconfirm-title,
+.dark .ant-drawer .ant-drawer-title,
+.dark .ant-drawer .ant-drawer-close,
+.dark .ant-drawer .ant-drawer-header,
+.dark .ant-drawer .ant-drawer-body,
+.dark .ant-drawer .ant-drawer-footer,
+.dark .ant-drawer .ant-drawer-close .anticon,
+.dark .ant-btn-background-ghost,
+.dark .ant-btn-default:disabled,
+.dark .ant-btn[disabled],
+.dark .ant-input[disabled],
+.dark .ant-input-affix-wrapper-disabled,
+.dark .ant-input-number-disabled,
+.dark .ant-select-disabled .ant-select-selector,
+.dark .ant-picker.ant-picker-disabled {
+  color: var(--text-main) !important;
+  border-color: var(--line) !important;
+}
+
+.dark .ant-popconfirm-buttons .ant-btn-default,
+.dark .ant-modal .ant-btn-default {
+  color: var(--text-main) !important;
+}
+
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
   color: var(--brand);
   background: var(--panel-strong);
@@ -548,6 +760,50 @@ a {
   padding-top: 16px;
 }
  
+.dark .ant-input::placeholder,
+.dark .ant-input-password input::placeholder,
+.dark .ant-input-number input::placeholder,
+.dark .ant-picker input::placeholder,
+.dark .ant-select .ant-select-selection-placeholder,
+.dark .ant-tree-select .ant-select-selection-placeholder,
+.dark .ant-form-item-extra,
+.dark .ant-form-item-explain,
+.dark .ant-form-item-explain-error,
+.dark .ant-form-item-explain-warning {
+  color: var(--text-soft) !important;
+}
+
+.dark .ant-btn-default:disabled,
+.dark .ant-btn[disabled],
+.dark .ant-input[disabled],
+.dark .ant-input-affix-wrapper-disabled,
+.dark .ant-input-number-disabled,
+.dark .ant-select-disabled .ant-select-selector,
+.dark .ant-picker.ant-picker-disabled {
+  background: rgba(255, 255, 255, 0.04) !important;
+}
+
+.dark .ant-table-wrapper .ant-table-thead > tr > th,
+.dark .ant-table-wrapper .ant-table-tbody > tr > td {
+  background: transparent !important;
+}
+
+.dark .ant-table-wrapper .ant-table-tbody > tr:hover > td {
+  background: rgba(255, 255, 255, 0.04) !important;
+}
+
+.dark .ant-pagination .ant-pagination-item,
+.dark .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
+.dark .ant-pagination .ant-pagination-next .ant-pagination-item-link,
+.dark .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled),
+.dark .ant-radio-group-solid .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled) {
+  background: var(--panel) !important;
+}
+
+.dark .ant-drawer .ant-drawer-mask {
+  background: rgba(8, 8, 16, 0.55) !important;
+}
+
 @media (max-width: 1200px) {
   .soft-page-shell {
     padding: 18px;
+export interface MenuNode {
+  id: number
+  code: string
+  name: string
+  type: 'DIR' | 'MENU'
+  path?: string
+  icon?: string
+  children: MenuNode[]
+}
+
+export interface AuthUser {
+  id: number
+  userLogin: string
+  userNickname: string
+  role: 'admin' | 'substation'
+  roleType: 'admin' | 'substation'
+  roleCode: string
+  cityId?: number
+  cityName?: string
+}
+
+export interface LoginResponse {
+  token: string
+  user: AuthUser
+  menus: MenuNode[]
+  homePath?: string
+}
+import type { MenuNode } from '@/types/auth'
+
+export function flattenMenuPaths(menus: MenuNode[]): string[] {
+  const paths: string[] = []
+  const walk = (items: MenuNode[]) => {
+    for (const item of items) {
+      if (item.path) paths.push(item.path)
+      if (item.children?.length) walk(item.children)
+    }
+  }
+  walk(menus)
+  return paths
+}
+
+export function flattenMenus(menus: MenuNode[]): MenuNode[] {
+  const result: MenuNode[] = []
+  const walk = (items: MenuNode[]) => {
+    for (const item of items) {
+      result.push(item)
+      if (item.children?.length) walk(item.children)
+    }
+  }
+  walk(menus)
+  return result
+}
+
+export function findMenuByPath(menus: MenuNode[], path: string): MenuNode | null {
+  for (const item of menus) {
+    if (item.path === path) return item
+    if (item.children?.length) {
+      const found = findMenuByPath(item.children, path)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+export function findMenuTrailByPath(menus: MenuNode[], path: string): MenuNode[] {
+  for (const item of menus) {
+    if (item.path === path) return [item]
+    if (item.children?.length) {
+      const childTrail = findMenuTrailByPath(item.children, path)
+      if (childTrail.length) return [item, ...childTrail]
+    }
+  }
+  return []
+}
+
+export function findFirstMenuPath(menus: MenuNode[]): string {
+  for (const item of menus) {
+    if (item.path) return item.path
+    if (item.children?.length) {
+      const childPath = findFirstMenuPath(item.children)
+      if (childPath) return childPath
+    }
+  }
+  return '/dashboard'
+}
+
+export function filterPinnedMenuEntries(
+  menus: MenuNode[],
+  pinned: Array<{ path: string; title: string; desc: string }>
+) {
+  const available = new Set(flattenMenuPaths(menus))
+  return pinned.filter(item => available.has(item.path))
+}
@@ -59,10 +59,10 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { message } from 'ant-design-vue'
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
 import { useAuthStore } from '@/stores/auth'
 import request from '@/utils/request'
+import type { LoginResponse } from '@/types/auth'
 import heroImage from '@/assets/hero.png'
  
 const router = useRouter()
@@ -74,9 +74,8 @@ async function onSubmit() {
   loading.value = true
   try {
     const res: any = await request.post('/api/admin/auth/login', form)
-    auth.setToken(res.data.token)
-    auth.setUserInfo(res.data)
-    router.push('/')
+    auth.setSession(res.data as LoginResponse)
+    router.push(auth.fallbackHomePath)
   } catch {
     // 错误已由 request 拦截器处理
   } finally {
+<template>
+  <div>
+    <a-card title="平台账号管理" :bordered="false" class="list-table-card">
+      <div class="list-toolbar">
+        <div class="list-toolbar-left">
+          <a-input-search v-model:value="keyword" placeholder="搜索账号/昵称" @search="loadList" class="list-search" />
+        </div>
+        <div class="list-toolbar-right">
+          <a-button type="primary" @click="openAdd">新增平台账号</a-button>
+        </div>
+      </div>
+      <a-table :dataSource="list" :columns="columns" :loading="loading" rowKey="id" :pagination="false">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'roleId'">
+            {{ getRoleName(record.roleId) }}
+          </template>
+          <template v-if="column.key === 'status'">
+            <a-tag :color="record.userStatus === 1 ? 'green' : 'red'">
+              {{ record.userStatus === 1 ? '正常' : '禁用' }}
+            </a-tag>
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(record)">编辑</a>
+              <a @click="openChangePwd(record)">改密码</a>
+              <a-popconfirm
+                :title="record.userStatus === 1 ? '确认禁用？' : '确认启用？'"
+                @confirm="toggleBan(record)"
+              >
+                <a :style="record.userStatus === 1 ? 'color:red' : ''">
+                  {{ record.userStatus === 1 ? '禁用' : '启用' }}
+                </a>
+              </a-popconfirm>
+              <a-popconfirm title="确认删除？" @confirm="handleDel(record.id)">
+                <a style="color:red">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <a-modal v-model:open="modalVisible" :title="editingId ? '编辑平台账号' : '新增平台账号'" @ok="handleSave" :confirmLoading="saving">
+      <div class="soft-page-stack">
+        <div class="soft-note-card">
+          <strong>平台账号说明</strong>
+          <p>平台账号用于后台平台功能管理，不绑定租户，通过菜单角色控制显示哪些平台菜单。</p>
+        </div>
+        <a-form :model="form" layout="vertical">
+          <a-form-item label="菜单角色">
+            <a-select v-model:value="form.roleId" placeholder="选择角色">
+              <a-select-option v-for="item in roleOptions" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="登录账号">
+            <a-input v-model:value="form.userLogin" :disabled="!!editingId" />
+          </a-form-item>
+          <a-form-item label="昵称">
+            <a-input v-model:value="form.userNickname" />
+          </a-form-item>
+          <a-form-item :label="editingId ? '新密码（不填不修改）' : '密码'">
+            <a-input-password v-model:value="form.userPass" />
+          </a-form-item>
+        </a-form>
+      </div>
+    </a-modal>
+
+    <a-modal v-model:open="pwdVisible" title="修改密码" @ok="handleChangePwd" :confirmLoading="pwdSaving">
+      <div class="soft-page-stack">
+        <div class="soft-note-card">
+          <strong>密码修改说明</strong>
+          <p>这里修改的是当前选中平台账号的登录密码，提交时会按目标平台账号执行。</p>
+        </div>
+        <a-form layout="vertical">
+          <a-form-item label="原密码">
+            <a-input-password v-model:value="pwdForm.oldPassword" />
+          </a-form-item>
+          <a-form-item label="新密码">
+            <a-input-password v-model:value="pwdForm.newPassword" />
+          </a-form-item>
+        </a-form>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { adminUserApi, systemRoleApi } from '@/api'
+
+const loading = ref(false)
+const saving = ref(false)
+const list = ref<any[]>([])
+const roleOptions = ref<any[]>([])
+const keyword = ref('')
+const modalVisible = ref(false)
+const editingId = ref<number | null>(null)
+const form = reactive({ roleId: undefined, userLogin: '', userNickname: '', userPass: '' })
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '账号', dataIndex: 'userLogin' },
+  { title: '昵称', dataIndex: 'userNickname' },
+  { title: '角色', key: 'roleId' },
+  { title: '状态', key: 'status' },
+  { title: '操作', key: 'action' },
+]
+
+function getRoleName(roleId?: number) {
+  const role = roleOptions.value.find(item => item.id === roleId)
+  return role?.name || (roleId ? `角色#${roleId}` : '-')
+}
+
+async function loadList() {
+  loading.value = true
+  try {
+    const res: any = await adminUserApi.list(keyword.value)
+    list.value = res.data
+  } finally { loading.value = false }
+}
+
+async function loadRoles() {
+  const res: any = await systemRoleApi.list()
+  roleOptions.value = Array.isArray(res?.data) ? res.data.filter((item: any) => item.roleScope === 'PLATFORM') : []
+}
+
+function openAdd() {
+  editingId.value = null
+  Object.assign(form, { roleId: roleOptions.value[0]?.id, userLogin: '', userNickname: '', userPass: '' })
+  modalVisible.value = true
+}
+
+function openEdit(record: any) {
+  editingId.value = record.id
+  Object.assign(form, { roleId: record.roleId, userLogin: record.userLogin, userNickname: record.userNickname, userPass: '' })
+  modalVisible.value = true
+}
+
+async function handleSave() {
+  if (!form.roleId) {
+    message.error('请选择菜单角色')
+    return
+  }
+  saving.value = true
+  try {
+    if (editingId.value) {
+      await adminUserApi.edit({ ...form, id: editingId.value })
+    } else {
+      await adminUserApi.add(form)
+    }
+    message.success('保存成功')
+    modalVisible.value = false
+    loadList()
+  } finally { saving.value = false }
+}
+
+async function toggleBan(record: any) {
+  if (record.userStatus === 1) {
+    await adminUserApi.ban(record.id)
+  } else {
+    await adminUserApi.cancelBan(record.id)
+  }
+  message.success('操作成功')
+  loadList()
+}
+
+async function handleDel(id: number) {
+  await adminUserApi.del(id)
+  message.success('删除成功')
+  loadList()
+}
+
+const pwdVisible = ref(false)
+const pwdSaving = ref(false)
+const pwdForm = reactive({ oldPassword: '', newPassword: '' })
+const pwdTargetId = ref(0)
+
+function openChangePwd(record: any) {
+  pwdTargetId.value = record.id
+  Object.assign(pwdForm, { oldPassword: '', newPassword: '' })
+  pwdVisible.value = true
+}
+
+async function handleChangePwd() {
+  if (!pwdForm.oldPassword || !pwdForm.newPassword) {
+    message.error('请填写完整密码')
+    return
+  }
+  pwdSaving.value = true
+  try {
+    await adminUserApi.changePassword({ id: pwdTargetId.value, ...pwdForm })
+    message.success('密码修改成功')
+    pwdVisible.value = false
+  } finally { pwdSaving.value = false }
+}
+
+onMounted(() => { loadList(); loadRoles() })
+</script>
@@ -451,11 +451,11 @@ type PieceRuleForm = {
  
 const route = useRoute()
 const auth = useAuthStore()
-const isAdmin = computed(() => auth.userInfo?.role === 'admin')
-const managedCityId = computed<number | undefined>(() => auth.userInfo?.cityId)
+const isAdmin = computed(() => auth.user?.role === 'admin')
+const managedCityId = computed<number | undefined>(() => auth.user?.cityId)
 const cityList = ref<any[]>([])
 const selectedCityId = ref<number | undefined>()
-const currentCityName = computed(() => cityList.value.find(item => item.id === selectedCityId.value)?.name || auth.userInfo?.cityName || '')
+const currentCityName = computed(() => cityList.value.find(item => item.id === selectedCityId.value)?.name || auth.user?.cityName || '')
  
 const config = ref<any>(null)
 const planList = ref<any[]>([])
@@ -491,7 +491,7 @@ async function loadCities() {
     }
   } else {
     selectedCityId.value = managedCityId.value
-    cityList.value = selectedCityId.value ? [{ id: selectedCityId.value, name: auth.userInfo?.cityName || `租户#${selectedCityId.value}` }] : []
+    cityList.value = selectedCityId.value ? [{ id: selectedCityId.value, name: auth.user?.cityName || `租户#${selectedCityId.value}` }] : []
   }
  
   if (selectedCityId.value) {
@@ -57,17 +57,17 @@
 </template>
  
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import heroImage from '@/assets/hero.png'
+import { useAuthStore } from '@/stores/auth'
+import { pinnedQuickLinks } from '@/config/menu'
+import { filterPinnedMenuEntries } from '@/utils/menu'
  
 const router = useRouter()
+const auth = useAuthStore()
  
-const quickLinks = [
-  { path: '/city', title: '租户管理', desc: '配置配送费、骑手等级与租户信息' },
-  { path: '/rider', title: '骑手管理', desc: '查看骑手、设置等级和账号状态' },
-  { path: '/order', title: '订单列表', desc: '集中处理配送中的订单流转' },
-  { path: '/substation', title: '分站管理', desc: '维护租户站点账号和权限' },
-]
+const quickLinks = computed(() => filterPinnedMenuEntries(auth.menus, pinnedQuickLinks))
  
 function go(path: string) {
   router.push(path)
@@ -241,11 +241,11 @@ import { cityApi, dispatchRuleApi } from &#39;@/api&#39;
 import { useAuthStore } from '@/stores/auth'
  
 const auth = useAuthStore()
-const isAdmin = computed(() => auth.userInfo?.role === 'admin')
-const managedCityId = computed<number | undefined>(() => auth.userInfo?.cityId)
+const isAdmin = computed(() => auth.user?.role === 'admin')
+const managedCityId = computed<number | undefined>(() => auth.user?.cityId)
 const cityList = ref<any[]>([])
 const selectedCityId = ref<number | undefined>()
-const currentCityName = computed(() => cityList.value.find(item => item.id === selectedCityId.value)?.name || auth.userInfo?.cityName || '')
+const currentCityName = computed(() => cityList.value.find(item => item.id === selectedCityId.value)?.name || auth.user?.cityName || '')
 const templateList = ref<any[]>([])
 const selectedTemplateId = ref<number | null>(null)
 const loadingTemplates = ref(false)
@@ -300,7 +300,7 @@ async function loadCities() {
     }
   } else {
     selectedCityId.value = managedCityId.value
-    cityList.value = selectedCityId.value ? [{ id: selectedCityId.value, name: auth.userInfo?.cityName || `租户#${selectedCityId.value}` }] : []
+    cityList.value = selectedCityId.value ? [{ id: selectedCityId.value, name: auth.user?.cityName || `租户#${selectedCityId.value}` }] : []
   }
  
   if (selectedCityId.value) {
@@ -146,7 +146,7 @@ const levelSaving = ref(false)
 const levelTargetId = ref<number>(0)
 const levelTargetName = ref('')
 const selectedLevelId = ref<number>(0)
-const isAdmin = computed(() => auth.userInfo?.role === 'admin')
+const isAdmin = computed(() => auth.user?.role === 'admin')
  
 const statusMap: Record<number, string> = { 0: '已拒绝', 1: '已通过', 2: '待审核' }
  
@@ -14,6 +14,9 @@
           <template v-if="column.key === 'cityId'">
             {{ getCityName(record.cityId) }}
           </template>
+          <template v-if="column.key === 'roleId'">
+            {{ getRoleName(record.roleId) }}
+          </template>
           <template v-if="column.key === 'status'">
             <a-tag :color="record.userStatus === 1 ? 'green' : 'red'">
               {{ record.userStatus === 1 ? '正常' : '禁用' }}
@@ -51,6 +54,11 @@
               <a-select-option v-for="c in cityList" :key="c.id" :value="c.id">{{ c.name }}</a-select-option>
             </a-select>
           </a-form-item>
+          <a-form-item label="菜单角色">
+            <a-select v-model:value="form.roleId" placeholder="选择角色">
+              <a-select-option v-for="item in roleOptions" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+            </a-select>
+          </a-form-item>
           <a-form-item label="登录账号">
             <a-input v-model:value="form.userLogin" :disabled="!!editingId" />
           </a-form-item>
@@ -87,29 +95,36 @@
 </template>
  
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import { substationApi, cityApi } from '@/api'
+import { cityApi, substationApi, systemRoleApi } from '@/api'
  
 const loading = ref(false)
 const saving = ref(false)
 const list = ref<any[]>([])
 const cityList = ref<any[]>([])
+const roleOptions = ref<any[]>([])
 const keyword = ref('')
 const modalVisible = ref(false)
 const editingId = ref<number | null>(null)
-const form = reactive({ cityId: undefined, userLogin: '', userNickname: '', mobile: '', userPass: '' })
+const form = reactive({ cityId: undefined, roleId: undefined, userLogin: '', userNickname: '', mobile: '', userPass: '' })
  
 const columns = [
   { title: 'ID', dataIndex: 'id', width: 80 },
   { title: '账号', dataIndex: 'userLogin' },
   { title: '昵称', dataIndex: 'userNickname' },
   { title: '手机', dataIndex: 'mobile' },
+  { title: '角色', key: 'roleId' },
   { title: '租户', key: 'cityId' },
   { title: '状态', key: 'status' },
   { title: '操作', key: 'action' },
 ]
  
+function getRoleName(roleId?: number) {
+  const role = roleOptions.value.find(item => item.id === roleId)
+  return role?.name || (roleId ? `角色#${roleId}` : '-')
+}
+
 function getCityName(cityId?: number) {
   const city = cityList.value.find(item => item.id === cityId)
   return city?.name || (cityId ? `租户#${cityId}` : '-')
@@ -128,19 +143,28 @@ async function loadCities() {
   cityList.value = res.data
 }
  
+async function loadRoles() {
+  const res: any = await systemRoleApi.list()
+  roleOptions.value = Array.isArray(res?.data) ? res.data.filter((item: any) => item.roleScope === 'SUBSTATION') : []
+}
+
 function openAdd() {
   editingId.value = null
-  Object.assign(form, { cityId: undefined, userLogin: '', userNickname: '', mobile: '', userPass: '' })
+  Object.assign(form, { cityId: undefined, roleId: roleOptions.value[0]?.id, userLogin: '', userNickname: '', mobile: '', userPass: '' })
   modalVisible.value = true
 }
  
 function openEdit(record: any) {
   editingId.value = record.id
-  Object.assign(form, { cityId: record.cityId, userLogin: record.userLogin, userNickname: record.userNickname, mobile: record.mobile, userPass: '' })
+  Object.assign(form, { cityId: record.cityId, roleId: record.roleId, userLogin: record.userLogin, userNickname: record.userNickname, mobile: record.mobile, userPass: '' })
   modalVisible.value = true
 }
  
 async function handleSave() {
+  if (!form.roleId) {
+    message.error('请选择菜单角色')
+    return
+  }
   saving.value = true
   try {
     if (editingId.value) {
@@ -195,5 +219,5 @@ async function handleChangePwd() {
   } finally { pwdSaving.value = false }
 }
  
-onMounted(() => { loadList(); loadCities() })
+onMounted(() => { loadList(); loadCities(); loadRoles() })
 </script>
+<template>
+  <div>
+    <a-card title="菜单管理" :bordered="false" class="list-table-card">
+      <div class="list-toolbar">
+        <div class="list-toolbar-left">
+          <a-space wrap>
+            <a-tag v-if="currentNode">{{ currentNode.menuScope }}</a-tag>
+            <a-tag v-if="currentNode" :color="currentNode.visible === 1 ? 'green' : 'default'">{{ currentNode.visible === 1 ? '显示中' : '已隐藏' }}</a-tag>
+            <a-tag v-if="currentNode" :color="currentNode.status === 1 ? 'processing' : 'default'">{{ currentNode.status === 1 ? '已启用' : '已停用' }}</a-tag>
+          </a-space>
+        </div>
+        <div class="list-toolbar-right">
+          <a-button type="primary" @click="openAddRoot">新增根菜单</a-button>
+        </div>
+      </div>
+
+      <div class="plan-layout dispatch-layout">
+        <div class="plan-sidebar">
+          <div class="plan-sidebar-header">
+            <div>
+              <div class="plan-sidebar-title">菜单树</div>
+              <div class="plan-sidebar-subtitle">维护平台和分站菜单结构</div>
+            </div>
+          </div>
+          <a-spin :spinning="loading">
+            <a-tree
+            v-if="treeData.length"
+            class="menu-tree"
+            :tree-data="treeData"
+            :selected-keys="selectedKeys"
+            :field-names="fieldNames"
+            block-node
+            default-expand-all
+            @select="handleSelect"
+          >
+              <template #title="node">
+                <span>{{ node.name }}</span>
+                <a-tag style="margin-left: 8px">{{ node.menuScope }}</a-tag>
+                <a-tag style="margin-left: 4px" :color="node.visible === 1 ? 'green' : 'default'">{{ node.visible === 1 ? '显' : '隐' }}</a-tag>
+                <a-tag style="margin-left: 4px" :color="node.status === 1 ? 'processing' : 'default'">{{ node.status === 1 ? '启' : '停' }}</a-tag>
+              </template>
+          </a-tree>
+            <a-empty v-else description="暂无菜单" />
+          </a-spin>
+        </div>
+
+        <div class="plan-content">
+          <template v-if="currentNode">
+            <div class="plan-content-top">
+              <div class="soft-note-card plan-note-card">
+                <strong>菜单配置说明</strong>
+                <p>目录节点可不填路由路径，菜单节点建议绑定前端静态路由。删除前请先清空子节点。</p>
+              </div>
+
+              <div class="plan-toolbar">
+                <div class="plan-toolbar-meta">
+                  <span class="plan-toolbar-eyebrow">当前编辑</span>
+                  <strong>{{ currentNode.name || '未命名菜单' }}</strong>
+                </div>
+                <a-space wrap>
+                  <a-button @click="openAddChild">新增子菜单</a-button>
+                  <a-button @click="toggleVisible">{{ form.visible === 1 ? '隐藏菜单' : '显示菜单' }}</a-button>
+                  <a-button @click="toggleStatus">{{ form.status === 1 ? '停用菜单' : '启用菜单' }}</a-button>
+                  <a-popconfirm title="确认删除当前菜单？" @confirm="handleDelete">
+                    <a-button danger>删除菜单</a-button>
+                  </a-popconfirm>
+                </a-space>
+                <div class="plan-toolbar-submit">
+                  <span class="plan-toolbar-tip">保存后重新登录即可看到侧边栏变化</span>
+                  <a-button type="primary" class="plan-save-button" :loading="saving" @click="handleSave">保存菜单</a-button>
+                </div>
+              </div>
+            </div>
+
+            <div class="plan-content-body">
+              <a-form :model="form" layout="vertical">
+                <div class="plan-section">
+                  <div class="plan-section-head">
+                    <div class="plan-section-chip">基础</div>
+                    <div class="soft-section-header">
+                      <div class="soft-section-heading">
+                        <h3 class="soft-section-title">基础信息</h3>
+                        <p class="soft-section-subtitle">维护菜单名称、编码和层级关系。</p>
+                      </div>
+                    </div>
+                  </div>
+                  <a-row :gutter="16">
+                    <a-col :span="12">
+                      <a-form-item label="菜单名称">
+                        <a-input v-model:value="form.name" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                      <a-form-item label="菜单编码">
+                        <a-input v-model:value="form.code" />
+                      </a-form-item>
+                    </a-col>
+                  </a-row>
+                  <a-row :gutter="16">
+                    <a-col :span="12">
+                      <a-form-item label="父级菜单">
+                        <a-tree-select
+                          v-model:value="form.parentId"
+                          :tree-data="parentOptions"
+                          :field-names="fieldNames"
+                          tree-default-expand-all
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                      <a-form-item label="排序">
+                        <a-input-number v-model:value="form.listOrder" :min="0" style="width: 100%" />
+                      </a-form-item>
+                    </a-col>
+                  </a-row>
+                </div>
+
+                <div class="plan-section">
+                  <div class="plan-section-head">
+                    <div class="plan-section-chip">展示</div>
+                    <div class="soft-section-header">
+                      <div class="soft-section-heading">
+                        <h3 class="soft-section-title">路由与展示</h3>
+                        <p class="soft-section-subtitle">菜单节点绑定前端路由，目录节点只做分组展示。</p>
+                      </div>
+                    </div>
+                  </div>
+                  <a-row :gutter="16">
+                    <a-col :span="8">
+                      <a-form-item label="类型">
+                        <a-select v-model:value="form.type">
+                          <a-select-option value="DIR">目录</a-select-option>
+                          <a-select-option value="MENU">菜单</a-select-option>
+                        </a-select>
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                      <a-form-item label="路由路径">
+                        <a-input v-model:value="form.path" placeholder="例如 /system/menu" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                      <a-form-item label="图标">
+                        <a-select v-model:value="form.icon" allow-clear>
+                          <a-select-option v-for="icon in iconOptions" :key="icon" :value="icon">{{ icon }}</a-select-option>
+                        </a-select>
+                      </a-form-item>
+                    </a-col>
+                  </a-row>
+                  <a-row :gutter="16">
+                    <a-col :span="8">
+                      <a-form-item label="菜单范围">
+                        <a-select v-model:value="form.menuScope">
+                          <a-select-option value="PLATFORM">平台</a-select-option>
+                          <a-select-option value="SUBSTATION">分站</a-select-option>
+                          <a-select-option value="BOTH">通用</a-select-option>
+                        </a-select>
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                      <a-form-item label="是否显示">
+                        <a-switch v-model:checked="visibleChecked" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                      <a-form-item label="是否启用">
+                        <a-switch v-model:checked="statusChecked" />
+                      </a-form-item>
+                    </a-col>
+                  </a-row>
+                </div>
+              </a-form>
+            </div>
+          </template>
+
+          <a-empty v-else description="请选择左侧菜单或新增根菜单" />
+        </div>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { systemMenuApi } from '@/api'
+
+interface MenuNode {
+  id: number
+  code: string
+  name: string
+  type: string
+  path?: string
+  icon?: string
+  menuScope: string
+  visible: number
+  status: number
+  listOrder: number
+  children: MenuNode[]
+}
+
+const fieldNames = { title: 'name', key: 'id', value: 'id', children: 'children' }
+const iconOptions = [
+  'HomeOutlined',
+  'GlobalOutlined',
+  'ApartmentOutlined',
+  'ShopOutlined',
+  'UserOutlined',
+  'StarOutlined',
+  'UnorderedListOutlined',
+  'ControlOutlined',
+  'ApiOutlined',
+]
+
+const treeData = ref<MenuNode[]>([])
+const selectedKeys = ref<number[]>([])
+const loading = ref(false)
+const saving = ref(false)
+const form = reactive({
+  id: undefined as number | undefined,
+  code: '',
+  name: '',
+  type: 'MENU',
+  path: '',
+  icon: '',
+  parentId: 0,
+  menuScope: 'PLATFORM',
+  listOrder: 0,
+  visible: 1,
+  status: 1,
+})
+
+const currentNode = computed(() => findNode(treeData.value, selectedKeys.value[0]))
+const parentOptions = computed(() => buildParentOptions(treeData.value, form.id))
+const visibleChecked = computed({
+  get: () => form.visible === 1,
+  set: (val: boolean) => { form.visible = val ? 1 : 0 },
+})
+const statusChecked = computed({
+  get: () => form.status === 1,
+  set: (val: boolean) => { form.status = val ? 1 : 0 },
+})
+
+function resetForm(parentId = 0) {
+  Object.assign(form, {
+    id: undefined,
+    code: '',
+    name: '',
+    type: 'MENU',
+    path: '',
+    icon: '',
+    parentId,
+    menuScope: 'PLATFORM',
+    listOrder: 0,
+    visible: 1,
+    status: 1,
+  })
+}
+
+function assignForm(node: MenuNode) {
+  Object.assign(form, {
+    id: node.id,
+    code: node.code,
+    name: node.name,
+    type: node.type,
+    path: node.path || '',
+    icon: node.icon || '',
+    parentId: findParentId(treeData.value, node.id),
+    menuScope: node.menuScope,
+    listOrder: node.listOrder || 0,
+    visible: node.visible ?? 1,
+    status: node.status ?? 1,
+  })
+}
+
+function handleSelect(keys: (string | number)[]) {
+  const id = Number(keys[0])
+  if (!id) return
+  selectedKeys.value = [id]
+  const node = findNode(treeData.value, id)
+  if (node) assignForm(node)
+}
+
+function openAddRoot() {
+  selectedKeys.value = []
+  resetForm(0)
+}
+
+function openAddChild() {
+  const parentId = form.id || selectedKeys.value[0] || 0
+  selectedKeys.value = []
+  resetForm(parentId)
+}
+
+async function loadTree() {
+  loading.value = true
+  try {
+    const res: any = await systemMenuApi.tree()
+    treeData.value = Array.isArray(res?.data) ? res.data : []
+    if (!selectedKeys.value.length && treeData.value.length) {
+      const first = treeData.value[0]
+      selectedKeys.value = [first.id]
+      assignForm(first)
+      return
+    }
+    if (selectedKeys.value.length) {
+      const current = findNode(treeData.value, selectedKeys.value[0])
+      if (current) {
+        assignForm(current)
+      } else if (treeData.value.length) {
+        const first = treeData.value[0]
+        selectedKeys.value = [first.id]
+        assignForm(first)
+      }
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleSave() {
+  if (!form.name || !form.code) {
+    message.error('请填写菜单名称和编码')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = { ...form }
+    if (payload.id) {
+      await systemMenuApi.edit(payload)
+      message.success('保存成功')
+    } else {
+      await systemMenuApi.add(payload)
+      message.success('新增成功')
+    }
+    await loadTree()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function toggleVisible() {
+  if (!form.id) {
+    message.warning('请先选择已有菜单')
+    return
+  }
+  await systemMenuApi.setVisible(form.id, form.visible === 1 ? 0 : 1)
+  message.success('操作成功')
+  await loadTree()
+}
+
+async function toggleStatus() {
+  if (!form.id) {
+    message.warning('请先选择已有菜单')
+    return
+  }
+  await systemMenuApi.setStatus(form.id, form.status === 1 ? 0 : 1)
+  message.success('操作成功')
+  await loadTree()
+}
+
+async function handleDelete() {
+  if (!form.id) {
+    message.warning('请先选择已有菜单')
+    return
+  }
+  await systemMenuApi.del(form.id)
+  message.success('删除成功')
+  selectedKeys.value = []
+  resetForm(0)
+  await loadTree()
+}
+
+function findNode(nodes: MenuNode[], id?: number): MenuNode | null {
+  if (!id) return null
+  for (const node of nodes) {
+    if (node.id === id) return node
+    const child = findNode(node.children || [], id)
+    if (child) return child
+  }
+  return null
+}
+
+function findParentId(nodes: MenuNode[], childId: number, parentId = 0): number {
+  for (const node of nodes) {
+    if (node.id === childId) return parentId
+    if (containsNode(node.children || [], childId)) {
+      return findParentId(node.children || [], childId, node.id)
+    }
+  }
+  return 0
+}
+
+function containsNode(nodes: MenuNode[], id: number): boolean {
+  for (const node of nodes) {
+    if (node.id === id) return true
+    if (containsNode(node.children || [], id)) return true
+  }
+  return false
+}
+
+function buildParentOptions(nodes: MenuNode[], excludeId?: number): MenuNode[] {
+  return nodes
+    .filter(node => node.id !== excludeId)
+    .map(node => ({
+      ...node,
+      children: buildParentOptions((node.children || []).filter(child => child.id !== excludeId), excludeId),
+    }))
+}
+
+loadTree()
+</script>
+
+<style scoped>
+.dispatch-layout {
+  margin-top: 8px;
+}
+
+.plan-layout {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 18px;
+  min-height: 640px;
+}
+
+.plan-sidebar,
+.plan-content {
+  border-radius: 24px;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  padding: 18px;
+}
+
+.plan-content {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-width: 0;
+}
+
+.plan-content-top {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.plan-content-body {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.plan-sidebar-header,
+.plan-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.plan-sidebar-title,
+.soft-section-title {
+  color: var(--text-dark);
+  font-family: var(--font-display);
+}
+
+.plan-sidebar-title {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.plan-sidebar-subtitle,
+.plan-toolbar-eyebrow,
+.plan-toolbar-tip,
+.soft-section-subtitle {
+  color: var(--text-soft);
+  font-size: 12px;
+}
+
+.plan-toolbar {
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 14px 16px;
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  background: var(--panel-strong);
+  box-shadow: var(--shadow-sm);
+}
+
+.plan-toolbar-meta,
+.plan-toolbar-submit {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.plan-toolbar-meta strong {
+  color: var(--text-dark);
+  font-size: 15px;
+  line-height: 1.4;
+}
+
+.plan-toolbar-submit {
+  margin-left: auto;
+  align-items: flex-end;
+}
+
+.plan-save-button {
+  min-width: 108px;
+  height: 36px;
+}
+
+.plan-section {
+  padding: 18px 20px 20px;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  background: var(--panel-strong);
+}
+
+.plan-section-head {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.plan-section-chip {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  min-height: 26px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  color: var(--brand);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.soft-section-title {
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.35;
+}
+
+.soft-section-subtitle {
+  margin: 4px 0 0;
+  line-height: 1.6;
+}
+
+.menu-tree {
+  padding: 8px 0;
+}
+
+.plan-content > :deep(.ant-empty) {
+  margin: auto 0;
+}
+
+@media (max-width: 960px) {
+  .plan-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .plan-toolbar-submit {
+    margin-left: 0;
+    align-items: flex-start;
+  }
+}
+</style>
+<template>
+  <div>
+    <a-card title="角色管理" :bordered="false" class="list-table-card">
+      <div class="list-toolbar">
+        <div class="list-toolbar-left">
+          <a-input-search v-model:value="keyword" placeholder="搜索角色名称/编码" class="list-search" />
+        </div>
+        <div class="list-toolbar-right">
+          <a-button type="primary" @click="openAdd">新增角色</a-button>
+        </div>
+      </div>
+
+      <a-table :dataSource="filteredList" :columns="columns" :loading="loading" rowKey="id" :pagination="false">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'name'">
+            <div class="role-name-cell">
+              <span>{{ record.name }}</span>
+              <a-tag v-if="record.builtIn" color="purple">内置</a-tag>
+            </div>
+          </template>
+
+          <template v-else-if="column.key === 'roleScope'">
+            <a-tag :color="record.roleScope === 'PLATFORM' ? 'blue' : 'cyan'">
+              {{ formatScope(record.roleScope) }}
+            </a-tag>
+          </template>
+
+          <template v-else-if="column.key === 'status'">
+            <a-tag :color="record.status === 1 ? 'green' : 'red'">
+              {{ record.status === 1 ? '正常' : '禁用' }}
+            </a-tag>
+          </template>
+
+          <template v-else-if="column.key === 'binding'">
+            <span class="binding-copy">{{ formatBinding(record) }}</span>
+          </template>
+
+          <template v-else-if="column.key === 'action'">
+            <a-space wrap>
+              <a v-if="!record.builtIn" @click="openEdit(record)">编辑</a>
+              <a-tooltip v-else title="内置角色不允许编辑">
+                <span class="action-disabled">编辑</span>
+              </a-tooltip>
+
+              <a v-if="record.status === 1" @click="goAssignMenus(record)">分配菜单</a>
+              <a-tooltip v-else title="请先启用角色再分配菜单">
+                <span class="action-disabled">分配菜单</span>
+              </a-tooltip>
+
+              <a-popconfirm
+                v-if="canToggleStatus(record)"
+                :title="record.status === 1 ? '确认禁用？' : '确认启用？'"
+                @confirm="toggleStatus(record)"
+              >
+                <a :style="record.status === 1 ? 'color:red' : ''">
+                  {{ record.status === 1 ? '禁用' : '启用' }}
+                </a>
+              </a-popconfirm>
+              <a-tooltip v-else :title="getToggleBlockedReason(record)">
+                <span class="action-disabled">{{ record.status === 1 ? '禁用' : '启用' }}</span>
+              </a-tooltip>
+
+              <a-popconfirm v-if="canDelete(record)" title="确认删除？" @confirm="handleDel(record.id)">
+                <a style="color:red">删除</a>
+              </a-popconfirm>
+              <a-tooltip v-else :title="getDeleteBlockedReason(record)">
+                <span class="action-disabled">删除</span>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <a-modal
+      v-model:open="modalVisible"
+      :title="editingId ? '编辑角色' : '新增角色'"
+      @ok="handleSave"
+      :confirmLoading="saving"
+    >
+      <div class="soft-page-stack">
+        <div class="soft-note-card">
+          <strong>角色说明</strong>
+          <p>角色只控制菜单显示，不做完整权限点授权。创建后可继续进入“分配菜单”为角色配置可见菜单。</p>
+        </div>
+        <a-form :model="form" layout="vertical">
+          <a-form-item label="角色名称">
+            <a-input v-model:value="form.name" />
+          </a-form-item>
+          <a-form-item label="角色编码">
+            <a-input v-model:value="form.code" />
+          </a-form-item>
+          <a-form-item label="角色范围">
+            <a-select v-model:value="form.roleScope" :disabled="!!editingId">
+              <a-select-option value="PLATFORM">平台角色</a-select-option>
+              <a-select-option value="SUBSTATION">分站角色</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-form>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
+import { systemRoleApi } from '@/api'
+
+interface RoleItem {
+  id: number
+  code: string
+  name: string
+  roleScope: string
+  status: number
+  builtIn?: boolean
+  adminUserCount?: number
+  substationCount?: number
+  createTime?: number
+}
+
+const router = useRouter()
+const loading = ref(false)
+const saving = ref(false)
+const keyword = ref('')
+const list = ref<RoleItem[]>([])
+const modalVisible = ref(false)
+const editingId = ref<number | null>(null)
+const form = reactive({ name: '', code: '', roleScope: 'PLATFORM' })
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '角色名称', key: 'name' },
+  { title: '角色编码', dataIndex: 'code' },
+  { title: '角色范围', key: 'roleScope', width: 110 },
+  { title: '状态', key: 'status', width: 100 },
+  { title: '绑定情况', key: 'binding' },
+  { title: '操作', key: 'action', width: 320 },
+]
+
+const filteredList = computed(() => {
+  const value = keyword.value.trim().toLowerCase()
+  if (!value) return list.value
+  return list.value.filter(item =>
+    item.name.toLowerCase().includes(value) || item.code.toLowerCase().includes(value),
+  )
+})
+
+function formatScope(scope: string) {
+  return scope === 'PLATFORM' ? '平台' : '分站'
+}
+
+function formatBinding(record: RoleItem) {
+  const parts: string[] = []
+  if ((record.adminUserCount || 0) > 0) parts.push(`平台账号 ${record.adminUserCount}`)
+  if ((record.substationCount || 0) > 0) parts.push(`分站账号 ${record.substationCount}`)
+  return parts.length ? parts.join(' / ') : '未绑定账号'
+}
+
+function isBound(record: RoleItem) {
+  return (record.adminUserCount || 0) > 0 || (record.substationCount || 0) > 0
+}
+
+function canToggleStatus(record: RoleItem) {
+  if (record.builtIn) return false
+  if (record.status === 1 && isBound(record)) return false
+  return true
+}
+
+function canDelete(record: RoleItem) {
+  return !record.builtIn && !isBound(record)
+}
+
+function getToggleBlockedReason(record: RoleItem) {
+  if (record.builtIn) return '内置角色不允许禁用'
+  if (record.status === 1 && isBound(record)) return '角色已绑定账号，不能禁用'
+  return '当前角色不可操作'
+}
+
+function getDeleteBlockedReason(record: RoleItem) {
+  if (record.builtIn) return '内置角色不允许删除'
+  if (isBound(record)) return '角色已绑定账号，不能删除'
+  return '当前角色不可删除'
+}
+
+async function loadList() {
+  loading.value = true
+  try {
+    const res: any = await systemRoleApi.list(true)
+    list.value = Array.isArray(res?.data) ? res.data : []
+  } finally {
+    loading.value = false
+  }
+}
+
+function openAdd() {
+  editingId.value = null
+  Object.assign(form, { name: '', code: '', roleScope: 'PLATFORM' })
+  modalVisible.value = true
+}
+
+function openEdit(record: RoleItem) {
+  editingId.value = record.id
+  Object.assign(form, { name: record.name, code: record.code, roleScope: record.roleScope })
+  modalVisible.value = true
+}
+
+async function handleSave() {
+  if (!form.name.trim() || !form.code.trim()) {
+    message.error('请填写角色名称和编码')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = { name: form.name.trim(), code: form.code.trim(), roleScope: form.roleScope }
+    if (editingId.value) {
+      await systemRoleApi.edit({ id: editingId.value, ...payload })
+    } else {
+      await systemRoleApi.add(payload)
+    }
+    message.success('保存成功')
+    modalVisible.value = false
+    await loadList()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function toggleStatus(record: RoleItem) {
+  if (record.status === 1) {
+    await systemRoleApi.ban(record.id)
+  } else {
+    await systemRoleApi.cancelBan(record.id)
+  }
+  message.success('操作成功')
+  await loadList()
+}
+
+async function handleDel(id: number) {
+  await systemRoleApi.del(id)
+  message.success('删除成功')
+  await loadList()
+}
+
+function goAssignMenus(record: RoleItem) {
+  router.push({ path: '/system/role-menu', query: { roleId: String(record.id) } })
+}
+
+onMounted(loadList)
+</script>
+
+<style scoped>
+.role-name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.binding-copy {
+  color: var(--text-soft);
+}
+
+.action-disabled {
+  color: var(--text-soft);
+  cursor: not-allowed;
+}
+</style>
+<template>
+  <div>
+    <a-card title="角色菜单分配" :bordered="false" class="list-table-card">
+      <div class="plan-layout dispatch-layout">
+        <div class="plan-sidebar">
+          <div class="plan-sidebar-header">
+            <div>
+              <div class="plan-sidebar-title">角色列表</div>
+              <div class="plan-sidebar-subtitle">选择角色后配置可见菜单</div>
+            </div>
+          </div>
+          <div class="plan-list">
+            <button
+              v-for="role in roles"
+              :key="role.id"
+              type="button"
+              class="plan-item"
+              :class="{ active: role.id === selectedRoleId }"
+              @click="selectRole(role.id)"
+            >
+              <div class="plan-item-top">
+                <span class="plan-item-name">{{ role.name }}</span>
+                <a-tag>{{ role.roleScope }}</a-tag>
+              </div>
+              <div class="plan-item-bottom">
+                <span>{{ role.code }}</span>
+              </div>
+            </button>
+            <a-empty v-if="!roles.length" description="暂无角色" />
+          </div>
+        </div>
+
+        <div class="plan-content">
+          <template v-if="selectedRole">
+            <div class="plan-content-top">
+              <div class="soft-note-card plan-note-card">
+                <strong>分配说明</strong>
+                <p>这里只控制菜单可见性，不做完整接口权限。保存后用户重新登录即可看到最新菜单。</p>
+              </div>
+
+              <div class="plan-toolbar">
+                <div class="plan-toolbar-meta">
+                  <span class="plan-toolbar-eyebrow">当前角色</span>
+                  <strong>{{ selectedRole.name }}</strong>
+                </div>
+                <div class="plan-toolbar-submit">
+                  <span class="plan-toolbar-tip">平台角色只能分平台/通用菜单，分站角色只能分分站/通用菜单</span>
+                  <a-button type="primary" class="plan-save-button" :loading="saving" @click="handleSave">保存分配</a-button>
+                </div>
+              </div>
+            </div>
+
+            <div class="plan-content-body">
+              <a-spin :spinning="loadingTree">
+                <div class="soft-note-card" style="margin-bottom: 12px">
+                  <strong>当前角色范围：{{ selectedRole.roleScope }}</strong>
+                  <p style="margin: 6px 0 0">可勾选节点已经按角色范围过滤；保存后目标账号重新登录即可看到最新菜单。</p>
+                </div>
+                <a-tree
+                v-if="treeData.length"
+                checkable
+                block-node
+                check-strictly
+                :tree-data="treeData"
+                :field-names="fieldNames"
+                :checked-keys="checkedKeys"
+                @check="handleCheck"
+              >
+                <template #title="node">
+                  <span>{{ node.name }}</span>
+                  <a-tag style="margin-left: 8px">{{ node.menuScope }}</a-tag>
+                  <a-tag style="margin-left: 4px" :color="node.checked ? 'processing' : 'default'">{{ node.checked ? '已分配' : '未分配' }}</a-tag>
+                </template>
+              </a-tree>
+                <a-empty v-else description="当前角色暂无可分配菜单" />
+              </a-spin>
+            </div>
+          </template>
+
+          <a-empty v-else description="请选择左侧角色" />
+        </div>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { message } from 'ant-design-vue'
+import { systemRoleApi } from '@/api'
+
+interface RoleVO {
+  id: number
+  code: string
+  name: string
+  roleScope: string
+}
+
+interface MenuTreeNode {
+  id: number
+  name: string
+  code: string
+  menuScope: string
+  checked: boolean
+  children: MenuTreeNode[]
+}
+
+const route = useRoute()
+const fieldNames = { title: 'name', key: 'id', children: 'children' }
+const roles = ref<RoleVO[]>([])
+const selectedRoleId = ref<number>()
+const loadingTree = ref(false)
+const treeData = ref<MenuTreeNode[]>([])
+const checkedKeys = ref<number[]>([])
+const saving = ref(false)
+
+const selectedRole = computed(() => roles.value.find(item => item.id === selectedRoleId.value) || null)
+
+async function loadRoles() {
+  const res: any = await systemRoleApi.list()
+  roles.value = Array.isArray(res?.data) ? res.data : []
+  if (!roles.value.length) {
+    selectedRoleId.value = undefined
+    treeData.value = []
+    checkedKeys.value = []
+    return
+  }
+
+  const queryRoleId = Number(route.query.roleId)
+  const preferredRoleId = Number.isFinite(queryRoleId) && queryRoleId > 0 ? queryRoleId : selectedRoleId.value
+  const targetRole = roles.value.find(item => item.id === preferredRoleId) || roles.value[0]
+  await selectRole(targetRole.id)
+}
+
+async function selectRole(roleId: number) {
+  selectedRoleId.value = roleId
+  loadingTree.value = true
+  try {
+    const res: any = await systemRoleApi.menuTree(roleId)
+    treeData.value = Array.isArray(res?.data) ? res.data : []
+    checkedKeys.value = collectCheckedIds(treeData.value)
+  } finally {
+    loadingTree.value = false
+  }
+}
+
+async function handleSave() {
+  if (!selectedRoleId.value) {
+    message.warning('请先选择角色')
+    return
+  }
+  saving.value = true
+  try {
+    await systemRoleApi.assignMenus(selectedRoleId.value, { menuIds: checkedKeys.value.map(Number) })
+    message.success('保存成功')
+    await selectRole(selectedRoleId.value)
+  } finally {
+    saving.value = false
+  }
+}
+
+function handleCheck(keys: any) {
+  checkedKeys.value = (Array.isArray(keys) ? keys : keys.checked).map(Number)
+}
+
+function collectCheckedIds(nodes: MenuTreeNode[]): number[] {
+  const ids: number[] = []
+  const walk = (items: MenuTreeNode[]) => {
+    for (const item of items) {
+      if (item.checked) ids.push(item.id)
+      if (item.children?.length) walk(item.children)
+    }
+  }
+  walk(nodes)
+  return ids
+}
+
+watch(() => route.query.roleId, async (value) => {
+  const roleId = Number(value)
+  if (!Number.isFinite(roleId) || roleId < 1 || !roles.value.length) {
+    return
+  }
+  if (roles.value.some(item => item.id === roleId) && selectedRoleId.value !== roleId) {
+    await selectRole(roleId)
+  }
+})
+
+loadRoles()
+</script>
+
+<style scoped>
+.dispatch-layout {
+  margin-top: 8px;
+}
+
+.plan-layout {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 18px;
+  min-height: 560px;
+}
+
+.plan-sidebar,
+.plan-content {
+  border-radius: 24px;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  padding: 18px;
+}
+
+.plan-content {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-width: 0;
+}
+
+.plan-content-top,
+.plan-content-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.plan-sidebar-header,
+.plan-toolbar,
+.plan-item-top,
+.plan-item-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.plan-sidebar-title,
+.plan-item-name {
+  color: var(--text-dark);
+  font-family: var(--font-display);
+}
+
+.plan-sidebar-title {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.plan-sidebar-subtitle,
+.plan-item-bottom,
+.plan-toolbar-eyebrow,
+.plan-toolbar-tip {
+  color: var(--text-soft);
+  font-size: 12px;
+}
+
+.plan-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.plan-item {
+  border: 1px solid var(--line);
+  background: var(--panel-strong);
+  border-radius: 18px;
+  padding: 14px;
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+}
+
+.plan-item.active {
+  border-color: var(--brand);
+  background: var(--panel-tint);
+  box-shadow: var(--shadow-sm);
+}
+
+.plan-toolbar {
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 14px 16px;
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  background: var(--panel-strong);
+  box-shadow: var(--shadow-sm);
+}
+
+.plan-toolbar-meta,
+.plan-toolbar-submit {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.plan-toolbar-meta strong {
+  color: var(--text-dark);
+  font-size: 15px;
+  line-height: 1.4;
+}
+
+.plan-toolbar-submit {
+  margin-left: auto;
+  align-items: flex-end;
+}
+
+.plan-save-button {
+  min-width: 108px;
+  height: 36px;
+}
+
+.plan-content > :deep(.ant-empty) {
+  margin: auto 0;
+}
+
+:deep(.ant-tree) {
+  background: transparent;
+}
+
+@media (max-width: 960px) {
+  .plan-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .plan-toolbar-submit {
+    margin-left: 0;
+    align-items: flex-start;
+  }
+}
+</style>