v3.2.2

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGE LOG
 
+## 3.2.2
+
+### 特征
+
+- 移除 amfe-flexible 插件，改用为 postcss-px-to-viewport 作为适配插件
+- 支持更多 appConfig 配置
+
 ## 3.2.1
 
 ### 特征

package.json

@@ -21,7 +21,6 @@
   },
   "dependencies": {
     "@vueuse/core": "^9.1.0",
-    "amfe-flexible": "^2.2.1",
     "axios": "^1.2.0",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.7",

src/appConfig/appConfig.ts

@@ -15,7 +15,8 @@ import type {
   LayoutSideBarLogo,
   PreloadingConfig,
   RootRoute,
-} from '../types/cfg'
+} from '@/types/cfg'
+import type { MenuCollapsedConfig } from '@/types/appConfig'
 
 /** 首屏加载信息配置 */
 export const PRE_LOADING_CONFIG: PreloadingConfig = {
@@ -51,3 +52,27 @@ export const SIDE_BAR_LOGO: LayoutSideBarLogo = {
   url: '/dashboard',
   jumpType: 'station',
 }
+
+/**
+ *
+ * 系统菜单折叠配置
+ *
+ * MENU_COLLAPSED_WIDTH 配置仅当 MENU_COLLAPSED_MODE 为 width 风格时才有效
+ *
+ * MENU_COLLAPSED_MODE:
+ *   - transform: 边栏将只会移动它的位置而不会改变宽度
+ *   - width: Sider 的内容宽度将会被实际改变
+ *
+ * MENU_COLLAPSED_ICON_SIZE 配置菜单未折叠时图标的大小
+ *
+ * MENU_COLLAPSED_INDENT 配置菜单每级的缩进
+ */
+export const MENU_COLLAPSED_CONFIG: MenuCollapsedConfig = {
+  MENU_COLLAPSED_WIDTH: 64,
+  MENU_COLLAPSED_MODE: 'width',
+  MENU_COLLAPSED_ICON_SIZE: 22,
+  MENU_COLLAPSED_INDENT: 24,
+}
+
+/** 是否启用菜单手风琴模式 */
+export const MENU_ACCORDION = false

src/appConfig/designConfig.ts

@@ -11,7 +11,8 @@
 
 /** 系统颜色风格配置入口 */
 
-import type { AppPrimaryColor } from '../types/cfg'
+import type { AppPrimaryColor } from '@/types/cfg'
+import type { GlobalThemeOverrides } from 'naive-ui'
 
 /**
  *
@@ -36,3 +37,28 @@ export const APP_PRIMARY_COLOR: AppPrimaryColor = {
   /** 主题辅助色(用于整体 hover、active 等之类颜色) */
   primaryFadeColor: 'rgba(45, 140, 240, 0.3)',
 }
+
+/**
+ *
+ * 配置系统 naive-ui 主题色
+ * 官网文档地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme>
+ *
+ * 注意:
+ *   - APP_PRIMARY_COLOR common 配置优先级大于该配置
+ *
+ * 如果需要定制化整体组件样式, 配置示例
+ * ```
+ * const themeOverrides: GlobalThemeOverrides = {
+ *   common: {
+ *     primaryColor: '#FF0000',
+ *   },
+ *   Button: {
+ *     textColor: '#FF0000',
+ *   },
+ * }
+ * ```
+ *
+ * 具体自行查看官网, 还有模式更佳丰富的 peers 主题变量配置
+ * 地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme#%E4%BD%BF%E7%94%A8-peers-%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8F>
+ */
+export const APP_NAIVE_UI_THEME_OVERRIDES: GlobalThemeOverrides = {}

src/appConfig/localConfig.ts

@@ -11,14 +11,12 @@
 
 /** 国际化相关配置 */
 
-import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
-
 /**
  *
  * 语言包语种添加后, 需要在此文件配置语言包
  * 该配置中的 key 也会影响 naiveLocales 方法, 配置后请仔细核对一下
  */
