😎整理代码

.vscode/launch.json

@@ -37,4 +37,4 @@
       "request": "attach"
     }
   ]
-}
+}

.vscode/tasks.json

@@ -5,37 +5,22 @@
       "label": "build",
       "command": "dotnet",
       "type": "process",
-      "args": [
-        "build",
-        "${workspaceFolder}/Admin.NET/Admin.NET.sln",
-        "/property:GenerateFullPaths=true",
-        "/consoleloggerparameters:NoSummary;ForceNoAlign"
-      ],
+      "args": ["build", "${workspaceFolder}/Admin.NET/Admin.NET.sln", "/property:GenerateFullPaths=true", "/consoleloggerparameters:NoSummary;ForceNoAlign"],
       "problemMatcher": "$msCompile"
     },
     {
       "label": "publish",
       "command": "dotnet",
       "type": "process",
-      "args": [
-        "publish",
-        "${workspaceFolder}/Admin.NET/Admin.NET.sln",
-        "/property:GenerateFullPaths=true",
-        "/consoleloggerparameters:NoSummary;ForceNoAlign"
-      ],
+      "args": ["publish", "${workspaceFolder}/Admin.NET/Admin.NET.sln", "/property:GenerateFullPaths=true", "/consoleloggerparameters:NoSummary;ForceNoAlign"],
       "problemMatcher": "$msCompile"
     },
     {
       "label": "watch",
       "command": "dotnet",
       "type": "process",
-      "args": [
-        "watch",
-        "run",
-        "--project",
-        "${workspaceFolder}/Admin.NET/Admin.NET.sln"
-      ],
+      "args": ["watch", "run", "--project", "${workspaceFolder}/Admin.NET/Admin.NET.sln"],
       "problemMatcher": "$msCompile"
     }
   ]
-}
+}

Web/src/views/home/widgets/components/about.vue

@@ -16,14 +16,12 @@
 
 <script lang="ts">
 export default {
-  title: '关于项目',
+	title: '关于项目',
 	icon: 'ele-Setting',
-	description: '点个星星支持一下'
-}
-</script>
-<script setup lang="ts" name="about">
-
+	description: '点个星星支持一下',
+};
 </script>
+<script setup lang="ts" name="about"></script>
 
 <style scoped>
 .item-background p {

Web/src/views/home/widgets/components/index.ts

@@ -1,22 +1,22 @@
-import { markRaw } from 'vue'
+import { markRaw } from 'vue';
 // 定义组件类型
-type Component = any
+type Component = any;
 
-const resultComps: Record<string, Component> = {}
+const resultComps: Record<string, Component> = {};
 
 // 使用 import.meta.glob 动态导入当前目录中的所有 .vue 文件，急切导入
-const requireComponent = import.meta.glob('./*.vue', { eager: true })
-console.log(requireComponent)
+const requireComponent = import.meta.glob('./*.vue', { eager: true });
+console.log(requireComponent);
 
 Object.keys(requireComponent).forEach((fileName: string) => {
-    // 处理文件名，去掉开头的 './' 和结尾的文件扩展名
-    const componentName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
-    // 确保模块导出存在并且是默认导出
-    const componentModule = requireComponent[fileName] as { default: Component }
-    // 将组件添加到 resultComps 中，使用处理后的文件名作为键
-    resultComps[componentName] = componentModule.default
-})
+	// 处理文件名，去掉开头的 './' 和结尾的文件扩展名
+	const componentName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1');
+	// 确保模块导出存在并且是默认导出
+	const componentModule = requireComponent[fileName] as { default: Component };
+	// 将组件添加到 resultComps 中，使用处理后的文件名作为键
+	resultComps[componentName] = componentModule.default;
+});
 // 动态的，这里拿到title等东西是为了这里显示
 
 // 标记 resultComps 为原始对象，避免其被设为响应式
-export default markRaw(resultComps)
+export default markRaw(resultComps);

Web/src/views/home/widgets/components/myapp.vue

@@ -4,11 +4,11 @@
 			<!-- <li v-for="mod in myMods" :key="mod.path" :style="{ background:mod.meta.color||'#eeeeee'}"> -->
 			<li v-for="mod in myMods" :key="mod.path">
 				<a v-if="mod.meta.type == 'link'" :href="mod.path" target="_blank">
