perf: improve the usage documentation of vben-vxe-table (#4829)

* perf: improve the usage documentation of vben-vxe-table

apps/web-antd/src/preferences.ts

@@ -3,6 +3,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
 /**
  * @description 项目配置文件
  * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ * !!! 更改配置后请清空缓存，否则可能不生效
  */
 export const overridesPreferences = defineOverridesPreferences({
   // overrides

apps/web-ele/src/preferences.ts

@@ -3,6 +3,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
 /**
  * @description 项目配置文件
  * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ * !!! 更改配置后请清空缓存，否则可能不生效
  */
 export const overridesPreferences = defineOverridesPreferences({
   // overrides

apps/web-naive/src/preferences.ts

@@ -3,6 +3,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
 /**
  * @description 项目配置文件
  * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ * !!! 更改配置后请清空缓存，否则可能不生效
  */
 export const overridesPreferences = defineOverridesPreferences({
   // overrides

docs/.vitepress/config/shared.mts

@@ -3,7 +3,10 @@ import type { HeadConfig } from 'vitepress';
 
 import { resolve } from 'node:path';
 
-import { viteArchiverPlugin } from '@vben/vite-config';
+import {
+  viteArchiverPlugin,
+  viteVxeTableImportsPlugin,
+} from '@vben/vite-config';
 
 import {
   GitChangelog,
@@ -85,6 +88,7 @@ export const shared = defineConfig({
       GitChangelogMarkdownSection(),
       viteArchiverPlugin({ outputDir: '.vitepress' }),
       groupIconVitePlugin(),
+      await viteVxeTableImportsPlugin(),
     ],
     server: {
       fs: {

docs/.vitepress/theme/components/site-layout.vue

@@ -32,21 +32,6 @@ watch(
   () => nextTick(() => initZoom()),
 );
 
-function setVxeTheme(name?: string) {
-  const theme = !name || name === 'default' ? 'light' : name;
-
-  if (typeof document !== 'undefined') {
-    const documentElement = document.documentElement;
-    if (documentElement) {
-      documentElement.dataset.vxeUiTheme = theme;
-    }
-  }
-}
-
-watch(isDark, (dark) => {
-  setVxeTheme(dark ? 'dark' : 'light');
-});
-
 // initPreferences({
 //   namespace: 'docs',
 // });

docs/.vitepress/theme/index.ts

@@ -1,12 +1,7 @@
 // https://vitepress.dev/guide/custom-theme
 import type { EnhanceAppContext, Theme } from 'vitepress';
 
-import { h } from 'vue';
-
-import { useVbenForm } from '@vben/common-ui';
-
 import { NolebaseGitChangelogPlugin } from '@nolebase/vitepress-plugin-git-changelog/client';
-import { Button, Image } from 'ant-design-vue';
 import DefaultTheme from 'vitepress/theme';
 
 import { DemoPreview } from '../components';
@@ -26,65 +21,6 @@ export default {
     app.component('DemoPreview', DemoPreview);
     app.use(NolebaseGitChangelogPlugin);
 
-    if (!import.meta.env.SSR) {
-      const plugin = await import('@vben/plugins/vxe-table');
-
-      plugin.setupVbenVxeTable({
-        configVxeTable: (vxeUI) => {
-          vxeUI.setConfig({
-            grid: {
-              align: 'center',
-              border: false,
-              columnConfig: {
-                resizable: true,
-              },
-              minHeight: 180,
-              proxyConfig: {
-                autoLoad: true,
-                response: {
-                  result: 'items',
-                  total: 'total',
-                  list: 'items',
-                },
-                showActiveMsg: true,
-                showResponseMsg: false,
-              },
-              round: true,
-              showOverflow: true,
-              size: 'small',
-            },
-          });
-
-          // 表格配置项可以用 cellRender: { name: 'CellImage' },
-          vxeUI.renderer.add('CellImage', {
-            renderDefault(_renderOpts, params) {
-              const { column, row } = params;
-              return h(Image, { src: row[column.field] } as any);
-            },
-          });
-
-          // 表格配置项可以用 cellRender: { name: 'CellLink' },
-          vxeUI.renderer.add('CellLink', {
-            renderDefault(renderOpts) {
-              const { props } = renderOpts;
-              return h(
-                Button,
-                { size: 'small', type: 'link' },
-                { default: () => props?.text },
-              );
-            },
-          });
-
-          // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
-          // vxeUI.formats.add
-        },
-        useVbenForm,
-      });
-
-      app.component('VbenVxeGrid', plugin.VbenVxeGrid);
-      app.provide('useVbenVxeGrid', plugin.useVbenVxeGrid);
-    }
-
     // 百度统计
     initHmPlugin();
   },

docs/package.json

@@ -8,7 +8,10 @@
     "docs:preview": "vitepress preview"
   },
   "imports": {
-    "#/*": "./src/_env/*"
+    "#/*": {
+      "node": "./src/_env/node/*",
+      "default": "./src/_env/*"
+    }
   },
   "dependencies": {
     "@vben-core/shadcn-ui": "workspace:*",
@@ -26,7 +29,6 @@
     "@nolebase/vitepress-plugin-git-changelog": "catalog:",
     "@vben/vite-config": "workspace:*",
     "@vite-pwa/vitepress": "catalog:",
-    "sass": "^1.80.6",
     "vitepress": "catalog:",
     "vue": "catalog:"
   }

docs/src/_env/adapter/index.ts

@@ -1,2 +0,0 @@
-export * from './form';
-export * from './vxe-table';

docs/src/_env/adapter/vxe-table.ts

@@ -1 +1,70 @@
+import { h } from 'vue';
+
+import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+
+import { Button, Image } from 'ant-design-vue';
+
+import { useVbenForm } from './form';
+
+if (!import.meta.env.SSR) {
+  setupVbenVxeTable({
+    configVxeTable: (vxeUI) => {
+      vxeUI.setConfig({
+        grid: {
+          align: 'center',
+          border: false,
+          columnConfig: {
+            resizable: true,
+          },
+
+          formConfig: {
+            // 全局禁用vxe-table的表单配置，使用formOptions
+            enabled: false,
+          },
+          minHeight: 180,
+          proxyConfig: {
+            autoLoad: true,
+            response: {
+              result: 'items',
+              total: 'total',
+              list: 'items',
+            },
+            showActiveMsg: true,
+            showResponseMsg: false,
+          },
+          round: true,
+          showOverflow: true,
+          size: 'small',
+        },
+      });
+
+      // 表格配置项可以用 cellRender: { name: 'CellImage' },
+      vxeUI.renderer.add('CellImage', {
+        renderTableDefault(_renderOpts, params) {
+          const { column, row } = params;
+          return h(Image, { src: row[column.field] });
+        },
+      });
+
+      // 表格配置项可以用 cellRender: { name: 'CellLink' },
+      vxeUI.renderer.add('CellLink', {
+        renderTableDefault(renderOpts) {
+          const { props } = renderOpts;
+          return h(
+            Button,
+            { size: 'small', type: 'link' },
+            { default: () => props?.text },
+          );
+        },
+      });
+
+      // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
+      // vxeUI.formats.add
+    },
+    useVbenForm,
+  });
+}
+
+export { useVbenVxeGrid };
+
 export type * from '@vben/plugins/vxe-table';

docs/src/_env/node/adapter/form.ts

@@ -0,0 +1,4 @@
+export const useVbenForm = () => {};
+export const z = {};
+export type VbenFormSchema = any;
+export type VbenFormProps = any;

docs/src/_env/node/adapter/vxe-table.ts

@@ -0,0 +1,3 @@
+export type * from '@vben/plugins/vxe-table';
+
+export const useVbenVxeGrid = () => {};

docs/src/components/common-ui/vben-vxe-table.md

@@ -16,12 +16,84 @@ outline: deep
 
 :::
 
-::: tip README
+## 适配器
+
+表格底层使用 [vxe-table](https://vxetable.cn/#/start/install) 进行实现，所以你可以使用 `vxe-table` 的所有功能。对于不同的 UI 框架，我们提供了适配器，以便更好的适配不同的 UI 框架。
+
+### 适配器说明
+
+每个应用都可以自己配置`vxe-table`的适配器，你可以根据自己的需求。下面是一个简单的配置示例：
+
+::: details vxe-table 表格适配器
+
+```ts
+import { h } from 'vue';
+
+import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+
+import { Button, Image } from 'ant-design-vue';
+
+import { useVbenForm } from './form';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    vxeUI.setConfig({
+      grid: {
+        align: 'center',
+        border: false,
+        columnConfig: {
+          resizable: true,
+        },
+        minHeight: 180,
+        formConfig: {
+          // 全局禁用vxe-table的表单配置，使用formOptions
+          enabled: false,
+        },
+        proxyConfig: {
+          autoLoad: true,
+          response: {
+            result: 'items',
+            total: 'total',
+            list: 'items',
+          },
+          showActiveMsg: true,
+          showResponseMsg: false,
+        },
+        round: true,
+        showOverflow: true,
+        size: 'small',
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellImage' },
+    vxeUI.renderer.add('CellImage', {
+      renderTableDefault(_renderOpts, params) {
+        const { column, row } = params;
+        return h(Image, { src: row[column.field] });
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellLink' },
+    vxeUI.renderer.add('CellLink', {
+      renderTableDefault(renderOpts) {
+        const { props } = renderOpts;
+        return h(
+          Button,
+          { size: 'small', type: 'link' },
+          { default: () => props?.text },
+        );
+      },
+    });
+
+    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
+    // vxeUI.formats.add
+  },
+  useVbenForm,
+});
 
-下方示例代码中, 出现的 `inject<UseVbenVxeGrid>` 是为了适配文档内的示例，实际使用时直接从 `'@vben/plugins/vxe-table'` 引入即可。
+export { useVbenVxeGrid };
 
-```typescript
-import { useVbenVxeGrid } from '@vben/plugins/vxe-table';
+export type * from '@vben/plugins/vxe-table';
 ```
 
 :::
@@ -114,3 +186,55 @@ vxeUI.renderer.add('CellLink', {
 > 参考 [vxe-table 官方文档 - 虚拟滚动](https://vxetable.cn/v4/#/component/grid/scroll/vertical)。
 
 <DemoPreview dir="demos/vben-vxe-table/virtual" />
+
+## API
+
+`useVbenVxeGrid` 返回一个数组，第一个元素是表格组件，第二个元素是表格的方法。
+
+```vue
+<script setup lang="ts">
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+// Grid 为表格组件
+// gridApi 为表格的方法
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {},
+  formOptions: {},
+  gridEvents: {},
+  // 属性
+  // 事件
+});
+</script>
+
+<template>
+  <Grid />
+</template>
+```
+
+### GridApi
+
+useVbenVxeGrid 返回的第二个参数，是一个对象，包含了一些表单的方法。
+
+| 方法名 | 描述 | 类型 |
+| --- | --- | --- |
+| setLoading | 设置loading状态 | `(loading)=>void` |
+| setGridOptions | 设置vxe-table grid组件参数 | `(options: Partial<VxeGridProps['gridOptions'])=>void` |
+| reload | 重载表格，会进行初始化 | `(params:any)=>void` |
+| query | 重载表格，会保留当前分页 | `(params:any)=>void` |
+| grid | vxe-table grid实例 | `VxeGridInstance` |
+| formApi | vbenForm api实例 | `FormApi` |
+
+### Props
+
+## Props
+
+所有属性都可以传入 `useVbenVxeGrid` 的第一个参数中。
+
+| 属性名         | 描述               | 类型                |
+| -------------- | ------------------ | ------------------- |
+| tableTitle     | 表格标题           | `string`            |
+| tableTitleHelp | 表格标题帮助信息   | `string`            |
+| gridClass      | grid组件的class    | `string`            |
+| gridOptions    | grid组件的参数     | `VxeTableGridProps` |
+| gridEvents     | grid组件的触发的⌚️ | `VxeGridListeners`  |
+| formOptions    | 表单参数           | `VbenFormProps`     |

docs/src/demos/vben-vxe-table/basic/index.vue

@@ -1,14 +1,10 @@
 <script lang="ts" setup>
-import type {
-  UseVbenVxeGrid,
-  VxeGridListeners,
-  VxeGridProps,
-} from '#/adapter/vxe-table';
-
-import { inject } from 'vue';
+import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
 
 import { Button, message } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 import { MOCK_TABLE_DATA } from '../table-data';
 
 interface RowType {
@@ -20,10 +16,6 @@ interface RowType {
   role: string;
 }
 
-const useVbenVxeGrid = inject<UseVbenVxeGrid>(
-  'useVbenVxeGrid',
-) as UseVbenVxeGrid;
-
 const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { title: '序号', type: 'seq', width: 50 },

docs/src/demos/vben-vxe-table/custom-cell/index.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
-
-import { inject } from 'vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { Button, Image, Switch, Tag } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 import { getExampleTableApi } from '../mock-api';
 
 interface RowType {
@@ -19,10 +19,6 @@ interface RowType {
   status: 'error' | 'success' | 'warning';
 }
 
-const useVbenVxeGrid = inject<UseVbenVxeGrid>(
-  'useVbenVxeGrid',
-) as UseVbenVxeGrid;
-
 const gridOptions: VxeGridProps<RowType> = {
   checkboxConfig: {
     highlight: true,

docs/src/demos/vben-vxe-table/edit-cell/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { inject } from 'vue';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
 import { getExampleTableApi } from '../mock-api';
 
@@ -14,10 +14,6 @@ interface RowType {
   releaseDate: string;
 }
 
-const useVbenVxeGrid = inject<UseVbenVxeGrid>(
-  'useVbenVxeGrid',
-) as UseVbenVxeGrid;
-
 const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { title: '序号', type: 'seq', width: 50 },

docs/src/demos/vben-vxe-table/edit-row/index.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
-
-import { inject } from 'vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { Button, message } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 import { getExampleTableApi } from '../mock-api';
 
 interface RowType {
@@ -16,10 +16,6 @@ interface RowType {
   releaseDate: string;
 }
 
-const useVbenVxeGrid = inject<UseVbenVxeGrid>(
-  'useVbenVxeGrid',
-) as UseVbenVxeGrid;
-
 const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { title: '序号', type: 'seq', width: 50 },

docs/src/demos/vben-vxe-table/fixed/index.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
-
-import { inject } from 'vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { Button } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 import { getExampleTableApi } from '../mock-api';
 
 interface RowType {
@@ -16,10 +16,6 @@ interface RowType {
   releaseDate: string;
 }
 
-const useVbenVxeGrid = inject<UseVbenVxeGrid>(
-  'useVbenVxeGrid',
-) as UseVbenVxeGrid;
-
 const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { fixed: 'left', title: '序号', type: 'seq', width: 50 },

docs/src/demos/vben-vxe-table/form/index.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import type { VbenFormProps } from '#/adapter/form';
-import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
-
-import { inject } from 'vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { message } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 import { getExampleTableApi } from '../mock-api';
 
 interface RowType {
@@ -17,10 +17,6 @@ interface RowType {
   releaseDate: string;
 }
 
-const useVbenVxeGrid = inject<UseVbenVxeGrid>(
-  'useVbenVxeGrid',
-) as UseVbenVxeGrid;
-
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,

docs/src/demos/vben-vxe-table/remote/index.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
+import type { DemoTableApi } from '../mock-api';
 
-import { inject } from 'vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { Button } from 'ant-design-vue';
 
-import { type DemoTableApi } from '../mock-api';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 import { MOCK_API_DATA } from '../table-data';
 
 interface RowType {
@@ -17,10 +18,6 @@ interface RowType {
   releaseDate: string;
 }
 
-const useVbenVxeGrid = inject<UseVbenVxeGrid>(
-  'useVbenVxeGrid',
-) as UseVbenVxeGrid;
-
 // 数据实例
 // const MOCK_TREE_TABLE_DATA = [
 //   {

docs/src/demos/vben-vxe-table/tree/index.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
-
-import { inject } from 'vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { Button } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 import { MOCK_TREE_TABLE_DATA } from '../table-data';
 
 interface RowType {
@@ -16,10 +16,6 @@ interface RowType {
   type: string;
 }
 
-const useVbenVxeGrid = inject<UseVbenVxeGrid>(
-  'useVbenVxeGrid',
-) as UseVbenVxeGrid;
-
 // 数据实例
 // const MOCK_TREE_TABLE_DATA = [
 //   {

docs/src/demos/vben-vxe-table/virtual/index.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import type { UseVbenVxeGrid, VxeGridProps } from '#/adapter/vxe-table';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { inject, onMounted } from 'vue';
+import { onMounted } from 'vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
 interface RowType {
   id: number;
@@ -10,10 +12,6 @@ interface RowType {
   sex: string;
 }
 
-const useVbenVxeGrid = inject<UseVbenVxeGrid>(
-  'useVbenVxeGrid',
-) as UseVbenVxeGrid;
-
 const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { type: 'seq', width: 70 },

docs/src/guide/essentials/settings.md

@@ -164,6 +164,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
 /**
  * @description 项目配置文件
  * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ * !!! 更改配置后请清空缓存，否则可能不生效
  */
 export const overridesPreferences = defineOverridesPreferences({
   // overrides
@@ -536,5 +537,4 @@ interface Preferences {
 
 - `overridesPreferences`方法只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置。
 - 任何配置项都可以覆盖，只需要在`overridesPreferences`方法内覆盖即可，不要修改默认配置文件。
-
-:::
+- 更改配置后请清空缓存，否则可能不生效。:::

docs/src/guide/introduction/quick-start.md

@@ -66,7 +66,9 @@ pnpm install
 
 ::: tip 注意
 
-项目只支持使用 `pnpm` 进行依赖安装，默认会使用 `corepack` 来安装指定版本的 `pnpm`。:
+- 项目只支持使用 `pnpm` 进行依赖安装，默认会使用 `corepack` 来安装指定版本的 `pnpm`。:
+- 如果你的网络环境无法访问npm源，你可以设置系统的环境变量`COREPACK_REGISTRY=https://registry.npmmirror.com`，然后再执行`pnpm install`。
+- 如果你不想使用`corepack`，你需要禁用`corepack`，然后使用你自己的`pnpm`进行安装。
 
 :::
 

internal/vite-config/src/plugins/index.ts

@@ -243,4 +243,5 @@ export {
   viteDtsPlugin,
   viteHtmlPlugin,
   viteVisualizerPlugin,
+  viteVxeTableImportsPlugin,
 };

internal/vite-config/src/plugins/vxe-table.ts

@@ -4,6 +4,35 @@ import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import';
 
 async function viteVxeTableImportsPlugin(): Promise<PluginOption> {
   return [
+    // {
+    //   config() {
+    //     return {
+    //       optimizeDeps: {
+    //         include: [
+    //           'vxe-pc-ui/es/vxe-button/index.js',
+    //           'vxe-pc-ui/es/vxe-checkbox/index.js',
+    //           'vxe-pc-ui/es/vxe-icon/index.js',
+    //           'vxe-pc-ui/es/vxe-input/index.js',
+    //           'vxe-pc-ui/es/vxe-loading/index.js',
+    //           'vxe-pc-ui/es/vxe-modal/index.js',
+    //           'vxe-pc-ui/es/vxe-pager/index.js',
+    //           'vxe-pc-ui/es/vxe-radio-group/index.js',
+    //           'vxe-pc-ui/es/vxe-select/index.js',
+    //           'vxe-pc-ui/es/vxe-tooltip/index.js',
+    //           'vxe-pc-ui/es/vxe-ui/index.js',
+    //           'vxe-pc-ui/es/vxe-upload/index.js',
+    //           'vxe-table/es/vxe-colgroup/index.js',
+    //           'vxe-table/es/vxe-column/index.js',
+    //           'vxe-table/es/vxe-grid/index.js',
+    //           'vxe-table/es/vxe-table/index.js',
+    //           'vxe-table/es/vxe-toolbar/index.js',
+    //           'vxe-table/es/vxe-ui/index.js',
+    //         ],
+    //       },
+    //     };
+    //   },
+    //   name: 'vxe-table-adapter',
+    // },
     lazyImport({
       resolvers: [
         VxeResolver({

package.json

@@ -97,7 +97,7 @@
   },
   "engines": {
     "node": ">=20.10.0",
-    "pnpm": ">=9.5.0"
+    "pnpm": ">=9.12.0"
   },
   "packageManager": "pnpm@9.12.3",
   "pnpm": {

packages/effects/plugins/src/vxe-table/index.ts

@@ -2,6 +2,4 @@ export { setupVbenVxeTable } from './init';
 export * from './use-vxe-grid';
 export { default as VbenVxeGrid } from './use-vxe-grid.vue';
 
-export * from 'vxe-pc-ui/styles/all.scss';
 export type { VxeGridListeners, VxeGridProps } from 'vxe-table';
-export * from 'vxe-table/styles/all.scss';

packages/effects/plugins/src/vxe-table/theme.css

@@ -1,4 +1,4 @@
-:root {
+:root .vxe-grid {
   --vxe-ui-font-color: hsl(var(--foreground));
   --vxe-ui-font-primary-color: hsl(var(--primary));
 
@@ -14,7 +14,7 @@
 
   /* layout */
   --vxe-ui-layout-background-color: hsl(var(--background));
-  --vxe-ui-table-resizable-line-color: hsl(var(--border));
+  --vxe-ui-table-resizable-line-color: hsl(var(--heavy));
 
   /* --vxe-ui-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px hsl(var(--accent));
   --vxe-ui-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px hsl(var(--accent)); */
@@ -66,15 +66,13 @@
     box-shadow: 0 0 0 1px hsl(var(--border));
   }
 
-  .vxe-pager {
-    &--wrapper {
-      display: flex;
-      align-items: center;
-    }
+  .vxe-pager--wrapper {
+    display: flex;
+    align-items: center;
+  }
 
-    &--sizes {
-      margin-right: auto;
-    }
+  .vxe-pager--sizes {
+    margin-right: auto;
   }
 }
 

playground/src/preferences.ts

@@ -3,6 +3,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
 /**
  * @description 项目配置文件
  * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ * !!! 更改配置后请清空缓存，否则可能不生效
  */
 export const overridesPreferences = defineOverridesPreferences({
   // overrides

pnpm-workspace.yaml

@@ -23,7 +23,7 @@ catalog:
   '@ctrl/tinycolor': ^4.1.0
   '@eslint/js': ^9.14.0
   '@faker-js/faker': ^9.2.0
-  '@iconify/json': ^2.2.267
+  '@iconify/json': ^2.2.268
   '@iconify/tailwind': ^1.1.3
   '@iconify/vue': ^4.1.2
   '@intlify/core-base': ^10.0.4
@@ -44,13 +44,13 @@ catalog:
   '@types/jsonwebtoken': ^9.0.7
   '@types/lodash.clonedeep': ^4.5.9
   '@types/lodash.get': ^4.4.9
-  '@types/node': ^22.8.7
+  '@types/node': ^22.9.0
   '@types/nprogress': ^0.2.3
   '@types/postcss-import': ^14.0.3
   '@types/qrcode': ^1.5.5
   '@types/sortablejs': ^1.15.8
-  '@typescript-eslint/eslint-plugin': ^8.12.2
-  '@typescript-eslint/parser': ^8.12.2
+  '@typescript-eslint/eslint-plugin': ^8.13.0
+  '@typescript-eslint/parser': ^8.13.0
   '@vee-validate/zod': ^4.14.6
   '@vite-pwa/vitepress': ^0.5.3
   '@vitejs/plugin-vue': ^5.1.4
@@ -71,7 +71,7 @@ catalog:
   circular-dependency-scanner: ^2.3.0
   class-variance-authority: ^0.7.0
   clsx: ^2.1.1
-  commitlint-plugin-function-rules: ^4.0.0
+  commitlint-plugin-function-rules: ^4.0.1
   consola: ^3.2.3
   cross-env: ^7.0.3
   cspell: ^8.15.7
@@ -105,7 +105,7 @@ catalog:
   get-port: ^7.1.0
   globals: ^15.12.0
   h3: ^1.13.0
-  happy-dom: ^15.8.3
+  happy-dom: ^15.10.1
   html-minifier-terser: ^7.2.0
   husky: ^9.1.6
   is-ci: ^3.0.1
@@ -117,7 +117,7 @@ catalog:
   lucide-vue-next: ^0.454.0
   medium-zoom: ^1.1.0
   naive-ui: ^2.40.1
-  nitropack: ^2.10.2
+  nitropack: ^2.10.3
   nprogress: ^0.2.0
   ora: ^8.1.1
   pinia: 2.2.2
@@ -139,7 +139,7 @@ catalog:
   rimraf: ^6.0.1
   rollup: ^4.24.4
   rollup-plugin-visualizer: ^5.12.0
-  sass: 1.79.5
+  sass: 1.80.6
   sortablejs: ^1.15.3
   stylelint: ^16.10.0
   stylelint-config-recess-order: ^5.1.1
@@ -165,8 +165,8 @@ catalog:
   vite-plugin-html: ^3.2.2
   vite-plugin-lazy-import: ^1.0.7
   vite-plugin-pwa: ^0.20.5
-  vite-plugin-vue-devtools: ^7.6.2
-  vitepress: ^1.4.5
+  vite-plugin-vue-devtools: ^7.6.3
+  vitepress: ^1.5.0
   vitepress-plugin-group-icons: ^1.3.0
   vitest: ^2.1.4
   vue: ^3.5.12
@@ -174,8 +174,8 @@ catalog:
   vue-i18n: ^10.0.4
   vue-router: ^4.4.5
   vue-tsc: ^2.1.10
-  vxe-pc-ui: ^4.2.40
-  vxe-table: ^4.8.0
+  vxe-pc-ui: ^4.2.42
+  vxe-table: ^4.8.1
   watermark-js-plus: ^1.5.7
   zod: ^3.23.8
   zod-defaults: ^0.1.3