cx-chat 0.0.1

package/src/views/page-menus/model-metadata/manage/modal/detail-modal.tsx

@@ -0,0 +1,218 @@
+import { useAuth } from '@/contexts/AuthContext'
+import { getModelMetadataDetailAPI } from '@api/menus/model-metadata/manage'
+import { CxButton, CxModal, CxTag, useCxModal } from '@cx-ui'
+import { Form, Spin } from 'antd'
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type OpenPayload = {
+  opeType?: string
+  opeId?: string | number
+  data?: any
+}
+
+type Props = {
+  onCancel?: () => void
+  /** 编辑主表：打开列表侧 SubmitModal（editModelMetadataAPI） */
+  onEditMain?: (id: string | number) => void
+}
+
+/** 仅基础字段，窄弹窗 + 两列只读表单项 */
+const DETAIL_MODAL_WIDTH = 680
+
+const DetailModal = forwardRef<
+  { close: () => void; open: (payload?: OpenPayload) => void },
+  Props
+>(function DetailModal(props, ref) {
+  const { onCancel, onEditMain } = props
+  const { t } = useTranslation()
+  const { hasPermission } = useAuth()
+  const [loading, setLoading] = useState(false)
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const id = payload?.opeId ?? payload?.data?.id
+      setLoading(true)
+      modal.setFormData(null)
+      if (id == null || `${id}`.trim() === '') {
+        setLoading(false)
+        return
+      }
+      try {
+        const res = await getModelMetadataDetailAPI(id)
+        const row = (res as any)?.data ?? payload?.data ?? null
+        modal.setFormData(row)
+      } finally {
+        setLoading(false)
+      }
+    },
+    onClose: () => {
+      onCancel?.()
+    },
+  })
+
+  const { isOpen, close } = modal
+  const record = modal.formData as Record<string, any> | null
+
+  const isEnabled =
+    record != null &&
+    record.status !== undefined &&
+    record.status !== null &&
+    Number(record.status) === 1
+
+  const title = useMemo(() => t('menus.model_metadata.manage.detail'), [t])
+
+  const canEditMain =
+    !loading &&
+    record != null &&
+    record.id != null &&
+    (hasPermission('model-metadata:edit') || hasPermission('model-metadata:edit-item')) &&
+    !isEnabled &&
+    onEditMain != null
+
+  const footerActions = useMemo(() => {
+    if (!canEditMain || !record || !onEditMain) return undefined
+    const id = record.id
+    return (
+      <div className="flex w-full justify-end gap-2">
+        <CxButton
+          type="primary"
+          onClick={() => {
+            onEditMain(id)
+            close()
+          }}
+        >
+          {t('common.edit')}
+        </CxButton>
+        <CxButton type="text" onClick={close}>
+          {t('common.close')}
+        </CxButton>
+      </div>
+    )
+  }, [canEditMain, record, onEditMain, close, t])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  return (
+    <CxModal
+      title={title}
+      isOpen={isOpen}
+      onClose={close}
+      opeType="detail"
+      modalConfig={{
+        width: DETAIL_MODAL_WIDTH,
+        styles: {
+          container: { backgroundColor: '#ffffff' },
+          body: { backgroundColor: '#ffffff' },
+        },
+      }}
+      {...(footerActions != null ? { actions: footerActions } : {})}
+    >
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <Spin size="large" />
+        </div>
+      ) : !record ? (
+        <div className="flex justify-center py-10 text-sm text-gray-500">
+          {t('common.no_data')}
+        </div>
+      ) : (
+        <Form layout="horizontal" colon className="pb-1">
+          <div className="grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-2">
+            <Form.Item
+              label={t('menus.model_metadata.manage.fields.subject')}
+              className="!mb-0"
+            >
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.subject ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item
+              label={t('menus.model_metadata.manage.fields.databaseName')}
+              className="!mb-0"
+            >
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.databaseName ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item
+              label={t('menus.model_metadata.manage.fields.dbType')}
+              className="!mb-0"
+            >
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.dbType ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item label={t('menus.model_metadata.manage.fields.status')} className="!mb-0">
+              <CxTag.Enabled value={record.status} />
+            </Form.Item>
+            <Form.Item
+              label={t('menus.model_metadata.manage.fields.host')}
+              className="!mb-0"
+            >
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.host ?? '-'}:{record.port ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item
+              label={t('menus.model_metadata.manage.fields.dbSchema')}
+              className="!mb-0"
+            >
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.dbSchema ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item
+              label={t('menus.model_metadata.manage.fields.username')}
+              className="!mb-0"
+            >
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.username ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item
+              label={t('menus.model_metadata.manage.fields.passwordMasked')}
+              className="!mb-0"
+            >
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.passwordMasked ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item
+              label={t('menus.model_metadata.manage.fields.charsetName')}
+              className="!mb-0"
+            >
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.charsetName ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item label={t('common.creator')} className="!mb-0">
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.createBy ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item label={t('common.create_time')} className="!mb-0">
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.createTime ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item label={t('common.update_time')} className="!mb-0">
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.updateTime ?? '-'}
+              </div>
+            </Form.Item>
+          </div>
+        </Form>
+      )}
+    </CxModal>
+  )
+})
+
+export default DetailModal

