主要更新uniapp相关功能

uniapp/pages/dashboard/dashboard.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="page">
 		<!-- ============ Hero 头部 ============ -->
-		<view class="hero">
+		<view class="hero" :style="headPad">
 			<view class="hero-glow hero-glow-1" />
 			<view class="hero-glow hero-glow-2" />
 			<view class="hero-top">
@@ -45,7 +45,7 @@
 				<FaIcon name="rotate" color="#f04438" :size="16" />
 			</view>
 
-			<!-- 应用宫格：选卡片进入对应功能系统 -->
+			<!-- 应用：按模块分组，每组一个 card，组头 + 组内一行 4 个功能 -->
 			<view class="block">
 				<view class="block-head">
 					<text class="block-title">应用</text>
@@ -59,31 +59,44 @@
 					<text class="empty-text">尚未配置应用模块</text>
 				</view>
 
-				<view v-else-if="!loadError" class="app-grid">
+				<block v-else-if="!loadError">
 					<view
 						v-for="group in moduleGroups"
-						:key="group.code || group.id"
-						class="app-card"
-						:class="{ locked: group.locked }"
-						@tap="onModuleTap(group)"
+						:key="group.id"
+						class="group-card"
 					>
-						<view class="app-card-top">
-							<view class="tint-icon app-icon" :class="group.tint">
-								<FaIcon :name="group.icon" color="#ffffff" :size="24" />
-							</view>
-							<text v-if="group.locked" class="app-lock">未开通</text>
+						<view class="group-head" @tap="onModuleTap(group)">
+							<view class="group-bar" />
+							<text class="group-title">{{ group.name }}</text>
+							<text v-if="group.locked" class="group-lock">未开通</text>
+							<text class="group-count">{{ group.total }}</text>
 						</view>
-						<text class="app-name">{{ group.name }}</text>
-						<text class="app-desc">{{ group.desc }}</text>
-						<view class="app-foot">
-							<text class="app-count">{{ group.total }} 个功能</text>
-							<FaIcon name="arrow-right" color="#c8cfdf" :size="12" />
+						<view v-if="group.items.length" class="grid">
+							<view
+								v-for="(item, index) in group.items"
+								:key="item.id"
+								class="cell"
+								@tap="openMenu(item, item.title)"
+							>
+								<view class="fn-card" :class="{ locked: group.locked || item.locked }">
+									<view
+										class="tint-icon fn-icon"
+										:class="group.locked || item.locked ? 'tint-off' : 'tint-' + (index % 8)"
+									>
+										<FaIcon :name="item.icon || group.icon" color="#ffffff" :size="18" />
+									</view>
+									<text class="fn-name">{{ item.title }}</text>
+								</view>
+							</view>
+						</view>
+						<view v-else class="group-empty">
+							<text class="group-empty-text">{{ group.locked ? '未开通该模块' : '该模块下暂无你可见的功能' }}</text>
 						</view>
 					</view>
-				</view>
+				</block>
 			</view>
 
-			<!-- 常用应用 -->
+			<!-- 常用功能：宫格卡（一行 4 个） -->
 			<view class="block">
 				<view class="block-head">
 					<text class="block-title">常用功能</text>
@@ -95,17 +108,24 @@
 				<view v-if="!loading && !loadError && quickApps.length === 0" class="empty-box">
 					<text class="empty-text">暂无可用应用，请联系管理员开通</text>
 				</view>
-				<view v-else-if="!loadError" class="grid">
-					<view
-						v-for="item in quickApps"
-						:key="item.key"
-						class="grid-item"
-						@tap="openMenu(item.menu, item.name)"
-					>
-						<view class="tint-icon grid-icon" :class="item.tint">
-							<FaIcon :name="item.icon" color="#ffffff" :size="22" />
+				<view v-else-if="!loadError" class="quick-card">
+					<view class="grid">
+						<view
+							v-for="(item, index) in quickApps"
+							:key="item.key"
+							class="cell"
+							@tap="openMenu(item.menu, item.name)"
+						>
+							<view class="fn-card" :class="{ locked: item.locked }">
+								<view
+									class="tint-icon fn-icon"
+									:class="item.locked ? 'tint-off' : 'tint-' + (index % 8)"
+								>
+									<FaIcon :name="item.icon" color="#ffffff" :size="18" />
+								</view>
+								<text class="fn-name">{{ item.name }}</text>
+							</view>
 						</view>
-						<text class="grid-name">{{ item.name }}</text>
 					</view>
 				</view>
 			</view>
