JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-04-06 03:58:00 +08:00
Code Issues Projects Releases Wiki Activity

♻️ refactor: code

Browse Source
This commit is contained in:
zhideyiman 2023-09-03 02:29:52 +08:00
parent 2806fd8efc
commit 7cad868759
11 changed files with 44 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -10,6 +10,8 @@
"build": "vue-cli-service build", "build": "vue-cli-service build",
"build:node18": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build", "build:node18": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
"lint": "vue-cli-service lint --fix", "lint": "vue-cli-service lint --fix",
"lint:eslint": "eslint {src,mock,library}/**/*.{vue,js,ts} --fix",
"lint:prettier": "prettier {src,mock,library}/**/*.{html,vue,css,sass,scss,js,ts,md} --write",
"clear": "rimraf node_modules&&npm install --registry=--registry=https://registry.npmmirror.com", "clear": "rimraf node_modules&&npm install --registry=--registry=https://registry.npmmirror.com",
"image-webpack-loader": "cnpm i image-webpack-loader -D", "image-webpack-loader": "cnpm i image-webpack-loader -D",
"update": "ncu -u --reject webpack,eslint-plugin-prettier,@vue/eslint-config-prettier,prettier,layouts,sass-loader,sass,screenfull,eslint,chalk,vue,vue-template-compiler,vue-router,vuex,@vue/cli-plugin-babel,@vue/cli-plugin-eslint,@vue/cli-service,eslint-plugin-vue --registry=https://registry.npmmirror.com&&cnpm i", "update": "ncu -u --reject webpack,eslint-plugin-prettier,@vue/eslint-config-prettier,prettier,layouts,sass-loader,sass,screenfull,eslint,chalk,vue,vue-template-compiler,vue-router,vuex,@vue/cli-plugin-babel,@vue/cli-plugin-eslint,@vue/cli-service,eslint-plugin-vue --registry=https://registry.npmmirror.com&&cnpm i",

9
src/layouts/components/VabAd/index.vue
View File

@ -1,13 +1,6 @@
<template> <template>
<div class="vab-ad"> <div class="vab-ad">
<el-carousel <el-carousel v-if="adList" :autoplay="true" :interval="3000" direction="vertical" height="30px" indicator-position="none">
v-if="adList"
:autoplay="true"
:interval="3000"
direction="vertical"
height="30px"
indicator-position="none"
>
<el-carousel-item v-for="(item, index) in adList" :key="index"> <el-carousel-item v-for="(item, index) in adList" :key="index">
<el-tag type="warning">Ad</el-tag> <el-tag type="warning">Ad</el-tag>
<a :href="item.url" target="_blank">{{ item.title }}</a> <a :href="item.url" target="_blank">{{ item.title }}</a>

24
src/layouts/components/VabAvatar/index.vue
View File

@ -14,9 +14,7 @@
<el-dropdown-item command="gitee" divided>码云地址</el-dropdown-item> <el-dropdown-item command="gitee" divided>码云地址</el-dropdown-item>
<el-dropdown-item command="pro" divided>pro付费版地址</el-dropdown-item> <el-dropdown-item command="pro" divided>pro付费版地址</el-dropdown-item>
<el-dropdown-item command="plus" divided>plus付费版地址</el-dropdown-item> <el-dropdown-item command="plus" divided>plus付费版地址</el-dropdown-item>
<el-dropdown-item command="shop" divided> <el-dropdown-item command="shop" divided>shop-vite付费版地址</el-dropdown-item>
shop-vite付费版地址
</el-dropdown-item>
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item> <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
@ -50,28 +48,19 @@
window.open('https://gitee.com/chu1204505056/vue-admin-better') window.open('https://gitee.com/chu1204505056/vue-admin-better')
break break
case 'pro': case 'pro':
window.open( window.open('https://vue-admin-beautiful.com/admin-pro/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci=')
'https://vue-admin-beautiful.com/admin-pro/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci='
)
break break
case 'plus': case 'plus':
window.open( window.open('https://vue-admin-beautiful.com/admin-plus/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci=')
'https://vue-admin-beautiful.com/admin-plus/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci='
)
case 'shop': case 'shop':
window.open( window.open('https://vue-admin-beautiful.com/shop-vite/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci=')
'https://vue-admin-beautiful.com/shop-vite/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci='
)
} }
}, },
personalCenter() { personalCenter() {
this.$router.push('/personalCenter/personalCenter') this.$router.push('/personalCenter/personalCenter')
}, },
logout() { logout() {
this.$baseConfirm( this.$baseConfirm('您确定要退出' + this.$baseTitle + '吗?', null, async () => {
'您确定要退出' + this.$baseTitle + '吗?',
null,
async () => {
await this.$store.dispatch('user/logout') await this.$store.dispatch('user/logout')
if (recordRoute) { if (recordRoute) {
const fullPath = this.$route.fullPath const fullPath = this.$route.fullPath
@ -79,8 +68,7 @@
} else { } else {
this.$router.push('/login') this.$router.push('/login')
} }
} })
)
}, },
}, },
} }

