feat: 更新layout、网络、图标库基建，优化首页布局 (#12)

* chore: 安装并配置ic与mdi图标库

* feat: 将网络配置中“一秒时长”的常变量导出

* feat: 将页面背景改回vant的灰色风格

* feat: 允许通过prop隐藏导航栏返回按钮

* feat: 为导航栏添加一个右侧内容的slot

* feat: 优化首页布局，清理无效路由，在顶栏右侧添加搜索按钮

* fix: 修复CI错误

* fix: 修复导航栏右侧按钮点击热区问题

* fix: 改用更符合语义的emit事件名

* revert: 依据产品方案变化移除首页的搜索按钮

* fix: 修复vant命令式组件样式丢失BUG

* fix: 补全缺失的导出项

* fix: 根据后端字段名调整更改网络基建

* fix: 为网络请求示例添加mutation进行态控制

* revert: 不再导出ONE_SECOND

Author: j10ccc

apps/admin/package.json

@@ -11,6 +11,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@iconify-json/ic": "catalog:frontend",
+    "@iconify-json/mdi": "catalog:frontend",
     "@tanstack/vue-query": "catalog:frontend",
     "@vueuse/core": "catalog:frontend",
     "api": "workspace:*",
@@ -36,6 +38,7 @@
     "type-fest": "catalog:types",
     "typescript": "catalog:infra",
     "unplugin-auto-import": "^21.0.0",
+    "unplugin-icons": "catalog:infra",
     "unplugin-vue-components": "^31.0.0",
     "vite": "^7.3.1",
     "vue-tsc": "catalog:infra"

apps/admin/src/constants/index.ts

@@ -1,2 +1,3 @@
 export * from "./query-key";
 export * from "./response-code";
+export * from "./ui";

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

@@ -3,7 +3,7 @@
   flex-direction: column;
   height: 100svh;
   overflow: hidden;
-  background-color: #fff2ef;
+  background-color: var(--van-background);
 
   &__main {
     flex: 1;

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

@@ -3,10 +3,15 @@
     <van-nav-bar
       v-if="!isNil(navbarTitle)"
       :title="navbarTitle"
-      left-arrow
+      :left-arrow="props.showBack"
       class="default-layout__navbar"
       @click-left="handleBackClick"
-    />
+      @click-right="emit('clickNavbarRight')"
+    >
+      <template #right>
+        <slot name="right" />
+      </template>
+    </van-nav-bar>
     <slot name="header" />
     <main class="default-layout__main">
       <slot />
@@ -36,13 +41,25 @@ interface DefaultLayoutProps {
    * @default true
    */
   showNavbar?: boolean;
+  /**
+   * 是否显示返回上一页的按钮
+   *
+   * @default true
+   */
+  showBack?: boolean;
 }
 
 const props = withDefaults(defineProps<DefaultLayoutProps>(), {
   title: undefined,
-  showNavbar: true
+  showNavbar: true,
+  showBack: true
 });
 
+const emit = defineEmits<{
+  /** 点击导航栏右侧插槽 */
+  clickNavbarRight: [];
+}>();
+
 useTitleMeta();
 
 const router = useRouter();

apps/admin/src/main.ts

@@ -1,4 +1,6 @@
 import "./global.scss";
+import "vant/es/toast/style";
+import "vant/es/dialog/style";
 
 import { VueQueryPlugin } from "@tanstack/vue-query";
 import dayjs from "dayjs";

apps/admin/src/pages/example/example-how-to-request.vue

@@ -1,7 +1,7 @@
 <template>
   <van-field v-model="account" label="账号"></van-field>
   <van-field v-model="password" label="密码"></van-field>
-  <van-button @click="handleLoginClick">登录</van-button>
+  <van-button :loading="isPending" @click="handleLoginClick">登录</van-button>
 
   <van-field v-model="userId" label="要查询的用户的ID"></van-field>
   <van-button :loading="isFetching" @click="handleRefreshClick">刷新</van-button>
@@ -26,7 +26,7 @@ const account = ref("");
 /** 密码 */
 const password = ref("");
 // 登录（示例）（这里不用写jsdoc /** */，没效果）
-const { mutate: mutateLogin } = useMutation({
+const { mutate: mutateLogin, isPending } = useMutation({
   mutationFn: () =>
     walkAdminService.LoginExample({
       // 这个大括号就是请求参数。是body json还是query params取决于接口的定义（LoginExample）里面是data还是params

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

@@ -1,37 +1,46 @@
 <template>
-  <default-layout :show-navbar="false">
+  <default-layout
+    title="精弘毅行管理后台"
+    :show-back="false"
+    @click-navbar-right="handleSearchClick"
+  >
     <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-group title="数据大盘">
+        <van-cell title="屏峰可视化地图" is-link />
+        <van-cell title="莫干山可视化地图" is-link />
+        <van-cell title="数据表格" is-link />
+      </van-cell-group>
+
+      <van-cell-group title="人员管理">
         <van-cell title="重组队伍" is-link to="/team-rebuild" />
         <div :class="styles.functionButtonContainer">
-          <van-button type="primary" plain :class="styles.functionButton" block>
+          <van-button type="primary" :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 { useRouter } from "vue-router";
+
 import DefaultLayout from "@/layouts/default-layout/index.vue";
 
 import AdminInfo from "./components/admin-info/index.vue";
 import styles from "./index.module.scss";
+
+const router = useRouter();
+
+/** 前往搜索页 */
+const handleSearchClick = () => {
+  router.push("/team-list");
+};
 </script>

apps/admin/src/utils/service.ts

@@ -16,7 +16,7 @@ axiosInstance.interceptors.response.use(
         // TODO:请求错误全局处理
         default:
       }
-      throw new RequestError(body.msg, body.code);
+      throw new RequestError(body.message, body.code);
     }
     return response;
   },

apps/admin/tsconfig.app.json

@@ -2,7 +2,7 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "types": ["vite/client"],
+    "types": ["vite/client", "unplugin-icons/types/vue"],
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "paths": {
       "@/*": ["./src/*"]

apps/admin/types/components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
+    VanIcon: typeof import('vant/es')['Icon']
     VanNavBar: typeof import('vant/es')['NavBar']
   }
 }