一点点破坏性更新...

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGE LOG
 
+## 3.2.1
+
+### 特征
+
+- 调整系统文件分包，现在结构更加合理、更加清晰
+- 新增 src/appConfig 配置入口，配置系统（还在持续补充中...）
+- vite 版本更新到 4.3.8
+
 ## 3.1.8
 
 ### Fixes

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"

src/appConfig/designConfig.ts

@@ -0,0 +1,28 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-05-19
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/** 系统颜色风格配置入口 */
+
+/**
+ *
+ * 系统主题颜色预设色盘
+ * 支持 RGBA、RGB、十六进制
+ */
+export const APP_THEME_COLOR = [
+  '#2d8cf0',
+  '#0960bd',
+  '#536dfe',
+  '#ff5c93',
+  '#ee4f12',
+  '#9c27b0',
+  '#ff9800',
+  '#18A058',
+]

src/appConfig/localConfig.ts

@@ -2,16 +2,22 @@
  *
  * @author Ray <https://github.com/XiaoDaiGua-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) {

src/appConfig/routerConfig.ts

@@ -0,0 +1,15 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-05-19
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/** vue-router 相关配置入口 */
+
+/** 路由切换容器区域 id 配置 */
+export const viewScrollContainerId = 'rayLayoutContentWrapperScopeSelector'

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

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

src/layout/components/SiderBar/Components/SettingDrawer/hook.ts

@@ -1,8 +0,0 @@
-export const useSwatchesColorOptions = () => [
-  '#FFFFFF',
-  '#18A058',
-  '#2d8cf0',
-  '#F0A020',
-  'rgba(208, 48, 80, 1)',
-  'rgba(60, 53, 222, 1)',
-]

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')}
             </NDivider>
             <NColorPicker
-              swatches={useSwatchesColorOptions()}
+              swatches={APP_THEME_COLOR}
               v-model:value={this.primaryColorOverride.common!.primaryColor}
               onUpdateValue={this.changePrimaryColor.bind(this)}
             />

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 (
       <NLayoutHeader class="layout-header" bordered>
         <GlobalSeach v-model:show={this.globalSearchShown} />
-        {/* <LockScreen /> */}
+        <LockScreen />
         <NSpace
           class="layout-header__method"
           align="center"

src/layout/index.tsx

@@ -16,6 +16,7 @@ import ContentWrapper from '@/layout/default/ContentWrapper'
 import FooterWrapper from '@/layout/default/FooterWrapper'
 
 import { useSetting } from '@/store'
+import { viewScrollContainerId } from '@/appConfig/routerConfig'
 
 const Layout = defineComponent({
   name: 'Layout',
@@ -60,7 +61,7 @@ const Layout = defineComponent({
             <NLayoutContent
               class="layout-content__router-view"
               nativeScrollbar={false}
-              {...{ id: 'rayLayoutContentWrapperScopeSelector' }}
+              {...{ id: viewScrollContainerId }}
             >
               <ContentWrapper />
               <FooterWrapper />

src/locales/helper.ts

@@ -1,3 +1,21 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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<string, any>, 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
+}

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,

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
 

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')

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(),

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

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

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

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({

src/views/multi-menu/index.tsx

@@ -1,24 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-01
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import { RouterView } from 'vue-router'
-
-const MultiMenu = defineComponent({
-  name: 'MultiMenu',
-  setup() {
-    return {}
-  },
-  render() {
-    return <RouterView />
-  },
-})
-
-export default MultiMenu

src/views/multi-menu/views/multi-menu-two/index.tsx

@@ -1,24 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-01
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import { RouterView } from 'vue-router'
-
-const MultiMenuTwo = defineComponent({
-  name: 'MultiMenuTwo',
-  setup() {
-    return {}
-  },
-  render() {
-    return <RouterView />
-  },
-})
-
-export default MultiMenuTwo

src/views/rely/index.tsx

@@ -1,13 +0,0 @@
-import { RouterView } from 'vue-router'
-
-const Rely = defineComponent({
-  name: 'Rely',
-  setup() {
-    return {}
-  },
-  render() {
-    return <RouterView />
-  },
-})
-
-export default Rely