4
src/layouts/components/VabBreadcrumb/index.vue
View File

@ -21,9 +21,7 @@
}, },
methods: { methods: {
getBreadcrumb() { getBreadcrumb() {
return this.$route.matched.filter( return this.$route.matched.filter((item) => item.name && item.meta.title)
(item) => item.name && item.meta.title
)
}, },
}, },
} }

6
src/layouts/components/VabLogo/index.vue
View File

@ -3,11 +3,7 @@
<router-link to="/"> <router-link to="/">
<!-- 这里是logo变更的位置 --> <!-- 这里是logo变更的位置 -->
<vab-remix-icon v-if="logo" :icon-class="logo" class="logo" /> <vab-remix-icon v-if="logo" :icon-class="logo" class="logo" />
<span <span :class="{ 'hidden-xs-only': layout === 'horizontal' }" :title="title" class="title">
:class="{ 'hidden-xs-only': layout === 'horizontal' }"
:title="title"
class="title"
>
{{ title }} {{ title }}
</span> </span>
</router-link> </router-link>

7
src/layouts/components/VabNavBar/index.vue
View File

@ -17,12 +17,7 @@
<vab-error-log /> <vab-error-log />
<vab-full-screen-bar @refresh="refreshRoute" /> <vab-full-screen-bar @refresh="refreshRoute" />
<vab-theme-bar class="hidden-xs-only" /> <vab-theme-bar class="hidden-xs-only" />
<vab-icon <vab-icon :icon="['fas', 'redo']" :pulse="pulse" title="重载所有路由" @click="refreshRoute" />
:icon="['fas', 'redo']"
:pulse="pulse"
title="重载所有路由"
@click="refreshRoute"
/>
<vab-avatar /> <vab-avatar />
<!-- <vab-icon <!-- <vab-icon
title="退出系统" title="退出系统"

25
src/layouts/components/VabThemeBar/index.vue
View File

@ -1,10 +1,6 @@
<template> <template>
<span v-if="themeBar"> <span v-if="themeBar">
<vab-icon <vab-icon :icon="['fas', 'palette']" title="主题配置" @click="handleOpenThemeBar" />
:icon="['fas', 'palette']"
title="主题配置"
@click="handleOpenThemeBar"
/>
<div class="theme-bar-setting"> <div class="theme-bar-setting">
<div @click="handleOpenThemeBar"> <div @click="handleOpenThemeBar">
<vab-icon :icon="['fas', 'palette']" /> <vab-icon :icon="['fas', 'palette']" />
@ -16,13 +12,7 @@
</div> </div>
</div> </div>
<el-drawer <el-drawer :visible.sync="drawerVisible" append-to-body direction="rtl" size="300px" title="主题配置">
:visible.sync="drawerVisible"
append-to-body
direction="rtl"
size="300px"
title="主题配置"
>
<el-scrollbar style="height: 80vh; overflow: hidden"> <el-scrollbar style="height: 80vh; overflow: hidden">
<div class="el-drawer__body"> <div class="el-drawer__body">
<el-form ref="form" :model="theme" label-position="top"> <el-form ref="form" :model="theme" label-position="top">
@ -128,9 +118,7 @@
if (!this.handleIsMobile()) this.changeLayout(layout) if (!this.handleIsMobile()) this.changeLayout(layout)
this.changeHeader(header) this.changeHeader(header)
this.changeTabsBar(tabsBar) this.changeTabsBar(tabsBar)
document.getElementsByTagName( document.getElementsByTagName('body')[0].className = `vue-admin-beautiful-theme-${name}`
'body'
)[0].className = `vue-admin-beautiful-theme-${name}`
this.drawerVisible = false this.drawerVisible = false
}, },
handleSaveTheme() { handleSaveTheme() {
@ -138,9 +126,7 @@
}, },
handleSetDfaultTheme() { handleSetDfaultTheme() {
let { name } = this.theme let { name } = this.theme
document document.getElementsByTagName('body')[0].classList.remove(`vue-admin-beautiful-theme-${name}`)
.getElementsByTagName('body')[0]
.classList.remove(`vue-admin-beautiful-theme-${name}`)
localStorage.removeItem('vue-admin-beautiful-theme') localStorage.removeItem('vue-admin-beautiful-theme')
this.$refs['form'].resetFields() this.$refs['form'].resetFields()
Object.assign(this.$data, this.$options.data()) Object.assign(this.$data, this.$options.data())
@ -153,8 +139,7 @@
location.reload() location.reload()
}, },
handleGetCode() { handleGetCode() {
const url = const url = 'https://github.com/chuzhixin/vue-admin-beautiful/tree/master/src/views'
'https://github.com/chuzhixin/vue-admin-beautiful/tree/master/src/views'
let path = this.$route.path + '/index.vue' let path = this.$route.path + '/index.vue'
if (path === '/vab/menu1/menu1-1/menu1-1-1/index.vue') { if (path === '/vab/menu1/menu1-1/menu1-1-1/index.vue') {
path = '/vab/nested/menu1/menu1-1/menu1-1-1/index.vue' path = '/vab/nested/menu1/menu1-1/menu1-1-1/index.vue'

19
src/layouts/index.vue
View File

@ -10,10 +10,7 @@
> >
<div :class="header === 'fixed' ? 'fixed-header' : ''"> <div :class="header === 'fixed' ? 'fixed-header' : ''">
<vab-top-bar /> <vab-top-bar />
<div <div v-if="tabsBar === 'true' || tabsBar === true" :class="{ 'tag-view-show': tabsBar }">
v-if="tabsBar === 'true' || tabsBar === true"
:class="{ 'tag-view-show': tabsBar }"
>
<div class="vab-main"> <div class="vab-main">
<vab-tabs-bar /> <vab-tabs-bar />
</div> </div>
@ -32,11 +29,7 @@
}" }"
class="layout-container-vertical" class="layout-container-vertical"
> >
<div <div v-if="device === 'mobile' && collapse === false" class="mask" @click="handleFoldSideBar" />
v-if="device === 'mobile' && collapse === false"
class="mask"
@click="handleFoldSideBar"
/>
<vab-side-bar /> <vab-side-bar />
<div :class="collapse ? 'is-collapse-main' : ''" class="vab-main"> <div :class="collapse ? 'is-collapse-main' : ''" class="vab-main">
<div :class="header === 'fixed' ? 'fixed-header' : ''"> <div :class="header === 'fixed' ? 'fixed-header' : ''">
@ -108,8 +101,7 @@
'storage', 'storage',
(e) => { (e) => {
if (e.key === tokenName || e.key === null) window.location.reload() if (e.key === tokenName || e.key === null) window.location.reload()
if (e.key === tokenName && e.value === null) if (e.key === tokenName && e.value === null) window.location.reload()
window.location.reload()
}, },
false false
) )
@ -132,10 +124,7 @@
this.$store.dispatch('settings/changeLayout', this.oldLayout) this.$store.dispatch('settings/changeLayout', this.oldLayout)
} }
this.$store.dispatch( this.$store.dispatch('settings/toggleDevice', isMobile ? 'mobile' : 'desktop')
'settings/toggleDevice',
isMobile ? 'mobile' : 'desktop'
)
} }
}, },
}, },

