version: 4.6.2

.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

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

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.
 

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",

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
+    specifier: ^1.6.7
-    version: 1.6.5
+    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:
+  /axios@1.6.7:
-    resolution: {integrity: sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==}
+    resolution: {integrity: sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==}
     dependencies:
       follow-redirects: 1.15.5
       form-data: 4.0.0

src/app-config/appConfig.ts

@@ -81,13 +81,16 @@ export const APP_MENU_CONFIG: Readonly<AppMenuConfig> = {
  *
  * 系统缓存 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 = ''
 

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({
           <Size {...p} onChangeSize={changeTableSize.bind(this)} />
           <Fullscreen />
           <C {...p} onUpdateColumn={updateTableColumn.bind(this)} />
+          <TablePropsSelect
+            {...p}
+            onPopselectChange={popselectChange.bind(this)}
+            onInitialed={popselectChange.bind(this)}
+          />
         </>
       )
 
@@ -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 (
       <NCard
         ref="wrapperRef"
-        bordered={this.wrapperBordered}
+        bordered={wrapperBordered}
-        {...{ id: this.uuidWrapper }}
+        {...{ id: uuidWrapper }}
       >
         {{
           default: () => (
             <>
               <NDataTable
                 ref="rTableInst"
-                {...{ id: this.uuidTable }}
+                {...{ id: uuidTable }}
-                {...this.$props}
+                {...$attrs}
-                {...this.$attrs}
+                {...$props}
-                rowProps={this.combineRowProps.bind(this)}
+                {...propsPopselectValue}
-                size={this.privateReactive.size}
+                rowProps={combineRowProps.bind(this)}
+                size={privateReactive.size}
               >
                 {{
-                  ...this.$slots,
+                  ...$slots,
                 }}
               </NDataTable>
-              {!this.disabledContextMenu ? (
+              {!disabledContextMenu ? (
                 <NDropdown
-                  show={this.contextMenuReactive.showContextMenu}
+                  show={contextMenuReactive.showContextMenu}
                   placement="bottom-start"
                   trigger="manual"
-                  x={this.contextMenuReactive.x}
+                  x={contextMenuReactive.x}
-                  y={this.contextMenuReactive.y}
+                  y={contextMenuReactive.y}
-                  options={this.contextMenuOptions}
+                  options={contextMenuOptions}
                   onClickoutside={() =>
-                    (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: <div style="display: none;"></div>,
           }),
           'header-extra': () => (
             <NFlex align="center">
               {/* eslint-disable @typescript-eslint/no-explicit-any */}
-              {tool(this.$props as any)}
+              {tool($props as any)}
             </NFlex>
           ),
-          footer: () => this.$slots.tableFooter?.(),
+          footer: () => $slots.tableFooter?.(),
-          action: () => this.$slots.tableAction?.(),
+          action: () => $slots.tableAction?.(),
         }}
       </NCard>
     )

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 = () => (
-  <RIcon name="draggable" size={config.tableIconSize} cursor="all-scroll" />
+  <RIcon name="draggable" size={14} cursor="all-scroll" />
 )
 
 const RowIconRender = ({

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 (
-      <NPopover showArrow={false}>
+      <RIcon
-        {{
+        name="fullscreen"
-          trigger: () => (
+        size={config.tableIconSize}
-            <RIcon
+        cursor="pointer"
-              name="fullscreen"
+        onClick={() => {
-              size={config.tableIconSize}
+          if (!isEnabled) {
-              cursor="pointer"
+            window.$message.warning($t('globalMessage.isEnabledFullscreen'))
-              onClick={() => {
+          }
-                if (!isEnabled) {
-                  window.$message.warning(
-                    $t('globalMessage.isEnabledFullscreen'),
-                  )
-                }
 
-                toggleFullscreen()
+          toggleFullscreen()
-              }}
-            />
-          ),
-          default: () => (this.isFullscreen ? '取消全屏' : '全屏表格'),
         }}
-      </NPopover>
+      />
     )
   },
 })

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 (
-      <NPopover showArrow={false}>
+      <RIcon
-        {{
+        name="print"
-          trigger: () => (
+        size={config.tableIconSize}
-            <RIcon
+        cursor="pointer"
-              name="print"
+        onClick={this.printTableClick.bind(this)}
-              size={config.tableIconSize}
+      />
-              cursor="pointer"
-              onClick={this.printTableClick.bind(this)}
-            />
-          ),
-          default: () => '打印表格',
-        }}
-      </NPopover>
     )
   },
 })

src/components/RTable/src/components/Props.tsx

@@ -0,0 +1,104 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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<PropsComponentPopselectKeys[]>([])
+    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 (
+      <NPopselect
+        v-model:value={this.propsPopselectValue}
+        options={this.propsOptions}
+        trigger="click"
+        multiple
+        onUpdateValue={this.updatePopselectValue.bind(this)}
+      >
+        <RIcon
+          name="expanded"
+          size={config.tableIconSize}
+          cursor="pointer"
+          style="transform: rotate(270deg);"
+        />
+      </NPopselect>
+    )
+  },
+})

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)}
       >