-					<SvgIcon :name="mod.meta.icon" style="font-size: 18px;" />
+					<SvgIcon :name="mod.meta.icon" style="font-size: 18px" />
 					<p>{{ mod.meta.title }}</p>
 				</a>
 				<router-link v-else :to="{ path: mod.path }">
-					<SvgIcon :name="mod.meta.icon" style="font-size: 18px;" />
+					<SvgIcon :name="mod.meta.icon" style="font-size: 18px" />
 					<p>{{ mod.meta.title }}</p>
 				</router-link>
 			</li>
@@ -22,18 +22,10 @@
 		<el-drawer title="添加应用" v-model="modsDrawer" :size="520" destroy-on-close :before-close="beforeClose">
 			<div class="setMods mt15">
 				<h4>我的常用 ( {{ myMods.length }} )</h4>
-				<draggable tag="ul"
-					v-model="myMods"
-					animation="200"
-					item-key="path"
-					group="app"
-					class="draggable-box"
-					force-fallback
-					fallback-on-body
-				>
+				<draggable tag="ul" v-model="myMods" animation="200" item-key="path" group="app" class="draggable-box" force-fallback fallback-on-body>
 					<template #item="{ element }">
 						<li>
-							<SvgIcon :name="element.meta.icon" style="font-size: 18px;" />
+							<SvgIcon :name="element.meta.icon" style="font-size: 18px" />
 							<p>{{ element.meta.title }}</p>
 						</li>
 					</template>
@@ -41,19 +33,10 @@
 			</div>
 			<div class="setMods">
 				<h4>全部应用 ( {{ filterMods.length }} )</h4>
-				<draggable
-					tag="ul"
-					v-model="filterMods"
-					animation="200"
-					item-key="path"
-					group="app"
-					class="draggable-box"
-					force-fallback
-					fallback-on-body
-				>
+				<draggable tag="ul" v-model="filterMods" animation="200" item-key="path" group="app" class="draggable-box" force-fallback fallback-on-body>
 					<template #item="{ element }">
 						<li :style="{ background: element.meta.color || '#909399' }">
-							<SvgIcon :name="element.meta.icon" style="font-size: 18px;" />
+							<SvgIcon :name="element.meta.icon" style="font-size: 18px" />
 							<p>{{ element.meta.title }}</p>
 						</li>
 					</template>
@@ -69,79 +52,79 @@
 
 <script lang="ts">
 export default {
-	title: "快捷入口",
-	icon: "ele-Monitor",
-	description: "可以配置的快捷入口"
-}
+	title: '快捷入口',
+	icon: 'ele-Monitor',
+	description: '可以配置的快捷入口',
+};
 </script>
 
 <script setup lang="ts" name="myapp">
-import draggable from 'vuedraggable'
-import { onMounted, ref } from 'vue'
-import { Local } from '/@/utils/storage'
-import { useRequestOldRoutes } from '/@/stores/requestOldRoutes'
-import { ElMessage } from 'element-plus'
+import draggable from 'vuedraggable';
+import { onMounted, ref } from 'vue';
+import { Local } from '/@/utils/storage';
+import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
+import { ElMessage } from 'element-plus';
 
