Skip to content

GitLab

S
Starter Web Vue
Commit e7df7eba authored by 水落(YangLei)'s avatar 水落(YangLei)
Browse files
Options

feat: 优化部分代码

parent edddb3b6
Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 50 deletions
src/main.js
View file @ e7df7eba
...@@ -33,8 +33,7 @@ const store = new Vuex.Store({ ...@@ -33,8 +33,7 @@ const store = new Vuex.Store({
//装载vue-router控件 如果开发时 不用动态可直接修改这里 isAsynRount=false //装载vue-router控件 如果开发时 不用动态可直接修改这里 isAsynRount=false
Vue.use(Router); Vue.use(Router);
const isAsynRount = store.state.settingModule.asyncRoutes; const options = initRouter();
const options = initRouter(isAsynRount);
const router = new Router(options); const router = new Router(options);
//装载vue-i18n控件 如果语言优先级 请直接修改这里localeLang和fallbackLang //装载vue-i18n控件 如果语言优先级 请直接修改这里localeLang和fallbackLang
......
src/pages/frame/components/setting/Setting.vue
View file @ e7df7eba
<template> <template>
<div class="side-setting"> <div class="side-setting">
<setting-item> <setting-item>
<a-button @click="saveSetting" type="primary" icon="save">{{$t('save')}}</a-button> <a-button @click="saveSetting" type="primary" icon="save">{{ $t('save') }}</a-button>
<a-button @click="resetSetting" type="dashed" icon="redo" style="float: right">{{$t('reset')}}</a-button> <a-button @click="resetSetting" type="dashed" icon="redo" style="float: right">
{{ $t('reset') }}
</a-button>
</setting-item> </setting-item>
<setting-item :title="$t('theme.title')"> <setting-item :title="$t('theme.title')">
<img-checkbox-group @change="values => setTheme({...theme, mode: values[0]})" :default-values="[theme.mode]"> <img-checkbox-group
<img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" value="dark" /> @change="values => setTheme({ ...theme, mode: values[0] })"
<img-checkbox :title="$t('theme.light')" img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light" /> :default-values="[theme.mode]"
<img-checkbox :title="$t('theme.night')" img="https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg" value="night" /> >
<img-checkbox
:title="$t('theme.dark')"
img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg"
value="dark"
/>
<img-checkbox
:title="$t('theme.light')"
img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg"
value="light"
/>
</img-checkbox-group> </img-checkbox-group>
</setting-item> </setting-item>
<setting-item :title="$t('theme.color')"> <setting-item :title="$t('theme.color')">
<color-checkbox-group @change="(values, colors) => setTheme({...theme, color: colors[0]})" :defaultValues="[palettes.indexOf(theme.color)]" :multiple="false"> <color-checkbox-group
<color-checkbox v-for="(color, index) in palettes" :key="index" :color="color" :value="index" /> @change="(values, colors) => setTheme({ ...theme, color: colors[0] })"
:defaultValues="[palettes.indexOf(theme.color)]"
:multiple="false"
>
<color-checkbox
v-for="(color, index) in palettes"
:key="index"
:color="color"
:value="index"
/>
</color-checkbox-group> </color-checkbox-group>
</setting-item> </setting-item>
<a-divider /> <a-divider />
<setting-item :title="$t('navigate.title')"> <setting-item :title="$t('navigate.title')">
<img-checkbox-group @change="values => setLayout(values[0])" :default-values="[layout]"> <img-checkbox-group @change="values => setLayout(values[0])" :default-values="[layout]">
<img-checkbox :title="$t('navigate.side')" img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" value="side" /> <img-checkbox
<img-checkbox :title="$t('navigate.head')" img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head" /> :title="$t('navigate.side')"
<img-checkbox :title="$t('navigate.mix')" img="https://gw.alipayobjects.com/zos/antfincdn/x8Ob%26B8cy8/LCkqqYNmvBEbokSDscrm.svg" value="mix" /> img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg"
value="side"
/>
<img-checkbox
:title="$t('navigate.head')"
img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg"
value="head"
/>
<img-checkbox
:title="$t('navigate.mix')"
img="https://gw.alipayobjects.com/zos/antfincdn/x8Ob%26B8cy8/LCkqqYNmvBEbokSDscrm.svg"
value="mix"
/>
</img-checkbox-group> </img-checkbox-group>
</setting-item> </setting-item>
<setting-item> <setting-item>
<a-list :split="false"> <a-list :split="false">
<a-list-item> <a-list-item>
{{$t('navigate.content.title')}} {{ $t('navigate.content.title') }}
<a-select :getPopupContainer="getPopupContainer" :value="pageWidth" @change="setPageWidth" class="select-item" size="small" slot="actions"> <a-select
<a-select-option value="fluid">{{$t('navigate.content.fluid')}}</a-select-option> :getPopupContainer="getPopupContainer"
<a-select-option value="fixed">{{$t('navigate.content.fixed')}}</a-select-option> :value="pageWidth"
@change="setPageWidth"
class="select-item"
size="small"
slot="actions"
>
<a-select-option value="fluid">{{ $t('navigate.content.fluid') }}</a-select-option>
<a-select-option value="fixed">{{ $t('navigate.content.fixed') }}</a-select-option>
</a-select> </a-select>
</a-list-item> </a-list-item>
<a-list-item> <a-list-item>
{{$t('navigate.fixedHeader')}} {{ $t('navigate.fixedHeader') }}
<a-switch :checked="fixedHeader" slot="actions" size="small" @change="setFixedHeader" /> <a-switch :checked="fixedHeader" slot="actions" size="small" @change="setFixedHeader" />
</a-list-item> </a-list-item>
<a-list-item> <a-list-item>
{{$t('navigate.fixedSideBar')}} {{ $t('navigate.fixedSideBar') }}
<a-switch :checked="fixedSideBar" slot="actions" size="small" @change="setFixedSideBar" /> <a-switch :checked="fixedSideBar" slot="actions" size="small" @change="setFixedSideBar" />
</a-list-item> </a-list-item>
</a-list> </a-list>
...@@ -47,11 +87,11 @@ ...@@ -47,11 +87,11 @@
<setting-item :title="$t('other.title')"> <setting-item :title="$t('other.title')">
<a-list :split="false"> <a-list :split="false">
<a-list-item> <a-list-item>
{{$t('other.multiPages')}} {{ $t('other.multiPages') }}
<a-switch :checked="multiPage" slot="actions" size="small" @change="setMultiPage" /> <a-switch :checked="multiPage" slot="actions" size="small" @change="setMultiPage" />
</a-list-item> </a-list-item>
<a-list-item> <a-list-item>
{{$t('other.hideSetting')}} {{ $t('other.hideSetting') }}
<a-switch :checked="hideSetting" slot="actions" size="small" @change="setHideSetting" /> <a-switch :checked="hideSetting" slot="actions" size="small" @change="setHideSetting" />
</a-list-item> </a-list-item>
</a-list> </a-list>
...@@ -60,24 +100,46 @@ ...@@ -60,24 +100,46 @@
<setting-item :title="$t('animate.title')"> <setting-item :title="$t('animate.title')">
<a-list :split="false"> <a-list :split="false">
<a-list-item> <a-list-item>
{{$t('animate.disable')}} {{ $t('animate.disable') }}
<a-switch :checked="animate.disabled" slot="actions" size="small" @change="val => setAnimate({...animate, disabled: val})" /> <a-switch
:checked="animate.disabled"
slot="actions"
size="small"
@change="val => setAnimate({ ...animate, disabled: val })"
/>
</a-list-item> </a-list-item>
<a-list-item> <a-list-item>
{{$t('animate.effect')}} {{ $t('animate.effect') }}
<a-select :value="animate.name" :getPopupContainer="getPopupContainer" @change="val => setAnimate({...animate, name: val})" class="select-item" size="small" slot="actions"> <a-select
<a-select-option :key="index" :value="item.name" v-for="(item, index) in animates">{{item.alias}}</a-select-option> :value="animate.name"
:getPopupContainer="getPopupContainer"
@change="val => setAnimate({ ...animate, name: val })"
class="select-item"
size="small"
slot="actions"
>
<a-select-option :key="index" :value="item.name" v-for="(item, index) in animates">{{
item.alias
}}</a-select-option>
</a-select> </a-select>
</a-list-item> </a-list-item>
<a-list-item> <a-list-item>
{{$t('animate.direction')}} {{ $t('animate.direction') }}
<a-select :value="animate.direction" :getPopupContainer="getPopupContainer" @change="val => setAnimate({...animate, direction: val})" class="select-item" size="small" slot="actions"> <a-select
<a-select-option :key="index" :value="item" v-for="(item, index) in directions">{{item}}</a-select-option> :value="animate.direction"
:getPopupContainer="getPopupContainer"
@change="val => setAnimate({ ...animate, direction: val })"
class="select-item"
size="small"
slot="actions"
>
<a-select-option :key="index" :value="item" v-for="(item, index) in directions">{{
item
}}</a-select-option>
</a-select> </a-select>
</a-list-item> </a-list-item>
</a-list> </a-list>
</setting-item> </setting-item>
</div> </div>
</template> </template>
...@@ -176,7 +238,7 @@ export default { ...@@ -176,7 +238,7 @@ export default {
}, },
computed: { computed: {
directions() { directions() {
return this.animates.find((item) => item.name == this.animate.name).directions; return this.animates.find(item => item.name == this.animate.name).directions;
}, },
...mapState('settingModule', [ ...mapState('settingModule', [
'theme', 'theme',
...@@ -192,7 +254,7 @@ export default { ...@@ -192,7 +254,7 @@ export default {
]), ]),
}, },
watch: { watch: {
'animate.name': function (val) { 'animate.name': function(val) {
this.setAnimate({ name: val, direction: this.directions[0] }); this.setAnimate({ name: val, direction: this.directions[0] });
}, },
}, },
...@@ -220,7 +282,7 @@ export default { ...@@ -220,7 +282,7 @@ export default {
let config = {}; let config = {};
let mySetting = this.$store.state.settingModule; let mySetting = this.$store.state.settingModule;
let dftSetting = local ? settingConfig : settingConfig; let dftSetting = local ? settingConfig : settingConfig;
Object.keys(mySetting).forEach((key) => { Object.keys(mySetting).forEach(key => {
const dftValue = dftSetting[key], const dftValue = dftSetting[key],
myValue = mySetting[key]; myValue = mySetting[key];
if (dftValue != undefined && !fastEqual(dftValue, myValue)) { if (dftValue != undefined && !fastEqual(dftValue, myValue)) {
......
src/pages/frame/layouts/AdminLayout.vue
View file @ e7df7eba
...@@ -170,6 +170,7 @@ export default { ...@@ -170,6 +170,7 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.admin-layout { .admin-layout {
height: 100%;
.side-menu { .side-menu {
&.fixed-side { &.fixed-side {
position: fixed; position: fixed;
......
src/pages/home/index.js 0 → 100644
View file @ e7df7eba
import Home from './index.vue';
export default Home;
src/pages/system/view/log/login_log/index.js 0 → 100644
View file @ e7df7eba
import LoginLog from './index.vue';
export default LoginLog;
src/router/index.js
View file @ e7df7eba
import syncConfig from './config'; import syncConfig from './config';
import asyncConfig from './async/config.async';
import { formatRoutes } from '../utils/routerUtil'; import { formatRoutes } from '../utils/routerUtil';
// 不需要登录拦截的路由配置 // 不需要登录拦截的路由配置
const loginIgnore = { const loginIgnore = {
names: ['404', '403'], //根据路由名称匹配 names: ['404', '403'], //根据路由名称匹配
paths: ['/login'], //根据路由fullPath匹配 paths: ['/login'], //根据路由fullPath匹配
/** /**
* 判断路由是否包含在该配置中 * 判断路由是否包含在该配置中
* @param route vue-router 的 route 对象 * @param route vue-router 的 route 对象
* @returns {boolean} * @returns {boolean}
*/ */
includes(route) { includes(route) {
return this.names.includes(route.name) || this.paths.includes(route.path) return this.names.includes(route.name) || this.paths.includes(route.path);
} },
}; };
/** /**
...@@ -21,11 +20,10 @@ const loginIgnore = { ...@@ -21,11 +20,10 @@ const loginIgnore = {
* @param isAsync 是否异步路由模式 * @param isAsync 是否异步路由模式
* @returns {options.routes} * @returns {options.routes}
*/ */
function initRouter(isAsync) { function initRouter() {
const options = isAsync ? asyncConfig : syncConfig; const options = syncConfig;
formatRoutes(options.routes); formatRoutes(options.routes);
return options; return options;
} }
export { loginIgnore, initRouter };
export {loginIgnore , initRouter}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment