From 99a512c3f7dfc3e76fc7faa95cbd12cc084bc18d Mon Sep 17 00:00:00 2001
From: Chiguyong <chiguyong@ChiGuyongs-MacBook-Pro.local>
Date: Mon, 6 Jul 2026 18:46:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(bitable):=20=E8=A1=A8=E6=A0=BC=E5=A4=8D?=
 =?UTF-8?q?=E9=80=89=E6=A1=86=E3=80=81=E5=AD=97=E6=AE=B5=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E4=B8=8E=E5=8D=95=E5=85=83=E6=A0=BC=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BitableGrid 添加 checkbox 选择列，seq 列改窄为 40px
- 单元格高度 44px、表头高度 40px、行 hover 背景、列分隔线
- 字段类型图标加入 ColumnHeaderMenu
- date 字段使用 DateDisplay，统一 YYYY-MM-DD 格式
- SelectDisplay chip 圆角与行高微调
---
 .../src/components/bitable/BitableGrid.vue    | 60 ++++++++++++++++++-
 .../components/bitable/ColumnHeaderMenu.vue   |  2 +
 .../src/components/bitable/DateDisplay.vue    |  9 ++-
 .../src/components/bitable/SelectDisplay.vue  |  6 +-
 4 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/src/agentkit/server/frontend/src/components/bitable/BitableGrid.vue b/src/agentkit/server/frontend/src/components/bitable/BitableGrid.vue
index 780b29d..25658ff 100644
--- a/src/agentkit/server/frontend/src/components/bitable/BitableGrid.vue
+++ b/src/agentkit/server/frontend/src/components/bitable/BitableGrid.vue
@@ -35,6 +35,8 @@
           :height="groupingEnabled ? 'auto' : height"
           :loading="loading"
           :row-config="rowConfig"
+          :cell-config="{ height: 44 }"
+          :header-config="{ height: 40 }"
           :column-config="{ resizable: true }"
           :virtual-y-config="{ enabled: !groupingEnabled, gt: 60 }"
           :virtual-x-config="{ enabled: true, gt: 20 }"
@@ -46,6 +48,7 @@
           }"
           @edit-closed="onEditClosed"
           @cell-click="onCellClick"
+          @cell-dblclick="onCellDblclick"
         >
           <template #empty>
             <a-empty :description="emptyText" />
@@ -120,6 +123,14 @@
               :multiple="f.field_type === 'multiselect'"
             />
           </template>
+          <!-- Date display slots -->
+          <template
+            v-for="f in dateFields"
+            :key="`cell_date_${f.id}`"
+            #[`cell_date_${f.id}`]="{ row }"
+          >
+            <DateDisplay :value="(row[f.id] as string | null | undefined)" />
+          </template>
           <!-- Add-field column header -->
           <template #header__add_field>
             <div class="bitable-grid-scope__add-col" @click="emit('add-field')">
@@ -160,6 +171,7 @@ import ImageCell from './ImageCell.vue'
 import ColumnHeaderMenu from './ColumnHeaderMenu.vue'
 import SelectCellEditor from './SelectCellEditor.vue'
 import SelectDisplay from './SelectDisplay.vue'
+import DateDisplay from './DateDisplay.vue'
 import InlineFieldConfigurator from './InlineFieldConfigurator.vue'
 import RecordDetailDrawer from './RecordDetailDrawer.vue'
 import type { ISelectOption } from './SelectCellEditor.vue'
@@ -354,6 +366,15 @@ const onCellClick: VxeGridEvents.CellClick = (params) => {
   store.openRecordDetail(recordId)
 }
 
+// U3: double-clicking any data cell also opens the record detail drawer
+// (Twenty-style row affordance; seq column remains the primary indicator).
+const onCellDblclick: VxeGridEvents.CellDblclick = (params) => {
+  const { row } = params
+  const recordId = (row as GridRow)._recordId
+  if (!recordId) return
+  store.openRecordDetail(recordId)
+}
+
 function onDrawerRetry(recordId: string): void {
   store.fetchRecordDetail(recordId)
 }
@@ -389,6 +410,9 @@ const selectFields = computed(() =>
   ),
 )
 
