From c32f468aeef2e66a93bb89e06b407772e320c658 Mon Sep 17 00:00:00 2001 From: icssoa <615206459@qq.com> Date: Wed, 4 Aug 2021 10:05:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0loading=EF=BC=8C=E8=A7=A3?= =?UTF-8?q?=E5=86=B3=20elm=20=E4=B8=AD=E6=96=87=E6=98=BE=E7=A4=BA=E5=BC=82?= =?UTF-8?q?=E5=B8=B8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 72 ++++++++++++++++++++- package.json | 6 +- src/App.vue | 52 ++++++++++++++- src/cool/modules/base/pages/login/index.vue | 7 +- src/cool/modules/base/store/app.ts | 6 -- src/main.ts | 4 +- yarn.lock | 35 +++------- 7 files changed, 139 insertions(+), 43 deletions(-) diff --git a/index.html b/index.html index 089bde0..e0254d1 100644 --- a/index.html +++ b/index.html @@ -16,8 +16,13 @@ body, #app { height: 100%; + } + + * { margin: 0; padding: 0; + font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", + "Microsoft YaHei", "微软雅黑", Arial, sans-serif; } .preload { @@ -43,12 +48,13 @@ color: #fff; letter-spacing: 5px; font-weight: bold; + margin-bottom: 30px; } .preload .title { color: #fff; font-size: 14px; - margin-bottom: 10px; + margin: 30px 0 20px 0; } .preload .sub-title { @@ -66,6 +72,69 @@ color: #ababab; text-decoration: none; } + + .preload .loading { + height: 30px; + width: 30px; + border-radius: 30px; + border: 7px solid currentColor; + border-bottom-color: #2f3447 !important; + position: relative; + animation: r 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67), + bc 2s infinite ease-in; + transform: rotate(0deg); + } + + @keyframes r { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + .preload .loading::after, + .preload .loading::before { + content: ""; + display: inline-block; + position: absolute; + bottom: -2px; + height: 7px; + width: 7px; + border-radius: 10px; + background-color: currentColor; + } + + .preload .loading::after { + left: -1px; + } + + .preload .loading::before { + right: -1px; + } + + @keyframes bc { + 0% { + color: #689cc5; + } + + 25% { + color: #b3b7e2; + } + + 50% { + color: #93dbe9; + } + + 75% { + color: #abbd81; + } + + 100% { + color: #689cc5; + } + } @@ -73,6 +142,7 @@

COOL-ADMIN

+

正在加载资源...

初次加载资源可能需要较多时间 请耐心等待

