cx-chat 0.0.1

package/src/views/page-menus/model-metadata/training/components/detail-records/summary-list.tsx

@@ -0,0 +1,153 @@
+import { TAG_COLOR } from '@/meta'
+import { CodeView } from '@/components/common/code-view'
+import { CxTag } from '@cx-ui'
+import { useTranslation } from 'react-i18next'
+import { buildOperationDetailLines } from './summary-lines'
+import type { SummaryLine, SummarySeg } from './summary-lines'
+import type { TrainingChangeCategory, TrainingChangeFlatRow, TrainingChangeOp } from './types'
+
+/** 变更前/后对比值：半透明白/暗层叠在彩色详情底上 */
+const changeValueBoxClass =
+  'inline-block max-w-full whitespace-pre-wrap break-words rounded border border-black/[0.06] bg-white/75 px-1.5 py-0.5 font-semibold text-gray-900 shadow-sm dark:border-white/12 dark:bg-black/30 dark:text-gray-100 dark:shadow-none'
+
+function opLabel(t: (k: string) => string, op: TrainingChangeOp) {
+  if (op === 'added') return t('menus.model_metadata.training.change_added')
+  if (op === 'modified') return t('menus.model_metadata.training.change_modified')
+  return t('menus.model_metadata.training.change_removed')
+}
+
+function changeOpTagColor(op: TrainingChangeOp): string {
+  if (op === 'added') return TAG_COLOR.success
+  if (op === 'modified') return TAG_COLOR.warning
+  return TAG_COLOR.error
+}
+
+function categoryScopeLabel(t: (k: string) => string, category: TrainingChangeCategory) {
+  if (category === 'tables') return t('menus.model_metadata.manage.step2_title')
+  if (category === 'documents') return t('menus.model_metadata.training.change_section_documents')
+  return t('menus.model_metadata.training.change_section_example_sql')
+}
+
+/** 右侧变更详情框：按操作类型（新增 / 修改 / 删除） */
+function opDetailPanelClass(op: TrainingChangeOp): string {
+  if (op === 'added') {
+    return 'border-emerald-200/90 bg-emerald-50/90 dark:border-emerald-800/45 dark:bg-emerald-950/30'
+  }
+  if (op === 'modified') {
+    return 'border-amber-200/90 bg-amber-50/90 dark:border-amber-800/40 dark:bg-amber-950/25'
+  }
+  return 'border-rose-200/90 bg-rose-50/90 dark:border-rose-800/45 dark:bg-rose-950/30'
+}
+
+function renderSeg(seg: SummarySeg, i: number) {
+  if (typeof seg === 'string') {
+    return (
+      <span key={i} className="whitespace-pre-wrap break-words">
+        {seg}
+      </span>
+    )
+  }
+  if (seg.role === 'changeBefore') {
+    return (
+      <span key={i} className={changeValueBoxClass}>
+        {seg.text}
+      </span>
+    )
+  }
+  if (seg.role === 'changeAfter') {
+    return (
+      <span key={i} className={changeValueBoxClass}>
+        {seg.text}
+      </span>
+    )
+  }
+  if (seg.role === 'sqlSnippet') {
+    return (
+      <div key={i} className="min-w-0 w-full max-w-full">
+        <CodeView.SQL maxHeight={260} className="text-xs">
+          {seg.text}
+        </CodeView.SQL>
+      </div>
+    )
+  }
+  return null
+}
+
+function renderDetailLine(line: SummaryLine, li: number, t: (k: string) => string) {
+  if (line.length === 1 && typeof line[0] === 'object' && line[0].role === 'changeSqlPair') {
+    const p = line[0]
+    return (
+      <div key={li} className="flex min-w-0 flex-col gap-2">
+        <div className="text-sm font-medium text-gray-800 dark:text-gray-100">{p.fieldLabel}</div>
+        <div className="flex min-w-0 flex-col gap-1.5">
+          <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
+            {t('menus.model_metadata.training.detail_sql_before')}
+          </span>
+          <CodeView.SQL maxHeight={220} className="text-xs">
+            {p.before}
+          </CodeView.SQL>
+          <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
+            {t('menus.model_metadata.training.detail_sql_after')}
+          </span>
+          <CodeView.SQL maxHeight={220} className="text-xs">
+            {p.after}
+          </CodeView.SQL>
+        </div>
+      </div>
+    )
+  }
+  const layoutCol = line.some((s) => typeof s === 'object' && s.role === 'sqlSnippet')
+  return (
+    <div
+      key={li}
+      className={
+        layoutCol
+          ? 'flex min-w-0 flex-col gap-1.5 items-stretch'
+          : 'flex min-w-0 flex-wrap items-baseline gap-x-1 gap-y-1'
+      }
+    >
+      {line.map((seg, si) => renderSeg(seg, si))}
+    </div>
+  )
+}
+
+function renderDetailLines(category: TrainingChangeCategory, op: TrainingChangeOp, item: any, t: (k: string) => string) {
+  const detailLines = buildOperationDetailLines(t, category, op, item)
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-2 text-sm leading-relaxed text-gray-800 dark:text-gray-100">
+      {detailLines.map((line, li) => renderDetailLine(line, li, t))}
+    </div>
+  )
+}
+
+type Props = {
+  rows: TrainingChangeFlatRow[]
+  showScope?: boolean
+  className?: string
+}
+
+export default function SummaryList({ rows, showScope = true, className }: Props) {
+  const { t } = useTranslation()
+  if (!rows.length) return null
+  return (
+    <div className={`flex min-w-0 flex-col gap-2 text-sm leading-relaxed text-gray-800 dark:text-gray-100 ${className ?? ''}`}>
+      {rows.map((r) => (
+        <div key={r.key} className="min-w-0">
+          <div className="flex min-w-0 flex-col gap-1.5">
+            {showScope ? (
+              <span className="text-xs text-gray-500 dark:text-gray-400">{categoryScopeLabel(t, r.category)}</span>
+            ) : null}
+            <div className="flex min-w-0 flex-wrap items-start gap-2">
+              <CxTag color={changeOpTagColor(r.op)} className="shrink-0">
+                {opLabel(t, r.op)}
+              </CxTag>
+              <div className={`min-w-0 flex-1 rounded-md border px-3 py-2 ${opDetailPanelClass(r.op)}`}>
+                {renderDetailLines(r.category, r.op, r.item, t)}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/views/page-menus/model-metadata/training/components/detail-records/timeline.tsx

@@ -0,0 +1,103 @@
+import { CxTimeline } from '@cx-ui'
+import { Clock } from 'lucide-react'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import RecordNodeCard from './node-card'
+import { parseTrainingRowContent, type TrainingDetailItem } from './types'
+
+function MetadataCreateSummary({ c }: { c: any }) {
+  const { t } = useTranslation()
+  if (!c || c.event !== 'metadata_create') return null
+  const lines: { label: string; value: string }[] = []
+  if (c.subject) {
+    lines.push({ label: t('menus.model_metadata.training.fields.subject'), value: String(c.subject) })
+  }
+  if (c.operatorName) {
+    lines.push({ label: t('menus.model_metadata.training.change_operator'), value: String(c.operatorName) })
+  }
+  return (
+    <div className="w-full min-w-0 rounded-md border border-blue-100 bg-blue-50/80 px-3 py-2 text-sm text-gray-800 dark:border-blue-900/50 dark:bg-blue-950/30 dark:text-gray-100">
+      <div className="mb-2 font-medium text-blue-800 dark:text-blue-200">
+        {t('menus.model_metadata.training.change_metadata_create')}
+      </div>
+      {lines.length ? (
+        <div className="flex flex-col gap-1.5 leading-relaxed">
+          {lines.map((line, i) => (
+            <div key={i} className="min-w-0 break-words">
+              <span className="text-gray-600 dark:text-gray-400">{line.label}：</span>
+              <span className="text-gray-900 dark:text-gray-100">{line.value}</span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <span className="text-gray-500 dark:text-gray-400">—</span>
+      )}
+    </div>
+  )
+}
+
+export type RecordsTimelineProps = {
+  details: TrainingDetailItem[]
+  summaryPreviewLimit?: number
+}
+
+export default function RecordsTimeline({ details, summaryPreviewLimit }: RecordsTimelineProps) {
+  const { t } = useTranslation()
+
+  const items = useMemo(() => {
+    const ordered = [...details].reverse()
+    return ordered.map((row) => {
+      const c = parseTrainingRowContent(row)
+      const isCreate = c?.event === 'metadata_create'
+      const content = (
+        <div className="w-full min-w-0 max-w-full pt-0.5">
+          {row.updateBy ? (
+            <div className="mb-2 text-xs text-gray-500 dark:text-gray-400">
+              {t(isCreate ? 'common.creator' : 'menus.model_metadata.training.detail_cols.updateBy')}：{row.updateBy}
+            </div>
+          ) : null}
+          {isCreate ? (
+            <MetadataCreateSummary c={c} />
+          ) : (
+            <RecordNodeCard row={row} summaryPreviewLimit={summaryPreviewLimit} />
+          )}
+        </div>
+      )
+      return {
+        title: (
+          <div className="flex min-w-0 flex-col gap-1 pr-1 text-right">
+            <span className="break-words text-base font-semibold leading-snug text-gray-900 dark:text-gray-100">
+              {row.schemaVersion ?? '—'}
+            </span>
+            <span className="break-words text-base font-normal leading-snug text-gray-600 dark:text-gray-400">
+              {row.updateTime ?? '—'}
+            </span>
+          </div>
+        ),
+        content,
+        color: 'blue' as const,
+        icon: <Clock className="size-5 shrink-0" aria-hidden strokeWidth={2} />,
+      }
+    })
+  }, [details, t, summaryPreviewLimit])
+
+  if (!details.length) {
+    return (
+      <div className="rounded-lg border border-dashed border-gray-300 py-10 text-center text-sm text-gray-400 dark:border-gray-600">
+        {t('menus.model_metadata.training.detail_empty_details')}
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full min-w-0 max-w-full rounded-lg border border-gray-200 bg-white px-3 py-3 dark:border-gray-700 dark:bg-gray-800/40 md:px-4 md:py-4">
+      <CxTimeline
+        orientation="vertical"
+        mode="start"
+        titleSpan="300px"
+        items={items}
+        className="training-change-timeline w-full min-w-0 text-left [&_.ant-timeline-item-header]:text-start [&_.ant-timeline-item-content]:!max-w-none [&_.ant-timeline-item-content]:w-full [&_.ant-timeline-item-content]:min-w-0 [&_.ant-timeline-item-content]:text-left [&_.ant-timeline-item-section]:min-w-0 [&_.ant-timeline-item-wrapper]:max-w-full"
+      />
+    </div>
+  )
+}

package/src/views/page-menus/model-metadata/training/components/detail-records/types.ts

@@ -0,0 +1,82 @@
+export type TrainingChangeOp = 'added' | 'modified' | 'removed'
+
+export type TrainingChangeCategory = 'tables' | 'documents' | 'exampleSql'
+
+export type TrainingChangeFlatRow = {
+  key: string
+  op: TrainingChangeOp
+  category: TrainingChangeCategory
+  schemaVersion?: string
+  updateTime?: string
+  updateBy?: string
+  item: any
+}
+
+export type TrainingDetailItem = {
+  id?: string
+  schemaVersion?: string
+  updateBy?: string
+  updateTime?: string
+  changeContentRaw?: string
+  changeContent?: any
+}
+
+export function parseTrainingRowContent(row: TrainingDetailItem) {
+  if (row?.changeContent != null && typeof row.changeContent === 'object') return row.changeContent
+  const raw = row?.changeContentRaw
+  if (raw == null || raw === '') return null
+  try {
+    return JSON.parse(String(raw))
+  } catch {
+    return null
+  }
+}
+
+export function flattenOneCategory(
+  c: any,
+  category: TrainingChangeCategory,
+  meta: { schemaVersion?: string; updateTime?: string; updateBy?: string; detailId?: string },
+): TrainingChangeFlatRow[] {
+  const rows: TrainingChangeFlatRow[] = []
+  if (!c || c.event === 'metadata_create') return rows
+
+  const pushOpList = (list: any[] | undefined, op: TrainingChangeOp) => {
+    if (!Array.isArray(list)) return
+    list.forEach((item: any, i: number) => {
+      rows.push({
+        key: `${meta.detailId ?? 'd'}-${category}-${op}-${i}-${item?.id ?? item?.code ?? ''}`,
+        op,
+        category,
+        schemaVersion: meta.schemaVersion,
+        updateTime: meta.updateTime,
+        updateBy: meta.updateBy,
+        item,
+      })
+    })
+  }
+
+  if (category === 'tables') {
+    const legacy = c.tables
+    if (legacy && typeof legacy === 'object') {
+      pushOpList(legacy.added, 'added')
+      pushOpList(legacy.modified, 'modified')
+      pushOpList(legacy.removed, 'removed')
+      return rows
+    }
+    const sch = c.schema
+    if (sch && typeof sch === 'object') {
+      pushOpList(sch.tablesAdded, 'added')
+      pushOpList(sch.tablesModified, 'modified')
+      pushOpList(sch.tablesRemoved, 'removed')
+      return rows
+    }
+    return rows
+  }
+
+  const grp = c[category]
+  if (!grp || typeof grp !== 'object') return rows
+  pushOpList(grp.added, 'added')
+  pushOpList(grp.modified, 'modified')
+  pushOpList(grp.removed, 'removed')
+  return rows
+}

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

@@ -0,0 +1,159 @@
+import { getModelMetadataTrainingDetailAPI } from '@api/menus/model-metadata/training'
+import { CxButton, CxTag } from '@cx-ui'
+import { Form, Spin } from 'antd'
+import { ChevronLeft, GraduationCap } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate, useParams } from 'react-router-dom'
+
+import RecordsTimeline, { type TrainingDetailItem } from './components/detail-records'
+
+/** 时间线节点内操作摘要最多展示条数；超出部分通过「查看更多」在弹框中查看 */
+const TRAINING_CHANGE_SUMMARY_PREVIEW_LIMIT = 5
+
+type TrainingDetail = {
+  id?: string
+  metadataId?: string
+  subject?: string
+  schemaVersion?: string
+  syncStatus?: number
+  syncTime?: string
+  createTime?: string
+  createBy?: string
+  updateTime?: string
+  updateBy?: string
+  details?: TrainingDetailItem[]
+}
+
+function ModelMetadataTrainingDetailView() {
+  const { t } = useTranslation()
+  const { metadataId = '', id = '' } = useParams<{ metadataId: string; id: string }>()
+  const navigate = useNavigate()
+  const [loading, setLoading] = useState(false)
+  const [detail, setDetail] = useState<TrainingDetail | null>(null)
+
+  useEffect(() => {
+    if (!id) return
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const res = await getModelMetadataTrainingDetailAPI(id)
+        const data = (res as any)?.data ?? null
+        if (!cancelled) setDetail(data)
+      } catch (e) {
+        console.error(e)
+        if (!cancelled) setDetail(null)
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [id])
+
+  const handleBack = () => {
+    if (metadataId) {
+      navigate(`/page-menus/model-metadata/training/${encodeURIComponent(metadataId)}`)
+      return
+    }
+    navigate(-1)
+  }
+
+  const detailsRows = detail?.details ?? []
+
+  return (
+    <div className="flex h-full w-full min-w-0 flex-col">
+      <div className="w-full min-w-0 shrink-0 bg-white px-8 pb-6 pt-8 dark:bg-gray-800">
+        <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 dark:border-gray-600 dark:bg-gray-900"
+              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 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-3xl font-bold text-transparent">
+              <GraduationCap className="shrink-0 text-blue-400" size={32} aria-hidden />
+              <span className="min-w-0">{t('menus.model_metadata.training.detail_page_title')}</span>
+            </h1>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-auto p-6">
+        {loading ? (
+          <div className="flex flex-1 justify-center py-20">
+            <Spin size="large" />
+          </div>
+        ) : !detail ? (
+          <div className="flex flex-1 justify-center py-12 text-sm text-gray-500">{t('common.no_data')}</div>
+        ) : (
+          <div className="flex w-full min-w-0 flex-1 flex-col">
+            <Form className="w-full shrink-0" layout="horizontal" colon>
+              <div className="grid grid-cols-1 md:grid-cols-4">
+                <Form.Item label={t('menus.model_metadata.training.fields.subject')} className="!mb-0">
+                  <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                    {detail.subject ?? '-'}
+                  </div>
+                </Form.Item>
+                <Form.Item label={t('menus.model_metadata.training.fields.schemaVersion')} className="!mb-0">
+                  <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                    {detail.schemaVersion ?? '-'}
+                  </div>
+                </Form.Item>
+                <Form.Item label={t('menus.model_metadata.training.fields.syncStatus')} className="!mb-0">
+                  <div className="text-sm text-gray-900 dark:text-gray-100">
+                    {Number(detail.syncStatus) === 1 ? (
+                      <CxTag color="green">{t('menus.model_metadata.training.sync_status_1')}</CxTag>
+                    ) : (
+                      <CxTag color="default">{t('menus.model_metadata.training.sync_status_0')}</CxTag>
+                    )}
+                  </div>
+                </Form.Item>
+                <Form.Item label={t('menus.model_metadata.training.fields.syncTime')} className="!mb-0">
+                  <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                    {detail.syncTime ?? '-'}
+                  </div>
+                </Form.Item>
+              </div>
+
+              <div className="mt-3 grid grid-cols-1 md:grid-cols-4">
+                <Form.Item label={t('common.creator')} className="!mb-0">
+                  <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                    {detail.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">
+                    {detail.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">
+                    {detail.updateTime ?? '-'}
+                  </div>
+                </Form.Item>
+                <Form.Item label={t('menus.model_metadata.training.fields.updateBy')} className="!mb-0">
+                  <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                    {detail.updateBy ?? '-'}
+                  </div>
+                </Form.Item>
+              </div>
+            </Form>
+
+            <div className="mt-4 w-full min-w-0 shrink-0">
+              <h3 className="mb-3 text-base font-medium">{t('menus.model_metadata.training.detail_list_title')}</h3>
+              <RecordsTimeline details={detailsRows} summaryPreviewLimit={TRAINING_CHANGE_SUMMARY_PREVIEW_LIMIT} />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ModelMetadataTrainingDetailView