u

code/g3soft-libs/packages/ui/playground/main.ts

@@ -42,6 +42,7 @@ import {
   G3Tooltip,
   G3Tree,
 } from '@g3soft/ui'
+import type { G3TableColumn, TableRow } from '@g3soft/ui'
 import '@g3soft/tokens'
 
 /**
@@ -202,8 +203,13 @@ const App = {
         title: '金额',
         width: 120,
         align: 'right',
+        // 展示：千分位 + ¥ 前缀。**小数位不写在这里**，统一由 editor.precision 给
+        format: { thousands: true, prefix: '¥' },
         editor: {
           type: 'number',
+          // 精度：两位小数。超出即 error（红底 + 左侧竖条 + 悬停浮层「最多 2 位小数」），
+          // 且**不改数据** —— E2E 用它验「输多了只标红、值原样保留」
+          precision: 2,
           // 金额必须 > 0：让「校验态全表可见」在 E2E 里有可断言的 error 数据
           validate: (v: unknown) => Number(v) > 0 || '金额必须大于 0',
         },
@@ -324,6 +330,58 @@ const App = {
      */
     const fixedActiveKey = ref<string | null>(null)
 
+    /**
+     * 日期编辑器（`editor.type = 'date'`）的宿主。
+     *
+     * 刻意**单独一张小表**，而不是往 table-wrap 里加列：那张表的列序被 Tab 跳格用例
+     * 逐格锁着（amount → status → enabled → remark 的顺位），插一列就要连带改一串断言。
+     *
+     * 两列刻意配不同格式，覆盖 `format` 的两种用法：
+     *   · 开航日 —— 默认 `YYYY-MM-DD`（面板选到「日」为止），并配必填校验；
+     *   · 截单日 —— `'YYYY-MM-DD HH:mm'`，面板会多出时间列、选完要点「确定」才提交。
+     */
+    const dateTableColumns = ref<G3TableColumn<TableRow>[]>([
+      { dataIndex: 'bookingNo', title: '订舱号', width: 120 },
+      {
+        dataIndex: 'etd',
+        title: '开航日',
+        width: 150,
+        editor: {
+          type: 'date',
+          validate: (v: unknown) => String(v ?? '').length > 0 || '请选择开航日',
+        },
+      },
+      {
+        dataIndex: 'docClose',
+        title: '截单日',
+        width: 180,
+        editor: { type: 'date', format: 'YYYY-MM-DD HH:mm' },
+      },
+    ])
+    const dateTableData = ref<TableRow[]>([
+      { id: 1, bookingNo: 'BK001', etd: '2026-03-15', docClose: '2026-03-12 18:00' },
+      // 空值行：既验 placeholder，也是「选完日期写回哪一格」的落点
+      { id: 2, bookingNo: 'BK002', etd: '', docClose: '' },
+      { id: 3, bookingNo: 'BK003', etd: '2026-04-01', docClose: '2026-03-28 12:30' },
+    ])
+
+    /**
+     * 键盘行为的宿主：三列分别覆盖「单行 text」「单行 number」「多行 textarea」。
+     *
+     * 单行与多行的 Enter 语义**不同**（确认下移 vs 换行），所以必须有一列 textarea
+     * 才能把这条区分锁住 —— table-wrap 里没有多行编辑器。
+     */
+    const keysTableColumns = ref<G3TableColumn<TableRow>[]>([
+      { dataIndex: 'code', title: '编号', width: 130, editor: { type: 'text' } },
+      { dataIndex: 'qty', title: '数量', width: 110, align: 'right', editor: { type: 'number' } },
+      { dataIndex: 'note', title: '备注（多行）', width: 260, editor: { type: 'textarea' } },
+    ])
+    const keysTableData = ref<TableRow[]>([
+      { id: 1, code: 'K-001', qty: 12, note: '第一行' },
+      { id: 2, code: 'K-002', qty: 34, note: '' },
+      { id: 3, code: 'K-003', qty: 56, note: '' },
+    ])
+
     return {
       rtl,
       toggleRtl,
@@ -337,6 +395,10 @@ const App = {
       fixedTableColumns,
       fixedTableData,
       fixedActiveKey,
+      dateTableColumns,
+      dateTableData,
+      keysTableColumns,
+      keysTableData,
       model,
       tab,
       seg,
@@ -698,6 +760,29 @@ const App = {
       <div data-testid="table-stripe-wrap" style="height: 200px; margin-top: 16px">
         <G3Table data-testid="table-stripe" :columns="plainColumns" :data-source="plainData" stripe />
       </div>
+
+      <!-- 日期编辑器（editor.type = 'date'）：点格即弹日历，值始终是字符串。
+           刻意单独一张表：table-wrap 的列序被 Tab 跳格用例逐格锁着，往它里面加列会连带改一堆断言。 -->
+      <div data-testid="table-date-wrap" style="height: 220px; margin-top: 16px">
+        <G3Table
+          data-testid="table-date"
+          :columns="dateTableColumns"
+          :data-source="dateTableData"
+          :seq="false"
+        />
+      </div>
+
+      <!-- 键盘行为的宿主：Enter 下移 / 多行换行 / 方向键归输入框。
+           同样单独一张表（理由同上），行高给足让 textarea 有地方显示多行。 -->
+      <div data-testid="table-keys-wrap" style="height: 260px; margin-top: 16px">
+        <G3Table
+          data-testid="table-keys"
+          :columns="keysTableColumns"
+          :data-source="keysTableData"
+          :seq="false"
+          :row-height="64"
+        />
+      </div>
     </section>
   </div>
   `,