version: v5.2.3

2025-11-30 22:42:23 +08:00 · 2025-10-26 21:16:27 +08:00 · 2025-10-26 21:16:27 +08:00 · bebd3d53bd
commit bebd3d53bd
parent 49af61a339
15 changed files with 1155 additions and 853 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -28,6 +28,7 @@
    "commitmsg",
    "crossorigin",
    "datetimerange",
+    "depcheckrc",
    "domtoimage",
    "EDITMSG",
    "iife",
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,21 @@
+## 5.2.3
+
+## Feats
+
+- 更新依赖为主流版本
+- `RTablePro` 组件相关
+  - 新增 `takeoverAutoHeight` 配置项，允许接管表格的流体高度渲染，一旦启用该属性，`flexAutoHeight` 属性将强制启用
+  - 新增 `collapse` 插槽，配合 `takeoverAutoHeight` 配置项使用，允许自定义表格常见的顶部操作区域，当然也可以做点其他的，但是该插槽仅在启用 `takeoverAutoHeight` 配置项时生效
+    > 该属性可以让流体高度功能使用更加优雅，有点用处。
+  - 新增暴露 `setPage`, `setPageSize`, `getPage`, `getPageSize` 方法
+- `naive-ui` 最新版本有依赖问题，暂时回退升级
+- `echarts` 更新至 `6.0.0` 版本，并且完成适配
+
+## Fixes
+
+- 修复 `usePagination.resetPagination` 方法在重置分页时，没有正确触发 `pageChange`, `pageSizeChange` 回调函数的问题
+- 修复 `resetTablePagination` 方法在重置分页时，没有正确触发 `onTablePaginationUpdate` 回调函数的问题
+
 ## 5.2.2

 ## Feats
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ray-template",
  "private": false,
