cx-chat 0.0.1

package/src/views/page-menus/model-metadata/manage/components/step4-documents.tsx

@@ -0,0 +1,134 @@
+import { CxButton, CxInput, CxTable } from '@cx-ui'
+import { Plus } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+type Document = {
+  id?: string
+  name: string
+  code: string
+  description: string
+  text: string
+}
+
+type Step4DocumentsProps = {
+  documents: Document[]
+  onDocumentsChange: (documents: Document[]) => void
+}
+
+export default function Step4Documents({ documents, onDocumentsChange }: Step4DocumentsProps) {
+  const { t } = useTranslation()
+
+  const handleAdd = () => {
+    onDocumentsChange([
+      ...documents,
+      { name: '', code: '', description: '', text: '' },
+    ])
+  }
+
+  const handleDelete = (index: number) => {
+    onDocumentsChange(documents.filter((_, i) => i !== index))
+  }
+
+  const handleChange = (index: number, field: keyof Document, value: string) => {
+    const next = [...documents]
+    next[index] = { ...next[index], [field]: value }
+    onDocumentsChange(next)
+  }
+
+  const columns = [
+    {
+      title: t('menus.model_metadata.manage.fields.docName'),
+      key: 'name',
+      width: 150,
+      render: (_: unknown, __: Document, index: number) => (
+        <div className="min-w-0 max-w-full">
+          <CxInput
+            className="w-full min-w-0"
+            value={documents[index].name}
+            onChange={(e) => handleChange(index, 'name', e.target.value)}
+            placeholder={t('menus.model_metadata.manage.placeholders.docName')}
+          />
+        </div>
+      ),
+    },
+    {
+      title: t('menus.model_metadata.manage.fields.docCode'),
+      key: 'code',
+      width: 150,
+      render: (_: unknown, __: Document, index: number) => (
+        <div className="min-w-0 max-w-full">
+          <CxInput
+            className="w-full min-w-0"
+            value={documents[index].code}
+            onChange={(e) => handleChange(index, 'code', e.target.value)}
+            placeholder={t('menus.model_metadata.manage.placeholders.docCode')}
+          />
+        </div>
+      ),
+    },
+    {
+      title: t('menus.model_metadata.manage.fields.docDescription'),
+      key: 'description',
+      ellipsis: true,
+      minWidth: 180,
+      render: (_: unknown, __: Document, index: number) => (
+        <div className="min-w-0 max-w-full">
+          <CxInput
+            className="w-full min-w-0"
+            value={documents[index].description}
+            onChange={(e) => handleChange(index, 'description', e.target.value)}
+            placeholder={t('menus.model_metadata.manage.placeholders.docDescription')}
+          />
+        </div>
+      ),
+    },
+    {
+      title: t('menus.model_metadata.manage.fields.docText'),
+      key: 'text',
+      ellipsis: true,
+      minWidth: 220,
+      render: (_: unknown, __: Document, index: number) => (
+        <div className="min-w-0 max-w-full">
+          <CxInput.Textarea
+            className="w-full min-w-0"
+            value={documents[index].text}
+            onChange={(e) => handleChange(index, 'text', e.target.value)}
+            placeholder={t('menus.model_metadata.manage.placeholders.docText')}
+            rows={2}
+          />
+        </div>
+      ),
+    },
+    {
+      title: t('common.actions'),
+      key: 'action',
+      width: 80,
+      render: (_: unknown, __: Document, 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.documents')}</h3>
+        <CxButton type="primary" onClick={handleAdd} icon={<Plus size={16} />}>
+          {t('menus.model_metadata.manage.add_document')}
+        </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={documents.map((doc, index) => ({ ...doc, key: index }))}
+          pagination={false}
+          scroll={{ x: true }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/views/page-menus/model-metadata/manage/components/step5-example-sql.tsx

@@ -0,0 +1,101 @@
+import { CxButton, CxInput, CxTable } from '@cx-ui'
+import { Plus } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+type ExampleSql = {
+  id?: string
+  exampleSql: string
+  description: string
+}
+
+type Step5ExampleSqlProps = {
+  exampleSqlList: ExampleSql[]
+  onExampleSqlListChange: (list: ExampleSql[]) => void
+}
+
+export default function Step5ExampleSql({
+  exampleSqlList,
+  onExampleSqlListChange,
+}: Step5ExampleSqlProps) {
+  const { t } = useTranslation()
+
+  const handleAdd = () => {
+    onExampleSqlListChange([...exampleSqlList, { exampleSql: '', description: '' }])
+  }
+
+  const handleDelete = (index: number) => {
+    onExampleSqlListChange(exampleSqlList.filter((_, i) => i !== index))
+  }
+
+  const handleChange = (index: number, field: keyof ExampleSql, value: string) => {
+    const next = [...exampleSqlList]
+    next[index] = { ...next[index], [field]: value }
+    onExampleSqlListChange(next)
+  }
+
+  const columns = [
+    {
+      title: t('menus.model_metadata.manage.fields.exampleSql'),
+      key: 'exampleSql',
+      minWidth: 280,
+      render: (_: unknown, __: ExampleSql, index: number) => (
+        <div className="min-w-0 max-w-full">
+          <CxInput.Textarea
+            className="w-full min-w-0"
+            value={exampleSqlList[index].exampleSql}
+            onChange={(e) => handleChange(index, 'exampleSql', e.target.value)}
+            placeholder={t('menus.model_metadata.manage.placeholders.exampleSql')}
+            rows={3}
+          />
+        </div>
+      ),
+    },
+    {
+      title: t('menus.model_metadata.manage.fields.exampleSqlDescription'),
+      key: 'description',
+      width: 250,
+      minWidth: 200,
+      render: (_: unknown, __: ExampleSql, index: number) => (
+        <div className="min-w-0 max-w-full">
+          <CxInput
+            className="w-full min-w-0"
+            value={exampleSqlList[index].description}
+            onChange={(e) => handleChange(index, 'description', e.target.value)}
+            placeholder={t('menus.model_metadata.manage.placeholders.exampleSqlDescription')}
+          />
+        </div>
+      ),
+    },
+    {
+      title: t('common.actions'),
+      key: 'action',
+      width: 80,
+      render: (_: unknown, __: ExampleSql, 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.exampleSqlList')}</h3>
+        <CxButton type="primary" onClick={handleAdd} icon={<Plus size={16} />}>
+          {t('menus.model_metadata.manage.add_example_sql')}
+        </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={exampleSqlList.map((sql, index) => ({ ...sql, key: index }))}
+          pagination={false}
+          scroll={{ x: true }}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,338 @@
+import { useToast } from '@/contexts/ToastContext'
+import { useAuth } from '@/contexts/AuthContext'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import { useStepForm } from '@/hooks/useStepForm'
+import { addModelMetadataAPI, testConnectionAPI } from '@api/menus/model-metadata/manage'
+import {
+  buildModelMetadataPayloadParts,
+  validateAddBasicFieldsPresent,
+  validateDocumentsForSubmit,
+  validateModelMetadataItemDetail,
+  validatePermissionsForSubmit,
+} from '../hooks/model-metadata-submit-shared'
+import { useModelMetadataItemState } from '../hooks/use-model-metadata-item-state'
+import { CxButton, CxSteps } from '@cx-ui'
+import { CheckCircle2, ChevronLeft, Database } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+
+import Step1BasicInfo, {
+  type Step1BasicInfoHandle,
+  modelMetadataConnectionDigest,
+} from './step1-basic-info'
+import Step2Schema from './step2-schema'
+import Step3Permissions from './step3-permissions'
+import Step4Documents from './step4-documents'
+import Step5ExampleSql from './step5-example-sql'
+
+// 步骤条 i18n → locales/zh/menus/model-metadata/manage.ts
+const steps = [
+  {
+    title: 'menus.model_metadata.manage.step1_title',
+    description: 'menus.model_metadata.manage.step1_description',
+  },
+  {
+    title: 'menus.model_metadata.manage.step2_title',
+    description: 'menus.model_metadata.manage.step2_description',
+  },
+  {
+    title: 'menus.model_metadata.manage.step3_title',
+    description: 'menus.model_metadata.manage.step3_description',
+  },
+  {
+    title: 'menus.model_metadata.manage.step4_title',
+    description: 'menus.model_metadata.manage.step4_description',
+  },
+  {
+    title: 'menus.model_metadata.manage.step5_title',
+    description: 'menus.model_metadata.manage.step5_description',
+  },
+]
+
+function ModelMetadataSubmitAddView() {
+  const { showToast } = useToast()
+  const { hasPermission } = useAuth()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  const { submitting, handleSubmit } = useModalSubmit()
+
+  const step1Ref = useRef<Step1BasicInfoHandle>(null)
+  const verifiedConnectionDigestRef = useRef<string | null>(null)
+  const [basicFields, setBasicFields] = useState<Record<string, any>>({})
+  const [schemaPreviewNonce, setSchemaPreviewNonce] = useState(0)
+  const {
+    tables,
+    setTables,
+    permissions,
+    setPermissions,
+    documents,
+    setDocuments,
+    exampleSqlList,
+    setExampleSqlList,
+  } = useModelMetadataItemState()
+
+  const {
+    current,
+    setCurrent,
+    connectionTested,
+    setConnectionTested,
+    testingConnection,
+    setTestingConnection,
+  } = useStepForm()
+
+  const handleConnectionDigestChange = useCallback(
+    (digest: string) => {
+      const verified = verifiedConnectionDigestRef.current
+      if (verified !== null && digest !== verified) {
+        setConnectionTested(false)
+      }
+    },
+    [setConnectionTested],
+  )
+
+  useEffect(() => {
+    setPermissions([
+      { permissionName: '用户', permissionColumns: [] },
+      { permissionName: '组织', permissionColumns: [] },
+    ])
+  }, [])
+
+  const handleBack = () => {
+    navigate(-1)
+  }
+
+  const next = async () => {
+    try {
+      if (current === 0) {
+        const values = await step1Ref.current?.validateForNext()
+        if (!values) return
+        if (hasPermission('model-metadata:test') && !connectionTested) {
+          showToast(t('menus.model_metadata.manage.test_connection_required'), 'warning') // 须先测连接
+          return
+        }
+        setBasicFields(values)
+        setSchemaPreviewNonce((n) => n + 1)
+      } else if (current === 2) {
+        const permErr = validatePermissionsForSubmit(permissions)
+        if (permErr) {
+          showToast(t(`menus.model_metadata.manage.rules.${permErr}`), 'warning')
+          return
+        }
+      } else if (current === 3) {
+        const docErr = validateDocumentsForSubmit(documents)
+        if (docErr) {
+          showToast(t(`menus.model_metadata.manage.rules.${docErr}`), 'warning')
+          return
+        }
+      }
+      setCurrent(current + 1)
+    } catch {
+      showToast(t('common.form_validation_warning'), 'error')
+    }
+  }
+
+  const handleTestConnection = async () => {
+    try {
+      await step1Ref.current?.validateForConnectionTest()
+      setTestingConnection(true)
+      const payload = step1Ref.current?.getConnectionTestPayload()
+      await testConnectionAPI(payload)
+      verifiedConnectionDigestRef.current = modelMetadataConnectionDigest(payload)
+      setConnectionTested(true)
+      showToast(t('menus.model_metadata.manage.connection_test_success'), 'success') // 连接测试成功
+    } catch (error: any) {
+      console.error('Connection test failed:', error)
+      setConnectionTested(false)
+      verifiedConnectionDigestRef.current = null
+      showToast(error?.message || t('menus.model_metadata.manage.connection_test_failed'), 'error') // 连接测试失败
+    } finally {
+      setTestingConnection(false)
+    }
+  }
+
+  const prev = () => {
+    setCurrent(current - 1)
+  }
+
+  const onSubmit = async () => {
+    if (!validateAddBasicFieldsPresent(basicFields)) {
+      showToast(t('common.form_validation_warning'), 'error')
+      return
+    }
+
+    const detailErr = validateModelMetadataItemDetail({
+      tables,
+      permissions,
+      documents,
+      exampleSqlList,
+    })
+    if (detailErr) {
+      showToast(t(`menus.model_metadata.manage.rules.${detailErr}`), 'warning')
+      return
+    }
+
+    const { tablesPayload, permissionsPayload, documents: docOut, exampleSqlList: sqlOut } =
+      buildModelMetadataPayloadParts({
+        tables,
+        permissions,
+        documents,
+        exampleSqlList,
+      })
+
+    const body = {
+      ...basicFields,
+      tables: tablesPayload,
+      permissions: permissionsPayload,
+      documents: docOut,
+      exampleSqlList: sqlOut,
+    }
+
+    await handleSubmit({
+      opeType: 'add',
+      validate: async () => body,
+      addAPI: addModelMetadataAPI,
+      successMessage: {
+        add: t('common.add_success'),
+      },
+      onSuccess: async () => {
+        navigate(-1)
+      },
+    })
+  }
+
+  const renderStepContent = () => {
+    switch (current) {
+      case 0:
+        return (
+          <Step1BasicInfo
+            ref={step1Ref}
+            initialValues={basicFields}
+            onConnectionDigestChange={handleConnectionDigestChange}
+          />
+        )
+      case 1:
+        return (
+          <Step2Schema
+            connectionParams={basicFields}
+            tables={tables}
+            onTablesChange={setTables}
+            isEdit={false}
+            currentStep={current}
+            previewNonce={schemaPreviewNonce}
+          />
+        )
+      case 2:
+        return (
+          <Step3Permissions
+            permissions={permissions}
+            onPermissionsChange={setPermissions}
+            tables={tables}
+          />
+        )
+      case 3:
+        return <Step4Documents documents={documents} onDocumentsChange={setDocuments} />
+      case 4:
+        return (
+          <Step5ExampleSql
+            exampleSqlList={exampleSqlList}
+            onExampleSqlListChange={setExampleSqlList}
+          />
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="flex h-full flex-col bg-white">
+      {/* 顶部：与知识库文档页 ListPageView 标题区一致（无副标题） */}
+      <div className="shrink-0 bg-white px-6 pb-3 pt-6">
+        <div className="flex items-center justify-between">
+          <div className="flex min-w-0 flex-1 items-center gap-3">
+            <CxButton.Icon
+              className="!p-2.5 shrink-0 rounded-lg border border-solid border-gray-300 bg-white shadow-sm"
+              type="default"
+              icon={<ChevronLeft size={22} strokeWidth={2.25} />}
+              onClick={handleBack}
+              title={t('common.back')}
+              tooltipTone="default"
+            />
+            <h1 className="flex min-w-0 flex-wrap items-center gap-3 text-3xl font-bold text-transparent bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text">
+              <Database className="shrink-0 text-blue-400" size={32} aria-hidden />
+              <span className="min-w-0">{t('menus.model_metadata.manage.add')}</span>
+              {/* i18n：edit / add */}
+            </h1>
+          </div>
+        </div>
+      </div>
+
+      <div className="shrink-0 bg-white px-6 pb-1.5 pt-0">
+        <CxSteps
+          current={current}
+          items={steps.map((step, index) => ({
+            title: t(step.title),
+            description: t(step.description),
+            status: index < current ? 'finish' : index === current ? 'process' : 'wait',
+          }))}
+          className="[&_.ant-steps-item]:!pb-0 [&_.ant-steps-item-title]:!text-[13px] [&_.ant-steps-item-title]:!leading-snug [&_.ant-steps-item-description]:!mt-0.5 [&_.ant-steps-item-description]:!text-xs [&_.ant-steps-item-description]:!leading-snug"
+        />
+      </div>
+
+      <div
+        className={
+          current >= 1 && current <= 4
+            ? 'flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-hidden bg-white px-5 py-4'
+            : 'flex-1 overflow-auto bg-white px-5 py-4'
+        }
+      >
+        <div
+          className={
+            current >= 1 && current <= 4
+              ? 'mx-auto flex h-full min-h-0 w-full max-w-6xl flex-1 flex-col rounded-lg bg-white p-4'
+              : 'mx-auto max-w-6xl rounded-lg bg-white p-4'
+          }
+        >
+          {renderStepContent()}
+        </div>
+      </div>
+
+      <div className="shrink-0 border-t border-gray-200 bg-white px-5 py-3">
+        <div className="mx-auto flex max-w-6xl justify-between">
+          <div>
+            <CxButton onClick={handleBack}>{t('common.cancel')}</CxButton>
+          </div>
+          <div className="flex gap-3">
+            {current > 0 && (
+              <CxButton onClick={prev}>{t('common.prev_step')}</CxButton>
+            )}
+            {current === 0 && hasPermission('model-metadata:test') && (
+              <CxButton
+                type={connectionTested ? 'primary' : 'default'}
+                loading={testingConnection}
+                icon={connectionTested ? <CheckCircle2 size={16} /> : undefined}
+                onClick={handleTestConnection}
+              >
+                {connectionTested
+                  ? t('menus.model_metadata.manage.connection_tested') // 已测试连接
+                  : t('menus.model_metadata.manage.test_connection')} {/* 测试连接 */}
+              </CxButton>
+            )}
+            {current < steps.length - 1 ? (
+              <CxButton type="primary" onClick={next}>
+                {t('common.next')}
+              </CxButton>
+            ) : (
+              <CxButton type="primary" loading={submitting} onClick={() => void onSubmit()}>
+                {t('common.submit')}
+              </CxButton>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ModelMetadataSubmitAddView