version: v5.2.3

.vscode/settings.json

@@ -28,6 +28,7 @@
     "commitmsg",
     "crossorigin",
     "datetimerange",
+    "depcheckrc",
     "domtoimage",
     "EDITMSG",
     "iife",

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

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/eslint-plugin": "8.36.0",
-    "@typescript-eslint/parser": "8.24.0",
+    "@typescript-eslint/parser": "8.36.0",
-    "@vitejs/plugin-vue": "5.2.3",
+    "@vitejs/plugin-vue": "6.0.1",
-    "@vitejs/plugin-vue-jsx": "4.1.2",
+    "@vitejs/plugin-vue-jsx": "5.1.1",
-    "@vitest/ui": "2.1.8",
+    "@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": "9.31.0",
-    "eslint-config-prettier": "10.1.2",
+    "eslint-config-prettier": "10.1.5",
-    "eslint-plugin-prettier": "5.2.6",
+    "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",

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

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 {

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 (
+    if (takeoverAutoHeight) {
-      <RTable
+      return (
-        {...rest}
+        <NFlex vertical class="flex-vertical">
-        onRegister={register}
+          {{
-        pagination={showPagination ? paginationRef : void 0}
+            default: () => (
-      >
+              <>
-        {$slots}
+                {collapse?.()}
-      </RTable>
+                <RTable {...baseProps} {...rest} flexAutoHeight>
-    )
+                  {{
+                    ...restSlots,
+                  }}
+                </RTable>
+              </>
+            ),
+          }}
+        </NFlex>
+      )
+    } else {
+      return (
+        <RTable {...baseProps} {...rest} flexAutoHeight={flexAutoHeight}>
+          {{
+            ...restSlots,
+          }}
+        </RTable>
+      )
+    }
   },
 })

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
 }

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

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
 }

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(() => {

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
 }

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%',
+        top: '2%',
-        containLabel: true,
+        outerBounds: {
+          bottom: '10%',
+        },
+        outerBoundsMode: 'auto',
       },
       xAxis: [
         {

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">
+      <RTablePro
-        <RCollapse bordered>
+        takeoverAutoHeight
-          {{
+        data={mockPersonList}
-            default: () => (
+        v-model:columns={baseColumns}
-              <>
+        showPagination
-                <NFormItemGi label="用户名">
+        paginationCount={mockPersonList.length}
-                  <NInput clearable />
+        remote={false}
-                </NFormItemGi>
+        title={
-                <NFormItemGi label="状态">
+          <NFlex>
-                  <NSelect
+            <NFlex align="center">
-                    clearable
+              <NButton text focusable={false}>
-                    options={[
+                底部区域插槽
-                      {
+              </NButton>
-                        label: '成功',
+              <NSwitch v-model:value={switchRef.footer} />
-                        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>
             </NFlex>
-          }
+            <NFlex align="center">
-        >
+              <NButton text focusable={false}>
-          {{
+                操作区域插槽
-            tableFooter: () =>
+              </NButton>
-              switchRef.footer
+              <NSwitch v-model:value={switchRef.action} />
-                ? '表格的底部内容区域插槽，有时候你可能会用上'
+            </NFlex>
-                : null,
+          </NFlex>
-            tableAction: () =>
+        }
-              switchRef.action
+      >
-                ? '表格的操作区域内容插槽，有时候可能会用上'
+        {{
-                : null,
+          collapse: () => (
-          }}
+            <RCollapse bordered open={false}>
-        </RTablePro>
+              {{
-      </NFlex>
+                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>
     )
   },
 })

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}