diff --git a/web/src/views/system/dept/api.ts b/web/src/views/system/dept/api.ts
index 0779ffe..41b2c7f 100644
--- a/web/src/views/system/dept/api.ts
+++ b/web/src/views/system/dept/api.ts
@@ -1,5 +1,5 @@
 import { request } from '/@/utils/service';
-import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq, PageQuery } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, EditReq, InfoReq, PageQuery } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/dept/';
 
diff --git a/web/src/views/system/dept/components/DeptFormCom.vue b/web/src/views/system/dept/components/DeptFormCom.vue
index b19fb56..989c0f6 100644
--- a/web/src/views/system/dept/components/DeptFormCom.vue
+++ b/web/src/views/system/dept/components/DeptFormCom.vue
@@ -1,40 +1,29 @@
 <template>
-  <el-form ref="formRef" :rules="rules" :model="deptFormData" label-width="100px" label-position="right"
-    class="dept-form-com">
-    <el-form-item label="部门ID" prop="id">
-      <el-input v-model="deptFormData.id" disabled />
-    </el-form-item>
-    <el-form-item label="父级部门" prop="parent">
-      <el-select v-model="deptFormData.parent" style="width: 100%">
-        <el-option v-for="item in deptAllList" :key="item.id" :label="item.name" :value="item.id" />
-      </el-select>
-    </el-form-item>
-    <el-form-item required label="部门名称" prop="name">
-      <el-input v-model="deptFormData.name" />
-    </el-form-item>
-    <el-form-item required label="部门标识" prop="key">
-      <el-input v-model="deptFormData.key" />
-    </el-form-item>
-    <el-form-item label="负责人" prop="owner">
-      <el-input v-model="deptFormData.owner" />
-    </el-form-item>
-    <el-form-item label="联系电话" prop="phone">
-      <el-input v-model="deptFormData.phone" />
-    </el-form-item>
-    <el-form-item label="邮箱" prop="email">
-      <el-input v-model="deptFormData.email" />
-    </el-form-item>
-    <el-form-item label="排序" prop="sort">
-      <el-input-number v-model="deptFormData.sort" controls-position="right" />
-    </el-form-item>
-    <el-form-item>
-      <el-button @click="handleUpdateMenu" type="primary" :disabled="deptBtnLoading">
-        {{ deptFormData.id ? '保存' : '新增' }}
-      </el-button>
-      <el-button @click="handleClose">取消
-      </el-button>
-    </el-form-item>
-  </el-form>
+	<el-form ref="formRef" :rules="rules" :model="deptFormData" label-width="100px" label-position="right" class="dept-form-com">
+		<el-form-item label="父级部门" prop="parent">
+			<el-select v-model="deptFormData.parent" style="width: 100%">
+				<el-option v-for="item in deptAllList" :key="item.id" :label="item.name" :value="item.id" />
+			</el-select>
+		</el-form-item>
+		<el-form-item required label="部门名称" prop="name">
+			<el-input v-model="deptFormData.name" />
+		</el-form-item>
+		<el-form-item required label="部门标识" prop="key">
+			<el-input v-model="deptFormData.key" />
+		</el-form-item>
+		<el-form-item label="负责人" prop="owner">
+			<el-input v-model="deptFormData.owner" />
+		</el-form-item>
+		<el-form-item label="备注" prop="remark">
+			<el-input v-model="deptFormData.remark" maxlength="200" show-word-limit type="textarea" />
+		</el-form-item>
+		<el-form-item>
+			<el-button @click="handleUpdateMenu" type="primary" :disabled="deptBtnLoading">
+				{{ deptFormData.id ? '保存' : '新增' }}
+			</el-button>
+			<el-button @click="handleClose">取消 </el-button>
+		</el-form-item>
+	</el-form>
 </template>
 
 <script lang="ts" setup>
