😎1、更换拖拽组件 2、优化首页组件布局

Web/package.json

@@ -2,7 +2,7 @@
 	"name": "admin.net.pro",
 	"type": "module",
 	"version": "2.4.33",
-	"lastBuildTime": "2024.08.04",
+	"lastBuildTime": "2024.08.05",
 	"description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架",
 	"author": "zuohuaijun",
 	"license": "MIT",
@@ -70,12 +70,11 @@
 		"vue-router": "^4.4.2",
 		"vue-signature-pad": "^3.0.2",
 		"vue3-tree-org": "^4.2.2",
-		"vuedraggable": "4.0.3",
 		"vxe-pc-ui": "^4.0.86",
 		"vxe-table": "^4.7.59",
 		"vxe-table-plugin-element": "^4.0.4",
 		"vxe-table-plugin-export-xlsx": "^4.0.5",
-		"xe-utils": "^3.5.28",
+		"xe-utils": "^3.5.29",
 		"xlsx-js-style": "^1.2.0"
 	},
 	"devDependencies": {

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

@@ -21,7 +21,7 @@
 <script lang="ts">
 export default {
 	title: '关于项目',
-	icon: 'ele-Setting',
+	icon: 'ele-QuestionFilled',
 	description: '点个星星支持一下',
 };
 </script>

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

@@ -19,7 +19,7 @@
 <script lang="ts">
 export default {
 	title: '更新记录',
-	icon: 'ele-Message',
+	icon: 'ele-DocumentCopy',
 	description: '当前项目更新记录',
 };
 </script>
@@ -69,4 +69,8 @@ onMounted(() => {
 	font-size: 12px;
 	margin-top: 10px;
 }
+.commit {
+	max-height: 500px;
+	overflow: auto;
+}
 </style>

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

@@ -1,5 +1,9 @@
 <template>
 	<el-card shadow="hover" header="快捷入口">
+		<template #header>
+			<el-icon style="display: inline; vertical-align: middle"> <ele-Guide /> </el-icon>
+			<span style=""> 快捷入口 </span>
+		</template>
 		<ul class="myMods">
 			<li v-for="mod in myMods" :key="mod.path!">
 				<router-link :to="{ path: mod.path! }">
@@ -17,25 +21,21 @@
 		<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="id" group="app" class="draggable-box" force-fallback fallback-on-body>
+				<VueDraggable tag="ul" v-model="myMods" :animation="200" group="app" class="draggable-box">
-					<template #item="{ element }">
+					<li v-for="item in myMods" :key="item.id">
-						<li>
+						<SvgIcon :name="item.meta?.icon" style="font-size: 18px" />
-							<SvgIcon :name="element.meta.icon" style="font-size: 18px" />
+						<p>{{ item.meta?.title }}</p>
-							<p>{{ element.meta.title }}</p>
+					</li>
-						</li>
+				</VueDraggable>
-					</template>
-				</draggable>
 			</div>
 			<div class="setMods">
 				<h4>全部应用 ( {{ filterMods.length }} )</h4>
-				<draggable tag="ul" v-model="filterMods" animation="200" item-key="id" group="app" class="draggable-box-all" force-fallback fallback-on-body>
+				<VueDraggable tag="ul" v-model="filterMods" :animation="200" group="app" class="draggable-box-all">
-					<template #item="{ element }">
+					<li v-for="item in filterMods" :key="item.id" :style="{ background: '#909399' }">
-						<li :style="{ background: element.meta.color || '#909399' }">
+						<SvgIcon :name="item.meta?.icon" style="font-size: 18px" />
-							<SvgIcon :name="element.meta.icon" style="font-size: 18px" />
+						<p>{{ item.meta?.title }}</p>
-							<p>{{ element.meta.title }}</p>
+					</li>
-						</li>
+				</VueDraggable>
-					</template>
-				</draggable>
 			</div>
 			<template #footer>
 				<div style="margin: 0 20px 20px 0">
@@ -50,17 +50,17 @@
 <script lang="ts">
 export default {
 	title: '快捷入口',
-	icon: 'ele-Monitor',
+	icon: 'ele-Guide',
 	description: '可以配置的快捷入口',
 };
 </script>
 
 <script setup lang="ts" name="myapp">
-import { reactive, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
 import { storeToRefs } from 'pinia';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 import { useUserInfo } from '/@/stores/userInfo';
 
 import { getAPI } from '/@/utils/axios-utils';
@@ -74,10 +74,6 @@ const filterMods = ref<MenuOutput[]>([]); // 过滤我的常用后的应用
 const modsDrawer = ref<boolean>(false);
 
 const { userInfos } = storeToRefs(useUserInfo());
-const state = reactive({
-	navError: '',
-	navData: [],
-});
 
 onMounted(() => {
 	getMods();

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

@@ -8,16 +8,12 @@
 
 		<div class="custome-canlendar">
 			<el-calendar v-model="state.calendarValue" ref="calendar">
-				<template #header="{date }">
+				<template #header="{ date }">
-					<span>{{ date  }}</span>
+					<span>{{ date }}</span>
 					<el-button-group>
-						<el-button size="small" @click="selectDate('prev-month')">
+						<el-button size="small" @click="selectDate('prev-month')"> 上个月 </el-button>
-							上个月
-						</el-button>
 						<el-button size="small" @click="selectDate('today')">今天</el-button>
-						<el-button size="small" @click="selectDate('next-month')">
+						<el-button size="small" @click="selectDate('next-month')"> 下个月 </el-button>
-							下个月
-						</el-button>
 					</el-button-group>
 				</template>
 				<template #date-cell="{ data }">
@@ -30,7 +26,6 @@
 							{{ solarDate2lunar(data.day) }}
 						</div>
 					</div>
-
 				</template>
 			</el-calendar>
 		</div>
@@ -58,7 +53,7 @@
 <script lang="ts">
 export default {
 	title: '日程',
-	icon: 'ele-Odometer',
+	icon: 'ele-Calendar',
 	description: '日程演示',
 };
 </script>

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

@@ -19,7 +19,7 @@
 <script lang="ts">
 export default {
 	title: '版本信息',
-	icon: 'ele-Monitor',
+	icon: 'ele-InfoFilled',
 	description: '版本信息原子组件演示',
 };
 </script>

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

@@ -45,7 +45,7 @@ const { themeConfig } = storeToRefs(storesThemeConfig);
 
 export default {
 	title: '欢迎',
-	icon: 'ele-Present',
+	icon: 'ele-Promotion',
 	description: '项目特色以及文档链接',
 };
 </script>

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

@@ -23,29 +23,19 @@
 					</div>
 					<el-row :gutter="8">
 						<el-col v-for="(item, index) in grid.layout" :key="index" :md="item" :xs="24">
-							<draggable
+							<VueDraggable v-model="grid.copmsList[index]" :animation="200" handle=".customize-overlay" class="draggable-box">
-								v-model="grid.copmsList[index]"
+								<div v-for="item in grid.copmsList[index]" :key="item">
-								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 mb8">
-										<component :is="allComps[element]"></component>
+										<component :is="allComps[item]"></component>
 										<div v-if="customizing" class="customize-overlay">
-											<el-button class="close" type="danger" plain icon="ele-Close" @click="remove(element)"></el-button>
+											<el-button class="close" type="danger" plain icon="ele-Close" @click="remove(item)"></el-button>
-											<label v-if="allComps[element]">
+											<label v-if="allComps[item]">
-												<el-icon> <component :is="allComps[element].icon" /> </el-icon>{{ allComps[element].title }}
+												<el-icon> <component :is="allComps[item].icon" /> </el-icon>{{ allComps[item].title }}
 											</label>
 										</div>
 									</div>
-								</template>
+								</div>
-							</draggable>
+							</VueDraggable>
 						</el-col>
 					</el-row>
 				</div>
@@ -144,7 +134,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, nextTick } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 import { clone } from '/@/utils/arrayOperation';
 import allComps from './components/index';
 import { Local } from '/@/utils/storage';
@@ -157,7 +147,7 @@ interface Grid {
 const defaultGrid = {
 	layout: [12, 6, 6],
 	copmsList: [
-		['welcome', 'commit'],
+		['welcome', 'myapp', 'commit'],
 		['about', 'version'],
 		['timer', 'schedule'],
 	],
@@ -275,7 +265,7 @@ const close = () => {
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 	position: relative;
 	overflow: auto;
-	padding-top: 20px;
+	padding-top: 10px;
 }
 .widgets-aside-title {
 	margin-top: 10px;