优化代码

2024-12-22 12:58:55 +08:00 · 2023-03-28 16:00:02 +08:00 · 2023-03-28 16:00:02 +08:00 · eb41ccb3e2
commit eb41ccb3e2
parent b03696ad78
14 changed files with 226 additions and 200 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -12,8 +12,8 @@
 				"@chenfengyuan/vue-qrcode": "^2.0.0",
 				"@element-plus/icons-vue": "^2.0.10",
 				"@highlightjs/vue-plugin": "^2.1.0",
-				"@wangeditor/editor": "^5.1.23",
-				"@wangeditor/editor-for-vue": "^5.1.12",
+				"@wangeditor/editor": "5.1.23",
+				"@wangeditor/editor-for-vue": "5.1.12",
 				"axios": "^1.3.3",
 				"crypto-js": "^3.1.9-1",
 				"echarts": "^5.4.1",
@ -28,6 +28,7 @@
 				"qs": "^6.11.0",
 				"screenfull": "^6.0.2",
 				"sortablejs": "^1.15.0",
+				"splitpanes": "^3.1.5",
 				"vue": "^3.2.47",
 				"vue-clipboard3": "^2.0.0",
 				"vue-i18n": "^9.2.2",
@ -3707,6 +3708,12 @@
 			"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
 			"license": "MIT"
 		},
+		"node_modules/splitpanes": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmmirror.com/splitpanes/-/splitpanes-3.1.5.tgz",
+			"integrity": "sha512-r3Mq2ITFQ5a2VXLOy4/Sb2Ptp7OfEO8YIbhVJqJXoFc9hc5nTXXkCvtVDjIGbvC0vdE7tse+xTM9BMjsszP6bw==",
+			"license": "MIT"
+		},
 		"node_modules/ssr-window": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz",
@ -7183,6 +7190,11 @@
 			"resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
 			"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
 		},
+		"splitpanes": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmmirror.com/splitpanes/-/splitpanes-3.1.5.tgz",
+			"integrity": "sha512-r3Mq2ITFQ5a2VXLOy4/Sb2Ptp7OfEO8YIbhVJqJXoFc9hc5nTXXkCvtVDjIGbvC0vdE7tse+xTM9BMjsszP6bw=="
+		},
 		"ssr-window": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -14,7 +14,6 @@
 		"@chenfengyuan/vue-qrcode": "^2.0.0",
 		"@element-plus/icons-vue": "^2.0.10",
 		"@highlightjs/vue-plugin": "^2.1.0",
-		"@wangeditor/editor": "5.1.23",
 		"@wangeditor/editor-for-vue": "5.1.12",
 		"axios": "^1.3.3",
 		"crypto-js": "^3.1.9-1",
@ -30,6 +29,7 @@
 		"qs": "^6.11.0",
 		"screenfull": "^6.0.2",
 		"sortablejs": "^1.15.0",
+		"splitpanes": "^3.1.5",
 		"vue": "^3.2.47",
 		"vue-clipboard3": "^2.0.0",
 		"vue-i18n": "^9.2.2",