@@ -45,90 +34,84 @@ import { successNotification } from '../../../../utils/message';
 import { DeptFormDataType, TreeItemType, DeptListType } from '../types';
 
 interface IProps {
-  initFormData: TreeItemType | null;
+	initFormData: TreeItemType | null;
 }
 
 const formRef = ref<InstanceType<typeof ElForm>>();
 const rules = reactive<FormRules>({
-  name: [{ required: true, message: '部门名称必填', trigger: 'blur' }],
-  key: [{ required: true, message: '部门标识必填', trigger: 'blur' }],
+	name: [{ required: true, message: '部门名称必填', trigger: 'blur' }],
+	key: [{ required: true, message: '部门标识必填', trigger: 'blur' }],
 });
 
 const props = withDefaults(defineProps<IProps>(), {
-  initFormData: () => null,
-})
-const emit = defineEmits(['drawerClose'])
+	initFormData: () => null,
+});
+const emit = defineEmits(['drawerClose']);
 
 let deptAllList = ref<DeptListType[]>([]);
 let deptFormData = reactive<DeptFormDataType>({
-  id: '',
-  key: '',
-  parent: '',
-  name: '',
-  owner: '',
-  phone: '',
-  email: '',
-  sort: 0,
-  is_catalog: true,
-})
-let deptBtnLoading = ref(false)
+	key: '',
+	parent: '',
+	name: '',
+	owner: '',
+	remark: '',
+	is_catalog: true,
+});
+let deptBtnLoading = ref(false);
 
 const getData = async () => {
-  const res = await getAllDeptList();
-  if (res?.code === 2000) {
-    deptAllList.value = res.data
-  }
-}
+	const res = await getAllDeptList();
+	if (res?.code === 2000) {
+		deptAllList.value = res.data;
+	}
+};
 
 const setDeptFormData = () => {
-  if (props.initFormData?.id) {
-    deptFormData.id = props.initFormData?.id;
-    deptFormData.key = props.initFormData.key || '';
-    deptFormData.parent = props.initFormData.parent || '';
-    deptFormData.name = props.initFormData.name || '';
-    deptFormData.owner = props.initFormData.owner || '';
-    deptFormData.phone = props.initFormData.phone || '';
-    deptFormData.email = props.initFormData.email || '';
-    deptFormData.sort = props.initFormData.sort || 0;
-  }
-}
+	if (props.initFormData?.id) {
+		deptFormData.id = props.initFormData?.id;
+		deptFormData.key = props.initFormData.key || '';
+		deptFormData.parent = props.initFormData.parent || '';
+		deptFormData.name = props.initFormData.name || '';
+		deptFormData.owner = props.initFormData.owner || '';
+	}
+};
 
 const handleUpdateMenu = () => {
-  formRef.value?.validate(async (valid) => {
-    if (!valid) return
-    try {
-      let res;
-      deptBtnLoading.value = true
-      if (deptFormData.id) {
-        res = await UpdateObj(deptFormData);
-      } else {
-        res = await AddObj(deptFormData)
-      }
-      if (res?.code === 2000) {
-        successNotification(res.msg as string);
-        handleClose('submit');
-      }
-    } finally {
-      deptBtnLoading.value = false
-    }
-  })
+	formRef.value?.validate(async (valid) => {
+		if (!valid) return;
+		try {
+			let res;
+			deptBtnLoading.value = true;
+			if (deptFormData.id) {
+				res = await UpdateObj(deptFormData);
+			} else {
+				res = await AddObj(deptFormData);
+			}
+			if (res?.code === 2000) {
+				successNotification(res.msg as string);
+				handleClose('submit');
+			}
+		} finally {
+			deptBtnLoading.value = false;
+		}
+	});
 };
 
 const handleClose = (type: string = '') => {
-  emit('drawerClose', type)
-  formRef.value?.resetFields();
+	emit('drawerClose', type);
+	formRef.value?.resetFields();
 };
 
 onMounted(async () => {
-  await getData()
-  setDeptFormData()
-})
+	await getData();
+	setDeptFormData();
+});
 </script>
 
 <style lang="scss" scoped>
 .dept-form-com {
-  height: 100%;
-  padding: 20px;
-  box-sizing: border-box;
+	height: 100%;
+	padding: 20px;
+	box-sizing: border-box;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/system/dept/components/TreeCom.vue b/web/src/views/system/dept/components/TreeCom.vue
index ef869c6..1c16edb 100644
--- a/web/src/views/system/dept/components/TreeCom.vue
+++ b/web/src/views/system/dept/components/TreeCom.vue
@@ -1,70 +1,78 @@
 <template>
-  <el-input v-model="filterVal" :prefix-icon="Search" placeholder="请输入部门名称" />
-  <div class="tree-com">
-    <div class="tc-head">
-      <el-icon size="16" color="#606266" class="tc-head-icon">
-        <HomeFilled />
-      </el-icon>
-      <span class="tc-head-txt">部门架构</span>
-      <el-icon size="16" color="#606266" @click="() => showTotalNum = !showTotalNum" class="tc-head-icon">
-        <View v-show="!showTotalNum" />
-        <Hide v-show="showTotalNum" />
-      </el-icon>
-    </div>
+	<el-input v-model="filterVal" :prefix-icon="Search" placeholder="请输入部门名称" />
+	<div class="tree-com">
+		<div class="tc-head">
+			<el-icon size="16" color="#606266" class="tc-head-icon">
+				<HomeFilled />
+			</el-icon>
+			<span class="tc-head-txt">部门架构</span>
+			<el-icon size="16" color="#606266" @click="() => (showTotalNum = !showTotalNum)" class="tc-head-icon">
+				<View v-show="!showTotalNum" />
+				<Hide v-show="showTotalNum" />
+			</el-icon>
+		</div>
 
-    <el-tree ref="treeRef" :data="treeData" :props="treeProps" :filter-node-method="handleFilterTreeNode"
-      :load="handleLoadNode" lazy :indent="38" @node-click="handleNodeClick" highlight-current default-expand-all>
-      <template #default="{ node, data }">
-        <element-tree-line :node="node" :showLabelLine="false" :indent="32">
-          <span v-if="data.status" class="text-center font-black font-normal">
-            <SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }}
-            <span v-show="showTotalNum">（10人）</span>
-          </span>
-          <span v-else class="text-center font-black font-normal text-red-700">
-            <SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }}
-          </span>
-        </element-tree-line>
-      </template>
-    </el-tree>
+		<el-tree
+			ref="treeRef"
+			:data="treeData"
+			:props="treeProps"
+			:filter-node-method="handleFilterTreeNode"
+			:load="handleLoadNode"
+			lazy
+			:indent="38"
+			@node-click="handleNodeClick"
+			highlight-current
+			default-expand-all
+		>
+			<template #default="{ node, data }">
+				<element-tree-line :node="node" :showLabelLine="false" :indent="32">
+					<span v-if="data.status" class="text-center font-black font-normal">
+						<SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }}
+						<span v-show="showTotalNum">（10人）</span>
+					</span>
+					<span v-else class="text-center font-black font-normal text-red-700"> <SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }} </span>
+				</element-tree-line>
+			</template>
+		</el-tree>
 
-    <div class="tree-tags">
-      <el-tooltip effect="dark" content="新增">
-        <el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
-          <Plus />
-        </el-icon>
-      </el-tooltip>
+		<div class="tree-tags">
+			<el-tooltip effect="dark" content="新增">
+				<el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
+					<Plus />
+				</el-icon>
+			</el-tooltip>
 
-      <el-tooltip effect="dark" content="编辑">
-        <el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
-          <Edit />
-        </el-icon>
-      </el-tooltip>
+			<el-tooltip effect="dark" content="编辑">
+				<el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
+					<Edit />
+				</el-icon>
+			</el-tooltip>
 
-      <el-tooltip effect="dark" content="上移">
-        <el-icon size="16" @click="handleSort('up')" class="mlt-icon">
-          <Top />
-        </el-icon>
-      </el-tooltip>
+			<el-tooltip effect="dark" content="上移">
+				<el-icon size="16" @click="handleSort('up')" class="mlt-icon">
+					<Top />
+				</el-icon>
+			</el-tooltip>
 
-      <el-tooltip effect="dark" content="下移">
-        <el-icon size="16" @click="handleSort('down')" class="mlt-icon">
-          <Bottom />
-        </el-icon>
-      </el-tooltip>
+			<el-tooltip effect="dark" content="下移">
+				<el-icon size="16" @click="handleSort('down')" class="mlt-icon">
+					<Bottom />
+				</el-icon>
+			</el-tooltip>
 
-      <el-tooltip effect="dark" content="删除">
-        <el-icon size="16" @click="handleDeleteDept" class="mlt-icon">
-          <Delete />
-        </el-icon>
-      </el-tooltip>
-    </div>
-  </div>
+			<el-tooltip effect="dark" content="删除">
+				<el-icon size="16" @click="handleDeleteDept" class="mlt-icon">
+					<Delete />
+				</el-icon>
+			</el-tooltip>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch, toRaw, h } from 'vue';
 import { ElTree } from 'element-plus';
-import { getElementLabelLine } from "element-tree-line";
+import { getElementLabelLine } from 'element-tree-line';
 import { Search } from '@element-plus/icons-vue';
 import { lazyLoadDept } from '../api';
 import { warningNotification } from '../../../../utils/message';
