feat(accountPermission): 新增标签页整合账号角色管理并统一术语

zjk

2026-05-29 8feb6610ab56c274305495822693497ea3f6de85

feat(accountPermission): 新增标签页整合账号角色管理并统一术语

更新zh_CN本地化配置，将多处"人员"相关文案替换为"用户名称"
新增accountRoleTabs标签页组件，整合账号管理与角色管理页面
调整路由配置，将账户权限菜单指向新标签页组件，注释原有子路由
临时注释账号管理页面的表格序号列

 locales/zh_CN.json

@@ -429,7 +429,7 @@
  },
  "accountManagement": {
    "search": {
      "userName": "人员姓名",
      "userName": "用户名称",
      "userPhone": "联系电话",
      "role": "角色",
      "accountStatus": "账号状态",
@@ -440,7 +440,7 @@
    },
    "table": {
      "index": "序号",
      "personName": "人员名称",
      "personName": "用户名称",
      "number": "编号",
      "loginAccount": "登录账号",
      "phoneNumber": "联系电话",
@@ -532,7 +532,7 @@
    },
    "userTable": {
      "index": "序号",
      "personName": "人员名称",
      "personName": "用户名称",
      "number": "编号",
      "loginAccount": "登录账号",
      "phoneNumber": "联系电话",
@@ -628,7 +628,7 @@
        "relatedAccounts": "关联账号"
      },
      "table": {
        "personName": "人员名称",
        "personName": "用户名称",
        "loginAccount": "登录账号",
        "phoneNumber": "联系电话",
        "role": "角色",

 src/router/routes.static.ts

@@ -193,78 +193,78 @@
    title: '账户权限',
    requiresAuth: true,
    icon: 'icon-park-outline:peoples',
    menuType: 'dir',
    componentPath: null,
    menuType: 'page',
    componentPath: '/system/accountPermission/accountRoleTabs/index.vue',
    id: 201,
    keepAlive: true,
    pid: 2,
  },
  {
    name: 'accountManagement',
    path: '/system/accountPermission/accountManagement',
    title: '账号管理',
    requiresAuth: true,
    icon: 'icon-park-outline:user',
    menuType: 'page',
    componentPath: '/system/accountPermission/accountManagement/index.vue',
    id: 2011,
    keepAlive: false,
    pid: 201,
  },
  {
    name: 'permissionGroup',
    path: '/system/accountPermission/permissionGroup',
    title: '权限组设置',
    requiresAuth: true,
    icon: 'icon-park-outline:lock',
    menuType: 'page',
    componentPath: '/system/accountPermission/permissionGroup/index.vue',
    id: 2012,
    keepAlive: true,
    pid: 201,
  },
  {
    name: 'permissionGroupForm',
    path: '/system/accountPermission/permissionGroup/form',
    title: '权限组详情',
    requiresAuth: true,
    icon: 'icon-park-outline:lock',
    menuType: 'page',
    componentPath: '/system/accountPermission/permissionGroup/form.vue',
    id: 20131,
    keepAlive: false,
    pid: 201,
    hide: true, // 不在菜单中显示
    fullScreen: true,
    activeMenu: '/system/accountPermission/permissionGroup',
  },
  {
    name: 'roleManagement',
    path: '/system/accountPermission/roleManagement',
    title: '角色管理',
    requiresAuth: true,
    icon: 'icon-park-outline:permissions',
    menuType: 'page',
    componentPath: '/system/accountPermission/roleManagement/index.vue',
    id: 2014,
    keepAlive: true,
    pid: 201,
  },
  {
    name: 'roleDetail',
    path: '/system/accountPermission/roleManagement/detail',
    title: '角色详情',
    requiresAuth: true,
    icon: 'icon-park-outline:permissions',
    menuType: 'page',
    componentPath: '/system/accountPermission/roleManagement/detail.vue',
    id: 20151,
    keepAlive: false,
    pid: 201,
    hide: true, // 不在菜单中显示
    fullScreen: true,
    activeMenu: '/system/accountPermission/roleManagement',
  },
  // {
  //   name: 'accountManagement',
  //   path: '/system/accountPermission/accountManagement',
  //   title: '账号管理',
  //   requiresAuth: true,
  //   icon: 'icon-park-outline:user',
  //   menuType: 'page',
  //   componentPath: '/system/accountPermission/accountManagement/index.vue',
  //   id: 2011,
  //   keepAlive: false,
  //   pid: 201,
  // },
  // {
  //   name: 'permissionGroup',
  //   path: '/system/accountPermission/permissionGroup',
  //   title: '权限组设置',
  //   requiresAuth: true,
  //   icon: 'icon-park-outline:lock',
  //   menuType: 'page',
  //   componentPath: '/system/accountPermission/permissionGroup/index.vue',
  //   id: 2012,
  //   keepAlive: true,
  //   pid: 201,
  // },
  // {
  //   name: 'permissionGroupForm',
  //   path: '/system/accountPermission/permissionGroup/form',
  //   title: '权限组详情',
  //   requiresAuth: true,
  //   icon: 'icon-park-outline:lock',
  //   menuType: 'page',
  //   componentPath: '/system/accountPermission/permissionGroup/form.vue',
  //   id: 20131,
  //   keepAlive: false,
  //   pid: 201,
  //   hide: true, // 不在菜单中显示
  //   fullScreen: true,
  //   activeMenu: '/system/accountPermission',
  // },
  // {
  //   name: 'roleManagement',
  //   path: '/system/accountPermission/roleManagement',
  //   title: '角色管理',
  //   requiresAuth: true,
  //   icon: 'icon-park-outline:permissions',
  //   menuType: 'page',
  //   componentPath: '/system/accountPermission/roleManagement/index.vue',
  //   id: 2014,
  //   keepAlive: true,
  //   pid: 201,
  // },
  // {
  //   name: 'roleDetail',
  //   path: '/system/accountPermission/roleManagement/detail',
  //   title: '角色详情',
  //   requiresAuth: true,
  //   icon: 'icon-park-outline:permissions',
  //   menuType: 'page',
  //   componentPath: '/system/accountPermission/roleManagement/detail.vue',
  //   id: 20151,
  //   keepAlive: false,
  //   pid: 201,
  //   hide: true, // 不在菜单中显示
  //   fullScreen: true,
  //   activeMenu: '/system/accountPermission',
  // },
  {
    name: 'appVersion',
    path: '/system/appVersion',

 src/views/system/accountPermission/accountManagement/index.vue

@@ -49,7 +49,6 @@
const count = ref(0)
const listData = ref<any[]>([])


// 批量删除
function handleBatchDelete() {
  if (selectedRowKeys.value.length === 0) {
@@ -133,14 +132,14 @@
      return isSuperAdmin(row)
    },
  },
  {
    title: t('accountManagement.table.index'),
    align: 'left',
    key: 'index',
    width: 80,
    resizable: true,
    render: (row, index) => <span>{(pageParams.value.pageNum - 1) * pageParams.value.pageSize + index + 1}</span>,
  },
  // {
  //   title: t('accountManagement.table.index'),
  //   align: 'left',
  //   key: 'index',
  //   width: 80,
  //   resizable: true,
  //   render: (row, index) => <span>{(pageParams.value.pageNum - 1) * pageParams.value.pageSize + index + 1}</span>,
  // },
  {
    title: t('accountManagement.table.personName'),
    align: 'left',

 src/views/system/accountPermission/accountRoleTabs/index.vue

New file
@@ -0,0 +1,102 @@
<script setup lang="tsx">
import { computed, KeepAlive, ref } from 'vue'
import AccountManagementPage from '../accountManagement/index.vue'
import RoleManagementPage from '../roleManagement/index.vue'

type AccountPermissionTab = 'account' | 'permission' | 'role'

interface TabConfig {
  label: string
  value: AccountPermissionTab
  path: string
  component: any
}

const tabs: TabConfig[] = [
  {
    label: '账号管理',
    value: 'account',
    path: '',
    component: AccountManagementPage,
  },
  {
    label: '角色管理',
    value: 'role',
    path: '',
    component: RoleManagementPage,
  },
]

const activeTab = ref<AccountPermissionTab>('account')

const activeComponent = computed(() => {
  const currentTab = tabs.find(item => item.value === activeTab.value)
  return currentTab?.component || AccountManagementPage
})

function handleTabChange(tab: AccountPermissionTab) {
  if (activeTab.value === tab)
    return
  activeTab.value = tab
}
</script>

<template>
  <div class="roboTaxi w-full h-full">
    <div class="tab-bar">
      <button
        v-for="tab in tabs"
        :key="tab.value"
        type="button"
        class="tab-item"
        :class="{ 'is-active': activeTab === tab.value }"
        @click="handleTabChange(tab.value)"
      >
        {{ tab.label }}
      </button>
    </div>

    <KeepAlive>
      <component :is="activeComponent" />
    </KeepAlive>
  </div>
</template>

<style scoped lang="scss">
.tab-bar {
  display: flex;
  gap: 24px;
  padding: 0 8px;
  margin-bottom: 8px;
}

.tab-item {
  position: relative;
  padding-bottom: 10px;
  border: none;
  background: transparent;
  color: #171f26;
  font-size: 14px;
  cursor: pointer;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background-color 0.2s ease;
  }

  &.is-active {
    color: #0068ff;

    &::after {
      background: #0068ff;
    }
  }
}
</style>