cx-chat 0.0.1

package/src/views/page-menus/model-metadata/manage/modal/components/use-table-detail-tabs.tsx

@@ -0,0 +1,151 @@
+import { ALIGN } from '@/meta'
+import { CxTag } from '@cx-ui'
+import type { TFunction } from 'i18next'
+import { useMemo } from 'react'
+import type { Column, ForeignKey, Index } from './table-schema'
+import {
+  fkColNamesForMultiSelect,
+  getIndexKind,
+  indexColumnNamesForMultiSelect,
+} from './table-schema'
+
+function cellText(v: unknown) {
+  return <span className="break-words text-sm text-gray-900 dark:text-gray-100">{v == null || v === '' ? '—' : String(v)}</span>
+}
+
+/** 表结构详情弹窗：只读列定义（与 use-table-submit-tabs 字段对齐，无编辑/删除列） */
+export function useTableDetailTabs({ t }: { t: TFunction }) {
+  const columnsTabColumns = useMemo(
+    () => [
+      {
+        title: t('common.index'),
+        key: '_idx',
+        width: 43,
+        align: ALIGN.CENTER,
+        render: (_: unknown, __: Column, index: number) => <span className="text-gray-500">{index + 1}</span>,
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.columnName'),
+        key: 'columnName',
+        width: 200,
+        render: (_: unknown, r: Column) => cellText(r.columnName),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.dataType'),
+        key: 'dataType',
+        width: 140,
+        render: (_: unknown, r: Column) => cellText(r.dataType),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.privacyFlag'),
+        key: 'privacyFlag',
+        width: 90,
+        align: ALIGN.CENTER,
+        render: (_: unknown, r: Column) => <CxTag.YesNo value={r.privacyFlag} color={Number(_) === 1 ? 'error' : 'success' } />,
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.isNullable'),
+        key: 'isNullable',
+        width: 90,
+        align: ALIGN.CENTER,
+        render: (_: unknown, r: Column) => <CxTag.YesNo value={r.isNullable} color={Number(_) === 1 ? 'error' : 'success' } />,
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.commentText'),
+        key: 'commentText',
+        minWidth: 200,
+        render: (_: unknown, r: Column) => cellText(r.commentText),
+      },
+    ],
+    [t],
+  )
+
+  const indexesTabColumns = useMemo(
+    () => [
+      {
+        title: t('common.index'),
+        key: '_idx',
+        width: 43,
+        align: ALIGN.CENTER,
+        render: (_: unknown, __: Index, index: number) => <span className="text-gray-500">{index + 1}</span>,
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.indexName'),
+        key: 'indexName',
+        width: 160,
+        render: (_: unknown, r: Index) => cellText(r.indexName),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.indexColumns'),
+        key: 'indexColumns',
+        width: 260,
+        render: (_: unknown, r: Index) => cellText(indexColumnNamesForMultiSelect(r.indexColumns).join(', ')),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.indexType'),
+        key: 'indexType',
+        width: 120,
+        render: (_: unknown, r: Index) => cellText(getIndexKind(r)),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.indexMethod'),
+        key: 'indexMethod',
+        width: 112,
+        render: (_: unknown, r: Index) => cellText(r.indexMethod),
+      },
+    ],
+    [t],
+  )
+
+  const foreignKeysTabColumns = useMemo(
+    () => [
+      {
+        title: t('common.index'),
+        key: '_idx',
+        width: 43,
+        align: ALIGN.CENTER,
+        render: (_: unknown, __: ForeignKey, index: number) => <span className="text-gray-500">{index + 1}</span>,
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.fkName'),
+        key: 'fkName',
+        width: 140,
+        render: (_: unknown, r: ForeignKey) => cellText(r.fkName),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.fk_local_columns'),
+        key: 'fkLocal',
+        width: 200,
+        render: (_: unknown, r: ForeignKey) => cellText(fkColNamesForMultiSelect(r.fkColumns, 'columnName').join(', ')),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.referencedTable'),
+        key: 'referencedTable',
+        width: 160,
+        render: (_: unknown, r: ForeignKey) => cellText(r.referencedTable),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.fk_ref_columns'),
+        key: 'fkRef',
+        width: 200,
+        render: (_: unknown, r: ForeignKey) =>
+          cellText(fkColNamesForMultiSelect(r.fkColumns, 'referencedColumnName').join(', ')),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.updateRule'),
+        key: 'updateRule',
+        width: 120,
+        render: (_: unknown, r: ForeignKey) => cellText(r.updateRule),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.deleteRule'),
+        key: 'deleteRule',
+        width: 120,
+        render: (_: unknown, r: ForeignKey) => cellText(r.deleteRule),
+      },
+    ],
+    [t],
+  )
+
+  return { columnsTabColumns, indexesTabColumns, foreignKeysTabColumns }
+}

