docs: add vxe-table doc (#4807)

* docs: init vxe-table demos

* style: fix vxe-table index.scss import error

* docs: fix vxe-table style & theme toggle problem

* docs: add rest demos

* docs: add vxe-table demo desc

* fix: add maximumFileSizeToCacheInBytes to fix build error

* fix: fix vxe-table set-theme build error

* docs: fix vitepress ssr render problem

* docs: add some tips for vitepress compatibility

docs/.vitepress/config/shared.mts

@@ -156,6 +156,7 @@ function pwa(): PwaOptions {
     registerType: 'autoUpdate',
     workbox: {
       globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
+      maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
     },
   };
 }

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

@@ -32,6 +32,21 @@ 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,7 +1,12 @@
 // 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';
@@ -15,11 +20,71 @@ import 'virtual:group-icons.css';
 import '@nolebase/vitepress-plugin-git-changelog/client/style.css';
 
 export default {
-  enhanceApp(ctx: EnhanceAppContext) {
+  async enhanceApp(ctx: EnhanceAppContext) {
     const { app } = ctx;
     app.component('VbenContributors', VbenContributors);
     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();
   },