hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lyt 2021-04-28 17:02:32 +08:00
parent fa717eb5f2
commit b240c9d8e9
14 changed files with 161 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -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>
#### 特别感谢

1
package.json
View File

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

1
plugins.d.ts vendored Normal file
View File

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

6
src/i18n/lang/en.ts
View File

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

6
src/i18n/lang/zh-cn.ts
View File

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

6
src/i18n/lang/zh-tw.ts
View File

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

12
src/main.ts
View File

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

15
src/router/index.ts
View File

@ -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',
},
},
],
},
{

1
src/store/interface/index.ts
View File

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

2
src/store/modules/themeConfig.ts
View File

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

4
src/utils/componentSize.ts Normal file
View File

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

2
src/utils/setIconfont.ts
View File

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

61
src/views/fun/gridLayout/index.vue Normal file
View File

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

47
src/views/layout/navBars/breadcrumb/user.vue
View File

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