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

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

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();
   },