-        <NPopover showArrow={false}>
+        <RIcon name="adjustment" size={config.tableIconSize} cursor="pointer" />
-          {{
-            trigger: () => (
-              <RIcon
-                name="adjustment"
-                size={config.tableIconSize}
-                cursor="pointer"
-              />
-            ),
-            default: () => '密度',
-          }}
-        </NPopover>
       </NPopselect>
     )
   },

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<DownloadCsvTableOptions>,
+    default: () => ({}),
+  },
   title: {
     /**
      *
@@ -61,14 +69,6 @@ const props = {
     >,
     default: null,
   },
-  downloadTableOptions: {
-    /**
-     *
-     * 配置下载表格内容为 excel 的配置项
-     */
-    type: Object as PropType<DownloadTableOptions>,
-    default: () => ({}),
-  },
   wrapperBordered: {
     /**
      *
@@ -86,16 +86,6 @@ const props = {
     type: Object as PropType<PrintTableOptions>,
     default: () => ({}),
   },
-  onDownloadSuccess: {
-    /** 导出表格成功回调 */
-    type: [Function, Array] as PropType<MaybeArray<() => void>>,
-    default: null,
-  },
-  onDownloadError: {
-    /** 导出表格失败回调 */
-    type: [Function, Array] as PropType<MaybeArray<() => void>>,
-    default: null,
-  },
   onUpdateColumns: {
     type: [Function, Array] as PropType<
       MaybeArray<(arr: DataTableColumn[]) => void>

src/components/RTable/src/shared.ts

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-export default {
+export const config = {
   tableIconSize: '18',
   tableKey: Symbol('r-table'),
 }

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<HTMLElement | undefined>
-  tableRef: Ref<HTMLElement | undefined>
 }
 
 export interface C extends DataTableBaseColumn {
@@ -44,6 +44,8 @@ export interface C extends DataTableBaseColumn {
 
 export type OverridesTableColumn<T = Recordable> = C | DataTableColumn<T>
 
-export interface TableInst extends TableProvider {
+export interface TableInst extends Omit<TableProvider, 'wrapperRef'> {
   rTableInst: Omit<DataTableInst, 'clearFilter'>
 }
+
+export type PropsComponentPopselectKeys = 'striped' | 'bordered'

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,
+    update,
-    updateLabel,
   }
 }
 

src/router/index.ts

@@ -29,8 +29,8 @@ const createVueRouter = async () => {
 export const setupRouter = async (app: App<Element>) => {
   router = await createVueRouter()
 
-  vueRouterRegister(router)
   app.use(router)
   // 等待 router 挂载后，初始化 useRouter 方法
   useVueRouter()
+  vueRouterRegister(router)
 }

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',
+    },
   },
 }
 

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',
+    },
   },
 }
 

src/router/type.ts