-const mods = ref<any>([]) // 所有应用
-const myMods = ref<any>([]) // 我的常用
-const myModsName = ref<any>([]) // 我的常用
-const filterMods = ref<any>([]) // 过滤我的常用后的应用
-const modsDrawer = ref<boolean>(false)
+const mods = ref<any>([]); // 所有应用
+const myMods = ref<any>([]); // 我的常用
+const myModsName = ref<any>([]); // 我的常用
+const filterMods = ref<any>([]); // 过滤我的常用后的应用
+const modsDrawer = ref<boolean>(false);
 
 onMounted(() => {
-	getMods()
-})
+	getMods();
+});
 
 const addMods = () => {
-	modsDrawer.value = true
-}
+	modsDrawer.value = true;
+};
 
 const getMods = () => {
-	myModsName.value = Local.get('my-mods') || []
-	var menuTree = useRequestOldRoutes().requestOldRoutes || []
-	filterMenu(menuTree)
+	myModsName.value = Local.get('my-mods') || [];
+	var menuTree = useRequestOldRoutes().requestOldRoutes || [];
+	filterMenu(menuTree);
 	myMods.value = mods.value.filter((item: any) => {
 		return myModsName.value.includes(item.name);
-	})
-	
+	});
+
 	filterMods.value = mods.value.filter((item: any) => {
-		return !myModsName.value.includes(item.name)
-	})
-}
+		return !myModsName.value.includes(item.name);
+	});
+};
 
 // 递归拿到所有可显示非iframe的2级菜单
 const filterMenu = (map: any) => {
 	map.forEach((item: any) => {
 		if (item.meta.isHide || item.type == 3 || item.status != 1) {
-			return false
+			return false;
 		}
 		if (item.meta.isIframe) {
-			item.path = `/i/${item.name}`
+			item.path = `/i/${item.name}`;
 		}
 		if (item.children && item.children.length > 0) {
-			filterMenu(item.children)
+			filterMenu(item.children);
 		} else {
-			mods.value.push(item)
+			mods.value.push(item);
 		}
-	})
-}
+	});
+};
 
 // 保存我的常用
 const saveMods = () => {
-	const myModsName = myMods.value.map((v: any) => v.name)
-	Local.set('my-mods', myModsName)
-	ElMessage.success('设置常用成功')
-	modsDrawer.value = false
-}
+	const myModsName = myMods.value.map((v: any) => v.name);
+	Local.set('my-mods', myModsName);
+	ElMessage.success('设置常用成功');
+	modsDrawer.value = false;
+};
 
 // 取消
 const beforeClose = () => {
-	myModsName.value = Local.get('my-mods') || []
+	myModsName.value = Local.get('my-mods') || [];
 	myMods.value = mods.value.filter((item: any) => {
 		return myModsName.value.includes(item.name);
-	})
-	modsDrawer.value = false
-}
+	});
+	modsDrawer.value = false;
+};
 </script>
 
 <style scoped lang="scss">
@@ -203,7 +186,7 @@ const beforeClose = () => {
 
 .draggable-box {
 	border: 1px dashed var(--el-color-primary);
-	padding: 15px
+	padding: 15px;
 }
 
 .setMods {

Web/src/views/home/widgets/components/progressing.vue

@@ -15,12 +15,11 @@
 export default {
 	title: '进度环',
 	icon: 'ele-Odometer',
-	description: '进度环原子组件演示'
-}
+	description: '进度环原子组件演示',
+};
 </script>
 
-<script setup lang="ts" name="progressing">
-</script>
+<script setup lang="ts" name="progressing"></script>
 
 <style scoped>
 .progress {

Web/src/views/home/widgets/components/timeing.vue

@@ -11,33 +11,32 @@
 export default {
 	title: '时钟',
 	icon: 'ele-Timer',
-	description: '时钟原子组件演示'
-}
+	description: '时钟原子组件演示',
+};
 </script>
 
 <script setup lang="ts" name="timeing">
-import { formatDate } from '/@/utils/formatTime'
-import { ref, onMounted, onUnmounted } from 'vue'
-const time = ref<string>('')
-const day = ref<string>('')
-const timer = ref<any>(null)
+import { formatDate } from '/@/utils/formatTime';
+import { ref, onMounted, onUnmounted } from 'vue';
+const time = ref<string>('');
+const day = ref<string>('');
+const timer = ref<any>(null);
 
 onMounted(() => {
-	showTime()
-	timer.value =setInterval(() => {
-		showTime()
-	}, 1000)
-})
+	showTime();
+	timer.value = setInterval(() => {
+		showTime();
+	}, 1000);
+});
 
 onUnmounted(() => {
-	clearInterval(timer.value)
-})
+	clearInterval(timer.value);
+});
 
 const showTime = () => {
-	time.value = formatDate(new Date(), 'HH:MM:SS')
-	day.value = formatDate(new Date(), 'YYYY年mm月dd日')
-}
-
+	time.value = formatDate(new Date(), 'HH:MM:SS');
+	day.value = formatDate(new Date(), 'YYYY年mm月dd日');
+};
 </script>
 
 <style scoped>

