fix:路由处理,CSS处理，样式处理，全局变量处理

src/App.vue

@@ -34,7 +34,9 @@ const getThemeOverrides = computed(
   }
 )
 
-const getDarkTheme = computed(() => designStore.darkTheme ? darkTheme : undefined)
+const getDarkTheme = computed(() =>
+  designStore.darkTheme ? darkTheme : undefined
+)
 </script>
 
 <style lang="scss"></style>

src/api/axios.ts

@@ -0,0 +1,38 @@
+import axios, { AxiosResponse, AxiosRequestConfig } from 'axios'
+import { ResultEnum } from "@/enums/httpEnum"
+import { ErrorPageNameMap } from "@/enums/pageEnum"
+import { redirectErrorPage } from '@/utils'
+
+const axiosInstance = axios.create({
+  baseURL: import.meta.env.DEV ? import.meta.env.VITE_DEV_PATH : import.meta.env.VITE_PRO_PATH,
+  timeout: ResultEnum.TIMEOUT,
+})
+
+axiosInstance.interceptors.request.use(
+  (config: AxiosRequestConfig) => {
+    config.headers = {}
+    config.data = {}
+    return config
+  },
+  (error: AxiosRequestConfig) => {
+    Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+axiosInstance.interceptors.response.use(
+  (res: AxiosResponse) => {
+    const { code } = res.data as { code: number }
+    if (code === ResultEnum.DATA_SUCCESS) return Promise.resolve(res.data)
+    // 重定向
+    if (ErrorPageNameMap.get(code)) redirectErrorPage(code)
+    return Promise.reject(res.data)
+  },
+  (err: AxiosResponse) => {
+    const { code } = err.data as { code: number }
+    if (ErrorPageNameMap.get(code)) redirectErrorPage(code)
+    Promise.reject(err)
+  }
+)
+
+export default axiosInstance

src/api/http.ts

@@ -0,0 +1,34 @@
+import axiosInstance from './axios'
+import { RequestEnum, ContentTypeEnum } from '@/enums/httpEnum'
+
+// 缓存处理
+const filterUrl = (url: string) => {
+  return url.indexOf('?') !== -1 ? `${url}&time=${new Date().getTime()}` : `${url}?time=${new Date().getTime()}`
+}
+
+export const get = (params: object, url: string) => {
+  return axiosInstance({
+    url: filterUrl(url),
+    method: RequestEnum.GET,
+    params
+  })
+}
+
+export const post = (params: object, url: string, headersType: string) => {
+  return axiosInstance({
+    url: url,
+    method: RequestEnum.POST,
+    data: params,
+    headers: {
+      'Content-Type': headersType || ContentTypeEnum.JSON
+    }
+  })
+}
+
+export const del = (params: object, url: string) => {
+  return axiosInstance({
+    url: filterUrl(url),
+    method: RequestEnum.DELETE,
+    params
+  })
+}

src/enums/httpEnum.ts

@@ -2,21 +2,23 @@
  * @description: 请求结果集
  */
 export enum ResultEnum {
+  DATA_SUCCESS = 0,
   SUCCESS = 200,
-  ERROR = -1,
+  SERVER_ERROR = 500,
+  SERVER_FORBIDDEN = 403,
+  NOT_FOUND = 404,
   TIMEOUT = 10042,
-  TYPE = 'success',
 }
 
 /**
  * @description: 请求方法
  */
 export enum RequestEnum {
-  GET = 'GET',
-  POST = 'POST',
-  PATCH = 'PATCH',
-  PUT = 'PUT',
-  DELETE = 'DELETE',
+  GET = 'get',
+  POST = 'post',
+  PATCH = 'patch',
+  PUT = 'put',
+  DELETE = 'delete',
 }
 
 /**

src/enums/pageEnum.ts

@@ -1,15 +1,26 @@
+import { ResultEnum } from "@/enums/httpEnum"
+
 export enum PageEnum {
   // 登录
   BASE_LOGIN = '/login',
   BASE_LOGIN_NAME = 'Login',
+
   //重定向
   REDIRECT = '/redirect',
   REDIRECT_NAME = 'Redirect',
+
   // 首页
   BASE_HOME = '/project',
   BASE_HOME_NAME = 'Project',
-  //首页跳转默认路由
-  BASE_HOME_REDIRECT = '/project',
+
   // 错误
-  ERROR_PAGE_NAME = 'ErrorPage',
+  ERROR_PAGE_NAME_403 = 'ErrorPage403',
+  ERROR_PAGE_NAME_404 = 'ErrorPage404',
+  ERROR_PAGE_NAME_500 = 'ErrorPage500',
 }
+
+export const ErrorPageNameMap = new Map([
+  [ResultEnum.NOT_FOUND, PageEnum.ERROR_PAGE_NAME_404],
+  [ResultEnum.SERVER_FORBIDDEN, PageEnum.ERROR_PAGE_NAME_403],
+  [ResultEnum.SERVER_ERROR, PageEnum.ERROR_PAGE_NAME_500],
+])

src/layout/components/Main/index.vue

@@ -9,8 +9,3 @@
     </template>
   </RouterView>
 </template>
-
-<script lang="ts" setup>
-import { defineProps} from 'vue'
-const props = defineProps(['notNeedKey', 'animate'])
-</script>

src/main.ts

@@ -5,7 +5,7 @@ import { setupStore } from '@/store';
 import { setupNaive, setupDirectives } from '@/plugins';
 import { AppProvider } from '@/components/Application';
 
-async function bootstrap() {
+async function appInit() {
   const appProvider = createApp(AppProvider);
 
   const app = createApp(App);
@@ -31,4 +31,4 @@ async function bootstrap() {
   app.mount('#app', true);
 }
 
-void bootstrap();
+void appInit();

src/plugins/globalMethods.ts

@@ -1,5 +1,5 @@
 /**
- * 注册全局方法 待完善
+ * 注册全局方法
  * @param app
  */
 export function setupGlobalMethods() {}

src/router/base.ts

@@ -1,42 +1,70 @@
+import { RouteRecordRaw } from 'vue-router'
 import type { AppRouteRecordRaw } from '@/router/types';
-import { ErrorPage, RedirectName, Layout } from '@/router/constant';
+import { ErrorPage404, ErrorPage403, ErrorPage500, Layout } from '@/router/constant';
+import { PageEnum } from '@/enums/pageEnum'
+
+
+export const LoginRoute: RouteRecordRaw = {
+  path: '/login',
+  name: 'Login',
+  component: () => import('@/views/login/index.vue'),
+  meta: {
+    title: '登录',
+  },
+};
+
+export const HttpErrorPage: RouteRecordRaw[] = [
+  {
+    path: '/error/404',
+    name: PageEnum.ERROR_PAGE_NAME_404,
+    component: ErrorPage404,
+    meta: {
+      title: PageEnum.ERROR_PAGE_NAME_404,
+    },
+  },
+  {
+    path: '/error/403',
+    name: PageEnum.ERROR_PAGE_NAME_403,
+    component: ErrorPage403,
+    meta: {
+      title: PageEnum.ERROR_PAGE_NAME_403,
+    },
+  },
+  {
+    path: '/error/500',
+    name: PageEnum.ERROR_PAGE_NAME_500,
+    component: ErrorPage500,
+    meta: {
+      title: PageEnum.ERROR_PAGE_NAME_500,
+    },
+  },
+]
 
 // 404 on a page
 export const ErrorPageRoute: AppRouteRecordRaw = {
   path: '/:path(.*)*',
   name: 'ErrorPage',
-  component: Layout,
+  component: ErrorPage404,
   meta: {
-    title: 'ErrorPage',
+    title: PageEnum.ERROR_PAGE_NAME_404,
     hideBreadcrumb: true,
-  },
-  children: [
-    {
-      path: '/:path(.*)*',
-      name: 'ErrorPageSon',
-      component: ErrorPage,
-      meta: {
-        title: 'ErrorPage',
-        hideBreadcrumb: true,
-      },
-    },
-  ],
+  }
 };
 
 export const RedirectRoute: AppRouteRecordRaw = {
   path: '/redirect',
-  name: RedirectName,
+  name: PageEnum.REDIRECT_NAME,
   component: Layout,
   meta: {
-    title: RedirectName,
+    title: PageEnum.REDIRECT_NAME,
   },
   children: [
     {
       path: '/redirect/:path(.*)',
-      name: RedirectName,
+      name: PageEnum.REDIRECT_NAME,
       component: () => import('@/views/redirect/index.vue'),
       meta: {
-        title: RedirectName,
+        title: PageEnum.REDIRECT_NAME,
         hideBreadcrumb: true,
       },
     },

src/router/constant.ts

@@ -1,6 +1,8 @@
-export const RedirectName = 'Redirect';
+export const ErrorPage404 = () => import('@/views/exception/404.vue');
 
-export const ErrorPage = () => import('@/views/exception/404.vue');
+export const ErrorPage403 = () => import('@/views/exception/403.vue');
+
+export const ErrorPage500 = () => import('@/views/exception/500.vue');
 
 export const Layout = () => import('@/layout/index.vue');
 

src/router/index.ts

@@ -1,9 +1,10 @@
-import type { App } from 'vue';
+import type { App } from 'vue'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import { RedirectRoute } from '@/router/base';
-import { createRouterGuards } from './router-guards';
-import { PageEnum } from '@/enums/pageEnum';
+import { RedirectRoute } from '@/router/base'
+import { createRouterGuards } from './router-guards'
+import { PageEnum } from '@/enums/pageEnum'
 import modules from '@/router/modules'
+import { HttpErrorPage, LoginRoute } from '@/router/base'
 
 const RootRoute: Array<RouteRecordRaw> = [
   {
@@ -15,24 +16,15 @@ const RootRoute: Array<RouteRecordRaw> = [
       title: 'Root',
     },
     children: [
+      ...HttpErrorPage,
       modules.projectRoutes
     ]
   }
 ]
 
-export const LoginRoute: RouteRecordRaw = {
-  path: '/login',
-  name: 'Login',
-  component: () => import('@/views/login/index.vue'),
-  meta: {
-    title: '登录',
-  },
-};
 
 export const constantRouter: any[] = [LoginRoute, ...RootRoute, RedirectRoute];
 
-console.log(constantRouter)
-
 const router = createRouter({
   history: createWebHashHistory(''),
   routes: constantRouter,
@@ -42,6 +34,6 @@ const router = createRouter({
 export function setupRouter(app: App) {
   app.use(router);
   // 创建路由守卫
-  createRouterGuards(router);
+  createRouterGuards(router)
 }
 export default router

src/router/router-guards.ts

@@ -1,6 +1,5 @@
-import type { RouteRecordRaw } from 'vue-router';
 import { Router } from 'vue-router';
-import { ErrorPageRoute } from '@/router/base';
+import { PageEnum } from '@/enums/pageEnum'
 
 export function createRouterGuards(router: Router) {
   // 前置
@@ -8,14 +7,12 @@ export function createRouterGuards(router: Router) {
     const Loading = window['$loading'] || null;
     Loading && Loading.start();
 
-    //添加404
-    const isErrorPage = router.getRoutes().findIndex((item) => item.name === ErrorPageRoute.name);
+    console.log(to)
+    const isErrorPage = router.getRoutes().findIndex((item) => item.name === to.name);
     if (isErrorPage === -1) {
-      router.addRoute(ErrorPageRoute as unknown as RouteRecordRaw);
+      next({ name: PageEnum.ERROR_PAGE_NAME_404 })
     }
-
     next()
-    Loading && Loading.finish();
   })
 
   router.afterEach((to, _, failure) => {

src/styles/common/mixins/config.scss

@@ -0,0 +1,4 @@
+$namespace: 'go';
+$theme-light: 'light';
+$theme-dart: 'dart';
+$state-prefix: 'is-';

src/styles/common/mixins/mixins.scss

@@ -0,0 +1,30 @@
+@import './config.scss';
+
+@mixin go($block) {
+  $B: $namespace + '-' + $block !global;
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin go-l($block) {
+  $B: $namespace + '-' + $theme-light + '-' + $block !global;
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin go-d($block) {
+  $B: $namespace + '-' + $theme-dart + '-' + $block !global;
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}

src/styles/common/style.scss

@@ -0,0 +1,13 @@
+@import './var.scss';
+
+// 毛玻璃
+.--background-filter {
+  backdrop-filter: $--filter-blur;
+  background-color: $--filter-color;
+}
+
+// 边框圆角
+.--border-radius {
+  border-radius: $--border-radius;
+  overflow: hidden;
+}

src/styles/common/var.scss

@@ -0,0 +1,6 @@
+// 模糊
+$--filter-blur: blur(2px);
+// 毛玻璃
+$--filter-color: rgba(0, 0, 0, 0.07);
+// 边框
+$--border-radius: 5px;

src/styles/global/style.scss

@@ -1,9 +0,0 @@
-@import url(./var.scss);
-// 毛玻璃
-.bg-filter {
-  backdrop-filter: blur(2px);
-  background-color: rgba(0, 0, 0, 0.07);
-}
-.border {
-  border-radius: $radius;
-}

src/styles/global/var.scss

@@ -1,2 +0,0 @@
-// 边框
-$radius: 5px;

src/utils/index.ts

@@ -1,12 +1,14 @@
-import { h, unref } from 'vue';
-import { NIcon, NTag } from 'naive-ui';
-import type { App, Plugin } from 'vue';
+import { h } from 'vue';
+import { NIcon } from 'naive-ui';
+import { ResultEnum } from "@/enums/httpEnum"
+import { ErrorPageNameMap } from "@/enums/pageEnum"
+import router from '@/router';
 
 /**
- * 生成一个用不重复的ID
+ * * 生成一个用不重复的ID
  * @param { Number } randomLength
  */
-function getUUID(randomLength: number) {
+export function getUUID(randomLength: number) {
   return Number(
     Math.random()
       .toString()
@@ -16,28 +18,20 @@ function getUUID(randomLength: number) {
 
 
 /**
- * render new Tag
- * */
- const newTagColors = { color: '#f90', textColor: '#fff', borderColor: '#f90' };
- export function renderNew(type = 'warning', text = 'New', color: object = newTagColors) {
-   return () =>
-     h(
-       NTag as any,
-       {
-         type,
-         round: true,
-         size: 'small',
-         color,
-       },
-       { default: () => text }
-     );
- }
-
-/**
- * render 图标
- * */
-export function renderIcon(icon: any) {
+ * * render 图标
+ */
+export const renderIcon = (icon: any) => {
   return () => h(NIcon, null, { default: () => h(icon) });
 }
 
-export { getUUID };
+/**
+ * * 错误页重定向
+ * @param icon 
+ * @returns 
+ */
+export const redirectErrorPage = (code: ResultEnum) => {
+  router.push({
+    name: ErrorPageNameMap.get(code)
+  })
+}
+

src/views/exception/404.vue

@@ -1,40 +1,43 @@
 <template>
-  <div class="flex flex-col justify-center page-container">
+  <div class="go-error">
     <div class="text-center">
       <img src="~@/assets/images/exception/404.svg" alt="" />
     </div>
     <div class="text-center">
       <h1 class="text-base text-gray-500">抱歉，你访问的页面不存在</h1>
-      <n-button type="info" @click="goHome">回到首页</n-button>
     </div>
+    <n-button type="info" @click="goHome">回到首页</n-button>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { useRouter } from 'vue-router';
-  const router = useRouter();
-  function goHome() {
-    router.push('/');
-  }
+import { useRouter } from 'vue-router'
+import { PageEnum } from '@/enums/pageEnum'
+const router = useRouter()
+function goHome() {
+  router.push({
+    name: PageEnum.BASE_HOME_NAME
+  })
+}
 </script>
 
 <style lang="scss" scoped>
-  .page-container {
-    width: 100%;
-    border-radius: 4px;
-    padding: 50px 0;
-    height: 100vh;
-
-    .text-center {
-      h1 {
-        color: #666;
-        padding: 20px 0;
-      }
-    }
-
-    img {
-      width: 350px;
-      margin: 0 auto;
+@include go(error) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 100px 0;
+  .text-center {
+    h1 {
+      color: #666;
+      padding: 20px 0;
     }
   }
+
+  img {
+    width: 350px;
+    margin: 0 auto;
+  }
+}
 </style>

src/views/login/index.vue

@@ -1,68 +1,70 @@
 <template>
-  <div class="view-account">
-    <div class="view-account-header"></div>
-    <div class="view-account-container">
-      <div class="view-account-top">
-        <div class="view-account-top-logo">
-          <img src="~@/assets/images/logo.png" alt="" />
+  <div class="go-login">
+    <div class="login-account">
+      <div class="login-account-header"></div>
+      <div class="login-account-container">
+        <div class="login-account-top">
+          <div class="login-account-top-logo">
+            <img src="~@/assets/images/logo.png" alt="" />
+          </div>
+          <div class="login-account-top-desc">
+            GoView
+          </div>
         </div>
-        <div class="view-account-top-desc">
-          GoView
-        </div>
-      </div>
-      <div class="view-account-form">
-        <n-form
-          ref="formRef"
-          label-placement="left"
-          size="large"
-          :model="formInline"
-          :rules="rules"
-        >
-          <n-form-item path="username">
-            <n-input
-              v-model:value="formInline.username"
-              placeholder="请输入用户名"
-            >
-              <template #prefix>
-                <n-icon size="18" color="#808695">
-                  <PersonOutline />
-                </n-icon>
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item path="password">
-            <n-input
-              v-model:value="formInline.password"
-              type="password"
-              show-password-toggle
-              placeholder="请输入密码"
-            >
-              <template #prefix>
-                <n-icon size="18" color="#808695">
-                  <LockClosedOutline />
-                </n-icon>
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item class="default-color">
-            <div class="flex justify-between">
-              <div class="flex-initial">
-                <n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
+        <div class="login-account-form">
+          <n-form
+            ref="formRef"
+            label-placement="left"
+            size="large"
+            :model="formInline"
+            :rules="rules"
+          >
+            <n-form-item path="username">
+              <n-input
+                v-model:value="formInline.username"
+                placeholder="请输入用户名"
+              >
+                <template #prefix>
+                  <n-icon size="18" color="#808695">
+                    <PersonOutline />
+                  </n-icon>
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item path="password">
+              <n-input
+                v-model:value="formInline.password"
+                type="password"
+                show-password-toggle
+                placeholder="请输入密码"
+              >
+                <template #prefix>
+                  <n-icon size="18" color="#808695">
+                    <LockClosedOutline />
+                  </n-icon>
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item class="default-color">
+              <div class="flex justify-between">
+                <div class="flex-initial">
+                  <n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
+                </div>
               </div>
-            </div>
-          </n-form-item>
-          <n-form-item>
-            <n-button
-              type="primary"
-              @click="handleSubmit"
-              size="large"
-              :loading="loading"
-              block
-            >
-              登录
-            </n-button>
-          </n-form-item>
-        </n-form>
+            </n-form-item>
+            <n-form-item>
+              <n-button
+                type="primary"
+                @click="handleSubmit"
+                size="large"
+                :loading="loading"
+                block
+              >
+                登录
+              </n-button>
+            </n-form-item>
+          </n-form>
+        </div>
       </div>
     </div>
   </div>
@@ -72,10 +74,7 @@
 import { reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMessage } from 'naive-ui'
-import {
-  PersonOutline,
-  LockClosedOutline,
-} from '@vicons/ionicons5'
+import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
 
 interface FormState {
   username: string
@@ -117,46 +116,48 @@ const handleSubmit = (e: Event) => {
 </script>
 
 <style lang="scss" scoped>
-.view-account {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: auto;
-  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
+@include go(login) {
+  .login-account {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: auto;
+    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
 
-  &-container {
-    flex: 1;
-    padding: 32px 0;
-    width: 384px;
-    margin: 0 auto;
-    margin-top: 100px;
-  }
-
-  &-top {
-    padding: 32px 0;
-    text-align: center;
-
-    &-desc {
-      font-size: 14px;
-      color: #808695;
+    &-container {
+      flex: 1;
+      padding: 32px 0;
+      width: 384px;
+      margin: 0 auto;
+      margin-top: 100px;
     }
-  }
 
-  &-other {
-    width: 100%;
-  }
+    &-top {
+      padding: 32px 0;
+      text-align: center;
 
-  .default-color {
-    color: #515a6e;
+      &-desc {
+        font-size: 14px;
+        color: #808695;
+      }
+    }
 
-    .ant-checkbox-wrapper {
+    &-other {
+      width: 100%;
+    }
+
+    .default-color {
       color: #515a6e;
+
+      .ant-checkbox-wrapper {
+        color: #515a6e;
+      }
     }
   }
 }
 
 @media (min-width: 768px) {
-  .view-account {
+  .login-account {
     background-repeat: no-repeat;
     background-position: 50%;
     background-size: 100%;