cx-chat 0.0.1

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

@@ -0,0 +1,236 @@
+import { useAuth } from '@/contexts/AuthContext'
+import { useToast } from '@/contexts/ToastContext'
+import { ALIGN } from '@/meta'
+import {
+  getModelMetadataTrainingPageAPI,
+  syncModelMetadataTrainingAPI,
+} from '@api/menus/model-metadata/training'
+import { DetailLink } from '@components/common/detail-link'
+import ConfirmDialog from '@components/common/modal/confirm-dialog'
+import ListPageView, { createListPageConfig } from '@components/table-view'
+import { CxButton, CxTag } from '@cx-ui'
+import { GraduationCap } from 'lucide-react'
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
+
+const useListPageConfig = createListPageConfig({
+  tableAPI: (params) => {
+    const next = { ...params } as Record<string, unknown>
+    if (next.syncStatus === '' || next.syncStatus === undefined || next.syncStatus === null) {
+      delete next.syncStatus
+    }
+    return getModelMetadataTrainingPageAPI(next)
+  },
+  pageInfo: {
+    title: 'menus.model_metadata.training.page_title',
+    subTitle: 'menus.model_metadata.training.page_subtitle',
+  },
+  searchFields: [
+    {
+      prop: 'syncStatus',
+      label: 'menus.model_metadata.training.fields.syncStatus',
+      type: 'select',
+      placeholder: 'menus.model_metadata.training.sync_status_placeholder',
+      options: [
+        { label: 'menus.model_metadata.training.sync_status_0', value: 0 },
+        { label: 'menus.model_metadata.training.sync_status_1', value: 1 },
+      ],
+      width: '140px',
+    },
+    {
+      prop: 'createTime',
+      label: 'menus.model_metadata.training.fields.batchCreateTime',
+      type: 'dateRange',
+      rangeStartProp: 'createTimeStart',
+      rangeEndProp: 'createTimeEnd',
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+    },
+  ],
+  detailAction: {
+    detailType: 'page',
+    labelKey: 'common.view',
+  },
+  table: {
+    scrollX: 'max-content',
+    operationWidth: 200,
+  },
+})
+
+function TrainingListView() {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const { hasPermission } = useAuth()
+  const location = useLocation()
+
+  const pageConfig = useListPageConfig()
+  const subjectFromNav = (location.state as { subject?: string } | null)?.subject
+
+  const [syncDialogOpen, setSyncDialogOpen] = useState(false)
+  /** 确认同步时使用的 metadataId，仅来自当前点击行 */
+  const [syncMetadataId, setSyncMetadataId] = useState('')
+
+  const closeSyncDialog = useCallback(() => {
+    setSyncDialogOpen(false)
+    setSyncMetadataId('')
+  }, [])
+
+  const runSync = useCallback(async () => {
+    const metadataId = String(syncMetadataId).trim()
+    if (!metadataId) {
+      showToast(t('menus.model_metadata.training.sync_missing_metadata_id'), 'error')
+      closeSyncDialog()
+      return
+    }
+    try {
+      await syncModelMetadataTrainingAPI(metadataId)
+      showToast(t('menus.model_metadata.training.sync_success'), 'success')
+      await pageConfig.fetchTableData?.()
+    } catch (e) {
+      console.error(e)
+      showToast(t('menus.model_metadata.training.sync_failed'), 'error')
+    } finally {
+      closeSyncDialog()
+    }
+  }, [closeSyncDialog, pageConfig, showToast, syncMetadataId, t])
+
+  const titleExtra = useMemo(() => {
+    const sub = String(subjectFromNav ?? '').trim()
+    if (!sub) return null
+    return (
+      <span className="text-lg font-normal text-gray-600 dark:text-gray-300 ml-2 truncate max-w-xl" title={sub}>
+        （{sub}）
+      </span>
+    )
+  }, [subjectFromNav])
+
+  const columns = useMemo(
+    () => [
+      {
+        title: 'menus.model_metadata.training.fields.subject',
+        key: 'subject',
+        align: ALIGN.LEFT,
+        minWidth: 140,
+        ellipsis: true,
+        render: (value: unknown, data: any) => (
+          <DetailLink
+            text={String(value ?? data?.subject ?? '-')}
+            disabled={!hasPermission('model-metadata-training:detail')}
+            onClick={() =>
+              pageConfig.onDetail?.({
+                type: 'detail',
+                data,
+                config: pageConfig.detailAction,
+              })
+            }
+          />
+        ),
+      },
+      {
+        title: 'menus.model_metadata.training.fields.schemaVersion',
+        key: 'schemaVersion',
+        align: ALIGN.CENTER,
+        minWidth: 120,
+        render: (value: unknown) => value ?? '-',
+      },
+      {
+        title: 'menus.model_metadata.training.fields.syncStatus',
+        key: 'syncStatus',
+        align: ALIGN.CENTER,
+        width: 110,
+        render: (value: unknown) => {
+          const n = Number(value)
+          if (n === 1) {
+            return <CxTag color="green">{t('menus.model_metadata.training.sync_status_1')}</CxTag>
+          }
+          return <CxTag color="default">{t('menus.model_metadata.training.sync_status_0')}</CxTag>
+        },
+      },
+      {
+        title: 'menus.model_metadata.training.fields.syncTime',
+        key: 'syncTime',
+        align: ALIGN.LEFT,
+        width: 170,
+        render: (value: unknown) => value ?? '-',
+      },
+      {
+        title: 'menus.model_metadata.training.fields.detailCount',
+        key: 'detailCount',
+        align: ALIGN.CENTER,
+        width: 100,
+        render: (value: unknown) => value ?? 0,
+      },
+      {
+        title: 'common.creator',
+        key: 'createBy',
+        align: ALIGN.LEFT,
+        width: 120,
+        render: (value: unknown) => value ?? '-',
+      },
+      {
+        title: 'common.create_time',
+        key: 'createTime',
+        align: ALIGN.LEFT,
+        width: 170,
+        render: (value: unknown) => value ?? '-',
+      },
+      {
+        title: 'common.actions',
+        key: 'action',
+        align: ALIGN.LEFT,
+        width: 200,
+        render: (_: unknown, data: any) => (
+          <div className="flex flex-wrap gap-2">
+            {hasPermission('model-metadata-training:detail') && (
+              <CxButton.IconView
+                onClick={() =>
+                  pageConfig.onDetail?.({
+                    type: 'detail',
+                    data,
+                    config: pageConfig.detailAction,
+                  })
+                }
+              />
+            )}
+            {hasPermission('model-metadata-training:sync') && Number(data?.syncStatus) !== 1 && (
+              <CxButton.Icon
+                className="!text-blue-600"
+                icon={<GraduationCap size={18} />}
+                title={t('menus.model_metadata.training.action_sync')}
+                tooltipTone="default"
+                type="default"
+                onClick={() => {
+                  setSyncMetadataId(String(data?.metadataId ?? '').trim())
+                  setSyncDialogOpen(true)
+                }}
+              />
+            )}
+          </div>
+        ),
+      },
+    ],
+    [hasPermission, pageConfig, t],
+  )
+
+  return (
+    <>
+      <ListPageView
+        columns={columns}
+        pageConfig={pageConfig}
+        titleIcon={<GraduationCap className="text-blue-400" size={32} aria-hidden />}
+        titleExtra={titleExtra}
+      />
+      <ConfirmDialog
+        isOpen={syncDialogOpen}
+        title={t('menus.model_metadata.training.sync_confirm_title')}
+        message={t('menus.model_metadata.training.sync_confirm_content')}
+        overlayClassName="z-[1200]"
+        onClose={closeSyncDialog}
+        onConfirm={() => void runSync()}
+      />
+    </>
+  )
+}
+
+export default TrainingListView

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

