refactor: http show message

README.md

@@ -34,3 +34,16 @@ pnpm serve:dev
 ```bash
 pnpm client:dev
 ```
+
+
+## 前端开发规范
+
+1. 不要解构 pinia 的 store
+   - 解构会导致响应式丢失问题（ref 类型也会变成普通类型）
+     - 使用 storeToRefs 非常的麻烦
+   - 带上 store 代码可读性也会更好一点 一眼就能知道数据的来源是哪里
+2. composables 里面不要包含 UI 逻辑
+   1. useMessage 之类的
+   2. router 相关的也不要放进去（不便于测试 我们把 router 划分为 UI 逻辑）
+
+

apps/client/README.md

@@ -1,9 +1,3 @@
 # Client
 
-
-## 开发规范
-
-1. 不要解构 pinia 的 store
-   - 解构会导致响应式丢失问题（ref 类型也会变成普通类型）
-     - 使用 storeToRefs 非常的麻烦
-   - 带上 store 代码可读性也会更好一点 一眼就能知道数据的来源是哪里
+我是前端前端前端

apps/client/api/http.ts

@@ -29,23 +29,27 @@ http.interceptors.response.use(
     if (code === 1) {
       return data;
     } else {
-      console.error(message);
+      apiCodeErrorHandler?.(message)
       return Promise.reject(new Error(message));
     }
   },
   (error) => {
     if (error.response.status) {
-      switch (error.response.status) {
-        case 400:
-          console.error(error.message);
-          break;
-        case 401:
-          const callback = window.location.pathname;
-          window.location.href = `/auth/login?callback=${callback}`;
-          console.error(error.message, "跳转到登录");
-          break;
-      }
+      httpStatusErrorHandler?.(error.message, error.response.status);
       return Promise.reject(error);
     }
   }
 );
+
+
+type ApiCodeErrorHandler = (message: string) => void;
+let apiCodeErrorHandler: ApiCodeErrorHandler;
+export function injectApiCodeErrorHandler(handler: ApiCodeErrorHandler) {
+  apiCodeErrorHandler = handler;
+}
+
+type HttpStatusErrorHandler = (message: string, statusCode: number) => void;
+let httpStatusErrorHandler: HttpStatusErrorHandler
+export function injectHttpStatusErrorHandler(handler: HttpStatusErrorHandler) {
+  httpStatusErrorHandler = handler
+}

apps/client/app.vue

@@ -1,16 +1,22 @@
 <template>
   <NuxtLayout>
     <n-message-provider>
-      <NuxtPage />
+      <HttpErrorProvider>
+        <NuxtPage />
+      </HttpErrorProvider>
     </n-message-provider>
   </NuxtLayout>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import "vfonts/Lato.css";
 import { useUserStore } from "~/store/user";
 
-const userStore = useUserStore();
+useRestoreUser();
+
+function useRestoreUser() {
+  const userStore = useUserStore();
+  userStore.restoreUser();
+}
 
-userStore.restoreUser();
 </script>

apps/client/components/HttpErrorProvider.vue

@@ -0,0 +1,45 @@
+<template>
+  <slot></slot>
+</template>
+
+<script setup lang="ts">
+import {
+  injectApiCodeErrorHandler,
+  injectHttpStatusErrorHandler,
+} from "~/api/http";
+
+useHttpStatusError();
+useApiCodeError();
+
+function useApiCodeError() {
+  const message = useMessage();
+
+  injectApiCodeErrorHandler((msg) => {
+    message.error(msg);
+  });
+}
+
+function useHttpStatusError() {
+  const message = useMessage();
+  const router = useRouter();
+
+  injectHttpStatusErrorHandler(async (errMessage, statusCode) => {
+    switch (statusCode) {
+      case 400:
+        message.error(errMessage);
+        break;
+      case 401:
+        message.error(errMessage, {
+          duration: 500,
+          onLeave() {
+            const callback = window.location.pathname;
+            router.push(`/auth/login?callback=${callback}`);
+          },
+        });
+        break;
+    }
+  });
+}
+</script>
+
+<style scoped></style>

apps/client/components/main/Game.vue

@@ -24,7 +24,7 @@ import Summary from "./Summary.vue";
 import Tips from "./Tips.vue";
 import { useGameMode } from "~/composables/main/game";
 
