cx-chat 0.0.1 → 0.0.3

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

@@ -1,232 +0,0 @@
-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

@@ -1,316 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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>
-  )
-}