Web/src/views/home/widgets/components/ver.vue

@@ -16,30 +16,29 @@
 export default {
 	title: '版本信息',
 	icon: 'ele-Monitor',
-	description: '版本信息原子组件演示'
-}
+	description: '版本信息原子组件演示',
+};
 </script>
 
 <script setup lang="ts" name="ver">
-import { ref, onMounted } from 'vue'
-import verSvg from '/@/assets/img/ver.svg'
+import { ref, onMounted } from 'vue';
+import verSvg from '/@/assets/img/ver.svg';
 
-const ver = ref<string>('loading...')
+const ver = ref<string>('loading...');
 
 onMounted(() => {
-	ver.value = '11'
-})
+	ver.value = '11';
+});
 
 const getVer = () => {
-	ver.value = '11'
-}
+	ver.value = '11';
+};
 
 const golog = () => {
-	window.open('https://gitee.com/zuohuaijun/Admin.NET/issues')
-}
+	window.open('https://gitee.com/zuohuaijun/Admin.NET/issues');
+};
 
 const gogit = () => {
-	window.open('https://gitee.com/zuohuaijun/Admin.NET.git')
-}
-
+	window.open('https://gitee.com/zuohuaijun/Admin.NET.git');
+};
 </script>

Web/src/views/home/widgets/components/welcome.vue

@@ -36,16 +36,14 @@
 export default {
 	title: '欢迎',
 	icon: 'ele-Present',
-	description: '项目特色以及文档链接'
-}
+	description: '项目特色以及文档链接',
+};
 </script>
 
 <script setup lang="ts" name="welcome">
-
 const godoc = () => {
-	window.open('https://gitee.com/zuohuaijun/Admin.NET.git')
-}
-
+	window.open('https://gitee.com/zuohuaijun/Admin.NET.git');
+};
 </script>
 
 <style scoped>

Web/src/views/home/widgets/index.vue

@@ -1,216 +1,215 @@
 <template>
