优化仪表盘内容

src/pages/home/index.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
-import { defineAsyncComponent } from 'vue'
+import { ref, onMounted, computed, defineAsyncComponent } from 'vue'
+import config from '@/config'
 
 // 定义组件名称
 defineOptions({
@@ -15,7 +15,7 @@ defineOptions({
 })
 
 const loading = ref(true)
-const dashboard = ref(import.meta.env.VITE_APP_DASHBOARD || 'work')
+const dashboard = ref(config.DASHBOARD_LAYOUT || 'work')
 
 // 动态导入组件
 const components = {

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;
 	}

src/pages/home/work/components/myapp.vue

@@ -21,15 +21,15 @@
 			</div>
 
 			<div v-else class="apps-grid">
-				<draggable v-model="myApps" item-key="id" :animation="200" ghost-class="ghost" drag-class="dragging"
+				<draggable v-model="myApps" item-key="path" :animation="200" ghost-class="ghost" drag-class="dragging"
 					class="draggable-grid">
 					<template #item="{ element }">
 						<div class="app-item" @click="handleAppClick(element)">
 							<div class="app-icon">
-								<component :is="element.icon" />
+								<component :is="getIconComponent(element.meta?.icon)" />
 							</div>
-							<div class="app-name">{{ element.name }}</div>
-							<div class="app-description">{{ element.description }}</div>
+							<div class="app-name">{{ element.meta?.title }}</div>
+							<div class="app-description">{{ element.meta?.description || '点击打开' }}</div>
 						</div>
 					</template>
 				</draggable>
@@ -37,7 +37,7 @@
 		</a-card>
 
 		<!-- 添加应用抽屉 -->
-		<a-drawer v-model:open="drawerVisible" title="管理应用" :width="650" placement="right" class="app-drawer">
+		<a-drawer v-model:open="drawerVisible" title="管理应用" :width="650" placement="right">
 			<div class="drawer-content">
 				<div class="app-section">
 					<div class="section-header">
@@ -48,40 +48,25 @@
 						<span class="count">{{ myApps.length }} 个应用</span>
 					</div>
 					<p class="tips">拖拽卡片调整顺序，点击移除按钮移除应用</p>
-					<div class="draggable-wrapper">
-						<draggable
-							v-model="myApps"
-							item-key="id"
-							:animation="200"
-							ghost-class="drawer-ghost"
-							drag-class="drawer-dragging"
-							class="draggable-list"
-							group="apps">
-							<template #item="{ element }">
-								<div class="drawer-app-item">
-									<div class="drag-handle">
-										<HolderOutlined />
-									</div>
-									<div class="app-icon">
-										<component :is="element.icon" />
-									</div>
-									<div class="app-info">
-										<div class="app-name">{{ element.name }}</div>
-										<div class="app-description">{{ element.description }}</div>
-									</div>
-									<a-button type="text" danger size="small" @click.stop="removeApp(element.id)">
-										<template #icon>
-											<CloseOutlined />
-										</template>
-										移除
-									</a-button>
+					<draggable v-model="myApps" item-key="path" :animation="200" ghost-class="drawer-ghost"
+						drag-class="drawer-dragging" class="drawer-grid" group="apps">
+						<template #item="{ element }">
+							<div class="drawer-app-card">
+								<div class="remove-btn" @click.stop="removeApp(element.path)">
+									<CloseOutlined />
 								</div>
-							</template>
-						</draggable>
-						<div v-if="myApps.length === 0" class="empty-zone">
-							<a-empty description="暂无常用应用" :image="false" />
-						</div>
-					</div>
+								<div class="app-icon">
+									<component :is="getIconComponent(element.meta?.icon)" />
+								</div>
+								<div class="app-name">{{ element.meta?.title }}</div>
+							</div>
+						</template>
+						<template #footer>
+							<div v-if="myApps.length === 0" class="empty-zone">
+								<a-empty description="暂无常用应用，从下方拖入应用" :image="false" />
+							</div>
+						</template>
+					</draggable>
 				</div>
 
 				<a-divider style="margin: 24px 0" />
@@ -95,34 +80,22 @@
 						<span class="count">{{ allApps.length }} 个可用</span>
 					</div>
 					<p class="tips">拖拽卡片到上方添加为常用应用</p>
-					<div class="draggable-wrapper">
-						<draggable
-							v-model="allApps"
-							item-key="id"
-							:animation="200"
-							ghost-class="drawer-ghost"
-							drag-class="drawer-dragging"
-							class="draggable-list"
-							group="apps">
-							<template #item="{ element }">
-								<div class="drawer-app-item">
-									<div class="drag-handle">
-										<HolderOutlined />
-									</div>
-									<div class="app-icon">
-										<component :is="element.icon" />
-									</div>
-									<div class="app-info">
-										<div class="app-name">{{ element.name }}</div>
-										<div class="app-description">{{ element.description }}</div>
-									</div>
+					<draggable v-model="allApps" item-key="path" :animation="200" ghost-class="drawer-ghost"
+						drag-class="drawer-dragging" class="drawer-grid" group="apps">
+						<template #item="{ element }">
+							<div class="drawer-app-card">
+								<div class="app-icon">
+									<component :is="getIconComponent(element.meta?.icon)" />
 								</div>
-							</template>
-						</draggable>
-						<div v-if="allApps.length === 0" class="empty-zone">
-							<a-empty description="所有应用已添加" :image="false" />
-						</div>
-					</div>
+								<div class="app-name">{{ element.meta?.title }}</div>
+							</div>
+						</template>
+						<template #footer>
+							<div v-if="allApps.length === 0" class="empty-zone">
+								<a-empty description="所有应用已添加" :image="false" />
+							</div>
+						</template>
+					</draggable>
 				</div>
 			</div>
 
@@ -135,47 +108,73 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
 import draggable from 'vuedraggable'
+import { useUserStore } from '@/stores/modules/user'
+import * as icons from '@ant-design/icons-vue'
 
 // 定义组件名称
 defineOptions({
 	name: 'MyApp',
 })
 
-// 应用数据
-const allAppsList = [
-	{ id: 1, name: '用户管理', description: '管理系统用户', icon: 'UserOutlined', path: '/auth/user' },
-	{ id: 2, name: '角色管理', description: '管理系统角色', icon: 'SettingOutlined', path: '/auth/role' },
-	{ id: 3, name: '日志管理', description: '查看系统日志', icon: 'FileTextOutlined', path: '/system/log' },
-	{ id: 4, name: '数据统计', description: '查看数据报表', icon: 'BarChartOutlined', path: '/statistics' },
-	{ id: 5, name: '日程安排', description: '查看日程', icon: 'CalendarOutlined', path: '/schedule' },
-	{ id: 6, name: '消息中心', description: '查看消息', icon: 'MessageOutlined', path: '/messages' },
-	{ id: 7, name: '订单管理', description: '管理订单', icon: 'ShoppingCartOutlined', path: '/orders' },
-]
+const router = useRouter()
+const userStore = useUserStore()
+
+// 从菜单中提取所有应用项（扁平化菜单树）
+const extractMenuItems = (menus) => {
+	const items = []
+
+	const traverse = (menuList) => {
+		for (const menu of menuList) {
+			// 只添加有路径的菜单项（排除父级菜单项）
+			if (menu.path && (!menu.children || menu.children.length === 0)) {
+				items.push(menu)
+			}
+			// 递归处理子菜单
+			if (menu.children && menu.children.length > 0) {
+				traverse(menu.children)
+			}
+		}
+	}
+
+	traverse(menus)
+	return items
+}
+
+// 获取所有可用应用
+const allAvailableApps = computed(() => {
+	return extractMenuItems(userStore.menu || [])
+})
 
 const drawerVisible = ref(false)
 const myApps = ref([])
 const allApps = ref([])
 
+// 获取图标组件
+const getIconComponent = (iconName) => {
+	return icons[iconName] || icons.FileTextOutlined
+}
+
 // 从本地存储加载数据
 const loadApps = () => {
 	const savedApps = localStorage.getItem('myApps')
 	if (savedApps) {
-		const savedIds = JSON.parse(savedApps)
-		myApps.value = allAppsList.filter(app => savedIds.includes(app.id))
+		const savedPaths = JSON.parse(savedApps)
+		myApps.value = allAvailableApps.value.filter(app => savedPaths.includes(app.path))
 	} else {
 		// 默认显示前4个应用
-		myApps.value = allAppsList.slice(0, 4)
+		myApps.value = allAvailableApps.value.slice(0, 4)
 	}
 	updateAllApps()
 }
 
 // 更新全部应用列表（排除已添加的）
 const updateAllApps = () => {
-	const myAppIds = myApps.value.map(app => app.id)
-	allApps.value = allAppsList.filter(app => !myAppIds.includes(app.id))
+	const myAppPaths = myApps.value.map(app => app.path)
+	allApps.value = allAvailableApps.value.filter(app => !myAppPaths.includes(app.path))
 }
 
 // 显示抽屉
@@ -185,8 +184,8 @@ const showDrawer = () => {
 }
 
 // 移除应用
-const removeApp = (id) => {
-	const index = myApps.value.findIndex(app => app.id === id)
+const removeApp = (path) => {
+	const index = myApps.value.findIndex(app => app.path === path)
 	if (index > -1) {
 		myApps.value.splice(index, 1)
 		updateAllApps()
@@ -195,20 +194,32 @@ const removeApp = (id) => {
 
 // 应用点击处理
 const handleAppClick = (app) => {
-	// 这里可以跳转到对应的路由
-	message.info(`打开应用: ${app.name}`)
+	if (app.path) {
+		router.push(app.path)
+	} else {
+		message.warning('该应用没有配置路由')
+	}
 }
 
 // 保存设置
 const handleSave = () => {
-	const appIds = myApps.value.map(app => app.id)
-	localStorage.setItem('myApps', JSON.stringify(appIds))
+	const appPaths = myApps.value.map(app => app.path)
+	localStorage.setItem('myApps', JSON.stringify(appPaths))
 	message.success('保存成功')
 	drawerVisible.value = false
 }
 
 // 初始化
 loadApps()
+
+// 监听菜单变化，重新加载应用
+watch(
+	() => userStore.menu,
+	() => {
+		loadApps()
+	},
+	{ deep: true }
+)
 </script>
 
 <style scoped lang="scss">
@@ -269,6 +280,9 @@ loadApps()
 				font-size: 40px;
 				color: #1890ff;
 				margin-bottom: 12px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
 			}
 
 			.app-name {
@@ -285,166 +299,171 @@ loadApps()
 	}
 }
 
-// 抽屉样式（不使用 scoped 的 deep，直接使用全局样式）
-.my-app .app-drawer {
-	.ant-drawer-body {
-		padding: 16px;
-	}
+// 抽屉样式 - 使用全局样式避免深度问题
+:deep(.my-app .ant-drawer-body) {
+	padding: 16px;
+}
 
-	.ant-drawer-footer {
-		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
-	}
+:deep(.my-app .ant-drawer-footer) {
+	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+}
 
-	.drawer-content {
-		.app-section {
-			margin-bottom: 0;
+.drawer-content {
+	.app-section {
+		margin-bottom: 0;
 
-			.section-header {
+		.section-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 8px;
+
+			h3 {
 				display: flex;
 				align-items: center;
-				justify-content: space-between;
-				margin-bottom: 8px;
+				gap: 6px;
+				font-size: 16px;
+				font-weight: 600;
+				margin: 0;
+				color: #262626;
 
-				h3 {
-					display: flex;
-					align-items: center;
-					gap: 6px;
-					font-size: 16px;
-					font-weight: 600;
-					margin: 0;
-					color: #262626;
-
-					.anticon {
-						font-size: 18px;
-					}
-				}
-
-				.count {
-					font-size: 12px;
-					color: #999;
-					background: #f5f5f5;
-					padding: 2px 8px;
-					border-radius: 4px;
+				.anticon {
+					font-size: 18px;
 				}
 			}
 
-			.tips {
-				font-size: 13px;
-				color: #8c8c8c;
-				margin-bottom: 12px;
-				line-height: 1.5;
+			.count {
+				font-size: 12px;
+				color: #999;
+				background: #f5f5f5;
+				padding: 2px 8px;
+				border-radius: 4px;
+			}
+		}
+
+		.tips {
+			font-size: 13px;
+			color: #8c8c8c;
+			margin-bottom: 12px;
+			line-height: 1.5;
+		}
+
+		.empty-zone {
+			text-align: center;
+			padding: 30px 20px;
+			background: #fafafa;
+			border: 2px dashed #d9d9d9;
+			border-radius: 8px;
+
+			.ant-empty-description {
+				color: #bfbfbf;
+				margin: 0;
+			}
+		}
+
+		// 抽屉内卡片式网格布局
+		.drawer-grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+			gap: 12px;
+			min-height: 80px;
+		}
+
+		.drawer-app-card {
+			position: relative;
+			padding: 20px 16px;
+			text-align: center;
+			background: #fff;
+			border: 1px solid #f0f0f0;
+			border-radius: 8px;
+			cursor: grab;
+			transition: all 0.25s ease;
+
+			&:active {
+				cursor: grabbing;
 			}
 
-			.draggable-wrapper {
-				position: relative;
-
-				.draggable-list {
-					min-height: 80px;
-				}
-
-				.empty-zone {
-					text-align: center;
-					padding: 30px 20px;
-					background: #fafafa;
-					border: 2px dashed #d9d9d9;
-					border-radius: 8px;
-
-					.ant-empty-description {
-						color: #bfbfbf;
-						margin: 0;
-					}
-				}
+			&:hover {
+				border-color: #1890ff;
+				box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+				transform: translateY(-2px);
 			}
 
-			.drawer-app-item {
+			.remove-btn {
+				position: absolute;
+				top: 8px;
+				right: 8px;
+				width: 20px;
+				height: 20px;
 				display: flex;
 				align-items: center;
-				padding: 16px;
-				background: #fff;
-				border: 1px solid #f0f0f0;
-				border-radius: 8px;
-				margin-bottom: 12px;
-				transition: all 0.25s ease;
-				cursor: grab;
-
-				&:last-child {
-					margin-bottom: 0;
-				}
-
-				&:active {
-					cursor: grabbing;
-				}
+				justify-content: center;
+				background: #ff4d4f;
+				color: #fff;
+				border-radius: 50%;
+				font-size: 12px;
+				cursor: pointer;
+				opacity: 0;
+				transition: opacity 0.25s;
 
 				&:hover {
-					border-color: #1890ff;
-					box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
-					transform: translateX(2px);
+					background: #ff7875;
 				}
+			}
 
-				.drag-handle {
-					font-size: 16px;
-					color: #bfbfbf;
-					margin-right: 12px;
-					cursor: grab;
-					transition: color 0.25s;
+			&:hover .remove-btn {
+				opacity: 1;
+			}
 
-					&:hover {
-						color: #1890ff;
-					}
-				}
+			.app-icon {
+				width: 48px;
+				height: 48px;
+				margin: 0 auto 12px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+				border-radius: 12px;
+				font-size: 24px;
+				color: #1890ff;
 
-				.app-icon {
-					width: 48px;
-					height: 48px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
-					border-radius: 12px;
+				:deep(.anticon) {
 					font-size: 24px;
-					color: #1890ff;
-					margin-right: 16px;
-					flex-shrink: 0;
-				}
-
-				.app-info {
-					flex: 1;
-					min-width: 0;
-
-					.app-name {
-						font-size: 15px;
-						font-weight: 500;
-						color: #262626;
-						margin-bottom: 4px;
-						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-					}
-
-					.app-description {
-						font-size: 13px;
-						color: #8c8c8c;
-						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-					}
 				}
 			}
 
-			// 拖拽时的样式
-			.drawer-ghost {
-				opacity: 0.4;
-				background: #e6f7ff;
-				border-color: #1890ff;
-				border-style: dashed;
+			.app-name {
+				font-size: 14px;
+				font-weight: 500;
+				color: #262626;
+				margin-bottom: 4px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 
-			.drawer-dragging {
-				opacity: 0.6;
-				transform: scale(0.98);
-				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+			.app-description {
+				font-size: 12px;
+				color: #8c8c8c;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 		}
+
+		// 拖拽时的样式
+		.drawer-ghost {
+			opacity: 0.4;
+			background: #e6f7ff;
+			border-color: #1890ff;
+			border-style: dashed;
+		}
+
+		.drawer-dragging {
+			opacity: 0.6;
+			transform: scale(0.95);
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		}
 	}
 }
 </style>