Feat/layout and home : layout组件和首页UI

apps/admin/src/configs/router.ts

@@ -1,31 +1,19 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
 
-import DataPanel from "@/pages/data-panel/index.vue";
-import ScanPanel from "@/pages/scan-panel/index.vue";
-
+import IndexPage from "@/pages/index/index.vue";
+import RebuildTeam from "@/pages/team-rebuild/index.vue";
 const routes: RouteRecordRaw[] = [
   {
     path: "/",
-    redirect: "/scan-panel"
-  },
-  {
-    path: "/scan-panel",
-    name: "scan-panel",
-    component: ScanPanel,
-    meta: {
-      title: "扫码工具",
-      icon: "scan",
-      isTabPage: true
-    }
+    name: "index",
+    component: IndexPage
   },
   {
-    path: "/data-panel",
-    name: "data-panel",
-    component: DataPanel,
+    path: "/team-rebuild",
+    name: "team-rebuild",
+    component: RebuildTeam,
     meta: {
-      title: "数据大盘",
-      icon: "list-switching",
-      isTabPage: true
+      title: "重组队伍"
     }
   }
 ];

apps/admin/src/layouts/default-layout/index.module.scss

@@ -0,0 +1,18 @@
+.layoutContainer {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: var(--van-background);
+}
+
+.layoutMain {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.navBar {
+  :global(.van-icon-arrow-left:before) {
+    color: black;
+  }
+}

apps/admin/src/layouts/default-layout/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <!-- 此处layoutContainer设置了min-height:100vh, 避免内容过少时背景色无法完全覆盖 -->
+  <div :class="styles.layoutContainer">
+    <van-nav-bar
+      v-if="title"
+      :title="title"
+      left-arrow
+      :class="styles.navBar"
+      @click-left="handleBackClick"
+    />
+    <main :class="styles.layoutMain">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import { useTitleMeta } from "./composables/use-title-meta";
+import styles from "./index.module.scss";
+
+interface Props {
+  title?: string;
+}
+
+const props = defineProps<Props>();
+const router = useRouter();
+const route = useRoute();
+
+const handleBackClick = () => {
+  router.back();
+};
+
+useTitleMeta();
+
+const title = computed(() => {
+  if (props.title) {
+    return props.title;
+  }
+  // 获取当前路由的 meta 中的 title (如果没有 则不展示nav-bar, 如首页就不展示)
+  const currentRoute = route.matched[route.matched.length - 1];
+  return currentRoute?.meta.title as string | undefined;
+});
+</script>

apps/admin/src/pages/index/components/adminInfo/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <van-cell-group title="管理员信息">
+    <van-cell title="管理员">{{ adminName }}</van-cell>
+    <van-cell title="路线">{{ walkRoute }}</van-cell>
+    <van-cell title="点位">{{ walkPoint }}</van-cell>
+  </van-cell-group>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+// TODO: 从接口中获取adminInfo
+const walkRoute = ref("屏峰全程");
+const walkPoint = ref("XXX");
+const adminName = ref("XXX");
+</script>

apps/admin/src/pages/index/index.module.scss

@@ -0,0 +1,9 @@
+.main {
+  .functionButtonContainer {
+    padding: 0 8px;
+  }
+  .functionButton {
+    text-align: center;
+    margin-top: 8px;
+  }
+}

apps/admin/src/pages/index/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <default-layout>
+    <admin-info />
+    <section :class="styles.main">
+      <van-cell-group title="签到">
+        <van-cell title="扫码签到" is-link />
+        <van-cell title="输入签到" is-link />
+      </van-cell-group>
+
+      <van-cell-group title="起终点人员管理">
+        <van-cell title="单人登记" is-link />
+        <van-cell title="重组队伍" is-link to="/team-rebuild" />
+        <div :class="styles.functionButtonContainer">
+          <van-button type="primary" plain :class="styles.functionButton" block>
+            待出发→进行中
+          </van-button>
+          <van-button type="primary" plain :class="styles.functionButton" block>
+            直接提交队伍
+          </van-button>
+        </div>
+      </van-cell-group>
+
+      <van-cell-group title="数据大盘">
+        <van-cell title="屏峰地图可视化" is-link />
+        <van-cell title="莫干山地图可视化" is-link />
+        <van-cell title="表格数据查看" is-link />
+      </van-cell-group>
+    </section>
+  </default-layout>
+</template>
+
+<script setup lang="ts">
+import DefaultLayout from "@/layouts/default-layout/index.vue";
+
+import AdminInfo from "./components/adminInfo/index.vue";
+import styles from "./index.module.scss";
+</script>

apps/admin/src/pages/team-rebuild/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <default-layout> </default-layout>
+</template>
+
+<script setup lang="ts">
+import DefaultLayout from "@/layouts/default-layout/index.vue";
+</script>

apps/admin/types/components.d.ts

@@ -14,6 +14,9 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanNavBar: typeof import('vant/es')['NavBar']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
   }