|
|
@@ -44,100 +44,43 @@
|
|
|
row-key="id"
|
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
:default-expand-all="false"
|
|
|
- :indent="60"
|
|
|
+ :indent="16"
|
|
|
border
|
|
|
class="menu-tree-table"
|
|
|
+ size="small"
|
|
|
+ :row-class-name="getRowClassName"
|
|
|
>
|
|
|
- <el-table-column prop="title" label="菜单名称" min-width="450">
|
|
|
+ <el-table-column prop="title" label="菜单名称" min-width="400">
|
|
|
<template #default="{ row }">
|
|
|
- <div class="menu-info" :class="getMenuLevelClass(row)">
|
|
|
- <div class="menu-content">
|
|
|
- <!-- 展开/收起按钮前置 -->
|
|
|
- <div class="expand-button-wrapper">
|
|
|
- <el-button
|
|
|
- v-if="row.children && row.children.length > 0"
|
|
|
- :icon="row.expanded ? Fold : Expand"
|
|
|
- size="small"
|
|
|
- text
|
|
|
- @click="toggleExpand(row)"
|
|
|
- class="expand-btn"
|
|
|
- />
|
|
|
- <div v-else class="expand-placeholder"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 强化层级指示器 -->
|
|
|
- <div class="level-indicators">
|
|
|
- <!-- 主菜单层级指示 -->
|
|
|
- <div v-if="getMenuLevel(row) === 0" class="level-indicator level-0">
|
|
|
- <div class="level-bar main-level"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 子菜单层级指示 -->
|
|
|
- <div v-else-if="getMenuLevel(row) === 1" class="level-indicator level-1">
|
|
|
- <div class="level-bar sub-level"></div>
|
|
|
- <div class="level-connector"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 按钮权限层级指示 -->
|
|
|
- <div v-else-if="getMenuLevel(row) === 2" class="level-indicator level-2">
|
|
|
- <div class="level-bar button-level"></div>
|
|
|
- <div class="level-connector"></div>
|
|
|
- <div class="level-connector-deep"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 菜单图标 -->
|
|
|
- <el-icon v-if="row.icon" class="menu-icon" :class="getMenuIconClass(row)">
|
|
|
- <component :is="getIconComponent(row.icon)" />
|
|
|
- </el-icon>
|
|
|
- <el-icon v-else class="menu-icon default-icon" :class="getMenuIconClass(row)">
|
|
|
- <component :is="getDefaultIcon(row)" />
|
|
|
- </el-icon>
|
|
|
-
|
|
|
- <!-- 菜单标题 -->
|
|
|
- <span class="menu-title" :class="getMenuTitleClass(row)">{{ row.title }}</span>
|
|
|
-
|
|
|
- <!-- 层级标识 -->
|
|
|
- <span class="level-badge" :class="getLevelBadgeClass(row)">
|
|
|
- L{{ getMenuLevel(row) + 1 }}
|
|
|
- </span>
|
|
|
-
|
|
|
- <!-- 菜单类型标签 -->
|
|
|
- <el-tag
|
|
|
- v-if="row.menu_type === 'button'"
|
|
|
- type="warning"
|
|
|
- size="small"
|
|
|
- class="menu-type-tag"
|
|
|
- >
|
|
|
- 功能按钮
|
|
|
- </el-tag>
|
|
|
- <el-tag
|
|
|
- v-else-if="row.menu_type === 'menu'"
|
|
|
- type="success"
|
|
|
- size="small"
|
|
|
- class="menu-type-tag"
|
|
|
- >
|
|
|
- 菜单项
|
|
|
- </el-tag>
|
|
|
- <el-tag
|
|
|
- v-else-if="row.menu_type === 'parent'"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- class="menu-type-tag"
|
|
|
- >
|
|
|
- 父菜单
|
|
|
- </el-tag>
|
|
|
-
|
|
|
- <!-- 隐藏状态 -->
|
|
|
- <el-tag
|
|
|
- v-if="row.is_hidden"
|
|
|
- type="info"
|
|
|
- size="small"
|
|
|
- class="menu-type-tag"
|
|
|
- >
|
|
|
- 隐藏
|
|
|
- </el-tag>
|
|
|
- </div>
|
|
|
+ <div class="menu-item-simple">
|
|
|
+ <!-- 只有非父菜单且没有子项的菜单才显示菜单图标 -->
|
|
|
+ <el-icon v-if="row.icon && !row.hasChildren && row.menu_type !== 'parent'" class="menu-icon-simple">
|
|
|
+ <component :is="getIconComponent(row.icon)" />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon v-else-if="!row.hasChildren && row.menu_type !== 'parent'" class="menu-icon-simple menu-icon-default">
|
|
|
+ <component :is="getDefaultIcon(row)" />
|
|
|
+ </el-icon>
|
|
|
+
|
|
|
+ <!-- 菜单标题 -->
|
|
|
+ <span class="menu-title-simple">{{ row.title }}</span>
|
|
|
+
|
|
|
+ <!-- 菜单类型标签 -->
|
|
|
+ <el-tag
|
|
|
+ v-if="row.menu_type === 'button'"
|
|
|
+ type="warning"
|
|
|
+ size="small"
|
|
|
+ class="menu-type-tag-simple"
|
|
|
+ >
|
|
|
+ 按钮
|
|
|
+ </el-tag>
|
|
|
+ <el-tag
|
|
|
+ v-else-if="row.menu_type === 'parent'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ class="menu-type-tag-simple"
|
|
|
+ >
|
|
|
+ 父菜单
|
|
|
+ </el-tag>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -523,12 +466,7 @@ const getLevelBadgeClass = (menu: any) => {
|
|
|
// 获取菜单层级样式类
|
|
|
const getMenuLevelClass = (menu: any) => {
|
|
|
const level = getMenuLevel(menu)
|
|
|
- switch (level) {
|
|
|
- case 0: return 'menu-level-0' // 主菜单
|
|
|
- case 1: return 'menu-level-1' // 子菜单
|
|
|
- case 2: return 'menu-level-2' // 按钮权限
|
|
|
- default: return 'menu-level-default'
|
|
|
- }
|
|
|
+ return `menu-level-${level}`
|
|
|
}
|
|
|
|
|
|
// 获取菜单图标样式类
|
|
|
@@ -570,7 +508,8 @@ const buildMenuTree = (menuList: any[]) => {
|
|
|
menuMap.set(menu.id, {
|
|
|
...menu,
|
|
|
children: [],
|
|
|
- hasChildren: false
|
|
|
+ hasChildren: false,
|
|
|
+ level: 0 // 添加层级信息
|
|
|
})
|
|
|
})
|
|
|
|
|
|
@@ -588,7 +527,7 @@ const buildMenuTree = (menuList: any[]) => {
|
|
|
return (a.sort_order || 0) - (b.sort_order || 0)
|
|
|
})
|
|
|
|
|
|
- // 构建树结构
|
|
|
+ // 构建树结构并设置层级
|
|
|
let rootCount = 0
|
|
|
let childCount = 0
|
|
|
|
|
|
@@ -596,10 +535,12 @@ const buildMenuTree = (menuList: any[]) => {
|
|
|
const menuNode = menuMap.get(menu.id)
|
|
|
if (menu.parent_id && menuMap.has(menu.parent_id)) {
|
|
|
const parentNode = menuMap.get(menu.parent_id)
|
|
|
+ menuNode.level = parentNode.level + 1 // 设置子节点层级
|
|
|
parentNode.children.push(menuNode)
|
|
|
parentNode.hasChildren = true // 确保设置hasChildren为true
|
|
|
childCount++
|
|
|
} else {
|
|
|
+ menuNode.level = 0 // 根节点层级为0
|
|
|
tree.push(menuNode)
|
|
|
rootCount++
|
|
|
}
|
|
|
@@ -623,8 +564,11 @@ const buildMenuTree = (menuList: any[]) => {
|
|
|
|
|
|
console.log(`📂 层级 ${level}: ${node.title} 有 ${node.children.length} 个子节点`)
|
|
|
|
|
|
- // 递归排序子节点
|
|
|
- node.children.forEach(child => sortChildren(child, level + 1))
|
|
|
+ // 递归排序子节点并设置层级
|
|
|
+ node.children.forEach((child, index) => {
|
|
|
+ child.level = level + 1
|
|
|
+ sortChildren(child, level + 1)
|
|
|
+ })
|
|
|
} else {
|
|
|
// 确保没有子节点的节点hasChildren为false
|
|
|
node.hasChildren = false
|
|
|
@@ -637,7 +581,8 @@ const buildMenuTree = (menuList: any[]) => {
|
|
|
console.log('🔍 根节点详情:', tree.map(t => ({
|
|
|
title: t.title,
|
|
|
children: t.children.length,
|
|
|
- hasChildren: t.hasChildren
|
|
|
+ hasChildren: t.hasChildren,
|
|
|
+ level: t.level
|
|
|
})))
|
|
|
|
|
|
return tree
|
|
|
@@ -699,11 +644,14 @@ const loadMenus = async () => {
|
|
|
// 展开主要节点（只展开有子菜单的主菜单）
|
|
|
const expandMainNodes = () => {
|
|
|
if (menuTableRef.value && menuTree.value) {
|
|
|
- menuTree.value.forEach(node => {
|
|
|
- if (node.hasChildren && node.children && node.children.length > 0) {
|
|
|
- // 只展开主菜单，不展开子菜单
|
|
|
- menuTableRef.value.toggleRowExpansion(node, true)
|
|
|
- }
|
|
|
+ // 等待DOM更新后再展开
|
|
|
+ nextTick(() => {
|
|
|
+ menuTree.value.forEach(node => {
|
|
|
+ if (node.hasChildren && node.children && node.children.length > 0) {
|
|
|
+ // 只展开主菜单，不展开子菜单
|
|
|
+ menuTableRef.value.toggleRowExpansion(node, true)
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -834,11 +782,9 @@ const handleMenuTypeChange = (type: string) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 切换展开状态
|
|
|
-const toggleExpand = (row: any) => {
|
|
|
- if (menuTableRef.value) {
|
|
|
- menuTableRef.value.toggleRowExpansion(row)
|
|
|
- }
|
|
|
+// 获取表格行的CSS类名
|
|
|
+const getRowClassName = ({ row }: { row: any }) => {
|
|
|
+ return `menu-row-${row.menu_type}`
|
|
|
}
|
|
|
|
|
|
// 保存菜单
|
|
|
@@ -1275,224 +1221,270 @@ onMounted(() => {
|
|
|
gap: 12px;
|
|
|
}
|
|
|
|
|
|
-/* 菜单树表格样式 */
|
|
|
+/* 菜单树表格样式 - 简洁版本 */
|
|
|
.menu-tree-table {
|
|
|
- border-radius: 8px;
|
|
|
+ border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
-/* 菜单信息容器 */
|
|
|
-.menu-info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- padding: 4px 0;
|
|
|
+/* 精确控制缩进 - 模仿样例图片 */
|
|
|
+.menu-tree-table :deep(.el-table__indent) {
|
|
|
+ width: 16px !important;
|
|
|
+ display: inline-block !important;
|
|
|
}
|
|
|
|
|
|
-.menu-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- width: 100%;
|
|
|
+/* 确保树形结构的缩进显示 */
|
|
|
+.menu-tree-table :deep(.el-table__cell) {
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-/* 展开按钮样式 */
|
|
|
-.expand-button-wrapper {
|
|
|
+.menu-tree-table :deep(.el-table__cell .cell) {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- justify-content: center;
|
|
|
}
|
|
|
|
|
|
-.expand-btn {
|
|
|
- padding: 0;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border: none;
|
|
|
- background: transparent;
|
|
|
+/* 强制显示缩进 */
|
|
|
+.menu-tree-table :deep(.el-table__row--level-1 .el-table__cell:first-child .cell) {
|
|
|
+ padding-left: 16px !important;
|
|
|
}
|
|
|
|
|
|
-.expand-btn:hover {
|
|
|
- background: #f0f0f0;
|
|
|
- border-radius: 4px;
|
|
|
+.menu-tree-table :deep(.el-table__row--level-2 .el-table__cell:first-child .cell) {
|
|
|
+ padding-left: 32px !important;
|
|
|
}
|
|
|
|
|
|
-.expand-placeholder {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
+.menu-tree-table :deep(.el-table__row--level-3 .el-table__cell:first-child .cell) {
|
|
|
+ padding-left: 48px !important;
|
|
|
}
|
|
|
|
|
|
-/* 层级指示器 */
|
|
|
-.level-indicators {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-right: 8px;
|
|
|
+/* 备用方案：如果Element Plus的level类不生效，使用属性选择器 */
|
|
|
+.menu-tree-table :deep(.el-table__row[aria-level="1"] .el-table__cell:first-child .cell) {
|
|
|
+ padding-left: 28px !important; /* 12px基础 + 16px缩进 */
|
|
|
}
|
|
|
|
|
|
-.level-indicator {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
+.menu-tree-table :deep(.el-table__row[aria-level="2"] .el-table__cell:first-child .cell) {
|
|
|
+ padding-left: 44px !important; /* 12px基础 + 32px缩进 */
|
|
|
}
|
|
|
|
|
|
-.level-bar {
|
|
|
- width: 4px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 2px;
|
|
|
- margin-right: 6px;
|
|
|
+.menu-tree-table :deep(.el-table__row[aria-level="3"] .el-table__cell:first-child .cell) {
|
|
|
+ padding-left: 60px !important; /* 12px基础 + 48px缩进 */
|
|
|
}
|
|
|
|
|
|
-.level-bar.main-level {
|
|
|
- background: linear-gradient(135deg, #409eff, #67c23a);
|
|
|
- box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
|
|
+/* 表格行样式 - 紧凑布局 */
|
|
|
+.menu-tree-table :deep(.el-table__row) {
|
|
|
+ height: 42px !important;
|
|
|
}
|
|
|
|
|
|
-.level-bar.sub-level {
|
|
|
- background: linear-gradient(135deg, #67c23a, #e6a23c);
|
|
|
- box-shadow: 0 2px 4px rgba(103, 194, 58, 0.3);
|
|
|
+.menu-tree-table :deep(.el-table__cell) {
|
|
|
+ padding: 6px 12px !important;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
-.level-bar.button-level {
|
|
|
- background: linear-gradient(135deg, #e6a23c, #f56c6c);
|
|
|
- box-shadow: 0 2px 4px rgba(230, 162, 60, 0.3);
|
|
|
+/* 第一列特殊处理 - 确保缩进显示 */
|
|
|
+.menu-tree-table :deep(.el-table__body .el-table__row .el-table__cell:first-child) {
|
|
|
+ padding-left: 0 !important;
|
|
|
}
|
|
|
|
|
|
-.level-connector {
|
|
|
- width: 12px;
|
|
|
- height: 1px;
|
|
|
- background: #dcdfe6;
|
|
|
- margin-right: 4px;
|
|
|
+.menu-tree-table :deep(.el-table__body .el-table__row .el-table__cell:first-child .cell) {
|
|
|
+ padding-left: 12px !important;
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center !important;
|
|
|
}
|
|
|
|
|
|
-.level-connector-deep {
|
|
|
- width: 8px;
|
|
|
- height: 1px;
|
|
|
- background: #e4e7ed;
|
|
|
- margin-right: 4px;
|
|
|
+/* 表头样式 */
|
|
|
+.menu-tree-table .el-table__header-wrapper .el-table__cell {
|
|
|
+ background-color: #fafafa;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666;
|
|
|
+ font-size: 13px;
|
|
|
+ padding: 10px 12px !important;
|
|
|
}
|
|
|
|
|
|
-/* 菜单图标样式 */
|
|
|
-.menu-icon {
|
|
|
- font-size: 18px;
|
|
|
- margin-right: 8px;
|
|
|
+/* 树形展开图标样式 - 更明显的向下箭头 */
|
|
|
+.menu-tree-table :deep(.el-table__expand-icon) {
|
|
|
+ width: 16px !important;
|
|
|
+ height: 16px !important;
|
|
|
+ color: #666 !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+ margin-right: 8px !important;
|
|
|
+ display: inline-flex !important;
|
|
|
+ align-items: center !important;
|
|
|
+ justify-content: center !important;
|
|
|
+ border: none !important;
|
|
|
+ background: none !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ cursor: pointer !important;
|
|
|
+ transition: all 0.2s ease !important;
|
|
|
+ border-radius: 2px !important;
|
|
|
}
|
|
|
|
|
|
-.main-menu-icon {
|
|
|
- color: #409eff;
|
|
|
- font-size: 20px;
|
|
|
+.menu-tree-table :deep(.el-table__expand-icon:hover) {
|
|
|
+ color: #409eff !important;
|
|
|
+ background-color: rgba(64, 158, 255, 0.1) !important;
|
|
|
+ transform: scale(1.05) !important;
|
|
|
}
|
|
|
|
|
|
-.sub-menu-icon {
|
|
|
- color: #67c23a;
|
|
|
- font-size: 18px;
|
|
|
+.menu-tree-table :deep(.el-table__expand-icon::before) {
|
|
|
+ content: '▶' !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+ font-weight: bold !important;
|
|
|
+ transition: transform 0.2s ease !important;
|
|
|
+ display: block !important;
|
|
|
+ font-family: inherit !important;
|
|
|
+ line-height: 1 !important;
|
|
|
}
|
|
|
|
|
|
-.button-icon {
|
|
|
- color: #e6a23c;
|
|
|
- font-size: 16px;
|
|
|
+.menu-tree-table :deep(.el-table__expand-icon.el-table__expand-icon--expanded::before) {
|
|
|
+ content: '▼' !important;
|
|
|
+ transform: none !important;
|
|
|
+ color: #409eff !important;
|
|
|
}
|
|
|
|
|
|
-.default-icon {
|
|
|
- color: #909399;
|
|
|
+/* 隐藏没有子项的展开图标位置 */
|
|
|
+.menu-tree-table :deep(.el-table__placeholder) {
|
|
|
+ width: 14px !important;
|
|
|
+ height: 14px !important;
|
|
|
+ margin-right: 8px !important;
|
|
|
}
|
|
|
|
|
|
-/* 菜单标题样式 */
|
|
|
-.menu-title {
|
|
|
- font-weight: 500;
|
|
|
- margin-right: 12px;
|
|
|
+/* 简化的菜单项样式 */
|
|
|
+.menu-item-simple {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.4;
|
|
|
+ min-height: 30px;
|
|
|
}
|
|
|
|
|
|
-.main-menu-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #303133;
|
|
|
+/* 菜单图标 - 简化版本 */
|
|
|
+.menu-icon-simple {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
|
|
|
-.sub-menu-title {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 500;
|
|
|
- color: #606266;
|
|
|
+.menu-icon-default {
|
|
|
+ color: #999;
|
|
|
}
|
|
|
|
|
|
-.button-title {
|
|
|
+/* 菜单标题 - 统一样式 */
|
|
|
+.menu-title-simple {
|
|
|
+ flex: 1;
|
|
|
+ color: #333;
|
|
|
font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #909399;
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 1.4;
|
|
|
}
|
|
|
|
|
|
-/* 层级徽章 */
|
|
|
-.level-badge {
|
|
|
- font-size: 11px;
|
|
|
+/* 菜单类型标签 - 简化版本 */
|
|
|
+.menu-type-tag-simple {
|
|
|
+ font-size: 10px;
|
|
|
padding: 2px 6px;
|
|
|
- border-radius: 10px;
|
|
|
- font-weight: 600;
|
|
|
- margin-right: 8px;
|
|
|
- min-width: 24px;
|
|
|
- text-align: center;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 16px;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-left: 8px;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
|
|
|
-.level-badge-main {
|
|
|
- background: #e1f3ff;
|
|
|
- color: #409eff;
|
|
|
- border: 1px solid #b3d8ff;
|
|
|
+/* 表格文本样式 */
|
|
|
+.table-text {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #666;
|
|
|
}
|
|
|
|
|
|
-.level-badge-sub {
|
|
|
- background: #f0f9ff;
|
|
|
- color: #67c23a;
|
|
|
- border: 1px solid #c2e7b0;
|
|
|
+/* 表格悬停效果 - 轻微 */
|
|
|
+.menu-tree-table .el-table__row:hover {
|
|
|
+ background-color: #fafafa !important;
|
|
|
}
|
|
|
|
|
|
-.level-badge-button {
|
|
|
- background: #fdf6ec;
|
|
|
- color: #e6a23c;
|
|
|
- border: 1px solid #f5dab1;
|
|
|
+/* 移除所有复杂的背景色和边框 */
|
|
|
+.menu-tree-table :deep(.el-table__row) {
|
|
|
+ background-color: transparent !important;
|
|
|
+ transition: all 0.2s ease !important;
|
|
|
}
|
|
|
|
|
|
-.level-badge-default {
|
|
|
- background: #f4f4f5;
|
|
|
- color: #909399;
|
|
|
- border: 1px solid #d3d4d6;
|
|
|
+/* 根据菜单类型添加背景色区分 */
|
|
|
+.menu-tree-table :deep(.menu-row-parent) {
|
|
|
+ background-color: rgba(64, 158, 255, 0.04) !important; /* 父菜单 - 淡蓝色 */
|
|
|
}
|
|
|
|
|
|
-/* 菜单类型标签 */
|
|
|
-.menu-type-tag {
|
|
|
- margin-right: 8px;
|
|
|
- font-size: 11px;
|
|
|
- padding: 2px 8px;
|
|
|
- border-radius: 12px;
|
|
|
+.menu-tree-table :deep(.menu-row-menu) {
|
|
|
+ background-color: rgba(103, 194, 58, 0.04) !important; /* 菜单项 - 淡绿色 */
|
|
|
}
|
|
|
|
|
|
-/* 菜单层级背景 */
|
|
|
-.menu-level-0 {
|
|
|
- background: linear-gradient(90deg, rgba(64, 158, 255, 0.05), transparent);
|
|
|
- border-left: 3px solid #409eff;
|
|
|
- padding-left: 8px;
|
|
|
+.menu-tree-table :deep(.menu-row-button) {
|
|
|
+ background-color: rgba(230, 162, 60, 0.04) !important; /* 功能按钮 - 淡橙色 */
|
|
|
}
|
|
|
|
|
|
-.menu-level-1 {
|
|
|
- background: linear-gradient(90deg, rgba(103, 194, 58, 0.05), transparent);
|
|
|
- border-left: 3px solid #67c23a;
|
|
|
- padding-left: 12px;
|
|
|
+/* 悬停效果 */
|
|
|
+.menu-tree-table :deep(.el-table__row:hover) {
|
|
|
+ background-color: #f8f9fa !important;
|
|
|
}
|
|
|
|
|
|
-.menu-level-2 {
|
|
|
- background: linear-gradient(90deg, rgba(230, 162, 60, 0.05), transparent);
|
|
|
- border-left: 3px solid #e6a23c;
|
|
|
- padding-left: 16px;
|
|
|
+.menu-tree-table :deep(.menu-row-parent:hover) {
|
|
|
+ background-color: rgba(64, 158, 255, 0.08) !important;
|
|
|
+}
|
|
|
+
|
|
|
+.menu-tree-table :deep(.menu-row-menu:hover) {
|
|
|
+ background-color: rgba(103, 194, 58, 0.08) !important;
|
|
|
+}
|
|
|
+
|
|
|
+.menu-tree-table :deep(.menu-row-button:hover) {
|
|
|
+ background-color: rgba(230, 162, 60, 0.08) !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 状态标签样式 */
|
|
|
+.menu-tree-table .el-tag {
|
|
|
+ font-size: 10px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 16px;
|
|
|
+ border-radius: 2px;
|
|
|
}
|
|
|
|
|
|
-/* 操作按钮 */
|
|
|
+/* 开关组件样式 */
|
|
|
+.menu-tree-table .el-switch {
|
|
|
+ --el-switch-on-color: #67c23a;
|
|
|
+ --el-switch-off-color: #dcdfe6;
|
|
|
+}
|
|
|
+
|
|
|
+.menu-tree-table .el-switch.is-checked .el-switch__core {
|
|
|
+ background-color: #67c23a;
|
|
|
+}
|
|
|
+
|
|
|
+/* 操作按钮样式 */
|
|
|
.action-buttons {
|
|
|
display: flex;
|
|
|
- gap: 8px;
|
|
|
+ gap: 6px;
|
|
|
flex-wrap: nowrap;
|
|
|
}
|
|
|
|
|
|
.action-buttons .el-button {
|
|
|
- padding: 5px 12px;
|
|
|
+ padding: 4px 8px;
|
|
|
font-size: 12px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.action-buttons .el-button--primary {
|
|
|
+ background-color: #409eff;
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.action-buttons .el-button--success {
|
|
|
+ background-color: #67c23a;
|
|
|
+ border-color: #67c23a;
|
|
|
+}
|
|
|
+
|
|
|
+.action-buttons .el-button--danger {
|
|
|
+ background-color: #f56c6c;
|
|
|
+ border-color: #f56c6c;
|
|
|
}
|
|
|
|
|
|
/* 分页样式 */
|
|
|
@@ -1540,33 +1532,9 @@ onMounted(() => {
|
|
|
gap: 4px;
|
|
|
}
|
|
|
|
|
|
- .menu-content {
|
|
|
+ .menu-item-simple {
|
|
|
flex-wrap: wrap;
|
|
|
gap: 4px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-/* 表格行悬停效果 */
|
|
|
-.menu-tree-table .el-table__row:hover {
|
|
|
- background-color: #f5f7fa;
|
|
|
-}
|
|
|
-
|
|
|
-/* 表格边框优化 */
|
|
|
-.menu-tree-table .el-table__border-left-patch {
|
|
|
- border-top: 1px solid #ebeef5;
|
|
|
-}
|
|
|
-
|
|
|
-.menu-tree-table .el-table__border-bottom-patch {
|
|
|
- border-right: 1px solid #ebeef5;
|
|
|
-}
|
|
|
-
|
|
|
-/* 树形表格展开图标样式 */
|
|
|
-.menu-tree-table .el-table__expand-icon {
|
|
|
- color: #409eff;
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-.menu-tree-table .el-table__expand-icon.el-table__expand-icon--expanded {
|
|
|
- transform: rotate(90deg);
|
|
|
-}
|
|
|
</style>
|
