From eba55769ec765cd4fbf1faefdd4f3df5e38f11d9 Mon Sep 17 00:00:00 2001 From: vben Date: Sun, 10 Jan 2021 21:23:21 +0800 Subject: [PATCH] feat: support vite2 --- .env | 3 -- CHANGELOG.zh_CN.md | 7 ++++- src/App.vue | 2 +- src/components/registerGlobComp.ts | 15 ++++++++-- src/layouts/default/setting/SettingDrawer.tsx | 2 +- src/{setup => logics}/error-handle/index.ts | 0 src/{setup/App.ts => logics/initAppConfig.ts} | 17 ----------- src/main.ts | 6 +--- src/settings/colorSetting.ts | 29 ------------------ src/settings/designSetting.ts | 30 +++++++++++++++++++ src/setup/ant-design-vue/index.ts | 19 ------------ 11 files changed, 52 insertions(+), 78 deletions(-) rename src/{setup => logics}/error-handle/index.ts (100%) rename src/{setup/App.ts => logics/initAppConfig.ts} (73%) delete mode 100644 src/settings/colorSetting.ts delete mode 100644 src/setup/ant-design-vue/index.ts diff --git a/.env b/.env index a59a119d..fdd62d5c 100644 --- a/.env +++ b/.env @@ -6,6 +6,3 @@ VITE_GLOB_APP_TITLE = Vben Admin # spa shortname VITE_GLOB_APP_SHORT_NAME = vue_vben_admin_2x - -# Whether to dynamically load all files in `src/views` -VITE_DYNAMIC_IMPORT = true diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index e6bee002..8f09c977 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -2,7 +2,11 @@ ### ✨ Refactor -独立组件配置到 `/@/settings/componentsSetting` +- 独立组件配置到 `/@/settings/componentsSetting` +- `colorSetting`和`designSetting`现在合并为`designSetting` +- `ant-design-vue`组件注册移动到`components/registerComponent` +- 移除 `setup` 文件夹 +- 升级到`vite2` ### ✨ Features @@ -11,6 +15,7 @@ - modal 组件新增`height`和`min-height`属性 - 新增`PageWrapper`组件。并应用于示例页面 - 新增标签页折叠功能 +- 兼容旧版浏览器 ### 🐛 Bug Fixes diff --git a/src/App.vue b/src/App.vue index b4bd0ccc..e407d62d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,7 +10,7 @@ import { defineComponent } from 'vue'; import { ConfigProvider } from 'ant-design-vue'; - import { initAppConfigStore } from '/@/setup/App'; + import { initAppConfigStore } from '/@/logics/initAppConfig'; import { useLockPage } from '/@/hooks/web/useLockPage'; import { useLocale } from '/@/locales/useLocale'; diff --git a/src/components/registerGlobComp.ts b/src/components/registerGlobComp.ts index fdd183ad..cd395676 100644 --- a/src/components/registerGlobComp.ts +++ b/src/components/registerGlobComp.ts @@ -34,7 +34,14 @@ import { Avatar, Menu, Breadcrumb, + Form, + Input, + Row, + Col, + Spin, } from 'ant-design-vue'; +import 'ant-design-vue/dist/antd.css'; + import { App } from 'vue'; const compList = [Icon, Button, AntButton.Group]; @@ -46,7 +53,6 @@ export function registerGlobComp(app: App) { }); // Optional - // Why register here： The main reason for registering here is not to increase the size of the first screen code // If you need to customize global components, you can write here // If you don’t need it, you can delete it app @@ -78,5 +84,10 @@ export function registerGlobComp(app: App) { .use(Empty) .use(Avatar) .use(Menu) - .use(Tabs); + .use(Tabs) + .use(Form) + .use(Input) + .use(Row) + .use(Col) + .use(Spin); } diff --git a/src/layouts/default/setting/SettingDrawer.tsx b/src/layouts/default/setting/SettingDrawer.tsx index 60e7707f..635f3d77 100644 --- a/src/layouts/default/setting/SettingDrawer.tsx +++ b/src/layouts/default/setting/SettingDrawer.tsx @@ -31,7 +31,7 @@ import { mixSidebarTriggerOptions, } from './enum'; -import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/colorSetting'; +import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/designSetting'; const { t } = useI18n(); diff --git a/src/setup/error-handle/index.ts b/src/logics/error-handle/index.ts similarity index 100% rename from src/setup/error-handle/index.ts rename to src/logics/error-handle/index.ts diff --git a/src/setup/App.ts b/src/logics/initAppConfig.ts similarity index 73% rename from src/setup/App.ts rename to src/logics/initAppConfig.ts index 4b3476ca..0ee1f135 100644 --- a/src/setup/App.ts +++ b/src/logics/initAppConfig.ts @@ -3,9 +3,7 @@ */ import type { ProjectConfig } from '/@/types/config'; -import { computed, ref } from 'vue'; -import { ThemeModeEnum } from '/@/enums/appEnum'; import { PROJ_CFG_KEY } from '/@/enums/cacheEnum'; import projectSetting from '/@/settings/projectSetting'; @@ -20,21 +18,6 @@ import { import { appStore } from '/@/store/modules/app'; import { deepMerge } from '/@/utils'; -// TODO Theme switching -export function useThemeMode(mode: ThemeModeEnum) { - const modeRef = ref(mode); - const html = document.documentElement; - const clsList = html.classList; - - const change = () => { - clsList.contains(mode) ? clsList.remove(mode) : clsList.add(mode); - }; - return { - runChangeThemeMode: change, - mode: computed(() => modeRef.value), - }; -} - // Initial project configuration export function initAppConfigStore() { let projCfg: ProjectConfig = getLocal(PROJ_CFG_KEY) as ProjectConfig; diff --git a/src/main.ts b/src/main.ts index 42a4938e..d9fce45e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,8 +3,7 @@ import App from './App.vue'; import router, { setupRouter } from '/@/router'; import { setupStore } from '/@/store'; -import { setupAntd } from '/@/setup/ant-design-vue'; -import { setupErrorHandle } from '/@/setup/error-handle'; +import { setupErrorHandle } from '/@/logics/error-handle'; import { setupGlobDirectives } from '/@/directives'; import { setupI18n } from '/@/locales/setupI18n'; import { setupProdMockServer } from '../mock/_createProductionServer'; @@ -19,9 +18,6 @@ const app = createApp(App); registerGlobComp(app); -// Configure component library -setupAntd(app); - // Multilingual configuration setupI18n(app); diff --git a/src/settings/colorSetting.ts b/src/settings/colorSetting.ts deleted file mode 100644 index 8bad5866..00000000 --- a/src/settings/colorSetting.ts +++ /dev/null @@ -1,29 +0,0 @@ -// header preset color -export const HEADER_PRESET_BG_COLOR_LIST: string[] = [ - '#ffffff', - '#009688', - '#5172DC', - '#1E9FFF', - '#018ffb', - '#409eff', - '#4e73df', - '#e74c3c', - '#24292e', - '#394664', - '#001529', - '#383f45', -]; - -// sider preset color -export const SIDE_BAR_BG_COLOR_LIST: string[] = [ - '#001529', - '#273352', - '#ffffff', - '#191b24', - '#191a23', - '#304156', - '#001628', - '#28333E', - '#344058', - '#383f45', -]; diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index 13e4d62d..d221e29f 100644 --- a/src/settings/designSetting.ts +++ b/src/settings/designSetting.ts @@ -1,3 +1,33 @@ export default { prefixCls: 'vben', }; + +// header preset color +export const HEADER_PRESET_BG_COLOR_LIST: string[] = [ + '#ffffff', + '#009688', + '#5172DC', + '#1E9FFF', + '#018ffb', + '#409eff', + '#4e73df', + '#e74c3c', + '#24292e', + '#394664', + '#001529', + '#383f45', +]; + +// sider preset color +export const SIDE_BAR_BG_COLOR_LIST: string[] = [ + '#001529', + '#273352', + '#ffffff', + '#191b24', + '#191a23', + '#304156', + '#001628', + '#28333E', + '#344058', + '#383f45', +]; diff --git a/src/setup/ant-design-vue/index.ts b/src/setup/ant-design-vue/index.ts deleted file mode 100644 index d16f7cc8..00000000 --- a/src/setup/ant-design-vue/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -// Load on demand -// This module only introduces components globally before login -import type { App } from 'vue'; - -import { - // need - Form, - Input, - Row, - Col, - Spin, -} from 'ant-design-vue'; -import 'ant-design-vue/dist/antd.css'; - -export function setupAntd(app: App) { - // need - // Here are the components required before registering and logging in - app.use(Form).use(Input).use(Row).use(Col).use(Spin); -} -- GitLab