格式化代码，websocket功能完善

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

@@ -1,15 +1,37 @@
 <template>
-	<a-form :model="form" :rules="rules" ref="formRef" :label-col="{ span: 5 }" :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" required>
-					<a-input v-model:value="form.title" placeholder="如：用户管理" allow-clear maxlength="50" show-count />
+					<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" required :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
-					<a-radio-group v-model:value="form.type" button-style="solid" @change="handleTypeChange">
+				<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>
@@ -23,15 +45,29 @@
 		<a-row :gutter="16">
 			<a-col :span="12">
 				<a-form-item label="上级权限" name="parent_id">
-					<a-tree-select v-model:value="form.parent_id" :tree-data="menuOptions"
-						:field-names="menuFieldNames" :tree-default-expand-all="false" show-icon placeholder="顶级权限"
-						allow-clear tree-node-filter-prop="title" :disabled="!!menuId" />
+					<a-tree-select
+						v-model:value="form.parent_id"
+						:tree-data="menuOptions"
+						:field-names="menuFieldNames"
+						:tree-default-expand-all="false"
+						show-icon
+						placeholder="顶级权限"
+						allow-clear
+						tree-node-filter-prop="title"
+						:disabled="!!menuId"
+					/>
 				</a-form-item>
 			</a-col>
 			<a-col :span="12">
 				<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-input
+						v-model:value="form.name"
+						placeholder="如：system.users.index"
+						allow-clear
+					/>
+					<div class="form-tip">
+						格式：模块.功能.操作，系统唯一标识，用于权限验证
+					</div>
 				</a-form-item>
 			</a-col>
 		</a-row>
@@ -39,18 +75,38 @@
 		<!-- 第三行：路由地址和组件路径（菜单类型才显示） -->
 		<a-row v-if="form.type === 'menu'" :gutter="16">
 			<a-col :span="12">
-				<a-form-item label="路由地址" name="path" :required="isLeafNode">
-					<a-input v-model:value="form.path" placeholder="/system/users" allow-clear />
+				<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" :required="isLeafNode">
-					<a-input v-model:value="form.component" placeholder="system/users/index" allow-clear>
+				<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" v-if="!isLeafNode">父级菜单或包含子菜单时不需要填写</div>
-					<div class="form-tip" v-else>最后一级菜单必须填写，如 system/users/index</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>
@@ -59,8 +115,14 @@
 		<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-input
+						v-model:value="form.path"
+						placeholder="如：users.index"
+						allow-clear
+					/>
+					<div class="form-tip">
+						后端 API 路由名称，用于接口权限验证
+					</div>
 				</a-form-item>
 			</a-col>
 		</a-row>
@@ -69,7 +131,11 @@
 		<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 />
+					<a-input
+						v-model:value="form.path"
+						placeholder="https://example.com"
+						allow-clear
+					/>
 					<div class="form-tip">外部链接地址</div>
 				</a-form-item>
 			</a-col>
@@ -79,12 +145,20 @@
 		<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="请选择图标" />
+					<sc-icon-picker
+						v-model:value="form.icon"
+						placeholder="请选择图标"
+					/>
 				</a-form-item>
 			</a-col>
 			<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%" />
+					<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>
@@ -98,16 +172,36 @@
 			<h4>选项设置</h4>
 			<a-row :gutter="16">
 				<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
+						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="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
+						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-row>
@@ -134,17 +228,34 @@
 		<!-- 状态 -->
 		<a-row :gutter="16">
 			<a-col :span="12">
-				<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="禁用" />
+				<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: 5 }" 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
+					type="primary"
+					@click="handleSave"
+					:loading="loading"
+					size="large"
+				>
 					<template #icon><CheckOutlined /></template>
 					保存
 				</a-button>
@@ -158,152 +269,159 @@
 </template>
 
 <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'
+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";
 
 defineOptions({
-	name: 'PermissionSaveForm'
-})
+	name: "PermissionSaveForm",
+});
 
 const props = defineProps({
 	menu: { type: [Object, Array], default: () => [] },
 	menuId: { type: [Number, String], default: null },
-	parentId: { type: [Number, String], default: null }
-})
+	parentId: { type: [Number, String], default: null },
+});
 
