'admin-21.04.28:新增全局改变组件大小功能、拖拽布局演示等'

README.md

@@ -101,6 +101,7 @@ cnpm run build
 - <a href="https://github.com/davidshimjs/qrcodejs" target="_blank">qrcodejs</a>
 - <a href="https://github.com/crabbly/Print.js" target="_blank">print-js</a>
 - <a href="https://github.com/likaia/screen-shot" target="_blank">vue-web-screen-shot</a>
+- <a href="https://github.com/jbaysolutions/vue-grid-layout" target="_blank">vue-grid-layout</a>
 
 #### 特别感谢
 

package.json

@@ -22,6 +22,7 @@
 		"screenfull": "^5.1.0",
 		"sortablejs": "^1.13.0",
 		"vue": "^3.0.5",
+		"vue-grid-layout": "^3.0.0-beta1",
 		"vue-i18n": "^9.1.4",
 		"vue-router": "^4.0.2",
 		"vue-web-screen-shot": "^1.1.9",

plugins.d.ts

@@ -0,0 +1 @@
+declare module 'vue-grid-layout';

src/i18n/lang/en.ts

@@ -32,6 +32,7 @@ export default {
 		funPrintJs: 'PrintJs',
 		funClipboard: 'Copy cut',
 		funScreenShort: 'screenCapture',
+		funGridLayout: 'Drag layout',
 		pagesIndex: 'pages',
 		pagesFiltering: 'Filtering',
 		pagesFilteringDetails: 'FilteringDetails',
@@ -51,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.ts

@@ -32,6 +32,7 @@ export default {
 		funPrintJs: '页面打印',
 		funClipboard: '复制剪切',
 		funScreenShort: 'web端自定义截屏',
+		funGridLayout: '拖拽布局',
 		pagesIndex: '页面',
 		pagesFiltering: '过滤筛选组件',
 		pagesFilteringDetails: '过滤筛选组件详情',
@@ -51,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.ts

@@ -32,6 +32,7 @@ export default {
 		funPrintJs: '頁面列印',
 		funClipboard: '複製剪切',
 		funScreenShort: '自定義截圖',
+		funGridLayout: '拖拽佈局',
 		pagesIndex: '頁面',
 		pagesFiltering: '過濾篩選組件',
 		pagesFilteringDetails: '過濾篩選組件詳情',
@@ -51,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.ts

@@ -4,15 +4,25 @@ import router from './router';
 import { store, key } from './store';
 import { authDirective } from '/@/utils/authDirective.ts';
 import { i18n } from '/@/i18n/index.ts';
+import { globalComponentSize } from '/@/utils/componentSize.ts';
 
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import '/@/theme/index.scss';
 import mitt from 'mitt';
 import screenShort from 'vue-web-screen-shot';
+import VueGridLayout from 'vue-grid-layout';
 
 const app = createApp(App);
-app.use(router).use(store, key).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(screenShort, { enableWebRtc: false }).mount('#app');
+app
+	.use(router)
+	.use(store, key)
+	.use(ElementPlus, { i18n: i18n.global.t, size: globalComponentSize })
+	.use(i18n)
+	.use(screenShort, { enableWebRtc: false })
+	.use(VueGridLayout)
+	.mount('#app');
+
 app.config.globalProperties.mittBus = mitt();
 
 authDirective(app);

src/router/index.ts

@@ -499,6 +499,21 @@ export const dynamicRoutes = [
 							icon: 'el-icon-crop',
 						},
 					},
+					{
+						path: '/fun/gridLayout',
+						name: 'funGridLayout',
+						component: () => import('/@/views/fun/gridLayout/index.vue'),
+						meta: {
+							title: 'message.router.funGridLayout',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'iconfont icon-tuodong',
+						},
+					},
 				],
 			},
 			{

src/store/interface/index.ts

@@ -46,6 +46,7 @@ declare interface ThemeConfigState {
 		globalTitle: string;
 		globalViceTitle: string;
 		globalI18n: string;
+		globalComponentSize: string;
 	};
 }
 

src/store/modules/themeConfig.ts

