批量优化

uniapp/pages/features/features.vue

@@ -1,13 +1,14 @@
 <template>
 	<view class="page">
+		<!-- 吸顶搜索 -->
 		<view class="search-wrap">
 			<view class="search-bar">
-				<FaIcon name="magnifying-glass" color="#909399" :size="16" />
+				<FaIcon name="magnifying-glass" color="#8a94ad" :size="16" />
 				<input
-					class="search-input"
 					v-model="keyword"
+					class="search-input"
 					type="text"
-					placeholder="搜索功能名称"
+					placeholder="搜索应用或功能名称"
 					placeholder-class="search-placeholder"
 					confirm-type="search"
 				/>
@@ -18,33 +19,106 @@
 		</view>
 
 		<view class="body">
-			<view class="sidebar">
-				<view
-					v-for="(cat, index) in categories"
-					:key="cat.id"
-					class="category-item"
-					:class="{ active: activeIndex === index }"
-					@tap="selectCategory(index)"
-				>
-					<text class="category-text">{{ cat.title }}</text>
+			<!-- 搜索结果：跨模块扁平列表 -->
+			<block v-if="keyword.trim()">
+				<view class="result-hint">
+					<text class="result-hint-text">找到 {{ searchResults.length }} 个结果</text>
 				</view>
-			</view>
-
-			<view class="content">
-				<view v-if="displayItems.length === 0" class="empty">
+				<view v-if="searchResults.length === 0" class="empty-box">
 					<FaIcon name="magnifying-glass" color="#c0c4cc" :size="32" />
-					<text class="empty-text">未找到相关功能</text>
+					<text class="empty-text">没有找到「{{ keyword.trim() }}」相关功能</text>
 				</view>
-				<view
-					v-for="item in displayItems"
-					:key="item.id"
-					class="item-card"
-					:class="{ active: activeItemId === item.id }"
-					@tap="onItemTap(item)"
-				>
-					<text class="item-name">{{ item.name }}</text>
+				<view v-else class="list-card">
+					<view
+						v-for="item in searchResults"
+						:key="item.menu.id"
+						class="list-item"
+						@tap="openMenu(item.menu, item.menu.title)"
+					>
+						<view class="row-icon" :class="item.locked ? 'tint-off' : item.tint">
+							<FaIcon :name="item.icon" color="#ffffff" :size="16" />
+						</view>
+						<view class="row-body">
+							<text class="row-title">{{ item.menu.title }}</text>
+							<text class="row-sub">{{ item.moduleName }}</text>
+						</view>
+						<text v-if="item.locked" class="row-lock">未开通</text>
+						<FaIcon v-else name="chevron-right" color="#c8cfdf" :size="12" />
+					</view>
 				</view>
-			</view>
+			</block>
+
+			<!-- 默认：按业务域分组浏览 -->
+			<block v-else>
+				<view v-if="groups.length === 0" class="empty-box">
+					<FaIcon name="cube" color="#c0c4cc" :size="32" />
+					<text class="empty-text">尚未配置应用模块</text>
+				</view>
+
+				<view v-for="group in groups" :key="group.code || group.id" class="group">
+					<view class="group-head">
+						<view class="tint-icon group-icon" :class="group.tint">
+							<FaIcon :name="group.icon" color="#ffffff" :size="18" />
+						</view>
+						<view class="group-meta">
+							<view class="group-title-row">
+								<text class="group-name">{{ group.name }}</text>
+								<text v-if="group.locked" class="group-lock">未开通</text>
+							</view>
+							<text class="group-count">{{ group.items.length }} 个功能</text>
+						</view>
+					</view>
+
+					<view class="list-card">
+						<view
+							v-for="item in group.items"
+							:key="item.id"
+							class="list-item"
+							@tap="openMenu(item, item.title)"
+						>
+							<view class="dot" :class="item.locked ? 'off' : 'primary'" />
+							<view class="row-body">
+								<text class="row-title">{{ item.title }}</text>
+								<text v-if="item.path" class="row-sub">{{ item.path }}</text>
+							</view>
+							<FaIcon name="chevron-right" color="#c8cfdf" :size="12" />
+						</view>
+						<view v-if="group.items.length === 0" class="group-empty">
+							<text class="group-empty-text">该模块下暂无你可见的功能</text>
+						</view>
+					</view>
+				</view>
+
+				<view v-if="commonMenus.length" class="group">
+					<view class="group-head">
+						<view class="tint-icon group-icon tint-3">
+							<FaIcon name="wrench" color="#ffffff" :size="18" />
+						</view>
+						<view class="group-meta">
+							<view class="group-title-row">
+								<text class="group-name">协作工具</text>
+							</view>
+							<text class="group-count">{{ commonMenus.length }} 个功能</text>
+						</view>
+					</view>
+					<view class="list-card">
+						<view
+							v-for="item in commonMenus"
+							:key="item.id"
+							class="list-item"
+							@tap="openMenu(item, item.title)"
+						>
+							<view class="dot primary" />
+							<view class="row-body">
+								<text class="row-title">{{ item.title }}</text>
+							</view>
+							<FaIcon name="chevron-right" color="#c8cfdf" :size="12" />
+						</view>
+					</view>
+				</view>
+			</block>
+
+			<view class="bottom-space" />
 		</view>
 
 		<AppTabbar current="features" />
