优化仪表盘内容

src/pages/home/widgets/index.vue

@@ -5,11 +5,15 @@
 				<div class="widgets-top-title">控制台</div>
 				<div class="widgets-top-actions">
 					<a-button v-if="customizing" type="primary" shape="round" @click="handleSave">
-						<template #icon><CheckOutlined /></template>
+						<template #icon>
+							<CheckOutlined />
+						</template>
 						完成
 					</a-button>
 					<a-button v-else type="primary" shape="round" @click="handleCustom">
-						<template #icon><EditOutlined /></template>
+						<template #icon>
+							<EditOutlined />
+						</template>
 						自定义
 					</a-button>
 				</div>
@@ -20,33 +24,19 @@
 						<a-empty description="没有部件啦" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 					</div>
 					<a-row :gutter="15">
-						<a-col
-							v-for="(item, index) in grid.layout"
-							:key="index"
-							:md="item"
-							:xs="24"
-						>
+						<a-col v-for="(item, index) in grid.layout" :key="index" :md="item" :xs="24">
 							<div class="draggable-wrapper">
-								<draggable
-									v-model="grid.compsList[index]"
-									item-key="key"
-									:animation="200"
-									handle=".customize-overlay"
-									group="widgets"
-									class="draggable-box"
-								>
+								<draggable v-model="grid.compsList[index]" item-key="key" :animation="200"
+									handle=".customize-overlay" group="widgets" class="draggable-box">
 									<template #item="{ element }">
 										<div class="widgets-item">
 											<component :is="allComps[element]" />
 											<div v-if="customizing" class="customize-overlay">
-												<a-button
-													class="close"
-													type="primary"
-													ghost
-													shape="circle"
-													@click="removeComp(element)"
-												>
-													<template #icon><CloseOutlined /></template>
+												<a-button class="close" type="primary" ghost shape="circle"
+													@click="removeComp(element)">
+													<template #icon>
+														<CloseOutlined />
+													</template>
 												</a-button>
 												<label>
 													<component :is="allComps[element].icon" />
@@ -64,15 +54,8 @@
 		</div>
 
 		<!-- 自定义侧边栏 -->
-		<a-drawer
-			v-if="customizing"
-			:open="customizing"
-			:width="360"
-			placement="right"
-			:closable="false"
-			:mask="false"
-			class="widgets-drawer"
-		>
+		<a-drawer v-if="customizing" :open="customizing" :width="360" placement="right" :closable="false" :mask="false"
+			class="widgets-drawer">
 			<template #title>
 				<div class="widgets-aside-title">
 					<PlusCircleOutlined /> 添加部件
@@ -81,7 +64,9 @@
 
 			<template #extra>
 				<a-button type="text" @click="handleClose">
-					<template #icon><CloseOutlined /></template>
+					<template #icon>
+						<CloseOutlined />
+					</template>
 				</a-button>
 			</template>
 
@@ -89,33 +74,24 @@
 			<div class="select-layout">
 				<h3>选择布局</h3>
 				<div class="select-layout-options">
-					<div
-						class="select-layout-item item01"
-						:class="{ active: grid.layout.join(',') === '12,6,6' }"
-						@click="setLayout([12, 6, 6])"
-					>
+					<div class="select-layout-item item01" :class="{ active: grid.layout.join(',') === '12,6,6' }"
+						@click="setLayout([12, 6, 6])">
 						<a-row :gutter="2">
 							<a-col :span="12"><span></span></a-col>
 							<a-col :span="6"><span></span></a-col>
 							<a-col :span="6"><span></span></a-col>
 						</a-row>
 					</div>
-					<div
-						class="select-layout-item item02"
-						:class="{ active: grid.layout.join(',') === '24,16,8' }"
-						@click="setLayout([24, 16, 8])"
-					>
+					<div class="select-layout-item item02" :class="{ active: grid.layout.join(',') === '24,16,8' }"
+						@click="setLayout([24, 16, 8])">
 						<a-row :gutter="2">
 							<a-col :span="24"><span></span></a-col>
 							<a-col :span="16"><span></span></a-col>
 							<a-col :span="8"><span></span></a-col>
 						</a-row>
 					</div>
-					<div
-						class="select-layout-item item03"
-						:class="{ active: grid.layout.join(',') === '24' }"
-						@click="setLayout([24])"
-					>
+					<div class="select-layout-item item03" :class="{ active: grid.layout.join(',') === '24' }"
+						@click="setLayout([24])">
 						<a-row :gutter="2">
 							<a-col :span="24"><span></span></a-col>
 							<a-col :span="24"><span></span></a-col>
