From 9cf5d13f1c4d6e1fbed702ae8dabcc9cbc5fb44b Mon Sep 17 00:00:00 2001
From: sheng <15292050171@163.com>
Date: Tue, 25 Jul 2023 16:45:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=BE=8E=E5=8C=96=EF=BC=9A?=
 =?UTF-8?q?=E7=99=BB=E9=99=86=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/system/login/index.vue |  30 +-
 web/src/views/system/menu/index.vue  | 639 ++++++++++++++++-----------
 2 files changed, 402 insertions(+), 267 deletions(-)

diff --git a/web/src/views/system/login/index.vue b/web/src/views/system/login/index.vue
index 9cf7e05..a209e05 100644
--- a/web/src/views/system/login/index.vue
+++ b/web/src/views/system/login/index.vue
@@ -40,6 +40,19 @@
 				</div>
 			</div>
 		</div>
+
+		<div class="login-authorization">
+			<p>Copyright © 2021-2022 django-vue-admin.com 版权所有</p>
+			<p class="la-other">
+				<a href="https://beian.miit.gov.cn" target="_blank">晋ICP备18005113号-3</a>
+				| 
+				<a href="https://django-vue-admin.com" target="_blank">帮助</a>
+				|
+				<a href="#">隐私</a>
+				|
+				<a href="#">条款</a>
+			</p>
+		</div>
 	</div>
 </template>
 
