cx-chat 0.0.1

package/src/views/page-menus/model-metadata/manage/components/step1-basic-info.tsx

@@ -0,0 +1,232 @@
+import { useAuth } from '@/contexts/AuthContext'
+import { DICT_DATA, DICT_KEY, ENUM_DATA } from '@/meta'
+import { CxForm, CxFormItem, CxInput, CxSelect } from '@cx-ui'
+import { Form } from 'antd'
+import { forwardRef, useEffect, useImperativeHandle, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+// 第一步 i18n：menus.model_metadata.manage.fields / placeholders / rules → locales/zh/menus/model-metadata/manage.ts
+
+/** 与测连接入参一致，用于判断连接相关字段是否相对上次成功测试有变化 */
+export function modelMetadataConnectionDigest(v: Record<string, any>): string {
+  return JSON.stringify({
+    databaseName: v.databaseName ?? '',
+    dbType: v.dbType ?? '',
+    host: v.host ?? '',
+    port: v.port ?? '',
+    dbSchema: v.dbSchema ?? '',
+    username: v.username ?? '',
+    password: v.password ?? '',
+    charsetName: v.charsetName ?? '',
+  })
+}
+
+export type Step1BasicInfoHandle = {
+  validateForNext: () => Promise<Record<string, any>>
+  validateForConnectionTest: () => Promise<void>
+  getConnectionTestPayload: () => Record<string, any>
+}
+
+type Step1BasicInfoProps = {
+  initialValues?: Record<string, any>
+  isEdit?: boolean
+  /** 连接相关字段摘要变化时回调（仅当与上次成功测试不一致时由父级清除「已测试」） */
+  onConnectionDigestChange?: (digest: string) => void
+}
+
+const Step1BasicInfo = forwardRef<Step1BasicInfoHandle, Step1BasicInfoProps>(
+  function Step1BasicInfo(
+    { initialValues, isEdit, onConnectionDigestChange },
+    ref,
+  ) {
+    const { t } = useTranslation()
+    const { commonDictRevision } = useAuth()
+    const [form] = Form.useForm()
+
+    const dbTypeOptions = useMemo(
+      () => DICT_DATA[DICT_KEY.dbType]?.option ?? [],
+      [commonDictRevision],
+    )
+
+    // 校验文案：menus.model_metadata.manage.rules.* → locales/zh/menus/model-metadata/manage.ts
+    const formRules = useMemo(
+      () => ({
+        subject: [
+          { required: true, message: t('menus.model_metadata.manage.rules.subject_required') }, // 主题必填
+          { whitespace: true, message: t('menus.model_metadata.manage.rules.subject_required') },
+        ],
+        databaseName: [
+          { required: true, message: t('menus.model_metadata.manage.rules.databaseName_required') }, // 库名必填
+          { whitespace: true, message: t('menus.model_metadata.manage.rules.databaseName_required') },
+        ],
+        dbType: [{ required: true, message: t('menus.model_metadata.manage.rules.dbType_required') }], // 库类型必填
+        host: [
+          { required: true, message: t('menus.model_metadata.manage.rules.host_required') }, // 主机必填
+          { whitespace: true, message: t('menus.model_metadata.manage.rules.host_required') },
+        ],
+        port: [{ required: true, message: t('menus.model_metadata.manage.rules.port_required') }], // 端口必填
+        username: [
+          { required: true, message: t('menus.model_metadata.manage.rules.username_required') }, // 用户名必填
+          { whitespace: true, message: t('menus.model_metadata.manage.rules.username_required') },
+        ],
+        password: isEdit
+          ? []
+          : [
+              { required: true, message: t('menus.model_metadata.manage.rules.password_required') }, // 密码必填
+              { whitespace: true, message: t('menus.model_metadata.manage.rules.password_required') },
+            ],
+      }),
+      [t, isEdit],
+    )
+
+    useEffect(() => {
+      if (initialValues && Object.keys(initialValues).length > 0) {
+        form.setFieldsValue(initialValues)
+      }
+    }, [form, initialValues])
+
+    // 开发：新增时空表单自动填基础信息，不需要时把下面整段 useEffect 注释掉即可
+    useEffect(() => {
+      if (!import.meta.env.DEV) return
+      if (initialValues && Object.keys(initialValues).length > 0) return
+      form.setFieldsValue({
+        subject: 'dev-local-db',
+        databaseName: 'agent-forge',
+        dbType: 'mysql',
+        host: '10.101.1.128',
+        port: 13306,
+        dbSchema: '',
+        username: 'root',
+        password: 'Q95pRHWuOJTSAPJo',
+        optionsJson: '',
+      })
+    }, [form, initialValues])
+
+    const watched = Form.useWatch(
+      ['databaseName', 'dbType', 'host', 'port', 'username', 'password', 'dbSchema', 'charsetName'],
+      form,
+    )
+
+    useEffect(() => {
+      const v = form.getFieldsValue(true) as Record<string, any>
+      onConnectionDigestChange?.(modelMetadataConnectionDigest(v))
+    }, [watched, form, onConnectionDigestChange])
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        validateForNext: async () => {
+          await form.validateFields(['subject', 'databaseName', 'dbType', 'host', 'port', 'username'])
+          return form.getFieldsValue(true) as Record<string, any>
+        },
+        validateForConnectionTest: () =>
+          form.validateFields([
+            'databaseName',
+            'dbType',
+            'host',
+            'port',
+            'username',
+            'password',
+          ]),
+        getConnectionTestPayload: () => {
+          const v = form.getFieldsValue(true) as Record<string, any>
+          return {
+            databaseName: v.databaseName,
+            dbType: v.dbType,
+            host: v.host,
+            port: v.port,
+            dbSchema: v.dbSchema,
+            username: v.username,
+            password: v.password,
+            charsetName: v.charsetName,
+          }
+        },
+      }),
+      [form],
+    )
+
+    const fieldClass = 'w-full min-w-0'
+    const inputClass = 'w-full min-w-0 max-w-full'
+
+    // 标签/占位：menus.model_metadata.manage.fields.* / placeholders.* → zh/menus/model-metadata/manage.ts
+    return (
+      <CxForm form={form} rules={formRules} layout="vertical" className="w-full min-w-0">
+        <div className="grid w-full min-w-0 grid-cols-2 gap-x-6 gap-y-4">
+          {/* 主题 */}
+          <CxFormItem className={fieldClass} label={t('menus.model_metadata.manage.fields.subject')} name="subject">
+            <CxInput className={inputClass} placeholder={t('menus.model_metadata.manage.placeholders.subject')} />
+          </CxFormItem>
+          {/* 数据库名 */}
+          <CxFormItem className={fieldClass} label={t('menus.model_metadata.manage.fields.databaseName')} name="databaseName">
+            <CxInput className={inputClass} placeholder={t('menus.model_metadata.manage.placeholders.databaseName')} />
+          </CxFormItem>
+        </div>
+
+        <div className="grid w-full min-w-0 grid-cols-2 gap-x-6 gap-y-4">
+          {/* 库类型 */}
+          <CxFormItem className={fieldClass} label={t('menus.model_metadata.manage.fields.dbType')} name="dbType">
+            <CxSelect
+              className={inputClass}
+              placeholder={t('menus.model_metadata.manage.placeholders.dbType')}
+              options={dbTypeOptions}
+              fieldNames={{ label: 'name', value: 'value' }}
+            />
+          </CxFormItem>
+          {/* 字符集 */}
+          <CxFormItem className={fieldClass} label={t('menus.model_metadata.manage.fields.charsetName')} name="charsetName">
+            <CxSelect
+              className={inputClass}
+              allowClear
+              placeholder={t('menus.model_metadata.manage.placeholders.charsetName')}
+              options={ENUM_DATA.dbCharset.option}
+            />
+          </CxFormItem>
+        </div>
+
+        <div className="grid w-full min-w-0 grid-cols-4 gap-x-6 gap-y-4">
+          {/* 主机 */}
+          <CxFormItem className={`${fieldClass} col-span-3`} label={t('menus.model_metadata.manage.fields.host')} name="host">
+            <CxInput className={inputClass} placeholder={t('menus.model_metadata.manage.placeholders.host')} />
+          </CxFormItem>
+          {/* 端口 */}
+          <CxFormItem className={fieldClass} label={t('menus.model_metadata.manage.fields.port')} name="port">
+            <CxInput className={inputClass} placeholder={t('menus.model_metadata.manage.placeholders.port')} />
+          </CxFormItem>
+        </div>
+
+        <div className="grid w-full min-w-0 grid-cols-4 gap-x-6 gap-y-4">
+          {/* Schema */}
+          <CxFormItem className={`${fieldClass} col-span-2`} label={t('menus.model_metadata.manage.fields.dbSchema')} name="dbSchema">
+            <CxInput className={inputClass} placeholder={t('menus.model_metadata.manage.placeholders.dbSchema')} />
+          </CxFormItem>
+          {/* 用户名 */}
+          <CxFormItem className={fieldClass} label={t('menus.model_metadata.manage.fields.username')} name="username">
+            <CxInput className={inputClass} placeholder={t('menus.model_metadata.manage.placeholders.username')} />
+          </CxFormItem>
+          {/* 密码 */}
+          <CxFormItem className={fieldClass} label={t('menus.model_metadata.manage.fields.password')} name="password">
+            <CxInput
+              className={inputClass}
+              type="password"
+              autoComplete="new-password"
+              placeholder={t('menus.model_metadata.manage.placeholders.password')}
+            />
+          </CxFormItem>
+        </div>
+
+        <div className="mt-6 w-full min-w-0">
+          {/* 配置 JSON */}
+          <CxFormItem className={fieldClass} label={t('menus.model_metadata.manage.fields.optionsJson')} name="optionsJson">
+            <CxInput.Textarea
+              className={inputClass}
+              rows={4}
+              placeholder={t('menus.model_metadata.manage.placeholders.optionsJson')}
+            />
+          </CxFormItem>
+        </div>
+      </CxForm>
+    )
+  },
+)
+
+export default Step1BasicInfo