package/src/views/page-menus/model-metadata/manage/modal/components/use-table-submit-tabs.tsx

@@ -0,0 +1,423 @@
+import { ALIGN } from '@/meta'
+import { CxButton, CxCheckbox, CxInput, CxSelect } from '@cx-ui'
+import type { TFunction } from 'i18next'
+import type { Dispatch, SetStateAction } from 'react'
+import { useMemo } from 'react'
+import type { Column, ForeignKey, Index, SchemaTableBrief } from './table-schema'
+import {
+  COMMON_DATA_TYPES,
+  FK_RULE_OPTIONS,
+  INDEX_KIND_OPTIONS,
+  INDEX_METHOD_OPTIONS,
+  applyIndexKind,
+  cxSelectFkProps,
+  cxSelectInTableProps,
+  fkColNamesForMultiSelect,
+  getIndexKind,
+  indexColumnNamesForMultiSelect,
+  parseIndexColumnNames,
+  tableColumnNameList,
+  zipFkPairColumns,
+} from './table-schema'
+
+type Params = {
+  t: TFunction
+  editColumns: Column[]
+  setEditColumns: Dispatch<SetStateAction<Column[]>>
+  editIndexes: Index[]
+  setEditIndexes: Dispatch<SetStateAction<Index[]>>
+  editForeignKeys: ForeignKey[]
+  setEditForeignKeys: Dispatch<SetStateAction<ForeignKey[]>>
+  schemaTables: SchemaTableBrief[]
+  editingTableKey: string
+}
+
+export function useTableSubmitTabs({
+  t,
+  editColumns,
+  setEditColumns,
+  editIndexes,
+  setEditIndexes,
+  editForeignKeys,
+  setEditForeignKeys,
+  schemaTables,
+  editingTableKey,
+}: Params) {
+  // i18n 中文：src/locales/zh/menus/model-metadata.ts（本节 fields / placeholders；common.* 见 zh/common）
+  const cellInputClass = 'w-full min-w-[72px]'
+
+  const columnsTabColumns = useMemo(
+    () => [
+      {
+        title: t('common.index'), // 序号
+        key: '_idx',
+        width: 43,
+        align: ALIGN.CENTER,
+        render: (_: unknown, __: Column, index: number) => <span className="text-gray-500">{index + 1}</span>,
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.columnName'), // 字段名
+        key: 'columnName',
+        width: 140,
+        render: (_: unknown, record: Column, index: number) => (
+          <CxInput
+            className={cellInputClass}
+            value={record.columnName}
+            placeholder={t('menus.model_metadata.manage.placeholders.column_name_input')} // 占位：字段名
+            onChange={(e) =>
+              setEditColumns((rows) => rows.map((r, i) => (i === index ? { ...r, columnName: e.target.value } : r)))
+            }
+          />
+        ),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.dataType'), // 数据类型
+        key: 'dataType',
+        width: 160,
+        render: (_: unknown, record: Column, index: number) => (
+          <CxInput.AutoComplete
+            className="max-w-full min-w-0 w-full"
+            value={record.dataType}
+            placeholder={t('menus.model_metadata.manage.placeholders.data_type_input')} // 占位：数据类型
+            options={COMMON_DATA_TYPES.map((x) => ({ value: x }))}
+            onChange={(v) =>
+              setEditColumns((rows) => rows.map((r, i) => (i === index ? { ...r, dataType: v } : r)))
+            }
+          />
+        ),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.privacyFlag'), // 隐私
+        key: 'privacyFlag',
+        width: 88,
+        align: ALIGN.CENTER,
+        render: (_: unknown, record: Column, index: number) => (
+          <div className="flex justify-center">
+            <CxCheckbox
+              checked={record.privacyFlag === 1}
+              aria-label={t('menus.model_metadata.manage.fields.privacyFlag')} // 隐私（无障碍）
+              onChange={(checked) =>
+                setEditColumns((rows) =>
+                  rows.map((r, i) => (i === index ? { ...r, privacyFlag: checked ? 1 : 0 } : r)),
+                )
+              }
+            />
+          </div>
+        ),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.isNullable'), // 可空
+        key: 'isNullable',
+        width: 88,
+        align: ALIGN.CENTER,
+        render: (_: unknown, record: Column, index: number) => (
+          <div className="flex justify-center">
+            <CxCheckbox
+              checked={record.isNullable === 1}
+              aria-label={t('menus.model_metadata.manage.fields.isNullable')} // 可空（无障碍）
+              onChange={(checked) =>
+                setEditColumns((rows) =>
+                  rows.map((r, i) => (i === index ? { ...r, isNullable: checked ? 1 : 0 } : r)),
+                )
+              }
+            />
+          </div>
+        ),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.commentText'), // 字段注释
+        key: 'commentText',
+        width: 240,
+        render: (_: unknown, record: Column, index: number) => (
+          <CxInput
+            className={cellInputClass}
+            value={record.commentText ?? ''}
+            placeholder={t('menus.model_metadata.manage.placeholders.comment_text_input')} // 占位：字段注释
+            onChange={(e) =>
+              setEditColumns((rows) => rows.map((r, i) => (i === index ? { ...r, commentText: e.target.value } : r)))
+            }
+          />
+        ),
+      },
+      {
+        title: t('common.actions'), // 操作
+        key: 'action',
+        width: 72,
+        align: ALIGN.CENTER,
+        render: (_: unknown, __: Column, index: number) => (
+          <CxButton.IconDelete
+            title={t('common.delete')}
+            onClick={() => setEditColumns((rows) => rows.filter((_, i) => i !== index))}
+          />
+        ),
+      },
+    ],
+    [t, setEditColumns],
+  )
+
+  const localColumnSelectOptions = useMemo(
+    () =>
+      [...new Set(editColumns.map((c) => c.columnName).filter(Boolean))].map((name) => ({
+        value: name,
+        label: name,
+      })),
+    [editColumns],
+  )
+
+  const indexesTabColumns = useMemo(
+    () => [
+      {
+        title: t('common.index'), // 序号
+        key: '_idx',
+        width: 43,
+        align: ALIGN.CENTER,
+        render: (_: unknown, __: Index, index: number) => <span className="text-gray-500">{index + 1}</span>,
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.indexName'), // 索引名
+        key: 'indexName',
+        width: 160,
+        render: (_: unknown, record: Index, index: number) => (
+          <CxInput
+            className={cellInputClass}
+            value={record.indexName}
+            placeholder={t('menus.model_metadata.manage.placeholders.index_name_input')} // 占位：索引名
+            onChange={(e) =>
+              setEditIndexes((rows) => rows.map((r, i) => (i === index ? { ...r, indexName: e.target.value } : r)))
+            }
+          />
+        ),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.indexColumns'), // 索引字段
+        key: 'indexColumns',
+        width: 280,
+        render: (_: unknown, record: Index, index: number) => (
+          <CxSelect
+            {...cxSelectFkProps}
+            mode="multiple"
+            maxTagCount="responsive"
+            placeholder={t('menus.model_metadata.manage.placeholders.select_index_columns')} // 占位：选索引列
+            options={localColumnSelectOptions}
+            value={indexColumnNamesForMultiSelect(record.indexColumns)}
+            onChange={(vals) => {
+              const arr = Array.isArray(vals) ? (vals as string[]) : vals != null && vals !== '' ? [String(vals)] : []
+              setEditIndexes((rows) =>
+                rows.map((r, i) =>
+                  i === index ? { ...r, indexColumns: parseIndexColumnNames(arr.join(',')) } : r,
+                ),
+              )
+            }}
+          />
+        ),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.indexType'), // 索引类型
+        key: 'indexType',
+        width: 120,
+        render: (_: unknown, record: Index, index: number) => (
+          <CxSelect
+            {...cxSelectInTableProps}
+            options={INDEX_KIND_OPTIONS}
+            value={getIndexKind(record)}
+            onChange={(v) =>
+              setEditIndexes((rows) => rows.map((r, i) => (i === index ? applyIndexKind(r, v as string) : r)))
+            }
+          />
+        ),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.indexMethod'), // 索引方法
+        key: 'indexMethod',
+        width: 112,
+        render: (_: unknown, record: Index, index: number) => (
+          <CxSelect
+            {...cxSelectInTableProps}
+            options={INDEX_METHOD_OPTIONS}
+            value={record.indexMethod || 'BTREE'}
+            onChange={(v) =>
+              setEditIndexes((rows) => rows.map((r, i) => (i === index ? { ...r, indexMethod: v as string } : r)))
+            }
+          />
+        ),
+      },
+      {
+        title: t('common.actions'), // 操作
+        key: 'action',
+        width: 72,
+        align: ALIGN.CENTER,
+        render: (_: unknown, __: Index, index: number) => (
+          <CxButton.IconDelete
+            title={t('common.delete')}
+            onClick={() => setEditIndexes((rows) => rows.filter((_, i) => i !== index))}
+          />
+        ),
+      },
+    ],
+    [t, localColumnSelectOptions, setEditIndexes],
+  )
+
+  const referencedTableSelectOptions = useMemo(
+    () =>
+      schemaTables
+        .filter((tb) => tb.tableName && tb.tableName !== editingTableKey)
+        .map((tb) => ({
+          value: String(tb.tableName),
+          label: tb.tableComment ? `${tb.tableName} (${tb.tableComment})` : String(tb.tableName),
+        })),
+    [schemaTables, editingTableKey],
+  )
+
+  const foreignKeysTabColumns = useMemo(
+    () => [
+      {
+        title: t('common.index'), // 序号
+        key: '_idx',
+        width: 43,
+        align: ALIGN.CENTER,
+        render: (_: unknown, __: ForeignKey, index: number) => <span className="text-gray-500">{index + 1}</span>,
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.fkName'), // 外键名
+        key: 'fkName',
+        width: 120,
+        render: (_: unknown, record: ForeignKey, index: number) => (
+          <CxInput
+            className={cellInputClass}
+            value={record.fkName}
+            placeholder={t('menus.model_metadata.manage.placeholders.fk_name_input')} // 占位：外键名
+            onChange={(e) =>
+              setEditForeignKeys((rows) => rows.map((r, i) => (i === index ? { ...r, fkName: e.target.value } : r)))
+            }
+          />
+        ),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.fk_local_columns'), // 本表字段
+        key: 'fkLocal',
+        width: 220,
+        render: (_: unknown, record: ForeignKey, index: number) => (
+          <CxSelect
+            {...cxSelectFkProps}
+            mode="multiple"
+            maxTagCount="responsive"
+            placeholder={t('menus.model_metadata.manage.placeholders.select_fk_local_columns')} // 占位：本表字段
+            options={localColumnSelectOptions}
+            value={fkColNamesForMultiSelect(record.fkColumns, 'columnName')}
+            onChange={(vals) => {
+              const loc = Array.isArray(vals) ? (vals as string[]) : vals != null && vals !== '' ? [String(vals)] : []
+              const ref = fkColNamesForMultiSelect(record.fkColumns, 'referencedColumnName')
+              setEditForeignKeys((rows) =>
+                rows.map((r, i) => (i === index ? { ...r, fkColumns: zipFkPairColumns(loc, ref) } : r)),
+              )
+            }}
+          />
+        ),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.referencedTable'), // 引用表
+        key: 'referencedTable',
+        width: 160,
+        render: (_: unknown, record: ForeignKey, index: number) => (
+          <CxSelect
+            {...cxSelectFkProps}
+            optionLabelProp="value"
+            placeholder={t('menus.model_metadata.manage.placeholders.select_referenced_table')} // 占位：选引用表
+            options={referencedTableSelectOptions}
+            value={record.referencedTable || undefined}
+            onChange={(v) => {
+              const tableName = v == null ? '' : String(v)
+              setEditForeignKeys((rows) =>
+                rows.map((r, i) => {
+                  if (i !== index) return r
+                  const loc = fkColNamesForMultiSelect(r.fkColumns, 'columnName')
+                  return {
+                    ...r,
+                    referencedTable: tableName,
+                    fkColumns: zipFkPairColumns(loc, []),
+                  }
+                }),
+              )
+            }}
+          />
+        ),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.fk_ref_columns'), // 引用字段
+        key: 'fkRef',
+        width: 220,
+        render: (_: unknown, record: ForeignKey, index: number) => {
+          const refTable = schemaTables.find((x) => x.tableName === record.referencedTable)
+          const refColOptions = tableColumnNameList(refTable).map((name) => ({ value: name, label: name }))
+          return (
+            <CxSelect
+              {...cxSelectFkProps}
+              mode="multiple"
+              maxTagCount="responsive"
+              placeholder={t('menus.model_metadata.manage.placeholders.select_fk_ref_columns')} // 占位：引用列
+              options={refColOptions}
+              value={fkColNamesForMultiSelect(record.fkColumns, 'referencedColumnName')}
+              disabled={!record.referencedTable}
+              onChange={(vals) => {
+                const ref = Array.isArray(vals) ? (vals as string[]) : vals != null && vals !== '' ? [String(vals)] : []
+                const loc = fkColNamesForMultiSelect(record.fkColumns, 'columnName')
+                setEditForeignKeys((rows) =>
+                  rows.map((r, i) => (i === index ? { ...r, fkColumns: zipFkPairColumns(loc, ref) } : r)),
+                )
+              }}
+            />
+          )
+        },
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.updateRule'), // 更新规则
+        key: 'updateRule',
+        width: 130,
+        render: (_: unknown, record: ForeignKey, index: number) => (
+          <CxSelect
+            {...cxSelectInTableProps}
+            options={FK_RULE_OPTIONS}
+            value={record.updateRule || 'NO ACTION'}
+            onChange={(v) =>
+              setEditForeignKeys((rows) =>
+                rows.map((r, i) => (i === index ? { ...r, updateRule: v as string } : r)),
+              )
+            }
+          />
+        ),
+      },
+      {
+        title: t('menus.model_metadata.manage.fields.deleteRule'), // 删除规则
+        key: 'deleteRule',
+        width: 130,
+        render: (_: unknown, record: ForeignKey, index: number) => (
+          <CxSelect
+            {...cxSelectInTableProps}
+            options={FK_RULE_OPTIONS}
+            value={record.deleteRule || 'NO ACTION'}
+            onChange={(v) =>
+              setEditForeignKeys((rows) =>
+                rows.map((r, i) => (i === index ? { ...r, deleteRule: v as string } : r)),
+              )
+            }
+          />
+        ),
+      },
+      {
+        title: t('common.actions'), // 操作
+        key: 'action',
+        width: 72,
+        align: ALIGN.CENTER,
+        render: (_: unknown, __: ForeignKey, index: number) => (
+          <CxButton.IconDelete
+            title={t('common.delete')}
+            onClick={() => setEditForeignKeys((rows) => rows.filter((_, i) => i !== index))}
+          />
+        ),
+      },
+    ],
+    [t, schemaTables, localColumnSelectOptions, referencedTableSelectOptions, setEditForeignKeys],
+  )
+
+  return { columnsTabColumns, indexesTabColumns, foreignKeysTabColumns }
+}