-const emit = defineEmits(['success', 'cancel'])
+const emit = defineEmits(["success", "cancel"]);
 
 // 表单数据
 const form = reactive({
-	id: '',
+	id: "",
 	parent_id: 0,
-	name: '',
-	title: '',
-	path: '',
-	component: '',
-	icon: '',
+	name: "",
+	title: "",
+	path: "",
+	component: "",
+	icon: "",
 	sort: 0,
-	type: 'menu',
+	type: "menu",
 	status: 1,
-	target: '_self',
+	target: "_self",
 	// meta 字段内容
 	hidden: false,
 	hiddenBreadcrumb: false,
 	keepAlive: false,
-	affix: false
-})
+	affix: false,
+});
 
 // 表单引用
-const formRef = ref()
-const loading = ref(false)
+const formRef = ref();
+const loading = ref(false);
 
 // 验证规则
 const rules = {
 	title: [
-		{ required: true, message: '请输入权限名称', trigger: 'blur' },
-		{ max: 50, message: '权限名称不能超过50个字符', trigger: 'blur' }
+		{ required: true, message: "请输入权限名称", trigger: "blur" },
+		{ max: 50, message: "权限名称不能超过50个字符", trigger: "blur" },
 	],
 	name: [
-		{ required: true, message: '请输入权限编码', trigger: 'blur' },
+		{ required: true, message: "请输入权限编码", trigger: "blur" },
 		{
 			pattern: /^[a-zA-Z][a-zA-Z0-9_.]*$/,
-			message: '权限编码格式不正确，格式：模块.功能.操作',
-			trigger: 'blur'
-		}
+			message: "权限编码格式不正确，格式：模块.功能.操作",
+			trigger: "blur",
+		},
 	],