@@ -165,6 +185,9 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { mpHeadPad } from '@/utils/mpHead.js'
+
+const headPad = mpHeadPad()
 import { onShow } from '@dcloudio/uni-app'
 import { isLoggedIn } from '@/utils/auth.js'
 import { fetchHome } from '@/api/workspace.js'
@@ -172,24 +195,12 @@ import { openMenu, resolveNativeRoute } from '@/utils/nav.js'
 import { request } from '@/api/request.js'
 import AppTabbar from '@/components/MainTabbar.vue'
 
-/** 模块 code → 端上图标（后端 icon 存的是 Element Plus 图标名，端上用不了） */
-const MODULE_ICONS = {
-	crm: 'handshake',
-	erp: 'boxes-stacked',
-	oa: 'clipboard-check',
-	cms: 'globe',
-	ai: 'robot',
-	system: 'gear',
-	tool: 'wrench'
-}
-
 /** 公共菜单（无 module 归属）的协作工具图标 */
 const TOOL_ICONS = ['note-sticky', 'calendar-days', 'file-lines', 'clock-rotate-left', 'chart-line']
 
 const loading = ref(true)
 const loadError = ref('')
 const user = ref({})
-const modules = ref([])
 const menus = ref([])
 const stats = ref({ todo: 0, overdue: 0, note: 0, message: 0, reimburse: 0 })
 const pendingList = ref([])