-const { gameMode, isAnswer, isQuestion } = useGameMode();
+const { isAnswer, isQuestion } = useGameMode();
 </script>
 
 <style scoped></style>

apps/client/pages/Auth/Login.vue

@@ -1,86 +1,100 @@
 <template>
-    <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
-        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-            <img className="mx-auto h-10 w-auto" src="/logo.png" alt="earthworm" />
-            <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
-                Log in to your account
-            </h2>
-        </div>
+  <div
+    className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8"
+  >
+    <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+      <img className="mx-auto h-10 w-auto" src="/logo.png" alt="earthworm" />
+      <h2
+        className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900"
+      >
+        Log in to your account
+      </h2>
+    </div>
 
-        <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-            <n-form ref="formEl" :rules="rules" :model="model">
-                <n-form-item path="phone" label="Phone" required>
-                    <n-input v-model:value="model.phone" @keydown.enter.prevent />
-                </n-form-item>
-                <n-form-item path="password" label="Password" required>
-                    <n-input v-model:value="model.password" type="password" @keydown.enter.prevent />
-                </n-form-item>
-                <n-button type="primary" size="large" block @click="handleLogin">
-                    Log in
-                </n-button>
-            </n-form>
+    <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+      <n-form ref="formEl" :rules="rules" :model="model">
+        <n-form-item path="phone" label="Phone" required>
+          <n-input v-model:value="model.phone" @keydown.enter.prevent />
+        </n-form-item>
+        <n-form-item path="password" label="Password" required>
+          <n-input
+            v-model:value="model.password"
+            type="password"
+            @keydown.enter.prevent
+          />
+        </n-form-item>
+        <n-button type="primary" size="large" block @click="handleLogin">
+          Log in
+        </n-button>
+      </n-form>
 
-            <p className="mt-10 text-center text-sm text-gray-500">
-                Not a account?
-                <NuxtLink href="/auth/signup" className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
-                    Sign up
-                </NuxtLink>
-            </p>
-        </div>
+      <p className="mt-10 text-center text-sm text-gray-500">
+        Not a account?
+        <NuxtLink
+          href="/auth/signup"
+          className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
+        >
+          Sign up
+        </NuxtLink>
+      </p>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { type FormInst, type FormRules } from "naive-ui";
 import { useAuth } from "~/composables/auth";
-import { delay } from '~/utils';
+import { delay } from "~/utils";
 
 interface ModelType {
-    phone: string | null;
-    password: string | null;
+  phone: string | null;
+  password: string | null;
 }
 
 const { login } = useAuth();
 
 const formEl = ref<FormInst | null>(null);
 const model = ref<ModelType>({
-    phone: null,
-    password: null,
+  phone: null,
+  password: null,
 });
 
 const rules: FormRules = {
-    phone: [
-        { required: true, message: "Please input your phone number" },
-        {
-            pattern: /^1[3456789]\d{9}$/,
-            message: "Please input correct phone number",
-        },
-    ],
-    password: [
-        { required: true, message: "Please input your password" },
-        { min: 6, message: "Password length must be greater than 6" },
-    ],
+  phone: [
+    { required: true, message: "Please input your phone number" },
+    {
+      pattern: /^1[3456789]\d{9}$/,
+      message: "Please input correct phone number",
+    },
+  ],
+  password: [
+    { required: true, message: "Please input your password" },
+    { min: 6, message: "Password length must be greater than 6" },
+  ],
 };
 
 const message = useMessage();
 const router = useRouter();
 const route = useRoute();
 
-async function gotoPreviousPage() {
-    await delay(500);
+const handleLogin = () => {
+  function gotoPreviousPage() {
     router.replace(route.query.callback?.toString() ?? "/");
-}
+  }
 
-const handleLogin = () => {
-    formEl.value?.validate(async (errors) => {
-        if (!errors) {
-            await login({
-                phone: model.value.phone ?? "",
-                password: model.value.password ?? "",
-            });
+  formEl.value?.validate(async (errors) => {
+    if (!errors) {
+      await login({
+        phone: model.value.phone ?? "",
+        password: model.value.password ?? "",
+      });
 
-            message.success("login success");
-            await gotoPreviousPage()
-        }
-    });
+      message.success("login success", {
+        duration: 500,
+        onLeave() {
+          gotoPreviousPage();
+        },
+      });
+    }
+  });
 };
 </script>