-	type: [{ required: true, message: '请选择权限类型', trigger: 'change' }],
+	type: [{ required: true, message: "请选择权限类型", trigger: "change" }],
 	path: (rule, value) => {
 		// 根据类型动态验证
-		if (form.type === 'menu' || form.type === 'api' || form.type === 'url') {
+		if (
+			form.type === "menu" ||
+			form.type === "api" ||
+			form.type === "url"
+		) {
 			if (!value || !value.trim()) {
-				return Promise.reject('请输入' + getPathLabel(form.type))
+				return Promise.reject("请输入" + getPathLabel(form.type));
 			}
 		}
-		return Promise.resolve()
+		return Promise.resolve();
 	},
 	component: (rule, value) => {
 		// 仅在菜单类型且为叶子节点时验证
-		if (form.type === 'menu' && isLeafNode.value) {
+		if (form.type === "menu" && isLeafNode.value) {
 			if (!value || !value.trim()) {
-				return Promise.reject('请输入组件路径')
+				return Promise.reject("请输入组件路径");
 			}
 		}
-		return Promise.resolve()
-	}
-}
+		return Promise.resolve();
+	},
+};
 
 // 路径字段标签
 const getPathLabel = (type) => {
 	const labelMap = {
-		menu: '路由地址',
-		api: 'API路由',
-		url: '链接地址'
-	}
-	return labelMap[type] || '路径'
-}
+		menu: "路由地址",
+		api: "API路由",
+		url: "链接地址",
+	};
+	return labelMap[type] || "路径";
+};
 
 // 状态开关计算属性
 const statusChecked = computed({
 	get: () => form.status === 1,
 	set: (val) => {
-		form.status = val ? 1 : 0
-	}
-})
+		form.status = val ? 1 : 0;
+	},
+});
 
 // 判断是否为叶子节点（没有子节点的节点）
 const isLeafNode = computed(() => {
 	// 这里需要根据当前节点是否有子节点来判断
 	// 暂时返回 false，需要根据实际数据判断
-	return !hasChildren.value
-})
+	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
-})
+	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 menuOptions = ref([]);
 const menuFieldNames = {
-	value: 'id',
-	label: 'title',
-	children: 'children'
-}
+	value: "id",
+	label: "title",
+	children: "children",
+};
 
 // 筛单化菜单树，排除自己和子节点
 const treeToMap = (tree, excludeId = null) => {
-	const map = []
-	tree.forEach(item => {
-		if (item.id === excludeId) return // 排除自己
+	const map = [];
+	tree.forEach((item) => {
+		if (item.id === excludeId) return; // 排除自己
 		const obj = {
 			id: item.id,
 			parent_id: item.parent_id,
 			title: item.title,
-			children: item.children && item.children.length > 0 ? treeToMap(item.children, excludeId) : null
-		}
-		map.push(obj)
-	})
-	return map
-}
+			children:
+				item.children && item.children.length > 0
+					? treeToMap(item.children, excludeId)
+					: null,
+		};
+		map.push(obj);
+	});
+	return map;
+};
 
 // 查找权限节点
 const findMenuNode = (tree, id) => {
 	for (const node of tree) {
 		if (node.id === id) {
-			return node
+			return node;
 		}
 		if (node.children && node.children.length > 0) {
-			const found = findMenuNode(node.children, id)
-			if (found) return found
+			const found = findMenuNode(node.children, id);
+			if (found) return found;
 		}
 	}
-	return null
-}
+	return null;
+};
 
 // 监听菜单树变化
 watch(
@@ -311,85 +429,85 @@ watch(
 	(newVal) => {
 		if (newVal) {
 			// 排除当前编辑的节点，避免选择自己作为父节点
-			menuOptions.value = treeToMap(newVal, props.menuId)
+			menuOptions.value = treeToMap(newVal, props.menuId);
 		}
 	},
-	{ deep: true, immediate: true }
-)
+	{ deep: true, immediate: true },
+);
 
 // 监听 menuId 变化，从菜单树中查找并赋值
 watch(
 	() => props.menuId,
 	(newVal) => {
 		if (newVal && props.menu && props.menu.length > 0) {
-			const menuNode = findMenuNode(props.menu, newVal)
+			const menuNode = findMenuNode(props.menu, newVal);
 			if (menuNode) {
-				setData(menuNode, props.parentId)
+				setData(menuNode, props.parentId);
 			}
 		} else if (!newVal) {
 			// 清空表单
-			resetForm()
+			resetForm();
 		}
-	}
-)
+	},
+);
 
 // 类型切换处理
 const handleTypeChange = () => {
 	// 类型切换时清空一些字段
-	form.path = ''
-	form.component = ''
-	form.icon = ''
+	form.path = "";
+	form.component = "";
+	form.icon = "";
 	// 非菜单类型时清空meta相关字段
-	if (form.type !== 'menu') {
-		form.hidden = false
-		form.hiddenBreadcrumb = false
-		form.keepAlive = false
-		form.affix = false
+	if (form.type !== "menu") {
+		form.hidden = false;
+		form.hiddenBreadcrumb = false;
+		form.keepAlive = false;
+		form.affix = false;
 	}
 	// 非链接类型时重置target
-	if (form.type !== 'url') {
-		form.target = '_self'
+	if (form.type !== "url") {
+		form.target = "_self";
 	}
-}
+};
 
 // 重置表单
 const resetForm = () => {
 	Object.assign(form, {
-		id: '',
+		id: "",
 		parent_id: props.parentId || 0,
-		name: '',
-		title: '',
-		path: '',
-		component: '',
-		icon: '',
+		name: "",
+		title: "",
+		path: "",
+		component: "",
+		icon: "",
 		sort: 0,
-		type: 'menu',
+		type: "menu",
 		status: 1,
-		target: '_self',
+		target: "_self",
 		hidden: false,
 		hiddenBreadcrumb: false,
 		keepAlive: false,
-		affix: false
-	})
-}
+		affix: false,
+	});
+};
 
 // 加载权限详情
 const loadMenuDetail = async (id) => {
 	try {
-		const res = await authApi.permissions.detail.get(id)
+		const res = await authApi.permissions.detail.get(id);
 		if (res.code === 200 && res.data) {
-			setData(res.data, props.parentId)
+			setData(res.data, props.parentId);
 		}
 	} catch (error) {
-		console.error('加载权限详情失败:', error)
+		console.error("加载权限详情失败:", error);
 	}
-}
+};
 
 // 保存
 const handleSave = async () => {
 	try {
-		await formRef.value.validate()
-		loading.value = true
+		await formRef.value.validate();
+		loading.value = true;
 
 		// 构建提交数据
 		const submitData = {
@@ -404,98 +522,105 @@ const handleSave = async () => {
 			type: form.type,
 			status: form.status,
 			target: form.target,
-			meta: null
-		}
+			meta: null,
+		};
 
 		// 仅菜单类型才有meta字段
-		if (form.type === 'menu') {
+		if (form.type === "menu") {
 			submitData.meta = {
 				hidden: form.hidden,
 				hiddenBreadcrumb: form.hiddenBreadcrumb,
 				keepAlive: form.keepAlive,
-				affix: form.affix
-			}
+				affix: form.affix,
+			};
 		}
 
 		// 根据类型处理空值
-		if (form.type === 'button' || form.type === 'api') {
-			submitData.component = ''
-			submitData.icon = ''
+		if (form.type === "button" || form.type === "api") {
+			submitData.component = "";
+			submitData.icon = "";
 		}
-		if (form.type === 'button') {
-			submitData.path = ''
+		if (form.type === "button") {
+			submitData.path = "";
 		}
-		if (form.type === 'api' || form.type === 'button' || form.type === 'url') {
-			submitData.meta = null
+		if (
+			form.type === "api" ||
+			form.type === "button" ||
+			form.type === "url"
+		) {
+			submitData.meta = null;
 		}
 
-		let res = {}
+		let res = {};
 		if (form.id) {
-			res = await authApi.permissions.edit.put(form.id, submitData)
+			res = await authApi.permissions.edit.put(form.id, submitData);
 		} else {
-			res = await authApi.permissions.add.post(submitData)
+			res = await authApi.permissions.add.post(submitData);
 		}
 
-		loading.value = false
+		loading.value = false;
 		if (res.code === 200) {
-			message.success('保存成功')
-			emit('success')
+			message.success("保存成功");
+			emit("success");
 		} else {
-			message.error(res.message || '保存失败')
+			message.error(res.message || "保存失败");
 		}
 	} catch (error) {
-		console.error('表单验证失败', error)
-		loading.value = false
+		console.error("表单验证失败", error);
+		loading.value = false;
 		if (error?.errorFields) {
 			// 表单验证失败
-			return
+			return;
 		}
-		message.error('保存失败')
+		message.error("保存失败");
 	}
-}
+};
 
 // 表单注入数据
 const setData = (data, pid) => {
-	form.id = data.id || ''
-	form.parent_id = data.parent_id !== undefined ? data.parent_id : (pid || 0)
-	form.name = data.name || ''
-	form.title = data.title || ''
-	form.path = data.path || ''
-	form.component = data.component || ''
-	form.icon = data.icon || ''
-	form.sort = data.sort || 0
-	form.type = data.type || 'menu'
-	form.status = data.status !== undefined ? data.status : 1
-	form.target = data.target || '_self'
+	form.id = data.id || "";
+	form.parent_id = data.parent_id !== undefined ? data.parent_id : pid || 0;
+	form.name = data.name || "";
+	form.title = data.title || "";
+	form.path = data.path || "";
+	form.component = data.component || "";
+	form.icon = data.icon || "";
+	form.sort = data.sort || 0;
+	form.type = data.type || "menu";
+	form.status = data.status !== undefined ? data.status : 1;
+	form.target = data.target || "_self";
 
 	// 解析 meta 字段
-	const meta = data.meta && typeof data.meta === 'string' ? JSON.parse(data.meta) : (data.meta || {})
-	form.hidden = meta.hidden || false
-	form.hiddenBreadcrumb = meta.hiddenBreadcrumb || false
-	form.keepAlive = meta.keepAlive || false
-	form.affix = meta.affix || false
-}
+	const meta =
+		data.meta && typeof data.meta === "string"
+			? JSON.parse(data.meta)
+			: data.meta || {};
+	form.hidden = meta.hidden || false;
+	form.hiddenBreadcrumb = meta.hiddenBreadcrumb || false;
+	form.keepAlive = meta.keepAlive || false;
+	form.affix = meta.affix || false;
+};
 
 // 初始化
 onMounted(() => {
 	if (props.menuId) {
-		loadMenuDetail(props.menuId)
+		loadMenuDetail(props.menuId);
 	} else if (props.parentId) {
-		form.parent_id = props.parentId
+		form.parent_id = props.parentId;
 	}
-})
+});
 
 // 清空表单验证
 const clearValidate = () => {
-	formRef.value?.clearValidate()
-}
+	formRef.value?.clearValidate();
+};
 
 // 暴露方法给父组件
 defineExpose({
 	setData,
 	clearValidate,
-	resetForm
-})
+	resetForm,
+});
 </script>
 
 <style scoped lang="scss">

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