-  <div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
-    <div class="widgets-content">
-      <div class="widgets-top">
-        <div class="widgets-top-title">控制台</div>
-        <div class="widgets-top-actions">
-          <el-button v-if="customizing" type="primary" icon="ele-Check" round @click="save">完成</el-button>
-          <el-button v-else type="primary" icon="ele-Edit" round @click="custom">自定义</el-button>
-        </div>
-      </div>
-      <div class="widgets" ref="widgetsRef">
-        <div class="widgets-wrapper">
-          <div v-if="nowCompsList.length <= 0" class="no-widgets">
-            <el-empty description="没有部件啦" :image-size="300"></el-empty>
-          </div>
-          <el-row :gutter="15">
-            <el-col v-for="(item, index) in grid.layout" :key="index" :md="item" :xs="24">
-              <draggable
-                v-model="grid.copmsList[index]"
-                animation="200"
-                handle=".customize-overlay"
-                group="people"
-                item-key="com"
-                drag-class="aaaaa"
-                force-fallback
-                fallback-on-body
-                class="draggable-box"
-              >
-                <template #item="{ element }">
-                  <div class="widgets-item mb15">
-                    <component :is="allComps[element]"></component>
-                    <div v-if="customizing" class="customize-overlay">
-                      <el-button class="close" type="danger" plain icon="ele-Close" @click="remove(element)"></el-button>
-                      <label>
-                        <el-icon><component :is="allComps[element].icon" /></el-icon>{{ allComps[element].title }}
-                      </label>
-                    </div>
-                  </div>
-                </template>
-              </draggable>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-    </div>
-    <div v-if="customizing" class="widgets-aside">
-      <el-container>
-        <el-header>
-          <div class="widgets-aside-title">
-            <el-icon><ele-CirclePlusFilled /></el-icon>添加部件
-          </div>
-          <div class="widgets-aside-close" @click="close">
-            <el-icon><ele-Close /></el-icon>
-          </div>
-        </el-header>
-        <el-header style="height: auto">
-          <div class="selectLayout">
-            <div class="selectLayout-item item01" :class="{ active: grid.layout.join(',') === '12,6,6' }" @click="setLayout([12, 6, 6])">
-              <el-row :gutter="2">
-                <el-col :span="12"><span></span></el-col>
-                <el-col :span="6"><span></span></el-col>
-                <el-col :span="6"><span></span></el-col>
-              </el-row>
-            </div>
-            <div class="selectLayout-item item02" :class="{ active: grid.layout.join(',') === '24,16,8' }" @click="setLayout([24, 16, 8])">
-              <el-row :gutter="2">
-                <el-col :span="24"><span></span></el-col>
-                <el-col :span="16"><span></span></el-col>
-                <el-col :span="8"><span></span></el-col>
-              </el-row>
-            </div>
-            <div class="selectLayout-item item03" :class="{ active: grid.layout.join(',') === '24' }" @click="setLayout([24])">
-              <el-row :gutter="2">
-                <el-col :span="24"><span></span></el-col>
-                <el-col :span="24"><span></span></el-col>
-                <el-col :span="24"><span></span></el-col>
-              </el-row>
-            </div>
-          </div>
-        </el-header>
-        <el-main class="nopadding">
-          <div class="widgets-list">
-            <div v-if="myCompsList.length <= 0" class="widgets-list-nodata">
-              <el-empty description="没有部件啦" :image-size="60"></el-empty>
-            </div>
-            <div v-for="item in myCompsList" :key="item.title" class="widgets-list-item">
-              <div class="item-logo">
-                <el-icon><component :is="item.icon" /></el-icon>
-              </div>
-              <div class="item-info">
-                <h2>{{ item.title }}</h2>
-                <p>{{ item.description }}</p>
-              </div>
-              <div class="item-actions">
-                <el-button type="primary" icon="ele-Plus" @click="push(item)"></el-button>
-              </div>
-            </div>
-          </div>
-        </el-main>
-        <el-footer style="height: 51px">
-          <el-button @click="backDefault">恢复默认</el-button>
-        </el-footer>
-      </el-container>
-    </div>
-  </div>
+	<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
+		<div class="widgets-content">
+			<div class="widgets-top">
+				<div class="widgets-top-title">控制台</div>
+				<div class="widgets-top-actions">
+					<el-button v-if="customizing" type="primary" icon="ele-Check" round @click="save">完成</el-button>
+					<el-button v-else type="primary" icon="ele-Edit" round @click="custom">自定义</el-button>
+				</div>
+			</div>
+			<div class="widgets" ref="widgetsRef">
+				<div class="widgets-wrapper">
+					<div v-if="nowCompsList.length <= 0" class="no-widgets">
+						<el-empty description="没有部件啦" :image-size="300"></el-empty>
+					</div>
+					<el-row :gutter="15">
+						<el-col v-for="(item, index) in grid.layout" :key="index" :md="item" :xs="24">
+							<draggable
+								v-model="grid.copmsList[index]"
+								animation="200"
+								handle=".customize-overlay"
+								group="people"
+								item-key="com"
+								drag-class="aaaaa"
+								force-fallback
+								fallback-on-body
+								class="draggable-box"
+							>
+								<template #item="{ element }">
+									<div class="widgets-item mb15">
+										<component :is="allComps[element]"></component>
+										<div v-if="customizing" class="customize-overlay">
+											<el-button class="close" type="danger" plain icon="ele-Close" @click="remove(element)"></el-button>
+											<label>
+												<el-icon><component :is="allComps[element].icon" /></el-icon>{{ allComps[element].title }}
+											</label>
+										</div>
+									</div>
+								</template>
+							</draggable>
+						</el-col>
+					</el-row>
+				</div>
+			</div>
+		</div>
+		<div v-if="customizing" class="widgets-aside">
+			<el-container>
+				<el-header>
+					<div class="widgets-aside-title">
+						<el-icon><ele-CirclePlusFilled /></el-icon>添加部件
+					</div>
+					<div class="widgets-aside-close" @click="close">
+						<el-icon><ele-Close /></el-icon>
+					</div>
+				</el-header>
+				<el-header style="height: auto">
+					<div class="selectLayout">
+						<div class="selectLayout-item item01" :class="{ active: grid.layout.join(',') === '12,6,6' }" @click="setLayout([12, 6, 6])">
+							<el-row :gutter="2">
+								<el-col :span="12"><span></span></el-col>
+								<el-col :span="6"><span></span></el-col>
+								<el-col :span="6"><span></span></el-col>
+							</el-row>
+						</div>
+						<div class="selectLayout-item item02" :class="{ active: grid.layout.join(',') === '24,16,8' }" @click="setLayout([24, 16, 8])">
+							<el-row :gutter="2">
+								<el-col :span="24"><span></span></el-col>
+								<el-col :span="16"><span></span></el-col>
+								<el-col :span="8"><span></span></el-col>
+							</el-row>
+						</div>
+						<div class="selectLayout-item item03" :class="{ active: grid.layout.join(',') === '24' }" @click="setLayout([24])">
+							<el-row :gutter="2">
+								<el-col :span="24"><span></span></el-col>
+								<el-col :span="24"><span></span></el-col>
+								<el-col :span="24"><span></span></el-col>
+							</el-row>
+						</div>
+					</div>
+				</el-header>
+				<el-main class="nopadding">
+					<div class="widgets-list">
+						<div v-if="myCompsList.length <= 0" class="widgets-list-nodata">
+							<el-empty description="没有部件啦" :image-size="60"></el-empty>
+						</div>
+						<div v-for="item in myCompsList" :key="item.title" class="widgets-list-item">
+							<div class="item-logo">
+								<el-icon><component :is="item.icon" /></el-icon>
+							</div>
+							<div class="item-info">
+								<h2>{{ item.title }}</h2>
+								<p>{{ item.description }}</p>
+							</div>
+							<div class="item-actions">
+								<el-button type="primary" icon="ele-Plus" @click="push(item)"></el-button>
+							</div>
+						</div>
+					</div>
+				</el-main>
+				<el-footer style="height: 51px">
+					<el-button @click="backDefault">恢复默认</el-button>
+				</el-footer>
+			</el-container>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, nextTick } from 'vue'
-import draggable from 'vuedraggable'
-import allComps from './components/index'
-import { Local } from '/@/utils/storage'
+import { ref, reactive, computed, onMounted, nextTick } from 'vue';
+import draggable from 'vuedraggable';
+import allComps from './components/index';
+import { Local } from '/@/utils/storage';
 
 interface Grid {
-  layout: number[]
-  copmsList: string[][]
+	layout: number[];
+	copmsList: string[][];
 }
 const defaultGrid = reactive<Grid>({
-  layout: [12, 6, 6],
-  copmsList: [['welcome'], ['about', 'ver'], ['timeing', 'progressing']]
-})
+	layout: [12, 6, 6],
+	copmsList: [['welcome'], ['about', 'ver'], ['timeing', 'progressing']],
+});
 