@@ -53,115 +127,124 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
 import { isLoggedIn } from '@/utils/auth.js'
-import AppTabbar from '@/components/AppTabbar.vue'
+import { fetchHome } from '@/api/workspace.js'
+import { openMenu } from '@/utils/nav.js'
+import AppTabbar from '@/components/MainTabbar.vue'
 
-const keyword = ref('')
-const activeIndex = ref(0)
-const activeItemId = ref('')
-
-const routeMap = {
-	notepad: '/pages/tools/notepad/index',
-	schedule: '/pages/tools/schedule/index'
+const MODULE_ICONS = {
+	crm: 'handshake',
+	erp: 'boxes-stacked',
+	oa: 'clipboard-check',
+	cms: 'globe',
+	ai: 'robot',
+	system: 'gear',
+	tool: 'wrench'
 }
 
-const categories = ref([
-	{
-		id: 'handy',
-		title: '便捷工具',
-		items: [
-			{ id: 'notepad', name: '记事本', route: routeMap.notepad },
-			{ id: 'schedule', name: '日程提醒', route: routeMap.schedule }
-		]
-	},
-	{
-		id: 'tools',
-		title: '常用工具',
-		items: [
-			{ id: 't1', name: '扫一扫' },
-			{ id: 't2', name: '收付款' },
-			{ id: 't3', name: '卡包管理' },
-			{ id: 't4', name: '出行服务' },
-			{ id: 't5', name: '二维码生成' },
-			{ id: 't6', name: '发票助手' }
-		]
-	},
-	{
-		id: 'life',
-		title: '生活服务',
-		items: [
-			{ id: 'l1', name: '外卖订餐' },
-			{ id: 'l2', name: '电影购票' },
-			{ id: 'l3', name: '酒店预订' },
-			{ id: 'l4', name: '快递查询' },
-			{ id: 'l5', name: '家政预约' },
-			{ id: 'l6', name: '更多服务' }
-		]
-	},
-	{
-		id: 'office',
-		title: '办公效率',
-		items: [
-			{ id: 'o1', name: '文档协作' },
-			{ id: 'o2', name: '日程管理' },
-			{ id: 'o3', name: '云盘存储' },
-			{ id: 'o4', name: '视频会议' },
-			{ id: 'o5', name: '任务看板' },
-			{ id: 'o6', name: '审批流程' }
-		]
-	},
-	{
-		id: 'data',
-		title: '数据报表',
-		items: [
-			{ id: 'd1', name: '销售统计' },
-			{ id: 'd2', name: '用户分析' },
-			{ id: 'd3', name: '访问趋势' },
-			{ id: 'd4', name: '转化报表' },
-			{ id: 'd5', name: '导出数据' }
-		]
-	},
-	{
-		id: 'system',
-		title: '系统设置',
-		items: [
-			{ id: 's1', name: '账号管理' },
-			{ id: 's2', name: '权限配置' },
-			{ id: 's3', name: '消息通知' },
-			{ id: 's4', name: '安全中心' },
-			{ id: 's5', name: '关于系统' }
-		]
+const keyword = ref('')
+const loading = ref(true)
+const modules = ref([])
+const menus = ref([])
+
+/** 按模块 code 归组的全部菜单（含目录与锁定项，便于浏览） */
+const groups = computed(() => {
+	const byCode = {}
+	menus.value.forEach((m) => {
+		if (!m.module) return
+		if (!byCode[m.module]) byCode[m.module] = []
+		byCode[m.module].push(m)
+	})
+
+	// 这里展示全部模块（含 type=2 系统设置），与工作台首页只展示业务模块形成分工
+	const list = modules.value.map((mod, index) => ({
+		id: mod.id,
+		code: mod.code,
+		name: mod.name || '未命名应用',
+		icon: mod.type === 2 ? 'gear' : MODULE_ICONS[String(mod.code || '').toLowerCase()] || 'cube',
+		tint: mod.enabled === false ? 'tint-off' : 'tint-' + (index % 8),
+		locked: mod.enabled === false,
+		items: (byCode[mod.code] || []).slice().sort((a, b) => a.sort - b.sort)
+	}))
+
+	// 兜底：模块表里没有对应记录（或已删除）的菜单
+	const known = {}
+	list.forEach((g) => {
+		known[String(g.code || '').toLowerCase()] = true
+	})
+	const orphan = []
+	menus.value.forEach((m) => {
+		const code = String(m.module || '').toLowerCase()
+		if (code && !known[code]) orphan.push(m)
+	})
+	if (orphan.length) {
+		list.push({
+			id: 'other',
+			code: 'other',
+			name: '其他功能',
+			icon: 'file-lines',
+			tint: 'tint-7',
+			locked: false,
+			items: orphan
+		})
 	}
-])
-
-const currentCategory = computed(() => categories.value[activeIndex.value])
-
-const displayItems = computed(() => {
-	const items = currentCategory.value?.items || []
-	const q = keyword.value.trim().toLowerCase()
-	if (!q) return items
-	return items.filter(item => item.name.toLowerCase().includes(q))
+	return list
 })
 
+const commonMenus = computed(() => menus.value.filter((m) => !m.module))
+
+/** 跨模块搜索：应用名 + 模块名 + 菜单标题 */
+const searchResults = computed(() => {
+	const q = keyword.value.trim().toLowerCase()
+	if (!q) return []
+	const moduleName = {}
+	modules.value.forEach((m) => {
+		moduleName[String(m.code || '').toLowerCase()] = m.name
+	})
+
+	return menus.value
+		.filter((m) => {
+			const mod = modules.value.find((x) => x.code === m.module)
+			const hay = [m.title, m.path, mod && mod.name].join(' ').toLowerCase()
+			return hay.indexOf(q) > -1
+		})
+		.map((m, i) => {
+			const mod = modules.value.find((x) => x.code === m.module)
+			return {
+				menu: m,
+				moduleName: (mod && mod.name) || '协作工具',
+				icon: MODULE_ICONS[String(m.module || '').toLowerCase()] || 'file-lines',
+				tint: mod && mod.enabled === false ? 'tint-off' : 'tint-' + (i % 8),
+				locked: m.locked === true || (mod && mod.enabled === false)
+			}
+		})
+})
+
+async function load() {
+	loading.value = true
+	try {
+		const data = await fetchHome()
+		modules.value = Array.isArray(data.modules) ? data.modules : []
+		menus.value = Array.isArray(data.menus) ? data.menus : []
+	} catch (e) {
+		console.error('[apps] load failed:', e)
+	} finally {
+		loading.value = false
+	}
+}
+
 onMounted(() => {
 	if (!isLoggedIn()) {
 		uni.reLaunch({ url: '/pages/login/login' })
-	}
-})
-
-function selectCategory(index) {
-	activeIndex.value = index
-	activeItemId.value = ''
-}
-
-function onItemTap(item) {
-	activeItemId.value = item.id
-	if (item.route) {
-		uni.navigateTo({ url: item.route })
 		return
 	}
-	uni.showToast({ title: item.name, icon: 'none' })
-}
+	load()
+})
+
+onShow(() => {
+	if (isLoggedIn() && !loading.value) load()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -173,15 +256,16 @@ function onItemTap(item) {
 
 .search-wrap {
 	flex-shrink: 0;
-	padding: calc(var(--status-bar-height, 44px) + 16rpx) 24rpx 20rpx;
+	padding: calc(var(--status-bar-height, 44px) + 16rpx) $page-padding-x 20rpx;
 	background: $color-card;
+	box-shadow: $shadow-header;
 }
 
 .search-bar {
 	display: flex;
 	align-items: center;
 	gap: 12rpx;
-	height: 72rpx;
+	height: 76rpx;
 	padding: 0 24rpx;
 	background: $color-bg-page;
 	border-radius: $radius-full;
@@ -189,7 +273,8 @@ function onItemTap(item) {
 
 .search-input {
 	flex: 1;
-	height: 72rpx;
+	min-width: 0;
+	height: 76rpx;
 	font-size: 28rpx;
 	color: $color-text;
 }
@@ -207,98 +292,155 @@ function onItemTap(item) {
 
 .body {
 	flex: 1;
-	display: flex;
 	min-height: 0;
-	overflow: hidden;
-	background: $color-card;
-}
-
-.sidebar {
-	width: 200rpx;
-	flex-shrink: 0;
-	background: $color-bg-page;
 	overflow-y: auto;
 	-webkit-overflow-scrolling: touch;
+	padding: 24rpx $page-padding-x 0;
 }
 
-.category-item {
-	position: relative;
-	padding: 32rpx 16rpx;
-	text-align: center;
-
-	&.active {
-		background: $color-card;
-
-		.category-text {
-			color: $color-primary;
-			font-weight: 500;
-		}
-
-		&::before {
-			content: '';
-			position: absolute;
-			left: 0;
-			top: 50%;
-			transform: translateY(-50%);
-			width: 6rpx;
-			height: 36rpx;
-			background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
-			border-radius: 0 4rpx 4rpx 0;
-		}
-	}
+.result-hint {
+	padding: 0 4rpx 16rpx;
 }
 
-.category-text {
-	font-size: 26rpx;
-	color: $color-text-secondary;
-	line-height: 1.4;
+.result-hint-text {
+	font-size: 24rpx;
+	color: $color-text-muted;
 }
 
-.content {
-	flex: 1;
-	min-width: 0;
-	overflow-y: auto;
-	-webkit-overflow-scrolling: touch;
-	padding: 20rpx 24rpx;
-	background: $color-card;
-}
-
-.item-card {
-	padding: 28rpx 24rpx;
-	margin-bottom: 16rpx;
-	background: $color-bg-page;
-	border-radius: $radius-md;
-
-	&.active {
-		background: linear-gradient(135deg, rgba(79, 172, 254, 0.08) 0%, rgba(0, 242, 254, 0.08) 100%);
-
-		.item-name {
-			color: #4facfe;
-		}
-	}
-
-	&:active {
-		opacity: 0.85;
-	}
-}
-
-.item-name {
-	font-size: 28rpx;
-	color: $color-text;
-	line-height: 1.4;
-}
-
-.empty {
+.empty-box {
+	@include card;
+	margin-top: 24rpx;
+	padding: 80rpx 24rpx;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: 120rpx 0;
-	gap: 20rpx;
+	gap: 18rpx;
 }
 
 .empty-text {
 	font-size: 26rpx;
 	color: $color-text-muted;
 }
+
+.group {
+	margin-bottom: 32rpx;
+}
+
+.group-head {
+	display: flex;
+	align-items: center;
+	gap: 18rpx;
+	margin-bottom: 18rpx;
+	padding: 0 4rpx;
+}
+
+.group-icon {
+	@include tint-icon(72rpx, 18rpx);
+}
+
+.group-meta {
+	flex: 1;
+	min-width: 0;
+}
+
+.group-title-row {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+}
+
+.group-name {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: $color-text;
+}
+
+.group-lock {
+	@include chip(#fef3f2, $color-danger);
+}
+
+.group-count {
+	display: block;
+	margin-top: 4rpx;
+	font-size: 22rpx;
+	color: $color-text-muted;
+}
+
+.list-card {
+	@include card;
+	overflow: hidden;
+}
+
+.list-item {
+	display: flex;
+	align-items: center;
+	gap: 18rpx;
+	padding: 26rpx 24rpx;
+
+	& + & {
+		border-top: 1rpx solid $color-divider;
+	}
+
+	&:active {
+		background: $color-bg-page;
+	}
+}
+
+.row-icon {
+	@include tint-icon(60rpx, 16rpx);
+}
+
+.row-body {
+	flex: 1;
+	min-width: 0;
+}
+
+.row-title {
+	display: block;
+	font-size: 28rpx;
+	color: $color-text;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.row-sub {
+	display: block;
+	margin-top: 4rpx;
+	font-size: 22rpx;
+	color: $color-text-muted;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.row-lock {
+	@include chip(#fef3f2, $color-danger);
+}
+
+.dot {
+	width: 14rpx;
+	height: 14rpx;
+	border-radius: 50%;
+	flex-shrink: 0;
+	background: $color-text-muted;
+
+	&.primary { background: $color-primary; }
+	&.off { background: $color-border; }
+}
+
+.group-empty {
+	padding: 40rpx 24rpx;
+	text-align: center;
+}
+
+.group-empty-text {
+	font-size: 24rpx;
+	color: $color-text-muted;
+}
+
+.bottom-space {
+	height: 40rpx;
+}
 </style>