@@ -3,25 +3,43 @@
 		<div class="left-box">
 			<div class="header">
 				<div class="search-wrapper">
-					<a-input v-model:value="menuFilterText" placeholder="搜索权限名称或编码..." allow-clear
-						@change="handleMenuSearch">
+					<a-input
+						v-model:value="menuFilterText"
+						placeholder="搜索权限名称或编码..."
+						allow-clear
+						@change="handleMenuSearch"
+					>
 						<template #prefix>
-							<SearchOutlined style="color: rgba(0, 0, 0, 0.45)" />
+							<SearchOutlined
+								style="color: rgba(0, 0, 0, 0.45)"
+							/>
 						</template>
 					</a-input>
 				</div>
 				<div class="actions">
 					<a-space size="small">
-						<a-tooltip :title="isAllExpanded ? '折叠全部' : '展开全部'">
-							<a-button type="text" size="small" @click="handleToggleExpand">
+						<a-tooltip
+							:title="isAllExpanded ? '折叠全部' : '展开全部'"
+						>
+							<a-button
+								type="text"
+								size="small"
+								@click="handleToggleExpand"
+							>
 								<template #icon>
-									<UnorderedListOutlined v-if="!isAllExpanded" />
+									<UnorderedListOutlined
+										v-if="!isAllExpanded"
+									/>
 									<OrderedListOutlined v-else />
 								</template>
 							</a-button>
 						</a-tooltip>
 						<a-tooltip title="添加根权限">
