Refactor: Add substation role and user management features, extend API methods, …

…and update UI with new icons and routes.

Refactor: Add substation role and user management features, extend API methods, …
…and update UI with new icons and routes.
shaofan
1 parent 7d3ae82b
Showing 10 changed files with 1341 additions and 5 deletions
src/api/index.ts
src/components/AppMenuTree.vue
src/config/menu.ts
src/router/index.ts
src/views/rider/RiderLevelList.vue
src/views/substation/SubstationRoleList.vue
src/views/substation/SubstationRoleMenuAssign.vue
src/views/substation/SubstationUserList.vue
src/views/system/MenuManage.vue
src/views/system/RoleMenuAssign.vue
@@ -24,6 +24,18 @@ export const systemRoleApi = {
     request.post(`/api/platform/system/role/${roleId}/menus`, data),
 }
+export const adminRoleApi = {
+  list: () => request.get('/api/admin/system/role/list'),
+  add: (data: any) => request.post('/api/admin/system/role/add', data),
+  edit: (data: any) => request.put('/api/admin/system/role/edit', data),
+  ban: (id: number) => request.post('/api/admin/system/role/ban', null, { params: { id } }),
+  cancelBan: (id: number) => request.post('/api/admin/system/role/cancelBan', null, { params: { id } }),
+  del: (id: number) => request.delete('/api/admin/system/role/del', { params: { id } }),
+  menuTree: (roleId: number) => request.get(`/api/admin/system/role/${roleId}/menu-tree`),
+  assignMenus: (roleId: number, data: { menuIds: number[] }) =>
+    request.post(`/api/admin/system/role/${roleId}/menus`, data),
+}
+
 // 城市管理
 export const cityApi = {
   tree: () => request.get('/api/platform/city/tree'),
@@ -63,6 +75,17 @@ export const substationApi = {
     request.post('/api/platform/substation/changePassword', data, { params: { id: data.id } }),
 }
+export const substationUserApi = {
+  list: (keyword?: string) => request.get('/api/admin/substation-user/list', { params: { keyword } }),
+  add: (data: any) => request.post('/api/admin/substation-user/add', data),
+  edit: (data: any) => request.put('/api/admin/substation-user/edit', data),
+  ban: (id: number) => request.post('/api/admin/substation-user/ban', null, { params: { id } }),
+  cancelBan: (id: number) => request.post('/api/admin/substation-user/cancelBan', null, { params: { id } }),
+  del: (id: number) => request.delete('/api/admin/substation-user/del', { params: { id } }),
+  changePassword: (data: { id: number; oldPassword: string; newPassword: string }) =>
+    request.post('/api/admin/substation-user/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),
@@ -2,14 +2,14 @@
   <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)" />
+        <component :is="resolveIcon(menu.icon, menu.code)" v-if="resolveIcon(menu.icon, menu.code)" />
       </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)" />
+        <component :is="resolveIcon(menu.icon, menu.code)" v-if="resolveIcon(menu.icon, menu.code)" />
       </template>
       {{ menu.name }}
     </a-menu-item>
@@ -25,8 +25,11 @@ import {
   ControlOutlined,
   GlobalOutlined,
   HomeOutlined,
+  SettingOutlined,
   ShopOutlined,
   StarOutlined,
+  TeamOutlined,
+  TrophyOutlined,
   UnorderedListOutlined,
   UserOutlined,
 } from '@ant-design/icons-vue'
@@ -45,10 +48,22 @@ const iconMap: Record&lt;string, Component&gt; = {
   UnorderedListOutlined,
   ControlOutlined,
   ApiOutlined,
+  TeamOutlined,
+  TrophyOutlined,
+  SettingOutlined,
 }
-function resolveIcon(icon?: string) {
-  if (!icon) return null
-  return iconMap[icon] || null
+const codeIconMap: Record<string, Component> = {
+  'substation.user': TeamOutlined,
+  'rider.level': TrophyOutlined,
+  'system.sub_root': SettingOutlined,
+  'system.sub_role': TeamOutlined,
+  'system.sub_role_menu': SettingOutlined,
+}
+
+function resolveIcon(icon?: string, code?: string) {
+  if (icon && iconMap[icon]) return iconMap[icon]
+  if (code && codeIconMap[code]) return codeIconMap[code]
+  return null
 }
 </script>
@@ -16,6 +16,9 @@ export const iconRegistry: Record&lt;string, string&gt; = {
   UnorderedListOutlined: 'unordered-list',
   ControlOutlined: 'control',
   ApiOutlined: 'api',
+  TeamOutlined: 'team',
+  TrophyOutlined: 'trophy',
+  SettingOutlined: 'setting',
 }
 export const pinnedQuickLinks: QuickLinkItem[] = [
@@ -88,6 +88,12 @@ const router = createRouter({
           meta: { title: '骑手评价' },
         },
         {
+          path: 'rider/level',
+          name: 'RiderLevel',
+          component: () => import('@/views/rider/RiderLevelList.vue'),
+          meta: { title: '骑手等级' },
+        },
+        {
           path: 'open',
           name: 'OpenApp',
           component: () => import('@/views/open/OpenAppList.vue'),
@@ -118,6 +124,24 @@ const router = createRouter({
           meta: { title: '角色菜单' },
         },
         {
+          path: 'substation/user',
+          name: 'SubstationUser',
+          component: () => import('@/views/substation/SubstationUserList.vue'),
+          meta: { title: '分站账号' },
+        },
+        {
+          path: 'substation/role',
+          name: 'SubstationRole',
+          component: () => import('@/views/substation/SubstationRoleList.vue'),
+          meta: { title: '角色管理' },
+        },
+        {
+          path: 'substation/role-menu',
+          name: 'SubstationRoleMenu',
+          component: () => import('@/views/substation/SubstationRoleMenuAssign.vue'),
+          meta: { title: '角色菜单' },
+        },
+        {
           path: 'admin-user',
           name: 'AdminUser',
           component: () => import('@/views/admin/AdminUserList.vue'),
+<template>
+  <div>
+    <a-card title="骑手等级" :bordered="false" class="list-table-card">
+      <div class="list-toolbar">
+        <div class="list-toolbar-left">
+          <a-select
+            v-if="isAdmin"
+            v-model:value="selectedCityId"
+            placeholder="选择租户"
+            class="list-filter"
+            @change="loadList"
+          >
+            <a-select-option v-for="c in cityList" :key="c.id" :value="c.id">{{ c.name }}</a-select-option>
+          </a-select>
+          <div v-else class="managed-city-pill">当前租户：{{ currentCityName || `租户#${selectedCityId}` }}</div>
+        </div>
+        <div class="list-toolbar-right">
+          <a-button type="primary" :disabled="!selectedCityId" @click="openAdd">新增等级</a-button>
+        </div>
+      </div>
+
+      <template v-if="selectedCityId">
+        <div class="soft-note-card page-note-card">
+          <strong>骑手等级说明</strong>
+          <p>等级用于控制骑手收入规则和转单上限。平台管理员需先选择租户，分站管理员默认管理当前租户。</p>
+        </div>
+
+        <a-table :dataSource="levelList" :columns="columns" :loading="loading" rowKey="id" :pagination="false">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'isDefault'">
+              <a-tag :color="record.isDefault === 1 ? 'green' : 'default'">
+                {{ record.isDefault === 1 ? '默认' : '普通' }}
+              </a-tag>
+            </template>
+            <template v-else-if="column.key === 'runFeeMode'">
+              {{ runFeeModeMap[record.runFeeMode] || '-' }}
+            </template>
+            <template v-else-if="column.key === 'rule'">
+              {{ formatLevelRule(record) }}
+            </template>
+            <template v-else-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">编辑</a>
+                <a v-if="record.isDefault !== 1" @click="handleSetDefault(record)">设为默认</a>
+                <a-popconfirm title="确认删除该等级？" @confirm="handleDelete(record)">
+                  <a style="color:red">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </a-table>
+      </template>
+
+      <a-empty v-else description="请先选择租户" />
+    </a-card>
+
+    <a-modal
+      v-model:open="modalVisible"
+      :title="editingId ? '编辑骑手等级' : '新增骑手等级'"
+      @ok="handleSave"
+      :confirmLoading="saving"
+    >
+      <a-form :model="form" layout="vertical">
+        <a-form-item label="等级编号">
+          <a-input-number v-model:value="form.levelId" :min="1" style="width:100%" />
+        </a-form-item>
+        <a-form-item label="等级名称">
+          <a-input v-model:value="form.name" placeholder="如：标准骑手 / 金牌骑手" />
+        </a-form-item>
+        <a-form-item label="每日转单上限">
+          <a-input-number v-model:value="form.transNums" :min="0" style="width:100%" />
+        </a-form-item>
+        <a-form-item label="收入模式">
+          <a-radio-group v-model:value="form.runFeeMode">
+            <a-radio :value="1">固定金额</a-radio>
+            <a-radio :value="2">按比例</a-radio>
+            <a-radio :value="3">按距离</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <template v-if="form.runFeeMode === 1">
+          <a-form-item label="固定收入（元）">
+            <a-input-number v-model:value="form.runFixMoney" :min="0" :step="0.1" style="width:100%" />
+          </a-form-item>
+        </template>
+        <template v-else-if="form.runFeeMode === 2">
+          <a-form-item label="收入比例（%）">
+            <a-input-number v-model:value="form.runRate" :min="0" :max="100" :step="0.1" style="width:100%" />
+          </a-form-item>
+        </template>
+        <template v-else>
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="起始距离（米）">
+                <a-input-number v-model:value="form.distanceBasic" :min="0" style="width:100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="基础收入（元）">
+                <a-input-number v-model:value="form.distanceBasicMoney" :min="0" :step="0.1" style="width:100%" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="超出每公里收入（元）">
+                <a-input-number v-model:value="form.distanceMoreMoney" :min="0" :step="0.1" style="width:100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="最高收入上限（元）">
+                <a-input-number v-model:value="form.distanceMaxMoney" :min="0" :step="0.1" style="width:100%" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </template>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { message } from 'ant-design-vue'
+import { riderLevelApi } from '@/api'
+import { useRoleSelectedCity } from '@/composables/useRoleSelectedCity'
+
+const route = useRoute()
+const { isAdmin, cityList, selectedCityId, currentCityName, loadCities } = useRoleSelectedCity()
+
+const loading = ref(false)
+const saving = ref(false)
+const modalVisible = ref(false)
+const editingId = ref<number | null>(null)
+const levelList = ref<any[]>([])
+const form = reactive({
+  cityId: 0,
+  levelId: 1,
+  name: '',
+  transNums: 0,
+  runFeeMode: 1,
+  runFixMoney: 0,
+  runRate: 0,
+  distanceBasic: 0,
+  distanceBasicMoney: 0,
+  distanceMoreMoney: 0,
+  distanceMaxMoney: 0,
+})
+
+const columns = [
+  { title: '等级编号', dataIndex: 'levelId', width: 100 },
+  { title: '等级名称', dataIndex: 'name' },
+  { title: '默认', key: 'isDefault', width: 90 },
+  { title: '转单上限', dataIndex: 'transNums', width: 100 },
+  { title: '收入模式', key: 'runFeeMode', width: 110 },
+  { title: '规则', key: 'rule' },
+  { title: '操作', key: 'action', width: 220 },
+]
+
+const runFeeModeMap: Record<number, string> = {
+  1: '固定金额',
+  2: '按比例',
+  3: '按距离',
+}
+
+async function initPage() {
+  const queryCityId = Number(route.query.cityId || 0) || undefined
+  await loadCities(queryCityId)
+  if (selectedCityId.value) {
+    await loadList()
+  }
+}
+
+async function loadList() {
+  if (!selectedCityId.value) {
+    levelList.value = []
+    return
+  }
+  loading.value = true
+  try {
+    const res: any = await riderLevelApi.list(selectedCityId.value)
+    levelList.value = Array.isArray(res?.data) ? res.data : []
+  } finally {
+    loading.value = false
+  }
+}
+
+function openAdd() {
+  if (!selectedCityId.value) {
+    message.error('请先选择租户')
+    return
+  }
+  editingId.value = null
+  Object.assign(form, {
+    cityId: selectedCityId.value,
+    levelId: (levelList.value[levelList.value.length - 1]?.levelId || 0) + 1,
+    name: '',
+    transNums: 0,
+    runFeeMode: 1,
+    runFixMoney: 0,
+    runRate: 0,
+    distanceBasic: 0,
+    distanceBasicMoney: 0,
+    distanceMoreMoney: 0,
+    distanceMaxMoney: 0,
+  })
+  modalVisible.value = true
+}
+
+function openEdit(record: any) {
+  if (!selectedCityId.value) {
+    return
+  }
+  editingId.value = record.id
+  Object.assign(form, {
+    cityId: selectedCityId.value,
+    levelId: record.levelId,
+    name: record.name,
+    transNums: record.transNums,
+    runFeeMode: record.runFeeMode,
+    runFixMoney: record.runFixMoney ?? 0,
+    runRate: record.runRate ?? 0,
+    distanceBasic: record.distanceBasic ?? 0,
+    distanceBasicMoney: record.distanceBasicMoney ?? 0,
+    distanceMoreMoney: record.distanceMoreMoney ?? 0,
+    distanceMaxMoney: record.distanceMaxMoney ?? 0,
+  })
+  modalVisible.value = true
+}
+
+async function handleSave() {
+  if (!selectedCityId.value) {
+    message.error('请先选择租户')
+    return
+  }
+  if (!form.name.trim()) {
+    message.error('请填写等级名称')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = { ...form, cityId: selectedCityId.value, id: editingId.value || undefined }
+    if (editingId.value) {
+      await riderLevelApi.edit(payload)
+    } else {
+      await riderLevelApi.add(payload)
+    }
+    message.success('保存成功')
+    modalVisible.value = false
+    await loadList()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function handleSetDefault(record: any) {
+  if (!selectedCityId.value) {
+    return
+  }
+  await riderLevelApi.setDefault(record.id, selectedCityId.value)
+  message.success('设置成功')
+  await loadList()
+}
+
+async function handleDelete(record: any) {
+  if (!selectedCityId.value) {
+    return
+  }
+  await riderLevelApi.del(record.id, selectedCityId.value)
+  message.success('删除成功')
+  await loadList()
+}
+
+function formatLevelRule(record: any) {
+  if (record.runFeeMode === 1) {
+    return `固定 ${record.runFixMoney ?? 0} 元`
+  }
+  if (record.runFeeMode === 2) {
+    return `按配送费 ${record.runRate ?? 0}%`
+  }
+  return `起始${record.distanceBasic ?? 0}米/${record.distanceBasicMoney ?? 0}元，超出每公里${record.distanceMoreMoney ?? 0}元，上限${record.distanceMaxMoney ?? 0}元`
+}
+
+onMounted(initPage)
+</script>
+
+<style scoped>
+.managed-city-pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 0 14px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: var(--panel-strong);
+  color: var(--text-soft);
+  font-size: 12px;
+}
+
+.page-note-card {
+  margin-bottom: 16px;
+}
+</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="cyan">分站</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-input value="分站角色" disabled />
+          </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 { adminRoleApi } from '@/api'
+
+interface RoleItem {
+  id: number
+  code: string
+  name: string
+  roleScope: string
+  status: number
+  builtIn?: boolean
+  adminUserCount?: number
+  substationCount?: 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: 'SUBSTATION' })
+
+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 formatBinding(record: RoleItem) {
+  const count = record.substationCount || 0
+  return count > 0 ? `分站账号 ${count}` : '未绑定账号'
+}
+
+function isBound(record: RoleItem) {
+  return (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 adminRoleApi.list()
+    list.value = Array.isArray(res?.data) ? res.data : []
+  } finally {
+    loading.value = false
+  }
+}
+
+function openAdd() {
+  editingId.value = null
+  Object.assign(form, { name: '', code: '', roleScope: 'SUBSTATION' })
+  modalVisible.value = true
+}
+
+function openEdit(record: RoleItem) {
+  editingId.value = record.id
+  Object.assign(form, { name: record.name, code: record.code, roleScope: 'SUBSTATION' })
+  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: 'SUBSTATION' }
+    if (editingId.value) {
+      await adminRoleApi.edit({ id: editingId.value, ...payload })
+    } else {
+      await adminRoleApi.add(payload)
+    }
+    message.success('保存成功')
+    modalVisible.value = false
+    await loadList()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function toggleStatus(record: RoleItem) {
+  if (record.status === 1) {
+    await adminRoleApi.ban(record.id)
+  } else {
+    await adminRoleApi.cancelBan(record.id)
+  }
+  message.success('操作成功')
+  await loadList()
+}
+
+async function handleDel(id: number) {
+  await adminRoleApi.del(id)
+  message.success('删除成功')
+  await loadList()
+}
+
+function goAssignMenus(record: RoleItem) {
+  router.push({ path: '/substation/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>
+                <span class="mini-tag tag-scope substation">分站</span>
+              </div>
+              <div class="plan-item-bottom">
+                <span class="role-code">@{{ 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">
+                <div class="note-title"><InfoCircleOutlined /> 分配说明</div>
+                <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" shape="round" :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">
+                  <div class="note-title"><InfoCircleOutlined /> 当前角色范围：分站</div>
+                  <p style="margin: 6px 0 0">当前菜单树由后端按分站角色范围过滤，只返回允许分配的菜单节点。</p>
+                </div>
+                <a-tree
+                  v-if="treeData.length"
+                  checkable
+                  block-node
+                  check-strictly
+                  default-expand-all
+                  :show-line="{ showLeafIcon: false }"
+                  :tree-data="treeData"
+                  :field-names="fieldNames"
+                  :checked-keys="checkedKeys"
+                  @check="handleCheck"
+                >
+                  <template #title="{ dataRef }">
+                    <span class="menu-node-name">
+                      <component :is="resolveIcon(dataRef.icon)" v-if="resolveIcon(dataRef.icon)" class="menu-icon" />
+                      <span class="menu-name-text">{{ dataRef.name }}</span>
+                    </span>
+                    <span class="menu-node-tags">
+                      <span class="mini-tag tag-scope" :class="dataRef.menuScope?.toLowerCase()">{{ formatScope(dataRef.menuScope) }}</span>
+                    </span>
+                  </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 { adminRoleApi } from '@/api'
+import {
+  ApiOutlined,
+  ApartmentOutlined,
+  ControlOutlined,
+  GlobalOutlined,
+  HomeOutlined,
+  SettingOutlined,
+  ShopOutlined,
+  StarOutlined,
+  TeamOutlined,
+  TrophyOutlined,
+  UnorderedListOutlined,
+  UserOutlined,
+  InfoCircleOutlined,
+} from '@ant-design/icons-vue'
+
+interface RoleVO {
+  id: number
+  code: string
+  name: string
+  roleScope: string
+}
+
+interface MenuTreeNode {
+  id: number
+  name: string
+  code: string
+  menuScope: string
+  checked: boolean
+  icon?: string
+  children: MenuTreeNode[]
+}
+
+const iconMap: Record<string, any> = {
+  HomeOutlined,
+  GlobalOutlined,
+  ApartmentOutlined,
+  ShopOutlined,
+  UserOutlined,
+  StarOutlined,
+  UnorderedListOutlined,
+  ControlOutlined,
+  ApiOutlined,
+  TeamOutlined,
+  TrophyOutlined,
+  SettingOutlined,
+}
+
+function resolveIcon(icon?: string) {
+  if (!icon) return null
+  return iconMap[icon] || null
+}
+
+function formatScope(scope?: string) {
+  if (scope === 'PLATFORM') return '平台'
+  if (scope === 'SUBSTATION') return '分站'
+  return '通用'
+}
+
+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 adminRoleApi.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 adminRoleApi.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 adminRoleApi.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;
+  transition: all 0.3s;
+}
+
+.plan-item:hover:not(.active) {
+  border-color: #d3b4fa;
+  background: var(--panel-tint);
+}
+
+.plan-item.active {
+  border-color: #d3b4fa;
+  background: var(--primary-50, #f6f0ff);
+  box-shadow: none;
+}
+
+.plan-item.active .plan-item-name {
+  color: var(--primary-color, #722ed1);
+}
+
+.plan-item-name {
+  color: var(--text-dark);
+  font-family: var(--font-display);
+  transition: color 0.3s;
+}
+
+.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;
+}
+
+.menu-node-name {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  font-size: 14px;
+}
+
+.menu-name-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menu-node-tags {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+
+.mini-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 8px;
+  height: 22px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.tag-scope.platform {
+  background: #e6f4ff;
+  color: #1677ff;
+}
+
+.tag-scope.substation {
+  background: #f6ffed;
+  color: #389e0d;
+}
+
+.tag-scope.both {
+  background: #f9f0ff;
+  color: #722ed1;
+}
+
+.note-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  color: var(--text-dark);
+}
+
+.role-code {
+  font-family: var(--font-mono, monospace);
+  opacity: 0.8;
+}
+
+.menu-icon {
+  margin-right: 6px;
+  font-size: 14px;
+  color: var(--text-soft);
+  flex-shrink: 0;
+}
+
+.plan-content > :deep(.ant-empty) {
+  margin: auto 0;
+}
+
+:deep(.ant-tree) {
+  background: transparent;
+}
+
+:deep(.ant-tree-node-content-wrapper) {
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  padding: 4px 8px 4px 0;
+  transition: all 0.3s;
+}
+
+:deep(.ant-tree-node-content-wrapper:hover) {
+  background-color: var(--panel-tint);
+}
+
+:deep(.ant-tree-title) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+@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="搜索账号/昵称/手机" @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-else-if="column.key === 'status'">
+            <a-tag :color="record.userStatus === 1 ? 'green' : 'red'">
+              {{ record.userStatus === 1 ? '正常' : '禁用' }}
+            </a-tag>
+          </template>
+          <template v-else-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="手机号">
+            <a-input v-model:value="form.mobile" />
+          </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 { onMounted, reactive, ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { adminRoleApi, substationUserApi } 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: '', mobile: '', userPass: '' })
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '账号', dataIndex: 'userLogin' },
+  { title: '昵称', dataIndex: 'userNickname' },
+  { title: '手机', dataIndex: 'mobile' },
+  { 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 substationUserApi.list(keyword.value)
+    list.value = Array.isArray(res?.data) ? res.data : []
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadRoles() {
+  const res: any = await adminRoleApi.list()
+  roleOptions.value = Array.isArray(res?.data) ? res.data : []
+}
+
+function openAdd() {
+  editingId.value = null
+  Object.assign(form, { roleId: roleOptions.value[0]?.id, userLogin: '', userNickname: '', mobile: '', userPass: '' })
+  modalVisible.value = true
+}
+
+function openEdit(record: any) {
+  editingId.value = record.id
+  Object.assign(form, {
+    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) {
+      await substationUserApi.edit({ ...form, id: editingId.value })
+    } else {
+      await substationUserApi.add(form)
+    }
+    message.success('保存成功')
+    modalVisible.value = false
+    await Promise.all([loadList(), loadRoles()])
+  } finally {
+    saving.value = false
+  }
+}
+
+async function toggleBan(record: any) {
+  if (record.userStatus === 1) {
+    await substationUserApi.ban(record.id)
+  } else {
+    await substationUserApi.cancelBan(record.id)
+  }
+  message.success('操作成功')
+  await loadList()
+}
+
+async function handleDel(id: number) {
+  await substationUserApi.del(id)
+  message.success('删除成功')
+  await 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 substationUserApi.changePassword({ id: pwdTargetId.value, ...pwdForm })
+    message.success('密码修改成功')
+    pwdVisible.value = false
+  } finally {
+    pwdSaving.value = false
+  }
+}
+
+onMounted(async () => {
+  await Promise.all([loadList(), loadRoles()])
+})
+</script>
@@ -213,8 +213,11 @@ import {
   ControlOutlined,
   GlobalOutlined,
   HomeOutlined,
+  SettingOutlined,
   ShopOutlined,
   StarOutlined,
+  TeamOutlined,
+  TrophyOutlined,
   UnorderedListOutlined,
   UserOutlined,
   EyeOutlined,
@@ -248,6 +251,9 @@ const iconOptions = [
   'UnorderedListOutlined',
   'ControlOutlined',
   'ApiOutlined',
+  'TeamOutlined',
+  'TrophyOutlined',
+  'SettingOutlined',
 ]
 const iconMap: Record<string, any> = {
@@ -260,6 +266,9 @@ const iconMap: Record&lt;string, any&gt; = {
   UnorderedListOutlined,
   ControlOutlined,
   ApiOutlined,
+  TeamOutlined,
+  TrophyOutlined,
+  SettingOutlined,
 }
 function resolveIcon(icon?: string) {
@@ -101,8 +101,11 @@ import {
   ControlOutlined,
   GlobalOutlined,
   HomeOutlined,
+  SettingOutlined,
   ShopOutlined,
   StarOutlined,
+  TeamOutlined,
+  TrophyOutlined,
   UnorderedListOutlined,
   UserOutlined,
   InfoCircleOutlined
@@ -135,6 +138,9 @@ const iconMap: Record&lt;string, any&gt; = {
   UnorderedListOutlined,
   ControlOutlined,
   ApiOutlined,
+  TeamOutlined,
+  TrophyOutlined,
+  SettingOutlined,
 }
 function resolveIcon(icon?: string) {