diff --git a/CHANGELOG.md b/CHANGELOG.md index abde5e4d..a8fdeee7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # CHANGE LOG +## 3.3.7 + +### Feats + +- 新增全局指令（目前仅有：v-copy、v-debounce、v-throttle） + +### Fixes + +- 修复错误的插件命名，导致项目构建失败（viteComponents） + ## 3.3.6 ### Feats diff --git a/components.d.ts b/components.d.ts index 903cc398..7405029f 100644 --- a/components.d.ts +++ b/components.d.ts @@ -7,6 +7,7 @@ export {} declare module '@vue/runtime-core' { export interface GlobalComponents { + RayTransitionComponent: typeof import('./src/components/RayTransitionComponent/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] TransitionComponent: typeof import('./src/components/RayTransitionComponent/TransitionComponent.vue')['default'] diff --git a/package.json b/package.json index 7730088d..42e9fe45 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "dependencies": { "@vueuse/core": "^9.1.0", "axios": "^1.2.0", + "clipboard": "^2.0.11", "crypto-js": "^4.1.1", "currency.js": "^2.0.4", "dayjs": "^1.11.7", diff --git a/src/axios/api/test.ts b/src/axios/api/test.ts index afea90ff..6f5c64d9 100644 --- a/src/axios/api/test.ts +++ b/src/axios/api/test.ts @@ -24,8 +24,8 @@ import useRequest from '@/axios/instance' -interface AxiosTestResponse extends IUnknownObjectKey { - data: IUnknownObjectKey[] +interface AxiosTestResponse extends UnknownObjectKey { + data: UnknownObjectKey[] city?: string } diff --git a/src/components/RayCollapseGrid/src/index.tsx b/src/components/RayCollapseGrid/src/index.tsx index bfbdd761..274cde56 100644 --- a/src/components/RayCollapseGrid/src/index.tsx +++ b/src/components/RayCollapseGrid/src/index.tsx @@ -59,6 +59,7 @@ const RayCollapseGrid = defineComponent({ default: () => ( 全局自定义指令入口。 + +## 规范 + +- 指令应该为全局的通用性指令 +- 如果指令需要与系统的数据进行关联，应该注意数据的管理与指令注册使用时机 + +## 添加指令说明 + +- 模板视 modules 中每一个文件包为一个模板的指令（全局），并且每个文件包的名称，也被视为该指令名称 +- 添加文件包后，强制要求 index.ts 为指令的输出文件名 +- modules 包中所有指令都会被自动合并到模板中 + +```ts +/** + * + * 示例添加 demo 指令 + */ + +// 1. modules 中添加文件包 +// 2. modules/demo 目录下创建 index.ts 文件 +// 3. 进行自定义指令开发 + +import type { Directive } from 'vue' +import type { RoleBindingValue } from './type' + +const demoDirective: Directive = { + beforeMount: (el, binding) => { + console.log(el, binding) + }, +} + +export default demoDirective + +// 4. 按照上述步骤执行后，会自动在模板中创建一个 v-demo 的指令供全局使用 +``` diff --git a/src/directives/README_DIR.md b/src/directives/README_DIR.md new file mode 100644 index 00000000..abcf6539 --- /dev/null +++ b/src/directives/README_DIR.md @@ -0,0 +1,137 @@ +## 全局自定义指令 + +### v-copy + +- 参数类型: any（参数会强制被 String 方法转换） +- 默认值: '' + +#### 示例 + +```tsx +import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui' + +const Demo = defineComponent({ + name: 'Demo', + setup() { + const dmeoCopyValue = ref('hello copy') + + return { + dmeoCopyValue, + } + }, + render() { + return ( + + + 复制 + + ) + }, +}) +``` + +### v-debounce + +- 参数类型: DebounceBindingOptions +- 默认值: + +```ts +{ + trigger: 'click', + wait: 500, + options: null +} +``` + +#### 示例 + +```tsx +import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui' + +const Demo = defineComponent({ + name: 'Demo', + setup() { + const demoValue = ref(0) + + const updateDemoValue = () => { + demoValue.value++ + } + + return { + demoValue, + updateDemoValue, + } + }, + render() { + return ( + + + 点击执行 + +

我执行了{this.demoValue}次

+

该方法将延迟 1s 执行

