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,
|
||||
#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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -73,6 +142,7 @@
|
||||
<div class="preload">
|
||||
<div class="container">
|
||||
<p class="name">COOL-ADMIN</p>
|
||||
<div class="loading"></div>
|
||||
<p class="title">正在加载资源...</p>
|
||||
<p class="sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
|
||||
</div>
|
||||
|
||||
@ -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",
|
||||
|
||||
52
src/App.vue
52
src/App.vue
@ -1,7 +1,55 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<el-config-provider :locale="locale">
|
||||
<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 class="footer">
|
||||
<a href="https://cool-js.com/" target="_blank"> https://cool-js.com </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-view />
|
||||
</div>
|
||||
</el-config-provider>
|
||||
</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" 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="" />
|
||||
<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-input
|
||||
v-model="form.username"
|
||||
@ -46,7 +46,7 @@
|
||||
</el-form-item>
|
||||
</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
|
||||
>
|
||||
</div>
|
||||
@ -216,8 +216,7 @@ export default defineComponent({
|
||||
|
||||
.submit-btn {
|
||||
margin-top: 40px;
|
||||
border-radius: 30px;
|
||||
padding: 10px 40px;
|
||||
padding: 9px 40px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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
|
||||
|
||||
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"
|
||||
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user