@@ -101,7 +114,7 @@ onMounted(() => {
 				flex-direction: column;
 				span {
 					margin-left: 10px;
-					font-size: 28px;
+					font-size: 20px;
 					color: #26a59a;
 				}
 				.login-left-logo-text-msg {
@@ -251,5 +264,20 @@ onMounted(() => {
 			}
 		}
 	}
+
+	.login-authorization {
+		position: fixed;
+		bottom: 50px;
+		left: 0;
+		right: 0;
+		text-align: center;
+		p {
+			font-size: 14px;
+		}
+		a {
+			color: #409eff;
+			margin: 0 5px;
+		}
+	}
 }
 </style>
diff --git a/web/src/views/system/menu/index.vue b/web/src/views/system/menu/index.vue
index afd5bc8..dc03717 100644
--- a/web/src/views/system/menu/index.vue
+++ b/web/src/views/system/menu/index.vue
@@ -1,137 +1,220 @@
 <template>
-    <fs-page>
-        <splitpanes>
-            <pane max-size="20" min-size="16">
-                <el-card :body-style="{ height: '100%' }">
-                    <p class="font-mono font-black text-center text-xl pb-5">
-                        菜单列表
-                        <el-tooltip effect="dark" :content="content" placement="right">
-                            <el-icon>
-                                <QuestionFilled/>
-                            </el-icon>
-                        </el-tooltip>
-                    </p>
-                    <el-input v-model="filterText" :placeholder="placeholder"/>
-                    <el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data"
-                             :props="treeProps"
-                             :filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag"
-                             :allow-drop="allowDrop"
-                             @node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable
-                             @node-click="handleNodeClick">
-                        <template #default="{ node, data }">
+	<fs-page>
+		<el-row class="s-el-row">
+			<el-col :span="5">
+				<div class="menu-box menu-left-box">
+					<p class="font-mono font-black text-center text-xl pb-5">
+						菜单列表
+						<el-tooltip effect="dark" :content="content" placement="right">
+							<el-icon>
+								<QuestionFilled />
+							</el-icon>
+						</el-tooltip>
+					</p>
+					<el-input v-model="filterText" :placeholder="placeholder" />
+					<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
+						:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" :allow-drop="allowDrop"
+						@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable @node-click="handleNodeClick">
+						<template #default="{ node, data }">
 							<span v-if="data.status" class="text-center font-black font-normal">
-								<SvgIcon :name="node.data.icon"/>&nbsp;{{ node.label }}
+								<SvgIcon :name="node.data.icon" />&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>
-                        </template>
-                    </el-tree>
-                </el-card>
-            </pane>
-            <pane min-size="30">
-                <el-card :body-style="{ height: '100%' }">
-                    <el-form ref="formRef" :rules="rules" :model="form" label-width="80px"
-                             label-position="right">
-                        <el-alert :title="content" type="success" effect="dark" :closable="false" center/>
-                        <el-divider>
-                            <strong>菜单配置</strong>
-                        </el-divider>
-                        <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>
-                        <el-button @click="saveMenu()" type="primary" round>保存</el-button>
-                        <el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
-                        <el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
-                        </el-button>
-                        <!--            <el-button @click="addSameLevelMenu()" type="warning" round>添加同级</el-button>-->
-                        <el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
-                        </el-button>
-                    </div>
-                </el-card>
-            </pane>
-            <pane min-size="30">
-                <el-card :body-style="{ height: '100%' }">
-                    <menuButton :select-menu="form"/>
-                </el-card>
-            </pane>
-        </splitpanes>
-    </fs-page>
+						</template>
+					</el-tree>
+				</div>
+			</el-col>
+			<el-col :span="9">
+				<div class="menu-box menu-center-box">
+					<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
+						<el-alert :title="content" type="success" effect="dark" :closable="false" center />
+						<el-divider>
+							<strong>菜单配置</strong>
+						</el-divider>
+						<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" round>保存</el-button>
+						<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
+						<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
+						</el-button>
+						<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
+						</el-button>
+					</div>
+				</div>
+			</el-col>
+			<el-col :span="10">
+				<div class="menu-box menu-right-box">
+					<menuButton :select-menu="form" />
+				</div>
+			</el-col>
+		</el-row>
+		<!-- <splitpanes>
+			<pane max-size="30" min-size="30">
+				<el-card :body-style="{ height: '100%' }">
+					<p class="font-mono font-black text-center text-xl pb-5">
+						菜单列表
+						<el-tooltip effect="dark" :content="content" placement="right">
+							<el-icon>
+								<QuestionFilled />
+							</el-icon>
+						</el-tooltip>
+					</p>
+					<el-input v-model="filterText" :placeholder="placeholder" />
+					<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
+						:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" :allow-drop="allowDrop"
+						@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable @node-click="handleNodeClick">
+						<template #default="{ node, data }">
+							<span v-if="data.status" class="text-center font-black font-normal">
+								<SvgIcon :name="node.data.icon" />&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>
+						</template>
+					</el-tree>
+				</el-card>
+			</pane>
+			<pane min-size="30">
+				<el-card :body-style="{ height: '100%' }">
+					<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
+						<el-alert :title="content" type="success" effect="dark" :closable="false" center />
+						<el-divider>
+							<strong>菜单配置</strong>
+						</el-divider>
+						<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" round>保存</el-button>
+						<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
+						<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
+						</el-button>
+						<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
+						</el-button>
+					</div>
+				</el-card>
+			</pane>
+			<pane min-size="30">
+				<el-card :body-style="{ height: '100%' }">
+					<menuButton :select-menu="form" />
+				</el-card>
+			</pane>
+		</splitpanes> -->
+	</fs-page>
 </template>
 
 <script lang="ts" setup name="menu">
-import {Splitpanes, Pane} from 'splitpanes';
+import { Splitpanes, Pane } from 'splitpanes';
 import 'splitpanes/dist/splitpanes.css';
 import * as api from './api';
 import * as menuButoonApi from './components/menuButton/api';
-import {ElForm, ElTree, FormRules, ElMessageBox} from 'element-plus';
-import {ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef, onActivated} from 'vue';
+import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
+import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef, onActivated } from 'vue';
 import XEUtils from 'xe-utils';