+// Fields that use date display slots
+const dateFields = computed(() => props.fields.filter((f) => f.field_type === 'date'))
+
 // Map records to grid rows with a stable _rowId (record.id)
 const rows = computed<GridRow[]>(() =>
   props.records.map((r) => ({
@@ -401,11 +425,18 @@ const rows = computed<GridRow[]>(() =>
 // Build vxe-grid columns from field definitions
 const gridColumns = computed<GridColumn[]>(() => {
   const cols: GridColumn[] = [
+    {
+      type: 'checkbox',
+      width: 40,
+      fixed: 'left',
+      resizable: false,
+    },
     {
       type: 'seq',
-      width: 56,
+      width: 40,
       fixed: 'left',
       title: '#',
+      resizable: false,
     },
   ]
 
@@ -472,6 +503,10 @@ function buildColumn(f: IBitableField): GridColumn {
           enabled: true,
           name: 'VxeDatePicker',
         },
+        slots: {
+          ...base.slots,
+          default: `cell_date_${f.id}`,
+        },
       }
     case 'select':
     case 'multiselect':
@@ -561,6 +596,29 @@ defineExpose({
   cursor: pointer;
 }
 
+/* Twenty-style row hover + header separator */
+.bitable-grid-scope :deep(.vxe-body--row:hover) {
+  background-color: var(--bitable-color-bg-tertiary);
+}
+
+.bitable-grid-scope :deep(.vxe-header--row) {
+  height: 40px;
+}
+
+.bitable-grid-scope :deep(.vxe-header--column) {
+  border-bottom: 2px solid var(--bitable-color-border-hover);
+}
+
+.bitable-grid-scope :deep(.vxe-body--column),
+.bitable-grid-scope :deep(.vxe-header--column) {
+  border-right: 1px solid var(--bitable-color-border);
+}
+
+.bitable-grid-scope :deep(.vxe-body--column:last-child),
+.bitable-grid-scope :deep(.vxe-header--column:last-child) {
+  border-right: 0;
+}
+
 .bitable-grid-scope__add-col {
   display: flex;
   align-items: center;
diff --git a/src/agentkit/server/frontend/src/components/bitable/ColumnHeaderMenu.vue b/src/agentkit/server/frontend/src/components/bitable/ColumnHeaderMenu.vue
index bbf5eef..12cb008 100644
--- a/src/agentkit/server/frontend/src/components/bitable/ColumnHeaderMenu.vue
+++ b/src/agentkit/server/frontend/src/components/bitable/ColumnHeaderMenu.vue
@@ -10,6 +10,7 @@
       @keydown.enter.prevent="open = true"
       @keydown.space.prevent="open = true"
     >
+      <FieldTypeIcon :type="field.field_type" />
       <span class="column-header-menu__title">{{ field.name }}</span>
       <DownOutlined class="column-header-menu__arrow" />
     </div>
@@ -43,6 +44,7 @@ import {
   AppstoreOutlined,
 } from '@ant-design/icons-vue'
 import type { IBitableField } from '@/api/bitable'
+import FieldTypeIcon from './FieldTypeIcon.vue'
 
 const props = defineProps<{
   field: IBitableField
diff --git a/src/agentkit/server/frontend/src/components/bitable/DateDisplay.vue b/src/agentkit/server/frontend/src/components/bitable/DateDisplay.vue
index 88ec62c..1d97d10 100644
--- a/src/agentkit/server/frontend/src/components/bitable/DateDisplay.vue
+++ b/src/agentkit/server/frontend/src/components/bitable/DateDisplay.vue
@@ -13,11 +13,10 @@ const formatted = computed(() => {
   if (!props.value) return ''
   const d = new Date(props.value)
   if (Number.isNaN(d.getTime())) return String(props.value)
-  return d.toLocaleDateString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  })
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
 })
 </script>
 
diff --git a/src/agentkit/server/frontend/src/components/bitable/SelectDisplay.vue b/src/agentkit/server/frontend/src/components/bitable/SelectDisplay.vue
index 9871daa..30f4fa3 100644
--- a/src/agentkit/server/frontend/src/components/bitable/SelectDisplay.vue
+++ b/src/agentkit/server/frontend/src/components/bitable/SelectDisplay.vue
@@ -108,11 +108,11 @@ function chipStyle(key: ColorKey): Record<string, string> {
 .select-display__chip {
   display: inline-flex;
   align-items: center;
-  padding: 0 var(--bitable-spacing-sm);
-  border-radius: var(--bitable-radius-sm);
+  padding: 0 6px;
+  border-radius: var(--bitable-radius-md);
   border: 1px solid;
   font-size: var(--bitable-font-xs);
-  line-height: 1.5;
+  line-height: 1.4;
   white-space: nowrap;
 }
 </style>