From 7313a8bdee9d03e9eb609f63e76131f97627959b Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Fri, 19 May 2023 14:49:33 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E7=82=B9=E7=82=B9=E7=A0=B4=E5=9D=8F?= =?UTF-8?q?=E6=80=A7=E6=9B=B4=E6=96=B0...?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 8 +++++ package.json | 8 ++--- src/appConfig/designConfig.ts | 28 +++++++++++++++ .../language.ts => appConfig/localConfig.ts} | 12 +++++-- src/appConfig/routerConfig.ts | 15 ++++++++ src/components/RayGlobalProvider/index.tsx | 2 +- .../components/ThemeSwitch/index.tsx | 15 ++------ .../SiderBar/Components/SettingDrawer/hook.ts | 8 ----- .../Components/SettingDrawer/index.tsx | 4 +-- src/layout/components/SiderBar/index.tsx | 4 +-- src/layout/index.tsx | 3 +- src/locales/helper.ts | 36 +++++++++++++++++++ src/locales/index.ts | 20 ++--------- src/router/basic.ts | 4 +-- src/router/constant/index.ts | 18 ++++++++++ src/router/index.ts | 36 ++----------------- src/router/modules/multi-menu.ts | 14 ++++---- src/router/modules/rely.ts | 4 ++- src/router/utils/viewScrollTop.ts | 36 +++++++++++++++++++ src/views/login/index.tsx | 2 +- src/views/multi-menu/index.tsx | 24 ------------- .../multi-menu/views/multi-menu-two/index.tsx | 24 ------------- .../views/multi-menu-one/index.tsx | 0 .../multi-menu-two/views/sub-menu/index.tsx | 0 src/views/rely/index.tsx | 13 ------- 25 files changed, 182 insertions(+), 156 deletions(-) create mode 100644 src/appConfig/designConfig.ts rename src/{locales/language.ts => appConfig/localConfig.ts} (77%) create mode 100644 src/appConfig/routerConfig.ts delete mode 100644 src/layout/components/SiderBar/Components/SettingDrawer/hook.ts create mode 100644 src/router/constant/index.ts create mode 100644 src/router/utils/viewScrollTop.ts delete mode 100644 src/views/multi-menu/index.tsx delete mode 100644 src/views/multi-menu/views/multi-menu-two/index.tsx rename src/views/{multi-menu => multi}/views/multi-menu-one/index.tsx (100%) rename src/views/{multi-menu => multi}/views/multi-menu-two/views/sub-menu/index.tsx (100%) delete mode 100644 src/views/rely/index.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 647de306..3dc138be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # CHANGE LOG +## 3.2.1 + +### 特征 + +- 调整系统文件分包，现在结构更加合理、更加清晰 +- 新增 src/appConfig 配置入口，配置系统（还在持续补充中...） +- vite 版本更新到 4.3.8 + ## 3.1.8 ### Fixes diff --git a/package.json b/package.json index c41dfc02..3d5b729e 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,8 @@ "@types/scrollreveal": "^0.0.8", "@typescript-eslint/eslint-plugin": "^5.42.1", "@typescript-eslint/parser": "^5.42.1", - "@vitejs/plugin-vue": "^3.0.0", - "@vitejs/plugin-vue-jsx": "^2.0.0", + "@vitejs/plugin-vue": "^4.2.3", + "@vitejs/plugin-vue-jsx": "^3.0.1", "autoprefixer": "^10.4.8", "depcheck": "^1.4.3", "eslint": "^8.0.1", @@ -73,12 +73,12 @@ "typescript": "*", "unplugin-auto-import": "^0.11.0", "unplugin-vue-components": "^0.22.0", - "vite": "^4.1.4", + "vite": "^4.3.8", "vite-plugin-compression": "^0.5.1", "vite-plugin-ejs": "^1.6.4", "vite-plugin-eslint": "^1.8.1", "vite-plugin-imp": "^2.3.1", - "vite-plugin-inspect": "^0.6.0", + "vite-plugin-inspect": "^0.7.26", "vite-plugin-svg-icons": "^2.0.1", "vite-svg-loader": "^3.4.0", "vue-tsc": "^1.0.9" diff --git a/src/appConfig/designConfig.ts b/src/appConfig/designConfig.ts new file mode 100644 index 00000000..1f96a2e2 --- /dev/null +++ b/src/appConfig/designConfig.ts @@ -0,0 +1,28 @@ +/** + * + * @author Ray + * + * @date 2023-05-19 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** 系统颜色风格配置入口 */ + +/** + * + * 系统主题颜色预设色盘 + * 支持 RGBA、RGB、十六进制 + */ +export const APP_THEME_COLOR = [ + '#2d8cf0', + '#0960bd', + '#536dfe', + '#ff5c93', + '#ee4f12', + '#9c27b0', + '#ff9800', + '#18A058', +] diff --git a/src/locales/language.ts b/src/appConfig/localConfig.ts similarity index 77% rename from src/locales/language.ts rename to src/appConfig/localConfig.ts index 41d7a6b0..bdd78583 100644 --- a/src/locales/language.ts +++ b/src/appConfig/localConfig.ts @@ -2,16 +2,22 @@ * * @author Ray * - * @date 2023-03-01 + * @date 2023-05-19 * * @workspace ray-template * * @remark 今天也是元气满满撸代码的一天 */ +/** 国际化相关配置 */ + import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包 -/** 语言包语种添加后, 需要在此文件配置语言包 */ +/** + * + * 语言包语种添加后, 需要在此文件配置语言包 + * 该配置中的 key 也会影响 naiveLocales 方法, 配置后请仔细核对一下 + */ export const localOptions = [ { key: 'zh-CN', @@ -30,6 +36,8 @@ export const localOptions = [ * * @remark 受打包体积影响. 如果有新的语言添加, 则需要手动引入对应语言包(https://www.naiveui.com/zh-CN/dark/docs/i18n) * @remark naive ui 默认为英文 + * + * 该方法的比对 key 必须与 localOptions 一一对应 */ export const naiveLocales = (key: string) => { switch (key) { diff --git a/src/appConfig/routerConfig.ts b/src/appConfig/routerConfig.ts new file mode 100644 index 00000000..085dbef4 --- /dev/null +++ b/src/appConfig/routerConfig.ts @@ -0,0 +1,15 @@ +/** + * + * @author Ray + * + * @date 2023-05-19 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** vue-router 相关配置入口 */ + +/** 路由切换容器区域 id 配置 */ +export const viewScrollContainerId = 'rayLayoutContentWrapperScopeSelector' diff --git a/src/components/RayGlobalProvider/index.tsx b/src/components/RayGlobalProvider/index.tsx index 42eb7bc3..ac5458b4 100644 --- a/src/components/RayGlobalProvider/index.tsx +++ b/src/components/RayGlobalProvider/index.tsx @@ -10,7 +10,7 @@ import { } from 'naive-ui' import { useSetting } from '@/store' -import { naiveLocales } from '@/locales/index' +import { naiveLocales } from '@/appConfig/localConfig' const GlobalProvider = defineComponent({ name: 'GlobalProvider', diff --git a/src/layout/components/SiderBar/Components/SettingDrawer/components/ThemeSwitch/index.tsx b/src/layout/components/SiderBar/Components/SettingDrawer/components/ThemeSwitch/index.tsx index 1948e118..07b0f8ac 100644 --- a/src/layout/components/SiderBar/Components/SettingDrawer/components/ThemeSwitch/index.tsx +++ b/src/layout/components/SiderBar/Components/SettingDrawer/components/ThemeSwitch/index.tsx @@ -9,22 +9,11 @@ * @remark 今天也是元气满满撸代码的一天 */ -import { - NSpace, - NCard, - NTabs, - NTabPane, - NGradientText, - NDropdown, - NDivider, - NGrid, - NGridItem, - NSwitch, - NTooltip, -} from 'naive-ui' +import { NSpace, NSwitch, NTooltip } from 'naive-ui' import RayIcon from '@/components/RayIcon' import { useSetting } from '@/store' +import { useI18n } from '@/locales/useI18n' const ThemeSwitch = defineComponent({ name: 'ThemeSwitch', diff --git a/src/layout/components/SiderBar/Components/SettingDrawer/hook.ts b/src/layout/components/SiderBar/Components/SettingDrawer/hook.ts deleted file mode 100644 index 0ac9549b..00000000 --- a/src/layout/components/SiderBar/Components/SettingDrawer/hook.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const useSwatchesColorOptions = () => [ - '#FFFFFF', - '#18A058', - '#2d8cf0', - '#F0A020', - 'rgba(208, 48, 80, 1)', - 'rgba(60, 53, 222, 1)', -] diff --git a/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx b/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx index f78a1306..c9419890 100644 --- a/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx +++ b/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx @@ -11,7 +11,7 @@ import { } from 'naive-ui' import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index' -import { useSwatchesColorOptions } from './hook' +import { APP_THEME_COLOR } from '@/appConfig/designConfig' import { useSetting } from '@/store' import { useI18n } from '@/locales/useI18n' @@ -85,7 +85,7 @@ const SettingDrawer = defineComponent({ {t('headerSettingOptions.ThemeOptions.PrimaryColorConfig')} diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index 471af0d8..7643dd53 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -20,7 +20,7 @@ import GlobalSeach from './components/GlobalSeach/index' import LockScreen from './components/LockScreen/index' import { useSetting, useSignin } from '@/store' -import { localOptions } from '@/locales/index' +import { localOptions } from '@/appConfig/localConfig' import { useAvatarOptions } from './hook' import { getCache } from '@/utils/cache' import screenfull from 'screenfull' @@ -166,7 +166,7 @@ const SiderBar = defineComponent({ return ( - {/* */} + diff --git a/src/locales/helper.ts b/src/locales/helper.ts index 47eafaf3..6d066471 100644 --- a/src/locales/helper.ts +++ b/src/locales/helper.ts @@ -1,3 +1,21 @@ +/** + * + * @author Ray + * + * @date 2023-05-19 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * 国际化辅助方法: + * - mergeMessage: 合并对应文件下语言包 + * - getAppLocales: 获取所有语言 + */ + /* eslint-disable @typescript-eslint/no-explicit-any */ import { set } from 'lodash-es' @@ -30,3 +48,21 @@ export const mergeMessage = (langs: Record, prefix = 'lang') => { return langsGather } + +/** 获取所有语言 */ +export const getAppLocales = async ( + localOptions: { + key: string + label: string + }[], +) => { + const message = {} + + for (const curr of localOptions) { + const msg = await import(`./lang/${curr.key}.ts`) + + message[curr.key] = msg.default?.message ?? {} + } + + return message +} diff --git a/src/locales/index.ts b/src/locales/index.ts index f366142b..8c82bbf2 100644 --- a/src/locales/index.ts +++ b/src/locales/index.ts @@ -25,11 +25,10 @@ */ import { createI18n } from 'vue-i18n' -import { localOptions } from './language' +import { localOptions } from '@/appConfig/localConfig' import { getCache } from '@use-utils/cache' - -export { naiveLocales, localOptions } from './language' +import { getAppLocales } from '@/locales/helper' import type { App } from 'vue' import type { I18n } from 'vue-i18n' @@ -51,23 +50,10 @@ export const getDefaultLocal = () => { return locale } -/** 获取所有语言 */ -const getAppLocales = async () => { - const message = {} - - for (const curr of localOptions) { - const msg = await import(`./lang/${curr.key}.ts`) - - message[curr.key] = msg.default?.message ?? {} - } - - return message -} - /** 创建 i18n 实例 */ const createI18nOptions = async () => { const locale = getDefaultLocal() - const message = await getAppLocales() + const message = await getAppLocales(localOptions) const i18nInstance = createI18n({ legacy: false, diff --git a/src/router/basic.ts b/src/router/basic.ts index c6d3f659..5a45084e 100644 --- a/src/router/basic.ts +++ b/src/router/basic.ts @@ -25,11 +25,11 @@ import { useSignin } from '@/store' import { whiteRoutes, superAdmin } from './configuration' -export const validRole = (options: IMenuOptions) => { +export const validRole = (option: IMenuOptions) => { const { signinCallback } = storeToRefs(useSignin()) const role = computed(() => signinCallback.value.role) - const { meta, name } = options + const { meta, name } = option const hidden = meta?.hidden === undefined || meta?.hidden === false ? false : meta?.hidden diff --git a/src/router/constant/index.ts b/src/router/constant/index.ts new file mode 100644 index 00000000..28bc3be2 --- /dev/null +++ b/src/router/constant/index.ts @@ -0,0 +1,18 @@ +/** + * + * default layout + * + * 默认布局, 统一使用该组件管理右侧现实内容区域展示 + * + * 使用示例: + * ``` + * { + * path: '/axios', + * name: 'Axios', + * component: LAYOUT, + * meta: { ... }, + * children: [ { ... } ] + * } + * ``` + */ +export const LAYOUT = () => import('@/layout/default/ContentWrapper/index') diff --git a/src/router/index.ts b/src/router/index.ts index 30887524..f9633303 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -2,42 +2,10 @@ import { createRouter, createWebHashHistory } from 'vue-router' import { constantRoutes } from './routes' import { permissionRouter as _permissionRouter } from './permission' -import { getElement } from '@/utils/element' +import scrollViewToTop from '@/router/utils/viewScrollTop' import type { App } from 'vue' -import type { RouteRecordRaw, RouteLocationNormalized } from 'vue-router' - -/** - * - * 切换路由时, 手动将容器区域回归默认值 - * - * 由于官方不支持这个方法了, 所以自己手写了一个 - * 如果需要忽略恢复默认位置, 仅需要在 meta 中配置 ignoreResetScroll 属性即可 - * - * 找到滚动元素容器的写法有点丑陋, 暂时也想不到啥好方法解决, 就凑合一下吧 - */ -const scrollViewToTop = (route: RouteLocationNormalized) => { - const { meta } = route - - /** 这个 id 是注入在 layout 中 */ - if (!meta?.ignoreResetScroll) { - const scrollViewRoot = getElement( - '#rayLayoutContentWrapperScopeSelector', - )?.[0] - - if (scrollViewRoot && typeof scrollViewRoot.scroll) { - /** 找到 NLayoutContent 组件滚动元素 */ - const scrollView = scrollViewRoot?.firstElementChild - ?.firstChild as HTMLElement - - scrollView?.scroll({ - top: 0, - left: 0, - behavior: 'smooth', - }) - } - } -} +import type { RouteRecordRaw } from 'vue-router' export const router = createRouter({ history: createWebHashHistory(), diff --git a/src/router/modules/multi-menu.ts b/src/router/modules/multi-menu.ts index 13c6aae6..65867f51 100644 --- a/src/router/modules/multi-menu.ts +++ b/src/router/modules/multi-menu.ts @@ -1,9 +1,11 @@ import type { AppRouteRecordRaw } from '@/router/type' +import { LAYOUT } from '@/router/constant/index' + const multiMenu: AppRouteRecordRaw = { - path: '/multi-menu', + path: '/multi', name: 'MultiMenu', - component: () => import('@/views/multi-menu/index'), + component: LAYOUT, meta: { i18nKey: 'MultiMenu', icon: 'table', @@ -12,7 +14,7 @@ const multiMenu: AppRouteRecordRaw = { { path: 'multi-menu-one', name: 'MultiMenuOne', - component: () => import('@/views/multi-menu/views/multi-menu-one/index'), + component: () => import('@/views/multi/views/multi-menu-one/index'), meta: { noLocalTitle: '多级菜单-1', }, @@ -20,7 +22,7 @@ const multiMenu: AppRouteRecordRaw = { { path: 'multi-menu-two', name: 'MultiMenuTwo', - component: () => import('@/views/multi-menu/views/multi-menu-two/index'), + component: LAYOUT, meta: { noLocalTitle: '多级菜单-2', }, @@ -29,9 +31,7 @@ const multiMenu: AppRouteRecordRaw = { path: 'sub-menu', name: 'SubMenu', component: () => - import( - '@/views/multi-menu/views/multi-menu-two/views/sub-menu/index' - ), + import('@/views/multi/views/multi-menu-two/views/sub-menu/index'), meta: { noLocalTitle: '多级菜单-2-1', }, diff --git a/src/router/modules/rely.ts b/src/router/modules/rely.ts index 00397adb..450670ff 100644 --- a/src/router/modules/rely.ts +++ b/src/router/modules/rely.ts @@ -1,9 +1,11 @@ import type { AppRouteRecordRaw } from '@/router/type' +import { LAYOUT } from '@/router/constant/index' + const rely: AppRouteRecordRaw = { path: '/rely', name: 'Rely', - component: () => import('@/views/rely/index'), + component: LAYOUT, meta: { i18nKey: 'Rely', icon: 'rely', diff --git a/src/router/utils/viewScrollTop.ts b/src/router/utils/viewScrollTop.ts new file mode 100644 index 00000000..8b837cde --- /dev/null +++ b/src/router/utils/viewScrollTop.ts @@ -0,0 +1,36 @@ +import { getElement } from '@/utils/element' +import { viewScrollContainerId } from '@/appConfig/routerConfig' + +import type { RouteLocationNormalized } from 'vue-router' + +/** + * + * 切换路由时, 手动将容器区域回归默认值 + * + * 由于官方不支持这个方法了, 所以自己手写了一个 + * 如果需要忽略恢复默认位置, 仅需要在 meta 中配置 ignoreResetScroll 属性即可 + * + * 找到滚动元素容器的写法有点丑陋, 暂时也想不到啥好方法解决, 就凑合一下吧 + */ +const scrollViewToTop = (route: RouteLocationNormalized) => { + const { meta } = route + + /** 这个 id 是注入在 layout 中 */ + if (!meta?.ignoreResetScroll) { + const scrollViewRoot = getElement(`#${viewScrollContainerId}`)?.[0] + + if (scrollViewRoot && typeof scrollViewRoot.scroll) { + /** 找到 NLayoutContent 组件滚动元素 */ + const scrollView = scrollViewRoot?.firstElementChild + ?.firstChild as HTMLElement + + scrollView?.scroll({ + top: 0, + left: 0, + behavior: 'smooth', + }) + } + } +} + +export default scrollViewToTop diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx index a96fe238..be80cd5a 100644 --- a/src/views/login/index.tsx +++ b/src/views/login/index.tsx @@ -20,7 +20,7 @@ import RayLink from '@/components/RayLink/index' import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index' import { useSetting } from '@/store' -import { localOptions } from '@/locales/index' +import { localOptions } from '@/appConfig/localConfig' import { useI18n } from '@/locales/useI18n' const Login = defineComponent({ diff --git a/src/views/multi-menu/index.tsx b/src/views/multi-menu/index.tsx deleted file mode 100644 index 6e71aa22..00000000 --- a/src/views/multi-menu/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-03-01 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -import { RouterView } from 'vue-router' - -const MultiMenu = defineComponent({ - name: 'MultiMenu', - setup() { - return {} - }, - render() { - return - }, -}) - -export default MultiMenu diff --git a/src/views/multi-menu/views/multi-menu-two/index.tsx b/src/views/multi-menu/views/multi-menu-two/index.tsx deleted file mode 100644 index 1ac76026..00000000 --- a/src/views/multi-menu/views/multi-menu-two/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-03-01 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -import { RouterView } from 'vue-router' - -const MultiMenuTwo = defineComponent({ - name: 'MultiMenuTwo', - setup() { - return {} - }, - render() { - return - }, -}) - -export default MultiMenuTwo diff --git a/src/views/multi-menu/views/multi-menu-one/index.tsx b/src/views/multi/views/multi-menu-one/index.tsx similarity index 100% rename from src/views/multi-menu/views/multi-menu-one/index.tsx rename to src/views/multi/views/multi-menu-one/index.tsx diff --git a/src/views/multi-menu/views/multi-menu-two/views/sub-menu/index.tsx b/src/views/multi/views/multi-menu-two/views/sub-menu/index.tsx similarity index 100% rename from src/views/multi-menu/views/multi-menu-two/views/sub-menu/index.tsx rename to src/views/multi/views/multi-menu-two/views/sub-menu/index.tsx diff --git a/src/views/rely/index.tsx b/src/views/rely/index.tsx deleted file mode 100644 index 6a6728a6..00000000 --- a/src/views/rely/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { RouterView } from 'vue-router' - -const Rely = defineComponent({ - name: 'Rely', - setup() { - return {} - }, - render() { - return - }, -}) - -export default Rely