-export const localOptions = [
+export const LOCAL_OPTIONS = [
   {
     key: 'zh-CN',
     label: '中文(简体)',
@@ -31,32 +29,8 @@ export const localOptions = [
 
 /**
  *
- * @param key 切换对应语言
- * @returns 组件库对应语言包
+ * 系统默认语言
  *
- * @remark 受打包体积影响. 如果有新的语言添加, 则需要手动引入对应语言包(https://www.naiveui.com/zh-CN/dark/docs/i18n)
- * @remark naive ui 默认为英文
- *
- * 该方法的比对 key 必须与 localOptions 一一对应
+ * 配置时应该与 LOCAL_OPTIONS 的 key 一致
  */
-export const naiveLocales = (key: string) => {
-  switch (key) {
-    case 'zh-CN':
-      return {
-        locale: zhCN,
-        dateLocal: dateZhCN,
-      }
-
-    case 'en-US':
-      return {
-        locale: null,
-        dateLocal: null,
-      }
-
-    default:
-      return {
-        locale: zhCN,
-        dateLocal: dateZhCN,
-      }
-  }
-}
+export const SYSTEM_DEFAULT_LOCAL = 'zh-CN'

src/components/RayGlobalProvider/index.tsx

@@ -10,7 +10,7 @@ import {
 } from 'naive-ui'
 
 import { useSetting } from '@/store'
-import { naiveLocales } from '@/appConfig/localConfig'
+import { naiveLocales } from '@/locales/helper'
 
 const GlobalProvider = defineComponent({
   name: 'GlobalProvider',

src/layout/components/Menu/index.tsx

@@ -4,6 +4,7 @@ import { NMenu, NLayoutSider, NEllipsis } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
 
 import { useMenu } from '@/store'
+import { MENU_COLLAPSED_CONFIG, MENU_ACCORDION } from '@/appConfig/appConfig'
 
 const LayoutMenu = defineComponent({
   name: 'LayoutMenu',
@@ -19,7 +20,6 @@ const LayoutMenu = defineComponent({
     })
     const modelMenuOptions = computed(() => menuStore.options)
     const modelCollapsed = computed(() => menuStore.collapsed)
-    const collapsedWidth = 64
     const {
       layout: { sideBarLogo },
     } = __APP_CFG__
@@ -40,7 +40,6 @@ const LayoutMenu = defineComponent({
       modelMenuOptions,
       modelCollapsed,
       collapsedMenu,
-      collapsedWidth,
       sideBarLogo,
       handleSideBarLogoClick,
     }
@@ -50,8 +49,8 @@ const LayoutMenu = defineComponent({
       <NLayoutSider
         bordered
         showTrigger
-        collapseMode="width"
-        collapsedWidth={this.collapsedWidth}
+        collapseMode={MENU_COLLAPSED_CONFIG.MENU_COLLAPSED_MODE}
+        collapsedWidth={MENU_COLLAPSED_CONFIG.MENU_COLLAPSED_WIDTH}
         onUpdateCollapsed={this.collapsedMenu.bind(this)}
         nativeScrollbar={false}
       >
@@ -83,11 +82,12 @@ const LayoutMenu = defineComponent({
         <NMenu
           v-model:value={this.modelMenuKey}
           options={this.modelMenuOptions as NaiveMenuOptions[]}
-          indent={24}
+          indent={MENU_COLLAPSED_CONFIG.MENU_COLLAPSED_INDENT}
           collapsed={this.modelCollapsed}
-          collapsedIconSize={22}
-          collapsedWidth={this.collapsedWidth}
+          collapsedIconSize={MENU_COLLAPSED_CONFIG.MENU_COLLAPSED_ICON_SIZE}
+          collapsedWidth={MENU_COLLAPSED_CONFIG.MENU_COLLAPSED_WIDTH}
           onUpdateValue={this.menuModelValueChange.bind(this)}
+          accordion={MENU_ACCORDION}
         />
       </NLayoutSider>
     )

src/layout/components/SiderBar/Components/LockScreen/index.tsx

@@ -69,7 +69,14 @@ const LockScreen = defineComponent({
                 />
               </NFormItem>
               <NFormItem>
-                <NButton type="primary">锁屏</NButton>
+                <NButton
+                  type="primary"
+                  onClick={() => {
+                    window.$message.info('功能开发中...')
+                  }}
+                >
+                  锁屏
+                </NButton>
               </NFormItem>
             </NForm>
           </div>

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 '@/appConfig/localConfig'
+import { LOCAL_OPTIONS } from '@/appConfig/localConfig'
 import { useAvatarOptions } from './hook'
 import { getCache } from '@/utils/cache'
 import screenfull from 'screenfull'
@@ -207,7 +207,7 @@ const SiderBar = defineComponent({
               />
             ))}
             <NDropdown
-              options={localOptions}
+              options={LOCAL_OPTIONS}
               onSelect={(key: string | number) =>
                 this.updateLocale(String(key))
               }

src/locales/README.md

@@ -0,0 +1,34 @@
+## 国际化入口
+
+### 说明
+
+- 该文件入口为整个项目的入口文件
+- 二次封装 useI18n 方法、国际化文件入口、辅助方法等
+- 国际化配置文件格式都应该按照当前已约定格式进行拓展与使用
+
+### lang 文件入口说明
+
+> 项目默认包含英文包与中文包，如果需要拓展应该按照当前格式进行拓展。每个文件识别为一个国际包语言包（会自动导入所有 json 文件作为语言包）。
+
+#### 注意
+
+> 该项目语言包使用 json 格式作为语言包管理格式
+
+#### 拓展方法
+
+- 配置语言包文件（文件名为语言包名称）
+- 配置文件入口（使用 `mergeMessage` 方法进行自动合并处理）
+- 语言包名称应该全局唯一
+
+### helper 文件说明
+
+- `getAppLocales` 获取系统所有语言包
+- `naiveLocales` 获取 `naive-ui` 组件库对应语言包文件
+- `getDefaultLocal` 获取系统当前默认语言包
+
+### useI18n 文件说明
+
+> 二次封装 `i18n`，应该避免使用自带 `useI18n` 方法，使用系统提供方法。
+
+- 支持 setup 环境外使用 `t`、`value` 方法
+- 其行为与官方方法一致

src/locales/helper.ts

@@ -18,6 +18,9 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { set } from 'lodash-es'
+import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
+import { getCache } from '@use-utils/cache'
+import { SYSTEM_DEFAULT_LOCAL } from '@/appConfig/localConfig'
 
 import type { Recordable } from '@/types/type-utils'
 
@@ -51,14 +54,14 @@ export const mergeMessage = (langs: Record<string, any>, prefix = 'lang') => {
 
 /** 获取所有语言 */
 export const getAppLocales = async (
-  localOptions: {
+  LOCAL_OPTIONS: {
     key: string
     label: string
   }[],
 ) => {
   const message = {}
 
-  for (const curr of localOptions) {
+  for (const curr of LOCAL_OPTIONS) {
     const msg = await import(`./lang/${curr.key}.ts`)
 
     message[curr.key] = msg.default?.message ?? {}
@@ -66,3 +69,50 @@ export const getAppLocales = async (
 
   return message
 }
+
+/**
+ *
+ * @param key 切换对应语言
+ * @returns 组件库对应语言包
+ *
+ * @remark 受打包体积影响. 如果有新的语言添加, 则需要手动引入对应语言包(https://www.naiveui.com/zh-CN/dark/docs/i18n)
+ * @remark naive ui 默认为英文
+ *
+ * 该方法的比对 key 必须与 LOCAL_OPTIONS 一一对应
+ */
+export const naiveLocales = (key: string) => {
+  switch (key) {
+    case 'zh-CN':
+      return {
+        locale: zhCN,
+        dateLocal: dateZhCN,
+      }
+
+    case 'en-US':
+      return {
+        locale: null,
+        dateLocal: null,
+      }
+
+    default:
+      return {
+        locale: zhCN,
+        dateLocal: dateZhCN,
+      }
+  }
+}
+
+/**
+ *
+ * @returns 获取当前环境默认语言
+ *
+ * @remak 未避免出现加载语言错误问题, 故而在 `main.ts` 注册时, 应优先加载 `i18n` 避免出现该问题
+ */
+export const getDefaultLocal = () => {
+  const catchLanguage = getCache('localeLanguage', 'localStorage')
+
+  const locale: string =
+    catchLanguage !== 'no' ? catchLanguage : SYSTEM_DEFAULT_LOCAL
+
+  return locale
+}

src/locales/index.ts

@@ -25,9 +25,9 @@
  */
 
 import { createI18n } from 'vue-i18n'
-import { localOptions } from '@/appConfig/localConfig'
+import { LOCAL_OPTIONS } from '@/appConfig/localConfig'
+import { getDefaultLocal } from '@/locales/helper'
 
-import { getCache } from '@use-utils/cache'
 import { getAppLocales } from '@/locales/helper'
 
 import type { App } from 'vue'
@@ -36,24 +36,10 @@ import type { I18n } from 'vue-i18n'
 /** i18n 实例 */
 export let i18n: I18n
 
-/**
- *
- * @returns 获取当前环境默认语言
- *
- * @remak 未避免出现加载语言错误问题, 故而在 `main.ts` 注册时, 应优先加载 `i18n` 避免出现该问题
- */
-export const getDefaultLocal = () => {
-  const catchLanguage = getCache('localeLanguage', 'localStorage')
-
-  const locale: string = catchLanguage !== 'no' ? catchLanguage : 'zh-CN'
-
-  return locale
-}
-
 /** 创建 i18n 实例 */
 const createI18nOptions = async () => {
   const locale = getDefaultLocal()
-  const message = await getAppLocales(localOptions)
+  const message = await getAppLocales(LOCAL_OPTIONS)
 
   const i18nInstance = createI18n({
     legacy: false,

src/main.ts

@@ -4,7 +4,6 @@ import type { App as AppType } from 'vue'
 
 import '@/styles/base.scss'
 
-// import 'amfe-flexible' // 如果为移动端项目, 解开该注释即可
 import 'virtual:svg-icons-register' // `vite-plugin-svg-icons` 脚本, 如果不使用此插件注释即可
 
 import App from './App'
@@ -71,6 +70,7 @@ const setupWujieTemplate = async () => {
 /**
  *
  * 如果此处需要作为微服务主应用使用, 则只需要执行 `setupTemplate` 方法即可
+ * 如果项目启用无界微服务, 会自动识别并且启动以无界微服务方法启动该项目
  *
  * 作为主应用
  * ----------------------------------------------------------------
@@ -83,5 +83,4 @@ const setupWujieTemplate = async () => {
  * setupTemplate()
  * ----------------------------------------------------------------
  */
-
 window.__POWERED_BY_WUJIE__ ? setupWujieTemplate() : setupTemplate()

src/store/index.ts

@@ -18,9 +18,9 @@
  */
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
-export { useSetting } from './modules/setting' // import { useSetting } from '@/store' 即可使用
+export { useSetting } from './modules/setting/index' // import { useSetting } from '@/store' 即可使用
 export { useMenu } from './modules/menu/index'
-export { useSignin } from './modules/signin'
+export { useSignin } from './modules/signin/index'
 
 import type { App } from 'vue'
 

src/store/modules/menu/index.ts

@@ -29,6 +29,7 @@ import { getCache, setCache } from '@/utils/cache'
 import { validRole } from '@/router/basic'
 import { parse, matchMenuOption, updateDocumentTitle } from './helper'
 import { useI18n } from '@/locales/useI18n'
+import { MENU_COLLAPSED_CONFIG } from '@/appConfig/appConfig'
 
 import type { MenuOption } from 'naive-ui'
 import type { RouteMeta } from 'vue-router'
@@ -192,7 +193,7 @@ export const useMenu = defineStore(
               RayIcon,
               {
                 name: meta!.icon as string,
-                size: 20,
+                size: MENU_COLLAPSED_CONFIG.MENU_COLLAPSED_ICON_SIZE,
               },
               {},
             ),

src/store/modules/setting/index.ts

@@ -1,25 +1,12 @@
-import { getDefaultLocal } from '@/locales/index'
+import { getDefaultLocal } from '@/locales/helper'
 import { setCache } from '@use-utils/cache'
 import { set } from 'lodash-es'
 import { addClass, removeClass, colorToRgba } from '@/utils/element'
 import { useI18n } from '@/locales/useI18n'
+import { APP_NAIVE_UI_THEME_OVERRIDES } from '@/appConfig/designConfig'
 
 import type { ConditionalPick } from '@/types/type-utils'
-import type { GlobalThemeOverrides } from 'naive-ui'
-
-interface SettingState {
-  drawerPlacement: NaiveDrawerPlacement
-  primaryColorOverride: GlobalThemeOverrides
-  themeValue: boolean
-  reloadRouteSwitch: boolean
-  menuTagSwitch: boolean
-  spinSwitch: boolean
-  breadcrumbSwitch: boolean
-  localeLanguage: string
-  invertSwitch: boolean
-  lockScreenSwitch: boolean
-  lockScreenInputSwitch: boolean
-}
+import type { SettingState } from '@/store/modules/setting/type'
 
 export const useSetting = defineStore(
   'setting',
@@ -32,6 +19,7 @@ export const useSetting = defineStore(
     const settingState = reactive<SettingState>({
       drawerPlacement: 'right' as NaiveDrawerPlacement,
       primaryColorOverride: {
+        ...APP_NAIVE_UI_THEME_OVERRIDES,
         common: {
           primaryColor: primaryColor, // 主题色
           primaryColorHover: primaryColor,

src/store/modules/setting/type.ts

@@ -0,0 +1,15 @@
+import type { GlobalThemeOverrides } from 'naive-ui'
+
+export interface SettingState {
+  drawerPlacement: NaiveDrawerPlacement
+  primaryColorOverride: GlobalThemeOverrides
+  themeValue: boolean
+  reloadRouteSwitch: boolean
+  menuTagSwitch: boolean
+  spinSwitch: boolean
+  breadcrumbSwitch: boolean
+  localeLanguage: string
+  invertSwitch: boolean
+  lockScreenSwitch: boolean
+  lockScreenInputSwitch: boolean
+}

src/store/modules/signin/index.ts

@@ -22,15 +22,7 @@
 import { isEmpty } from 'lodash-es'
 import { removeCache } from '@/utils/cache'
 
-export interface SigninForm extends IUnknownObjectKey {
-  name: string
-  pwd: string
-}
-
-export interface SigninCallback extends IUnknownObjectKey {
-  role: string
-  name: string
-}
+import type { SigninForm, SigninCallback } from '@/store/modules/signin/type'
 
 export const useSignin = defineStore(
   'signin',

src/store/modules/signin/type.ts

@@ -0,0 +1,9 @@
+export interface SigninForm extends IUnknownObjectKey {
+  name: string
+  pwd: string
+}
+
+export interface SigninCallback extends IUnknownObjectKey {
+  role: string
+  name: string
+}

src/types/appConfig.ts

@@ -0,0 +1,8 @@
+export type CollapsedMode = 'transform' | 'width'
+
+export interface MenuCollapsedConfig {
+  MENU_COLLAPSED_WIDTH: number
+  MENU_COLLAPSED_MODE: CollapsedMode
+  MENU_COLLAPSED_ICON_SIZE: number
+  MENU_COLLAPSED_INDENT: number
+}

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 '@/appConfig/localConfig'
+import { LOCAL_OPTIONS } from '@/appConfig/localConfig'
 import { useI18n } from '@/locales/useI18n'
 
 const Login = defineComponent({
@@ -81,7 +81,7 @@ const Login = defineComponent({
             >
               <ThemeSwitch />
               <NDropdown
-                options={localOptions}
+                options={LOCAL_OPTIONS}
                 onSelect={(key) => this.updateLocale(key)}
               >
                 <RayIcon

tsconfig.json

@@ -13,6 +13,7 @@
     "lib": ["ESNext", "DOM", "es5", "es6", "dom.iterable", "es2022"],
     "skipLibCheck": true,
     "baseUrl": "./",
+    "rootDir": "./",
     "paths": {
       "@": ["src"],
       "@/*": ["src/*"],
@@ -29,6 +30,14 @@
     "ignoreDeprecations": "5.0"
   },
   "include": [
+    "vite.config.ts",
+    "vite-plugin/index.ts",
+    "vite-plugin/type.ts",
+    "cfg.ts",
+    "package.json",
+    "vite-env.d.ts",
+    "src/appConfig/*.ts",
+    "src/types/cfg.ts",
     "src/**/*.ts",
     "src/**/*.d.ts",
     "src/**/*.tsx",
@@ -39,6 +48,5 @@
     "src/*",
     "components.d.ts",
     "auto-imports.d.ts"
-  ],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  ]
 }

tsconfig.node.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "vite.config.ts",
-    "vite-plugin/index.ts",
-    "vite-plugin/type.ts",
-    "cfg.ts",
-    "package.json",
-    "vite-env.d.ts",
-    "src/appConfig/*.ts",
-    "src/types/cfg.ts"
-  ]
-}