Merge pull request #15 from zjutjh/feat/infraUpdate

refactor: 迁移主题色定义位置并加深danger主题色；更改遮罩式加载态的delay逻辑；删去首页无用项

Author: j10ccc

apps/admin/src/app.vue

@@ -5,5 +5,5 @@
 </template>
 
 <script setup lang="ts">
-import { THEME_VAR_RECORD } from "@/configs/theme-vars";
+import { THEME_VAR_RECORD } from "@/constants";
 </script>

apps/admin/src/components/loading-container/index.vue

@@ -25,15 +25,16 @@
 <script setup lang="ts">
 import "./index.scss";
 
+import { refDebounced } from "@vueuse/core";
 import type { LoadingProps } from "vant";
-import { ref, watch } from "vue";
+import { computed, toRef } from "vue";
 
 export interface LoadingContainerProps extends Partial<LoadingProps> {
   /** 加载图标下方的文本 */
   text?: string;
   /** 是否正在加载 */
   loading: boolean;
-  /** 加载已经持续多少毫秒时，视觉上显示遮罩，设为0时立即显示。
+  /** 加载状态从false变为true持续多少毫秒后，视觉上才显示遮罩。为0则立即显示
    * @default 0
    */
   delay?: number;
@@ -52,33 +53,8 @@ const props = withDefaults(defineProps<LoadingContainerProps>(), {
 });
 
 /** 遮罩是否视觉上可见 */
-const isOverlayVisible = ref(false);
-/** 使遮罩可见的计时器 */
-let loadingDelayTimer: number | undefined;
-watch(
-  () => props.loading,
-  (newValue) => {
-    // 重置使遮罩可见的计时器
-    if (loadingDelayTimer !== undefined) {
-      clearTimeout(loadingDelayTimer);
-      loadingDelayTimer = undefined;
-    }
-    // 已退出加载状态，立刻将遮罩重置为不可见
-    if (newValue === false) {
-      isOverlayVisible.value = false;
-      return;
-    }
-    // 已进入加载状态
-    if (props.delay === 0) {
-      // 无延时，立刻使遮罩可见
-      isOverlayVisible.value = true;
-      return;
-    }
-    // 延时后使遮罩可见
-    loadingDelayTimer = setTimeout(() => {
-      isOverlayVisible.value = true;
-    }, props.delay);
-  },
-  { immediate: true }
+const isOverlayVisible = refDebounced(
+  toRef(() => props.loading),
+  computed(() => (props.loading ? props.delay : 0))
 );
 </script>

apps/admin/src/configs/theme-vars.ts

@@ -6,3 +6,12 @@ export const BASE_ROOT_FONT_SIZE = 100;
 export const MAX_REM_UNIT_PRECISION = 5;
 /** 最大视口宽度 */
 export const MAX_VIEW_WIDTH = 750;
+
+/** 组件库主题色 */
+export const THEME_VAR_RECORD = {
+  primaryColor: "#F58888",
+  successColor: "#49DF17",
+  warningColor: "#ADDF17",
+  dangerColor: "#E53935",
+  infoColor: "#3A87FA"
+} as const;

apps/admin/src/constants/ui.ts

@@ -1,7 +1,6 @@
 <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>
@@ -10,7 +9,6 @@
 import { ref } from "vue";
 
 // TODO: 从接口中获取adminInfo
-const walkRoute = ref("屏峰全程");
 const walkPoint = ref("XXX");
 const adminName = ref("XXX");
 </script>