@@ -141,7 +117,9 @@
 					</div>
 					<div class="item-actions">
 						<a-button type="primary" @click="addComp(item)">
-							<template #icon><PlusOutlined /></template>
+							<template #icon>
+								<PlusOutlined />
+							</template>
 						</a-button>
 					</div>
 				</div>
@@ -158,90 +136,17 @@
 import { ref, reactive, computed, onMounted, nextTick } from 'vue'
 import { Empty } from 'ant-design-vue'
 import draggable from 'vuedraggable'
-import {
-	CheckOutlined,
-	EditOutlined,
-	CloseOutlined,
-	PlusCircleOutlined,
-	PlusOutlined,
-} from '@ant-design/icons-vue'
 import allComps from './components'
+import config from '@/config'
 
 // 定义组件名称
 defineOptions({
 	name: 'WidgetsPage',
 })
 
-// 定义组件元数据
-allComps.welcome.icon = 'GiftOutlined'
-allComps.welcome.title = '欢迎'
-allComps.welcome.description = '项目特色以及文档链接'
-
-allComps.info.icon = 'MonitorOutlined'
-allComps.info.title = '系统信息'
-allComps.info.description = '当前项目系统信息'
-
-allComps.about.icon = 'SettingOutlined'
-allComps.about.title = '关于项目'
-allComps.about.description = '点个星星支持一下'
-
-allComps.echarts.icon = 'LineChartOutlined'
-allComps.echarts.title = '实时收入'
-allComps.echarts.description = 'Echarts组件演示'
-
-allComps.progress.icon = 'DashboardOutlined'
-allComps.progress.title = '进度环'
-allComps.progress.description = '进度环原子组件演示'
-
-allComps.time.icon = 'ClockCircleOutlined'
-allComps.time.title = '时钟'
-allComps.time.description = '演示部件效果'
-
-allComps.sms.icon = 'MessageOutlined'
-allComps.sms.title = '短信统计'
-allComps.sms.description = '短信统计'
-
-allComps.ver.icon = 'FileTextOutlined'
-allComps.ver.title = '版本信息'
-allComps.ver.description = '当前项目版本信息'
-
-// 导入图标组件
-import {
-	GiftOutlined,
-	MonitorOutlined,
-	SettingOutlined as SettingIcon,
-	LineChartOutlined,
-	DashboardOutlined,
-	ClockCircleOutlined,
-	MessageOutlined,
-	FileTextOutlined,
-} from '@ant-design/icons-vue'
-
-// 图标映射
-const iconMap = {
-	GiftOutlined,
-	MonitorOutlined,
-	SettingOutlined: SettingIcon,
-	LineChartOutlined,
-	DashboardOutlined,
-	ClockCircleOutlined,
-	MessageOutlined,
-	FileTextOutlined,
-}
-
-// 替换组件中的icon引用
-Object.keys(allComps).forEach((key) => {
-	if (allComps[key].icon && typeof allComps[key].icon === 'string') {
-		allComps[key].icon = iconMap[allComps[key].icon] || GiftOutlined
-	}
-})
-
 const customizing = ref(false)
 const widgetsRef = ref(null)
-const defaultGrid = {
-	layout: [12, 6, 6],
-	compsList: [['welcome', 'info'], ['echarts', 'progress'], ['time', 'sms']],
-}
+const defaultGrid = config.DEFAULT_GRID
 const grid = reactive({ layout: [], compsList: [] })
 
 // 初始化
@@ -252,7 +157,7 @@ const initGrid = () => {
 			const parsed = JSON.parse(savedGrid)
 			grid.layout = parsed.layout
 			grid.compsList = parsed.compsList
-		} catch (e) {
+		} catch {
 			resetToDefault()
 		}
 	} else {
@@ -316,9 +221,9 @@ const addComp = (item) => {
 	grid.compsList[0].push(item.key)
 }
 
-const removeComp = (key) =>	grid.compsList.forEach((list, index) => {
-		grid.compsList[index] = list.filter((k) => k !== key)
-	})
+const removeComp = (key) => grid.compsList.forEach((list, index) => {
+	grid.compsList[index] = list.filter((k) => k !== key)
+})
 
 const handleSave = () => {
 	customizing.value = false
@@ -588,9 +493,11 @@ const emit = defineEmits(['on-mounted'])
 	.customizing .widgets {
 		transform: scale(1) !important;
 	}
+
 	.customizing .widgets-drawer {
 		width: 100% !important;
 	}
+
 	.customizing .widgets-wrapper {
 		margin-right: 0;
 	}