+ + ) + }, +}) +``` + +### v-throttle + +- 参数类型: ThrottleBindingOptions +- 默认值: + +```ts +{ + trigger: 'click', + wait: 500, + options: null +} +``` + +#### 示例 + +```tsx +import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui' + +const Demo = defineComponent({ + name: 'Demo', + setup() { + const demoValue = ref(0) + + const updateDemoValue = () => { + demoValue.value++ + } + + return { + demoValue, + updateDemoValue, + } + }, + render() { + return ( + + + 点击执行 + +

我执行了{this.demoValue}次

+

该方法 1s 内仅会执行一次

+ + ) + }, +}) +``` diff --git a/src/directives/helper/merger.ts b/src/directives/helper/merger.ts new file mode 100644 index 00000000..e90de4dd --- /dev/null +++ b/src/directives/helper/merger.ts @@ -0,0 +1,27 @@ +/** + * + * @author Ray + * + * @date 2023-06-24 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import type { Directive } from 'vue' +import type { DirectiveModules } from '@/directives/type' + +export const mergerDirective = ( + directiveModules: Record, +) => { + const directives = Object.keys(directiveModules).reduce((pre, curr) => { + const value = directiveModules[curr].default + + pre[curr] = value + + return pre + }, {} as Record) + + return directives +} diff --git a/src/directives/index.ts b/src/directives/index.ts new file mode 100644 index 00000000..d4d6b1b2 --- /dev/null +++ b/src/directives/index.ts @@ -0,0 +1,31 @@ +/** + * + * @author Ray + * + * @date 2023-06-24 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { mergerDirective } from './helper/merger' +import { forIn } from 'lodash-es' + +import type { App } from 'vue' +import type { DirectiveModules } from '@/directives/type' + +/** 初始化全局自定义指令 */ +export const setupDirective = (app: App) => { + const modules = import.meta.glob('./modules/**/index.ts', { + eager: true, + }) as Record + const directives = mergerDirective(modules) + const reg = /(?<=modules\/).*(?=\/index\.ts)/ + + forIn(directives, (value, key) => { + const directiveName = key.match(reg)?.[0] as string + + app.directive(directiveName, value) + }) +} diff --git a/src/directives/modules/copy/index.ts b/src/directives/modules/copy/index.ts new file mode 100644 index 00000000..0fb51bbc --- /dev/null +++ b/src/directives/modules/copy/index.ts @@ -0,0 +1,54 @@ +/** + * + * @author Ray + * + * @date 2023-06-24 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * directive name: copy + */ + +import ClipboardJS from 'clipboard' + +import type { Directive } from 'vue' +import type { CopyElement } from './type' + +let clipboard: ClipboardJS | null + +const copyDirective: Directive = { + mounted: (el, binding) => { + const value = binding.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 = new ClipboardJS(el, { + text: () => String(value), + }) + }, + beforeUnmount: () => { + clipboard?.destroy() + + clipboard = null + }, +} + +export default copyDirective diff --git a/src/directives/modules/copy/type.ts b/src/directives/modules/copy/type.ts new file mode 100644 index 00000000..5b3f4f00 --- /dev/null +++ b/src/directives/modules/copy/type.ts @@ -0,0 +1,3 @@ +export interface CopyElement extends Element, UnknownObjectKey { + $value: string +} diff --git a/src/directives/modules/debounce/index.ts b/src/directives/modules/debounce/index.ts new file mode 100644 index 00000000..86af2fac --- /dev/null +++ b/src/directives/modules/debounce/index.ts @@ -0,0 +1,48 @@ +/** + * + * @author Ray + * + * @date 2023-06-24 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * directive name: debounce + */ + +import { debounce } from 'lodash-es' +import { on, off } from '@use-utils/element' + +import type { Directive } from 'vue' +import type { DebounceBindingOptions } from './type' + +let debounceFunction: AnyFunc | null + +const debounceDirective: Directive = { + 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 (debounceFunction) { + off(el, trigger, debounceFunction) + } + + debounceFunction = null + }, +} + +export default debounceDirective diff --git a/src/directives/modules/debounce/type.ts b/src/directives/modules/debounce/type.ts new file mode 100644 index 00000000..bb14fda5 --- /dev/null +++ b/src/directives/modules/debounce/type.ts @@ -0,0 +1,8 @@ +import type { DebounceSettings } from 'lodash-es' + +export interface DebounceBindingOptions { + func: AnyFunc + trigger: string + wait: number + options: DebounceSettings +} diff --git a/src/directives/modules/throttle/index.ts b/src/directives/modules/throttle/index.ts new file mode 100644 index 00000000..4e29b6a6 --- /dev/null +++ b/src/directives/modules/throttle/index.ts @@ -0,0 +1,48 @@ +/** + * + * @author Ray + * + * @date 2023-06-24 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * directive name: throttle + */ + +import { throttle } from 'lodash-es' +import { on, off } from '@use-utils/element' + +import type { Directive } from 'vue' +import type { ThrottleBindingOptions } from './type' + +let throttleFunction: AnyFunc | null + +const throttleDirective: Directive = { + 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') + } + + throttleFunction = throttle(func, wait, Object.assign({}, {}, options)) + + on(el, trigger, throttleFunction) + }, + beforeUnmount: (el, binding) => { + const { trigger = 'click' } = binding.value + + if (throttleFunction) { + off(el, trigger, throttleFunction) + } + + throttleFunction = null + }, +} + +export default throttleDirective diff --git a/src/directives/modules/throttle/type.ts b/src/directives/modules/throttle/type.ts new file mode 100644 index 00000000..7620c19b --- /dev/null +++ b/src/directives/modules/throttle/type.ts @@ -0,0 +1,8 @@ +import type { ThrottleSettings } from 'lodash-es' + +export interface ThrottleBindingOptions { + func: AnyFunc + trigger: string + wait: number + options: ThrottleSettings +} diff --git a/src/directives/type.ts b/src/directives/type.ts new file mode 100644 index 00000000..bc47065c --- /dev/null +++ b/src/directives/type.ts @@ -0,0 +1,5 @@ +import type { Directive } from 'vue' + +export interface DirectiveModules extends Object { + default: Directive +} diff --git a/src/layout/components/SiderBar/type.ts b/src/layout/components/SiderBar/type.ts index c0921423..4d690219 100644 --- a/src/layout/components/SiderBar/type.ts +++ b/src/layout/components/SiderBar/type.ts @@ -6,7 +6,7 @@ export interface IconEventMapOptions { export type IconEventMap = keyof IconEventMapOptions -export interface IconDropdownOptions extends IUnknownObjectKey { +export interface IconDropdownOptions extends UnknownObjectKey { event?: string switch: boolean options: DropdownOption[] diff --git a/src/locales/lang/en-US/menu.json b/src/locales/lang/en-US/menu.json index 219f5c43..be9dff9d 100644 --- a/src/locales/lang/en-US/menu.json +++ b/src/locales/lang/en-US/menu.json @@ -14,5 +14,6 @@ "Office_Document": "Document", "Office_Presentation": "Presentation", "Office_Spreadsheet": "Spreadsheet", - "CalculatePrecision": "Precision" + "CalculatePrecision": "Precision", + "Directive": "Directive" } diff --git a/src/locales/lang/zh-CN/menu.json b/src/locales/lang/zh-CN/menu.json index 8d9c0bac..c47ec7af 100644 --- a/src/locales/lang/zh-CN/menu.json +++ b/src/locales/lang/zh-CN/menu.json @@ -14,5 +14,6 @@ "Office_Document": "文档", "Office_Presentation": "演示", "Office_Spreadsheet": "表格", - "CalculatePrecision": "数字精度" + "CalculatePrecision": "数字精度", + "Directive": "指令" } diff --git a/src/main.ts b/src/main.ts index 05579fa0..100b428f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,7 +3,6 @@ import type { App as AppType } from 'vue' import '@/styles/base.scss' import 'virtual:svg-icons-register' // `vite-plugin-svg-icons` 脚本, 如果不使用此插件注释即可 -import 'dayjs/locale/zh-cn' import App from './App' @@ -11,6 +10,7 @@ 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' /** * @@ -20,12 +20,10 @@ const setupTemplate = async () => { const app = createApp(App) await setupI18n(app) - await setupStore(app) - setupRouter(app) - setupDayjs() + setupDirective(app) app.mount('#app') } @@ -42,11 +40,8 @@ const setupWujieTemplate = async () => { instance = createApp(App) await setupI18n(instance) - await setupStore(instance) - setupRouter(instance) - setupDayjs() instance.mount('#app') diff --git a/src/router/modules/axios.ts b/src/router/modules/axios.ts index 6665f906..de2d671a 100644 --- a/src/router/modules/axios.ts +++ b/src/router/modules/axios.ts @@ -4,7 +4,7 @@ import type { AppRouteRecordRaw } from '@/router/type' const axios: AppRouteRecordRaw = { path: '/axios', - name: 'Axios', + name: 'RAxios', component: () => import('@/views/axios/index'), meta: { i18nKey: t('menu.Axios'), diff --git a/src/router/modules/dashboard.ts b/src/router/modules/dashboard.ts index 0fe4a10f..e1055243 100644 --- a/src/router/modules/dashboard.ts +++ b/src/router/modules/dashboard.ts @@ -4,7 +4,7 @@ import type { AppRouteRecordRaw } from '@/router/type' const dashboard: AppRouteRecordRaw = { path: '/dashboard', - name: 'Dashboard', + name: 'RDashboard', component: () => import('@/views/dashboard/index'), meta: { i18nKey: t('menu.Dashboard'), diff --git a/src/router/modules/directive.ts b/src/router/modules/directive.ts new file mode 100644 index 00000000..8242957f --- /dev/null +++ b/src/router/modules/directive.ts @@ -0,0 +1,16 @@ +import { t } from '@/locales/useI18n' + +import type { AppRouteRecordRaw } from '@/router/type' + +const directive: AppRouteRecordRaw = { + path: '/directive', + name: 'RDirective', + component: () => import('@/views/directive/index'), + meta: { + i18nKey: t('menu.Directive'), + icon: 'rely', + order: 3, + }, +} + +export default directive diff --git a/src/router/modules/doc-local.ts b/src/router/modules/doc-local.ts index 4a59c6dc..a89c681b 100644 --- a/src/router/modules/doc-local.ts +++ b/src/router/modules/doc-local.ts @@ -4,7 +4,7 @@ import type { AppRouteRecordRaw } from '@/router/type' const docLocal: AppRouteRecordRaw = { path: '/doc', - name: 'DocLocal', + name: 'RDocLocal', component: () => import('@/views/doc/index'), meta: { i18nKey: t('menu.DocLocal'), diff --git a/src/router/modules/doc.ts b/src/router/modules/doc.ts index 1b5b61c7..4c6445d6 100644 --- a/src/router/modules/doc.ts +++ b/src/router/modules/doc.ts @@ -4,7 +4,7 @@ import type { AppRouteRecordRaw } from '@/router/type' const doc: AppRouteRecordRaw = { path: '/doc', - name: 'Doc', + name: 'RDoc', component: () => import('@/views/doc/index'), meta: { i18nKey: t('menu.Doc'), diff --git a/src/router/modules/echart.ts b/src/router/modules/echart.ts index eedbf406..baca12c3 100644 --- a/src/router/modules/echart.ts +++ b/src/router/modules/echart.ts @@ -4,7 +4,7 @@ import type { AppRouteRecordRaw } from '@/router/type' const echart: AppRouteRecordRaw = { path: '/echart', - name: 'Echart', + name: 'REchart', component: () => import('@/views/echart/index'), meta: { i18nKey: t('menu.Echart'), diff --git a/src/router/modules/office.ts b/src/router/modules/office.ts index 2f1f6317..45920967 100644 --- a/src/router/modules/office.ts +++ b/src/router/modules/office.ts @@ -4,7 +4,7 @@ import type { AppRouteRecordRaw } from '@/router/type' const office: AppRouteRecordRaw = { path: '/office', - name: 'Office', + name: 'ROffice', component: () => import('@/views/office/index'), meta: { i18nKey: t('menu.Office'), diff --git a/src/router/modules/rely.ts b/src/router/modules/rely.ts index 823e73d0..dc3d2db7 100644 --- a/src/router/modules/rely.ts +++ b/src/router/modules/rely.ts @@ -6,7 +6,7 @@ import { LAYOUT } from '@/router/constant/index' const rely: AppRouteRecordRaw = { path: '/rely', - name: 'Rely', + name: 'RelyAbout', component: LAYOUT, meta: { i18nKey: t('menu.Rely'), diff --git a/src/store/modules/signin/type.ts b/src/store/modules/signin/type.ts index 0f0ec9e6..08ccd33f 100644 --- a/src/store/modules/signin/type.ts +++ b/src/store/modules/signin/type.ts @@ -1,15 +1,15 @@ -export interface SigninForm extends IUnknownObjectKey { +export interface SigninForm extends UnknownObjectKey { name: string pwd: string } -export interface SigninCallback extends IUnknownObjectKey { +export interface SigninCallback extends UnknownObjectKey { role: string name: string avatar?: string } -export interface SigninResponse extends IUnknownObjectKey { +export interface SigninResponse extends UnknownObjectKey { code: number data: SigninCallback message: string diff --git a/src/types/utils.d.ts b/src/types/utils.d.ts index 69673196..ec1ced62 100644 --- a/src/types/utils.d.ts +++ b/src/types/utils.d.ts @@ -5,7 +5,7 @@ import type CryptoJS from 'crypto-js' import type { VNodeChild } from 'vue' export global { - declare interface IUnknownObjectKey { + declare interface UnknownObjectKey { [propName: string]: any } diff --git a/src/views/axios/index.tsx b/src/views/axios/index.tsx index c97826a4..f202a5e3 100644 --- a/src/views/axios/index.tsx +++ b/src/views/axios/index.tsx @@ -15,7 +15,7 @@ const Axios = defineComponent({ name: 'RAxios', setup() { const state = reactive({ - weatherData: [] as IUnknownObjectKey[], + weatherData: [] as UnknownObjectKey[], inputCityValue: '', }) const columns = [ diff --git a/src/views/directive/index.tsx b/src/views/directive/index.tsx new file mode 100644 index 00000000..bab219a5 --- /dev/null +++ b/src/views/directive/index.tsx @@ -0,0 +1,86 @@ +/** + * + * @author Ray + * + * @date 2023-06-24 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui' + +const RDirective = defineComponent({ + name: 'RDirective', + setup() { + const state = reactive({ + copyValueOne: '我是待复制内容区域一', + copyValueTwo: '我是待复制内容区域二', + throttleBtnClickCount: 0, + debounceBtnClickCount: 0, + }) + + const updateDemoValue = (key: keyof typeof state) => { + state[key]++ + } + + return { + ...toRefs(state), + updateDemoValue, + } + }, + render() { + return ( + + 该页面展示如何使用已封装好的指令 + + + + 复制 + + + + + + 复制 + + + + + + 点击执行 + +

我执行了{this.throttleBtnClickCount}次

+

该方法 1s 内仅会执行一次

+ + + + + + 点击执行 + +

我执行了{this.debounceBtnClickCount}次

+

该方法将延迟 1s 执行

+ + + + ) + }, +}) + +export default RDirective diff --git a/vite-plugin/index.ts b/vite-plugin/index.ts index c2bca27c..23376642 100644 --- a/vite-plugin/index.ts +++ b/vite-plugin/index.ts @@ -1,7 +1,7 @@ import path from 'node:path' import autoImport from 'unplugin-auto-import/vite' // 自动导入 -import viteComponents from 'unplugin-vue-components/vite' // 自动按需导入 +import unpluginViteComponents from 'unplugin-vue-components/vite' // 自动按需导入 import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' // i18n import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // `svg icon` @@ -57,7 +57,7 @@ export const viteComponents = async ( resolvers: (ComponentResolver | ComponentResolver[])[] = [], types: TypeImport[] = [], ) => - viteComponents({ + unpluginViteComponents({ dts: true, resolvers: [...resolvers], types: [ @@ -131,32 +131,6 @@ export const buildOptions = (mode: string): BuildOptions => { } } -/** - * - * @param options 自定义打包配置参数 - * - * @remark 移除 console debugger 会有严重的副作用, 如果 console 语句中含有变量输出, 则会阻止移除 - * @remark console 可能会导致内存泄漏, 请注意使用 - */ -export const useViteBuildPlugin = (options?: BuildOptions) => { - const defaultPlugin: BuildOptions = { - outDir: 'dist', // 打包后文件输出路径 - assetsDir: 'assets', // 指定静态资源存放路径 - assetsInlineLimit: 4096, // 小于这个数字(字节)的静态资产文件将被内联为(base64) - cssCodeSplit: true, // 拆分css代码 - minify: 'esbuild', // 指定使用混淆器 (terser | esbuild) - sourcemap: false, - terserOptions: { - compress: { - drop_console: true, // 打包后移除console - drop_debugger: true, // 打包后移除debugger - }, - }, - } - - return Object.assign({}, defaultPlugin, options) -} - /** * * @param options 预处理 css 文件