@@ -11,9 +11,11 @@ export type Component<T = any> =
   | (() => Promise<T>)
 
 export interface AppMenuExtraOptions {
-  extraLabel?: string | number
+  label?: string | number
-  extraIcon?: string | VNode
+  icon?: VNode
-  extraType?: TagProps['type']
+  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

src/store/modules/menu/helper.ts

@@ -11,17 +11,14 @@
 
 /** 本方法感谢 <https://yunkuangao.me/> 的支持 */
 
-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 {
+import type { AppMenuOption, AppMenuKey } from '@/types/modules/app'
-  AppMenuOption,
-  MenuTagOptions,
-  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<object>(extra, 'Object')) {
+  // 渲染文案，优先级：i18nLabel > label
-    const { extraLabel, extraIcon, extraType } = extra
+  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<object>(extra, 'Object')) {
     return () => {
       return h(
         NTag,
         {
           ...tagProps,
-          type: extraType || 'primary',
+          type: type || 'primary',
+          style: style(),
         },
         {
-          default: () => extraLabel,
+          default: () => renderLabel(),
-          icon: () => extraIcon,
+          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<AppMenuKey>(

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 {

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 {

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({
+    const columns = [
-      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([
       {
         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({
           </RCollapseGrid>
         </NForm>
         <RTable
-          title="分页表格"
+          title="Mock数据表格"
           data={this.personData?.data}
           loading={this.personLoading}
           v-model:columns={this.columns}

src/views/demo/template-hooks/index.tsx

@@ -10,6 +10,7 @@
  */
 
 import { NFlex, NCard, NButton, NInput } from 'naive-ui'
+import { RIcon } from '@/components'
 
 import {
   useAppNavigation,
@@ -17,6 +18,7 @@ import {
   useSpinning,
   useWatermark,
   useTheme,
+  useBadge,
 } from '@/hooks'
 import { getVariableToRefs } from '@/global-variable'
 import { useSettingGetters } from '@/store'
@@ -27,6 +29,7 @@ export default defineComponent({
     const currentMenuOption = ref('')
     const maximizeRef = getVariableToRefs('layoutContentMaximize')
     const watermark = ref(useSettingGetters().getWatermarkConfig.value.content)
+    const badgeValue = ref('new')
 
     const { navigationTo } = useAppNavigation()
     const { maximize, isLayoutContentMaximized } = useMaximize()
@@ -39,6 +42,11 @@ export default defineComponent({
     } = useWatermark()
     const { changeDarkTheme, changeLightTheme, toggleTheme, getAppTheme } =
       useTheme()
+    const {
+      hidden: badgeHidden,
+      show: badgeShow,
+      update: badgeUpdateLabel,
+    } = useBadge()
 
     return {
       navigationTo,
@@ -58,6 +66,10 @@ export default defineComponent({
       toggleTheme,
       getAppTheme,
       isLayoutContentMaximized,
+      badgeHidden,
+      badgeShow,
+      badgeUpdateLabel,
+      badgeValue,
     }
   },
   render() {
@@ -76,6 +88,9 @@ export default defineComponent({
       toggleTheme,
       getAppTheme,
       isLayoutContentMaximized,
+      badgeHidden,
+      badgeShow,
+      badgeUpdateLabel,
     } = this
 
     return (
@@ -86,6 +101,48 @@ export default defineComponent({
             方法。这里不做过多的赘述，可以查看文档具体描述。
           </h3>
         </NCard>
+        <NCard title="useBadge 菜单标记">
+          <NFlex vertical>
+            <NInput v-model:value={this.badgeValue} />
+            <NFlex>
+              <NButton onClick={() => badgeHidden('/template-hooks')}>
+                隐藏当前菜单标记
+              </NButton>
+              <NButton onClick={() => badgeShow('/template-hooks')}>
+                显示当前菜单标记
+              </NButton>
+              <NButton
+                onClick={() =>
+                  badgeUpdateLabel('/template-hooks', {
+                    label: this.badgeValue,
+                  })
+                }
+              >
+                更新当前菜单标记
+              </NButton>
+              <NButton
+                onClick={() => {
+                  badgeUpdateLabel('/template-hooks', {
+                    label: this.badgeValue,
+                    icon: <RIcon name="error" size="18" />,
+                  })
+                }}
+              >
+                添加标记图标
+              </NButton>
+              <NButton
+                onClick={() => {
+                  badgeUpdateLabel('/template-hooks', {
+                    label: this.badgeValue,
+                    icon: void 0,
+                  })
+                }}
+              >
+                隐藏标记图标
+              </NButton>
+            </NFlex>
+          </NFlex>
+        </NCard>
         <NCard title="useTheme 主题">
           <NFlex vertical>
             <h3>getAppTheme 获取当前主题色: {getAppTheme().themeLabel}</h3>

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',
         },
       ],
     }),