cx-chat 0.0.2 → 0.0.3

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

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

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

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