package/src/views/page-menus/model-metadata/manage/modal/submit-modal.tsx

@@ -0,0 +1,261 @@
+import { useAuth } from '@/contexts/AuthContext'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import { DICT_DATA, DICT_KEY, ENUM_DATA } from '@/meta'
+import { addModelMetadataAPI, editModelMetadataAPI, getModelMetadataDetailAPI } from '@api/menus/model-metadata/manage'
+import { forwardRef, useImperativeHandle, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { CxForm, CxFormItem, CxInput, CxModal, CxSelect, useCxModal } from '@cx-ui'
+
+type OpenPayload = {
+  opeType?: string
+  opeId?: string | number
+  data?: any
+}
+
+type Props = {
+  onCancel?: () => void
+  onOk?: (values: any) => void | Promise<void>
+}
+
+const SUBMIT_MODAL_WIDTH = 1120
+const SUBMIT_MODAL_HEIGHT = '95vh'
+
+const submitModalShellStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+    height: SUBMIT_MODAL_HEIGHT,
+    maxHeight: SUBMIT_MODAL_HEIGHT,
+    backgroundColor: '#ffffff',
+  },
+  body: {
+    flex: '1 1 0%',
+    minHeight: 0,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    padding: '20px 32px',
+    backgroundColor: '#ffffff',
+  },
+}
+
+const SubmitModal = forwardRef<
+  { close: () => void; open: (payload?: OpenPayload) => void },
+  Props
+>(function SubmitModal(props, ref) {
+  const { onCancel, onOk } = props
+  const { t } = useTranslation()
+  const { commonDictRevision } = useAuth()
+
+  const dbTypeOptions = useMemo(
+    () => DICT_DATA[DICT_KEY.dbType]?.option ?? [],
+    [commonDictRevision],
+  )
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      form.resetFields()
+      const type = payload?.opeType ?? 'add'
+      if (type === 'edit' && payload?.opeId) {
+        try {
+          const res = await getModelMetadataDetailAPI(payload.opeId)
+          const data = res?.data
+          if (data) {
+            form.setFieldsValue({
+              subject: data.subject,
+              databaseName: data.databaseName,
+              dbType: data.dbType,
+              host: data.host,
+              port: data.port,
+              dbSchema: data.dbSchema,
+              username: data.username,
+              charsetName: data.charsetName,
+              optionsJson: data.optionsJson,
+            })
+          }
+        } catch (error) {
+          console.error('Failed to fetch model metadata detail:', error)
+        }
+      } else {
+        form.setFieldsValue({
+          subject: '',
+          databaseName: '',
+          dbType: '',
+          host: '',
+          port: undefined,
+          dbSchema: '',
+          username: '',
+          optionsJson: '',
+        })
+      }
+    },
+    onClose: () => {
+      onCancel?.()
+    },
+  })
+
+  const { isOpen, close, form, opeType, opeId } = modal
+  const { submitting, handleSubmit } = useModalSubmit()
+
+  // rules.* 中文：locales/zh/menus/model-metadata.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: opeType === 'add'
+        ? [
+            { required: true, message: t('menus.model_metadata.manage.rules.password_required') }, // 密码必填
+            { whitespace: true, message: t('menus.model_metadata.manage.rules.password_required') },
+          ]
+        : [],
+    }),
+    [t, opeType],
+  )
+
+  // 弹窗标题：新增 / 更新
+  const title = useMemo(
+    () =>
+      opeType === 'add' ? t('menus.model_metadata.manage.add') : t('menus.model_metadata.manage.edit'),
+    [opeType, t],
+  )
+
+  const onOkClick = async () => {
+    const result = await handleSubmit({
+      opeType,
+      validate: () => form.validateFields(),
+      addAPI: addModelMetadataAPI,
+      editAPI: editModelMetadataAPI,
+      transform: (values) => ({
+        ...(opeType === 'edit' ? { id: opeId } : {}),
+        subject: values.subject,
+        databaseName: values.databaseName,
+        dbType: values.dbType,
+        host: values.host,
+        port: values.port,
+        dbSchema: values.dbSchema,
+        username: values.username,
+        password: values.password,
+        charsetName: values.charsetName,
+        optionsJson: values.optionsJson,
+      }),
+      onSuccess: async ({ payload }) => {
+        await onOk?.(payload)
+      },
+    })
+    if (result) close()
+  }
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  return (
+    <CxModal
+      isOpen={isOpen}
+      modalConfig={{
+        width: SUBMIT_MODAL_WIDTH,
+        styles: {
+          ...submitModalShellStyles,
+        },
+        rootClassName: 'cx-modal-content-fill scroll',
+      }}
+      opeType={opeType}
+      submitting={submitting}
+      title={title}
+      onClose={close}
+      onSubmit={onOkClick}
+    >
+      <CxForm form={form} rules={formRules} layout="vertical" className="flex h-full min-h-0 flex-col bg-white">
+        {/* fields / placeholders：zh/menus/model-metadata.ts */}
+        <div className="flex flex-col gap-3">
+          <div className="grid grid-cols-2 gap-4">
+            {/* 主题 */}
+            <CxFormItem label={t('menus.model_metadata.manage.fields.subject')} name="subject">
+              <CxInput placeholder={t('menus.model_metadata.manage.placeholders.subject')} />
+            </CxFormItem>
+            {/* 数据库名 */}
+            <CxFormItem label={t('menus.model_metadata.manage.fields.databaseName')} name="databaseName">
+              <CxInput placeholder={t('menus.model_metadata.manage.placeholders.databaseName')} />
+            </CxFormItem>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 库类型 */}
+            <CxFormItem label={t('menus.model_metadata.manage.fields.dbType')} name="dbType">
+              <CxSelect
+                placeholder={t('menus.model_metadata.manage.placeholders.dbType')}
+                options={dbTypeOptions}
+                fieldNames={{ label: 'name', value: 'value' }}
+              />
+            </CxFormItem>
+            {/* 字符集 */}
+            <CxFormItem label={t('menus.model_metadata.manage.fields.charsetName')} name="charsetName">
+              <CxSelect
+                allowClear
+                placeholder={t('menus.model_metadata.manage.placeholders.charsetName')}
+                options={ENUM_DATA.dbCharset.option}
+              />
+            </CxFormItem>
+          </div>
+          <div className="grid grid-cols-4 gap-4">
+            {/* 主机 */}
+            <CxFormItem className="col-span-3" label={t('menus.model_metadata.manage.fields.host')} name="host">
+              <CxInput placeholder={t('menus.model_metadata.manage.placeholders.host')} />
+            </CxFormItem>
+            {/* 端口 */}
+            <CxFormItem label={t('menus.model_metadata.manage.fields.port')} name="port">
+              <CxInput placeholder={t('menus.model_metadata.manage.placeholders.port')} />
+            </CxFormItem>
+          </div>
+          <div className="grid grid-cols-4 gap-4">
+            {/* Schema */}
+            <CxFormItem className="col-span-4" label={t('menus.model_metadata.manage.fields.dbSchema')} name="dbSchema">
+              <CxInput placeholder={t('menus.model_metadata.manage.placeholders.dbSchema')} />
+            </CxFormItem>
+          </div>
+          <div className="grid grid-cols-4 gap-4">
+            {/* 用户名 */}
+            <CxFormItem className="col-span-2" label={t('menus.model_metadata.manage.fields.username')} name="username">
+              <CxInput placeholder={t('menus.model_metadata.manage.placeholders.username')} />
+            </CxFormItem>
+            {/* 密码 */}
+            <CxFormItem className="col-span-2" label={t('menus.model_metadata.manage.fields.password')} name="password">
+              <CxInput type="password" autoComplete="new-password" placeholder={t('menus.model_metadata.manage.placeholders.password')} />
+            </CxFormItem>
+          </div>
+          {/* 配置 JSON */}
+          <CxFormItem label={t('menus.model_metadata.manage.fields.optionsJson')} name="optionsJson">
+            <CxInput.Textarea rows={4} placeholder={t('menus.model_metadata.manage.placeholders.optionsJson')} />
+          </CxFormItem>
+        </div>
+      </CxForm>
+    </CxModal>
+  )
+})
+
+export default SubmitModal

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

