添加工具类

2025-06-08 01:17:23 +08:00 · 2020-11-19 11:41:58 +08:00 · 2020-11-19 11:41:58 +08:00 · 854432ea81
commit 854432ea81
parent 3cc8a1f3fe
17 changed files with 403 additions and 36 deletions
--- a/index.html
+++ b/index.html
@ -1,13 +1,259 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
+  <link rel="stylesheet" href="/iconfont.css" />
+  <link rel="stylesheet" href="/animate.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
+  <style>
+    html,
+    body,
+    #app {
+      height: 100%;
+      margin: 0px;
+      padding: 0px;
+    }
+
+    .chromeframe {
+      margin: 0.2em 0;
+      background: #ccc;
+      color: #000;
+      padding: 0.2em 0;
+    }
+
+    #loader-wrapper {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 999999;
+    }
+
+    #loader {
+      display: block;
+      position: relative;
+      left: 50%;
+      top: 50%;
+      width: 150px;
+      height: 150px;
+      margin: -75px 0 0 -75px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      /* COLOR 1 */
+      border-top-color: #FFF;
+      -webkit-animation: spin 2s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -ms-animation: spin 2s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -moz-animation: spin 2s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -o-animation: spin 2s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      animation: spin 2s linear infinite;
+      /* Chrome, Firefox 16+, IE 10+, Opera */
+      z-index: 1001;
+    }
+
+    #loader:before {
+      content: "";
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      right: 5px;
+      bottom: 5px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      /* COLOR 2 */
+      border-top-color: #FFF;
+      -webkit-animation: spin 3s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -moz-animation: spin 3s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -o-animation: spin 3s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -ms-animation: spin 3s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      animation: spin 3s linear infinite;
+      /* Chrome, Firefox 16+, IE 10+, Opera */
+    }
+
+    #loader:after {
+      content: "";
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      right: 15px;
+      bottom: 15px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      /* COLOR 3 */
+      -moz-animation: spin 1.5s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -o-animation: spin 1.5s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -ms-animation: spin 1.5s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      -webkit-animation: spin 1.5s linear infinite;
+      /* Chrome, Opera 15+, Safari 5+ */
+      animation: spin 1.5s linear infinite;
+      /* Chrome, Firefox 16+, IE 10+, Opera */
+    }
+
+    @-webkit-keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(0deg);
+        /* IE 9 */
+        transform: rotate(0deg);
+        /* Firefox 16+, IE 10+, Opera */
+      }
+
+      100% {
+        -webkit-transform: rotate(360deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(360deg);
+        /* IE 9 */
+        transform: rotate(360deg);
+        /* Firefox 16+, IE 10+, Opera */
+      }
+    }
+
+    @keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(0deg);
+        /* IE 9 */
+        transform: rotate(0deg);
+        /* Firefox 16+, IE 10+, Opera */
+      }
+
+      100% {
+        -webkit-transform: rotate(360deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(360deg);
+        /* IE 9 */
+        transform: rotate(360deg);
+        /* Firefox 16+, IE 10+, Opera */
+      }
+    }
+
+    #loader-wrapper .loader-section {
+      position: fixed;
+      top: 0;
+      width: 51%;
+      height: 100%;
+      background: #5d94f8;
+      /* Old browsers */
+      z-index: 1000;
+      -webkit-transform: translateX(0);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: translateX(0);
+      /* IE 9 */
+      transform: translateX(0);
+      /* Firefox 16+, IE 10+, Opera */
+    }
+
+    #loader-wrapper .loader-section.section-left {
+      left: 0;
+    }
+
+    #loader-wrapper .loader-section.section-right {
+      right: 0;
+    }
+
+    /* Loaded */
+    .loaded #loader-wrapper .loader-section.section-left {
+      -webkit-transform: translateX(-100%);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: translateX(-100%);
+      /* IE 9 */
+      transform: translateX(-100%);
+      /* Firefox 16+, IE 10+, Opera */
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    }
+
+    .loaded #loader-wrapper .loader-section.section-right {
+      -webkit-transform: translateX(100%);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: translateX(100%);
+      /* IE 9 */
+      transform: translateX(100%);
+      /* Firefox 16+, IE 10+, Opera */
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    }
+
+    .loaded #loader {
+      opacity: 0;
+      -webkit-transition: all 0.3s ease-out;
+      transition: all 0.3s ease-out;
+    }
+
+    .loaded #loader-wrapper {
+      visibility: hidden;
+      -webkit-transform: translateY(-100%);
+      /* Chrome, Opera 15+, Safari 3.1+ */
+      -ms-transform: translateY(-100%);
+      /* IE 9 */
+      transform: translateY(-100%);
+      /* Firefox 16+, IE 10+, Opera */
+      -webkit-transition: all 0.3s 1s ease-out;
+      transition: all 0.3s 1s ease-out;
+    }
+
+    /* JavaScript Turned Off */
+    .no-js #loader-wrapper {
+      display: none;
+    }
+
+    .no-js h1 {
+      color: #222222;
+    }
+
+    #loader-wrapper .load_title {
+      font-family: 'Open Sans';
+      color: #FFF;
+      font-size: 19px;
+      width: 100%;
+      text-align: center;
+      z-index: 9999999999999;
+      position: absolute;
+      top: 60%;
+      opacity: 1;
+      line-height: 30px;
+    }
+
+    #loader-wrapper .load_title span {
+      font-weight: normal;
+      font-style: italic;
+      font-size: 13px;
+      color: #FFF;
+      opacity: 0.5;
+    }
+  </style>
 </head>
