From 854a8f68723e4d633a0716344db94c3e32f2a8ee Mon Sep 17 00:00:00 2001
From: hechang27-sprt <hechang27@outlook.com>
Date: Thu, 26 Mar 2026 16:01:09 +0800
Subject: [PATCH] fix: render mini table cells faithfully with same components
 as real table

- MiniCellRenderer now mirrors the real cellRenderer logic (slots, TzDateTime, dicts)
- Removed useless hard-coded nth-child flex selectors
- Each mini-cell now uses inline styles via getMiniCellStyle() to match real column widths
- Update DEV_MODE_TS timestamp

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/base/data/list-table-v2.vue | 81 +++++++++++++++++++++-------
 packages/manage/router/index.vue     |  2 +-
 2 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/packages/base/data/list-table-v2.vue b/packages/base/data/list-table-v2.vue
index d33caac..d29b37e 100644
--- a/packages/base/data/list-table-v2.vue
+++ b/packages/base/data/list-table-v2.vue
@@ -1,13 +1,17 @@
 <template>
   <div class="list-table-v2" :style="containerStyle">
     <!-- Mini hidden table for measuring row height (only when using dynamic height mode) -->
+    <!-- This mirrors the real table's cell rendering for accurate height estimation -->
     <div v-if="shouldUseProbeRow" ref="miniTableRef" class="mini-table" aria-hidden="true">
       <div v-if="miniTableData.length > 0" class="mini-table-inner">
-        <div v-for="(row, idx) in miniTableData" :key="idx" class="mini-row">
-          <div v-for="item in prop.columns || []" :key="item.key" class="mini-cell">
-            <span class="mini-cell-content">
-              {{ getProbeCellText(row, item) }}
-            </span>
+        <div v-for="(row, rowIdx) in miniTableData" :key="rowIdx" class="mini-row">
+          <div
+            v-for="item in prop.columns || []"
+            :key="item.key"
+            class="mini-cell"
+            :style="getMiniCellStyle(item)"
+          >
+            <MiniCellRenderer :item="item" :row="row" :slots="slots" />
           </div>
         </div>
       </div>
@@ -448,6 +452,56 @@ const tableColumns = computed(() => {
     return col;
   });
 });
+
+// Mini cell renderer - mirrors the real table's cellRenderer for faithful height estimation
+const MiniCellRenderer = (props: { item: TableColumn; row: any; slots: ReturnType<typeof useSlots> }) => {
+  const { item, row, slots } = props;
+  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 });
+  }
+
+  const value = lodash.get(row, 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 <span>{formatterByDist(item.dict, value)}</span>;
+  }
+
+  // Handle formatting
+  const formatted = formatCellValue(value, item, row);
+  return <span>{formatted}</span>;
+};
+
+// Get mini cell style - mirrors the real table's column width/flex distribution
+const getMiniCellStyle = (item: TableColumn): Record<string, string> => {
+  if (item.width !== undefined) {
+    const w = typeof item.width === "number" ? item.width : parseInt(String(item.width)) || 120;
+    return { width: `${w}px`, flex: "none" };
+  }
+  // Use flex: 1 to auto-expand columns to fill available width (same as flexGrow: 1)
+  return { flex: "1", minWidth: "120px" };
+};
 </script>
 
 <style lang="scss" scoped>
@@ -466,8 +520,7 @@ const tableColumns = computed(() => {
   pointer-events: none;
   left: -9999px;
   top: 0;
-  width: 100%; // Width responds to parent container
-  max-width: 100%;
+  width: 100%;
 }
 
 .mini-table-inner {
@@ -485,28 +538,16 @@ const tableColumns = computed(() => {
   background: v-bind("state.style.tableBg");
   color: v-bind("state.style.tableColor");
   box-sizing: border-box;
+  overflow: hidden;
 }
 
 .mini-cell {
-  flex: 1;
-  min-width: 120px;
-  padding-right: 8px;
   box-sizing: border-box;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-// Flex grow columns match the real table's flex distribution
-.mini-cell:nth-child(1) { flex: 1; min-width: 120px; }
-.mini-cell:nth-child(2) { flex: 1; min-width: 120px; }
-.mini-cell:nth-child(3) { flex: 1; min-width: 120px; }
-.mini-cell:nth-child(4) { flex: 1; min-width: 120px; }
-.mini-cell:nth-child(5) { flex: 1; min-width: 120px; }
-.mini-cell:nth-child(6) { flex: 1; min-width: 120px; }
-.mini-cell:nth-child(7) { flex: 1; min-width: 120px; }
-.mini-cell:nth-child(8) { flex: 1; min-width: 120px; }
-
 .mini-cell-content {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/manage/router/index.vue b/packages/manage/router/index.vue
index 5039858..dedb266 100644
--- a/packages/manage/router/index.vue
+++ b/packages/manage/router/index.vue
@@ -37,7 +37,7 @@ import { useRouter, useRoute } from "vue-router";
 import { Api, NoobHead } from "noob-mengyxu";
 import md5 from "js-md5";
 
-const DEV_MODE_TS = "2026-03-26T07:50:00.000Z";
+const DEV_MODE_TS = "2026-03-26T08:00:00.000Z";
 const { VITE_APP_VERSION, VITE_GIT_HASH, NODE_ENV } = import.meta.env;
 const { Head, MenuTree, HeadPersonal, Fullscreen, StyleChange, LangChange, SizeChange } = NoobHead;