@@ -72,189 +80,189 @@ import { TreeItemType, APIResponseData } from '../types';
 import type Node from 'element-plus/es/components/tree/src/model/node';
 
 interface IProps {
-  treeData: TreeItemType[];
+	treeData: TreeItemType[];
 }
 
 const ElementTreeLine = getElementLabelLine(h);
 
 const treeProps = {
-  children: 'children',
-  label: 'name',
+	children: 'children',
+	label: 'name',
 };
 
 withDefaults(defineProps<IProps>(), {
-  treeData: () => [],
-})
-const emit = defineEmits(['treeClick', 'deleteDept', 'updateDept'])
+	treeData: () => [],
+});
+const emit = defineEmits(['treeClick', 'deleteDept', 'updateDept']);
 
 let filterVal = ref('');
-let showTotalNum = ref(false)
-let treeSelectDept = ref<TreeItemType>({})
+let showTotalNum = ref(false);
+let treeSelectDept = ref<TreeItemType>({});
 const treeRef = ref<InstanceType<typeof ElTree>>();
 
 watch(filterVal, (val) => {
-  treeRef.value!.filter(val);
+	treeRef.value!.filter(val);
 });
 
 /**
  * 部门树的搜索事件
  */
 const handleFilterTreeNode = (value: string, data: TreeItemType) => {
-  if (!value) return true;
-  return toRaw(data).name?.indexOf(value) !== -1;
+	if (!value) return true;
+	return toRaw(data).name?.indexOf(value) !== -1;
 };
 
 /**
  * 部门树的懒加载
  */
 const handleLoadNode = (node: Node, resolve: Function) => {
-  if (node.level !== 0) {
-    lazyLoadDept({ parent: node.data.id }).then((res: APIResponseData) => {
-      resolve(res.data);
-    });
-  }
+	if (node.level !== 0) {
+		lazyLoadDept({ parent: node.data.id }).then((res: APIResponseData) => {
+			resolve(res.data);
+		});
+	}
 };
 
 /**
  * 部门的点击事件
  */
 const handleNodeClick = (data: TreeItemType) => {
-  treeSelectDept.value = data
-  emit('treeClick', data.id)
+	treeSelectDept.value = data;
+	emit('treeClick', data.id);
 };
 
 /**
  * 新增 or 编辑 操作
  */
 const handleUpdateMenu = (type: string) => {
-  if (type === 'update') {
-    if (!treeSelectDept.value.id) {
-      warningNotification('请选择菜单！')
-      return
-    }
-    emit('updateDept', type, treeSelectDept.value)
-  } else {
-    emit('updateDept', type);
-  }
+	if (type === 'update') {
+		if (!treeSelectDept.value.id) {
+			warningNotification('请选择菜单！');
+			return;
+		}
+		emit('updateDept', type, treeSelectDept.value);
+	} else {
+		emit('updateDept', type);
+	}
 };
 
 /**
  * 删除部门
  */
 const handleDeleteDept = () => {
-  if (!treeSelectDept.value.id) {
-    warningNotification('请选择菜单！')
-    return
-  }
-  emit('deleteDept', treeSelectDept.value.id, () => {
-    treeSelectDept.value = {}
-  })
+	if (!treeSelectDept.value.id) {
+		warningNotification('请选择菜单！');
+		return;
+	}
+	emit('deleteDept', treeSelectDept.value.id, () => {
+		treeSelectDept.value = {};
+	});
 };
 
 /**
  * 部门上下移动操作
  */
