更新优化调整

resources/admin/src/pages/auth/permissions/components/SaveForm.vue

@@ -1,18 +1,19 @@
 <template>
-	<a-form :model="form" :rules="rules" ref="dialogForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
+	<a-form :model="form" :rules="rules" ref="formRef" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
 		<!-- 第一行：权限名称和类型 -->
 		<a-row :gutter="16">
 			<a-col :span="12">
-				<a-form-item label="权限名称" name="title">
-					<a-input v-model:value="form.title" placeholder="权限名称" allow-clear />
+				<a-form-item label="权限名称" name="title" required>
+					<a-input v-model:value="form.title" placeholder="如：用户管理" allow-clear maxlength="50" show-count />
 				</a-form-item>
 			</a-col>
 			<a-col :span="12">
-				<a-form-item label="类型" name="type" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
-					<a-radio-group v-model:value="form.type" button-style="solid">
+				<a-form-item label="权限类型" name="type" required :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
+					<a-radio-group v-model:value="form.type" button-style="solid" @change="handleTypeChange">
 						<a-radio-button value="menu">菜单</a-radio-button>
 						<a-radio-button value="api">接口</a-radio-button>
 						<a-radio-button value="button">按钮</a-radio-button>
+						<a-radio-button value="url">链接</a-radio-button>
 					</a-radio-group>
 				</a-form-item>
 			</a-col>
@@ -28,32 +29,54 @@
 				</a-form-item>
 			</a-col>
 			<a-col :span="12">
-				<a-form-item label="权限编码" name="name">
-					<a-input v-model:value="form.name" placeholder="如: system.user.list" allow-clear />
-					<div class="form-tip">格式：模块.功能.操作，系统唯一标识</div>
+				<a-form-item label="权限编码" name="name" required>
+					<a-input v-model:value="form.name" placeholder="如：system.users.index" allow-clear />
+					<div class="form-tip">格式：模块.功能.操作，系统唯一标识，用于权限验证</div>
 				</a-form-item>
 			</a-col>
 		</a-row>
 
-		<!-- 第三行：路由地址和组件路径 -->
-		<a-row :gutter="16">
+		<!-- 第三行：路由地址和组件路径（菜单类型才显示） -->
+		<a-row v-if="form.type === 'menu'" :gutter="16">
 			<a-col :span="12">
-				<a-form-item label="路由地址" name="path">
+				<a-form-item label="路由地址" name="path" :required="isLeafNode">
 					<a-input v-model:value="form.path" placeholder="/system/users" allow-clear />
+					<div class="form-tip">前端路由路径，如 /system/users</div>
 				</a-form-item>
 			</a-col>
 			<a-col :span="12">
-				<a-form-item label="组件路径" name="component">
+				<a-form-item label="组件路径" name="component" :required="isLeafNode">
 					<a-input v-model:value="form.component" placeholder="system/users/index" allow-clear>
 						<template #addonBefore>pages/</template>
 					</a-input>
-					<div class="form-tip">顶级菜单或有子菜单的父节点不需要填写</div>
+					<div class="form-tip" v-if="!isLeafNode">父级菜单或包含子菜单时不需要填写</div>
+					<div class="form-tip" v-else>最后一级菜单必须填写，如 system/users/index</div>
 				</a-form-item>
 			</a-col>
 		</a-row>
 
-		<!-- 第四行：菜单图标和排序 -->
-		<a-row :gutter="16">
+		<!-- API 类型显示路由名称 -->
+		<a-row v-if="form.type === 'api'" :gutter="16">
+			<a-col :span="12">
+				<a-form-item label="API路由" name="path" required>
+					<a-input v-model:value="form.path" placeholder="如：users.index" allow-clear />
+					<div class="form-tip">后端 API 路由名称，用于接口权限验证</div>
+				</a-form-item>
+			</a-col>
+		</a-row>
+
+		<!-- 链接类型显示 URL -->
+		<a-row v-if="form.type === 'url'" :gutter="16">
+			<a-col :span="12">
+				<a-form-item label="链接地址" name="path" required>
+					<a-input v-model:value="form.path" placeholder="https://example.com" allow-clear />
+					<div class="form-tip">外部链接地址</div>
+				</a-form-item>
+			</a-col>
+		</a-row>
+
+		<!-- 第四行：菜单图标和排序（菜单类型才显示） -->
+		<a-row v-if="form.type === 'menu'" :gutter="16">
 			<a-col :span="12">
 				<a-form-item label="菜单图标" name="icon">
 					<sc-icon-picker v-model:value="form.icon" placeholder="请选择图标" />