@@ -115,6 +115,8 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			globalViceTitle: 'SMALL@小柒',
 			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
 			globalI18n: 'zh-cn',
+			// 默认全局组件大小，可选值"<default|medium|small|mini>"，默认 default
+			globalComponentSize: 'default',
 		},
 	},
 	mutations: {

src/utils/componentSize.ts

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

src/utils/setIconfont.ts

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

src/views/fun/gridLayout/index.vue

@@ -0,0 +1,61 @@
+<template>
+	<div class="grid-layout-container">
+		<el-card shadow="hover" header="vue-grid-layout 拖拽布局演示">
+			<el-alert
+				title="感谢优秀的 `vue-grid-layout`，项目地址：https://github.com/jbaysolutions/vue-grid-layout"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<grid-layout
+				:layout.sync="layouts"
+				:col-num="12"
+				:row-height="30"
+				:is-draggable="true"
+				:is-resizable="true"
+				:is-mirrored="false"
+				:vertical-compact="true"
+				:margin="[10, 10]"
+				:use-css-transforms="true"
+			>
+				<grid-item v-for="item in layouts" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
+					<div class="w100 h100 flex">
+						<span class="flex-margin font14">{{ item.i }}</span>
+					</div>
+				</grid-item>
+			</grid-layout>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+	name: 'funGridLayout',
+	setup() {
+		const state = reactive({
+			layouts: [
+				{ x: 0, y: 0, w: 2, h: 2, i: '0' },
+				{ x: 2, y: 0, w: 2, h: 4, i: '1' },
+				{ x: 4, y: 0, w: 2, h: 5, i: '2' },
+				{ x: 6, y: 0, w: 2, h: 3, i: '3' },
+				{ x: 8, y: 0, w: 2, h: 3, i: '4' },
+				{ x: 10, y: 0, w: 2, h: 3, i: '5' },
+				{ x: 0, y: 5, w: 2, h: 5, i: '6' },
+			],
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.grid-layout-container {
+	.vue-grid-item {
+		background: var(--color-primary);
+		color: #ffffff;
+	}
+}
+</style>

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>
@@ -80,7 +93,8 @@ export default {
 		const state = reactive({
 			isScreenfull: false,
 			isShowUserNewsPopover: false,
-			disabledI18n: false,
+			disabledI18n: 'zh-cn',
+			disabledSize: 'small',
 		});
 		// 获取用户信息 vuex
 		const getUserInfos = computed(() => {
@@ -154,6 +168,14 @@ export default {
 		const onSearchClick = () => {
 			searchRef.value.openSearch();
 		};
+		// 组件大小改变
+		const onComponentSizeChange = (size: string) => {
+			removeLocal('themeConfig');
+			getThemeConfig.value.globalComponentSize = size;
+			setLocal('themeConfig', getThemeConfig.value);
+			proxy.$ELEMENT.size = size;
+			initComponentSize();
+		};
 		// 语言切换
 		const onLanguageChange = (lang: string) => {
 			removeLocal('themeConfig');
@@ -176,9 +198,29 @@ export default {
 					break;
 			}
 		};
+		// 初始化全局组件大小
+		const initComponentSize = () => {
+			switch (getLocal('themeConfig').globalComponentSize) {
+				case 'default':
+					state.disabledSize = 'default';
+					break;
+				case 'medium':
+					state.disabledSize = 'medium';
+					break;
+				case 'small':
+					state.disabledSize = 'small';
+					break;
+				case 'mini':
+					state.disabledSize = 'mini';
+					break;
+			}
+		};
 		// 页面加载时
 		onMounted(() => {
-			if (getLocal('themeConfig')) initI18n();
+			if (getLocal('themeConfig')) {
+				initI18n();
+				initComponentSize();
+			}
 		});
 		return {
 			getUserInfos,
@@ -186,6 +228,7 @@ export default {
 			onHandleCommandClick,
 			onScreenfullClick,
 			onSearchClick,
+			onComponentSizeChange,
 			onLanguageChange,
 			searchRef,
 			layoutUserFlexNum,