-							<a-button type="text" size="small" @click="handleAdd(null)">
+							<a-button
+								type="text"
+								size="small"
+								@click="handleAdd(null)"
+							>
 								<template #icon><PlusOutlined /></template>
 							</a-button>
 						</a-tooltip>
@@ -36,27 +54,53 @@
 						v-model:checkedKeys="checkedMenuKeys"
 						v-model:expandedKeys="expandedKeys"
 						:tree-data="filteredMenuTree"
-						:field-names="{ title: 'title', key: 'id', children: 'children' }"
+						:field-names="{
+							title: 'title',
+							key: 'id',
+							children: 'children',
+						}"
 						show-line
 						checkable
 						:check-strictly="false"
 						:expand-on-click-node="false"
 						@select="onMenuSelect"
-						@check="onMenuCheck">
+						@check="onMenuCheck"
+					>
 						<template #icon="{ dataRef }">
-							<FolderOutlined v-if="dataRef.type === 'menu' && dataRef.children?.length" />
-							<FolderOpenOutlined v-else-if="dataRef.type === 'menu'" />
+							<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">
+								<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">
+								<span
+									v-if="!dataRef.status"
+									class="tree-node-disabled"
+								>
 									<StopOutlined />
 								</span>
 							</span>
@@ -68,13 +112,24 @@
 		<div class="right-box">
 			<div class="header">
 				<div class="title-wrapper">
-					<span class="title">{{ selectedMenu?.title || '请选择权限节点' }}</span>
-					<a-tag v-if="selectedMenu" :color="getTypeColor(selectedMenu.type)" size="small">
+					<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">
+					<a-button
+						v-if="checkedMenuKeys.length > 0"
+						danger
+						size="small"
+						@click="handleDeleteBatch"
+					>
 						<template #icon><DeleteOutlined /></template>
 						批量删除 ({{ checkedMenuKeys.length }})
 					</a-button>
@@ -105,27 +160,48 @@
 			</div>
 			<div class="body">
 				<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" />
+					<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>
 
 	<!-- 导入权限弹窗 -->
-	<sc-import v-model:open="dialog.import" title="导入权限" :api="authApi.permissions.import.post"
-		:template-api="authApi.permissions.downloadTemplate.get" filename="权限" @success="handleImportSuccess" />
+	<sc-import
+		v-model:open="dialog.import"
+		title="导入权限"
+		:api="authApi.permissions.import.post"
+		:template-api="authApi.permissions.downloadTemplate.get"
+		filename="权限"
+		@success="handleImportSuccess"
+	/>
 
 	<!-- 导出权限弹窗 -->
-	<sc-export v-model:open="dialog.export" title="导出权限" :api="handleExportApi"
-		:default-filename="`权限列表_${Date.now()}`" :show-options="false" tip="导出当前选中或所有权限数据"
-		@success="handleExportSuccess" />
+	<sc-export
+		v-model:open="dialog.export"
+		title="导出权限"
+		:api="handleExportApi"
+		:default-filename="`权限列表_${Date.now()}`"
+		:show-options="false"
+		tip="导出当前选中或所有权限数据"
+		@success="handleExportSuccess"
+	/>
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from 'vue'
-import { message, Modal } from 'ant-design-vue'
+import { ref, onMounted, nextTick } from "vue";
+import { message, Modal } from "ant-design-vue";
 import {
 	SearchOutlined,
 	ReloadOutlined,
@@ -141,337 +217,354 @@ import {
 	ImportOutlined,
 	ExportOutlined,
 	DownloadOutlined,
-	MoreOutlined
-} from '@ant-design/icons-vue'
-import { computed } from 'vue'
-import saveForm from './components/SaveForm.vue'
-import scImport from '@/components/scImport/index.vue'
-import scExport from '@/components/scExport/index.vue'
-import authApi from '@/api/auth'
+	MoreOutlined,
+} from "@ant-design/icons-vue";
+import { computed } from "vue";
+import saveForm from "./components/SaveForm.vue";
+import scImport from "@/components/scImport/index.vue";
+import scExport from "@/components/scExport/index.vue";
+import authApi from "@/api/auth";
 
 defineOptions({
-	name: 'authPermission'
-})
+	name: "authPermission",
+});
 
 // 菜单树数据
