Refactor: Enhance role and menu management UI with updated styles, icon support,…

… and improved interactivity.

Refactor: Enhance role and menu management UI with updated styles, icon support,…
… and improved interactivity.
shaofan
1 parent 9fa70479
Showing 3 changed files with 386 additions and 35 deletions
src/style.css
src/views/system/MenuManage.vue
src/views/system/RoleMenuAssign.vue
@@ -745,7 +745,31 @@ a {
 }
 .list-search {
-  width: 220px;
+  width: 260px;
+}
+
+.list-search.ant-input-search .ant-input-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.list-search.ant-input-search .ant-input-group > .ant-input-affix-wrapper,
+.list-search.ant-input-search .ant-input-group > .ant-input {
+  border-radius: 999px !important;
+  border-right-width: 1px !important;
+}
+
+.list-search.ant-input-search .ant-input-group > .ant-input-group-addon {
+  background: transparent;
+  border: none;
+  padding: 0;
+  width: auto;
+}
+
+.list-search.ant-input-search .ant-input-group > .ant-input-group-addon .ant-btn {
+  border-radius: 999px !important;
+  border-left-width: 1px !important;
 }
 .list-table-card .ant-card-head {
@@ -3,14 +3,20 @@
     <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 wrap class="top-tags">
+            <a-tag v-if="currentNode" :color="currentNode.menuScope === 'PLATFORM' ? 'blue' : currentNode.menuScope === 'SUBSTATION' ? 'cyan' : 'purple'">{{ currentNode.menuScope === 'PLATFORM' ? '平台' : currentNode.menuScope === 'SUBSTATION' ? '分站' : '通用' }}</a-tag>
+            <a-tag v-if="currentNode" :color="currentNode.visible === 1 ? 'green' : 'default'">
+              <template #icon><EyeOutlined v-if="currentNode.visible === 1" /><EyeInvisibleOutlined v-else /></template>
+              {{ currentNode.visible === 1 ? '显示中' : '已隐藏' }}
+            </a-tag>
+            <a-tag v-if="currentNode" :color="currentNode.status === 1 ? 'blue' : 'error'">
+              <template #icon><CheckCircleOutlined v-if="currentNode.status === 1" /><StopOutlined v-else /></template>
+              {{ currentNode.status === 1 ? '已启用' : '已停用' }}
+            </a-tag>
           </a-space>
         </div>
         <div class="list-toolbar-right">
-          <a-button type="primary" @click="openAddRoot">新增根菜单</a-button>
+          <a-button type="primary" shape="round" @click="openAddRoot">新增根菜单</a-button>
         </div>
       </div>
@@ -31,13 +37,27 @@
             :field-names="fieldNames"
             block-node
             default-expand-all
+            :show-line="{ showLeafIcon: false }"
             @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 #title="{ dataRef }">
+                <div class="menu-tree-node" :class="{ 'is-node-disabled': dataRef.status === 0, 'is-node-hidden': dataRef.visible === 0 }">
+                  <span class="menu-node-name" :class="{ 'is-disabled': dataRef.status === 0, 'is-hidden': dataRef.visible === 0 }">
+                    <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()">
+                      {{ dataRef.menuScope === 'PLATFORM' ? '平台' : dataRef.menuScope === 'SUBSTATION' ? '分站' : '通用' }}
+                    </span>
+                    <span v-if="dataRef.visible === 0" class="mini-tag tag-warning" title="已隐藏">
+                      <EyeInvisibleOutlined /> 隐藏
+                    </span>
+                    <span v-if="dataRef.status === 0" class="mini-tag tag-error" title="已停用">
+                      <StopOutlined /> 停用
+                    </span>
+                  </span>
+                </div>
               </template>
           </a-tree>
             <a-empty v-else description="暂无菜单" />
@@ -53,21 +73,23 @@
               </div>
               <div class="plan-toolbar">
-                <div class="plan-toolbar-meta">
-                  <span class="plan-toolbar-eyebrow">当前编辑</span>
-                  <strong>{{ currentNode.name || '未命名菜单' }}</strong>
+                <div class="plan-toolbar-left">
+                  <div class="plan-toolbar-meta">
+                    <span class="plan-toolbar-eyebrow">当前编辑</span>
+                    <strong>{{ currentNode.name || '未命名菜单' }}</strong>
+                  </div>
+                  <a-space wrap class="plan-toolbar-actions">
+                    <a-button @click="openAddChild" shape="round">新增子菜单</a-button>
+                    <a-button @click="toggleVisible" shape="round">{{ form.visible === 1 ? '隐藏菜单' : '显示菜单' }}</a-button>
+                    <a-button @click="toggleStatus" shape="round">{{ form.status === 1 ? '停用菜单' : '启用菜单' }}</a-button>
+                    <a-popconfirm title="确认删除当前菜单？" @confirm="handleDelete">
+                      <a-button danger shape="round">删除菜单</a-button>
+                    </a-popconfirm>
+                  </a-space>
                 </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>
+                  <a-button type="primary" class="plan-save-button" shape="round" :loading="saving" @click="handleSave">保存菜单</a-button>
                 </div>
               </div>
             </div>
@@ -185,6 +207,21 @@
 import { computed, reactive, ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { systemMenuApi } from '@/api'
+import {
+  ApiOutlined,
+  ApartmentOutlined,
+  ControlOutlined,
+  GlobalOutlined,
+  HomeOutlined,
+  ShopOutlined,
+  StarOutlined,
+  UnorderedListOutlined,
+  UserOutlined,
+  EyeOutlined,
+  EyeInvisibleOutlined,
+  CheckCircleOutlined,
+  StopOutlined,
+} from '@ant-design/icons-vue'
 interface MenuNode {
   id: number
@@ -213,6 +250,23 @@ const iconOptions = [
   'ApiOutlined',
 ]
+const iconMap: Record<string, any> = {
+  HomeOutlined,
+  GlobalOutlined,
+  ApartmentOutlined,
+  ShopOutlined,
+  UserOutlined,
+  StarOutlined,
+  UnorderedListOutlined,
+  ControlOutlined,
+  ApiOutlined,
+}
+
+function resolveIcon(icon?: string) {
+  if (!icon) return null
+  return iconMap[icon] || null
+}
+
 const treeData = ref<MenuNode[]>([])
 const selectedKeys = ref<number[]>([])
 const loading = ref(false)
@@ -488,6 +542,12 @@ loadTree()
   box-shadow: var(--shadow-sm);
 }
+.plan-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
 .plan-toolbar-meta,
 .plan-toolbar-submit {
   display: flex;
@@ -568,4 +628,128 @@ loadTree()
     align-items: flex-start;
   }
 }
+
+.menu-tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 4px 4px 4px 0;
+}
+
+.menu-node-name {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  font-size: 14px;
+  transition: color 0.3s;
+}
+
+.menu-name-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menu-icon {
+  margin-right: 6px;
+  font-size: 14px;
+  color: var(--text-soft);
+  flex-shrink: 0;
+}
+
+.menu-tree-node.is-node-disabled {
+  opacity: 0.5;
+  filter: grayscale(100%);
+}
+
+.menu-tree-node.is-node-hidden {
+  opacity: 0.5;
+}
+
+.menu-node-name.is-disabled {
+  color: var(--text-soft);
+}
+
+.menu-node-name.is-hidden {
+  color: var(--text-soft);
+}
+
+.menu-node-tags {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.mini-tag {
+  font-size: 11px;
+  line-height: 18px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--line);
+  color: var(--text-soft);
+  font-weight: 500;
+}
+
+.mini-tag.tag-scope.platform {
+  color: #1677ff;
+  background: #e6f4ff;
+}
+
+.mini-tag.tag-scope.substation {
+  color: #52c41a;
+  background: #f6ffed;
+}
+
+.mini-tag.tag-scope.both {
+  color: #722ed1;
+  background: #f9f0ff;
+}
+
+.mini-tag.tag-warning {
+  color: #faad14;
+  background: #fffbe6;
+}
+
+.mini-tag.tag-error {
+  color: #ff4d4f;
+  background: #fff2f0;
+}
+:deep(.ant-tree) {
+  background: transparent;
+}
+:deep(.ant-tree-node-content-wrapper) {
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+:deep(.ant-tree-node-content-wrapper:hover) {
+  background-color: var(--fill-quaternary, #f5f5f5);
+}
+:deep(.ant-tree-node-selected) {
+  background-color: var(--primary-50, #f0e6ff) !important;
+}
+:deep(.ant-tree-node-selected .menu-name-text) {
+  color: var(--primary-color, #722ed1);
+  font-weight: 600;
+}
+:deep(.ant-tree-node-selected .menu-icon) {
+  color: var(--primary-color, #722ed1);
+}
+
+.top-tags :deep(.ant-tag) {
+  border-radius: 999px;
+  border: none;
+  padding: 2px 10px;
+  font-weight: 500;
+}
+
+/* Right side inputs styling */
+:deep(.ant-input),
+:deep(.ant-input-number),
+:deep(.ant-select-selector),
+:deep(.ant-tree-select .ant-select-selector) {
+  border-radius: 12px !important;
+}
 </style>
@@ -20,10 +20,10 @@
             >
               <div class="plan-item-top">
                 <span class="plan-item-name">{{ role.name }}</span>
-                <a-tag>{{ role.roleScope }}</a-tag>
+                <span class="mini-tag tag-scope" :class="role.roleScope?.toLowerCase()">{{ role.roleScope === 'PLATFORM' ? '平台' : role.roleScope === 'SUBSTATION' ? '分站' : '通用' }}</span>
               </div>
               <div class="plan-item-bottom">
-                <span>{{ role.code }}</span>
+                <span class="role-code">@{{ role.code }}</span>
               </div>
             </button>
             <a-empty v-if="!roles.length" description="暂无角色" />
@@ -34,7 +34,7 @@
           <template v-if="selectedRole">
             <div class="plan-content-top">
               <div class="soft-note-card plan-note-card">
-                <strong>分配说明</strong>
+                <div class="note-title"><InfoCircleOutlined /> 分配说明</div>
                 <p>这里只控制菜单可见性，不做完整接口权限。保存后用户重新登录即可看到最新菜单。</p>
               </div>
@@ -45,7 +45,7 @@
                 </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>
+                  <a-button type="primary" class="plan-save-button" shape="round" :loading="saving" @click="handleSave">保存分配</a-button>
                 </div>
               </div>
             </div>
@@ -53,7 +53,7 @@
             <div class="plan-content-body">
               <a-spin :spinning="loadingTree">
                 <div class="soft-note-card" style="margin-bottom: 12px">
-                  <strong>当前角色范围：{{ selectedRole.roleScope }}</strong>
+                  <div class="note-title"><InfoCircleOutlined /> 当前角色范围：{{ selectedRole.roleScope === 'PLATFORM' ? '平台' : selectedRole.roleScope === 'SUBSTATION' ? '分站' : '通用' }}</div>
                   <p style="margin: 6px 0 0">可勾选节点已经按角色范围过滤；保存后目标账号重新登录即可看到最新菜单。</p>
                 </div>
                 <a-tree
@@ -61,15 +61,21 @@
                 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="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 #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()">{{ dataRef.menuScope === 'PLATFORM' ? '平台' : dataRef.menuScope === 'SUBSTATION' ? '分站' : '通用' }}</span>
+                  </span>
                 </template>
               </a-tree>
                 <a-empty v-else description="当前角色暂无可分配菜单" />
@@ -89,6 +95,18 @@ import { computed, ref, watch } from &#39;vue&#39;
 import { useRoute } from 'vue-router'
 import { message } from 'ant-design-vue'
 import { systemRoleApi } from '@/api'
+import {
+  ApiOutlined,
+  ApartmentOutlined,
+  ControlOutlined,
+  GlobalOutlined,
+  HomeOutlined,
+  ShopOutlined,
+  StarOutlined,
+  UnorderedListOutlined,
+  UserOutlined,
+  InfoCircleOutlined
+} from '@ant-design/icons-vue'
 interface RoleVO {
   id: number
@@ -103,9 +121,27 @@ interface MenuTreeNode {
   code: string
   menuScope: string
   checked: boolean
+  icon?: string
   children: MenuTreeNode[]
 }
+const iconMap: Record<string, any> = {
+  HomeOutlined,
+  GlobalOutlined,
+  ApartmentOutlined,
+  ShopOutlined,
+  UserOutlined,
+  StarOutlined,
+  UnorderedListOutlined,
+  ControlOutlined,
+  ApiOutlined,
+}
+
+function resolveIcon(icon?: string) {
+  if (!icon) return null
+  return iconMap[icon] || null
+}
+
 const route = useRoute()
 const fieldNames = { title: 'name', key: 'id', children: 'children' }
 const roles = ref<RoleVO[]>([])
@@ -267,12 +303,28 @@ loadRoles()
   text-align: left;
   cursor: pointer;
   color: inherit;
+  transition: all 0.3s;
 }
-.plan-item.active {
-  border-color: var(--brand);
+.plan-item:hover:not(.active) {
+  border-color: #d3b4fa;
   background: var(--panel-tint);
-  box-shadow: var(--shadow-sm);
+}
+
+.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 {
@@ -308,6 +360,79 @@ loadRoles()
   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;
+}
+
+.tag-processing {
+  background: #e6f4ff;
+  color: #1677ff;
+}
+
+.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;
 }
@@ -316,6 +441,24 @@ loadRoles()
   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;