From 0b326c4e7606390bc4074d96da9e37bc1b2f16d3 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Tue, 14 Dec 2021 16:41:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F=E7=BB=86?=
=?UTF-8?q?=E8=8A=82=EF=BC=8C=E4=BF=AE=E6=94=B9utils?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/axios.ts | 2 +-
src/styles/common/animation.scss | 23 ++++++++++++++
src/styles/common/mixins/config.scss | 2 +-
src/styles/common/mixins/mixins.scss | 2 +-
src/styles/common/style.scss | 7 +++--
src/styles/common/var.scss | 10 ++++--
src/utils/comp.ts | 34 --------------------
src/utils/index.ts | 13 --------
src/utils/page.ts | 25 +++++++++++++++
src/views/exception/403.vue | 46 +++++++++++++++-------------
src/views/exception/404.vue | 5 ++-
src/views/exception/500.vue | 18 ++++++-----
12 files changed, 98 insertions(+), 89 deletions(-)
create mode 100644 src/styles/common/animation.scss
delete mode 100644 src/utils/comp.ts
create mode 100644 src/utils/page.ts
diff --git a/src/api/axios.ts b/src/api/axios.ts
index 1eb87d16..2d8b9b65 100644
--- a/src/api/axios.ts
+++ b/src/api/axios.ts
@@ -1,7 +1,7 @@
import axios, { AxiosResponse, AxiosRequestConfig } from 'axios'
import { ResultEnum } from "@/enums/httpEnum"
import { ErrorPageNameMap } from "@/enums/pageEnum"
-import { redirectErrorPage } from '@/utils'
+import { redirectErrorPage } from '@/utils/page'
const axiosInstance = axios.create({
baseURL: import.meta.env.DEV ? import.meta.env.VITE_DEV_PATH : import.meta.env.VITE_PRO_PATH,
diff --git a/src/styles/common/animation.scss b/src/styles/common/animation.scss
new file mode 100644
index 00000000..fa284f7a
--- /dev/null
+++ b/src/styles/common/animation.scss
@@ -0,0 +1,23 @@
+.v-modal-enter {
+ animation: v-modal-in 0.2s ease;
+}
+
+.v-modal-leave {
+ animation: v-modal-out 0.2s ease forwards;
+}
+
+@keyframes v-modal-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ }
+}
+
+@keyframes v-modal-out {
+ 0% {
+ }
+ 100% {
+ opacity: 0;
+ }
+}
diff --git a/src/styles/common/mixins/config.scss b/src/styles/common/mixins/config.scss
index 950044ab..3be6d24f 100644
--- a/src/styles/common/mixins/config.scss
+++ b/src/styles/common/mixins/config.scss
@@ -1,4 +1,4 @@
$namespace: 'go';
$theme-light: 'light';
-$theme-dart: 'dart';
+$theme-dark: 'dark';
$state-prefix: 'is-';
diff --git a/src/styles/common/mixins/mixins.scss b/src/styles/common/mixins/mixins.scss
index 3b86be89..8e4dfc08 100644
--- a/src/styles/common/mixins/mixins.scss
+++ b/src/styles/common/mixins/mixins.scss
@@ -15,7 +15,7 @@
}
@mixin go-d($block) {
- $B: $namespace + '-' + $theme-dart + '-' + $block !global;
+ $B: $namespace + '-' + $theme-dark + '-' + $block !global;
.#{$B} {
@content;
}
diff --git a/src/styles/common/style.scss b/src/styles/common/style.scss
index b7bf1f81..a2419cf7 100644
--- a/src/styles/common/style.scss
+++ b/src/styles/common/style.scss
@@ -1,13 +1,14 @@
@import './var.scss';
+@import './animation.scss';
// 毛玻璃
.--background-filter {
- backdrop-filter: $--filter-blur;
- background-color: $--filter-color;
+ backdrop-filter: $--filter-blur-base;
+ background-color: $--filter-color-base;
}
// 边框圆角
.--border-radius {
- border-radius: $--border-radius;
+ border-radius: $--border-radius-base;
overflow: hidden;
}
diff --git a/src/styles/common/var.scss b/src/styles/common/var.scss
index a6d8e03b..ea59ff8b 100644
--- a/src/styles/common/var.scss
+++ b/src/styles/common/var.scss
@@ -1,6 +1,10 @@
// 模糊
-$--filter-blur: blur(2px);
+$--filter-blur-base: blur(2px);
// 毛玻璃
-$--filter-color: rgba(0, 0, 0, 0.07);
+$--filter-color-base: rgba(0, 0, 0, 0.07);
// 边框
-$--border-radius: 5px;
+$--border-radius-base: 5px;
+/// 阴影
+$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
+$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !default;
+$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
diff --git a/src/utils/comp.ts b/src/utils/comp.ts
deleted file mode 100644
index 24bf0bbc..00000000
--- a/src/utils/comp.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component, DefineComponent } from "vue";
-import { App, Plugin, getCurrentInstance } from "vue";
-
-interface Registed {
- [key: string]: boolean;
-}
-let registed: Registed = {};
-
-interface Comp {
- displayName?: string;
- name?: string;
-}
-
-type RegisteComp = (comp: Comp & Plugin) => void;
-
-const registeComp: RegisteComp = comp => {
- const name = comp.displayName || comp.name;
-
- if (name && !registed[name]) {
- const instance = getCurrentInstance();
- const app = instance?.appContext.app;
- if (app) {
- app.use(comp);
- registed[name] = true;
- }
- }
-};
-
-const regComp: (comp: any) => void = comp => {
- const instance = getCurrentInstance();
- const app = instance?.appContext.app;
- app?.component(comp?.name, comp);
-};
-export { registeComp, regComp };
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 122965c4..d69a2050 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,8 +1,5 @@
import { h } from 'vue';
import { NIcon } from 'naive-ui';
-import { ResultEnum } from "@/enums/httpEnum"
-import { ErrorPageNameMap } from "@/enums/pageEnum"
-import router from '@/router';
/**
* * 生成一个用不重复的ID
@@ -24,14 +21,4 @@ export const renderIcon = (icon: any) => {
return () => h(NIcon, null, { default: () => h(icon) });
}
-/**
- * * 错误页重定向
- * @param icon
- * @returns
- */
-export const redirectErrorPage = (code: ResultEnum) => {
- router.push({
- name: ErrorPageNameMap.get(code)
- })
-}
diff --git a/src/utils/page.ts b/src/utils/page.ts
new file mode 100644
index 00000000..f27faf5b
--- /dev/null
+++ b/src/utils/page.ts
@@ -0,0 +1,25 @@
+import { ResultEnum } from "@/enums/httpEnum"
+import { ErrorPageNameMap } from "@/enums/pageEnum"
+import router from '@/router';
+
+/**
+ * * 错误页重定向
+ * @param icon
+ * @returns
+ */
+export const redirectErrorPage = (code: ResultEnum) => {
+ if(!code) return false
+ const pageName = ErrorPageNameMap.get(code)
+ if(!pageName) return false
+ routerTurnByName(pageName)
+}
+
+/**
+ * * 根据名字跳转路由
+ * @param pageName
+ */
+export const routerTurnByName = (pageName: string) => {
+ router.push({
+ name: pageName
+ })
+}
\ No newline at end of file
diff --git a/src/views/exception/403.vue b/src/views/exception/403.vue
index e314d9be..3ca43dde 100644
--- a/src/views/exception/403.vue
+++ b/src/views/exception/403.vue
@@ -1,5 +1,5 @@
<template>
- <div class="flex flex-col justify-center page-container">
+ <div class="go-error">
<div class="text-center">
<img src="~@/assets/images/exception/403.svg" alt="" />
</div>
@@ -11,30 +11,32 @@
</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'
+import { routerTurnByName } from '@/utils/page'
+const router = useRouter()
+function goHome() {
+ routerTurnByName(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>
diff --git a/src/views/exception/404.vue b/src/views/exception/404.vue
index 1933bec1..8e96385f 100644
--- a/src/views/exception/404.vue
+++ b/src/views/exception/404.vue
@@ -13,11 +13,10 @@
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { PageEnum } from '@/enums/pageEnum'
+import { routerTurnByName } from '@/utils/page'
const router = useRouter()
function goHome() {
- router.push({
- name: PageEnum.BASE_HOME_NAME
- })
+ routerTurnByName(PageEnum.BASE_HOME_NAME)
}
</script>
diff --git a/src/views/exception/500.vue b/src/views/exception/500.vue
index 076d274a..3d2fb344 100644
--- a/src/views/exception/500.vue
+++ b/src/views/exception/500.vue
@@ -1,5 +1,5 @@
<template>
- <div class="flex flex-col justify-center page-container">
+ <div class="go-error">
<div class="text-center">
<img src="~@/assets/images/exception/500.svg" alt="" />
</div>
@@ -12,19 +12,21 @@
<script lang="ts" setup>
import { useRouter } from 'vue-router'
+import { PageEnum } from '@/enums/pageEnum'
+import { routerTurnByName } from '@/utils/page'
const router = useRouter()
-const goHome = () => {
- router.push('/')
+function goHome() {
+ routerTurnByName(PageEnum.BASE_HOME_NAME)
}
</script>
<style lang="scss" scoped>
-.page-container {
+@include go(error) {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
width: 100%;
- border-radius: 4px;
- padding: 50px 0;
- height: 100vh;
-
+ padding: 100px 0;
.text-center {
h1 {
color: #666;