@@ -0,0 +1,154 @@
+import { CxModal, CxTabs } from '@cx-ui'
+import type { CxModalOpenPayload, CxModalRef } from '@cx-ui/modal/useCxModal'
+import { useCxModal } from '@cx-ui/modal/useCxModal'
+import { Spin } from 'antd'
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import SummaryList from '../components/detail-records/summary-list'
+import { flattenOneCategory, parseTrainingRowContent, type TrainingDetailItem } from '../components/detail-records/types'
+
+/** 与知识库文档详情弹框一致：视口高度约 95% */
+const TRAINING_UPDATE_DETAIL_MODAL_HEIGHT = 'min(95dvh, 95vh)'
+
+const trainingUpdateDetailModalShellStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+    height: TRAINING_UPDATE_DETAIL_MODAL_HEIGHT,
+    maxHeight: TRAINING_UPDATE_DETAIL_MODAL_HEIGHT,
+  },
+  body: {
+    flex: '1 1 0%',
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+  },
+}
+
+function FullTabsPanels({ row }: { row: TrainingDetailItem }) {
+  const { t } = useTranslation()
+  const c = useMemo(() => parseTrainingRowContent(row), [row])
+  const meta = useMemo(
+    () => ({
+      schemaVersion: row.schemaVersion,
+      updateTime: row.updateTime,
+      updateBy: row.updateBy,
+      detailId: row.id,
+    }),
+    [row],
+  )
+
+  const tableRows = useMemo(() => flattenOneCategory(c, 'tables', meta), [c, meta])
+  const documentRows = useMemo(() => flattenOneCategory(c, 'documents', meta), [c, meta])
+  const exampleSqlRows = useMemo(() => flattenOneCategory(c, 'exampleSql', meta), [c, meta])
+
+  const tabItems = useMemo(() => {
+    const empty = (
+      <div className="rounded border border-dashed border-gray-200 py-4 text-center text-xs text-gray-400 dark:border-gray-600">
+        {t('menus.model_metadata.training.detail_empty_section')}
+      </div>
+    )
+
+    const wrapList = (rows: typeof tableRows) =>
+      rows.length ? <SummaryList rows={rows} showScope={false} /> : empty
+
+    return [
+      {
+        key: 'tables',
+        label: t('menus.model_metadata.manage.step2_title'),
+        children: wrapList(tableRows),
+      },
+      {
+        key: 'documents',
+        label: t('menus.model_metadata.training.change_section_documents'),
+        children: wrapList(documentRows),
+      },
+      {
+        key: 'exampleSql',
+        label: t('menus.model_metadata.training.change_section_example_sql'),
+        children: wrapList(exampleSqlRows),
+      },
+    ]
+  }, [t, tableRows, documentRows, exampleSqlRows])
+
+  const defaultTabKey =
+    tableRows.length > 0 ? 'tables' : documentRows.length > 0 ? 'documents' : exampleSqlRows.length > 0 ? 'exampleSql' : 'tables'
+
+  const tabsMountKey = String(row.id ?? `${row.schemaVersion ?? ''}-${row.updateTime ?? ''}`)
+
+  return (
+    <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+      <CxTabs
+        key={tabsMountKey}
+        size="small"
+        defaultActiveKey={defaultTabKey}
+        items={tabItems}
+        className="flex min-h-0 flex-1 flex-col [&_.ant-tabs]:flex [&_.ant-tabs]:min-h-0 [&_.ant-tabs]:flex-1 [&_.ant-tabs]:flex-col [&_.ant-tabs-content]:min-h-0 [&_.ant-tabs-content]:flex-1 [&_.ant-tabs-content-holder]:min-h-0 [&_.ant-tabs-content-holder]:flex-1 [&_.ant-tabs-content-holder]:overflow-auto [&_.ant-tabs-nav]:mb-2 [&_.ant-tabs-nav]:!mt-0 [&_.ant-tabs-tabpane]:min-h-0 [&_.ant-tabs-tabpane]:min-w-0"
+      />
+    </div>
+  )
+}
+
+const UpdateDetailModal = forwardRef<CxModalRef>(function UpdateDetailModal(_props, ref) {
+  const { t } = useTranslation()
+  const [loading, setLoading] = useState(false)
+
+  const modal = useCxModal({
+    onOpen: async (payload: CxModalOpenPayload) => {
+      const r = payload?.data?.row as TrainingDetailItem | undefined
+      setLoading(true)
+      modal.setFormData(undefined)
+      try {
+        await Promise.resolve()
+        modal.setFormData(r)
+      } finally {
+        setLoading(false)
+      }
+    },
+  })
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: (p?: CxModalOpenPayload) => modal.open({ ...p, opeType: 'detail' }),
+      close: modal.close,
+    }),
+    [modal.open, modal.close],
+  )
+
+  const row = modal.formData as TrainingDetailItem | undefined
+  const titleBase = t('menus.model_metadata.training.change_batch_detail_title')
+  const title = row?.schemaVersion ? `${titleBase} · ${row.schemaVersion}` : titleBase
+
+  return (
+    <CxModal
+      {...modal.modalBind}
+      title={title}
+      opeType="detail"
+      modalConfig={{
+        width: 960,
+        styles: {
+          ...trainingUpdateDetailModalShellStyles,
+        },
+        rootClassName: 'cx-modal-content-fill',
+      }}
+      onClose={modal.close}
+    >
+      {loading ? (
+        <div className="flex justify-center py-16">
+          <Spin />
+        </div>
+      ) : row ? (
+        <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+          <FullTabsPanels row={row} />
+        </div>
+      ) : null}
+    </CxModal>
+  )
+})
+
+UpdateDetailModal.displayName = 'UpdateDetailModal'
+
+export default UpdateDetailModal

