From 55feba20524da6532819f72e2142117eeb2e5198 Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Tue, 30 May 2023 16:54:31 +0800 Subject: [PATCH] v3.2.2 --- CHANGELOG.md | 7 +++ package.json | 1 - src/appConfig/appConfig.ts | 27 +++++++++- src/appConfig/designConfig.ts | 28 +++++++++- src/appConfig/localConfig.ts | 34 ++---------- src/components/RayGlobalProvider/index.tsx | 2 +- src/layout/components/Menu/index.tsx | 14 ++--- .../SiderBar/Components/LockScreen/index.tsx | 9 +++- src/layout/components/SiderBar/index.tsx | 4 +- src/locales/README.md | 34 ++++++++++++ src/locales/helper.ts | 54 ++++++++++++++++++- src/locales/index.ts | 20 ++----- src/main.ts | 3 +- src/store/index.ts | 4 +- src/store/modules/menu/index.ts | 3 +- .../modules/{setting.ts => setting/index.ts} | 20 ++----- src/store/modules/setting/type.ts | 15 ++++++ .../modules/{signin.ts => signin/index.ts} | 10 +--- src/store/modules/signin/type.ts | 9 ++++ src/types/appConfig.ts | 8 +++ src/views/login/index.tsx | 4 +- tsconfig.json | 12 ++++- tsconfig.node.json | 19 ------- 23 files changed, 225 insertions(+), 116 deletions(-) create mode 100644 src/locales/README.md rename src/store/modules/{setting.ts => setting/index.ts} (85%) create mode 100644 src/store/modules/setting/type.ts rename src/store/modules/{signin.ts => signin/index.ts} (90%) create mode 100644 src/store/modules/signin/type.ts create mode 100644 src/types/appConfig.ts delete mode 100644 tsconfig.node.json diff --git a/CHANGELOG.md b/CHANGELOG.md index 3dc138be..14cf7822 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # CHANGE LOG +## 3.2.2 + +### 特征 + +- 移除 amfe-flexible 插件，改用为 postcss-px-to-viewport 作为适配插件 +- 支持更多 appConfig 配置 + ## 3.2.1 ### 特征 diff --git a/package.json b/package.json index 9b9685f8..de8c96be 100644 --- a/package.json +++ b/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", diff --git a/src/appConfig/appConfig.ts b/src/appConfig/appConfig.ts index 3b0f5aa2..3efd3d1c 100644 --- a/src/appConfig/appConfig.ts +++ b/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 diff --git a/src/appConfig/designConfig.ts b/src/appConfig/designConfig.ts index 9271af84..0e6cb4ec 100644 --- a/src/appConfig/designConfig.ts +++ b/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 主题色 + * 官网文档地址: + * + * 注意: + * - APP_PRIMARY_COLOR common 配置优先级大于该配置 + * + * 如果需要定制化整体组件样式, 配置示例 + * ``` + * const themeOverrides: GlobalThemeOverrides = { + * common: { + * primaryColor: '#FF0000', + * }, + * Button: { + * textColor: '#FF0000', + * }, + * } + * ``` + * + * 具体自行查看官网, 还有模式更佳丰富的 peers 主题变量配置 + * 地址: + */ +export const APP_NAIVE_UI_THEME_OVERRIDES: GlobalThemeOverrides = {} diff --git a/src/appConfig/localConfig.ts b/src/appConfig/localConfig.ts index bdd78583..7d1a5cbd 100644 --- a/src/appConfig/localConfig.ts +++ b/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' diff --git a/src/components/RayGlobalProvider/index.tsx b/src/components/RayGlobalProvider/index.tsx index ac5458b4..4b5ef664 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 '@/appConfig/localConfig' +import { naiveLocales } from '@/locales/helper' const GlobalProvider = defineComponent({ name: 'GlobalProvider', diff --git a/src/layout/components/Menu/index.tsx b/src/layout/components/Menu/index.tsx index 6d2b43ac..74550e45 100644 --- a/src/layout/components/Menu/index.tsx +++ b/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({ @@ -83,11 +82,12 @@ const LayoutMenu = defineComponent({ ) diff --git a/src/layout/components/SiderBar/Components/LockScreen/index.tsx b/src/layout/components/SiderBar/Components/LockScreen/index.tsx index e40d3e47..b3777966 100644 --- a/src/layout/components/SiderBar/Components/LockScreen/index.tsx +++ b/src/layout/components/SiderBar/Components/LockScreen/index.tsx @@ -69,7 +69,14 @@ const LockScreen = defineComponent({ /> - 锁屏 + { + window.$message.info('功能开发中...') + }} + > + 锁屏 + diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index 7643dd53..d0bae64b 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 '@/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({ /> ))} this.updateLocale(String(key)) } diff --git a/src/locales/README.md b/src/locales/README.md new file mode 100644 index 00000000..51a7ecd4 --- /dev/null +++ b/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` 方法 +- 其行为与官方方法一致 diff --git a/src/locales/helper.ts b/src/locales/helper.ts index 6d066471..c57469aa 100644 --- a/src/locales/helper.ts +++ b/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, 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 +} diff --git a/src/locales/index.ts b/src/locales/index.ts index 8c82bbf2..fd56ec1d 100644 --- a/src/locales/index.ts +++ b/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, diff --git a/src/main.ts b/src/main.ts index e3e708eb..10efa29e 100644 --- a/src/main.ts +++ b/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() diff --git a/src/store/index.ts b/src/store/index.ts index b16b3746..5204ce4c 100644 --- a/src/store/index.ts +++ b/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' diff --git a/src/store/modules/menu/index.ts b/src/store/modules/menu/index.ts index fc8b6788..4fb41907 100644 --- a/src/store/modules/menu/index.ts +++ b/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, }, {}, ), diff --git a/src/store/modules/setting.ts b/src/store/modules/setting/index.ts similarity index 85% rename from src/store/modules/setting.ts rename to src/store/modules/setting/index.ts index f9381029..189c64e3 100644 --- a/src/store/modules/setting.ts +++ b/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({ drawerPlacement: 'right' as NaiveDrawerPlacement, primaryColorOverride: { + ...APP_NAIVE_UI_THEME_OVERRIDES, common: { primaryColor: primaryColor, // 主题色 primaryColorHover: primaryColor, diff --git a/src/store/modules/setting/type.ts b/src/store/modules/setting/type.ts new file mode 100644 index 00000000..76efce46 --- /dev/null +++ b/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 +} diff --git a/src/store/modules/signin.ts b/src/store/modules/signin/index.ts similarity index 90% rename from src/store/modules/signin.ts rename to src/store/modules/signin/index.ts index ef838ce7..3765224f 100644 --- a/src/store/modules/signin.ts +++ b/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', diff --git a/src/store/modules/signin/type.ts b/src/store/modules/signin/type.ts new file mode 100644 index 00000000..f8c72bc9 --- /dev/null +++ b/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 +} diff --git a/src/types/appConfig.ts b/src/types/appConfig.ts new file mode 100644 index 00000000..0e854e57 --- /dev/null +++ b/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 +} diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx index be80cd5a..27de0573 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 '@/appConfig/localConfig' +import { LOCAL_OPTIONS } from '@/appConfig/localConfig' import { useI18n } from '@/locales/useI18n' const Login = defineComponent({ @@ -81,7 +81,7 @@ const Login = defineComponent({ > this.updateLocale(key)} >