-const handleSort = (type: string) => { }
+const handleSort = (type: string) => {};
 </script>
 
 <style lang="scss" scoped>
 .tc-head {
-  display: flex;
-  align-items: center;
-  margin-left: -8px;
-  color: #606266;
-  font-weight: 600;
+	display: flex;
+	align-items: center;
+	margin-left: -8px;
+	color: #606266;
+	font-weight: 600;
 
-  .tc-head-txt {
-    margin: 0 8px;
-  }
+	.tc-head-txt {
+		margin: 0 8px;
+	}
 
-  .tc-head-icon {
-    position: relative;
-    top: -1px;
-    cursor: pointer;
-  }
+	.tc-head-icon {
+		position: relative;
+		top: -1px;
+		cursor: pointer;
+	}
 }
 
 .tree-tags {
-  height: 40px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  box-sizing: border-box;
+	height: 40px;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 0 20px;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	box-sizing: border-box;
 
-  .mlt-icon {
-    cursor: pointer;
-    color: var(--el-color-primary);
-  }
+	.mlt-icon {
+		cursor: pointer;
+		color: var(--el-color-primary);
+	}
 }
 </style>
 
 <style lang="scss">
 .tree-com {
-  height: calc(100% - 60px);
-  padding: 20px;
-  box-sizing: border-box;
-  overflow-y: auto;
+	height: calc(100% - 60px);
+	padding: 20px;
+	box-sizing: border-box;
+	overflow-y: auto;
 
-  .el-tree-node__content {
-    height: 32px !important;
-  }
+	.el-tree-node__content {
+		height: 32px !important;
+	}
 
-  .el-tree .el-tree-node__expand-icon svg {
-    display: none !important;
-    height: 0;
-    width: 0;
-  }
+	.el-tree .el-tree-node__expand-icon svg {
+		display: none !important;
+		height: 0;
+		width: 0;
+	}
 
-  .el-tree-node__expand-icon {
-    font-size: 16px;
-  }
+	.el-tree-node__expand-icon {
+		font-size: 16px;
+	}
 
-  .el-tree-node__content>.el-tree-node__expand-icon {
-    padding: 0;
-    box-sizing: border-box;
-    margin-right: 5px;
-    margin-left: 18px;
-  }
+	.el-tree-node__content > .el-tree-node__expand-icon {
+		padding: 0;
+		box-sizing: border-box;
+		margin-right: 5px;
+		margin-left: 18px;
+	}
 
-  .el-tree .el-tree-node__expand-icon.expanded {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
+	.el-tree .el-tree-node__expand-icon.expanded {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
 
-  .el-tree .el-tree-node__expand-icon.is-leaf {
-    margin-left: 0
-  }
+	.el-tree .el-tree-node__expand-icon.is-leaf {
+		margin-left: 0;
+	}
 
-  .el-tree .el-tree-node__expand-icon:before {
-    background: url("../../../../assets/img/menu-tree-show-icon.png") no-repeat center / 100%;
-    content: '';
-    display: block;
-    width: 24px;
-    height: 24px;
-  }
+	.el-tree .el-tree-node__expand-icon:before {
+		background: url('../../../../assets/img/menu-tree-show-icon.png') no-repeat center / 100%;
+		content: '';
+		display: block;
+		width: 24px;
+		height: 24px;
+	}
 
-  .el-tree .el-tree-node__expand-icon.expanded:before {
-    background: url("../../../../assets/img/menu-tree-hidden-icon.png") no-repeat center / 100%;
-    content: '';
-    display: block;
-    width: 24px;
-    height: 24px;
-  }
+	.el-tree .el-tree-node__expand-icon.expanded:before {
+		background: url('../../../../assets/img/menu-tree-hidden-icon.png') no-repeat center / 100%;
+		content: '';
+		display: block;
+		width: 24px;
+		height: 24px;
+	}
 
-  .el-tree .is-leaf.el-tree-node__expand-icon::before {
-    display: block;
-    background: none !important;
-    content: '';
-    width: 18px;
-    height: 18px;
-    border: none;
-  }
+	.el-tree .is-leaf.el-tree-node__expand-icon::before {
+		display: block;
+		background: none !important;
+		content: '';
+		width: 18px;
+		height: 18px;
+		border: none;
+	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/system/dept/types.ts b/web/src/views/system/dept/types.ts
index 6b0c30f..90d1653 100644
--- a/web/src/views/system/dept/types.ts
+++ b/web/src/views/system/dept/types.ts
@@ -40,14 +40,12 @@ export interface TreeItemType {
 }
 
 export interface DeptFormDataType {
-  id: string | number;
+  id?: string | number;
   key: string;
   parent: string | number;
   name: string;
   owner: string;
-  phone: string;
-  email: string;
-  sort: number;
+  remark: string;
   is_catalog?: boolean;
 }
 
diff --git a/web/src/views/system/menu/components/menuButton/crud.tsx b/web/src/views/system/menu/components/menuButton/crud.tsx
index 512952c..e70e8ab 100644
--- a/web/src/views/system/menu/components/menuButton/crud.tsx
+++ b/web/src/views/system/menu/components/menuButton/crud.tsx
@@ -1,12 +1,4 @@
-import {
-	AddReq,
-	DelReq,
-	EditReq,
-	dict,
-	CreateCrudOptionsRet,
-	CreateCrudOptionsProps,
-	UserPageQuery,
-} from '@fast-crud/fast-crud';
+import { AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps, UserPageQuery } from '@fast-crud/fast-crud';
 import * as api from './api';
 
 import { request } from '/@/utils/service';
@@ -185,7 +177,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 						},
 					}),
 					column: {
-						minWidth: 200,
+						minWidth: 250,
 						sortable: true,
 					},
 					form: {
diff --git a/web/src/views/system/menu/index.vue b/web/src/views/system/menu/index.vue
index aa6bf60..8ab7dae 100644
--- a/web/src/views/system/menu/index.vue
+++ b/web/src/views/system/menu/index.vue
@@ -1,155 +1,192 @@
 <template>
-    <fs-page>
-        <el-row class="menu-el-row">
-            <el-col :span="6">
-                <div class="menu-box menu-left-box">
-                    <el-input v-model="filterText" :prefix-icon="Search" placeholder="请输入菜单名称"/>
-                    <div class="menu-left-tree">
-                        <div class="mlt-head">
-                            <el-icon size="16" color="#606266" class="mlt-head-icon">
-                                <Menu/>
-                            </el-icon>
-                            菜单列表
-                            <el-tooltip effect="dark" placement="right"
-                                        content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;">
-                                <el-icon size="16" color="var(--el-color-primary)" class="mlt-tooltip">
-                                    <QuestionFilled/>
-                                </el-icon>
-                            </el-tooltip>
-                        </div>
-                        <el-tree ref="treeRef" :data="data" :props="defaultTreeProps" :filter-node-method="filterNode"
-                                 :load="loadNode" @node-drop="nodeDrop" lazy :indent="45" @node-click="handleNodeClick"
-                                 highlight-current
-                                 default-expand-all>
-                            <template #default="{ node, data }">
-                                <element-tree-line :node="node" :showLabelLine="false" :indent="32">
+	<fs-page>
+		<el-row class="menu-el-row">
+			<el-col :span="6">
+				<div class="menu-box menu-left-box">
+					<el-input v-model="filterText" :prefix-icon="Search" placeholder="请输入菜单名称" />
+					<div class="menu-left-tree">
+						<div class="mlt-head">
+							<el-icon size="16" color="#606266" class="mlt-head-icon">
+								<Menu />
+							</el-icon>
+							菜单列表
+							<el-tooltip
+								effect="dark"
+								placement="right"
+								content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;"
+							>
+								<el-icon size="16" color="var(--el-color-primary)" class="mlt-tooltip">
+									<QuestionFilled />
+								</el-icon>
+							</el-tooltip>
+						</div>
+						<el-tree
+							ref="treeRef"
+							:data="data"
+							:props="defaultTreeProps"
+							:filter-node-method="filterNode"
+							:load="loadNode"
+							@node-drop="nodeDrop"
+							lazy
+							:indent="45"
+							@node-click="handleNodeClick"
+							highlight-current
+						>
+							<template #default="{ node, data }">
+								<element-tree-line :node="node" :showLabelLine="false" :indent="32">
 									<span v-if="data.status" class="text-center font-black font-normal">
-										<SvgIcon :name="node.data.icon" color="var(--el-color-primary)"/>
+										<SvgIcon :name="node.data.icon" color="var(--el-color-primary)" />
 										&nbsp;{{ node.label }}
 									</span>
-                                    <span v-else class="text-center font-black text-red-700 font-normal">
-										<SvgIcon :name="node.data.icon"/>&nbsp;{{ node.label }}
+									<span v-else class="text-center font-black text-red-700 font-normal">
+										<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}
 									</span>
-                                </element-tree-line>
-                            </template>
-                        </el-tree>
-                    </div>
+								</element-tree-line>
+							</template>
+						</el-tree>
+					</div>
 
-                    <div class="menu-left-tags">
-                        <el-tooltip effect="dark" content="新增">
-                            <el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
-                                <Plus/>
-                            </el-icon>
-                        </el-tooltip>
+					<div class="menu-left-tags">
+						<el-tooltip effect="dark" content="新增">
+							<el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
+								<Plus />
+							</el-icon>
+						</el-tooltip>
 
-                        <el-tooltip effect="dark" content="编辑">
-                            <el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
-                                <Edit/>
-                            </el-icon>
-                        </el-tooltip>
+						<el-tooltip effect="dark" content="编辑">
+							<el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
+								<Edit />
+							</el-icon>
+						</el-tooltip>
 
-                        <el-tooltip effect="dark" content="上移">
-                            <el-icon size="16" @click="handleSort('up')" class="mlt-icon">
-                                <Top/>
-                            </el-icon>
-                        </el-tooltip>
+						<el-tooltip effect="dark" content="上移">
+							<el-icon size="16" @click="handleSort('up')" class="mlt-icon">
+								<Top />
+							</el-icon>
+						</el-tooltip>
 
-                        <el-tooltip effect="dark" content="下移">
-                            <el-icon size="16" @click="handleSort('down')" class="mlt-icon">
-                                <Bottom/>
-                            </el-icon>
-                        </el-tooltip>
+						<el-tooltip effect="dark" content="下移">
+							<el-icon size="16" @click="handleSort('down')" class="mlt-icon">
+								<Bottom />
+							</el-icon>
+						</el-tooltip>
 
-                        <el-tooltip effect="dark" content="删除">
-                            <el-icon size="16" @click="handleDeleteMenu()" class="mlt-icon">
-                                <Delete/>
-                            </el-icon>
-                        </el-tooltip>
-                    </div>
-                </div>
-            </el-col>
+						<el-tooltip effect="dark" content="删除">
+							<el-icon size="16" @click="handleDeleteMenu()" class="mlt-icon">
+								<Delete />
+							</el-icon>
+						</el-tooltip>
+					</div>
+				</div>
+			</el-col>
 
-            <el-col :span="18">
-                <div class="menu-box menu-right-box">
-                    <menuButton :select-menu="form"/>
-                </div>
-            </el-col>
-        </el-row>
+			<el-col :span="18">
+				<div class="menu-box menu-right-box">
+					<menuButton :select-menu="form" />
+				</div>
+			</el-col>
+		</el-row>
 
-        <el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false"
-                   :before-close="handleDrawerClose">
-            <div class="menu-box menu-drawer-box">
-                <div class="mcb-alert">
-                    1.红色菜单代表状态禁用;<br/>
-                    2.添加菜单，如果是目录，组件地址为空即可;<br/>
-                    3.添加根节点菜单，父级ID为空即可;<br/>
-                    4.支持拖拽菜单;
-                </div>
-                <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
-                    <el-form-item label="菜单ID" prop="id">
-                        <el-input v-model="form.id" disabled/>
-                    </el-form-item>
-                    <el-form-item label="父级ID" prop="parent">
-                        <el-input v-model="form.parent"/>
-                    </el-form-item>
-                    <el-form-item required label="菜单名称" prop="name">
-                        <el-input v-model="form.name"/>
-                    </el-form-item>
-                    <el-form-item label="组件地址" prop="component">
-                        <el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
-                                         :trigger-on-focus="false" clearable :debounce="100"
-                                         placeholder="输入组件地址"/>
-                    </el-form-item>
-                    <el-form-item required label="Url" prop="web_path">
-                        <el-input v-model="form.web_path"/>
-                    </el-form-item>
-                    <el-form-item label="排序" prop="sort">
-                        <el-input-number v-model="form.sort" controls-position="right"/>
-                    </el-form-item>
-                    <el-form-item label="状态">
-                        <el-radio-group v-model="form.status">
-                            <el-radio :label="true">启用</el-radio>
-                            <el-radio :label="false">禁用</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item label="侧边可见">
-                        <el-radio-group v-model="form.visible">
-                            <el-radio :label="true">启用</el-radio>
-                            <el-radio :label="false">禁用</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item label="缓存">
-                        <el-radio-group v-model="form.cache">
-                            <el-radio :label="true">启用</el-radio>
-                            <el-radio :label="false">禁用</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item label="图标" prop="icon">
-                        <IconSelector clearable v-model="form.icon"/>
-                    </el-form-item>
-                </el-form>
-                <el-divider></el-divider>
-                <div class="menus-btns">
-                    <el-button @click="saveMenu()" type="primary">保存</el-button>
-                    <!-- <el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button>
-                    <el-button @click="addChildMenu()" type="primary" round :disabled="!form.id">添加子级
-                    </el-button> -->
-                    <el-button @click="handleDrawerClose()">取消</el-button>
-                </div>
-            </div>
-        </el-drawer>
-    </fs-page>
+		<el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false" :before-close="handleDrawerClose">
+			<div class="menu-box menu-drawer-box">
+				<div class="mcb-alert">
+					1.红色菜单代表状态禁用;<br />
+					2.添加菜单，如果是目录，组件地址为空即可;<br />
+					3.添加根节点菜单，父级ID为空即可;<br />
+					4.支持拖拽菜单;
+				</div>
+				<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
+					<el-form-item label="菜单名称" prop="name">
+						<el-input v-model="formData.name" />
+					</el-form-item>
+					<el-form-item label="父级菜单" prop="parent">
+						<el-input v-model="formData.parent" />
+					</el-form-item>
+					<el-form-item label="图标" prop="icon">
+						<IconSelector clearable v-model="formData.icon" />
+					</el-form-item>
+
+					<el-row>
+						<el-col :span="12">
+							<el-form-item label="状态">
+								<el-switch v-model="formData.show_status" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="12">
+							<el-form-item v-if="formData.show_status" label="侧边显示">
+								<el-switch v-model="formData.slider_show" width="60" inline-prompt active-text="显示" inactive-text="隐藏" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+
+					<el-form-item label="菜单状态">
+						<el-radio-group v-model="formData.menu_status">
+							<el-radio-button label="1" class="aaa">常规</el-radio-button>
+							<el-radio-button label="2">目录</el-radio-button>
+							<el-radio-button label="3">外链接</el-radio-button>
+						</el-radio-group>
+					</el-form-item>
+
+					<el-form-item label="备注" prop="remark">
+						<el-input v-model="formData.remark" maxlength="200" show-word-limit type="textarea" />
+					</el-form-item>
+
+					<el-divider></el-divider>
+
+					<div style="min-height: 184px">
+						<el-form-item v-if="formData.menu_status === '3'" required label="Url" prop="web_path">
+							<el-input v-model="formData.web_path" />
+						</el-form-item>
+
+						<el-form-item v-if="formData.menu_status === '1'" label="路由地址" prop="route_path">
+							<el-input v-model="formData.route_path" />
+						</el-form-item>
+
+						<el-form-item v-if="formData.menu_status === '1'" label="组件名称" prop="route_name">
+							<el-input v-model="formData.route_name" />
+						</el-form-item>
+
+						<el-form-item v-if="formData.menu_status === '1'" label="组件地址" prop="component">
+							<el-autocomplete
+								class="w-full"
+								v-model="formData.component"
+								:fetch-suggestions="querySearch"
+								:trigger-on-focus="false"
+								clearable
+								:debounce="100"
+								placeholder="输入组件地址"
+							/>
+						</el-form-item>
+
+						<el-form-item v-if="formData.menu_status === '1'" label="缓存">
+							<el-switch v-model="formData.cache" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
+						</el-form-item>
+					</div>
+
+					<el-divider></el-divider>
+				</el-form>
+
+				<div class="menus-btns">
+					<el-button @click="saveMenu()" type="primary">保存</el-button>
+					<!-- <el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button>
+					<el-button @click="addChildMenu()" type="primary" round :disabled="!form.id">添加子级
+					</el-button> -->
+					<el-button @click="handleDrawerClose()">取消</el-button>
+				</div>
+			</div>
+		</el-drawer>
+	</fs-page>
 </template>
 
 <script lang="ts" setup name="menuPages">
-import {ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, h} from 'vue';
+import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, h } from 'vue';
 import XEUtils from 'xe-utils';
