From 7c5326b7d2deb493ff1e5cccb7075af7d86b664b Mon Sep 17 00:00:00 2001
From: hechang27-sprt <hechang27@outlook.com>
Date: Wed, 25 Mar 2026 18:08:03 +0800
Subject: [PATCH] feat: enhance list-table-v2 with timestamp support and
 matches styling with list-table-v1

- Add Vue JSX support via @vitejs/plugin-vue-jsx
- Configure tsconfig for Vue JSX (jsx: preserve, jsxImportSource: vue)
- Add TzDateTime component integration for timestamp columns
- Support flexible timestamp type: undefined | boolean | string | object
- Add rowHeight and estimatedRowHeight props
- Replace previous column attribute `code` with `key` and `dataKey` (`key` for slot/display, `dataKey` for data access)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 examples/view/base/table-v2.vue      |  14 +--
 package.json                         |   1 +
 packages/base/data/list-table-v2.vue | 138 ++++++++++++++++++++++-----
 tsconfig.json                        |   1 +
 vite.config.ts                       |   2 +
 5 files changed, 127 insertions(+), 29 deletions(-)

diff --git a/examples/view/base/table-v2.vue b/examples/view/base/table-v2.vue
index ccd09ae..023dfb5 100644
--- a/examples/view/base/table-v2.vue
+++ b/examples/view/base/table-v2.vue
@@ -60,29 +60,29 @@ const data = reactive({
 
 const columns = [
   {
-    code: "id",
+    key: "id",
     name: "ID",
   },
   {
-    code: "caseName",
+    key: "caseName",
     i18n: "table.props.0",
   },
   {
-    code: "taskName",
+    key: "taskName",
     i18n: "table.props.1",
   },
   {
-    code: "userId",
+    key: "userId",
     i18n: "table.props.2",
   },
   {
-    code: "content",
+    key: "content",
     i18n: "table.props.3",
   },
   {
-    code: "createTime",
+    key: "createTime",
     i18n: "table.props.4",
-    timestamp: true,
+    timestamp: 'unix',
   },
 ];
 
diff --git a/package.json b/package.json
index 87fe401..e7b8c22 100644
--- a/package.json
+++ b/package.json
@@ -108,6 +108,7 @@
     "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-legacy": "^7.2.1",
     "@vitejs/plugin-vue": "^6.0.3",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
     "@vue/cli-plugin-babel": "~5.0.9",
     "@vue/cli-plugin-router": "~5.0.9",
     "@vue/cli-plugin-typescript": "~5.0.9",
diff --git a/packages/base/data/list-table-v2.vue b/packages/base/data/list-table-v2.vue
index da5efd2..bb5cee1 100644
--- a/packages/base/data/list-table-v2.vue
+++ b/packages/base/data/list-table-v2.vue
@@ -9,8 +9,9 @@
             :data="pageData"
             :width="width"
             :height="resolvedHeight(height)"
-            :row-height="rowHeight"
-            :header-height="headerHeight"
+            :row-height="prop.rowHeight"
+            :header-height="rowHeight"
+            :estimated-row-height="prop.estimatedRowHeight"
             :border="border"
             :row-key="rowKey"
             :class="border ? 'has-border' : ''"
@@ -36,12 +37,13 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="tsx" setup>
 import { useStore } from "vuex";
 import { ref, computed, watch, h, onMounted, onUpdated, useSlots, renderSlot } from "vue";
 import { useI18n } from "vue3-i18n";
 import { ElAutoResizer, ElTableV2 } from "element-plus";
 import * as lodash from "lodash-es";
+import TzDateTime from "../item/tzDateTime.vue";
 
 const slots = useSlots();
 
@@ -49,12 +51,39 @@ const { t } = useI18n();
 const { state } = useStore();
 const table = ref();
 
-// el-table-v2 uses fixed row heights for virtual scrolling by default
-const ROW_HEIGHT = 50;
-const HEADER_HEIGHT = 50;
+type TimestampValue =
+  | undefined
+  | boolean
+  | string
+  | {
+      valueFormat?: string;
+      valueTz?: string;
+      displayFormat?: string;
+      locale?: string;
+      type?: "iso8601" | "unix" | "unixMillis";
+    };
+
+interface TzDateTimeProps {
+  value: string | number;
+  valueFormat?: string;
+  valueTz?: string;
+  displayFormat?: string;
+  locale?: string;
+  type?: "iso8601" | "unix" | "unixMillis";
+  slot?: boolean;
+}
+
+interface TzDateTimeConfig {
+  valueFormat?: string;
+  valueTz?: string;
+  displayFormat?: string;
+  locale?: string;
+  type?: "iso8601" | "unix" | "unixMillis";
+}
 
 interface TableColumn {
-  code: string;
+  key: string;
+  dataKey?: string;
   name?: string;
   i18n?: string;
   type?: string;
@@ -64,7 +93,7 @@ interface TableColumn {
   align?: "left" | "center" | "right";
   slot?: boolean;
   dict?: string;
-  timestamp?: boolean;
+  timestamp?: TimestampValue;
   filesize?: boolean;
 
   [others: string]: any;
@@ -82,6 +111,9 @@ interface Props {
   treeProps?: any;
   lazy?: boolean;
   border?: boolean;
+  timestampFormat?: string;
+  rowHeight?: number;
+  estimatedRowHeight?: number;
 }
 
 const prop = withDefaults(defineProps<Props>(), {
@@ -96,13 +128,13 @@ const prop = withDefaults(defineProps<Props>(), {
   treeProps: undefined,
   lazy: false,
   border: false,
+  timestampFormat: "YYYY-MM-DD HH:mm:ss",
+  rowHeight: 30,
+  estimatedRowHeight: undefined,
 });
 
 const emit = defineEmits(["query", "selection-change", "row-click", "cell-click"]);
 
-const rowHeight = ROW_HEIGHT;
-const headerHeight = HEADER_HEIGHT;
-
 const containerStyle = computed(() => {
   const style: Record<string, string> = {};
   if (prop.height !== undefined) {
@@ -169,6 +201,26 @@ const formatFileSize = (value: any) => {
   return g.toFixed(2) + "G";
 };
 
+// Helper to resolve timestamp column config to TzDateTime props
+const resolveTimestampProps = (ts: TimestampValue): TzDateTimeConfig | null => {
+  if (!ts) return null;
+  if (ts === true) return { type: "unixMillis", displayFormat: prop.timestampFormat };
+  if (typeof ts === "string") {
+    // If it's 'unix', 'iso8601', or 'unixMillis' treat as type
+    if (["unix", "iso8601", "unixMillis"].includes(ts)) {
+      return { type: ts as TzDateTimeConfig["type"], displayFormat: prop.timestampFormat };
+    }
+    // Otherwise treat as valueFormat
+    return { valueFormat: ts, displayFormat: prop.timestampFormat };
+  }
+  // For object config, apply default displayFormat if not specified
+  const config = ts as TzDateTimeConfig;
+  if (!config.displayFormat) {
+    config.displayFormat = prop.timestampFormat;
+  }
+  return config;
+};
+
 const formatterByDist = (dictKey: string, value: any) => {
   if (!dictKey) {
     return getValue(value);
@@ -184,7 +236,7 @@ const formatCellValue = (value: any, item: TableColumn, row: any) => {
   if (item.dict) return formatterByDist(item.dict, value);
   if (item.timestamp) return formatStamp(value);
   if (item.filesize) return formatFileSize(value);
-  if (row.scheme) return formatterByDist(row.scheme + "_" + item.code, value);
+  if (row.scheme) return formatterByDist(row.scheme + "_" + (item.dataKey || item.key), value);
   return getValue(value);
 };
 
@@ -198,7 +250,14 @@ const handleCurrentChange = (val: number) => {
   emit("query");
 };
 
-const onScroll = ({ scrollTop }: { scrollTop: number; scrollLeft?: number; horizontal?: boolean; vertical?: boolean }) => {
+const onScroll = ({
+  scrollTop,
+}: {
+  scrollTop: number;
+  scrollLeft?: number;
+  horizontal?: boolean;
+  vertical?: boolean;
+}) => {
   // Can be used for lazy loading or other scroll-based features
 };
 
@@ -214,9 +273,9 @@ const onCellClick = ({ row, column }: { row: any; column: any }) => {
 const tableColumns = computed(() => {
   return prop.columns.map((item: TableColumn) => {
     const col: any = {
-      key: item.code,
-      title: item.name || (item.i18n ? t(item.i18n) : item.code),
-      dataKey: item.code,
+      key: item.key,
+      title: item.name || (item.i18n ? t(item.i18n) : item.key),
+      dataKey: item.dataKey || item.key,
       align: item.align || "center",
       fixed: item.fixed,
     };
@@ -234,25 +293,43 @@ const tableColumns = computed(() => {
       col.minWidth = typeof item.minWidth === "number" ? item.minWidth : parseInt(String(item.minWidth)) || 120;
     }
 
-    // Cell renderer - el-table-v2 uses cellRenderer function, converts parent slots
+    // Cell renderer - el-table-v2 uses cellRenderer function
     col.cellRenderer = ({ cellData, rowData }: { cellData: any; rowData: any }) => {
-      const slotName = item.code;
+      const slotName = item.key;
 
       // If column has slot=true, render the parent's slot content
       if (item.slot && slots[slotName]) {
         return renderSlot(slots, slotName, { row: rowData });
       }
 
-      const value = lodash.get(rowData, item.code);
+      const value = lodash.get(rowData, item.dataKey || item.key);
+
+      // Handle timestamp display using TzDateTime component
+      if (item.timestamp) {
+        const tzProps = resolveTimestampProps(item.timestamp);
+        if (tzProps) {
+          const { valueFormat, valueTz, displayFormat, locale, type } = tzProps;
+          return (
+            <TzDateTime
+              value={value}
+              valueFormat={valueFormat}
+              valueTz={valueTz}
+              displayFormat={displayFormat}
+              locale={locale}
+              type={type}
+            />
+          );
+        }
+      }
 
       // Handle dict display
       if (item.dict) {
-        return h("span", {}, formatterByDist(item.dict, value));
+        return <span>{formatterByDist(item.dict, value)}</span>;
       }
 
       // Handle formatting
       const formatted = formatCellValue(value, item, rowData);
-      return h("span", {}, formatted);
+      return <span>{formatted}</span>;
     };
 
     return col;
@@ -288,6 +365,9 @@ const tableColumns = computed(() => {
   --el-table-current-row-bg-color: v-bind("state.style.tableCurBg");
   --el-table-header-bg-color: v-bind("state.style.tableHeadBg");
   --el-bg-color: v-bind("state.style.tableBg") !important;
+
+  // Border - el-table-v2 uses --el-table-border
+  --el-table-border: 1px solid var(--el-table-border-color);
 }
 
 .my-table :deep(.el-table-v2__row) {
@@ -298,8 +378,22 @@ const tableColumns = computed(() => {
   background: v-bind("state.style.tableCurBg") !important;
 }
 
-.my-table :deep(.el-table-v2__cell) {
+.my-table :deep(.el-table-v2__header-cell) {
   padding: v-bind("state.size.tablePad");
+  border-right: var(--el-table-border);
+  color: v-bind("state.style.tableColor");
+}
+
+.my-table :deep(.el-table-v2__row-cell) {
+  padding: v-bind("state.size.tablePad");
+  border-right: var(--el-table-border);
+  color: v-bind("state.style.tableColor");
+}
+
+// Child row background for tree data
+.my-table :deep(.el-table-v2__row[data-level="1"]),
+.my-table :deep(.el-table-v2__row[data-level="3"]) {
+  background: v-bind("state.style.tableChildBg") !important;
 }
 
 .my-pagination {
diff --git a/tsconfig.json b/tsconfig.json
index d8ff62b..5f2d19a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,7 @@
     "module": "esnext",
     "strict": true,
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "moduleResolution": "bundler",
     "experimentalDecorators": true,
     "skipLibCheck": true,
diff --git a/vite.config.ts b/vite.config.ts
index bb9efea..226598b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,6 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
 import legacy from "@vitejs/plugin-legacy";
 import dts from "vite-plugin-dts";
 import VueDevTools from "vite-plugin-vue-devtools";
@@ -15,6 +16,7 @@ export default defineConfig(({ command, mode }) => {
     },
     plugins: [
       vue(),
+      vueJsx(),
       // Vue DevTools for debugging (only in non-lib builds)
       !isLibBuild && VueDevTools(),
       // Only use legacy plugin for app builds, not library builds