update home tab

src/pages/tabs/HomeTab.vue

@@ -1,22 +1,27 @@
 <template>
 	<div class="entry-page">
-		<section class="entry-list">
+		<section
+			v-for="group in visibleEntryGroupList"
+			:key="group.title"
+			class="entry-group"
+		>
+			<h2 v-text="group.title" />
+			<div class="entry-list" :class="group.layout">
 				<div
 					v-entrance-transition="index * 70"
-				v-for="(item, index) in visibleEntryList"
+					v-for="(item, index) in group.entryList"
 					:key="item.path"
 					class="item"
-				:class="{ wide: item.wide }"
 					@click="go(item.path)"
 				>
 					<div class="body">
 						<t-icon :name="item.icon" size="1.75rem" />
 						<h2 v-text="item.title" />
 					</div>
-					<p v-text="item.desc" />
+				</div>
 			</div>
 		</section>
-		<div class="tips gray" v-entrance-transition="visibleEntryList.length * 70">微信内打开本站可能会经常在扫码时需要授权，建议使用浏览器打开（右上角菜单，使用默认浏览器打开），并添加快捷入口到桌面。</div>
+		<div class="tips gray" v-entrance-transition="visibleEntryCount * 70">微信内打开本站可能会经常在扫码时需要授权，建议使用浏览器打开（右上角菜单，使用默认浏览器打开），并添加快捷入口到桌面。</div>
 	</div>
 </template>
 
@@ -35,32 +40,76 @@ const userStore = useUserStore();
 const unreadNotifyCount = ref(0);
 let isPageActive = true;
 
-const entryList = [
+interface HomeEntry {
+	path: string;
+	permission: string;
+	icon: string;
+	title: string;
+}
+
+interface HomeEntryGroup {
+	title: string;
+	layout?: "customer";
+	entryList: HomeEntry[];
+}
+
+const entryGroupList: HomeEntryGroup[] = [
 	{
-		path: "/customer/quick-sign-in",
-		permission: permissionCodes.eventRecord.create,
-		icon: "scan",
-		title: "快速扫码登记",
-		desc: "扫码选择客户并按配置事件登记",
-		wide: true
-	},
+		title: "客户管理",
+		layout: "customer",
+		entryList: [
 			{
 				path: "/management/customers/create?redirect=/customers",
 				permission: permissionCodes.customer.create,
 				icon: "edit-1",
-		title: "录入",
-		desc: "新建客户档案并完善基础资料"
+				title: "录入"
 			},
 			{
 				path: "/customer/registration",
 				permission: permissionCodes.eventRecord.create,
 				icon: "task-checked",
-		title: "登记",
-		desc: "按流程完成客户登记"
+				title: "登记"
+			},
+			{
+				path: "/customer/quick-sign-in",
+				permission: permissionCodes.eventRecord.create,
+				icon: "scan",
+				title: "快速扫码登记"
+			}
+		]
+	},
+	{
+		title: "订单管理",
+		entryList: [
+			{
+				path: "/management/sales-orders",
+				permission: permissionCodes.salesOrder.read,
+				icon: "task",
+				title: "订单列表"
+			},
+			{
+				path: "/management/sales-orders/create",
+				permission: permissionCodes.salesOrder.create,
+				icon: "task-add",
+				title: "创建订单"
+			},
+			{
+				path: "/management/customer-packages/create",
+				permission: permissionCodes.customerPackage.create,
+				icon: "layers",
+				title: "创建套餐订单"
+			}
+		]
 	}
 ];
 
-const visibleEntryList = computed(() => entryList.filter(item => userStore.hasPermissions(item.permission)));
+const visibleEntryGroupList = computed(() => entryGroupList
+	.map(group => ({
+		...group,
+		entryList: group.entryList.filter(item => userStore.hasPermissions(item.permission))
+	}))
+	.filter(group => group.entryList.length));
+const visibleEntryCount = computed(() => visibleEntryGroupList.value.reduce((count, group) => count + group.entryList.length, 0));
 const canReadNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.read));
 
 async function go(path: string): Promise<void> {
@@ -100,13 +149,28 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .entry-page {
-	padding: calc(var(--app-nav-height) + 1rem) 1rem 6rem 1rem;
+	gap: 2rem;
+	display: flex;
+	padding: calc(var(--app-nav-height) + 1rem) 1rem 1rem 1rem;
+	flex-direction: column;
+
+	.entry-group {
+
+		& + & {
+			margin-top: 1.5rem;
+		}
+
+		> h2 {
+			color: #52607a;
+			margin: 0 0 .75rem 0;
+			font-size: .875rem;
+			font-weight: 700;
+		}
 
 		.entry-list {
 			display: grid;
 			gap: .875rem;
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
+			grid-template-columns: repeat(3, minmax(0, 1fr));
 
 			.item {
 				color: #0f766e;
@@ -134,24 +198,11 @@ onUnmounted(() => {
 
 				h2 {
 					margin: 0;
-			font-size: 1.1rem;
+					font-size: .75rem;
 					line-height: 1.5;
 				}
 
-		p {
-			left: 1rem;
-			right: 1rem;
-			bottom: 1rem;
-			color: #7b889d;
-			margin: 0;
-			position: absolute;
-			font-size: .75rem;
-			line-height: 1.25;
 			}
-
-		&.wide {
-			grid-column: 1 / -1;
-			aspect-ratio: 2 / 1;
 		}
 	}
 
@@ -164,13 +215,14 @@ onUnmounted(() => {
 
 :global(html.theme-dark) {
 	.entry-page {
+		.entry-group > h2 {
+			color: #94a3b8;
+		}
+
 		.item {
 			background: rgba(15, 23, 42, .88);
 			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
 
-			p {
-				color: #94a3b8;
-			}
 		}
 	}
 }