From 25599cea246ba95fca5922115faa855775f2d5b0 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Wed, 31 Jan 2024 17:21:41 +0800 Subject: [PATCH] version: 4.6.2 --- .npmignore | 3 - CHANGELOG.md | 26 +++ README.md | 2 +- README-ZH.md => README.zh-CN.md | 0 package.json | 4 +- pnpm-lock.yaml | 8 +- src/app-config/appConfig.ts | 7 +- src/components/RTable/src/Table.tsx | 80 ++++++--- src/components/RTable/src/components/C.tsx | 4 +- .../RTable/src/components/Fullscreen.tsx | 33 ++-- .../RTable/src/components/Print.tsx | 22 +-- .../RTable/src/components/Props.tsx | 104 ++++++++++++ src/components/RTable/src/components/Size.tsx | 19 +-- src/components/RTable/src/props.ts | 30 ++-- .../RTable/src/{config.ts => shared.ts} | 2 +- src/components/RTable/src/type.ts | 8 +- src/hooks/template/useBadge.ts | 155 +++++++++++++++++- src/router/index.ts | 2 +- src/router/modules/demo/cache-demo.ts | 4 +- src/router/modules/demo/template-hooks.ts | 3 + src/router/type.ts | 10 +- src/store/modules/menu/helper.ts | 115 ++++++++----- src/styles/naive.scss | 1 + src/types/modules/app.ts | 1 + src/views/demo/mock-demo/index.tsx | 80 +++++---- src/views/demo/template-hooks/index.tsx | 57 +++++++ vite.plugin.config.ts | 2 +- 27 files changed, 573 insertions(+), 209 deletions(-) rename README-ZH.md => README.zh-CN.md (100%) create mode 100644 src/components/RTable/src/components/Props.tsx rename src/components/RTable/src/{config.ts => shared.ts} (90%) diff --git a/.npmignore b/.npmignore index 6e6f8acb..973e810e 100644 --- a/.npmignore +++ b/.npmignore @@ -1,9 +1,6 @@ node_modules/* dist/* -yarn.lock -yarn-error.log visualizer.html -pnpm-lock.yaml .idea auto-imports.d.ts components.d.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index d3f82be1..05f93587 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,31 @@ # CHANGE LOG +## 4.6.2 + +## Feats + +- `AppMenu Extra` 已经稳定发布，现在你可以在菜单标题后面添加标记了，相关变更 + - `extraIcon` 类型变为 `VNode` + - 新增 `show` 配置项，用于配置是否显示 `extra` 标记，如果默认为 `false`，则不会显示 `extra` 标记，如果未配置或者配置为 `true`，则会显示 `extra` 标记。意味着只要你配置了 `label` 则会显示标记 + - 新增 `useBadge hooks` 方法，便捷操作菜单标记 + - `update`：更新标记 + - `show`：显示标记 + - `hidden`：隐藏标记 + - 新增 `i18nLabel` 配置项，当你希望该标签能够跟随模板语言切换动态切换的时候你可能用的上，该配置项优先级高于 `label` + +> 该配置项仅在 `collapsed` 为 `false` 时生效。 + +- 更新 `axios` 版本至 `1.6.7` +- 移除 `matchMenuOption` 方法 +- 调整 `vueRouterRegister` 方法的运行时机，现在会在 `router` 注册完成后再执行该方法 +- 优化一些试例页面代码 +- `RTable` 相关 + - 新增 `Props` 组件，支持勾选配置一些表格的配置项，目前仅支持：边框、条纹 + - 优化 `Size` 组件，取消没必要的响应式代理数据 + - 取消自定义工具组件的 `Popover` 提示 + - 更改 `config.ts` 文件名为 `shared.ts`，并且 `config` 配置导入导出方式更改为 `import { config } from '@/shared'` +- 更改 `README-ZH.md` 文件名为 `README.zh-CN.md` + ## 4.6.2-beta1.2 ## Feats diff --git a/README.md b/README.md index 8a50e817..d6defcfd 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ # Ray Template -English | [简体中文](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/README-ZH.md) +English | [简体中文](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/README.zh-CN.md) A `completely free`, `efficient`, `feature complete` and based on vite5. x & ts(x) & pinia & vue3. x and other latest technology in the background template. diff --git a/README-ZH.md b/README.zh-CN.md similarity index 100% rename from README-ZH.md rename to README.zh-CN.md diff --git a/package.json b/package.json index a58c50fc..b9f286d7 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ray-template", "private": false, - "version": "4.6.2-beta1.2", + "version": "4.6.2", "type": "module", "engines": { "node": "^18.0.0 || >=20.0.0", @@ -34,7 +34,7 @@ "dependencies": { "@vueuse/core": "^10.7.1", "awesome-qr": "2.1.5-rc.0", - "axios": "^1.6.5", + "axios": "^1.6.7", "clipboard": "^2.0.11", "crypto-js": "^4.1.1", "currency.js": "^2.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f4c3e63b..c483437e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,8 +12,8 @@ dependencies: specifier: 2.1.5-rc.0 version: 2.1.5-rc.0 axios: - specifier: ^1.6.5 - version: 1.6.5 + specifier: ^1.6.7 + version: 1.6.7 clipboard: specifier: ^2.0.11 version: 2.0.11 @@ -2810,8 +2810,8 @@ packages: - supports-color dev: false - /axios@1.6.5: - resolution: {integrity: sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==} + /axios@1.6.7: + resolution: {integrity: sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==} dependencies: follow-redirects: 1.15.5 form-data: 4.0.0 diff --git a/src/app-config/appConfig.ts b/src/app-config/appConfig.ts index 99aba962..56ba691d 100644 --- a/src/app-config/appConfig.ts +++ b/src/app-config/appConfig.ts @@ -81,13 +81,16 @@ export const APP_MENU_CONFIG: Readonly = { * * 系统缓存 key 前缀 * 可以选择自定义缓存 key 前缀，在使用 getStorage 和 setStorage 时可以考虑是否启用前缀的方式来避免缓存 key 冲突 + * 该配置项也可以结合 APP_CATCH_KEY 使用 + * + * 值得注意的是，该方法整合进了 cache.ts 方法包中。也就是说只要该配置项不为空字符串则会自动启用缓存前缀 * * 默认不启用 * * @example - * export const APP_CATCH_KEY_PREFIX: = 'ray-template:' + * export const APP_CATCH_KEY_PREFIX = 'ray-template:' * - * 会自动拼接为 'ray-template:signing' + * 'ray-template:signing' // 会自动拼接为 */ export const APP_CATCH_KEY_PREFIX = '' diff --git a/src/components/RTable/src/Table.tsx b/src/components/RTable/src/Table.tsx index 6f947985..258468e3 100644 --- a/src/components/RTable/src/Table.tsx +++ b/src/components/RTable/src/Table.tsx @@ -16,14 +16,15 @@ import Size from './components/Size' import Fullscreen from './components/Fullscreen' import C from './components/C' import Print from './components/Print' +import TablePropsSelect from './components/Props' import props from './props' import { call, renderNode, uuid } from '@/utils' -import config from './config' +import { config } from './shared' import type { DropdownOption, DataTableInst } from 'naive-ui' import type { ComponentSize } from '@/types' -import type { C as CType } from './type' +import type { C as CType, PropsComponentPopselectKeys } from './type' export default defineComponent({ name: 'RTable', @@ -54,6 +55,10 @@ export default defineComponent({ const privateReactive = reactive({ size: props.size, }) + const propsPopselectValue = ref({ + striped: false, + bordered: false, + }) /** * @@ -139,6 +144,16 @@ export default defineComponent({ .map((curr) => (typeof curr === 'function' ? curr() : curr)) } + const popselectChange = (value: PropsComponentPopselectKeys[]) => { + const keys = Object.keys(propsPopselectValue.value) + + keys.forEach((key) => { + propsPopselectValue.value[key] = value.includes( + key as PropsComponentPopselectKeys, + ) + }) + } + /** * * @param p props @@ -152,6 +167,11 @@ export default defineComponent({ + ) @@ -192,59 +212,75 @@ export default defineComponent({ privateReactive, tool, wrapperRef, + propsPopselectValue, } }, render() { - const { tool } = this + const { + $props, + $attrs, + wrapperBordered, + uuidWrapper, + privateReactive, + disabledContextMenu, + contextMenuReactive, + contextMenuOptions, + uuidTable, + title, + $slots, + propsPopselectValue, + } = this + const { tool, combineRowProps, contextMenuSelect } = this return ( {{ default: () => ( <> {{ - ...this.$slots, + ...$slots, }} - {!this.disabledContextMenu ? ( + {!disabledContextMenu ? ( - (this.contextMenuReactive.showContextMenu = false) + (contextMenuReactive.showContextMenu = false) } - onSelect={this.contextMenuSelect.bind(this)} + onSelect={contextMenuSelect.bind(this)} /> ) : null} ), - header: renderNode(this.title, { + header: renderNode(title, { defaultElement:
, }), 'header-extra': () => ( {/* eslint-disable @typescript-eslint/no-explicit-any */} - {tool(this.$props as any)} + {tool($props as any)} ), - footer: () => this.$slots.tableFooter?.(), - action: () => this.$slots.tableAction?.(), + footer: () => $slots.tableFooter?.(), + action: () => $slots.tableAction?.(), }} ) diff --git a/src/components/RTable/src/components/C.tsx b/src/components/RTable/src/components/C.tsx index 86d0237d..27ea141c 100644 --- a/src/components/RTable/src/components/C.tsx +++ b/src/components/RTable/src/components/C.tsx @@ -21,7 +21,7 @@ import { NPopover, NFlex, NTree } from 'naive-ui' import { RIcon } from '@/components' -import config from '../config' +import { config } from '../shared' import props from '../props' import { call } from '@/utils' @@ -33,7 +33,7 @@ import type { MaybeArray } from '@/types' type FixedClick = (type: 'left' | 'right', option: C, index: number) => void const renderSwitcherIcon = () => ( - + ) const RowIconRender = ({ diff --git a/src/components/RTable/src/components/Fullscreen.tsx b/src/components/RTable/src/components/Fullscreen.tsx index 653ab0f5..8ebefe23 100644 --- a/src/components/RTable/src/components/Fullscreen.tsx +++ b/src/components/RTable/src/components/Fullscreen.tsx @@ -9,10 +9,9 @@ * @remark 今天也是元气满满撸代码的一天 */ -import { NPopover } from 'naive-ui' import { RIcon } from '@/components' -import config from '../config' +import { config } from '../shared' import { useFullscreen } from 'vue-hooks-plus' import type { TableProvider } from '../type' @@ -29,7 +28,6 @@ export default defineComponent({ return { toggleFullscreen, - isFullscreen, isEnabled, } }, @@ -37,27 +35,18 @@ export default defineComponent({ const { toggleFullscreen, isEnabled, $t } = this return ( - - {{ - trigger: () => ( - { - if (!isEnabled) { - window.$message.warning( - $t('globalMessage.isEnabledFullscreen'), - ) - } + { + if (!isEnabled) { + window.$message.warning($t('globalMessage.isEnabledFullscreen')) + } - toggleFullscreen() - }} - /> - ), - default: () => (this.isFullscreen ? '取消全屏' : '全屏表格'), + toggleFullscreen() }} - + /> ) }, }) diff --git a/src/components/RTable/src/components/Print.tsx b/src/components/RTable/src/components/Print.tsx index b3a0a59d..b21a9487 100644 --- a/src/components/RTable/src/components/Print.tsx +++ b/src/components/RTable/src/components/Print.tsx @@ -9,10 +9,9 @@ * @remark 今天也是元气满满撸代码的一天 */ -import { NPopover } from 'naive-ui' import { RIcon } from '@/components' -import config from '../config' +import { config } from '../shared' import props from '../props' import { printDom } from '@/utils/dom' @@ -53,19 +52,12 @@ export default defineComponent({ }, render() { return ( - - {{ - trigger: () => ( - - ), - default: () => '打印表格', - }} - + ) }, }) diff --git a/src/components/RTable/src/components/Props.tsx b/src/components/RTable/src/components/Props.tsx new file mode 100644 index 00000000..9ba0b698 --- /dev/null +++ b/src/components/RTable/src/components/Props.tsx @@ -0,0 +1,104 @@ +/** + * + * @author Ray + * + * @date 2023-10-04 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { NPopselect } from 'naive-ui' +import { RIcon } from '@/components' + +import { call } from '@/utils' +import { config } from '../shared' +import props from '../props' + +import type { MaybeArray } from '@/types' +import type { PropsComponentPopselectKeys } from '../type' + +export default defineComponent({ + name: 'TablePropsSelect', + props: { + ...props, + onPopselectChange: { + type: [Function, Array] as PropType< + MaybeArray<(size: PropsComponentPopselectKeys[]) => void> + >, + default: null, + }, + onInitialed: { + type: [Function, Array] as PropType< + MaybeArray<(size: PropsComponentPopselectKeys[]) => void> + >, + default: null, + }, + }, + setup(props) { + const popoverShow = ref(false) + const propsPopselectValue = ref([]) + const propsOptions = [ + { + label: '斑马条纹', + value: 'striped', + }, + { + label: '表格边框', + value: 'bordered', + }, + ] + + const updatePopselectValue = (value: PropsComponentPopselectKeys[]) => { + const { onPopselectChange } = props + + if (onPopselectChange) { + call(onPopselectChange, value) + } + } + + const initialPopselectValue = () => { + const { striped, bordered, onInitialed } = props + + if (striped) { + propsPopselectValue.value.push('striped') + } + + if (bordered) { + propsPopselectValue.value.push('bordered') + } + + if (onInitialed) { + call(onInitialed, propsPopselectValue.value) + } + } + + initialPopselectValue() + + return { + propsPopselectValue, + propsOptions, + popoverShow, + updatePopselectValue, + } + }, + render() { + return ( + + + + ) + }, +}) diff --git a/src/components/RTable/src/components/Size.tsx b/src/components/RTable/src/components/Size.tsx index 96e929ca..e54faed5 100644 --- a/src/components/RTable/src/components/Size.tsx +++ b/src/components/RTable/src/components/Size.tsx @@ -9,12 +9,12 @@ * @remark 今天也是元气满满撸代码的一天 */ -import { NPopover, NPopselect } from 'naive-ui' +import { NPopselect } from 'naive-ui' import { RIcon } from '@/components' import { call } from '@/utils' import props from '../props' -import config from '../config' +import { config } from '../shared' import type { ComponentSize } from '@/types' import type { MaybeArray } from '@/types' @@ -31,7 +31,6 @@ export default defineComponent({ ...props, }, setup(props) { - const popoverShow = ref(false) const size = ref(props.size) const sizeOptions = [ { @@ -59,7 +58,6 @@ export default defineComponent({ return { size, sizeOptions, - popoverShow, updatePopselectValue, } }, @@ -71,18 +69,7 @@ export default defineComponent({ trigger="click" onUpdateValue={this.updatePopselectValue.bind(this)} > - - {{ - trigger: () => ( - - ), - default: () => '密度', - }} - + ) }, diff --git a/src/components/RTable/src/props.ts b/src/components/RTable/src/props.ts index 01c670f7..1b3128ee 100644 --- a/src/components/RTable/src/props.ts +++ b/src/components/RTable/src/props.ts @@ -11,14 +11,22 @@ import { dataTableProps } from 'naive-ui' -import type { PropType, VNode, VNodeChild } from 'vue' +import type { PropType, VNode } from 'vue' import type { MaybeArray } from '@/types' import type { DropdownOption, DataTableColumn } from 'naive-ui' -import type { DownloadTableOptions, PrintTableOptions } from './type' +import type { DownloadCsvTableOptions, PrintTableOptions } from './type' import type { Recordable } from '@/types' const props = { ...dataTableProps, + downloadCsvTableOptions: { + /** + * + * 配置下载表格配置项 + */ + type: Object as PropType, + default: () => ({}), + }, title: { /** * @@ -61,14 +69,6 @@ const props = { >, default: null, }, - downloadTableOptions: { - /** - * - * 配置下载表格内容为 excel 的配置项 - */ - type: Object as PropType, - default: () => ({}), - }, wrapperBordered: { /** * @@ -86,16 +86,6 @@ const props = { type: Object as PropType, default: () => ({}), }, - onDownloadSuccess: { - /** 导出表格成功回调 */ - type: [Function, Array] as PropType void>>, - default: null, - }, - onDownloadError: { - /** 导出表格失败回调 */ - type: [Function, Array] as PropType void>>, - default: null, - }, onUpdateColumns: { type: [Function, Array] as PropType< MaybeArray<(arr: DataTableColumn[]) => void> diff --git a/src/components/RTable/src/config.ts b/src/components/RTable/src/shared.ts similarity index 90% rename from src/components/RTable/src/config.ts rename to src/components/RTable/src/shared.ts index 4c91ab25..a4aba352 100644 --- a/src/components/RTable/src/config.ts +++ b/src/components/RTable/src/shared.ts @@ -9,7 +9,7 @@ * @remark 今天也是元气满满撸代码的一天 */ -export default { +export const config = { tableIconSize: '18', tableKey: Symbol('r-table'), } diff --git a/src/components/RTable/src/type.ts b/src/components/RTable/src/type.ts index aad5a7de..f0c88a1d 100644 --- a/src/components/RTable/src/type.ts +++ b/src/components/RTable/src/type.ts @@ -19,8 +19,9 @@ export type DropdownMixedOption = | DropdownDividerOption | DropdownRenderOption -export interface DownloadTableOptions { +export interface DownloadCsvTableOptions { fileName?: string + keepOriginalData?: boolean } export interface PrintTableOptions extends PrintDomOptions {} @@ -29,7 +30,6 @@ export interface TableProvider { uuidWrapper: string uuidTable: string wrapperRef: Ref - tableRef: Ref } export interface C extends DataTableBaseColumn { @@ -44,6 +44,8 @@ export interface C extends DataTableBaseColumn { export type OverridesTableColumn = C | DataTableColumn -export interface TableInst extends TableProvider { +export interface TableInst extends Omit { rTableInst: Omit } + +export type PropsComponentPopselectKeys = 'striped' | 'bordered' diff --git a/src/hooks/template/useBadge.ts b/src/hooks/template/useBadge.ts index a60984b9..df4a85f3 100644 --- a/src/hooks/template/useBadge.ts +++ b/src/hooks/template/useBadge.ts @@ -1,21 +1,162 @@ import { useMenuGetters } from '@/store' +import { isValueType } from '@/utils' +import { createMenuExtra } from '@/store/modules/menu/helper' -export function useBadge() { +import type { AppMenuOption } from '@/types' +import type { AppMenuExtraOptions } from '@/router/type' + +export type BadgeKey = string | AppMenuOption + +let cachePreNormal: AppMenuOption | undefined = void 0 + +// 渲染 extra +const renderExtra = ( + option: AppMenuOption, + assignExtra: AppMenuExtraOptions, +) => { + const { show, ...params } = assignExtra + + option.meta.extra = Object.assign({}, option.meta.extra, { + ...params, + show: show, + }) + option.extra = createMenuExtra(option) + + cachePreNormal = option +} + +/** + * + * @param path1 待比较的路径1 + * @param path2 待比较的路径2 + * + * @description + * 判断两个路径是否相等，忽略最后的斜杠 + * + * @example + * equal('/a/', '/a') // true + * equal('/a', '/a') // true + */ +const equal = (path1: string, path2: string) => { + const path1End = path1.endsWith('/') + const path2End = path2.endsWith('/') + + if (path1End && path2End) { + return path1.slice(0, -1) === path2.slice(0, -1) + } + + if (!path1End && !path2End) { + return path1 === path2 + } + + return ( + path1 === path2 || + path1.slice(0, -1) === path2 || + path1 === path2.slice(0, -1) + ) +} + +// 递归查找匹配的菜单项，缓存上一次的匹配项 +const deep = ( + options: AppMenuOption[], + target: string, + fn: string, + assignExtra: AppMenuExtraOptions, +) => { + if (cachePreNormal && equal(cachePreNormal.fullPath, target)) { + renderExtra(cachePreNormal, assignExtra) + + return cachePreNormal + } + + for (const curr of options) { + if (equal(curr.fullPath, target)) { + renderExtra(curr, assignExtra) + + cachePreNormal = curr + + return curr + } + + if (curr.children?.length) { + deep(curr.children, target, fn, assignExtra) + + continue + } + } +} + +// 匹配菜单项 +const normalOption = ( + target: BadgeKey, + fn: string, + assignExtra: AppMenuExtraOptions, +) => { const { getMenuOptions } = useMenuGetters() - const hidden = () => {} + if (typeof target === 'string') { + deep(getMenuOptions.value, target, fn, assignExtra) + } else if (isValueType<'object'>(target, 'Object')) { + const { fullPath } = target - const show = () => {} + deep(getMenuOptions.value, fullPath, fn, assignExtra) + } else { + console.warn(`[useBadge ${fn}]: target expect string or object.`) + } +} - const toggle = () => {} +export function useBadge() { + /** + * + * @param target 目标菜单 key 或者菜单项（AppMenuOption) + * + * @example + * const { hidden } = useBadge() + * + * hidden('your key') + * hidden({ ...AppMenuOption }) + */ + const hidden = (target: BadgeKey) => { + normalOption(target, 'hidden', { + show: false, + }) + } - const updateLabel = () => {} + /** + * + * @param target 目标菜单 key 或者菜单项（AppMenuOption) + * + * @example + * const { show } = useBadge() + * + * show('your key') + * show({ ...AppMenuOption }) + */ + const show = (target: BadgeKey) => { + normalOption(target, 'show', { + show: true, + }) + } + + /** + * + * @param target 目标菜单 key 或者菜单项（AppMenuOption) + * @param extraOption 菜单标记配置项 + * + * @example + * const { update } = useBadge() + * + * update('your key', { ...AppMenuExtraOptions }) + * update({ ...AppMenuOption }, { ...AppMenuExtraOptions }) + */ + const update = (target: BadgeKey, extraOption: AppMenuExtraOptions) => { + normalOption(target, 'update', extraOption) + } return { hidden, show, - toggle, - updateLabel, + update, } } diff --git a/src/router/index.ts b/src/router/index.ts index 35740472..b31d85e3 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -29,8 +29,8 @@ const createVueRouter = async () => { export const setupRouter = async (app: App) => { router = await createVueRouter() - vueRouterRegister(router) app.use(router) // 等待 router 挂载后，初始化 useRouter 方法 useVueRouter() + vueRouterRegister(router) } diff --git a/src/router/modules/demo/cache-demo.ts b/src/router/modules/demo/cache-demo.ts index 8bd5438e..8429fcfc 100644 --- a/src/router/modules/demo/cache-demo.ts +++ b/src/router/modules/demo/cache-demo.ts @@ -11,7 +11,9 @@ const cacheDemo: AppRouteRecordRaw = { i18nKey: t('menu.CacheDemo'), icon: 'other', order: 3, - extra: 'new', + extra: { + label: 'new', + }, }, } diff --git a/src/router/modules/demo/template-hooks.ts b/src/router/modules/demo/template-hooks.ts index f72f5e1a..7f1e2f4b 100644 --- a/src/router/modules/demo/template-hooks.ts +++ b/src/router/modules/demo/template-hooks.ts @@ -11,6 +11,9 @@ const axios: AppRouteRecordRaw = { i18nKey: t('menu.TemplateHooks'), icon: 'other', order: 1, + extra: { + label: 'new', + }, }, } diff --git a/src/router/type.ts b/src/router/type.ts index 79b5d43a..179a27d5 100644 --- a/src/router/type.ts +++ b/src/router/type.ts @@ -11,9 +11,11 @@ export type Component = | (() => Promise) export interface AppMenuExtraOptions { - extraLabel?: string | number - extraIcon?: string | VNode - extraType?: TagProps['type'] + label?: string | number + icon?: VNode + type?: TagProps['type'] + show?: boolean + i18nLabel?: string } export interface AppRouteMeta { @@ -28,7 +30,7 @@ export interface AppRouteMeta { keepAlive?: boolean sameLevel?: boolean env?: string | string[] - extra?: string | AppMenuExtraOptions + extra?: AppMenuExtraOptions } // @ts-ignore diff --git a/src/store/modules/menu/helper.ts b/src/store/modules/menu/helper.ts index 091079f8..47140c3d 100644 --- a/src/store/modules/menu/helper.ts +++ b/src/store/modules/menu/helper.ts @@ -11,17 +11,14 @@ /** 本方法感谢 的支持 */ -import { APP_MENU_CONFIG, APP_CATCH_KEY } from '@/app-config' import { RIcon } from '@/components' + +import { APP_MENU_CONFIG, APP_CATCH_KEY } from '@/app-config' import { getStorage, isValueType } from '@/utils' -import { useAppRoot } from '@/hooks' +import { useAppRoot, useI18n } from '@/hooks' import { NTag } from 'naive-ui' -import type { - AppMenuOption, - MenuTagOptions, - AppMenuKey, -} from '@/types/modules/app' +import type { AppMenuOption, AppMenuKey } from '@/types/modules/app' import type { TagProps } from 'naive-ui' /** @@ -106,28 +103,6 @@ export const parseAndFindMatchingNodes = ( return temp } -/** - * - * @param item menu options - * @param key current menu key - * @param menuTagOptions menu tag options - * - * @remark 查找当前菜单项 - */ -export const matchMenuOption = ( - item: AppMenuOption, - key: AppMenuKey, - menuTagOptions: MenuTagOptions[], -) => { - if (item.path !== key) { - const tag = menuTagOptions.find((curr) => curr.path === item.path) - - if (!tag) { - menuTagOptions.push(item) - } - } -} - /** * * @param option menu option @@ -145,6 +120,18 @@ export const updateDocumentTitle = (option: AppMenuOption) => { document.title = breadcrumbLabel + ' - ' + spliceTitle } +/** + * + * @param option menu option + * + * @returns 创建菜单图标 + * + * @description + * 创建菜单图标，接受一个 AppMenuOption 类型的参数，或者一个包含 AppMenuOption 核心数据的对象 + * + * @example + * createMenuIcon({ ...AppMenuOption }) + */ export const createMenuIcon = (option: AppMenuOption) => { const { meta: { icon }, @@ -171,6 +158,18 @@ export const createMenuIcon = (option: AppMenuOption) => { return () => _icon } +/** + * + * @param option menu option + * + * @returns 创建菜单额外内容 + * + * @description + * 创建菜单额外内容，接受一个 AppMenuOption 类型的参数，或者一个包含 AppMenuOption 核心数据的对象 + * + * @example + * createMenuExtra({ ...AppMenuOption }) + */ export const createMenuExtra = (option: AppMenuOption) => { const { meta: { extra }, @@ -180,6 +179,14 @@ export const createMenuExtra = (option: AppMenuOption) => { return } + const { show } = extra + + if (show === false) { + return + } + + const { t } = useI18n() + const { label, icon, type, i18nLabel } = extra const tagProps: TagProps = { type: 'primary', size: 'small', @@ -188,32 +195,58 @@ export const createMenuExtra = (option: AppMenuOption) => { strong: true, } - if (isValueType(extra, 'Object')) { - const { extraLabel, extraIcon, extraType } = extra + // 渲染文案，优先级：i18nLabel > label + const renderLabel = () => { + if (i18nLabel) { + return t(i18nLabel) + } + if (label) { + return label + } + + return null + } + + // 如果没有文案，但是设置了 icon，则将 padding-right 设置为 0 + const style = () => { + if ((icon && (i18nLabel || label)) || (!icon && (i18nLabel || label))) { + return null + } + + return { + 'padding-right': '0', + } + } + + if (isValueType(extra, 'Object')) { return () => { return h( NTag, { ...tagProps, - type: extraType || 'primary', + type: type || 'primary', + style: style(), }, { - default: () => extraLabel, - icon: () => extraIcon, + default: () => renderLabel(), + icon: () => icon, }, ) } } - - return () => { - return h(NTag, tagProps, { - default: () => extra, - }) - } } -/** 获取缓存的 menu key, 如果未获取到则使用 getRootPath 当作默认激活路由菜单 */ +/** + * + * @returns 获取缓存的菜单 key + * + * @description + * 获取缓存的菜单 key，如果没有缓存，则返回根路径 + * + * @example + * getCatchMenuKey() // '/dashboard' + */ export const getCatchMenuKey = () => { const { getRootPath } = useAppRoot() const cacheMenuKey = getStorage( diff --git a/src/styles/naive.scss b/src/styles/naive.scss index 0b4c57d4..b643bfb1 100644 --- a/src/styles/naive.scss +++ b/src/styles/naive.scss @@ -20,6 +20,7 @@ .r-menu--app .n-menu-item-content .n-menu-item-content-header { display: flex; gap: 0 6px; + align-items: center; } .r-menu--app { diff --git a/src/types/modules/app.ts b/src/types/modules/app.ts index 35a921bc..34665b61 100644 --- a/src/types/modules/app.ts +++ b/src/types/modules/app.ts @@ -13,6 +13,7 @@ export interface AppMenuOption extends AppRouteRecordRaw { meta: AppRouteMeta breadcrumbLabel?: string fullPath: string + extra?: string | (() => VNode) } export interface MenuTagOptions extends AppMenuOption { diff --git a/src/views/demo/mock-demo/index.tsx b/src/views/demo/mock-demo/index.tsx index 50308925..630bab62 100644 --- a/src/views/demo/mock-demo/index.tsx +++ b/src/views/demo/mock-demo/index.tsx @@ -20,35 +20,7 @@ import type { Person } from '@/api/demo/mock/person' const MockDemo = defineComponent({ name: 'MockDemo', setup() { - const paginationRef = reactive({ - page: 1, - pageSize: 10, - itemCount: 0, - pageSizes: [10, 20, 30, 40, 50], - showSizePicker: true, - onUpdatePage: (page: number) => { - paginationRef.page = page - - getPerson() - }, - onUpdatePageSize: (pageSize: number) => { - paginationRef.pageSize = pageSize - paginationRef.page = 1 - - getPerson() - }, - }) - const { - data: personData, - loading: personLoading, - run: personFetchRun, - } = useHookPlusRequest(getPersonList, { - manual: true, - onSuccess: (data) => { - console.log(data) - }, - }) - const columns = ref([ + const columns = [ { title: 'id', key: 'id', @@ -110,10 +82,46 @@ const MockDemo = defineComponent({ ) }, }, - ]) + ] const condition = reactive({ email: null, }) + const paginationRef = reactive({ + page: 1, + pageSize: 10, + itemCount: 0, + pageSizes: [10, 20, 30, 40, 50], + showSizePicker: true, + onUpdatePage: (page: number) => { + paginationRef.page = page + + getPerson() + }, + onUpdatePageSize: (pageSize: number) => { + paginationRef.pageSize = pageSize + paginationRef.page = 1 + + getPerson() + }, + }) + const { + data: personData, + loading: personLoading, + run: personFetchRun, + } = useHookPlusRequest(getPersonList, { + defaultParams: [ + { + page: paginationRef.page, + pageSize: paginationRef.pageSize, + email: condition.email, + }, + ], + onSuccess: (res) => { + const { total } = res + + paginationRef.itemCount = total + }, + }) const getPerson = () => { const { pageSize, page } = paginationRef @@ -126,16 +134,6 @@ const MockDemo = defineComponent({ }) } - watchEffect(() => { - if (personData.value) { - paginationRef.itemCount = personData.value.total - } - }) - - onBeforeMount(() => { - getPerson() - }) - return { personData, personLoading, @@ -180,7 +178,7 @@ const MockDemo = defineComponent({ + + + + + badgeHidden('/template-hooks')}> + 隐藏当前菜单标记 + + badgeShow('/template-hooks')}> + 显示当前菜单标记 + + + badgeUpdateLabel('/template-hooks', { + label: this.badgeValue, + }) + } + > + 更新当前菜单标记 + + { + badgeUpdateLabel('/template-hooks', { + label: this.badgeValue, + icon: , + }) + }} + > + 添加标记图标 + + { + badgeUpdateLabel('/template-hooks', { + label: this.badgeValue, + icon: void 0, + }) + }} + > + 隐藏标记图标 + + + +

getAppTheme 获取当前主题色: {getAppTheme().themeLabel}

diff --git a/vite.plugin.config.ts b/vite.plugin.config.ts index 5055ddf1..183daf4c 100644 --- a/vite.plugin.config.ts +++ b/vite.plugin.config.ts @@ -104,7 +104,7 @@ function onlyBuildOptions(mode: string) { name: 'axios', global: 'axios', resolve: - 'https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.5/axios.min.js', + 'https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js', }, ], }),