package/src/views/page-menus/model-metadata/manage/components/step2-schema.tsx

@@ -0,0 +1,316 @@
+import { introspectPreviewAPI } from '@api/menus/model-metadata/manage'
+import { useToast } from '@/contexts/ToastContext'
+import { useAuth } from '@/contexts/AuthContext'
+import { CxButton, CxInput, CxTable } from '@cx-ui'
+import type { CxModalRef } from '@cx-ui/modal/useCxModal'
+import { Spin } from 'antd'
+import axios from 'axios'
+import { Plus, RefreshCw } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import TableSubmitModal from '../modal/table-submit-modal'
+
+/** 与 introspect/preview 接口一致的连接入参 */
+function buildIntrospectPreviewParams(connection: Record<string, any>) {
+  return {
+    databaseName: connection.databaseName,
+    dbType: connection.dbType,
+    host: connection.host,
+    port: connection.port,
+    username: connection.username,
+    password: connection.password,
+    dbSchema: connection.dbSchema,
+  }
+}
+
+/** 反查结构预览（不落库），返回 tables 数组 */
+async function fetchIntrospectPreviewTables(
+  connection: Record<string, any>,
+  options?: { signal?: AbortSignal },
+) {
+  const res = await introspectPreviewAPI(buildIntrospectPreviewParams(connection), options)
+  return (res as any)?.data ?? []
+}
+
+// 本步 i18n：menus.model_metadata.manage.* → locales/zh/menus/model-metadata/manage.ts
+
+type SchemaTable = {
+  _clientId?: string
+  tableSchema?: string
+  tableName?: string
+  tableComment?: string
+  tableType?: string
+  columns?: any[]
+  indexes?: any[]
+  foreignKeys?: any[]
+}
+
+type Step2SchemaProps = {
+  connectionParams: Record<string, any>
+  tables: SchemaTable[]
+  onTablesChange: (tables: SchemaTable[]) => void
+  isEdit?: boolean
+  currentStep?: number
+  /** 新增：每次从第一步点「下一步」进入本步时递增，用于强制重新拉取结构预览 */
+  previewNonce?: number
+}
+
+function isAbortError(e: unknown) {
+  return axios.isCancel(e) || (e as any)?.code === 'ERR_CANCELED' || (e as any)?.name === 'CanceledError'
+}
+
+function newClientId() {
+  return `c_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`
+}
+
+function emptySchemaTable(): SchemaTable {
+  return {
+    _clientId: newClientId(),
+    tableSchema: '',
+    tableName: '',
+    tableComment: '',
+    tableType: '',
+    columns: [],
+    indexes: [],
+    foreignKeys: [],
+  }
+}
+
+function tableStableKey(r: SchemaTable) {
+  return r._clientId ?? `${r.tableSchema ?? ''}::${r.tableName ?? ''}`
+}
+
+function removeSchemaTable(tables: SchemaTable[], target: SchemaTable): SchemaTable[] {
+  const tid = target._clientId
+  if (tid) return tables.filter((t) => t._clientId !== tid)
+  const k = tableStableKey(target)
+  let removed = false
+  return tables.filter((t) => {
+    if (t._clientId) return true
+    if (!removed && tableStableKey(t) === k) {
+      removed = true
+      return false
+    }
+    return true
+  })
+}
+
+export default function Step2Schema({
+  connectionParams,
+  tables,
+  onTablesChange,
+  isEdit,
+  currentStep,
+  previewNonce = 0,
+}: Step2SchemaProps) {
+  const { showToast } = useToast()
+  const { hasPermission } = useAuth()
+  const { t } = useTranslation()
+  const [previewLoading, setPreviewLoading] = useState(false)
+  const [tableNameQuery, setTableNameQuery] = useState('')
+  const tableSubmitModalRef = useRef<CxModalRef>(null)
+
+  const filteredTables = useMemo(() => {
+    const q = tableNameQuery.trim().toLowerCase()
+    if (!q) return tables
+    return tables.filter((row) => String(row.tableName ?? '').toLowerCase().includes(q))
+  }, [tables, tableNameQuery])
+
+  useEffect(() => {
+    setTableNameQuery('')
+  }, [previewNonce])
+
+  const runIntrospectFetch = useCallback(
+    async (options?: { signal?: AbortSignal }) => {
+      return fetchIntrospectPreviewTables(connectionParams, options)
+    },
+    [connectionParams],
+  )
+
+  /** 仅随进入第二步 / previewNonce / 连接对象引用变化触发；勿把 showToast、t 等放进依赖，否则父级重渲染会反复 onTablesChange([]) 冲掉本地新增行 */
+  useEffect(() => {
+    if (isEdit) return
+    if (currentStep !== 1) return
+    if (!previewNonce) return
+
+    onTablesChange([])
+
+    const ac = new AbortController()
+    setPreviewLoading(true)
+    ;(async () => {
+      try {
+        const data = await fetchIntrospectPreviewTables(connectionParams, { signal: ac.signal })
+        onTablesChange(Array.isArray(data) ? data : [])
+      } catch (error: any) {
+        if (isAbortError(error)) return
+        showToast(error?.message || t('menus.model_metadata.manage.preview_failed'), 'error') // 结构预览失败
+      } finally {
+        if (!ac.signal.aborted) {
+          setPreviewLoading(false)
+        }
+      }
+    })()
+
+    return () => {
+      ac.abort()
+    }
+    // onTablesChange 为 setState 引用稳定；showToast/t 勿写入依赖以免每次渲染清空 tables
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 见上
+  }, [isEdit, currentStep, previewNonce, connectionParams, onTablesChange])
+
+  useEffect(() => {
+    const handleTableUpdate = (e: CustomEvent<SchemaTable>) => {
+      const u = e.detail
+      const newTables = tables.map((row) => {
+        if (u._clientId && row._clientId && u._clientId === row._clientId) return u
+        if (
+          row.tableName === u.tableName &&
+          (row.tableSchema ?? '') === (u.tableSchema ?? '')
+        ) {
+          return u
+        }
+        return row
+      })
+      onTablesChange(newTables)
+      showToast(t('menus.model_metadata.manage.table_updated'), 'success') // 表信息已更新
+    }
+
+    window.addEventListener('tableUpdated', handleTableUpdate as any)
+    return () => {
+      window.removeEventListener('tableUpdated', handleTableUpdate as any)
+    }
+  }, [tables, onTablesChange, showToast, t])
+
+  const handleRefetch = useCallback(async () => {
+    setPreviewLoading(true)
+    try {
+      const data = await runIntrospectFetch()
+      onTablesChange(Array.isArray(data) ? data : [])
+      showToast(t('menus.model_metadata.manage.preview_refreshed'), 'success') // 表结构已重新获取
+    } catch (error: any) {
+      showToast(error?.message || t('menus.model_metadata.manage.preview_failed'), 'error') // 结构预览失败
+    } finally {
+      setPreviewLoading(false)
+    }
+  }, [onTablesChange, runIntrospectFetch, showToast, t])
+
+  const handleAddTable = useCallback(() => {
+    setTableNameQuery('')
+    const row = emptySchemaTable()
+    const nextTables = [...tables, row]
+    onTablesChange(nextTables)
+    setTimeout(() => {
+      tableSubmitModalRef.current?.open({
+        opeType: 'add',
+        data: row,
+        schemaTables: nextTables,
+      })
+    }, 0)
+  }, [tables, onTablesChange])
+
+  const handleDeleteTable = useCallback(
+    (record: SchemaTable) => {
+      onTablesChange(removeSchemaTable(tables, record))
+    },
+    [tables, onTablesChange],
+  )
+
+  const handleEditTable = (record: SchemaTable) => {
+    tableSubmitModalRef.current?.open({
+      opeType: 'edit',
+      data: record,
+      schemaTables: tables,
+    })
+  }
+
+  // 表列表列标题：fields.* → zh/menus/model-metadata.ts
+  const columns = [
+    {
+      title: t('menus.model_metadata.manage.fields.tableName'), // 表名
+      dataIndex: 'tableName',
+      key: 'tableName',
+      width: 200,
+    },
+    {
+      title: t('menus.model_metadata.manage.fields.tableComment'), // 表注释
+      dataIndex: 'tableComment',
+      key: 'tableComment',
+      ellipsis: true,
+      minWidth: 200,
+    },
+    {
+      title: t('menus.model_metadata.manage.fields.columnCount'), // 字段数量
+      key: 'columnCount',
+      width: 120,
+      render: (_: unknown, record: SchemaTable) => record.columns?.length ?? 0,
+    },
+    {
+      title: t('common.actions'), // 操作
+      key: 'action',
+      width: 112,
+      render: (_: unknown, record: SchemaTable) => (
+        <div className="flex items-center justify-center gap-1">
+          <CxButton.IconEdit onClick={() => handleEditTable(record)} />
+          <CxButton.IconDelete onClick={() => handleDeleteTable(record)} />
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="flex h-full min-h-0 w-full min-w-0 flex-1 flex-col">
+      {previewLoading ? (
+        <div className="flex min-h-[240px] flex-1 items-center justify-center py-8">
+          <Spin size="large" tip={t('common.loading')} />
+        </div>
+      ) : (
+        <>
+          <div
+            className={`mb-3 flex w-full min-w-0 shrink-0 items-center gap-3 px-0.5 pt-px ${
+              tables.length > 0 ? 'justify-between' : 'justify-end'
+            }`}
+          >
+            {tables.length > 0 ? (
+              <CxInput
+                allowClear
+                className="max-w-sm min-w-0 flex-1"
+                value={tableNameQuery}
+                placeholder={t('menus.model_metadata.manage.filter_table_name_placeholder')} // 按表名筛选
+                onChange={(e) => setTableNameQuery(e.target.value)}
+              />
+            ) : null}
+            <div className="flex shrink-0 items-center gap-2">
+              <CxButton type="primary" htmlType="button" onClick={handleAddTable} icon={<Plus size={16} />}>
+                {t('menus.model_metadata.manage.add_schema_table')} {/* 新增表 */}
+              </CxButton>
+              {hasPermission('model-metadata:preview') ? (
+                <CxButton
+                  type="default"
+                  htmlType="button"
+                  onClick={() => void handleRefetch()}
+                  icon={<RefreshCw size={16} />}
+                >
+                  {t('menus.model_metadata.manage.refetch_schema_preview')} {/* 重新获取 */}
+                </CxButton>
+              ) : null}
+            </div>
+          </div>
+          <div className="min-h-0 w-full min-w-0 flex-1 overflow-hidden">
+            <CxTable
+                className="min-w-0 w-full"
+                autoScrollY
+                minScrollY={160}
+                columns={columns}
+                dataSource={filteredTables}
+                rowKey={(record) => tableStableKey(record)}
+                pagination={false}
+                scroll={{ x: true }}
+              />
+          </div>
+        </>
+      )}
+
+      <TableSubmitModal ref={tableSubmitModalRef} />
+    </div>
+  )
+}

package/src/views/page-menus/model-metadata/manage/components/step3-permissions.tsx

@@ -0,0 +1,134 @@
+import { CxButton, CxInput, CxSelect, CxTable } from '@cx-ui'
+import { Plus } from 'lucide-react'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { tableEditSelectPopupMin } from '../modal/components/table-schema'
+
+export type MetadataPermissionRow = {
+  id?: string
+  permissionName: string
+  permissionColumns: string[]
+}
+
+export type SchemaTableBriefForPermissions = {
+  tableName?: string
+  columns?: { columnName?: string }[]
+}
+
+/** 全表字段名去重，不含表名 */
+function columnOptionsFromTables(tables: SchemaTableBriefForPermissions[]) {
+  const seen = new Set<string>()
+  for (const tb of tables || []) {
+    for (const col of tb.columns || []) {
+      const cn = String(col.columnName ?? '').trim()
+      if (!cn) continue
+      seen.add(cn)
+    }
+  }
+  return [...seen].sort((a, b) => a.localeCompare(b)).map((name) => ({ value: name, label: name }))
+}
+
+type Step3PermissionsProps = {
+  permissions: MetadataPermissionRow[]
+  onPermissionsChange: (rows: MetadataPermissionRow[]) => void
+  tables: SchemaTableBriefForPermissions[]
+}
+
+export function validPermissionColumnValues(tables: SchemaTableBriefForPermissions[]) {
+  return new Set(columnOptionsFromTables(tables).map((o) => o.value))
+}
+
+export default function Step3Permissions({
+  permissions,
+  onPermissionsChange,
+  tables,
+}: Step3PermissionsProps) {
+  const { t } = useTranslation()
+  const columnOptions = useMemo(() => columnOptionsFromTables(tables), [tables])
+
+  const handleAdd = () => {
+    onPermissionsChange([...permissions, { permissionName: '', permissionColumns: [] }])
+  }
+
+  const handleDelete = (index: number) => {
+    onPermissionsChange(permissions.filter((_, i) => i !== index))
+  }
+
+  const handleChange = (index: number, patch: Partial<MetadataPermissionRow>) => {
+    const next = [...permissions]
+    next[index] = { ...next[index], ...patch }
+    onPermissionsChange(next)
+  }
+
+  const columns = [
+    {
+      title: t('menus.model_metadata.manage.fields.permissionName'),
+      key: 'permissionName',
+      width: 180,
+      render: (_: unknown, __: MetadataPermissionRow, index: number) => (
+        <div className="min-w-0 max-w-full">
+          <CxInput
+            className="w-full min-w-0"
+            value={permissions[index].permissionName}
+            onChange={(e) => handleChange(index, { permissionName: e.target.value })}
+            placeholder={t('menus.model_metadata.manage.placeholders.permissionName')}
+          />
+        </div>
+      ),
+    },
+    {
+      title: t('menus.model_metadata.manage.fields.permissionColumns'),
+      key: 'permissionColumns',
+      minWidth: 360,
+      render: (_: unknown, __: MetadataPermissionRow, index: number) => (
+        <CxSelect
+          popupMatchSelectWidth={false}
+          styles={{ popup: { root: tableEditSelectPopupMin } }}
+          mode="multiple"
+          showSearch
+          allowClear
+          optionFilterProp="label"
+          className="w-full min-w-0 max-w-full !items-start [&_.ant-select-selector]:!h-auto [&_.ant-select-selector]:!min-h-8 [&_.ant-select-selector]:items-start [&_.ant-select-selection-overflow]:!flex-wrap [&_.ant-select-selection-overflow]:!gap-y-1 [&_.ant-select-selection-overflow]:!gap-x-1 [&_.ant-select-selection-item]:!m-0"
+          options={columnOptions}
+          value={permissions[index].permissionColumns || []}
+          placeholder={t('menus.model_metadata.manage.placeholders.permissionColumns')}
+          onChange={(v) =>
+            handleChange(index, {
+              permissionColumns: Array.isArray(v) ? (v as string[]) : [],
+            })
+          }
+        />
+      ),
+    },
+    {
+      title: t('common.actions'),
+      key: 'action',
+      width: 80,
+      render: (_: unknown, __: MetadataPermissionRow, index: number) => (
+        <CxButton.IconDelete onClick={() => handleDelete(index)} />
+      ),
+    },
+  ]
+
+  return (
+    <div className="flex h-full min-h-0 w-full min-w-0 flex-1 flex-col overflow-hidden">
+      <div className="mb-4 flex w-full min-w-0 shrink-0 items-center justify-between">
+        <h3 className="text-base font-medium">{t('menus.model_metadata.manage.permissions')}</h3>
+        <CxButton type="primary" onClick={handleAdd} icon={<Plus size={16} />}>
+          {t('menus.model_metadata.manage.add_permission')}
+        </CxButton>
+      </div>
+      <div className="min-h-0 w-full min-w-0 flex-1 overflow-hidden">
+          <CxTable
+            className="min-w-0 w-full"
+            autoScrollY
+            minScrollY={160}
+            columns={columns}
+            dataSource={permissions.map((row, index) => ({ ...row, key: index }))}
+            pagination={false}
+            scroll={{ x: true }}
+          />
+        </div>
+    </div>
+  )
+}