-import {ElForm, ElTree, FormRules, ElMessageBox} from 'element-plus';
-import {getElementLabelLine} from "element-tree-line";
+import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
+import { getElementLabelLine } from 'element-tree-line';
 import * as api from './api';
-import {Search} from '@element-plus/icons-vue';
-import {errorMessage, successMessage, warningMessage} from '../../../utils/message';
-import {FormTypes, TreeTypes, APIResponseData, ComponentFileItem} from './types';
+import { Search } from '@element-plus/icons-vue';
+import { errorMessage, successMessage, warningMessage } from '../../../utils/message';
+import { FormTypes, TreeTypes, APIResponseData, ComponentFileItem } from './types';
 import type Node from 'element-plus/es/components/tree/src/model/node';
 
 const menuButton = defineAsyncComponent(() => import('./components/menuButton/index.vue'));
@@ -160,59 +197,74 @@ const ElementTreeLine = getElementLabelLine(h);
 
 const filterText = ref('');
 const treeRef = ref<InstanceType<typeof ElTree>>();
-let drawerVisible = ref(false)
-let treeSelectNode = ref<Node | null>(null)
+let drawerVisible = ref(false);
+let treeSelectNode = ref<Node | null>(null);
+
+let formData = reactive({
+	name: '',
+	parent: '',
+	icon: '',
+	show_status: true,
+	slider_show: true,
+	menu_status: '1',
+	remark: '',
+	component: '',
+	web_path: '',
+	route_path: '',
+	route_name: '',
+	cache: true,
+});
 
 watch(filterText, (val) => {
-    treeRef.value!.filter(val);
+	treeRef.value!.filter(val);
 });
 
 const defaultTreeProps: any = {
-    children: 'children',
-    label: 'name',
-    icon: 'icon',
-    isLeaf: (data: TreeTypes[], node: Node) => {
-        if (node.data.is_catalog) {
-            return false;
-        } else {
-            return true;
-        }
-    },
+	children: 'children',
+	label: 'name',
+	icon: 'icon',
+	isLeaf: (data: TreeTypes[], node: Node) => {
+		if (node.data.is_catalog) {
+			return false;
+		} else {
+			return true;
+		}
+	},
 };
 
 const validateWebPath = (rule: string, value: string, callback: Function) => {
-    let pattern = /^\/.*?/;
-    if (!pattern.test(value)) {
-        callback(new Error('请输入正确的地址'));
-    } else {
-        callback();
-    }
+	let pattern = /^\/.*?/;
+	if (!pattern.test(value)) {
+		callback(new Error('请输入正确的地址'));
+	} else {
+		callback();
+	}
 };
 
 const filterNode = (value: string, data: any) => {
-    if (!value) return true;
-    return toRaw(data).name.indexOf(value) !== -1;
+	if (!value) return true;
+	return toRaw(data).name.indexOf(value) !== -1;
 };
 
 // 懒加载
 const loadNode = (node: Node, resolve: (data: TreeTypes[]) => void) => {
-    // @ts-ignore
-    if (node.level !== 0) {
-        // @ts-ignore
-        api.lazyLoadMenu({parent: node.data.id}).then((res: APIResponseData) => {
-            resolve(res.data);
-        });
-    }
+	// @ts-ignore
+	if (node.level !== 0) {
+		// @ts-ignore
+		api.lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => {
+			resolve(res.data);
+		});
+	}
 };
 
 const nodeDrop = (draggingNode: Node, dropNode: Node) => {
-    // @ts-ignore
-    if (!dropNode.isLeaf) {
-        // @ts-ignore
-        api.dragMenu({menu_id: draggingNode.data.id, parent_id: dropNode.data.id}).then((res: APIResponseData) => {
-            successMessage(res.msg as string);
-        });
-    }
+	// @ts-ignore
+	if (!dropNode.isLeaf) {
+		// @ts-ignore
+		api.dragMenu({ menu_id: draggingNode.data.id, parent_id: dropNode.data.id }).then((res: APIResponseData) => {
+			successMessage(res.msg as string);
+		});
+	}
 };
 
 let data = ref([]);