+
 <body>
-  <div id="app"></div>
+  <div id="app">
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+      <div class="loader-section section-left"></div>
+      <div class="loader-section section-right"></div>
+      <div class="load_title">加载中,请耐心等待...
+        <br>
+        <span id="version">V0.0.1</span>
+      </div>
+    </div>
+  </div>
  <script type="module" src="/src/main.ts"></script>
 </body>
-</html>
+
+</html>
--- a/package-lock.json
+++ b/package-lock.json
@ -1207,9 +1207,9 @@
      "dev": true
    },
    "@types/node": {
-      "version": "14.14.7",
-      "resolved": "https://registry.npm.taobao.org/@types/node/download/@types/node-14.14.7.tgz?cache=0&sync_timestamp=1604951305221&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-14.14.7.tgz",
-      "integrity": "sha1-jqHo+OriQwz0QFZLmMbfzh7FlF0=",
+      "version": "14.14.8",
+      "resolved": "http://192.168.250.101:4873/@types%2fnode/-/node-14.14.8.tgz",
+      "integrity": "sha1-ISe9gZSalci30yQPMlQ1LXJWOuw=",
      "dev": true
    },
    "@types/normalize-package-data": {
@ -1982,7 +1982,7 @@
    },
    "@vue/compiler-sfc": {
      "version": "3.0.2",
-      "resolved": "https://registry.npm.taobao.org/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.2.tgz",
+      "resolved": "http://192.168.250.101:4873/@vue%2fcompiler-sfc/-/compiler-sfc-3.0.2.tgz",
      "integrity": "sha1-IscP7XLDR6TV+i2y6AWUsxk9zlc=",
      "dev": true,
      "requires": {
@ -16073,7 +16073,7 @@
    },
    "vue": {
      "version": "3.0.2",
-      "resolved": "https://registry.npm.taobao.org/vue/download/vue-3.0.2.tgz",
+      "resolved": "http://192.168.250.101:4873/vue/-/vue-3.0.2.tgz",
      "integrity": "sha1-nVt7KYPzXmSjTRPHydaDEjn+yjw=",
      "requires": {
        "@vue/compiler-dom": "3.0.2",
--- a/package.json
+++ b/package.json
@ -12,13 +12,14 @@
  "dependencies": {
    "await-to-js": "^2.1.1",
    "axios": "^0.21.0",
-    "vue": "^3.0.0",
+    "vue": "^3.0.2",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
+    "@types/node": "^14.14.8",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
@ -28,7 +29,7 @@
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/compiler-sfc": "^3.0.2",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
@ -44,4 +45,4 @@
    "vite": "^1.0.0-rc.9",
    "vue-jest": "^5.0.0-0"
  }
-}
+}
--- a/public/animate.css
+++ b/public/animate.css
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/iconfont.css
+++ b/public/iconfont.css
@ -0,0 +1,18 @@
+@font-face {
+  font-family: "iconfont"; /* project id 1098500 */
+  src: url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.eot");
+  src: url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.eot?#iefix")
+      format("embedded-opentype"),
+    url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.woff2") format("woff2"),
+    url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.woff") format("woff"),
+    url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.ttf") format("truetype"),
+    url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.svg#iconfont") format("svg");
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/src/assets/bg.png
+++ b/src/assets/bg.png
--- a/src/assets/index.css
+++ b/src/assets/index.css
@ -0,0 +1,23 @@
+/* 公共样式 */
+
+/* 样式重置 */
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.login,
+.register {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  position: relative;
+  background: url("./bg.png") no-repeat center;
+  background-size: cover;
+  position: relative;
+}
+
--- a/src/assets/login.png
+++ b/src/assets/login.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/main.ts
+++ b/src/main.ts
@ -4,6 +4,9 @@ import router from './router'
 import store from './store'
 import EnclosureHttp from "./api/utils/core"

+// 导入公共样式
+import "./assets/index.css"
+
 const app = createApp(App)

 // 全局注册Axios
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,5 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import Home from '../views/home.vue'
+import { setToken, getToken } from "../utils/token"

 const routes: Array<RouteRecordRaw> = [
  {
@ -7,14 +8,22 @@ const routes: Array<RouteRecordRaw> = [
    name: 'home',
    component: Home
  },
-  // {
-  //   path: '/about',
-  //   name: 'About',
-  //   // route level code-splitting
-  //   // this generates a separate chunk (about.[hash].js) for this route
-  //   // which is lazy-loaded when the route is visited.
-  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  // }
+  {
+    path: '/login',
+    name: 'login',
+    // route level code-splitting
+    // this generates a separate chunk (login.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "login" */ '../views/login.vue')
+  },
+  {
+    path: '/register',
+    name: 'register',
+    // route level code-splitting
+    // this generates a separate chunk (register.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "register" */ '../views/register.vue')
+  }
 ]

 const router = createRouter({
@ -22,4 +31,11 @@ const router = createRouter({
  routes
 })

+const whiteList = ["/login", "/register"]
+
+router.beforeEach((to, _from, next) => {
+  const token = getToken()
+  whiteList.indexOf(to.path) !== -1 || token ? next() : next("/login") // 全部重定向到登录页
+})
+
 export default router
--- a/src/utils/token.ts
+++ b/src/utils/token.ts
@ -0,0 +1,19 @@
+/**
+ * 处理token的工具
+ */
+
+// 存
+export function setToken(token: string): void {
+  token && sessionStorage.setItem("Token", token)
+}
+
+// 取
+export function getToken(): string {
+  let token = sessionStorage.getItem("Token") && JSON.parse(sessionStorage.getItem("Token") || "");
+  return token;
+}
+
+// 删
+export function delToken(): void {
+  sessionStorage.removeItem("Token");
+}
--- a/src/views/home.vue
+++ b/src/views/home.vue
@ -1,18 +1,3 @@
 <template>
-  <div>{{ text }}</div>
-</template>
-
-<script lang="ts">
-import { ref, onMounted, nextTick } from "vue"
-export default {
-  mounted() {
-    this.$http.request("get", "/getApi")
-  },
-  setup() {
-    const text = ref("vue-ts")
-    return {
-      text,
-    }
-  },
-}
-</script>
+  <div>Home</div>
+</template>
--- a/src/views/login.vue
+++ b/src/views/login.vue
@ -0,0 +1,22 @@
+<template>
+  <div class="login">{{ text }}</div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue"
+export default {
+  mounted() {
+    // @ts-ignore
+    this.$http.request("get", "/getApi")
+  },
+  setup() {
+    const text = ref("login")
+    return {
+      text,
+    }
+  },
+}
+</script>
+
+<style scoped>
+</style>
--- a/src/views/register.vue
+++ b/src/views/register.vue
@ -0,0 +1,22 @@
+<template>
+  <div class="register">{{ text }}</div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue"
+export default {
+  mounted() {
+    // @ts-ignore
+    this.$http.request("get", "/getApi")
+  },
+  setup() {
+    const text = ref("register")
+    return {
+      text,
+    }
+  },
+}
+</script>
+
+<style scoped>
+</style>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -12,6 +12,7 @@
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
+    "resolveJsonModule": true, // 包含导入的模块。json的扩展
    "types": [
      "webpack-env",
      "jest"
@ -37,5 +38,5 @@
  ],
  "exclude": [
    "node_modules"
-  ]
+  ],
 }