package/src/views/page-menus/skill/index.tsx

@@ -0,0 +1,201 @@
+import {
+  deleteSkillAPI,
+  disableSkillAPI,
+  enableSkillAPI,
+  getSkillPageAPI,
+} from '@/api/menus/skill'
+import { DetailLink } from '@/components/common/detail-link'
+import ListPageView, { createListPageConfig } from '@/components/table-view'
+import { useAuth } from '@/contexts/AuthContext'
+import { ALIGN, ENUM_DATA } from '@/meta'
+import { CxButton, CxTag } from '@cx-ui'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import DetailModal from './modal/detail-modal'
+import SubmitModal from './modal/submit-modal'
+
+const useListPageConfig = createListPageConfig({
+  tableAPI: getSkillPageAPI,
+  deleteAPI: deleteSkillAPI,
+  updateStatusAPI: ({ id, status }) =>
+    Number(status) === 1 ? enableSkillAPI(id) : disableSkillAPI(id),
+  pageInfo: {
+    title: 'menus.skill.page_title',
+    subTitle: 'menus.skill.page_subtitle',
+  },
+  searchFields: [
+    {
+      prop: 'keyword',
+      label: 'menus.skill.fields.name',
+      placeholder: 'menus.skill.search_placeholder',
+    },
+    {
+      prop: 'status',
+      label: 'common.status',
+      type: 'select',
+      options: ENUM_DATA.commonStatus.option,
+    },
+  ],
+  listQuery: { sort: 'updateTime', order: 'desc' },
+  submitAction: {
+    permission: 'skill:add',
+    submitType: 'modal',
+    labelKey: 'menus.skill.add',
+  },
+  detailAction: {
+    detailType: 'modal',
+    labelKey: 'common.view',
+  },
+  table: {
+    scrollX: 'max-content',
+    operationWidth: 220,
+  },
+  deleteConfirm: {
+    title: 'menus.skill.delete_confirm_title',
+    content: 'menus.skill.delete_confirm_content',
+    okText: 'common.delete',
+    cancelText: 'common.cancel',
+  },
+  statusToggle: {
+    dangerOnDisable: true,
+    disableConfirm: {
+      cancelText: 'common.cancel',
+      content: 'menus.skill.disable_confirm_content',
+      contentFields: 'name',
+      okText: 'common.confirm',
+      title: 'menus.skill.disable_confirm_title',
+    },
+    enableConfirm: {
+      cancelText: 'common.cancel',
+      content: 'menus.skill.enable_confirm_content',
+      contentFields: 'name',
+      okText: 'common.confirm',
+      title: 'menus.skill.enable_confirm_title',
+    },
+  },
+})
+
+function IndexView() {
+  const { t } = useTranslation()
+  const { hasPermission } = useAuth()
+  const pageConfig = useListPageConfig()
+
+  const columns = useMemo(
+    () => [
+      {
+        title: 'menus.skill.fields.name',
+        key: 'name',
+        align: ALIGN.LEFT,
+        minWidth: 160,
+        render: (value: unknown, data: any) => (
+          <DetailLink
+            text={String(value ?? data?.name ?? '-')}
+            onClick={() =>
+              pageConfig.onDetail?.({
+                type: 'detail',
+                data,
+                config: pageConfig.detailAction,
+              })
+            }
+          />
+        ),
+      },
+      {
+        title: 'menus.skill.fields.code',
+        key: 'code',
+        align: ALIGN.LEFT,
+        width: 200,
+        ellipsis: true,
+        render: (value: unknown) => value ?? '-',
+      },
+      {
+        title: 'menus.skill.fields.description',
+        key: 'description',
+        align: ALIGN.LEFT,
+        minWidth: 200,
+        ellipsis: true,
+        render: (value: unknown) => value ?? '-',
+      },
+      {
+        title: 'common.status',
+        key: 'status',
+        align: ALIGN.CENTER,
+        width: 90,
+        render: (value: unknown) => <CxTag.Enabled value={value} />,
+      },
+      {
+        title: 'common.actions',
+        key: 'action',
+        align: ALIGN.LEFT,
+        width: 220,
+        render: (_: unknown, data: any) => {
+          const isEnabled = Number(data?.status) === 1
+          return (
+            <div className="flex flex-wrap gap-2">
+              <CxButton.IconView
+                onClick={() =>
+                  pageConfig.onDetail?.({
+                    type: 'detail',
+                    data,
+                    config: pageConfig.detailAction,
+                  })
+                }
+              />
+              {!isEnabled && hasPermission('skill:edit') && (
+                <CxButton.IconEdit
+                  onClick={() =>
+                    pageConfig.onEdit?.({
+                      type: 'edit',
+                      data,
+                      config: pageConfig.submitAction,
+                    })
+                  }
+                />
+              )}
+              {(hasPermission('skill:enable') || hasPermission('skill:disable')) && (
+                <>
+                  {!isEnabled && hasPermission('skill:enable') ? (
+                    <CxButton.IconEnable
+                      onClick={() =>
+                        pageConfig.onStatusToggle?.({
+                          nextStatus: 1,
+                          data,
+                        })
+                      }
+                    />
+                  ) : null}
+                  {isEnabled && hasPermission('skill:disable') ? (
+                    <CxButton.IconDisable
+                      onClick={() =>
+                        pageConfig.onStatusToggle?.({
+                          nextStatus: 0,
+                          data,
+                        })
+                      }
+                    />
+                  ) : null}
+                </>
+              )}
+              {hasPermission('skill:delete') && !isEnabled && (
+                <CxButton.IconDelete onClick={() => pageConfig.onDelete?.(data)} />
+              )}
+            </div>
+          )
+        },
+      },
+    ],
+    [hasPermission, pageConfig],
+  )
+
+  return (
+    <ListPageView
+      columns={columns}
+      pageConfig={pageConfig}
+      submitModalComponent={SubmitModal as any}
+      detailModalComponent={DetailModal as any}
+    />
+  )
+}
+
+export default IndexView