mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 14:10:27 +08:00
添加loading，解决 elm 中文显示异常问题
This commit is contained in:
icssoa
parent
d802230b05
commit
c32f468aee
72
index.html
72
index.html
@ -16,8 +16,13 @@
|
|||||||
body,
|
body,
|
||||||
#app {
|
#app {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||||
|
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preload {
|
.preload {
|
||||||
@ -43,12 +48,13 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
letter-spacing: 5px;
|
letter-spacing: 5px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preload .title {
|
.preload .title {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 10px;
|
margin: 30px 0 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preload .sub-title {
|
.preload .sub-title {
|
||||||
@ -66,6 +72,69 @@
|
|||||||
color: #ababab;
|
color: #ababab;
|
||||||
text-decoration: none;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -73,6 +142,7 @@
|
|||||||
<div class="preload">
|
<div class="preload">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p class="name">COOL-ADMIN</p>
|
<p class="name">COOL-ADMIN</p>
|
||||||
|
<div class="loading"></div>
|
||||||
<p class="title">正在加载资源...</p>
|
<p class="title">正在加载资源...</p>
|
||||||
<p class="sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
|
<p class="sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "front-next",
|
"name": "front-next",
|
||||||
"version": "0.5.4",
|
"version": "0.6.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
@ -11,13 +11,13 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"array.prototype.flat": "^1.2.4",
|
"array.prototype.flat": "^1.2.4",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"cl-admin-crud-vue3": "^0.4.0",
|
"cl-admin-crud-vue3": "^0.5.3",
|
||||||
"clipboard": "^2.0.8",
|
"clipboard": "^2.0.8",
|
||||||
"clone-deep": "^4.0.1",
|
"clone-deep": "^4.0.1",
|
||||||
"codemirror": "^5.62.0",
|
"codemirror": "^5.62.0",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"echarts": "^5.0.2",
|
"echarts": "^5.0.2",
|
||||||
"element-plus": "1.0.2-beta.45",
|
"element-plus": "^1.0.2-beta.65",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
"glob": "^7.1.6",
|
"glob": "^7.1.6",
|
||||||
"js-beautify": "^1.13.5",
|
"js-beautify": "^1.13.5",
|
||||||
|
|||||||
52
src/App.vue
52
src/App.vue
@ -1,7 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<el-config-provider :locale="locale">
|
||||||
<router-view />
|
<div class="preload" v-if="loading">
|
||||||
|
<div class="container">
|
||||||
|
<p class="name">COOL-ADMIN</p>
|
||||||
|
<div class="loading"></div>
|
||||||
|
<p class="title">正在加载菜单...</p>
|
||||||
|
<p class="sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<a href="https://cool-js.com/" target="_blank"> https://cool-js.com </a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<router-view />
|
||||||
|
</el-config-provider>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent } from "vue";
|
||||||
|
import { ElConfigProvider } from "element-plus";
|
||||||
|
import zhCn from "element-plus/lib/locale/lang/zh-cn";
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
[ElConfigProvider.name]: ElConfigProvider
|
||||||
|
},
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
const store = useStore();
|
||||||
|
const locale = zhCn;
|
||||||
|
const loading = computed(() => store.getters.appLoading);
|
||||||
|
|
||||||
|
return {
|
||||||
|
locale,
|
||||||
|
loading
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="scss" src="./assets/css/index.scss"></style>
|
<style lang="scss" src="./assets/css/index.scss"></style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.preload {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
<img class="logo" src="../../static/images/logo.png" alt="" />
|
<img class="logo" src="../../static/images/logo.png" alt="" />
|
||||||
<p class="desc">COOL ADMIN是一款快速开发后台权限管理系统</p>
|
<p class="desc">COOL ADMIN是一款快速开发后台权限管理系统</p>
|
||||||
|
|
||||||
<el-form class="form" size="medium" :disabled="saving">
|
<el-form label-position="top" class="form" size="medium" :disabled="saving">
|
||||||
<el-form-item label="用户名">
|
<el-form-item label="用户名">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="form.username"
|
v-model="form.username"
|
||||||
@ -46,7 +46,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<el-button round size="mini" class="submit-btn" :loading="saving" @click="toLogin"
|
<el-button round size="small" class="submit-btn" :loading="saving" @click="toLogin"
|
||||||
>登录</el-button
|
>登录</el-button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@ -216,8 +216,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
.submit-btn {
|
.submit-btn {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
border-radius: 30px;
|
padding: 9px 40px;
|
||||||
padding: 10px 40px;
|
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import store from "store";
|
import store from "store";
|
||||||
import { deepMerge, getBrowser } from "/@/core/utils";
|
import { deepMerge, getBrowser } from "/@/core/utils";
|
||||||
import { app } from "/@/config/env";
|
import { app } from "/@/config/env";
|
||||||
import { ElLoading } from "element-plus";
|
|
||||||
|
|
||||||
const browser = getBrowser();
|
const browser = getBrowser();
|
||||||
|
|
||||||
@ -28,10 +27,6 @@ const getters = {
|
|||||||
const actions = {
|
const actions = {
|
||||||
async appLoad({ getters, dispatch, commit }: any) {
|
async appLoad({ getters, dispatch, commit }: any) {
|
||||||
if (getters.token) {
|
if (getters.token) {
|
||||||
const loader = ElLoading.service({
|
|
||||||
text: "加载配置中"
|
|
||||||
});
|
|
||||||
|
|
||||||
commit("SHOW_LOADING");
|
commit("SHOW_LOADING");
|
||||||
|
|
||||||
// 读取菜单权限
|
// 读取菜单权限
|
||||||
@ -40,7 +35,6 @@ const actions = {
|
|||||||
dispatch("userInfo");
|
dispatch("userInfo");
|
||||||
|
|
||||||
commit("HIDE_LOADING");
|
commit("HIDE_LOADING");
|
||||||
loader.close();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -15,7 +15,6 @@ import "./mock";
|
|||||||
// element-plus
|
// element-plus
|
||||||
import ElementPlus from "element-plus";
|
import ElementPlus from "element-plus";
|
||||||
import "./assets/css/element-variables.scss";
|
import "./assets/css/element-variables.scss";
|
||||||
import locale from "element-plus/lib/locale/lang/zh-cn";
|
|
||||||
|
|
||||||
// mitt
|
// mitt
|
||||||
import mitt from "mitt";
|
import mitt from "mitt";
|
||||||
@ -33,12 +32,13 @@ bootstrap(app)
|
|||||||
// // 事件通讯
|
// // 事件通讯
|
||||||
app.provide("mitt", mitt());
|
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) => {
|
.catch((err: string) => {
|
||||||
console.error(`COOL-ADMIN 启动失败`, err);
|
console.error(`COOL-ADMIN 启动失败`, err);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 应用加载
|
||||||
store.dispatch("appLoad");
|
store.dispatch("appLoad");
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|||||||
35
yarn.lock
35
yarn.lock
@ -433,7 +433,7 @@
|
|||||||
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
|
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
|
||||||
integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
|
integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
|
||||||
|
|
||||||
"@types/lodash@^4.14.161", "@types/lodash@^4.14.168":
|
"@types/lodash@^4.14.168":
|
||||||
version "4.14.168"
|
version "4.14.168"
|
||||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
|
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
|
||||||
integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
|
integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
|
||||||
@ -1082,14 +1082,14 @@ change-case@^4.1.2:
|
|||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
fsevents "~2.3.1"
|
fsevents "~2.3.1"
|
||||||
|
|
||||||
cl-admin-crud-vue3@^0.4.0:
|
cl-admin-crud-vue3@^0.5.3:
|
||||||
version "0.4.1"
|
version "0.5.3"
|
||||||
resolved "https://registry.nlark.com/cl-admin-crud-vue3/download/cl-admin-crud-vue3-0.4.1.tgz#87ea4af54c5bb619f6766b04961367ab92f22bf5"
|
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-h+pK9Uxbthn2dmsElhNnq5LyK/U=
|
integrity sha1-Pozeeg/QqVEsdNXrxT+1ToV154c=
|
||||||
dependencies:
|
dependencies:
|
||||||
array.prototype.flat "^1.2.4"
|
array.prototype.flat "^1.2.4"
|
||||||
core-js "^3.6.5"
|
core-js "^3.6.5"
|
||||||
element-plus "^1.0.2-beta.40"
|
element-plus "^1.0.2-beta.65"
|
||||||
merge "^2.1.1"
|
merge "^2.1.1"
|
||||||
mitt "^2.1.0"
|
mitt "^2.1.0"
|
||||||
vue "3.0.11"
|
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"
|
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=
|
integrity sha1-UidA/mtLUlXKdUxo2cQGoXsJmOI=
|
||||||
|
|
||||||
element-plus@1.0.2-beta.45:
|
element-plus@^1.0.2-beta.65:
|
||||||
version "1.0.2-beta.45"
|
version "1.0.2-beta.65"
|
||||||
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"
|
resolved "https://registry.nlark.com/element-plus/download/element-plus-1.0.2-beta.65.tgz#e1ff997fe395dd2e31a16517970058bc4d45fb3c"
|
||||||
integrity sha1-19hNKE6tT53lqnKJuaKvS38Qmh4=
|
integrity sha1-4f+Zf+OV3S4xoWUXlwBYvE1F+zw=
|
||||||
dependencies:
|
dependencies:
|
||||||
"@popperjs/core" "^2.4.4"
|
"@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"
|
async-validator "^3.4.0"
|
||||||
dayjs "1.x"
|
dayjs "1.x"
|
||||||
lodash "^4.17.20"
|
lodash "^4.17.20"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user