-const menuTree = ref([])
-const filteredMenuTree = ref([])
-const selectedMenuKeys = ref([])
-const checkedMenuKeys = ref([])
-const expandedKeys = ref([])
-const menuFilterText = ref('')
+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 selectedMenu = ref(null);
+const parentId = ref(null);
 
 // 加载状态
-const loading = ref(false)
-const detailLoading = ref(false)
+const loading = ref(false);
+const detailLoading = ref(false);
 
 // 对话框状态
 const dialog = ref({
 	import: false,
-	export: false
-})
+	export: false,
+});
 
 // 树引用
-const treeRef = ref()
+const treeRef = ref();
 
 // 是否全部展开
 const isAllExpanded = computed(() => {
-	const allKeys = getAllKeys(filteredMenuTree.value)
-	return allKeys.length > 0 && expandedKeys.value.length === allKeys.length
-})
+	const allKeys = getAllKeys(filteredMenuTree.value);
+	return allKeys.length > 0 && expandedKeys.value.length === allKeys.length;
+});
 
 // 切换展开/折叠
 const handleToggleExpand = () => {
 	if (isAllExpanded.value) {
-		handleCollapseAll()
+		handleCollapseAll();
 	} else {
-		handleExpandAll()
+		handleExpandAll();
 	}
-}
+};
 
 // 加载权限树
 const loadMenuTree = async () => {
 	try {
-		loading.value = true
-		const res = await authApi.permissions.tree.get()
+		loading.value = true;
+		const res = await authApi.permissions.tree.get();
 		if (res.code === 200) {
-			menuTree.value = res.data || []
-			filteredMenuTree.value = res.data || []
+			menuTree.value = res.data || [];
+			filteredMenuTree.value = res.data || [];
 			// 默认展开第一层
-			expandAllKeys(menuTree.value, 1)
+			expandAllKeys(menuTree.value, 1);
 		} else {
-			message.error(res.message || '加载权限树失败')
+			message.error(res.message || "加载权限树失败");
 		}
 	} catch (error) {
-		console.error('加载权限树失败:', error)
-		message.error('加载权限树失败')
+		console.error("加载权限树失败:", error);
+		message.error("加载权限树失败");
 	} finally {
-		loading.value = false
+		loading.value = false;
 	}
-}
+};
 
 // 刷新
 const handleRefresh = () => {
-	loadMenuTree()
+	loadMenuTree();
 	if (selectedMenu.value) {
 		// 重新获取当前选中的权限详情
-		const menuNode = findMenuNode(menuTree.value, selectedMenu.value.id)
+		const menuNode = findMenuNode(menuTree.value, selectedMenu.value.id);
 		if (menuNode) {
-			selectedMenu.value = menuNode
+			selectedMenu.value = menuNode;
 		}
 	}
-}
+};
 
 // 搜索权限
 const handleMenuSearch = (e) => {
-	const keyword = (e.target?.value || '').trim()
-	menuFilterText.value = keyword
+	const keyword = (e.target?.value || "").trim();
+	menuFilterText.value = keyword;
 	if (!keyword) {
-		filteredMenuTree.value = menuTree.value
-		return
+		filteredMenuTree.value = menuTree.value;
+		return;
 	}
 
 	// 递归过滤权限树（支持搜索名称和编码）
 	const filterTree = (nodes) => {
 		return nodes.reduce((acc, node) => {
-			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) : []
+			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) {
 				acc.push({
 					...node,
-					children: filteredChildren.length > 0 ? filteredChildren : undefined
-				})
+					children:
+						filteredChildren.length > 0
+							? filteredChildren
+							: undefined,
+				});
 			}
-			return acc
-		}, [])
-	}
+			return acc;
+		}, []);
+	};
 
-	filteredMenuTree.value = filterTree(menuTree.value)
+	filteredMenuTree.value = filterTree(menuTree.value);
 	// 搜索时展开所有匹配节点