diff --git a/package.json b/package.json index 7d805fa..b8487c8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "front-next", - "version": "0.5.4", + "version": "0.6.0", "scripts": { "dev": "vite", "build": "vite build", @@ -11,13 +11,13 @@ "dependencies": { "array.prototype.flat": "^1.2.4", "axios": "^0.21.1", - "cl-admin-crud-vue3": "^0.4.0", + "cl-admin-crud-vue3": "^0.5.3", "clipboard": "^2.0.8", "clone-deep": "^4.0.1", "codemirror": "^5.62.0", "core-js": "^3.6.5", "echarts": "^5.0.2", - "element-plus": "1.0.2-beta.45", + "element-plus": "^1.0.2-beta.65", "file-saver": "^2.0.5", "glob": "^7.1.6", "js-beautify": "^1.13.5", diff --git a/src/App.vue b/src/App.vue index fca4b9f..dc11af8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,55 @@ + + + + diff --git a/src/cool/modules/base/pages/login/index.vue b/src/cool/modules/base/pages/login/index.vue index c831b50..f88a9fe 100644 --- a/src/cool/modules/base/pages/login/index.vue +++ b/src/cool/modules/base/pages/login/index.vue @@ -4,7 +4,7 @@

COOL ADMIN是一款快速开发后台权限管理系统

- + - 登录
@@ -216,8 +216,7 @@ export default defineComponent({ .submit-btn { margin-top: 40px; - border-radius: 30px; - padding: 10px 40px; + padding: 9px 40px; color: #000; } } diff --git a/src/cool/modules/base/store/app.ts b/src/cool/modules/base/store/app.ts index 7bbdba1..e056c19 100644 --- a/src/cool/modules/base/store/app.ts +++ b/src/cool/modules/base/store/app.ts @@ -1,7 +1,6 @@ import store from "store"; import { deepMerge, getBrowser } from "/@/core/utils"; import { app } from "/@/config/env"; -import { ElLoading } from "element-plus"; const browser = getBrowser(); @@ -28,10 +27,6 @@ const getters = { const actions = { async appLoad({ getters, dispatch, commit }: any) { if (getters.token) { - const loader = ElLoading.service({ - text: "加载配置中" - }); - commit("SHOW_LOADING"); // 读取菜单权限 @@ -40,7 +35,6 @@ const actions = { dispatch("userInfo"); commit("HIDE_LOADING"); - loader.close(); } } }; diff --git a/src/main.ts b/src/main.ts index 9c4ae8d..829a008 100644 --- a/src/main.ts +++ b/src/main.ts @@ -15,7 +15,6 @@ import "./mock"; // element-plus import ElementPlus from "element-plus"; import "./assets/css/element-variables.scss"; -import locale from "element-plus/lib/locale/lang/zh-cn"; // mitt import mitt from "mitt"; @@ -33,12 +32,13 @@ bootstrap(app) // // 事件通讯 app.provide("mitt", mitt()); - app.use(store).use(router).use(ElementPlus, { locale }).mount("#app"); + app.use(store).use(router).use(ElementPlus).mount("#app"); }) .catch((err: string) => { console.error(`COOL-ADMIN 启动失败`, err); }); +// 应用加载 store.dispatch("appLoad"); // @ts-ignore diff --git a/yarn.lock b/yarn.lock index dc66e79..210535e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -433,7 +433,7 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad" integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA== -"@types/lodash@^4.14.161", "@types/lodash@^4.14.168": +"@types/lodash@^4.14.168": version "4.14.168" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008" integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q== @@ -1082,14 +1082,14 @@ change-case@^4.1.2: optionalDependencies: fsevents "~2.3.1" -cl-admin-crud-vue3@^0.4.0: - version "0.4.1" - resolved "https://registry.nlark.com/cl-admin-crud-vue3/download/cl-admin-crud-vue3-0.4.1.tgz#87ea4af54c5bb619f6766b04961367ab92f22bf5" - integrity sha1-h+pK9Uxbthn2dmsElhNnq5LyK/U= +cl-admin-crud-vue3@^0.5.3: + version "0.5.3" + resolved "https://registry.nlark.com/cl-admin-crud-vue3/download/cl-admin-crud-vue3-0.5.3.tgz?cache=0&sync_timestamp=1627885610424&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcl-admin-crud-vue3%2Fdownload%2Fcl-admin-crud-vue3-0.5.3.tgz#3e8cde7a0fd0a9512c74d5ebc53fb54e8575e787" + integrity sha1-Pozeeg/QqVEsdNXrxT+1ToV154c= dependencies: array.prototype.flat "^1.2.4" core-js "^3.6.5" - element-plus "^1.0.2-beta.40" + element-plus "^1.0.2-beta.65" merge "^2.1.1" mitt "^2.1.0" vue "3.0.11" @@ -1525,27 +1525,12 @@ electron-to-chromium@^1.3.723: resolved "https://registry.nlark.com/electron-to-chromium/download/electron-to-chromium-1.3.782.tgz?cache=0&sync_timestamp=1626833041411&other_urls=https%3A%2F%2Fregistry.nlark.com%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.782.tgz#522740fe6b4b5255ca754c68d9c406a17b0998e2" integrity sha1-UidA/mtLUlXKdUxo2cQGoXsJmOI= -element-plus@1.0.2-beta.45: - version "1.0.2-beta.45" - resolved "https://registry.nlark.com/element-plus/download/element-plus-1.0.2-beta.45.tgz?cache=0&sync_timestamp=1625823476329&other_urls=https%3A%2F%2Fregistry.nlark.com%2Felement-plus%2Fdownload%2Felement-plus-1.0.2-beta.45.tgz#d7d84d284ead4f9de5aa7289b9a2af4b7f109a1e" - integrity sha1-19hNKE6tT53lqnKJuaKvS38Qmh4= +element-plus@^1.0.2-beta.65: + version "1.0.2-beta.65" + resolved "https://registry.nlark.com/element-plus/download/element-plus-1.0.2-beta.65.tgz#e1ff997fe395dd2e31a16517970058bc4d45fb3c" + integrity sha1-4f+Zf+OV3S4xoWUXlwBYvE1F+zw= dependencies: "@popperjs/core" "^2.4.4" - "@types/lodash" "^4.14.161" - async-validator "^3.4.0" - dayjs "1.x" - lodash "^4.17.20" - mitt "^2.1.0" - normalize-wheel "^1.0.1" - resize-observer-polyfill "^1.5.1" - -element-plus@^1.0.2-beta.40: - version "1.0.2-beta.40" - resolved "https://registry.npm.taobao.org/element-plus/download/element-plus-1.0.2-beta.40.tgz#30fc9b161496ae587fab86235c80b728ea43d909" - integrity sha1-MPybFhSWrlh/q4YjXIC3KOpD2Qk= - dependencies: - "@popperjs/core" "^2.4.4" - "@types/lodash" "^4.14.161" async-validator "^3.4.0" dayjs "1.x" lodash "^4.17.20"