3
src/styles/element-variables.scss
View File

@ -5,8 +5,7 @@
$--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); $--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
$--fade-linear-transition: opacity 200ms linear; $--fade-linear-transition: opacity 200ms linear;
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), $--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
$--border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); $--border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
$--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); $--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

42
src/styles/spinner/dots.css
View File

@ -8,75 +8,61 @@
text-indent: -9999px; text-indent: -9999px;
background: transparent; background: transparent;
border-radius: 100%; border-radius: 100%;
box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
#6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
transform-origin: 50% 50%; transform-origin: 50% 50%;
animation: dots-loader 5s infinite ease-in-out; animation: dots-loader 5s infinite ease-in-out;
} }
@keyframes dots-loader { @keyframes dots-loader {
0% { 0% {
box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
#6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
} }
8.33% { 8.33% {
box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
#6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
} }
16.67% { 16.67% {
box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
#4ae -14px 14px 0 7px;
} }
25% { 25% {
box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
#6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
} }
33.33% { 33.33% {
box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
#6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
} }
41.67% { 41.67% {
box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
#6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
} }
50% { 50% {
box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
#6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
} }
58.33% { 58.33% {
box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
#6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
} }
66.67% { 66.67% {
box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
#6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
} }
75% { 75% {
box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
#6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
} }
83.33% { 83.33% {
box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
#6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
} }
91.67% { 91.67% {
box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
#6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
} }
100% { 100% {
box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
#6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
} }
} }

8
src/styles/variables.scss
View File

@ -55,10 +55,7 @@ $base-tag-item-height: 34px;
//菜单li标签的高度 //菜单li标签的高度
$base-menu-item-height: 50px; $base-menu-item-height: 50px;
//app-main的高度 //app-main的高度
$base-app-main-height: calc( $base-app-main-height: calc(100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} - #{$base-padding} - #{$base-padding} - 55px - 55px);
100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} - #{$base-padding} -
#{$base-padding} - 55px - 55px
);
//纵向布局时左侧导航未折叠时的宽度 //纵向布局时左侧导航未折叠时的宽度
$base-left-menu-width: 256px; $base-left-menu-width: 256px;
//纵向布局时左侧导航未折叠时右侧内容的宽度 //纵向布局时左侧导航未折叠时右侧内容的宽度
@ -68,8 +65,7 @@ $base-left-menu-width-min: 65px;
//纵向布局时左侧导航已折叠时右侧内容的宽度 //纵向布局时左侧导航已折叠时右侧内容的宽度
$base-right-content-width-min: calc(100% - #{$base-left-menu-width-min}); $base-right-content-width-min: calc(100% - #{$base-left-menu-width-min});
//默认动画 //默认动画
$base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s, $base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s, background 0s, color 0s, font-size 0s;
background 0s, color 0s, font-size 0s;
//默认动画长 //默认动画长
$base-transition-time: 0.3s; $base-transition-time: 0.3s;