-const customizing = ref<boolean>(false)
-const allCompsList = ref(allComps)
-const widgetsRef = ref<HTMLElement | null>(null)
-const grid = ref<Grid>(defaultGrid)
-  
+const customizing = ref<boolean>(false);
+const allCompsList = ref(allComps);
+const widgetsRef = ref<HTMLElement | null>(null);
+const grid = ref<Grid>(defaultGrid);
 
 onMounted(() => {
-  const savedGrid = Local.get('grid')
-  if (savedGrid) {
-    grid.value = savedGrid
-  }
-})
+	const savedGrid = Local.get('grid');
+	if (savedGrid) {
+		grid.value = savedGrid;
+	}
+});
 
 const availableCompsList = computed(() => {
-  const compsList = []
-  for (const key in allCompsList.value) {
-    const comp = allCompsList.value[key]
-    compsList.push({
-      key,
-      title: comp.title,
-      icon: comp.icon,
-      description: comp.description,
-    })
-  }
-  const activeComps = grid.value.copmsList.flat()
-  return compsList.map(comp => ({
-    ...comp,
-    disabled: activeComps.includes(comp.key),
-  }))
-})
+	const compsList = [];
+	for (const key in allCompsList.value) {
+		const comp = allCompsList.value[key];
+		compsList.push({
+			key,
+			title: comp.title,
+			icon: comp.icon,
+			description: comp.description,
+		});
+	}
+	const activeComps = grid.value.copmsList.flat();
+	return compsList.map((comp) => ({
+		...comp,
+		disabled: activeComps.includes(comp.key),
+	}));
+});
 
 const myCompsList = computed(() => {
-  const myGrid = Local.get('DASHBOARDGRID') || ['welcome', 'myapp', 'ver', 'timeing', 'progressing', 'echarts', 'about']
-  return availableCompsList.value.filter(comp => !comp.disabled && myGrid.includes(comp.key))
-})
+	const myGrid = Local.get('DASHBOARDGRID') || ['welcome', 'myapp', 'ver', 'timeing', 'progressing', 'echarts', 'about'];
+	return availableCompsList.value.filter((comp) => !comp.disabled && myGrid.includes(comp.key));
+});
 