@@ -0,0 +1,196 @@
+import type { CxModalRef } from '@cx-ui/modal/useCxModal'
+import { useCxModal } from '@cx-ui/modal/useCxModal'
+import { CxModal, CxTable, CxTabs } from '@cx-ui'
+import { Form } from 'antd'
+import { forwardRef, useImperativeHandle, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  TABLE_SUBMIT_MODAL_WIDTH,
+  clonePart,
+  normalizeForeignKeyColumnsInput,
+  normalizeIndexColumnsInput,
+  tableSubmitModalShellStyles,
+} from './components/table-schema'
+import type { Column, ForeignKey, Index, TableDetail } from './components/table-schema'
+import { useTableDetailTabs } from './components/use-table-detail-tabs'
+
+const TableDetailModal = forwardRef<CxModalRef, {}>(function TableDetailModal(_props, ref) {
+  const { t } = useTranslation()
+  const [activeTab, setActiveTab] = useState('columns')
+  const [viewColumns, setViewColumns] = useState<Column[]>([])
+  const [viewIndexes, setViewIndexes] = useState<Index[]>([])
+  const [viewForeignKeys, setViewForeignKeys] = useState<ForeignKey[]>([])
+  const [headerSnapshot, setHeaderSnapshot] = useState<{
+    tableSchema?: string
+    tableName?: string
+    tableComment?: string
+    tableType?: string
+  }>({})
+
+  const { columnsTabColumns, indexesTabColumns, foreignKeysTabColumns } = useTableDetailTabs({ t })
+
+  const modal = useCxModal({
+    onOpen: (payload: any) => {
+      setActiveTab('columns')
+      if (payload.data) {
+        modal.setFormData(payload.data)
+        setViewColumns(clonePart(payload.data.columns || []))
+        setViewIndexes(
+          (clonePart(payload.data.indexes || []) as Index[]).map((idx) => ({
+            ...idx,
+            indexColumns: normalizeIndexColumnsInput(idx.indexColumns),
+          })),
+        )
+        setViewForeignKeys(
+          (clonePart(payload.data.foreignKeys || []) as ForeignKey[]).map((fk) => ({
+            ...fk,
+            fkColumns: normalizeForeignKeyColumnsInput(fk.fkColumns),
+          })),
+        )
+        setHeaderSnapshot({
+          tableSchema: payload.data.tableSchema,
+          tableName: payload.data.tableName,
+          tableComment: payload.data.tableComment,
+          tableType: payload.data.tableType,
+        })
+      } else {
+        setViewColumns([])
+        setViewIndexes([])
+        setViewForeignKeys([])
+        setHeaderSnapshot({})
+      }
+    },
+  })
+
+  const { isOpen, close, open } = modal
+  const data = modal.formData as TableDetail | null
+  const modalTitle = `${t('common.view')}: ${data?.tableName || headerSnapshot.tableName || ''}`
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open,
+      close,
+    }),
+    [open, close],
+  )
+
+  const tabItems = [
+    {
+      key: 'columns',
+      label: `${t('menus.model_metadata.manage.tab_columns')} (${viewColumns.length})`,
+      children: (
+        <div className="flex h-full min-h-0 flex-col">
+          <div className="min-h-0 flex-1 overflow-hidden rounded border border-gray-200 dark:border-gray-700">
+            <CxTable<Column>
+              size="mini"
+              autoScrollY
+              minScrollY={120}
+              columns={columnsTabColumns}
+              dataSource={viewColumns}
+              rowKey={(_, index) => String(index)}
+              scroll={{ x: 844 }}
+            />
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'indexes',
+      label: `${t('menus.model_metadata.manage.tab_indexes')} (${viewIndexes.length})`,
+      children: (
+        <div className="flex h-full min-h-0 flex-col">
+          <div className="min-h-0 flex-1 overflow-hidden rounded border border-gray-200 dark:border-gray-700">
+            <CxTable<Index>
+              size="mini"
+              autoScrollY
+              minScrollY={120}
+              columns={indexesTabColumns}
+              dataSource={viewIndexes}
+              rowKey={(_, index) => String(index)}
+              scroll={{ x: 800 }}
+            />
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'foreignKeys',
+      label: `${t('menus.model_metadata.manage.tab_foreignKeys')} (${viewForeignKeys.length})`,
+      children: (
+        <div className="flex h-full min-h-0 flex-col">
+          <div className="min-h-0 flex-1 overflow-hidden rounded border border-gray-200 dark:border-gray-700">
+            <CxTable<ForeignKey>
+              size="mini"
+              autoScrollY
+              minScrollY={120}
+              columns={foreignKeysTabColumns}
+              dataSource={viewForeignKeys}
+              rowKey={(_, index) => String(index)}
+              scroll={{ x: 1108 }}
+            />
+          </div>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <CxModal
+      title={modalTitle}
+      isOpen={isOpen}
+      onClose={close}
+      opeType="detail"
+      modalConfig={{
+        width: TABLE_SUBMIT_MODAL_WIDTH,
+        styles: { ...tableSubmitModalShellStyles },
+        rootClassName: 'cx-modal-content-fill scroll',
+      }}
+    >
+      <div className="flex h-full min-h-0 flex-1 flex-col gap-0 overflow-hidden">
+        <div className="shrink-0 border-b border-gray-200 pb-4 dark:border-gray-700">
+          <Form layout="horizontal" colon className="w-full">
+            <div className="grid grid-cols-1 gap-x-4 gap-y-2 md:grid-cols-3">
+              <Form.Item label={t('menus.model_metadata.manage.fields.tableSchema')} className="!mb-0">
+                <div className="text-sm text-gray-900 dark:text-gray-100">
+                  {headerSnapshot.tableSchema ?? '—'}
+                </div>
+              </Form.Item>
+              <Form.Item label={t('menus.model_metadata.manage.fields.tableName')} className="!mb-0">
+                <div className="text-sm text-gray-900 dark:text-gray-100">
+                  {headerSnapshot.tableName ?? '—'}
+                </div>
+              </Form.Item>
+              <Form.Item label={t('menus.model_metadata.manage.fields.tableType')} className="!mb-0">
+                <div className="text-sm text-gray-900 dark:text-gray-100">
+                  {headerSnapshot.tableType ?? '—'}
+                </div>
+              </Form.Item>
+              <Form.Item
+                label={t('menus.model_metadata.manage.fields.tableComment')}
+                className="!mb-0 md:col-span-3"
+              >
+                <div className="text-sm text-gray-900 dark:text-gray-100">
+                  {headerSnapshot.tableComment ?? '—'}
+                </div>
+              </Form.Item>
+            </div>
+          </Form>
+        </div>
+
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden pt-4">
+          <CxTabs
+            activeKey={activeTab}
+            onChange={setActiveTab}
+            items={tabItems}
+            className="flex min-h-0 flex-1 flex-col [&_.ant-tabs-nav]:shrink-0 [&_.ant-tabs-content-holder]:min-h-0 [&_.ant-tabs-content-holder]:flex-1 [&_.ant-tabs-content]:h-full [&_.ant-tabs-tabpane]:h-full"
+          />
+        </div>
+      </div>
+    </CxModal>
+  )
+})
+
+TableDetailModal.displayName = 'TableDetailModal'
+
+export default TableDetailModal