-	expandAllKeys(filteredMenuTree.value)
-}
+	expandAllKeys(filteredMenuTree.value);
+};
 
 // 查找权限节点
 const findMenuNode = (tree, id) => {
 	for (const node of tree) {
 		if (node.id === id) {
-			return node
+			return node;
 		}
 		if (node.children && node.children.length > 0) {
-			const found = findMenuNode(node.children, id)
-			if (found) return found
+			const found = findMenuNode(node.children, id);
+			if (found) return found;
 		}
 	}
-	return null
-}
+	return null;
+};
 
 // 查找父节点ID
 const findParentId = (tree, id) => {
 	for (const node of tree) {
 		if (node.children && node.children.length > 0) {
-			const child = node.children.find(child => child.id === id)
+			const child = node.children.find((child) => child.id === id);
 			if (child) {
-				return node.id
+				return node.id;
 			}
-			const found = findParentId(node.children, id)
-			if (found !== null) return found
+			const found = findParentId(node.children, id);
+			if (found !== null) return found;
 		}
 	}
-	return null
-}
+	return null;
+};
 
 // 限制选择事件
 const onMenuSelect = (selectedKeys, { selected }) => {
 	if (selected) {
-		const menuId = selectedKeys[0]
-		const menuNode = findMenuNode(menuTree.value, menuId)
-		selectedMenu.value = menuNode
-		parentId.value = findParentId(menuTree.value, menuId)
+		const menuId = selectedKeys[0];
+		const menuNode = findMenuNode(menuTree.value, menuId);
+		selectedMenu.value = menuNode;
+		parentId.value = findParentId(menuTree.value, menuId);
 	} else {
-		selectedMenu.value = null
-		parentId.value = null
+		selectedMenu.value = null;
+		parentId.value = null;
 	}
-}
+};
 
 // 限制勾选事件
 const onMenuCheck = (checkedKeys, info) => {
-	console.log('checkedKeys:', checkedKeys, 'info:', info)
-}
+	console.log("checkedKeys:", checkedKeys, "info:", info);
+};
 
 // 获取所有节点ID（用于展开/折叠）
 const getAllKeys = (nodes) => {
-	const keys = []
+	const keys = [];
 	const traverse = (items) => {
-		items.forEach(item => {
-			keys.push(item.id)
+		items.forEach((item) => {
+			keys.push(item.id);
 			if (item.children?.length) {
-				traverse(item.children)
+				traverse(item.children);
 			}
-		})
-	}
-	traverse(nodes)
-	return keys
-}
+		});
+	};
+	traverse(nodes);
+	return keys;
+};
 
 // 展开全部
 const handleExpandAll = () => {
-	expandedKeys.value = getAllKeys(filteredMenuTree.value)
-}
+	expandedKeys.value = getAllKeys(filteredMenuTree.value);
+};
 
 // 折叠全部
 const handleCollapseAll = () => {
-	expandedKeys.value = []
-}
+	expandedKeys.value = [];
+};
 
 // 自动展开指定层级的节点
 const expandAllKeys = (nodes, maxLevel = 3) => {
-	const keys = []
+	const keys = [];
 	const traverse = (items, level = 1) => {
-		items.forEach(item => {
+		items.forEach((item) => {
 			if (level < maxLevel && item.children?.length) {
-				keys.push(item.id)
-				traverse(item.children, level + 1)
+				keys.push(item.id);
+				traverse(item.children, level + 1);
 			}
-		})
-	}
-	traverse(nodes)
-	expandedKeys.value = keys
-}
+		});
+	};
+	traverse(nodes);
+	expandedKeys.value = keys;
+};
 
 // 获取权限类型标签
 const getTypeLabel = (type) => {
 	const typeMap = {
-		menu: '菜单',
-		api: '接口',
-		button: '按钮',
-		url: '链接'
-	}
-	return typeMap[type] || type
-}
+		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'
-}
+		menu: "blue",
+		api: "green",
+		button: "orange",
+		url: "purple",
+	};
+	return colorMap[type] || "default";
+};
 
 // 批量删除权限
 const handleDeleteBatch = async () => {
 	if (checkedMenuKeys.value.length === 0) {
-		message.warning('请选择需要删除的权限')
-		return
+		message.warning("请选择需要删除的权限");
+		return;
 	}
 
 	Modal.confirm({
-		title: '确认删除',
+		title: "确认删除",
 		content: `确定删除已选择的 ${checkedMenuKeys.value.length} 个权限吗？`,
-		okText: '删除',
-		okType: 'danger',
-		cancelText: '取消',
+		okText: "删除",
+		okType: "danger",
+		cancelText: "取消",
 		onOk: async () => {
 			try {
-				const res = await authApi.permissions.batchDelete.post({ ids: checkedMenuKeys.value })
+				const res = await authApi.permissions.batchDelete.post({
+					ids: checkedMenuKeys.value,
+				});
 				if (res.code === 200) {
-					message.success('删除成功')
+					message.success("删除成功");
 
 					// 如果当前选中的权限被删除了，清空选择
-					if (selectedMenu.value && checkedMenuKeys.value.includes(selectedMenu.value.id)) {
-						selectedMenu.value = null
-						selectedMenuKeys.value = []
+					if (
+						selectedMenu.value &&
+						checkedMenuKeys.value.includes(selectedMenu.value.id)
+					) {
+						selectedMenu.value = null;
+						selectedMenuKeys.value = [];
 					}
 
-					checkedMenuKeys.value = []
-					await loadMenuTree()
+					checkedMenuKeys.value = [];
+					await loadMenuTree();
 				} else {
-					message.error(res.message || '删除失败')
+					message.error(res.message || "删除失败");
 				}
 			} catch (error) {
-				console.error('删除权限失败:', error)
-				message.error('删除失败')
+				console.error("删除权限失败:", error);
+				message.error("删除失败");
 			}
-		}
-	})
-}
+		},
+	});
+};
 
 // 保存成功回调
 const handleSaveSuccess = async () => {
-	await loadMenuTree()
+	await loadMenuTree();
 	// 重新设置当前选中的权限
 	if (selectedMenu.value) {
-		const menuNode = findMenuNode(menuTree.value, selectedMenu.value.id)
-		selectedMenu.value = menuNode
+		const menuNode = findMenuNode(menuTree.value, selectedMenu.value.id);
+		selectedMenu.value = menuNode;
 	}
-	message.success('保存成功')
-}
+	message.success("保存成功");
+};
 
 // 导出权限
 const handleExport = () => {
-	dialog.value.export = true
-}
+	dialog.value.export = true;
+};
 
 // 导出API封装
 const handleExportApi = async () => {
 	return await authApi.permissions.export.post({
-		ids: checkedMenuKeys.value.length > 0 ? checkedMenuKeys.value : undefined
-	})
-}
+		ids:
+			checkedMenuKeys.value.length > 0
+				? checkedMenuKeys.value
+				: undefined,
+	});
+};
 
 // 导出成功回调
 const handleExportSuccess = () => {
-	checkedMenuKeys.value = []
-}
+	checkedMenuKeys.value = [];
+};
 
 // 导入权限
 const handleImport = () => {
-	dialog.value.import = true
-}
+	dialog.value.import = true;
+};
 
 // 导入成功回调
 const handleImportSuccess = () => {
-	loadMenuTree()
-}
+	loadMenuTree();
+};
 
 // 下载模板
 const handleDownloadTemplate = async () => {
 	try {
-		const blob = await authApi.permissions.downloadTemplate.get()
-		const url = window.URL.createObjectURL(blob)
-		const link = document.createElement('a')
-		link.href = url
-		link.download = '权限导入模板.xlsx'
-		document.body.appendChild(link)
-		link.click()
-		document.body.removeChild(link)
-		window.URL.revokeObjectURL(url)
-		message.success('下载成功')
+		const blob = await authApi.permissions.downloadTemplate.get();
+		const url = window.URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = "权限导入模板.xlsx";
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		window.URL.revokeObjectURL(url);
+		message.success("下载成功");
 	} catch (error) {
-		console.error('下载模板失败:', error)
-		message.error('下载失败')
+		console.error("下载模板失败:", error);
+		message.error("下载失败");
 	}
-}
+};
 
 // 初始化
 onMounted(() => {
-	loadMenuTree()
-})
+	loadMenuTree();
+});
 
 defineExpose({
 	loadMenuTree,
 	handleExpandAll,
-	handleCollapseAll
-})
+	handleCollapseAll,
+});
 </script>
 
 <style scoped lang="scss">
@@ -547,7 +640,7 @@ defineExpose({
 				}
 
 				.tree-node-code {
-					font-family: 'Consolas', 'Monaco', monospace;
+					font-family: "Consolas", "Monaco", monospace;
 					font-size: 11px;
 					background: #f0f0f0;
 					border: none;