-  "version": "5.2.2",
+  "version": "5.2.3",
  "type": "module",
  "engines": {
    "node": "^18.0.0 || ^20.0.0 || >=22.0.0",
@ -36,12 +36,12 @@
    "@logicflow/core": "2.0.10",
    "@logicflow/extension": "2.0.14",
    "@vueuse/core": "^13.1.0",
-    "axios": "^1.9.0",
+    "axios": "^1.10.0",
    "clipboard": "^2.0.11",
    "crypto-js": "4.2.0",
    "currency.js": "^2.0.4",
    "dayjs": "^1.11.13",
-    "echarts": "^5.6.0",
+    "echarts": "^6.0.0",
    "html-to-image": "1.11.13",
    "interactjs": "1.10.27",
    "jsbarcode": "3.11.6",
@ -51,44 +51,45 @@
    "pinia": "^3.0.3",
    "pinia-plugin-persistedstate": "^4.4.1",
    "print-js": "^1.6.0",
-    "vue": "^3.5.17",
+    "vue": "^3.5.22",
    "vue-demi": "0.14.10",
-    "vue-hooks-plus": "2.4.0",
+    "vue-hooks-plus": "2.4.1",
    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.5.1",
+    "vue-router": "^4.6.3",
    "vue3-next-qrcode": "3.0.2"
  },
  "devDependencies": {
    "@commitlint/cli": "19.7.1",
    "@commitlint/config-conventional": "19.7.1",
-    "@eslint/js": "9.28.0",
+    "@eslint/eslintrc": "3.3.1",
+    "@eslint/js": "9.30.1",
    "@interactjs/types": "1.10.27",
    "@intlify/unplugin-vue-i18n": "4.0.0",
    "@types/crypto-js": "4.2.2",
    "@types/jsbarcode": "3.11.4",
    "@types/lodash-es": "4.17.12",
    "@types/mockjs": "1.0.10",
-    "@typescript-eslint/eslint-plugin": "8.24.0",
-    "@typescript-eslint/parser": "8.24.0",
-    "@vitejs/plugin-vue": "5.2.3",
-    "@vitejs/plugin-vue-jsx": "4.1.2",
-    "@vitest/ui": "2.1.8",
+    "@typescript-eslint/eslint-plugin": "8.36.0",
+    "@typescript-eslint/parser": "8.36.0",
+    "@vitejs/plugin-vue": "6.0.1",
+    "@vitejs/plugin-vue-jsx": "5.1.1",
+    "@vitest/ui": "3.0.5",
    "@vue/eslint-config-prettier": "10.1.0",
    "@vue/eslint-config-typescript": "14.2.0",
    "@vue/test-utils": "2.4.6",
    "autoprefixer": "10.4.21",
    "depcheck": "1.4.7",
-    "eslint": "9.20.1",
-    "eslint-config-prettier": "10.1.2",
-    "eslint-plugin-prettier": "5.2.6",
+    "eslint": "9.31.0",
+    "eslint-config-prettier": "10.1.5",
+    "eslint-plugin-prettier": "5.5.1",
    "eslint-plugin-vue": "9.32.0",
-    "globals": "16.0.0",
+    "globals": "16.3.0",
    "happy-dom": "17.1.0",
    "husky": "8.0.3",
    "lint-staged": "15.4.3",
-    "postcss": "8.5.4",
+    "postcss": "8.5.6",
    "postcss-px-to-viewport-8-with-include": "1.2.2",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
    "rollup-plugin-gzip": "4.0.1",
    "sass": "1.86.3",
    "svg-sprite-loader": "6.0.11",
@ -101,7 +102,7 @@
    "vite-plugin-cdn2": "1.1.0",
    "vite-plugin-ejs": "1.7.0",
    "vite-plugin-eslint": "1.8.1",
-    "vite-plugin-inspect": "0.8.4",
+    "vite-plugin-inspect": "0.10.6",
    "vite-plugin-mock-dev-server": "1.8.3",
    "vite-plugin-svg-icons": "2.0.1",
    "vite-svg-loader": "5.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app-config/design-config.ts
+++ b/src/app-config/design-config.ts
@ -51,13 +51,13 @@ export const APP_THEME: AppTheme = {
    dark: {
      common: {
        borderRadius: '4px',
-        baseColor: 'rgb(18, 18, 18)',
+        baseColor: 'rgba(18, 18, 18, 1)',
      },
    },
    light: {
      common: {
        borderRadius: '4px',
-        baseColor: 'rgb(255, 255, 255)',
+        baseColor: 'rgba(255, 255, 255, 1)',
      },
    },
  },
--- a/src/components/base/RChart/src/index.tsx
+++ b/src/components/base/RChart/src/index.tsx
@ -19,7 +19,7 @@ import {
  ScatterChart,
  PictorialBarChart,
 } from 'echarts/charts' // 系列类型(后缀都为 SeriesOption)
-import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
+import { LegacyGridContainLabel, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
 import { CanvasRenderer } from 'echarts/renderers' // echarts 渲染器
 import { NCard } from 'naive-ui'

@ -154,7 +154,7 @@ export default defineComponent({
        ScatterChart,
        PictorialBarChart,
      ]) // 注册 chart series type
-      use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果
+      use([LegacyGridContainLabel, UniversalTransition]) // 注册布局, 过度效果
      use([CanvasRenderer]) // 注册渲染器

      try {
--- a/src/components/pro/RTablePro/src/TablePro.tsx
+++ b/src/components/pro/RTablePro/src/TablePro.tsx
@ -1,4 +1,5 @@
 import { RTable } from '../../../base/RTable'
+import { NFlex } from 'naive-ui'

 import props from './props'
 import useTable from '../../../base/RTable/src/hooks/useTable'
@ -24,6 +25,8 @@ export default defineComponent({
        setItemCount,
        resetPagination,
        getItemCount,
+        setPage,
+        setPageSize,
      },
    ] = usePagination(void 0, {
      prefix: props.paginationPrefix,
@ -146,6 +149,10 @@ export default defineComponent({
          runAsyncTableRequest: runResetPaginationRequestAsync,
          getCurrentTableRequestParams: combineRequestParams,
          resetTablePagination: resetPagination,
+          setPage,
+          setPageSize,
+          getPage,
+          getPageSize,
        })
      }
    })
@ -158,16 +165,44 @@ export default defineComponent({
  },
  render() {
    const { register, $props, paginationRef, $slots } = this
-    const { onRegister, showPagination, ...rest } = $props
+    const {
+      onRegister,
+      showPagination,
+      takeoverAutoHeight,
+      flexAutoHeight,
+      ...rest
+    } = $props
+    const baseProps = {
+      onRegister: register,
+      pagination: showPagination ? paginationRef : void 0,
+    }
+    const { collapse, ...restSlots } = $slots

-    return (
-      <RTable
-        {...rest}
-        onRegister={register}
-        pagination={showPagination ? paginationRef : void 0}
-      >
-        {$slots}
-      </RTable>
-    )
+    if (takeoverAutoHeight) {
+      return (
+        <NFlex vertical class="flex-vertical">
+          {{
+            default: () => (
+              <>
+                {collapse?.()}
+                <RTable {...baseProps} {...rest} flexAutoHeight>
+                  {{
+                    ...restSlots,
+                  }}
+                </RTable>
+              </>
+            ),
+          }}
+        </NFlex>
+      )
+    } else {
+      return (
+        <RTable {...baseProps} {...rest} flexAutoHeight={flexAutoHeight}>
+          {{
+            ...restSlots,
+          }}
+        </RTable>
+      )
+    }
  },
 })
--- a/src/components/pro/RTablePro/src/hooks/useTablePro.ts
+++ b/src/components/pro/RTablePro/src/hooks/useTablePro.ts
@ -218,6 +218,40 @@ export const useTablePro = () => {
   */
  const getTableProConfig = () => getTableProInstance().config

+  /**
+   *
+   * @description
+   * 获取表格分页页码。
+   */
+  const getPage = () => getTableProInstance().getPage.call(null)
+
+  /**
+   *
+   * @description
+
+  /**
+   *
+   * @description
+   * 获取表格分页每页条数。
+   */
+  const getPageSize = () => getTableProInstance().getPageSize.call(null)
+
+  /**
+   *
+   * @description
+   * 设置表格分页页码。
+   */
+  const setPage = (page: number) =>
+    getTableProInstance().setPage.call(null, page)
+
+  /**
+   *
+   * @description
+   * 设置表格分页每页条数。
+   */
+  const setPageSize = (pageSize: number) =>
+    getTableProInstance().setPageSize.call(null, pageSize)
+
  return [
    register,
    {
@ -236,6 +270,10 @@ export const useTablePro = () => {
      resetTablePagination,
      runAsyncTableRequest,
      getTableProConfig,
+      getPage,
+      getPageSize,
+      setPage,
+      setPageSize,
    },
  ] as const
 }
--- a/src/components/pro/RTablePro/src/props.ts
+++ b/src/components/pro/RTablePro/src/props.ts
@ -118,6 +118,20 @@ const props = {
    default: (info: Parameters<NonNullable<PaginationPrefix>>[0]) =>
      `共 ${info.itemCount} 条`,
  },
+  /**
+   *
+   * @description
+   * 是否接管表格的渲染。
+   * 如果你觉得配置 flexAutoHeight 属性过于麻烦，可以设置为 true，然后就能直接使用 flexAutoHeight，无需做过多的配置。
+   *
+   * 并且，一旦启用该属性，flexAutoHeight 属性将强制启用。
+   *
+   * @default false
+   */
+  takeoverAutoHeight: {
+    type: Boolean,
+    default: false,
+  },
 }

 export default props
--- a/src/components/pro/RTablePro/src/types.ts
+++ b/src/components/pro/RTablePro/src/types.ts
@ -159,6 +159,54 @@ export interface TableProInst extends Omit<RTableInst, 'getTableInstance'> {
   * resetTablePagination()
   */
  resetTablePagination: () => void
+  /**
+   *
+   * @description
+   * 设置表格分页页码。
+   *
+   * @example
+   * const [register, { setPage }] = useTablePro()
+   *
+   * // 设置表格分页页码为 2
+   * setPage(2)
+   */
+  setPage: (page: number) => void
+  /**
+   *
+   * @description
+   * 设置表格分页每页条数。
+   *
+   * @example
+   * const [register, { setPageSize }] = useTablePro()
+   *
+   * // 设置表格分页每页条数为 20
+   * setPageSize(20)
+   */
+  setPageSize: (pageSize: number) => void
+  /**
+   *
+   * @description
+   * 获取表格分页页码。
+   *
+   * @example
+   * const [register, { getPage }] = useTablePro()
+   *
+   * // 获取表格分页页码
+   * const page = getPage()
+   */
+  getPage: () => number
+  /**
+   *
+   * @description
+   * 获取表格分页每页条数。
+   *
+   * @example
+   * const [register, { getPageSize }] = useTablePro()
+   *
+   * // 获取表格分页每页条数
+   * const pageSize = getPageSize()
+   */
+  getPageSize: () => number
 }

 export interface TableProFieldNames {
@ -166,18 +214,24 @@ export interface TableProFieldNames {
   *
   * @description
   * 分页器页码字段。
+   *
+   * @default 'page'
   */
  page: string
  /**
   *
   * @description
   * 分页器每页条数字段。
+   *
+   * @default 'pageSize'
   */
  pageSize: string
  /**
   *
   * @description
   * 分页器总条数字段。
+   *
+   * @default 'itemCount'
   */
  itemCount: string
 }
--- a/src/hooks/web/usePagination.ts
+++ b/src/hooks/web/usePagination.ts
@ -196,11 +196,16 @@ export const usePagination = <T extends AnyFC>(
   * 如果，pageSizes 为空，则设置每页条数为 10。
   */
  const resetPagination = () => {
-    const { pageSizes } = paginationRef.value
+    const { pageSizes, pageChange, pageSizeChange } = mergedOptions.value

    paginationRef.value.page = DEFAULT_OPTIONS.page
    paginationRef.value.pageSize =
      (pageSizes?.[0] as number) || DEFAULT_OPTIONS.pageSize
+
+    callbackRef.value?.()
+
+    pageChange?.(paginationRef.value.page!)
+    pageSizeChange?.(paginationRef.value.pageSize!)
  }

  effectDispose(() => {
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@ -11,6 +11,7 @@ import type {
 } from 'naive-ui'
 import type { NativeElements, ReservedProps, VNode } from 'vue'
 import type { Recordable } from './modules/helper'
+import type { ECharts, EChartsCoreOption } from 'echarts/core'

 export declare global {
  declare interface UnknownObjectKey {
@ -75,4 +76,8 @@ export declare global {
  declare interface GlobalDataTableColumns<T> extends DataTableColumns<T> {}

  declare type GlobalRecordable<T> = Recordable<T>
+
+  declare type GlobalECharts = ECharts
+
+  declare type GlobalEChartsCoreOption = EChartsCoreOption
 }
--- a/src/views/demo/echart/index.tsx
+++ b/src/views/demo/echart/index.tsx
@ -29,7 +29,7 @@ const Echart = defineComponent({
      loading1: false,
    })

-    const baseOptions = {
+    const baseOptions: GlobalEChartsCoreOption = {
      legend: {},
      tooltip: {},
      xAxis: {
@ -60,7 +60,7 @@ const Echart = defineComponent({
        },
      ],
    }
-    const basePieOptions = {
+    const basePieOptions: GlobalEChartsCoreOption = {
      title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
@ -124,10 +124,13 @@ const Echart = defineComponent({
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
-        left: '3%',
+        left: '4%',
        right: '4%',
-        bottom: '3%',
-        containLabel: true,
+        top: '2%',
+        outerBounds: {
+          bottom: '10%',
+        },
+        outerBoundsMode: 'auto',
      },
      xAxis: [
        {
--- a/src/views/demo/table-auto-height.tsx
+++ b/src/views/demo/table-auto-height.tsx
@ -123,101 +123,95 @@ export default defineComponent({
    const { mockPersonList, baseColumns, switchRef } = this

    return (
-      <NFlex vertical class="flex-vertical">
-        <RCollapse bordered>
-          {{
-            default: () => (
-              <>
-                <NFormItemGi label="用户名">
-                  <NInput clearable />
-                </NFormItemGi>
-                <NFormItemGi label="状态">
-                  <NSelect
-                    clearable
-                    options={[
-                      {
-                        label: '成功',
-                        value: 'success',
-                      },
-                      {
-                        label: '失败',
-                        value: 'error',
-                      },
-                    ]}
-                  />
-                </NFormItemGi>
-                <NFormItemGi label="登陆时间">
-                  <NDatePicker type="datetimerange" clearable />
-                </NFormItemGi>
-                <NFormItemGi label="演示折叠的条件框">
-                  <NInput clearable />
-                </NFormItemGi>
-                <NFormItemGi label="演示折叠的条件框">
-                  <NInput clearable />
-                </NFormItemGi>
-                <NFormItemGi label="演示折叠的条件框">
-                  <NInput clearable />
-                </NFormItemGi>
-                <NFormItemGi label="演示折叠的条件框">
-                  <NInput clearable />
-                </NFormItemGi>
-                <NFormItemGi label="演示折叠的条件框">
-                  <NInput clearable />
-                </NFormItemGi>
-                <NFormItemGi label="演示折叠的条件框">
-                  <NInput clearable />
-                </NFormItemGi>
-              </>
-            ),
-            action: () => (
-              <NFlex>
-                <NButton type="primary">查询</NButton>
-              </NFlex>
-            ),
-          }}
-        </RCollapse>
-        <RTablePro
-          data={mockPersonList}
-          v-model:columns={baseColumns}
-          showPagination
-          paginationCount={mockPersonList.length}
-          remote={false}
-          flexAutoHeight={switchRef.flexAutoHeight}
-          title={
-            <NFlex>
-              <NFlex align="center">
-                <NButton text focusable={false}>
-                  流体高度
-                </NButton>
-                <NSwitch v-model:value={switchRef.flexAutoHeight} />
-              </NFlex>
-              <NFlex align="center">
-                <NButton text focusable={false}>
-                  底部区域插槽
-                </NButton>
-                <NSwitch v-model:value={switchRef.footer} />
-              </NFlex>
-              <NFlex align="center">
-                <NButton text focusable={false}>
-                  操作区域插槽
-                </NButton>
-                <NSwitch v-model:value={switchRef.action} />
-              </NFlex>
+      <RTablePro
+        takeoverAutoHeight
+        data={mockPersonList}
+        v-model:columns={baseColumns}
+        showPagination
+        paginationCount={mockPersonList.length}
+        remote={false}
+        title={
+          <NFlex>
+            <NFlex align="center">
+              <NButton text focusable={false}>
+                底部区域插槽
+              </NButton>
+              <NSwitch v-model:value={switchRef.footer} />
            </NFlex>
-          }
-        >
-          {{
-            tableFooter: () =>
-              switchRef.footer
-                ? '表格的底部内容区域插槽，有时候你可能会用上'
-                : null,
-            tableAction: () =>
-              switchRef.action
-                ? '表格的操作区域内容插槽，有时候可能会用上'
-                : null,
-          }}
-        </RTablePro>
-      </NFlex>
+            <NFlex align="center">
+              <NButton text focusable={false}>
+                操作区域插槽
+              </NButton>
+              <NSwitch v-model:value={switchRef.action} />
+            </NFlex>
+          </NFlex>
+        }
+      >
+        {{
+          collapse: () => (
+            <RCollapse bordered open={false}>
+              {{
+                default: () => (
+                  <>
+                    <NFormItemGi label="用户名">
+                      <NInput clearable />
+                    </NFormItemGi>
+                    <NFormItemGi label="状态">
+                      <NSelect
+                        clearable
+                        options={[
+                          {
+                            label: '成功',
+                            value: 'success',
+                          },
+                          {
+                            label: '失败',
+                            value: 'error',
+                          },
+                        ]}
+                      />
+                    </NFormItemGi>
+                    <NFormItemGi label="登陆时间">
+                      <NDatePicker type="datetimerange" clearable />
+                    </NFormItemGi>
+                    <NFormItemGi label="演示折叠的条件框">
+                      <NInput clearable />
+                    </NFormItemGi>
+                    <NFormItemGi label="演示折叠的条件框">
+                      <NInput clearable />
+                    </NFormItemGi>
+                    <NFormItemGi label="演示折叠的条件框">
+                      <NInput clearable />
+                    </NFormItemGi>
+                    <NFormItemGi label="演示折叠的条件框">
+                      <NInput clearable />
+                    </NFormItemGi>
+                    <NFormItemGi label="演示折叠的条件框">
+                      <NInput clearable />
+                    </NFormItemGi>
+                    <NFormItemGi label="演示折叠的条件框">
+                      <NInput clearable />
+                    </NFormItemGi>
+                  </>
+                ),
+                action: () => (
+                  <NFlex>
+                    <NButton type="primary">查询</NButton>
+                  </NFlex>
+                ),
+              }}
+            </RCollapse>
+          ),
+          tableFooter: () =>
+            switchRef.footer
+              ? '表格的底部内容区域插槽，有时候你可能会用上'
+              : null,
+          tableAction: () =>
+            switchRef.action
+              ? '表格的操作区域内容插槽，有时候可能会用上'
+              : null,
+        }}
+      </RTablePro>
    )
  },
 })
--- a/src/views/demo/table-pro-demo.tsx
+++ b/src/views/demo/table-pro-demo.tsx
@ -119,6 +119,9 @@ export default defineComponent({
        print,
        downloadCsv,
        runAsyncTableRequest,
+        setPage,
+        setPageSize,
+        resetTablePagination,
      },
    ] = useTablePro()
    // 表格数据
@ -306,6 +309,9 @@ export default defineComponent({
      selectKey,
      register,
      reset,
+      setPage,
+      setPageSize,
+      resetTablePagination,
    }
  },
  render() {
@ -329,10 +335,13 @@ export default defineComponent({
      selectKey,
      register,
      reset,
+      setPage,
+      setPageSize,
+      resetTablePagination,
    } = this

    return (
-      <NFlex vertical>
+      <NFlex vertical class="h-full">
        <RCollapse open={this.collapseRef} onRegister={register}>
          {{
            default: () => (
@ -422,6 +431,15 @@ export default defineComponent({
            <NButton type="primary" onClick={() => downloadCsv()}>
              下载 csv
            </NButton>
+            <NButton type="primary" onClick={() => setPage(2)}>
+              设置分页页码为 2
+            </NButton>
+            <NButton type="primary" onClick={() => setPageSize(20)}>
+              设置分页每页条数为 20
+            </NButton>
+            <NButton type="primary" onClick={() => resetTablePagination()}>
+              重置分页
+            </NButton>
          </NFlex>
        </NCard>
        <NCard title="useCheckedRowKeys 部分方法">
@ -465,6 +483,7 @@ export default defineComponent({
          </NFlex>
        </NCard>
        <RTablePro
+          takeoverAutoHeight
          onRegister={tableProRegister}
          data={tableDataRef}
          v-model:columns={this.baseColumns}