--- a/src/components/ShortcutCard/index.vue
+++ b/src/components/ShortcutCard/index.vue
@ -0,0 +1,88 @@
+<template>
+	<div class="container">
+		<el-tag :color="randomColor()" class="container-tag">
+			<SvgIcon :name="props.icon" />
+		</el-tag>
+		<span class="container-span">{{ $t(props.label) }}</span>
+	</div>
+</template>
+
+<script setup name="shortcut">
+const props = defineProps({
+	icon: {
+		type: String,
+		default: () => 'menu-outlined',
+		required: false,
+	},
+	label: {
+		type: String,
+		default: () => '快捷方式',
+		required: false,
+	},
+	color: {
+		type: String,
+		default: () => '',
+		required: false,
+	},
+});
+// 颜色列表
+const colorList = ['#7265E6', '#FFBF00', '#00A2AE', '#F56A00', '#1890FF', '#606D80'];
+// 获取随机颜色
+const randomColor = () => {
+	if (props.color) {
+		return props.color;
+	}
+	return colorList[randomNum(0, colorList.length - 1)];
+};
+// 获取minNum到maxNum内的随机数
+const randomNum = (minNum, maxNum) => {
+	switch (arguments.length) {
+		case 1:
+			return parseInt(Math.random() * minNum + 1, 10);
+			// eslint-disable-next-line no-unreachable
+			break;
+		case 2:
+			return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+			// eslint-disable-next-line no-unreachable
+			break;
+		default:
+			return 0;
+			// eslint-disable-next-line no-unreachable
+			break;
+	}
+};
+</script>
+
+<style scoped>
+.container {
+	height: 60px;
+	/*border:1px solid var(--border-color-split);*/
+	border-radius: 5px;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	/*实现渐变（时间变化效果）*/
+	-webkit-transition: all 0.5s;
+	-moz-transition: all 0.5s;
+	-ms-transition: all 0.5s;
+	-o-transition: all 0.5s;
+	transition: all 0.5s;
+}
+.container:hover {
+	background: var(--border-color-split);
+}
+.container-tag {
+	width: 42px;
+	height: 42px;
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+	margin-left: 10px;
+	font-size: 24px;
+}
+
+.container-span {
+	max-width: 60%;
+	font-weight: 500;
+}
+</style>
--- a/src/stores/userInfo.ts
+++ b/src/stores/userInfo.ts
@ -47,7 +47,7 @@ export const useUserInfo = defineStore('userInfo', {
 						resolve(res);
 					})
 					.catch((err) => {
-						useMessage().error(err.msg);
+						useMessage().error('服务器异常，请联系管理员');
 						reject(err);
 					});
 			});
--- a/src/views/admin/log/index.vue
+++ b/src/views/admin/log/index.vue
@ -40,13 +40,7 @@
 					></right-toolbar>
 				</div>
 			</el-row>
-			<el-table
-				:data="state.dataList"
-				@selection-change="handleSelectionChange"
-				@sort-change="sortChangeHandle"
-				style="width: 100%"
-				v-loading="state.loading"
-			>
+			<el-table :data="state.dataList" @selection-change="handleSelectionChange" @sort-change="sortChangeHandle" v-loading="state.loading">
 				<el-table-column align="center" type="selection" width="50" />
 				<el-table-column :label="$t('syslog.index')" type="index" width="80" />
 				<el-table-column :label="$t('syslog.logType')" show-overflow-tooltip>
--- a/src/views/admin/tenant/form.vue
+++ b/src/views/admin/tenant/form.vue
@ -149,18 +149,21 @@ const onSubmit = async () => {
 	}
 };