@@ -62,6 +85,7 @@
 			<a-col :span="12">
 				<a-form-item label="排序" name="sort">
 					<a-input-number v-model:value="form.sort" :min="0" :max="10000" style="width: 100%" />
+					<div class="form-tip">数值越小越靠前</div>
 				</a-form-item>
 			</a-col>
 		</a-row>
@@ -69,31 +93,35 @@
 		<!-- 分隔线 -->
 		<a-divider />
 
-		<!-- 选项设置区域 -->
-		<div class="options-section">
+		<!-- 选项设置区域（菜单类型才显示） -->
+		<div v-if="form.type === 'menu'" class="options-section">
 			<h4>选项设置</h4>
 			<a-row :gutter="16">
-				<a-col :span="6">
-					<a-form-item label="是否隐藏" name="hidden" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
+				<a-col :span="12">
+					<a-form-item label="显示选项" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
 						<a-checkbox v-model:checked="form.hidden">隐藏菜单</a-checkbox>
 						<a-checkbox v-model:checked="form.hiddenBreadcrumb">隐藏面包屑</a-checkbox>
+						<a-checkbox v-model:checked="form.affix">固定标签页</a-checkbox>
 					</a-form-item>
 				</a-col>
-				<a-col :span="6">
-					<a-form-item label="是否缓存" name="keepAlive" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
-						<a-switch v-model:checked="form.keepAlive" size="small" />
+				<a-col :span="12">
+					<a-form-item label="页面缓存" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+						<a-switch v-model:checked="form.keepAlive" checked-children="启用" un-checked-children="禁用" />
+						<div class="form-tip">启用后页面会被缓存，切换回来时保留状态</div>
 					</a-form-item>
 				</a-col>
-				<a-col :span="6">
-					<a-form-item label="是否固定" name="affix" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
-						<a-switch v-model:checked="form.affix" size="small" />
-					</a-form-item>
-				</a-col>
-				<a-col :span="6">
-					<a-form-item label="外链" name="target">
-						<a-radio-group v-model:value="form.target" button-style="solid" size="small">
-							<a-radio-button value="null">当前窗口</a-radio-button>
-							<a-radio-button value="_blank">新窗口</a-radio-button>
+			</a-row>
+		</div>
+
+		<!-- 外链打开方式（链接类型才显示） -->
+		<div v-if="form.type === 'url'" class="options-section">
+			<h4>外链设置</h4>
+			<a-row :gutter="16">
+				<a-col :span="12">
+					<a-form-item label="打开方式" name="target">
+						<a-radio-group v-model:value="form.target">
+							<a-radio value="_self">当前窗口</a-radio>
+							<a-radio value="_blank">新窗口</a-radio>
 						</a-radio-group>
 					</a-form-item>
 				</a-col>
@@ -106,17 +134,24 @@
 		<!-- 状态 -->
 		<a-row :gutter="16">
 			<a-col :span="12">
-				<a-form-item label="状态" name="status" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
+				<a-form-item label="启用状态" name="status" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
 					<a-switch v-model:checked="statusChecked" checked-children="启用" un-checked-children="禁用" />
+					<div class="form-tip">禁用后该权限将不生效</div>
 				</a-form-item>
 			</a-col>
 		</a-row>
 
 		<!-- 操作按钮 -->
-		<a-form-item :wrapper-col="{ span: 18, offset: 4 }" style="margin-top: 32px">
+		<a-form-item :wrapper-col="{ span: 18, offset: 5 }" style="margin-top: 32px">
 			<a-space>
-				<a-button type="primary" @click="handleSave" :loading="loading" size="large">保存</a-button>
-				<a-button @click="$emit('cancel')" size="large">取消</a-button>
+				<a-button type="primary" @click="handleSave" :loading="loading" size="large">
+					<template #icon><CheckOutlined /></template>
+					保存
+				</a-button>
+				<a-button @click="$emit('cancel')" size="large">
+					<template #icon><CloseOutlined /></template>
+					取消
+				</a-button>
 			</a-space>
 		</a-form-item>
 	</a-form>