@@ -220,341 +272,340 @@ let data = ref([]);
 let isAddNewMenu = ref(false); // 判断当前是新增菜单，还是更新保存当前菜单
 
 let form: FormTypes<any> = reactive({
-    id: '',
-    parent: '',
-    name: '',
-    component: '',
-    web_path: '',
-    sort: 0,
-    status: true,
-    is_catalog: false,
-    permission: '',
-    icon: '',
-    visible: true,
-    cache: true,
+	id: '',
+	parent: '',
+	name: '',
+	component: '',
+	web_path: '',
+	sort: 0,
+	status: true,
+	is_catalog: false,
+	permission: '',
+	icon: '',
+	visible: true,
+	cache: true,
 });
+
 const rules = reactive<FormRules>({
-    // @ts-ignore
-    web_path: [{validator: validateWebPath, trigger: 'blur'}],
+	// @ts-ignore
+	web_path: [{ validator: validateWebPath, trigger: 'blur' }],
+	name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }],
+	parent: [{ required: true, message: '父级菜单必选', trigger: ['blur', 'change'] }],
 });
 
 const formRef = ref<InstanceType<typeof ElForm>>();
 
 const querySearch = (queryString: string, cb: any) => {
-    const files: any = import.meta.glob('@views/**/*.vue');
-    let fileLists: Array<any> = [];
-    Object.keys(files).forEach((queryString: string) => {
-        fileLists.push({
-            label: queryString.replace(/(\.\/|\.vue)/g, ''),
-            value: queryString.replace(/(\.\/|\.vue)/g, ''),
-        });
-    });
-    const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists;
-    // 统一去掉/src/views/前缀
-    results.forEach((val) => {
-        val.label = val.label.replace('/src/views/', '');
-        val.value = val.value.replace('/src/views/', '');
-    });
-    cb(results);
+	const files: any = import.meta.glob('@views/**/*.vue');
+	let fileLists: Array<any> = [];
+	Object.keys(files).forEach((queryString: string) => {
+		fileLists.push({
+			label: queryString.replace(/(\.\/|\.vue)/g, ''),
+			value: queryString.replace(/(\.\/|\.vue)/g, ''),
+		});
+	});
+	const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists;
+	// 统一去掉/src/views/前缀
+	results.forEach((val) => {
+		val.label = val.label.replace('/src/views/', '');
+		val.value = val.value.replace('/src/views/', '');
+	});
+	cb(results);
 };
 
 const createFilter = (queryString: string) => {
-    return (file: ComponentFileItem) => {
-        return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
-    };
+	return (file: ComponentFileItem) => {
+		return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
+	};
 };
 
 const getData = () => {
-    api.GetList({}).then((ret: APIResponseData) => {
-        const responseData = ret.data;
-        const result = XEUtils.toArrayTree(responseData, {
-            parentKey: 'parent',
-            children: 'children',
-            strict: true,
-        });
-        data.value = result;
-    });
+	api.GetList({}).then((ret: APIResponseData) => {
+		const responseData = ret.data;
+		const result = XEUtils.toArrayTree(responseData, {
+			parentKey: 'parent',
+			children: 'children',
+			strict: true,
+		});
+		data.value = result;
+	});
 };
 
 const saveMenu = () => {
-    formRef.value?.validate((valid, fields) => {
-        if (valid) {
-            if (!isAddNewMenu.value) {
-                // 保存菜单
+	formRef.value?.validate((valid, fields) => {
+		if (valid) {
+			if (!isAddNewMenu.value) {
+				// 保存菜单
 
-                form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
-                api.UpdateObj(form).then((res: APIResponseData) => {
-                    successMessage(res.msg as string);
-                    getData();
-                    handleDrawerClose()
-                });
-            } else {
-                // 新增菜单
-                form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
-                api.AddObj(form).then((res: APIResponseData) => {
-                    successMessage(res.msg as string);
-                    getData();
-                    handleDrawerClose()
-                });
-            }
-        } else {
-            errorMessage('请填写检查表单');
-        }
-    });
+				form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
+				api.UpdateObj(form).then((res: APIResponseData) => {
+					successMessage(res.msg as string);
+					getData();
+					handleDrawerClose();
+				});
+			} else {
+				// 新增菜单
+				form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
+				api.AddObj(form).then((res: APIResponseData) => {
+					successMessage(res.msg as string);
+					getData();
+					handleDrawerClose();
+				});
+			}
+		} else {
+			errorMessage('请填写检查表单');
+		}
+	});
 };
 
 const newMenu = () => {
-    formRef.value?.resetFields();
-    isAddNewMenu.value = true;
-    handleDrawerClose()
+	formRef.value?.resetFields();
+	isAddNewMenu.value = true;
+	handleDrawerClose();
 };
 
 const addChildMenu = () => {
-    let parentId = form.id;
-    formRef.value?.resetFields();
-    form.parent = parentId;
-    isAddNewMenu.value = true;
-    handleDrawerClose();
+	let parentId = form.id;
+	formRef.value?.resetFields();
+	form.parent = parentId;
+	isAddNewMenu.value = true;
+	handleDrawerClose();
 };
 
 const handleNodeClick = (record: any, node: Node) => {
-    treeSelectNode.value = node;
-    Object.keys(toRaw(data)).forEach((key: string) => {
-        form[key] = record[key];
-    });
-    delete form.component_name;
-    form.id = record.id;
-    isAddNewMenu.value = false;
+	treeSelectNode.value = node;
+	Object.keys(toRaw(data)).forEach((key: string) => {
+		form[key] = record[key];
+	});
+	delete form.component_name;
+	form.id = record.id;
+	isAddNewMenu.value = false;
 };
 
 /**
  * 点击左侧编辑按钮
  */
 const handleUpdateMenu = (type: string) => {
-    if (type === 'create') {
-        drawerVisible.value = true
-        return
-    }
-    if (!form.id) {
-        warningMessage('请选择菜单！')
-        return
-    }
-    drawerVisible.value = true
-}
+	if (type === 'create') {
+		drawerVisible.value = true;
+		return;
+	}
+	if (!form.id) {
+		warningMessage('请选择菜单！');
+		return;
+	}
+	drawerVisible.value = true;
+};
 const handleDrawerClose = () => {
-    drawerVisible.value = false
-}
+	drawerVisible.value = false;
+};
 
 /**
  * 删除菜单
  */
 const handleDeleteMenu = () => {
-    if (!form.id) {
-        warningMessage('请选择菜单！')
-        return
-    }
-    ElMessageBox.confirm(
-        '您确认删除该菜单项吗?',
-        '温馨提示',
-        {
-            confirmButtonText: '确认',
-            cancelButtonText: '取消',
-            type: 'warning',
-        }
-    ).then(() => {
-        api.DelObj(form).then((res: APIResponseData) => {
-            successMessage(res.msg as string);
-            getData();
-            handleDrawerClose();
-        });
-    })
+	if (!form.id) {
+		warningMessage('请选择菜单！');
+		return;
+	}
+	ElMessageBox.confirm('您确认删除该菜单项吗?', '温馨提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(() => {
+		api.DelObj(form).then((res: APIResponseData) => {
+			successMessage(res.msg as string);
+			getData();
+			handleDrawerClose();
+		});
+	});
 };
 
 /**
  * 移动操作
  */
 const handleSort = (type: string) => {
-    if (!form.id && treeSelectNode.value) {
-        warningMessage('请选择菜单！')
-        return
-    }
-    const parentList = treeSelectNode.value?.parent.childNodes || [];
-    const index = parentList.findIndex(i => i.data.id === form.id)
-    const record = parentList.find(i => i.data.id === form.id)
+	if (!form.id && treeSelectNode.value) {
+		warningMessage('请选择菜单！');
+		return;
+	}
+	const parentList = treeSelectNode.value?.parent.childNodes || [];
+	const index = parentList.findIndex((i) => i.data.id === form.id);
+	const record = parentList.find((i) => i.data.id === form.id);
 
-    if (type === 'up') {
-        if (index === 0) return
-        api.moveUp({'menu_id': form.id}).then((res: APIResponseData) => {
-            getData();
-            successMessage(res.msg as string);
-        });
-    }
-    if (type === 'down') {
-        api.moveDown({'menu_id': form.id}).then((res: APIResponseData) => {
-            getData();
-            successMessage(res.msg as string);
-        });
-    }
-}
+	if (type === 'up') {
+		if (index === 0) return;
+		api.moveUp({ menu_id: form.id }).then((res: APIResponseData) => {
+			getData();
+			successMessage(res.msg as string);
+		});
+	}
+	if (type === 'down') {
+		api.moveDown({ menu_id: form.id }).then((res: APIResponseData) => {
+			getData();
+			successMessage(res.msg as string);
+		});
+	}
+};
 
 // 页面打开后获取列表数据
 onMounted(() => {
-    getData();
+	getData();
 });
 </script>
 
 <style lang="scss" scoped>
 .menu-el-row {
-    height: 100%;
-    overflow: hidden;
+	height: 100%;
+	overflow: hidden;
 
-    .el-col {
-        height: 100%;
-        padding: 10px 0;
-        box-sizing: border-box;
-    }
+	.el-col {
+		height: 100%;
+		padding: 10px 0;
+		box-sizing: border-box;
+	}
 }
 
 .menu-box {
-    height: 100%;
-    padding: 10px;
-    background-color: #fff;
-    box-sizing: border-box;
+	height: 100%;
+	padding: 10px;
+	background-color: #fff;
+	box-sizing: border-box;
 }
 
 .menu-left-box {
-    position: relative;
-    border-radius: 0 8px 8px 0;
-    margin-right: 10px;
+	position: relative;
+	border-radius: 0 8px 8px 0;
+	margin-right: 10px;
 
-    .mlt-head {
-        display: flex;
-        align-items: center;
-        margin-left: -8px;
-        color: #606266;
-        font-weight: 600;
+	.mlt-head {
+		display: flex;
+		align-items: center;
+		margin-left: -8px;
+		color: #606266;
+		font-weight: 600;
 
-        .mlt-head-icon {
-            margin-right: 8px;
-            position: relative;
-            top: -1px;
-        }
+		.mlt-head-icon {
+			margin-right: 8px;
+			position: relative;
+			top: -1px;
+		}
 
-        .mlt-tooltip {
-            margin-left: 5px;
-            position: relative;
-            top: -1px;
-        }
-    }
+		.mlt-tooltip {
+			margin-left: 5px;
+			position: relative;
+			top: -1px;
+		}
+	}
 
-    .menu-left-tags {
-        height: 40px;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        padding: 0 20px;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        box-sizing: border-box;
+	.menu-left-tags {
+		height: 40px;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 0 20px;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		box-sizing: border-box;
 
-        .mlt-icon {
-            cursor: pointer;
-            color: var(--el-color-primary);
-        }
-    }
+		.mlt-icon {
+			cursor: pointer;
+			color: var(--el-color-primary);
+		}
+	}
 }
 
 .menu-right-box {
-    border-radius: 8px 0 0 8px;
+	border-radius: 8px 0 0 8px;
 }
 
 .menus-btns {
-    padding-bottom: 10px;
-    box-sizing: border-box;
+	padding-bottom: 10px;
+	box-sizing: border-box;
 }
 
 .menu-drawer-box {
-    border-radius: 8px;
-    margin: 0 10px;
-    overflow-y: auto;
+	border-radius: 8px;
+	margin: 0 10px;
+	overflow-y: auto;
 
-    .mcb-alert {
-        color: #fff;
-        line-height: 24px;
-        padding: 8px 16px;
-        margin-bottom: 20px;
-        border-radius: 4px;
-        background-color: var(--el-color-primary);
-    }
+	.mcb-alert {
+		color: #fff;
+		line-height: 24px;
+		padding: 8px 16px;
+		margin-bottom: 20px;
+		border-radius: 4px;
+		background-color: var(--el-color-primary);
+	}
 }
 
 .font-normal {
-    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
 }
 </style>
 
 <style lang="scss">
 .menu-left-tree {
-    height: calc(100% - 60px);
-    padding: 20px;
-    box-sizing: border-box;
-    overflow-y: auto;
+	height: calc(100% - 60px);
+	padding: 20px;
+	box-sizing: border-box;
+	overflow-y: auto;
 
-    .el-tree-node__content {
-        height: 32px !important;
-    }
+	.el-tree-node__content {
+		height: 32px !important;
+	}
 
-    .el-tree .el-tree-node__expand-icon svg {
-        display: none !important;
-        height: 0;
-        width: 0;
-    }
+	.el-tree .el-tree-node__expand-icon svg {
+		display: none !important;
+		height: 0;
+		width: 0;
+	}
 
-    .el-tree-node__expand-icon {
-        font-size: 16px;
-    }
+	.el-tree-node__expand-icon {
+		font-size: 16px;
+	}
 
-    .el-tree-node__content > .el-tree-node__expand-icon {
-        padding: 0;
-        box-sizing: border-box;
-        margin-right: 5px;
-        margin-left: 24px;
-    }
+	.el-tree-node__content > .el-tree-node__expand-icon {
+		padding: 0;
+		box-sizing: border-box;
+		margin-right: 5px;
+		margin-left: 24px;
+	}
 
-    .el-tree .el-tree-node__expand-icon.expanded {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
+	.el-tree .el-tree-node__expand-icon.expanded {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
 
-    .el-tree .el-tree-node__expand-icon.is-leaf {
-        margin-left: 0
-    }
+	.el-tree .el-tree-node__expand-icon.is-leaf {
+		margin-left: 0;
+	}
 
-    .el-tree .el-tree-node__expand-icon:before {
-        background: url("../../../assets/img/menu-tree-show-icon.png") no-repeat center / 100%;
-        content: '';
-        display: block;
-        width: 24px;
-        height: 24px;
-    }
+	.el-tree .el-tree-node__expand-icon:before {
+		background: url('../../../assets/img/menu-tree-show-icon.png') no-repeat center / 100%;
+		content: '';
+		display: block;
+		width: 24px;
+		height: 24px;
+	}
 
-    .el-tree .el-tree-node__expand-icon.expanded:before {
-        background: url("../../../assets/img/menu-tree-hidden-icon.png") no-repeat center / 100%;
-        content: '';
-        display: block;
-        width: 24px;
-        height: 24px;
-    }
+	.el-tree .el-tree-node__expand-icon.expanded:before {
+		background: url('../../../assets/img/menu-tree-hidden-icon.png') no-repeat center / 100%;
+		content: '';
+		display: block;
+		width: 24px;
+		height: 24px;
+	}
 
-    .el-tree .is-leaf.el-tree-node__expand-icon::before {
-        display: block;
-        background: none !important;
-        content: '';
-        width: 18px;
-        height: 18px;
-        border: none;
-    }
+	.el-tree .is-leaf.el-tree-node__expand-icon::before {
+		display: block;
+		background: none !important;
+		content: '';
+		width: 18px;
+		height: 18px;
+		border: none;
+	}
 }
 </style>