-const nowCompsList = computed(() => grid.value.copmsList.flat())
+const nowCompsList = computed(() => grid.value.copmsList.flat());
 
 // 开启自定义
 const custom = () => {
-  customizing.value = true
-  const oldWidth = widgetsRef.value?.offsetWidth || 0
-  nextTick(() => {
-    if (widgetsRef.value) {
-      const scale = widgetsRef.value.offsetWidth / oldWidth;
-      widgetsRef.value.style.setProperty('transform', `scale(${scale})`)
-    }
-  })
-}
+	customizing.value = true;
+	const oldWidth = widgetsRef.value?.offsetWidth || 0;
+	nextTick(() => {
+		if (widgetsRef.value) {
+			const scale = widgetsRef.value.offsetWidth / oldWidth;
+			widgetsRef.value.style.setProperty('transform', `scale(${scale})`);
+		}
+	});
+};
 
 // 设置布局
 const setLayout = (layout: number[]) => {
-  grid.value.layout = layout;
-  if (layout.join(',') === '24') {
-    grid.value.copmsList[0] = [...grid.value.copmsList[0], ...grid.value.copmsList[1], ...grid.value.copmsList[2]]
-    grid.value.copmsList[1] = []
-    grid.value.copmsList[2] = []
-  }
-}
+	grid.value.layout = layout;
+	if (layout.join(',') === '24') {
+		grid.value.copmsList[0] = [...grid.value.copmsList[0], ...grid.value.copmsList[1], ...grid.value.copmsList[2]];
+		grid.value.copmsList[1] = [];
+		grid.value.copmsList[2] = [];
+	}
+};
 
 // 追加
 const push = (item: any) => {
-  grid.value.copmsList[0].push(item.key)
-}
+	grid.value.copmsList[0].push(item.key);
+};
 
 // 隐藏组件
 const remove = (item: string) => {
-  grid.value.copmsList = grid.value.copmsList.map(list => list.filter(comp => comp !== item));
-}
+	grid.value.copmsList = grid.value.copmsList.map((list) => list.filter((comp) => comp !== item));
+};
 
 // 保存
 const save = () => {
-  customizing.value = false
-  widgetsRef.value?.style.removeProperty('transform')
-  Local.set('grid', grid.value)
-}
+	customizing.value = false;
+	widgetsRef.value?.style.removeProperty('transform');
+	Local.set('grid', grid.value);
+};
 
 // 恢复默认
 const backDefault = () => {
-  customizing.value = false
-  widgetsRef.value?.style.removeProperty('transform')
-  grid.value = JSON.parse(JSON.stringify(defaultGrid))
-  Local.remove('grid')
-}
+	customizing.value = false;
+	widgetsRef.value?.style.removeProperty('transform');
+	grid.value = JSON.parse(JSON.stringify(defaultGrid));
+	Local.remove('grid');
+};
 
 // 关闭
 const close = () => {
-  customizing.value = false
-  widgetsRef.value?.style.removeProperty('transform')
-  grid.value = Local.get('grid')
-}
+	customizing.value = false;
+	widgetsRef.value?.style.removeProperty('transform');
+	grid.value = Local.get('grid');
+};
 </script>
 
 <style scoped lang="scss">
@@ -435,4 +434,4 @@ const close = () => {
 		margin-right: 0;
 	}
 }
-</style>
+</style>