feat: 添加虚拟表格示例 (#1007)

* feat: 添加虚拟表格示例

build/optimize.ts

@@ -16,6 +16,7 @@ const include = [
   "qrcode",
   "intro.js",
   "vue-i18n",
+  "vxe-table",
   "vue-types",
   "js-cookie",
   "vue-tippy",

locales/en.yaml

@@ -26,6 +26,7 @@ menus:
   hshome: Home
   hslogin: Login
   hsempty: Empty Page
+  hstable: Table
   hssysManagement: System Manage
   hsUser: User Manage
   hsRole: Role Manage
@@ -131,6 +132,7 @@ menus:
   hsPureTableBase: Base Usage
   hsPureTableHigh: High Usage
   hsPureTableEdit: Edit Usage
+  hsVxeTable: Virtual Usage
   hsboard: Paint Board
   hsMenuoverflow: Menu Overflow Show Tooltip Text
   hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text

locales/zh-CN.yaml

@@ -26,6 +26,7 @@ menus:
   hshome: 首页
   hslogin: 登录
   hsempty: 无Layout页
+  hstable: 表格
   hssysManagement: 系统管理
   hsUser: 用户管理
   hsRole: 角色管理
@@ -131,6 +132,7 @@ menus:
   hsPureTableBase: 基础用法
   hsPureTableHigh: 高级用法
   hsPureTableEdit: 可编辑用法
+  hsVxeTable: 虚拟滚动
   hsboard: 艺术画板
   hsMenuoverflow: 目录超出显示 Tooltip 文字提示
   hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示

package.json

@@ -101,6 +101,7 @@
     "vue-waterfall-plugin-next": "^2.4.3",
     "vue3-danmaku": "^1.6.0",
     "vuedraggable": "^4.1.0",
+    "vxe-table": "^4.5.21",
     "wavesurfer.js": "^7.7.5",
     "xgplayer": "^3.0.14",
     "xlsx": "^0.18.5"

pnpm-lock.yaml

@@ -164,6 +164,9 @@ dependencies:
   vuedraggable:
     specifier: ^4.1.0
     version: 4.1.0(vue@3.4.21)
+  vxe-table:
+    specifier: ^4.5.21
+    version: 4.5.21(vue@3.4.21)(xe-utils@3.5.22)
   wavesurfer.js:
     specifier: ^7.7.5
     version: 7.7.5
@@ -4141,6 +4144,10 @@ packages:
       entities: 4.5.0
     dev: true
 
+  /dom-zindex@1.0.1:
+    resolution: {integrity: sha512-M/MERVDZ8hguvjl6MAlLWSLYLS7PzEyXaTb5gEeJ+SF+e9iUC0sdvlzqe91MMDHBoy+nqw7wKcUOrDSyvMCrRg==}
+    dev: false
+
   /dom7@3.0.0:
     resolution: {integrity: sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==}
     dependencies:
@@ -9224,6 +9231,17 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     dev: false
 
+  /vxe-table@4.5.21(vue@3.4.21)(xe-utils@3.5.22):
+    resolution: {integrity: sha512-yp+BNGCy61lk7ayf0LI3UNcR2fRmipGSiIAh3lNOIdyW1nAobf/GwIx3rXghjzFb0a6NNJeYxv2NM+gwXxtmww==}
+    peerDependencies:
+      vue: ^3.2.28
+      xe-utils: ^3.5.0
+    dependencies:
+      dom-zindex: 1.0.1
+      vue: 3.4.21(typescript@5.4.2)
+      xe-utils: 3.5.22
+    dev: false
+
   /w3c-hr-time@1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
     deprecated: Use your platform's native performance.now() and performance.timeOrigin.
@@ -9414,6 +9432,10 @@ packages:
         optional: true
     dev: false
 
+  /xe-utils@3.5.22:
+    resolution: {integrity: sha512-rhWuM2fVXsdrqUtyjRAsYTDLvVzYSSZqg/uCRyDqcw96AweB1AWsnTJZyl9g68ejnP0xhxfSoNBSrIcOeX1yxA==}
+    dev: false
+
   /xgplayer-subtitles@3.0.14(core-js@3.36.0):
     resolution: {integrity: sha512-w6H1h+g3kOI477kv2QBRMZe3M/1dHLXttHBwq4LwKTPGVQ19fLIDGwkfn+HeKwe1ocGDaaq96bS+l+BadnP9TA==}
     peerDependencies:

src/main.ts

@@ -6,6 +6,7 @@ import { getPlatformConfig } from "./config";
 import { MotionPlugin } from "@vueuse/motion";
 import { useEcharts } from "@/plugins/echarts";
 import { createApp, type Directive } from "vue";
+import { useVxeTable } from "@/plugins/vxeTable";
 import { useElementPlus } from "@/plugins/elementPlus";
 import { injectResponsiveStorage } from "@/utils/responsive";
 
@@ -61,6 +62,7 @@ getPlatformConfig(app).then(async config => {
     .use(useI18n)
     .use(useElementPlus)
     .use(Table)
+    .use(useVxeTable)
     .use(PureDescriptions)
     .use(useEcharts);
   app.mount("#app");

src/plugins/vxeTable.ts

@@ -0,0 +1,102 @@
+import "vxe-table/lib/style.css";
+// import "xe-utils";
+// import XEUtils from "xe-utils";
+import type { App } from "vue";
+// import { i18n } from "@/plugins/i18n";
+// import zh from "vxe-table/lib/locale/lang/zh-CN";
+// import en from "vxe-table/lib/locale/lang/en-US";
+
+import {
+  // 全局对象
+  VXETable,
+  // 表格功能
+  // Filter,
+  // Edit,
+  // Menu,
+  // Export,
+  // Keyboard,
+  // Validator,
+  // 可选组件
+  Icon,
+  Column,
+  // Colgroup,
+  // Grid,
+  // Tooltip,
+  // Toolbar,
+  // Pager,
+  // Form,
+  // FormItem,
+  // FormGather,
+  // Checkbox,
+  // CheckboxGroup,
+  // Radio,
+  // RadioGroup,
+  // RadioButton,
+  // Switch,
+  // Input,
+  // Select,
+  // Optgroup,
+  // Option,
+  // Textarea,
+  // Button,
+  // Modal,
+  // List,
+  // Pulldown,
+  // 表格
+  Table
+} from "vxe-table";
+
+// 全局默认参数
+VXETable.config({
+  // i18n: (key, args) => {
+  //   return unref(i18n.global.locale) === "zh"
+  //     ? XEUtils.toFormatString(XEUtils.get(zh, key), args)
+  //     : XEUtils.toFormatString(XEUtils.get(en, key), args);
+  // },
+  // translate(key) {
+  //   const NAMESPACED = ["el.", "buttons."];
+  //   if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
+  //     return i18n.global.t.call(i18n.global.locale, key);
+  //   }
+  //   return key;
+  // }
+});
+
+export function useVxeTable(app: App) {
+  // 表格功能
+  // app.use(Filter)
+  // .use(Edit)
+  // .use(Menu)
+  // .use(Export)
+  // .use(Keyboard)
+  // .use(Validator)
+  // 可选组件
+  app
+    .use(Icon)
+    .use(Column)
+    // .use(Colgroup)
+    // .use(Grid)
+    // .use(Tooltip)
+    // .use(Toolbar)
+    // .use(Pager)
+    // .use(Form)
+    // .use(FormItem)
+    // .use(FormGather)
+    // .use(Checkbox)
+    // .use(CheckboxGroup)
+    // .use(Radio)
+    // .use(RadioGroup)
+    // .use(RadioButton)
+    // .use(Switch)
+    // .use(Input)
+    // .use(Select)
+    // .use(Optgroup)
+    // .use(Option)
+    // .use(Textarea)
+    // .use(Button)
+    // .use(Modal)
+    // .use(List)
+    // .use(Pulldown)
+    // 安装表格
+    .use(Table);
+}

src/router/modules/table.ts

@@ -2,38 +2,47 @@ import { $t } from "@/plugins/i18n";
 import { table } from "@/router/enums";
 
 export default {
-  path: "/pure-table",
+  path: "/table",
-  redirect: "/pure-table/index",
+  redirect: "/table/index",
   meta: {
     icon: "ri:table-line",
-    title: "pure-admin-table",
+    title: $t("menus.hstable"),
     rank: table
   },
   children: [
     {
-      path: "/pure-table/index",
+      path: "/table/index",
       name: "PureTable",
-      component: () => import("@/views/pure-table/index.vue"),
+      component: () => import("@/views/table/index.vue"),
       meta: {
         title: $t("menus.hsPureTableBase")
       }
     },
     {
-      path: "/pure-table/high",
+      path: "/table/high",
       name: "PureTableHigh",
-      component: () => import("@/views/pure-table/high.vue"),
+      component: () => import("@/views/table/high.vue"),
       meta: {
         title: $t("menus.hsPureTableHigh")
       }
     },
     {
-      path: "/pure-table/edit",
+      path: "/table/edit",
       name: "PureTableEdit",
-      component: () => import("@/views/pure-table/edit.vue"),
+      component: () => import("@/views/table/edit.vue"),
       meta: {
         title: $t("menus.hsPureTableEdit"),
         extraIcon: "IF-pure-iconfont-new svg"
       }
+    },
+    {
+      path: "/table/virtual",
+      name: "VxeTable",
+      component: () => import("@/views/table/virtual.vue"),
+      meta: {
+        title: $t("menus.hsVxeTable"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
     }
   ]
 } satisfies RouteConfigsTable;

src/style/dark.scss

@@ -14,6 +14,67 @@ html.dark {
   /* switch关闭状态下的color 需要时可取用 */
   --pure-switch-off-color: #ffffff3f;
 
+  /* vxe-table */
+  --vxe-form-background-color: #151515;
+  --vxe-toolbar-background-color: #151515;
+  --vxe-pager-background-color: #151515;
+  --vxe-button-default-background-color: color.adjust(#151515, $lightness: 15%);
+  --vxe-table-header-background-color: color.adjust(#151515, $lightness: 5%);
+  --vxe-font-color: color.adjust(#c9d1d9, $lightness: -12%);
+  --vxe-table-header-font-color: #c9d1d9;
+  --vxe-table-footer-font-color: #c9d1d9;
+  --vxe-table-body-background-color: #151515;
+  --vxe-table-footer-background-color: #151515;
+  --vxe-table-row-striped-background-color: #1e1e1e;
+  --vxe-table-border-color: #303030;
+  --vxe-table-row-hover-background-color: #1e1e1e;
+  --vxe-table-row-hover-striped-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: -10%
+  );
+  --vxe-table-row-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-row-hover-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-column-hover-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-column-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-row-checkbox-checked-background-color: fade(#1e1e1e, 15%);
+  --vxe-table-row-hover-checkbox-checked-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-menu-background-color: color.adjust(#303133, $lightness: 10%);
+  --vxe-table-filter-panel-background-color: color.adjust(
+    #151515,
+    $lightness: 5%
+  );
+  --vxe-grid-maximize-background-color: #151515;
+  --vxe-pager-perfect-background-color: #151515;
+  --vxe-pager-perfect-button-background-color: color.adjust(
+    #151515,
+    $lightness: 15%
+  );
+  --vxe-input-background-color: #151515;
+  --vxe-input-border-color: #303030;
+  --vxe-select-panel-background-color: #151515;
+  --vxe-table-popup-border-color: #303030;
+  --vxe-select-option-hover-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: 15%
+  );
+  --vxe-pulldown-panel-background-color: #151515;
+  --vxe-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px #43464c;
+  --vxe-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px #43464c;
+  --vxe-loading-background-color: rgb(0 0 0 / 50%);
+  --vxe-tooltip-dark-background-color: color.adjust(#303133, $lightness: 25%);
+  --vxe-modal-header-background-color: #1e1e1e;
+  --vxe-modal-body-background-color: #303133;
+  --vxe-modal-border-color: #303030;
+  --vxe-toolbar-panel-background-color: #151515;
+  --vxe-input-disabled-color: color.adjust(#1e1e1e, $lightness: 20%);
+  --vxe-input-disabled-background-color: color.adjust(#1e1e1e, $lightness: 25%);
+  --vxe-checkbox-icon-background-color: color.adjust(#1e1e1e, $lightness: 15%);
+  --vxe-checkbox-checked-icon-border-color: #303030;
+  --vxe-checkbox-indeterminate-icon-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: 15%
+  );
+
   .navbar,
   .tags-view,
   .contextmenu,

src/views/table/base/list.tsx

@@ -22,7 +22,7 @@ import NestProp from "./nestProp.vue";
 import ImgPreview from "./imgPreview.vue";
 
 const rendContent = (val: string) =>
-  `代码位置：src/views/pure-table/base/${val}.vue`;
+  `代码位置：src/views/table/base/${val}.vue`;
 
 export const list = [
   {

src/views/table/edit/list.tsx

@@ -3,7 +3,7 @@ import Demo2 from "./demo2/index.vue";
 import Demo3 from "./demo3/index.vue";
 
 const rendContent = (val: string) =>
-  `代码位置：src/views/pure-table/edit/${val}/index.vue`;
+  `代码位置：src/views/table/edit/${val}/index.vue`;
 
 export const list = [
   {

src/views/table/high/list.tsx

@@ -10,7 +10,7 @@ import Echarts from "./echarts/index.vue";
 import TableSelect from "./table-select/index.vue";
 
 const rendContent = (val: string) =>
-  `代码位置：src/views/pure-table/high/${val}/index.vue`;
+  `代码位置：src/views/table/high/${val}/index.vue`;
 
 export const list = [
   {

src/views/table/virtual.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./virtual/list";
+
+defineOptions({
+  name: "VxeTable"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          虚拟滚动采用
+          <el-link
+            href="https://vxetable.cn/#/table/scroll/scroll"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            vxe-table
+          </el-link>
+        </span>
+      </div>
+    </template>
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>

src/views/table/virtual/list.tsx

@@ -0,0 +1,20 @@
+import List from "./list.vue";
+import TreeList from "./treeList.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/table/virtual/${val}.vue`;
+
+export const list = [
+  {
+    key: "list",
+    content: rendContent("list"),
+    title: "虚拟列表",
+    component: List
+  },
+  {
+    key: "treeList",
+    content: rendContent("treeList"),
+    title: "虚拟树",
+    component: TreeList
+  }
+];

src/views/table/virtual/list.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const tableData = ref([]);
+
+setTimeout(() => {
+  // 模拟数据
+  const mockList = [];
+  for (let index = 0; index < 500; index++) {
+    mockList.push({
+      id: index,
+      name: "Test" + index,
+      role: "Developer",
+      sex: "男"
+    });
+  }
+  tableData.value = mockList;
+}, 100);
+</script>
+
+<template>
+  <vxe-table
+    border
+    show-overflow
+    height="500"
+    :row-config="{ isHover: true }"
+    :data="tableData"
+    :scroll-y="{ enabled: true }"
+  >
+    <vxe-column type="seq" title="序号" width="100" />
+    <vxe-column field="name" title="名称" sortable />
+    <vxe-column field="role" title="角色" />
+    <vxe-column field="sex" title="性别" />
+  </vxe-table>
+</template>

src/views/table/virtual/treeList.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import treeList from "./tree.json";
+
+const tableRef = ref();
+
+const loading = ref(false);
+const tableData = ref([]);
+
+const loadList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    tableData.value = treeList;
+    loading.value = false;
+  }, 200);
+};
+
+const expandAllEvent = () => {
+  const $table = tableRef.value;
+  if ($table) {
+    $table.setAllTreeExpand(true);
+  }
+};
+
+const claseExpandEvent = () => {
+  const $table = tableRef.value;
+  if ($table) {
+    $table.clearTreeExpand();
+  }
+};
+
+loadList();
+</script>
+
+<template>
+  <div>
+    <div class="mb-4">
+      <el-button @click="expandAllEvent">展开所有</el-button>
+      <el-button @click="claseExpandEvent">收起所有</el-button>
+    </div>
+
+    <vxe-table
+      ref="tableRef"
+      show-overflow
+      height="500"
+      :loading="loading"
+      :tree-config="{ transform: true }"
+      :scroll-y="{ enabled: true, gt: 20 }"
+      :data="tableData"
+    >
+      <vxe-column type="seq" title="序号" width="200" tree-node />
+      <vxe-column field="id" title="Id" />
+      <vxe-column field="name" title="地点" />
+    </vxe-table>
+  </div>
+</template>

src/views/vue-flow/layouting/index.vue

@@ -117,8 +117,6 @@ async function layoutGraph(direction) {
 </template>
 
 <style scoped>
-
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);