From ca9bbf7673780d0f236b6ffbc642252716e87778 Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Sat, 8 Jul 2023 23:36:12 +0800 Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E4=BF=AE=E6=94=B9=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=8C=87=E4=BB=A4=E7=9A=84=E5=88=9B=E5=BB=BA?= =?UTF-8?q?=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierignore | 1 - CHANGELOG.md | 2 + src/App.tsx | 89 +-------------- .../AppNaiveGlobalProvider}/index.tsx | 0 .../AppComponents/AppStyleProvider/index.scss | 5 + .../AppComponents/AppStyleProvider/index.tsx | 106 ++++++++++++++++++ src/components/AppComponents/README.md | 2 +- src/directives/README.md | 11 +- src/directives/helper/combine.ts | 12 +- src/directives/index.ts | 4 +- src/directives/modules/copy/index.ts | 55 ++++----- src/directives/modules/debounce/index.ts | 45 ++++---- src/directives/modules/disabled/index.ts | 22 ++-- src/directives/modules/throttle/index.ts | 42 ++++--- src/directives/type.ts | 7 +- src/main.ts | 33 +++--- tsconfig.json | 3 +- 17 files changed, 250 insertions(+), 189 deletions(-) rename src/components/{RayGlobalProvider => AppComponents/AppNaiveGlobalProvider}/index.tsx (100%) create mode 100644 src/components/AppComponents/AppStyleProvider/index.scss create mode 100644 src/components/AppComponents/AppStyleProvider/index.tsx diff --git a/.prettierignore b/.prettierignore index c6df65bc..505a3baf 100644 --- a/.prettierignore +++ b/.prettierignore @@ -5,7 +5,6 @@ components.d.ts .gitignore public yarn.* -vite-env.* .prettierrc.* visualizer.* visualizer.html diff --git a/CHANGELOG.md b/CHANGELOG.md index b04ffdb7..6e28300a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ - 弃用 yarn 包管理器，使用 pnpm 作为模板包管理器 - 新增路由切换时的内容区域动画 +- 更新了一些组件名称 +- 更新了自定义指令创建方式，改为函数式 ### Fixes diff --git a/src/App.tsx b/src/App.tsx index bc602e83..7f20b9d0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,95 +1,16 @@ -import RayGlobalProvider from '@/components/RayGlobalProvider/index' import { RouterView } from 'vue-router' +import AppNaiveGlobalProvider from '@/components/AppComponents/AppNaiveGlobalProvider/index' +import AppStyleProvider from '@/components/AppComponents/AppStyleProvider/index' import GlobalSpin from '@/spin/index' import LockScreen from '@/components/AppComponents/AppLockScreen/index' -import { getStorage } from '@/utils/cache' -import { get } from 'lodash-es' -import { useSetting } from '@/store' -import { addClass, removeClass, addStyle, colorToRgba } from '@/utils/element' - -import type { SettingState } from '@/store/modules/setting/type' - const App = defineComponent({ name: 'App', - setup() { - const settingStore = useSetting() - - const { themeValue } = storeToRefs(settingStore) - - /** 同步主题色变量至 body, 如果未获取到缓存值则已默认值填充 */ - const syncPrimaryColorToBody = () => { - const { - appPrimaryColor: { primaryColor, primaryFadeColor }, - } = __APP_CFG__ // 默认主题色 - const body = document.body - - const primaryColorOverride = getStorage( - 'piniaSettingStore', - 'localStorage', - ) - - if (primaryColorOverride) { - const _p = get( - primaryColorOverride, - 'primaryColorOverride.common.primaryColor', - primaryColor, - ) - const _fp = colorToRgba(_p, 0.3) - - /** 设置全局主题色 css 变量 */ - body.style.setProperty('--ray-theme-primary-color', _p) - body.style.setProperty( - '--ray-theme-primary-fade-color', - _fp || primaryFadeColor, - ) - } - } - - /** 隐藏加载动画 */ - const hiddenLoadingAnimation = () => { - /** pre-loading-animation 是默认 id */ - const el = document.getElementById('pre-loading-animation') - - if (el) { - addStyle(el, { - display: 'none', - }) - } - } - - syncPrimaryColorToBody() - hiddenLoadingAnimation() - - /** 切换主题时, 同步更新 body class 以便于进行自定义 css 配置 */ - watch( - () => themeValue.value, - (newData) => { - /** - * - * 初始化时根据当前主题色进行初始化 body 的 class 属性 - * - * 根据 themeValue 进行初始化 - */ - const body = document.body - const darkClassName = 'ray-template--dark' - const lightClassName = 'ray-template--light' - - newData - ? removeClass(body, lightClassName) - : removeClass(body, darkClassName) - - addClass(body, newData ? darkClassName : lightClassName) - }, - { - immediate: true, - }, - ) - }, render() { return ( - + + {{ @@ -97,7 +18,7 @@ const App = defineComponent({ description: () => 'lodaing...', }} - + ) }, }) diff --git a/src/components/RayGlobalProvider/index.tsx b/src/components/AppComponents/AppNaiveGlobalProvider/index.tsx similarity index 100% rename from src/components/RayGlobalProvider/index.tsx rename to src/components/AppComponents/AppNaiveGlobalProvider/index.tsx diff --git a/src/components/AppComponents/AppStyleProvider/index.scss b/src/components/AppComponents/AppStyleProvider/index.scss new file mode 100644 index 00000000..a1b56122 --- /dev/null +++ b/src/components/AppComponents/AppStyleProvider/index.scss @@ -0,0 +1,5 @@ +.app-style-provider { + position: fixed; + display: none; + z-index: -999999; +} diff --git a/src/components/AppComponents/AppStyleProvider/index.tsx b/src/components/AppComponents/AppStyleProvider/index.tsx new file mode 100644 index 00000000..7cd3c14d --- /dev/null +++ b/src/components/AppComponents/AppStyleProvider/index.tsx @@ -0,0 +1,106 @@ +/** + * + * @author Ray + * + * @date 2023-07-08 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import './index.scss' + +import { getStorage } from '@/utils/cache' +import { get } from 'lodash-es' +import { useSetting } from '@/store' +import { addClass, removeClass, addStyle, colorToRgba } from '@/utils/element' + +import type { SettingState } from '@/store/modules/setting/type' + +const AppStyleProvider = defineComponent({ + name: 'AppStyleProvider', + setup() { + const settingStore = useSetting() + + const { themeValue } = storeToRefs(settingStore) + + /** 同步主题色变量至 body, 如果未获取到缓存值则已默认值填充 */ + const syncPrimaryColorToBody = () => { + const { + appPrimaryColor: { primaryColor, primaryFadeColor }, + } = __APP_CFG__ // 默认主题色 + const body = document.body + + const primaryColorOverride = getStorage( + 'piniaSettingStore', + 'localStorage', + ) + + if (primaryColorOverride) { + const _p = get( + primaryColorOverride, + 'primaryColorOverride.common.primaryColor', + primaryColor, + ) + const _fp = colorToRgba(_p, 0.38) + + /** 设置全局主题色 css 变量 */ + body.style.setProperty('--ray-theme-primary-color', _p) + body.style.setProperty( + '--ray-theme-primary-fade-color', + _fp || primaryFadeColor, + ) + } + } + + /** 隐藏加载动画 */ + const hiddenLoadingAnimation = () => { + /** pre-loading-animation 是默认 id */ + const el = document.getElementById('pre-loading-animation') + + if (el) { + addStyle(el, { + display: 'none', + }) + } + } + + /** 切换主题时, 同步更新 body class 以便于进行自定义 css 配置 */ + const updateGlobalThemeClass = (bool: boolean) => { + /** + * + * 初始化时根据当前主题色进行初始化 body 的 class 属性 + * + * 根据 themeValue 进行初始化 + */ + const body = document.body + const darkClassName = 'ray-template--dark' + const lightClassName = 'ray-template--light' + + bool + ? removeClass(body, lightClassName) + : removeClass(body, darkClassName) + + addClass(body, bool ? darkClassName : lightClassName) + } + + syncPrimaryColorToBody() + hiddenLoadingAnimation() + + watch( + () => themeValue.value, + (ndata) => { + updateGlobalThemeClass(ndata) + }, + { + immediate: true, + }, + ) + }, + render() { + return
+ }, +}) + +export default AppStyleProvider diff --git a/src/components/AppComponents/README.md b/src/components/AppComponents/README.md index d8e8cafd..be48cb20 100644 --- a/src/components/AppComponents/README.md +++ b/src/components/AppComponents/README.md @@ -1,6 +1,6 @@ ## 描述 -> 该组件包存放依赖系统数据的公共组件。 +> 该组件包存放依赖系统数据的公共组件和与项目绑定的一些组件。 ## 约束 diff --git a/src/directives/README.md b/src/directives/README.md index 524e5a6b..62fcbc0e 100644 --- a/src/directives/README.md +++ b/src/directives/README.md @@ -25,11 +25,14 @@ import type { Directive } from 'vue' import type { RoleBindingValue } from './type' +import type { CustomDirectiveFC } from '@/directives/type' -const demoDirective: Directive = { - beforeMount: (el, binding) => { - console.log(el, binding) - }, +const demoDirective: CustomDirectiveFC = () => { + return { + beforeMount: (el, binding) => { + console.log(el, binding) + }, + } } export default demoDirective diff --git a/src/directives/helper/combine.ts b/src/directives/helper/combine.ts index ea0647ab..d0f60f49 100644 --- a/src/directives/helper/combine.ts +++ b/src/directives/helper/combine.ts @@ -9,7 +9,7 @@ * @remark 今天也是元气满满撸代码的一天 */ -import type { DirectiveModules } from '@/directives/type' +import type { DirectiveModules, CustomDirectiveFC } from '@/directives/type' export const combineDirective = < T extends Record, @@ -18,16 +18,16 @@ export const combineDirective = < directiveModules: T, ) => { const directives = Object.keys(directiveModules).reduce((pre, curr) => { - if (directiveModules[curr]?.default) { - const value = directiveModules[curr]?.default + const fc = directiveModules[curr]?.default - pre[curr] = value + if (typeof fc === 'function') { + pre[curr] = fc return pre } else { - throw new Error('directiveModules[curr]?.default is undefined') + throw new Error('directiveModules[curr] is not function') } - }, {} as Record) + }, {} as Record>) return directives } diff --git a/src/directives/index.ts b/src/directives/index.ts index a1495b2c..70751013 100644 --- a/src/directives/index.ts +++ b/src/directives/index.ts @@ -24,7 +24,7 @@ import type { DirectiveModules } from '@/directives/type' * 并且会将文件夹名称识别为指令名称 * 每个文件下的 index.ts 文件视为每个指令的入口(也就是指令的处理逻辑, 需要暴露出一个 Directive 类型的对象) */ -export const setupDirective = (app: App) => { +export const setupDirectives = (app: App) => { // 获取 modules 包下所有的 index.ts 文件 const directiveRawModules: Record = import.meta.glob('./modules/**/index.ts', { @@ -39,7 +39,7 @@ export const setupDirective = (app: App) => { const dname = key.match(reg)?.[0] if (isValueType(dname, 'String')) { - app.directive(dname, value) + app.directive(dname, value?.()) } else { throw new Error( 'directiveName is not string, please check your directive file name', diff --git a/src/directives/modules/copy/index.ts b/src/directives/modules/copy/index.ts index 0fb51bbc..288a5dc4 100644 --- a/src/directives/modules/copy/index.ts +++ b/src/directives/modules/copy/index.ts @@ -16,39 +16,40 @@ import ClipboardJS from 'clipboard' -import type { Directive } from 'vue' import type { CopyElement } from './type' +import type { CustomDirectiveFC } from '@/directives/type' -let clipboard: ClipboardJS | null +const copyDirective: CustomDirectiveFC = () => { + let clipboard: ClipboardJS | null -const copyDirective: Directive = { - mounted: (el, binding) => { - const value = binding.value + return { + mounted: (el, binding) => { + const value = binding.value - clipboard = new ClipboardJS(el, { - text: () => String(value), - }) + clipboard = new ClipboardJS(el, { + text: () => String(value), + }) - clipboard?.on('success', () => { - window.$message.success('复制成功') - }) - clipboard?.on('error', () => { - window.$message.error('复制失败') - }) - }, - updated: (el, binding) => { - /** 其实这块代码写的挺蠢的, 但是我目前不知道怎么去优化, 阿巴阿巴阿巴 */ - const value = binding.value + clipboard?.on('success', () => { + window.$message.success('复制成功') + }) + clipboard?.on('error', () => { + window.$message.error('复制失败') + }) + }, + updated: (el, binding) => { + /** 其实这块代码写的挺蠢的, 但是我目前不知道怎么去优化, 阿巴阿巴阿巴 */ + const value = binding.value - clipboard = new ClipboardJS(el, { - text: () => String(value), - }) - }, - beforeUnmount: () => { - clipboard?.destroy() + clipboard = new ClipboardJS(el, { + text: () => String(value), + }) + }, + beforeUnmount: () => { + clipboard?.destroy() - clipboard = null - }, + clipboard = null + }, + } } - export default copyDirective diff --git a/src/directives/modules/debounce/index.ts b/src/directives/modules/debounce/index.ts index b19848c2..54e29b5f 100644 --- a/src/directives/modules/debounce/index.ts +++ b/src/directives/modules/debounce/index.ts @@ -21,31 +21,34 @@ import type { Directive } from 'vue' import type { DebounceBindingOptions } from './type' import type { AnyFunc } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' +import type { CustomDirectiveFC } from '@/directives/type' -let debounceFunction: DebouncedFunc | null +const debounceDirective: CustomDirectiveFC< + HTMLElement, + DebounceBindingOptions +> = () => { + let debounceFunction: DebouncedFunc | null -const debounceDirective: Directive = { - beforeMount: (el, binding) => { - const { func, trigger = 'click', wait = 500, options } = binding.value + return { + beforeMount: (el, binding) => { + const { func, trigger = 'click', wait = 500, options } = binding.value + if (typeof func !== 'function') { + throw new Error('debounce directive value must be a function') + } + debounceFunction = debounce(func, wait, Object.assign({}, {}, options)) + on(el, trigger, debounceFunction) + }, + beforeUnmount: (el, binding) => { + const { trigger = 'click' } = binding.value - if (typeof func !== 'function') { - throw new Error('debounce directive value must be a function') - } + if (debounceFunction) { + debounceFunction.cancel() + off(el, trigger, debounceFunction) + } - debounceFunction = debounce(func, wait, Object.assign({}, {}, options)) - - on(el, trigger, debounceFunction) - }, - beforeUnmount: (el, binding) => { - const { trigger = 'click' } = binding.value - - if (debounceFunction) { - debounceFunction.cancel() - off(el, trigger, debounceFunction) - } - - debounceFunction = null - }, + debounceFunction = null + }, + } } export default debounceDirective diff --git a/src/directives/modules/disabled/index.ts b/src/directives/modules/disabled/index.ts index 6b6a15b2..81630922 100644 --- a/src/directives/modules/disabled/index.ts +++ b/src/directives/modules/disabled/index.ts @@ -17,6 +17,7 @@ import { addClass, removeClass } from '@/utils/element' import type { Directive } from 'vue' +import type { CustomDirectiveFC } from '@/directives/type' const updateElementDisabledType = (el: HTMLElement, value: boolean) => { if (el) { @@ -27,17 +28,18 @@ const updateElementDisabledType = (el: HTMLElement, value: boolean) => { } } -const disabledDirective: Directive = { - mounted: (el, binding) => { - const value = binding.value +const disabledDirective: CustomDirectiveFC = () => { + return { + mounted: (el, binding) => { + const value = binding.value - updateElementDisabledType(el, value) - }, - updated: (el, binding) => { - const value = binding.value + updateElementDisabledType(el, value) + }, + updated: (el, binding) => { + const value = binding.value - updateElementDisabledType(el, value) - }, + updateElementDisabledType(el, value) + }, + } } - export default disabledDirective diff --git a/src/directives/modules/throttle/index.ts b/src/directives/modules/throttle/index.ts index 8c220eb8..66aca2e2 100644 --- a/src/directives/modules/throttle/index.ts +++ b/src/directives/modules/throttle/index.ts @@ -21,31 +21,37 @@ import type { Directive } from 'vue' import type { ThrottleBindingOptions } from './type' import type { AnyFunc } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' +import type { CustomDirectiveFC } from '@/directives/type' -let throttleFunction: DebouncedFunc | null +const throttleDirective: CustomDirectiveFC< + HTMLElement, + ThrottleBindingOptions +> = () => { + let throttleFunction: DebouncedFunc | null -const throttleDirective: Directive = { - beforeMount: (el, binding) => { - const { func, trigger = 'click', wait = 500, options } = binding.value + return { + beforeMount: (el, binding) => { + const { func, trigger = 'click', wait = 500, options } = binding.value - if (typeof func !== 'function') { - throw new Error('throttle directive value must be a function') - } + if (typeof func !== 'function') { + throw new Error('throttle directive value must be a function') + } - throttleFunction = throttle(func, wait, Object.assign({}, {}, options)) + throttleFunction = throttle(func, wait, Object.assign({}, {}, options)) - on(el, trigger, throttleFunction) - }, - beforeUnmount: (el, binding) => { - const { trigger = 'click' } = binding.value + on(el, trigger, throttleFunction) + }, + beforeUnmount: (el, binding) => { + const { trigger = 'click' } = binding.value - if (throttleFunction) { - throttleFunction.cancel() - off(el, trigger, throttleFunction) - } + if (throttleFunction) { + throttleFunction.cancel() + off(el, trigger, throttleFunction) + } - throttleFunction = null - }, + throttleFunction = null + }, + } } export default throttleDirective diff --git a/src/directives/type.ts b/src/directives/type.ts index bc47065c..1bc15324 100644 --- a/src/directives/type.ts +++ b/src/directives/type.ts @@ -1,5 +1,10 @@ import type { Directive } from 'vue' +import type { App } from 'vue' + +export type CustomDirectiveFC = () => Directive export interface DirectiveModules extends Object { - default: Directive + default: CustomDirectiveFC } + +export type AppType = App diff --git a/src/main.ts b/src/main.ts index 57fec277..503b16c4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,16 +2,31 @@ import App from './App' import '@/styles/base.scss' -import 'virtual:svg-icons-register' // `vite-plugin-svg-icons` 脚本, 如果不使用此插件注释即可 +import 'virtual:svg-icons-register' // `vite-plugin-svg-icons` 脚本 import { setupRouter } from './router/index' import { setupStore } from './store/index' import { setupI18n } from './locales/index' import { setupDayjs } from './dayjs/index' -import { setupDirective } from './directives/index' +import { setupDirectives } from './directives/index' import type { App as AppType } from 'vue' +/** + * + * @param inst vue instance + * + * 该方法注册所有模板插件 + * 注册时应该注意每个插件的加载顺序 + */ +const setupPlugins = async (inst: AppType) => { + await setupI18n(inst) + await setupStore(inst) + setupRouter(inst) + setupDayjs() + setupDirectives(inst) +} + /** * * 普通应用注册方法 @@ -19,12 +34,7 @@ import type { App as AppType } from 'vue' const setupTemplate = async () => { const app = createApp(App) - await setupI18n(app) - await setupStore(app) - setupRouter(app) - setupDayjs() - setupDirective(app) - + await setupPlugins(app) app.mount('#app') } @@ -39,11 +49,7 @@ const setupWujieTemplate = async () => { window.__WUJIE_MOUNT = async () => { instance = createApp(App) - await setupI18n(instance) - await setupStore(instance) - setupRouter(instance) - setupDayjs() - + await setupPlugins(instance) instance.mount('#app') } @@ -59,6 +65,7 @@ const setupWujieTemplate = async () => { * 如果此处需要作为微服务主应用使用, 则只需要执行 `setupTemplate` 方法即可 * 如果项目启用无界微服务, 会自动识别并且启动以无界微服务方法启动该项目 * + * @example * 作为主应用 * ---------------------------------------------------------------- * # 示例 diff --git a/tsconfig.json b/tsconfig.json index eceb4ab8..31b40c42 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -35,6 +35,7 @@ "ignoreDeprecations": "5.0" }, "include": [ + "./src/types/global.d.ts", "vite.config.ts", "vite-plugin/index.ts", "vite-plugin/type.ts", @@ -44,6 +45,6 @@ "components.d.ts", "auto-imports.d.ts", "src/**/*", - "./src/types/global.d.ts" + "./src/types/app.d.ts" ] }