@@ -218,66 +229,75 @@ const badgeText = computed(() => (stats.value.message > 99 ? '99+' : String(stat
 /** 叶子菜单（可直接跳转的功能页） */
 const leafMenus = computed(() => menus.value.filter((m) => m.leaf !== false && !m.locked))
 
+/**
+ * 按「一级分类目录」归组（与子系统功能页 SubFunctions.vue 一致）：
+ * 菜单层级形如 模块根 → 个人办公 → 通讯录，分组取一级目录名（个人办公 / 人事管理 …）；
+ * 模块根仅作容器被跳过；无分类归属的顶层功能统一归入「常用功能」。
+ * 祖先链需在「全部菜单」里查找（目录不是叶子，不在 leafMenus 中）。
+ */
 const moduleGroups = computed(() => {
-	const byCode = {}
-	leafMenus.value.forEach((m) => {
-		if (!m.module) return
-		if (!byCode[m.module]) byCode[m.module] = []
-		byCode[m.module].push(m)
+	const byId = {}
+	menus.value.forEach((m) => {
+		byId[m.id] = m
 	})
+	// 只有叶子菜单才是可点功能；目录只作分组标题
+	const leaves = leafMenus.value.slice().sort((a, b) => (a.sort || 0) - (b.sort || 0))
 
-	// 已登记的功能模块（type=1）。type=2 是系统设置（角色/日志/字典/域名…），
-	// 属于后台管理范畴，不适合摆在工作台上，留给「全部应用」页。
-	const groups = modules.value
-		.filter((m) => m.type !== 2)
-		.map((mod, index) => {
-			const items = byCode[mod.code] || []
-			const code = String(mod.code || '').toLowerCase()
-			const locked = mod.enabled === false
-			return {
-				id: mod.id,
-				code: mod.code,
-				path: mod.path || '',
-				name: mod.name || '未命名应用',
-				desc: locked
-					? '未开通该模块'
-					: mod.description || (items.length ? items.length + ' 个功能' : '暂无功能'),
-				icon: MODULE_ICONS[code] || 'cube',
-				tint: locked ? 'tint-off' : 'tint-' + (index % 8),
-				locked,
-				items: items.slice(0, 6),
-				total: items.length
-			}
-		})
-
-	// 兜底：模块表里没有对应记录（或已删除）的菜单，避免被静默丢弃
-	const known = {}
-	groups.forEach((g) => {
-		known[String(g.code || '').toLowerCase()] = true
-	})
-	const orphan = []
-	leafMenus.value.forEach((m) => {
-		const code = String(m.module || '').toLowerCase()
-		if (code && !known[code] && code !== 'other') orphan.push(m)
-	})
-	if (orphan.length) {
-		groups.push({
-			id: 'other',
-			code: 'other',
-			name: '其他功能',
-			desc: orphan.length + ' 个功能',
-			icon: 'file-lines',
-			tint: 'tint-7',
-			locked: false,
-			items: orphan.slice(0, 6),
-			total: orphan.length
-		})
+	// 取该菜单所属的「一级分组」节点（自底向上找到链上最顶层节点）
+	function groupNodeOf(m) {
+		const chain = [m]
+		let cur = m
+		let guard = 0
+		while (byId[cur.pid] && guard++ < 20) {
+			cur = byId[cur.pid]
+			chain.unshift(cur)
+		}
+		const top = chain[0]
+		if (top.pid === 0) {
+			// 模块根在列表内：跳过根，取它下一层（个人办公 / 人事管理 …）
+			if (chain.length >= 2) return chain[1]
+			// 顶层节点自身：目录容器跳过，叶子归入「常用功能」
+			return top.leaf === false ? null : top
+		}
+		// 模块根不在列表内：链上顶层节点本身就是一级分组
+		return top
 	}
 
-	return groups
-})
+	const groupMap = new Map()
+	const common = { id: 'common', name: '常用功能', sort: -1, icon: 'star', items: [] }
 
-const enabledCount = computed(() => moduleGroups.value.filter((g) => !g.locked).length)
+	leaves.forEach((m) => {
+		const g = groupNodeOf(m)
+		if (!g) return
+		if (g.id === m.id) {
+			// 无分类归属的顶层散装功能
+			common.items.push(m)
+			return
+		}
+		if (!groupMap.has(g.id)) {
+			groupMap.set(g.id, { id: g.id, name: g.title, sort: g.sort, icon: g.icon, items: [] })
+		}
+		groupMap.get(g.id).items.push(m)
+	})
+
+	const dirGroups = []
+	groupMap.forEach((g) => dirGroups.push(g))
+	dirGroups.sort((a, b) => (a.sort || 0) - (b.sort || 0))
+
+	const all = []
+	if (common.items.length) all.push(common)
+	all.push(...dirGroups)
+
+	// 工作台只展示 2 行（一行 4 个），更多功能留给「全部应用」页
+	return all.map((group, gi) => ({
+		...group,
+		icon: group.icon || 'file-lines',
+		tint: 'tint-' + (gi % 8),
+		locked: false,
+		total: group.items.length,
+		items: group.items.slice(0, 8)
+	}))
+})
 
 /**
  * 协作工具：真正无模块归属的公共菜单（如后续新增的通用功能）。
@@ -323,7 +343,6 @@ async function loadHome() {
 	try {
 		const data = await fetchHome()
 		user.value = data.user || {}
-		modules.value = Array.isArray(data.modules) ? data.modules : []
 		menus.value = Array.isArray(data.menus) ? data.menus : []
 		stats.value = Object.assign({ todo: 0, overdue: 0, note: 0, message: 0, reimburse: 0 }, data.stats || {})
 		loadError.value = ''
@@ -380,10 +399,6 @@ function onModuleTap(group) {
 		openMenu(group.items[0], group.name)
 		return
 	}
-	if (group.path) {
-		openMenu({ title: group.name, path: group.path, leaf: true }, group.name)
-		return
-	}
 	goAllApps()
 }
 
@@ -466,6 +481,9 @@ onShow(() => {
 	z-index: 1;
 	flex-shrink: 0;
 	padding: calc(var(--status-bar-height, 44px) + 28rpx) $page-padding-x 76rpx;
+	/* #ifdef MP-WEIXIN */
+	padding-top: calc(env(safe-area-inset-top, 25px) + 92rpx);
+	/* #endif */
 	background: $hero-gradient;
 	overflow: hidden;
 }
@@ -700,214 +718,115 @@ onShow(() => {
 	color: $color-text-muted;
 }
 
-/* ============ 应用宫格卡片 ============ */
-.app-grid {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 20rpx;
-}
-
-.app-card {
+/* ============ 分组卡：外层一个 card，组头 + 组内一行 4 个功能 ============ */
+.group-card {
 	@include card;
-	padding: 26rpx 24rpx 20rpx;
-	display: flex;
-	flex-direction: column;
-	transition: transform 0.15s ease, box-shadow 0.2s ease;
+	padding: 24rpx 20rpx 8rpx;
 
-	&:active {
-		transform: scale(0.97);
-	}
-
-	&.locked {
-		.app-name,
-		.app-desc {
-			color: $color-text-muted;
-		}
+	& + & {
+		margin-top: 24rpx;
 	}
 }
 
-.app-card-top {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-}
-
-.app-icon {
-	@include tint-icon(88rpx, 24rpx);
-}
-
-.app-lock {
-	@include chip(#fef3f2, $color-danger);
-}
-
-.app-name {
-	margin-top: 20rpx;
-	font-size: 30rpx;
-	font-weight: 600;
-	color: $color-text;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.app-desc {
-	margin-top: 6rpx;
-	font-size: 22rpx;
-	color: $color-text-muted;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.app-foot {
+.group-head {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
-	margin-top: 18rpx;
-	padding-top: 16rpx;
-	border-top: 1rpx solid $color-divider;
+	gap: 12rpx;
+	padding: 0 4rpx 20rpx;
 }
 
-.app-count {
-	font-size: 22rpx;
-	color: $color-primary;
+.group-bar {
+	width: 6rpx;
+	height: 28rpx;
+	border-radius: $radius-full;
+	background: $color-primary;
+	flex-shrink: 0;
 }
 
-/* ============ 常用功能宫格 ============ */
-.grid {
-	@include card;
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	padding: 28rpx 8rpx 20rpx;
-}
-
-.grid-item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 14rpx;
-	padding: 12rpx 0;
-
-	&:active {
-		opacity: 0.7;
-	}
-}
-
-.grid-icon {
-	@include tint-icon(92rpx, 24rpx);
-}
-
-.grid-name {
-	font-size: 23rpx;
-	color: $color-text-secondary;
-	text-align: center;
-}
-
-/* ============ 应用中心卡片 ============ */
-.mod-card {
-	@include card;
-	padding: 24rpx;
-	margin-bottom: 20rpx;
-
-	&.locked {
-		.mod-name,
-		.mod-desc {
-			color: $color-text-muted;
-		}
-	}
-}
-
-.mod-head {
-	display: flex;
-	align-items: center;
-	gap: 20rpx;
-}
-
-.mod-icon {
-	@include tint-icon(88rpx, 22rpx);
-}
-
-.mod-meta {
+.group-title {
 	flex: 1;
 	min-width: 0;
-}
-
-.mod-title-row {
-	display: flex;
-	align-items: center;
-	gap: 12rpx;
-}
-
-.mod-name {
-	font-size: 30rpx;
+	font-size: 28rpx;
 	font-weight: 600;
 	color: $color-text;
-}
-
-.mod-lock {
-	@include chip(#fef3f2, $color-danger);
-}
-
-.mod-desc {
-	display: block;
-	margin-top: 6rpx;
-	font-size: 22rpx;
-	color: $color-text-muted;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.chips {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 14rpx;
-	margin-top: 20rpx;
-	padding-top: 20rpx;
-	border-top: 1rpx solid $color-divider;
+.group-lock {
+	@include chip(#fef3f2, $color-danger);
+	flex-shrink: 0;
 }
 
-.chip {
+.group-count {
 	@include chip;
+	flex-shrink: 0;
 }
 
-.chip-off {
-	background: $color-divider;
+.group-empty {
+	padding: 20rpx 4rpx 16rpx;
+}
+
+.group-empty-text {
+	font-size: 24rpx;
 	color: $color-text-muted;
 }
 
-.chip-more {
-	background: $color-primary-bg;
-}
-
-/* ============ 协作工具 ============ */
-.tool-card {
+/* ============ 功能宫格：一行 4 个 ============
+   cell 占 25% 宽并自带右侧间隙，容器用负 margin 抵消末列间隙，
+   避免使用 calc 除法——小程序端 wxss 对复杂 calc 支持不稳。 */
+.quick-card {
 	@include card;
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	padding: 24rpx 8rpx;
+	padding: 24rpx 20rpx 8rpx;
 }
 
-.tool-item {
+.grid {
+	display: flex;
+	flex-wrap: wrap;
+	margin-right: -16rpx;
+}
+
+.cell {
+	width: 25%;
+	padding-right: 16rpx;
+	margin-bottom: 16rpx;
+	box-sizing: border-box;
+}
+
+.fn-card {
+	height: 100%;
+	padding: 18rpx 6rpx 16rpx;
+	border-radius: $radius-md;
+	background: $color-bg-page;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	gap: 12rpx;
-	padding: 10rpx 0;
+	transition: transform 0.15s ease;
 
 	&:active {
-		opacity: 0.7;
+		transform: scale(0.95);
 	}
 }
 
-.tool-icon {
-	@include icon-box(72rpx);
+.fn-icon {
+	@include tint-icon(64rpx, 18rpx);
 }
 
-.tool-name {
-	font-size: 23rpx;
-	color: $color-text-secondary;
+.fn-name {
+	max-width: 100%;
+	font-size: 22rpx;
+	line-height: 1.3;
+	color: $color-text;
 	text-align: center;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.fn-card.locked .fn-name {
+	color: $color-text-muted;
 }
 
 /* ============ 列表（待办 / 动态） ============ */