-// 初始化表格数据
-const getTenantData = (id: string) => {
-	// 获取部门数据
-	getObj(id).then((res: any) => {
-		Object.assign(form, res.data);
-	});
+/**
+ * 初始化表格数据。
+ * @param {string} id - 部门 ID。
+ */
+const getTenantData = async (id) => {
+	const res = await getObj(id);
+	Object.assign(form, res.data);
 };

-const getMenuList = () => {
-	menuList().then((res: any) => {
-		menuData.value = res.data;
-	});
+/**
+ * 获取菜单列表数据。
+ */
+const getMenuList = async () => {
+	const res = await menuList();
+	menuData.value = res.data;
 };

 // 暴露变量
--- a/src/views/admin/tenant/tenantMenu/form.vue
+++ b/src/views/admin/tenant/tenantMenu/form.vue
@ -20,7 +20,6 @@
 							show-checkbox
 							ref="menuTreeRef"
 							:check-strictly="false"
-							v-loading="treeLoading"
 							:data="menuData"
 							:props="defaultProps"
 							:default-checked-keys="checkedMenu"
@ -117,6 +116,8 @@ const onSubmit = async () => {
 	if (!valid) return false;

 	try {
+		// 获取已经选择的节点
+		form.menuIds = [...menuTreeRef.value.getCheckedKeys(), ...menuTreeRef.value.getHalfCheckedKeys()].join(',');
 		form.id ? await putObj(form) : await addObj(form);
 		useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText'));
 		visible.value = false;
@ -126,25 +127,22 @@ const onSubmit = async () => {
 	}
 };

-const treeLoading = ref(false);
-const getMenuData = () => {
-	treeLoading.value = true;
-	treemenu().then((res) => {
-		menuData.value = res.data;
-		if (form.menuIds) {
-			checkedMenu.value = other.resolveAllEunuchNodeId(menuData.value, form.menuIds.split(','), []);
-		} else {
-			checkedMenu.value = [];
-		}
-		treeLoading.value = false;
-	});
+/**
+ * 获取菜单数据
+ */
+const getMenuData = async () => {
+	const res = await treemenu();
+	menuData.value = res.data;
+	checkedMenu.value = form.menuIds ? other.resolveAllEunuchNodeId(menuData.value, form.menuIds.split(','), []) : [];
 };

-const getTenantMenuData = (id: string) => {
-	// 获取部门数据
-	getObj(id).then((res: any) => {
-		Object.assign(form, res.data[0]);
-	});
+/**
+ * 获取部门下的菜单数据
+ * @param {string} id - 部门 ID
+ */
+const getTenantMenuData = async (id: string) => {
+	const res = await getObj(id);
+	Object.assign(form, res.data[0]);
 };

 // 暴露变量
--- a/src/views/admin/tenant/tenantMenu/index.vue
+++ b/src/views/admin/tenant/tenantMenu/index.vue
@ -53,7 +53,10 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 });
 const { getDataList, currentChangeHandle, sizeChangeHandle } = useTable(state);

-
+/**
+ * 处理删除事件。
+ * @param {Object} row - 要删除的数据行对象。
+ */
 const handleDelete = async (row: any) => {
 	try {
 		await useMessageBox().confirm(t('common.delConfirmText'));
--- a/src/views/home/current-user.vue
+++ b/src/views/home/current-user.vue
@ -1,16 +1,18 @@
 <template>
-	<el-row>
-		<el-skeleton animated :loading="loading">
-			<el-col :span="4">
-				<el-avatar shape="circle" :size="100" fit="cover" :src="userData.avatar" />
-			</el-col>
-			<el-col :span="2">
-				<div>{{ userData.name }}</div>
-				<div>{{ userData.deptName }} | {{ userData.postName }}</div>
-			</el-col>
-			<el-col :span="4" :offset="14"> {{ parseTime(date) }} </el-col>
-		</el-skeleton>
-	</el-row>
+	<el-card style="height: 100%">
+		<div style="display: flex; justify-content: space-between">
+			<div style="display: flex">
+				<el-avatar style="width: 60px; height: 60px" shape="circle" :size="100" fit="cover" :src="userData.avatar" />
+				<div class="snowy-index-card-left-one-username">
+					<span style="font-weight: 600; margin: 2px; font-size: 18px">{{ userData.name }}</span>
+					<span style="color: #6d737b; margin: 2px">{{ userData.deptName }} | {{ userData.postName }}</span>
+				</div>
+			</div>
+			<span style="margin: 2px">
+				{{ parseTime(date) }}
+			</span>
+		</div>
+	</el-card>
 </template>

 <script setup lang="ts" name="SysFavoriteDashboard">
@ -43,16 +45,24 @@ onMounted(() => {
 * @param {any} userId - 要查询的用户 ID。
 * @returns {Promise<void>} - 初始化用户信息的 Promise 实例。
 */
- const initUserInfo = async (userId: any): Promise<void> => {
-  try {
-    loading.value = true; // 显示加载状态
+const initUserInfo = async (userId: any): Promise<void> => {
+	try {
+		loading.value = true; // 显示加载状态

-    const res = await getObj(userId); // 执行查询操作
-    userData.value = res.data; // 将查询到的数据保存到 userData 变量中
-    userData.value.postName = res.data?.postList?.map((item: any) => item.postName).join(',') || ''; // 将 postList 中的 postName 合并成字符串并保存到 userData 变量中
-  } finally {
-    loading.value = false; // 结束加载状态
-  }
+		const res = await getObj(userId); // 执行查询操作
+		userData.value = res.data; // 将查询到的数据保存到 userData 变量中
+		userData.value.postName = res.data?.postList?.map((item: any) => item.postName).join(',') || ''; // 将 postList 中的 postName 合并成字符串并保存到 userData 变量中
+	} finally {
+		loading.value = false; // 结束加载状态
+	}
 };
-
 </script>
+
+<style scoped>
+.snowy-index-card-left-one-username {
+	margin-left: 8px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+</style>
--- a/src/views/home/favorite.vue
+++ b/src/views/home/favorite.vue
@ -1,30 +1,30 @@
 <template>
-	<div class="home-card-item-title">{{ $t('home.quickNavigationToolsTip') }}</div>
-	<div class="home-monitor">
-		<div class="flex-warp" v-if="favoriteRoutes.length > 0">
-			<div class="flex-warp-item" v-for="(v, k) in favoriteRoutes" :key="k">
-				<div class="flex-warp-item-box">
-					<div class="flex-margin">
-						<i :class="v.meta.icon"></i>
-						<el-tag :key="v.path" @click="HandleRoute(v)" class="mx-1" closable @close="handleCloseFavorite(v)">{{ $t(v.name) }}</el-tag>
-					</div>
-				</div>
+	<el-card class="box-card" style="height: 100%">
+		<template #header>
+			<div class="card-header">
+				<span>{{ $t('home.quickNavigationToolsTip') }}</span>
 			</div>
-		</div>
+		</template>
+		<el-row :gutter="10" v-if="favoriteRoutes.length > 0">
+			<el-col :span="6" :key="shortcut.id" v-for="shortcut in favoriteRoutes">
+				<shortcutCard :icon="shortcut.meta?.icon" :label="shortcut.name" @click="handleRoute(shortcut.path)" />
+			</el-col>
+		</el-row>
 		<el-empty :description="$t('home.addFavoriteRoutesTip')" v-else />
-	</div>
+	</el-card>
 </template>

 <script setup lang="ts" name="SysFavoriteDashboard">
 import { storeToRefs } from 'pinia';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import shortcutCard from '/@/components/ShortcutCard/index.vue';

 const router = useRouter();
 const storesTagsViewRoutes = useTagsViewRoutes();
 const { favoriteRoutes } = storeToRefs(storesTagsViewRoutes);

-const HandleRoute = (item: any) => {
-	router.push(item.path);
+const handleRoute = (path: string) => {
+	router.push(path);
 };

 const handleCloseFavorite = (item: any) => {
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -1,132 +1,50 @@
 <template>
-	<div class="home-container layout-pd">
-		<el-row :gutter="10">
-			<el-col :span="16">
-				<el-row :gutter="10">
-					<!-- 基本信息 -->
-					<el-col :span="24">
-						<div class="home-card-item">
-							<current-user />
-						</div>
-					</el-col>
-					<!-- 快捷导航栏 -->
-					<el-col :span="24">
-						<div class="home-card-item">
-							<favorite />
-						</div>
-					</el-col>
-					<!-- 系统日志 -->
-					<el-col :span="12">
-						<sys-log />
-					</el-col>
-					<!-- 审计日志 -->
-					<el-col :span="12">
-						<audit-log />
-					</el-col>
-				</el-row>
-			</el-col>
-			<el-col :span="8">
-				<el-row>
-					<!-- 日程 -->
-					<el-col :span="24">
-						<el-card class="box-card">
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<splitpanes horizontal class="default-theme">
+				<pane size="60">
+					<splitpanes>
+						<pane size="67">
+							<splitpanes horizontal>
+								<pane size="30">
+									<current-user />
+								</pane>
+								<pane size="70">
+									<favorite />
+								</pane>
+							</splitpanes>
+						</pane>
+						<pane size="33">
 							<schedule-calendar />
-						</el-card>
-					</el-col>
-					<!-- 收件箱 -->
-					<el-col :span="24">
-						<news-letter />
-					</el-col>
-				</el-row>
-			</el-col>
-		</el-row>
+						</pane>
+					</splitpanes>
+				</pane>
+				<pane size="40">
+					<splitpanes>
+						<pane>
+							<sys-log />
+						</pane>
+						<pane>
+							<audit-log />
+						</pane>
+						<pane>
+							<news-letter />
+						</pane>
+					</splitpanes>
+				</pane>
+			</splitpanes>
+		</div>
 	</div>
 </template>

 <script setup lang="ts" name="home">
-const Favorite = defineAsyncComponent(() => import('./favorite.vue'));
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
+
 const CurrentUser = defineAsyncComponent(() => import('./current-user.vue'));
-const NewsLetter = defineAsyncComponent(() => import('./newsletter.vue'));
+const Favorite = defineAsyncComponent(() => import('./favorite.vue'));
 const ScheduleCalendar = defineAsyncComponent(() => import('./schedule/calendar.vue'));
 const SysLog = defineAsyncComponent(() => import('./log-dashboard/sys-log.vue'));
 const AuditLog = defineAsyncComponent(() => import('./log-dashboard/audit-log.vue'));
+const NewsLetter = defineAsyncComponent(() => import('./newsletter.vue'));
 </script>
-
-<style scoped lang="scss">
-.el-col {
-	margin-bottom: 10px;
-	.card-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.text {
-		font-size: 14px;
-	}
-
-	.item {
-		margin-bottom: 18px;
-	}
-
-	.box-card {
-		width: 100%;
-	}
-}
-.home-container {
-	overflow: hidden;
-	.home-card-item {
-		width: 100%;
-		min-height: 130px;
-		border-radius: 4px;
-		transition: all ease 0.3s;
-		padding: 20px;
-		overflow: hidden;
-		background: var(--el-color-white);
-		color: var(--el-text-color-primary);
-		border: 1px solid var(--next-border-color-light);
-
-		.flex-warp-item-box {
-			margin: auto;
-			text-align: center;
-			color: var(--el-text-color-primary);
-			display: flex;
-			border-radius: 5px;
-			background: var(--next-bg-color);
-			cursor: pointer;
-			transition: all 0.3s ease;
-
-			&:hover {
-				background: var(--el-color-primary-light-9);
-				transition: all 0.3s ease;
-			}
-		}
-
-		&:hover {
-			box-shadow: 0 2px 12px var(--next-color-dark-hover);
-			transition: all ease 0.3s;
-		}
-
-		&-icon {
-			width: 70px;
-			height: 70px;
-			border-radius: 100%;
-			flex-shrink: 1;
-
-			i {
-				color: var(--el-text-color-placeholder);
-			}
-		}
-
-		&-title {
-			font-size: 15px;
-			font-weight: bold;
-			height: 30px;
-		}
-		.flex-warp-item {
-			width: 15%;
-			height: 56px;
-		}
-	}
-}
-</style>
--- a/src/views/home/log-dashboard/audit-log.vue
+++ b/src/views/home/log-dashboard/audit-log.vue
@ -1,5 +1,5 @@
 <template>
-	<el-card class="box-card">
+	<el-card class="box-card" style="height: 100%">
 		<template #header>
 			<div class="card-header">
 				<span>{{ $t('home.auditLogsTip') }}</span>
--- a/src/views/home/log-dashboard/sys-log.vue
+++ b/src/views/home/log-dashboard/sys-log.vue
@ -1,5 +1,5 @@
 <template>
-	<el-card class="box-card">
+	<el-card class="box-card" style="height: 100%">
 		<template #header>
 			<div class="card-header">
 				<span>{{ $t('home.systemLogsTip') }}</span>
--- a/src/views/home/schedule/calendar.vue
+++ b/src/views/home/schedule/calendar.vue
@ -1,7 +1,7 @@
 <template>
 	<el-calendar v-model="calendar">
 		<template #date-cell="{ data }">
-			<div style="width: 100%; height: 100%" @click="handleSchedule(data)">
+			<div style="width: 100%; height: 80%" @click="handleSchedule(data)">
 				{{ data.day.split('-').slice(2).join('-') }}
 				<span v-if="filterCellSelected(data)">
 					<el-icon><BellFilled /></el-icon>