'admin-2021.04.29:新增全局改变组件大小功能'

src/i18n/lang/en.js

@@ -52,12 +52,17 @@ export default {
 		layoutIfameView: 'IfameView',
 	},
 	user: {
+		title0: 'Component size',
 		title1: 'Language switching',
 		title2: 'Menu search',
 		title3: 'Layout configuration',
 		title4: 'news',
 		title5: 'Full screen on',
 		title6: 'Full screen off',
+		dropdownDefault: 'default',
+		dropdownMedium: 'medium',
+		dropdownSmall: 'small',
+		dropdownMini: 'mini',
 		dropdown1: 'home page',
 		dropdown2: 'Personal Center',
 		dropdown3: '404',

src/i18n/lang/zh-cn.js

@@ -52,12 +52,17 @@ export default {
 		layoutIfameView: '内嵌 iframe',
 	},
 	user: {
+		title0: '组件大小',
 		title1: '语言切换',
 		title2: '菜单搜索',
 		title3: '布局配置',
 		title4: '消息',
 		title5: '开全屏',
 		title6: '关全屏',
+		dropdownDefault: '默认',
+		dropdownMedium: '中等',
+		dropdownSmall: '小型',
+		dropdownMini: '超小',
 		dropdown1: '首页',
 		dropdown2: '个人中心',
 		dropdown3: '404',

src/i18n/lang/zh-tw.js

@@ -52,12 +52,17 @@ export default {
 		layoutIfameView: '内嵌 iframe',
 	},
 	user: {
+		title0: '組件大小',
 		title1: '語言切換',
 		title2: '選單蒐索',
 		title3: '佈局配寘',
 		title4: '消息',
 		title5: '開全屏',
 		title6: '關全屏',
+		dropdownDefault: '默認',
+		dropdownMedium: '中等',
+		dropdownSmall: '小型',
+		dropdownMini: '超小',
 		dropdown1: '首頁',
 		dropdown2: '個人中心',
 		dropdown3: '404',

src/main.js

@@ -8,9 +8,10 @@ import Element from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import '@/theme/index.scss';
 import { i18n } from '@/i18n/index.js';
+import { globalComponentSize } from '@/utils/componentSize.js';
 
 Vue.use(Particles);
-Vue.use(Element, { i18n: (key, value) => i18n.t(key, value) });
+Vue.use(Element, { i18n: (key, value) => i18n.t(key, value), size: globalComponentSize });
 
 Vue.config.productionTip = false;
 Vue.prototype.bus = new Vue();

src/store/modules/themeConfig.js

@@ -52,6 +52,8 @@ const themeConfigModule = {
 			globalViceDes: 'vue2.x后台管理系统免费开源模板',
 			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
 			globalI18n: 'zh-cn',
+			// 默认全局组件大小，可选值"<default|medium|small|mini>"，默认 default
+			globalComponentSize: 'default',
 		},
 	},
 	mutations: {

src/utils/componentSize.js

@@ -0,0 +1,4 @@
+import { getLocal } from '@/utils/storage.js';
+
+// 全局组件大小
+export const globalComponentSize = getLocal('themeConfig') ? getLocal('themeConfig').globalComponentSize : 'default';

src/utils/setIconfont.js

@@ -1,5 +1,5 @@
 // 字体图标 url
-const cssCdnUrlList = ['//at.alicdn.com/t/font_2298093_cl2h21rqdau.css', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'];
+const cssCdnUrlList = ['//at.alicdn.com/t/font_2298093_vcabyobusxq.css', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'];
 // 第三方 js url
 const jsCdnUrlList = [];
 

src/views/layout/navBars/breadcrumb/user.vue

@@ -1,5 +1,18 @@
 <template>
 	<div class="layout-navbars-breadcrumb-user" :style="{ flex: layoutUserFlexNum }">
+		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
+			<div class="layout-navbars-breadcrumb-user-icon">
+				<i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
+			</div>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
+					<el-dropdown-item command="medium" :disabled="disabledSize === 'medium'">{{ $t('message.user.dropdownMedium') }}</el-dropdown-item>
+					<el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
+					<el-dropdown-item command="mini" :disabled="disabledSize === 'mini'">{{ $t('message.user.dropdownMini') }}</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
 		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
 			<div class="layout-navbars-breadcrumb-user-icon">
 				<i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>
@@ -64,7 +77,8 @@ export default {
 		return {
 			isScreenfull: false,
 			isShowUserNewsPopover: false,
-			disabledI18n: false,
+			disabledI18n: 'zh-cn',
+			disabledSize: 'small',
 		};
 	},
 	computed: {
@@ -82,7 +96,10 @@ export default {
 		},
 	},
 	mounted() {
-		if (getLocal('themeConfigPrev')) this.initI18n();
+		if (getLocal('themeConfigPrev')) {
+			this.initI18n();
+			this.initComponentSize();
+		}
 	},
 	methods: {
 		// 搜索点击
@@ -102,6 +119,14 @@ export default {
 			screenfull.toggle();
 			this.isScreenfull = !this.isScreenfull;
 		},
+		// 组件大小改变
+		onComponentSizeChange(size) {
+			removeLocal('themeConfig');
+			this.$store.state.themeConfig.themeConfig.globalComponentSize = size;
+			setLocal('themeConfig', this.$store.state.themeConfig.themeConfig);
+			this.$ELEMENT.size = size;
+			this.initComponentSize();
+		},
 		// 语言切换
 		onLanguageChange(lang) {
 			removeLocal('themeConfigPrev');
@@ -124,6 +149,23 @@ export default {
 					break;
 			}
 		},
+		// 初始化全局组件大小
+		initComponentSize() {
+			switch (getLocal('themeConfig').globalComponentSize) {
+				case 'default':
+					this.disabledSize = 'default';
+					break;
+				case 'medium':
+					this.disabledSize = 'medium';
+					break;
+				case 'small':
+					this.disabledSize = 'small';
+					break;
+				case 'mini':
+					this.disabledSize = 'mini';
+					break;
+			}
+		},
 		// `dropdown 下拉菜单` 当前项点击
 		onDropdownCommand(path) {
 			if (path === 'logOut') {