-import {errorMessage, successMessage} from '../../../utils/message';
+import { errorMessage, successMessage } from '../../../utils/message';
 
 interface Tree {
-    id: number;
-    name: string;
-    status: boolean;
-    children?: Tree[];
+	id: number;
+	name: string;
+	status: boolean;
+	children?: Tree[];
 }
 
 interface APIResponseData {
-    code?: number;
-    data: [];
-    msg?: string;
+	code?: number;
+	data: [];
+	msg?: string;
 }
 
 interface Form<T> {
-    [key: string]: T;
+	[key: string]: T;
 }
 
 interface ComponentFileItem {
-    value: string;
-    label: string;
+	value: string;
+	label: string;
 }
 
 // 引入组件
@@ -143,74 +226,74 @@ const filterText = ref('');
 const treeRef = ref<InstanceType<typeof ElTree>>();
 
 const treeProps = {
-    children: 'children',
-    label: 'name',
-    icon: 'icon',
-    isLeaf: (data: Tree[], node: Node) => {
-        // @ts-ignore
-        if (node.data.is_catalog) {
-            return false;
-        } else {
-            return true;
-        }
-    },
+	children: 'children',
+	label: 'name',
+	icon: 'icon',
+	isLeaf: (data: Tree[], node: Node) => {
+		// @ts-ignore
+		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();
+	}
 };
 
 watch(filterText, (val) => {
-    treeRef.value!.filter(val);
+	treeRef.value!.filter(val);
 });
 
 const filterNode = (value: string, data: Tree) => {
-    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: Tree[]) => 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 allowDrag = (node: Node) => {
-    // @ts-ignore
-    if (node.data.is_catalog) {
-        return false;
-    } else {
-        return true;
-    }
+	// @ts-ignore
+	if (node.data.is_catalog) {
+		return false;
+	} else {
+		return true;
+	}
 };
 
 // 判断是否可以被放置
 const allowDrop = (draggingNode: Node, dropNode: Node, type: string) => {
-    // @ts-ignore
-    if (!dropNode.isLeaf) {
-        return true;
-    }
+	// @ts-ignore
+	if (!dropNode.isLeaf) {
+		return true;
+	}
 };
 
 const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: string, event: any) => {
-    // @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([]);
@@ -227,18 +310,18 @@ const content = `
 `;
 
 let form: Form<any> = reactive({
-    id: '',
-    parent: '',
-    name: '',
-    component: '',
-    web_path: '',
-    sort: '',
-    status: true,
-    is_catalog: false,
-    permission: '',
-    icon: '',
-    visible: true,
-    cache: true,
+	id: '',
+	parent: '',
+	name: '',
+	component: '',
+	web_path: '',
+	sort: '',
+	status: true,
+	is_catalog: false,
+	permission: '',
+	icon: '',
+	visible: true,
+	cache: true,
 });
 
 let menuPermissonList = ref([]);
@@ -246,155 +329,179 @@ let menuPermissonList = ref([]);
 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 rules = reactive<FormRules>({
-    // @ts-ignore
-    web_path: [{validator: validateWebPath, trigger: 'blur'}],
+	// @ts-ignore
+	web_path: [{ validator: validateWebPath, trigger: 'blur' }],
 });
 
 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 getPermissions = (menu: object) => {
-    menuButoonApi.GetList(menu).then((res: APIResponseData) => {
-        menuPermissonList.value = res.data;
-    });
+	menuButoonApi.GetList(menu).then((res: APIResponseData) => {
+		menuPermissonList.value = res.data;
+	});
 };
 
 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();
-                });
-            } else {
-                // 新增菜单
-                form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
-                api.AddObj(form).then((res: APIResponseData) => {
-                    successMessage(res.msg as string);
-                    getData();
-                });
-            }
-        } else {
-            errorMessage('请填写检查表单');
-        }
-    });
+				form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
+				api.UpdateObj(form).then((res: APIResponseData) => {
+					successMessage(res.msg as string);
+					getData();
+				});
+			} else {
+				// 新增菜单
+				form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
+				api.AddObj(form).then((res: APIResponseData) => {
+					successMessage(res.msg as string);
+					getData();
+				});
+			}
+		} else {
+			errorMessage('请填写检查表单');
+		}
+	});
 };
 
 const newMenu = () => {
-    formRef.value?.resetFields();
-    isAddNewMenu.value = true;
+	formRef.value?.resetFields();
+	isAddNewMenu.value = true;
 };
 
 const addChildMenu = () => {
-    let parentId = form.id;
-    formRef.value?.resetFields();
-    form.parent = parentId;
-    isAddNewMenu.value = true;
+	let parentId = form.id;
+	formRef.value?.resetFields();
+	form.parent = parentId;
+	isAddNewMenu.value = true;
 };
 
 const addSameLevelMenu = () => {
-    let parentId = form.parent;
-    formRef.value?.resetFields();
-    form.parent = parentId;
-    isAddNewMenu.value = true;
+	let parentId = form.parent;
+	formRef.value?.resetFields();
+	form.parent = parentId;
+	isAddNewMenu.value = true;
 };
 
 const deleteMenu = () => {
-    ElMessageBox.confirm(
-        '您确认删除该菜单项吗?',
-        '温馨提示',
-        {
-            confirmButtonText: '确认',
-            cancelButtonText: '取消',
-            type: 'warning',
-        }
-    ).then(() => {
-        api.DelObj(form).then((res: APIResponseData) => {
-            successMessage(res.msg as string);
-            getData();
-        });
-    })
+	ElMessageBox.confirm(
+		'您确认删除该菜单项吗?',
+		'温馨提示',
+		{
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning',
+		}
+	).then(() => {
+		api.DelObj(form).then((res: APIResponseData) => {
+			successMessage(res.msg as string);
+			getData();
+		});
+	})
 
 };
 
 const handleNodeClick = (data: any, node: any, prop: any) => {
-    Object.keys(toRaw(data)).forEach((key: string) => {
-        form[key] = data[key];
-    });
-    delete form.component_name;
-    form.id = data.id;
-    isAddNewMenu.value = false;
+	Object.keys(toRaw(data)).forEach((key: string) => {
+		form[key] = data[key];
+	});
+	delete form.component_name;
+	form.id = data.id;
+	isAddNewMenu.value = false;
 
-    // 点击tree node时，加载对应的权限菜单
-    // getPermissions({ menu: form.id });
+	// 点击tree node时，加载对应的权限菜单
+	// getPermissions({ menu: form.id });
 };
 
 const addPermission = () => {
-    !form.is_catalog ? (permissionDrawerVisible.value = true) : errorMessage('目录没有菜单权限');
+	!form.is_catalog ? (permissionDrawerVisible.value = true) : errorMessage('目录没有菜单权限');
 };
 const drawerClose = () => {
-    permissionDrawerVisible.value = false;
+	permissionDrawerVisible.value = false;
 };
 
 // 页面打开后获取列表数据
 onMounted(() => {
-    getData();
+	getData();
 });
 onActivated(() => {
-    console.log('keep-alive成功')
+	console.log('keep-alive成功')
 });
 </script>
 
 <style lang="scss" scoped>
-.el-row {
-    height: 100%;
-
-    .el-col {
-        height: 100%;
-    }
+.s-el-row {
+	height: 100%;
+	overflow: hidden;
+	.el-col {
+		height: 100%;
+		padding: 10px 0;
+		box-sizing: border-box;
+	}
+}
+.menu-box {
+	height: 100%;
+	padding: 10px;
+	background-color: #fff;
+	overflow-y: auto;
+	box-sizing: border-box;
 }
 
-.el-card {
-    height: 100%;
+.menu-left-box {
+	border-radius: 0 8px 8px 0;
 }
+
+.menu-center-box {
+	border-radius: 8px;
+	margin: 0 10px;
+}
+
+.menu-right-box {
+	border-radius: 8px 0 0 8px;
+}
+
+.menus-btns {
+	padding-bottom: 10px;
+	box-sizing: border-box;
+}
+
 .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>