mirroring/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2024-11-01 06:02:38 +08:00
Code Issues Projects Releases Wiki Activity

添加loading，解决 elm 中文显示异常问题

Browse Source
This commit is contained in:
icssoa 2021-08-04 10:05:45 +08:00
parent d802230b05
commit c32f468aee
7 changed files with 139 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
index.html
View File

@ -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>

6
package.json
View File

@ -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
View File

@ -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>

7
src/cool/modules/base/pages/login/index.vue
View File

@ -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;
}
}

6
src/cool/modules/base/store/app.ts
View File

@ -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();
}
}
};

4
src/main.ts
View File

@ -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
View File

@ -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"