diff --git a/README.md b/README.md index d2abe0c..2d849e0 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,7 @@ cnpm run build - qrcodejs - print-js - vue-web-screen-shot +- vue-grid-layout #### 特别感谢 diff --git a/package.json b/package.json index 7ed16a6..5064d6c 100644 --- a/package.json +++ b/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", diff --git a/plugins.d.ts b/plugins.d.ts new file mode 100644 index 0000000..8578ca4 --- /dev/null +++ b/plugins.d.ts @@ -0,0 +1 @@ +declare module 'vue-grid-layout'; diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts index 8e2702a..337bc95 100644 --- a/src/i18n/lang/en.ts +++ b/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', diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts index 0b9fdce..6def26d 100644 --- a/src/i18n/lang/zh-cn.ts +++ b/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', diff --git a/src/i18n/lang/zh-tw.ts b/src/i18n/lang/zh-tw.ts index 2a75543..e2bbd8a 100644 --- a/src/i18n/lang/zh-tw.ts +++ b/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', diff --git a/src/main.ts b/src/main.ts index f01e1da..27cab17 100644 --- a/src/main.ts +++ b/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); diff --git a/src/router/index.ts b/src/router/index.ts index 9137a99..03ef77d 100644 --- a/src/router/index.ts +++ b/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', + }, + }, ], }, { diff --git a/src/store/interface/index.ts b/src/store/interface/index.ts index 5c09df4..2c3fa47 100644 --- a/src/store/interface/index.ts +++ b/src/store/interface/index.ts @@ -46,6 +46,7 @@ declare interface ThemeConfigState { globalTitle: string; globalViceTitle: string; globalI18n: string; + globalComponentSize: string; }; } diff --git a/src/store/modules/themeConfig.ts b/src/store/modules/themeConfig.ts index 8e2df56..c907f39 100644 --- a/src/store/modules/themeConfig.ts +++ b/src/store/modules/themeConfig.ts @@ -115,6 +115,8 @@ const themeConfigModule: Module = { globalViceTitle: 'SMALL@小柒', // 默认初始语言，可选值""，默认 zh-cn globalI18n: 'zh-cn', + // 默认全局组件大小，可选值""，默认 default + globalComponentSize: 'default', }, }, mutations: { diff --git a/src/utils/componentSize.ts b/src/utils/componentSize.ts new file mode 100644 index 0000000..d1b7e79 --- /dev/null +++ b/src/utils/componentSize.ts @@ -0,0 +1,4 @@ +import { getLocal } from '/@/utils/storage.ts'; + +// 全局组件大小 +export const globalComponentSize = getLocal('themeConfig')?.globalComponentSize; diff --git a/src/utils/setIconfont.ts b/src/utils/setIconfont.ts index e7feb90..43ae3af 100644 --- a/src/utils/setIconfont.ts +++ b/src/utils/setIconfont.ts @@ -1,6 +1,6 @@ // 字体图标 url const cssCdnUrlList: Array = [ - '//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 diff --git a/src/views/fun/gridLayout/index.vue b/src/views/fun/gridLayout/index.vue new file mode 100644 index 0000000..f330375 --- /dev/null +++ b/src/views/fun/gridLayout/index.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/src/views/layout/navBars/breadcrumb/user.vue b/src/views/layout/navBars/breadcrumb/user.vue index 8662335..6f1f2c2 100644 --- a/src/views/layout/navBars/breadcrumb/user.vue +++ b/src/views/layout/navBars/breadcrumb/user.vue @@ -1,5 +1,18 @@