@@ -125,6 +160,7 @@
 <script setup>
 import { ref, reactive, watch, computed, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'
 import authApi from '@/api/auth'
 import scIconPicker from '@/components/scIconPicker/index.vue'
 
@@ -152,7 +188,7 @@ const form = reactive({
 	sort: 0,
 	type: 'menu',
 	status: 1,
-	target: null,
+	target: '_self',
 	// meta 字段内容
 	hidden: false,
 	hiddenBreadcrumb: false,
@@ -161,22 +197,52 @@ const form = reactive({
 })
 
 // 表单引用
-const dialogForm = ref()
+const formRef = ref()
 const loading = ref(false)
 
 // 验证规则
 const rules = {
-	name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
-	code: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
-	type: [{ required: true, message: '请选择类型', trigger: 'change' }]
+	title: [
+		{ required: true, message: '请输入权限名称', trigger: 'blur' },
+		{ max: 50, message: '权限名称不能超过50个字符', trigger: 'blur' }
+	],
+	name: [
+		{ required: true, message: '请输入权限编码', trigger: 'blur' },
+		{
+			pattern: /^[a-zA-Z][a-zA-Z0-9_.]*$/,
+			message: '权限编码格式不正确，格式：模块.功能.操作',
+			trigger: 'blur'
+		}
+	],
+	type: [{ required: true, message: '请选择权限类型', trigger: 'change' }],
+	path: (rule, value) => {
+		// 根据类型动态验证
+		if (form.type === 'menu' || form.type === 'api' || form.type === 'url') {
+			if (!value || !value.trim()) {
+				return Promise.reject('请输入' + getPathLabel(form.type))
+			}
+		}
+		return Promise.resolve()
+	},
+	component: (rule, value) => {
+		// 仅在菜单类型且为叶子节点时验证
+		if (form.type === 'menu' && isLeafNode.value) {
+			if (!value || !value.trim()) {
+				return Promise.reject('请输入组件路径')
+			}
+		}
+		return Promise.resolve()
+	}
 }
 
-// 菜单选项
-const menuOptions = ref([])
-const menuFieldNames = {
-	value: 'id',
-	label: 'title',
-	children: 'children'
+// 路径字段标签
+const getPathLabel = (type) => {
+	const labelMap = {
+		menu: '路由地址',
+		api: 'API路由',
+		url: '链接地址'
+	}
+	return labelMap[type] || '路径'
 }
 
 // 状态开关计算属性
@@ -187,6 +253,28 @@ const statusChecked = computed({
 	}
 })
 
+// 判断是否为叶子节点（没有子节点的节点）
+const isLeafNode = computed(() => {
+	// 这里需要根据当前节点是否有子节点来判断
+	// 暂时返回 false，需要根据实际数据判断
+	return !hasChildren.value
+})
+
+// 判断是否有子节点
+const hasChildren = computed(() => {
+	if (!form.id || !props.menu) return false
+	const node = findMenuNode(props.menu, form.id)
+	return node && node.children && node.children.length > 0
+})
+
+// 菜单选项
+const menuOptions = ref([])
+const menuFieldNames = {
+	value: 'id',
+	label: 'title',
+	children: 'children'
+}
+
 // 筛单化菜单树，排除自己和子节点
 const treeToMap = (tree, excludeId = null) => {
 	const map = []
@@ -240,27 +328,51 @@ watch(
 			}
 		} else if (!newVal) {
 			// 清空表单
-			setData({
-				id: '',
-				parent_id: props.parentId || 0,
-				name: '',
-				title: '',
-				path: '',
-				component: '',
-				icon: '',
-				sort: 0,
-				type: 'menu',
-				status: 1,
-				target: null,
-				hidden: false,
-				hiddenBreadcrumb: false,
-				keepAlive: false,
-				affix: false
-			})
+			resetForm()
 		}
 	}
 )
 
+// 类型切换处理
+const handleTypeChange = () => {
+	// 类型切换时清空一些字段
+	form.path = ''
+	form.component = ''
+	form.icon = ''
+	// 非菜单类型时清空meta相关字段
+	if (form.type !== 'menu') {
+		form.hidden = false
+		form.hiddenBreadcrumb = false
+		form.keepAlive = false
+		form.affix = false
+	}
+	// 非链接类型时重置target
+	if (form.type !== 'url') {
+		form.target = '_self'
+	}
+}
+
+// 重置表单
+const resetForm = () => {
+	Object.assign(form, {
+		id: '',
+		parent_id: props.parentId || 0,
+		name: '',
+		title: '',
+		path: '',
+		component: '',
+		icon: '',
+		sort: 0,
+		type: 'menu',
+		status: 1,
+		target: '_self',
+		hidden: false,
+		hiddenBreadcrumb: false,
+		keepAlive: false,
+		affix: false
+	})
+}
+
 // 加载权限详情
 const loadMenuDetail = async (id) => {
 	try {
@@ -276,7 +388,7 @@ const loadMenuDetail = async (id) => {
 // 保存
 const handleSave = async () => {
 	try {
-		await dialogForm.value.validate()
+		await formRef.value.validate()
 		loading.value = true
 
 		// 构建提交数据
@@ -292,7 +404,12 @@ const handleSave = async () => {
 			type: form.type,
 			status: form.status,
 			target: form.target,
-			meta: {
+			meta: null
+		}
+
+		// 仅菜单类型才有meta字段
+		if (form.type === 'menu') {
+			submitData.meta = {
 				hidden: form.hidden,
 				hiddenBreadcrumb: form.hiddenBreadcrumb,
 				keepAlive: form.keepAlive,
@@ -300,6 +417,18 @@ const handleSave = async () => {
 			}
 		}
 
+		// 根据类型处理空值
+		if (form.type === 'button' || form.type === 'api') {
+			submitData.component = ''
+			submitData.icon = ''
+		}
+		if (form.type === 'button') {
+			submitData.path = ''
+		}
+		if (form.type === 'api' || form.type === 'button' || form.type === 'url') {
+			submitData.meta = null
+		}
+
 		let res = {}
 		if (form.id) {
 			res = await authApi.permissions.edit.put(form.id, submitData)
@@ -317,6 +446,10 @@ const handleSave = async () => {
 	} catch (error) {
 		console.error('表单验证失败', error)
 		loading.value = false
+		if (error?.errorFields) {
+			// 表单验证失败
+			return
+		}
 		message.error('保存失败')
 	}
 }
@@ -333,7 +466,7 @@ const setData = (data, pid) => {
 	form.sort = data.sort || 0
 	form.type = data.type || 'menu'
 	form.status = data.status !== undefined ? data.status : 1
-	form.target = data.target || '_blank'
+	form.target = data.target || '_self'
 
 	// 解析 meta 字段
 	const meta = data.meta && typeof data.meta === 'string' ? JSON.parse(data.meta) : (data.meta || {})
@@ -352,9 +485,16 @@ onMounted(() => {
 	}
 })
 
+// 清空表单验证
+const clearValidate = () => {
+	formRef.value?.clearValidate()
+}
+
 // 暴露方法给父组件
 defineExpose({
-	setData
+	setData,
+	clearValidate,
+	resetForm
 })
 </script>
 

resources/admin/src/pages/auth/permissions/index.vue

@@ -2,61 +2,117 @@
 	<div class="pages-sidebar-layout permission-page">
 		<div class="left-box">
 			<div class="header">
-				<a-input v-model:value="menuFilterText" placeholder="搜索权限..." allow-clear @change="handleMenuSearch">
-					<template #prefix>
-						<SearchOutlined style="color: rgba(0, 0, 0, 0.45)" />
-					</template>
-				</a-input>
+				<div class="search-wrapper">
+					<a-input v-model:value="menuFilterText" placeholder="搜索权限名称或编码..." allow-clear
+						@change="handleMenuSearch">
+						<template #prefix>
+							<SearchOutlined style="color: rgba(0, 0, 0, 0.45)" />
+						</template>
+					</a-input>
+				</div>
+				<div class="actions">
+					<a-space size="small">
+						<a-tooltip title="展开全部">
+							<a-button type="text" size="small" @click="handleExpandAll">
+								<template #icon><UnorderedListOutlined /></template>
+							</a-button>
+						</a-tooltip>
+						<a-tooltip title="折叠全部">
+							<a-button type="text" size="small" @click="handleCollapseAll">
+								<template #icon><OrderedListOutlined /></template>
+							</a-button>
+						</a-tooltip>
+						<a-tooltip title="添加根权限">
+							<a-button type="text" size="small" @click="handleAdd(null)">
+								<template #icon><PlusOutlined /></template>
+							</a-button>
+						</a-tooltip>
+					</a-space>
+				</div>
 			</div>
 			<div class="body">
-				<a-tree
-					v-model:selectedKeys="selectedMenuKeys"
-					v-model:checkedKeys="checkedMenuKeys"
-					:tree-data="filteredMenuTree"
-					:field-names="{ title: 'title', key: 'id', children: 'children' }"
-					show-line
-					checkable
-					:check-strictly="false"
-					:expand-on-click-node="false"
-					@select="onMenuSelect"
-					@check="onMenuCheck">
-					<template #icon="{ dataRef }">
-						<ApartmentOutlined v-if="dataRef.children" />
-						<FileOutlined v-else />
-					</template>
-					<template #title="{ dataRef }">
-						<span class="tree-node-title">{{ dataRef.title }}</span>
-						<PlusOutlined class="tree-node-add" @click.stop="handleAdd(dataRef)" />
-					</template>
-				</a-tree>
+				<a-spin :spinning="loading" :delay="200">
+					<a-tree
+						ref="treeRef"
+						v-model:selectedKeys="selectedMenuKeys"
+						v-model:checkedKeys="checkedMenuKeys"
+						v-model:expandedKeys="expandedKeys"
+						:tree-data="filteredMenuTree"
+						:field-names="{ title: 'title', key: 'id', children: 'children' }"
+						show-line
+						checkable
+						:check-strictly="false"
+						:expand-on-click-node="false"
+						block-node
+						@select="onMenuSelect"
+						@check="onMenuCheck">
+						<template #icon="{ dataRef }">
+							<FolderOutlined v-if="dataRef.type === 'menu' && dataRef.children?.length" />
+							<FolderOpenOutlined v-else-if="dataRef.type === 'menu'" />
+							<ApiOutlined v-else-if="dataRef.type === 'api'" />
+							<ControlOutlined v-else />
+						</template>
+						<template #title="{ dataRef }">
+							<span class="tree-node-content">
+								<span class="tree-node-title">{{ dataRef.title }}</span>
+								<a-tag v-if="dataRef.name" class="tree-node-code" size="small">{{ dataRef.name }}</a-tag>
+								<a-tag v-if="dataRef.type !== 'menu'" :color="getTypeColor(dataRef.type)" size="small">
+									{{ getTypeLabel(dataRef.type) }}
+								</a-tag>
+								<span v-if="!dataRef.status" class="tree-node-disabled">
+									<StopOutlined />
+								</span>
+							</span>
+						</template>
+					</a-tree>
+				</a-spin>
 			</div>
 		</div>
 		<div class="right-box">
 			<div class="header">
-				<div class="title">{{ selectedMenu?.title || '请选择权限节点' }}</div>
-				<a-button type="link" size="small" @click="handleRefresh">
-					<template #icon><ReloadOutlined /></template>
-					刷新
-				</a-button>
+				<div class="title-wrapper">
+					<span class="title">{{ selectedMenu?.title || '请选择权限节点' }}</span>
+					<a-tag v-if="selectedMenu" :color="getTypeColor(selectedMenu.type)" size="small">
+						{{ getTypeLabel(selectedMenu.type) }}
+					</a-tag>
+				</div>
+				<a-space>
+					<a-button v-if="checkedMenuKeys.length > 0" danger size="small" @click="handleDeleteBatch">
+						<template #icon><DeleteOutlined /></template>
+						批量删除 ({{ checkedMenuKeys.length }})
+					</a-button>
+					<a-button type="link" size="small" @click="handleRefresh">
+						<template #icon><ReloadOutlined /></template>
+						刷新
+					</a-button>
+				</a-space>
 			</div>
 			<div class="body">
-				<save-form v-if="selectedMenu" :menu="menuTree" :menu-id="selectedMenu.id" :parent-id="parentId"
-					@success="handleSaveSuccess" />
-				<a-empty v-else description="请选择左侧权限节点后操作" :image-size="100" />
+				<a-spin :spinning="detailLoading" :delay="200">
+					<save-form v-if="selectedMenu" :menu="menuTree" :menu-id="selectedMenu.id" :parent-id="parentId"
+						@success="handleSaveSuccess" />
+					<a-empty v-else description="请选择左侧权限节点后操作" :image-size="100" />
+				</a-spin>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import { message, Modal } from 'ant-design-vue'
 import {
 	SearchOutlined,
 	ReloadOutlined,
-	ApartmentOutlined,
-	FileOutlined,
-	PlusOutlined
+	PlusOutlined,
+	FolderOutlined,
+	FolderOpenOutlined,
+	ApiOutlined,
+	ControlOutlined,
+	UnorderedListOutlined,
+	OrderedListOutlined,
+	DeleteOutlined,
+	StopOutlined
 } from '@ant-design/icons-vue'
 import saveForm from './components/SaveForm.vue'
 import authApi from '@/api/auth'
@@ -70,22 +126,38 @@ const menuTree = ref([])
 const filteredMenuTree = ref([])
 const selectedMenuKeys = ref([])
 const checkedMenuKeys = ref([])
+const expandedKeys = ref([])
 const menuFilterText = ref('')
 
 // 当前选中的菜单
 const selectedMenu = ref(null)
 const parentId = ref(null)
 
+// 加载状态
+const loading = ref(false)
+const detailLoading = ref(false)
+
+// 树引用
+const treeRef = ref()
+
 // 加载权限树
 const loadMenuTree = async () => {
 	try {
+		loading.value = true
 		const res = await authApi.permissions.tree.get()
 		if (res.code === 200) {
 			menuTree.value = res.data || []
 			filteredMenuTree.value = res.data || []
+			// 默认展开第一层
+			expandAllKeys(menuTree.value, 1)
+		} else {
+			message.error(res.message || '加载权限树失败')
 		}
 	} catch (error) {
 		console.error('加载权限树失败:', error)
+		message.error('加载权限树失败')
+	} finally {
+		loading.value = false
 	}
 }
 
@@ -103,17 +175,19 @@ const handleRefresh = () => {
 
 // 搜索权限
 const handleMenuSearch = (e) => {
-	const keyword = e.target?.value || ''
+	const keyword = (e.target?.value || '').trim()
 	menuFilterText.value = keyword
 	if (!keyword) {
 		filteredMenuTree.value = menuTree.value
 		return
 	}
 
-	// 递归过滤权限树
+	// 递归过滤权限树（支持搜索名称和编码）
 	const filterTree = (nodes) => {
 		return nodes.reduce((acc, node) => {
-			const isMatch = node.name && node.name.toLowerCase().includes(keyword.toLowerCase())
+			const titleMatch = node.title && node.title.toLowerCase().includes(keyword.toLowerCase())
+			const nameMatch = node.name && node.name.toLowerCase().includes(keyword.toLowerCase())
+			const isMatch = titleMatch || nameMatch
 			const filteredChildren = node.children ? filterTree(node.children) : []
 
 			if (isMatch || filteredChildren.length > 0) {
@@ -127,6 +201,8 @@ const handleMenuSearch = (e) => {
 	}
 
 	filteredMenuTree.value = filterTree(menuTree.value)
+	// 搜索时展开所有匹配节点
+	expandAllKeys(filteredMenuTree.value)
 }
 
 // 查找权限节点
@@ -176,38 +252,66 @@ const onMenuCheck = (checkedKeys, info) => {
 	console.log('checkedKeys:', checkedKeys, 'info:', info)
 }
 
-// 新增权限
-const handleAdd = async (parentNode) => {
-	try {
-		let newMenuData = {
-			parent_id: parentNode ? parentNode.id : 0,
-			name: '新权限',
-			code: '',
-			route: '',
-			component: '',
-			type: 'menu',
-			sort: 0,
-			status: 1
-		}
-
-		const res = await authApi.permissions.add.post(newMenuData)
-		if (res.code === 200) {
-			newMenuData.id = res.data.id
-			message.success('添加成功')
-			await loadMenuTree()
-
-			// 选中新增的权限
-			selectedMenuKeys.value = [newMenuData.id]
-			const menuNode = findMenuNode(menuTree.value, newMenuData.id)
-			selectedMenu.value = menuNode
-			parentId.value = parentNode ? parentNode.id : null
-		} else {
-			message.error(res.message || '添加失败')
-		}
-	} catch (error) {
-		console.error('添加权限失败:', error)
-		message.error('添加失败')
+// 获取所有节点ID（用于展开/折叠）
+const getAllKeys = (nodes) => {
+	const keys = []
+	const traverse = (items) => {
+		items.forEach(item => {
+			keys.push(item.id)
+			if (item.children?.length) {
+				traverse(item.children)
+			}
+		})
 	}
+	traverse(nodes)
+	return keys
+}
+
+// 展开全部
+const handleExpandAll = () => {
+	expandedKeys.value = getAllKeys(filteredMenuTree.value)
+}
+
+// 折叠全部
+const handleCollapseAll = () => {
+	expandedKeys.value = []
+}
+
+// 自动展开指定层级的节点
+const expandAllKeys = (nodes, maxLevel = 3) => {
+	const keys = []
+	const traverse = (items, level = 1) => {
+		items.forEach(item => {
+			if (level < maxLevel && item.children?.length) {
+				keys.push(item.id)
+				traverse(item.children, level + 1)
+			}
+		})
+	}
+	traverse(nodes)
+	expandedKeys.value = keys
+}
+
+// 获取权限类型标签
+const getTypeLabel = (type) => {
+	const typeMap = {
+		menu: '菜单',
+		api: '接口',
+		button: '按钮',
+		url: '链接'
+	}
+	return typeMap[type] || type
+}
+
+// 获取权限类型颜色
+const getTypeColor = (type) => {
+	const colorMap = {
+		menu: 'blue',
+		api: 'green',
+		button: 'orange',
+		url: 'purple'
+	}
+	return colorMap[type] || 'default'
 }
 
 // 批量删除权限
@@ -256,10 +360,124 @@ const handleSaveSuccess = async () => {
 		const menuNode = findMenuNode(menuTree.value, selectedMenu.value.id)
 		selectedMenu.value = menuNode
 	}
+	message.success('保存成功')
 }
 
 // 初始化
 onMounted(() => {
 	loadMenuTree()
 })
+
+defineExpose({
+	loadMenuTree,
+	handleExpandAll,
+	handleCollapseAll
+})
 </script>
+
+<style scoped lang="scss">
+.permission-page {
+	.left-box {
+		.header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			gap: 8px;
+
+			.search-wrapper {
+				flex: 1;
+				min-width: 0;
+			}
+
+			.actions {
+				flex-shrink: 0;
+			}
+		}
+
+		.body {
+			padding: 8px;
+
+			:deep(.ant-tree) {
+				background: transparent;
+
+				.ant-tree-node-content-wrapper {
+					padding: 4px 0;
+					transition: background-color 0.2s;
+
+					&:hover {
+						background-color: #f5f5f5;
+					}
+				}
+
+				.ant-tree-switcher {
+					color: rgba(0, 0, 0, 0.45);
+				}
+
+				.ant-tree-iconEle {
+					margin-right: 6px;
+				}
+			}
+
+			.tree-node-content {
+				display: inline-flex;
+				align-items: center;
+				gap: 6px;
+				flex-wrap: wrap;
+
+				.tree-node-title {
+					font-size: 14px;
+					color: #262626;
+				}
+
+				.tree-node-code {
+					font-family: 'Consolas', 'Monaco', monospace;
+					font-size: 11px;
+					background: #f0f0f0;
+					border: none;
+					padding: 1px 6px;
+					border-radius: 2px;
+					color: #595959;
+				}
+
+				.tree-node-disabled {
+					color: #ff4d4f;
+					margin-left: 4px;
+				}
+			}
+
+			:deep(.ant-tree-treenode-selected) {
+				> .ant-tree-node-content-wrapper {
+					background-color: #e6f7ff;
+				}
+			}
+		}
+	}
+
+	.right-box {
+		.header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 12px 16px;
+
+			.title-wrapper {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+
+				.title {
+					font-size: 16px;
+					font-weight: 500;
+					color: #262626;
+				}
+			}
+		}
+
+		.body {
+			padding: 16px;
+			overflow-y: auto;
+			background: #fff;
+		}
+	}
+}
+</style>