cx-chat 0.0.1

package/src/views/page-menus/knowledge/modal/doc-detail-modal.tsx

@@ -0,0 +1,550 @@
+import { deleteKnowDocSharedAPI, getKnowDocDetailAPI, getKnowDocSharedPageAPI } from '@/api/menus/knowledge'
+import ConfirmDialog from '@/components/common/modal/confirm-dialog'
+import { SelectTableView, createSelectTableConfig } from '@/components/table-view'
+import { useAuth } from '@/contexts/AuthContext'
+import { useToast } from '@/contexts/ToastContext'
+import { getDepartmentTreeAPI } from "@api/system/department"
+import { CxButton, CxModal, CxTabs, CxTag, UploadFile as CxUploadFile, useCxModal } from '@cx-ui'
+import { Form, Spin } from 'antd'
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { parseDocDetail, pickApiData } from './doc-parse'
+
+interface OpenPayload {
+  opeId?: string | number
+  record?: any
+}
+
+/** 各类型的弹窗统一宽度（px） */
+const DOC_DETAIL_MODAL_WIDTH = 1120
+/** 详情弹窗固定高度（内容区内部滚动） */
+const DOC_DETAIL_MODAL_HEIGHT = 'min(95dvh, 95vh)'
+const docDetailModalShellStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+    height: DOC_DETAIL_MODAL_HEIGHT,
+    maxHeight: DOC_DETAIL_MODAL_HEIGHT,
+  },
+  body: {
+    flex: '1 1 0%',
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+  },
+}
+
+/** 归一化文档类型：0 文本 / 1 文件。 */
+function normalizeType(raw: unknown): number {
+  if (typeof raw === 'number' && !Number.isNaN(raw)) return raw
+  if (raw === 'text' || raw === 0 || raw === '0') return 0
+  if (raw === 'file' || raw === 1 || raw === '1') return 1
+  return 0
+}
+
+const DocDetailModal = forwardRef<any, unknown>(function DocDetailModal(_props, ref) {
+  const {t} = useTranslation()
+  const { hasPermission } = useAuth()
+  const { showToast } = useToast()
+  const [loading, setLoading] = useState(false)
+  const [activeTab, setActiveTab] = useState('content')
+  const [shareSelectedRows, setShareSelectedRows] = useState<any[]>([])
+  const [shareRemoving, setShareRemoving] = useState(false)
+  const [shareRemovingSubmitting, setShareRemovingSubmitting] = useState(false)
+  const [shareRemoveSubmitConfirmOpen, setShareRemoveSubmitConfirmOpen] = useState(false)
+  const [shareTreeCheckedKeys, setShareTreeCheckedKeys] = useState<Set<string>>(() => new Set())
+  const canViewSharePage = hasPermission('knowledge:doc:data-permission-page')
+  const canDeleteShare = hasPermission('knowledge:data-permission-delete')
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const opeId = payload.opeId ?? payload.data?.id
+      setLoading(true)
+      modal.setFormData({})
+      setActiveTab('content')
+      setShareSelectedRows([])
+      setShareRemoving(false)
+      setShareRemovingSubmitting(false)
+      setShareRemoveSubmitConfirmOpen(false)
+      setShareTreeCheckedKeys(new Set())
+
+      if (opeId == null || `${opeId}`.trim() === '') {
+        setLoading(false)
+        return
+      }
+
+      try {
+        const res = await getKnowDocDetailAPI(opeId)
+        const detail = parseDocDetail(pickApiData(res))
+        modal.setFormData({
+          id: opeId,
+          name: detail.name,
+          description: detail.description,
+          version: detail.version,
+          type: normalizeType(detail.type),
+          rawText: detail.rawText,
+          files: detail.files,
+          status: detail.status,
+          auditStatus: detail.auditStatus,
+        })
+      } finally {
+        setLoading(false)
+      }
+    },
+    onClose: () => {
+    },
+  })
+
+  const {isOpen, close, opeId} = modal
+  const detailData = (modal.formData ?? {}) as Record<string, any>
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  /** 文档类型展示使用 ENUM_DATA（避免散落 if/else）。 */
+
+  const fileUploadList = useMemo(() => {
+    const arr = Array.isArray(detailData.files) ? detailData.files : []
+    return arr
+      .map((x: any, idx: number) => {
+        const fileId = x?.fileId ?? ''
+        const name = x?.fileName ?? x?.name ?? ''
+        const url = x?.fileUrl ?? x?.address ?? ''
+        if (!fileId) return null
+        return {
+          uid: fileId || `row:${idx}`,
+          name: name || 'file',
+          status: 'done',
+          ...(url ? ({url, address: url} as any) : undefined),
+        } as any
+      })
+      .filter(Boolean) as any[]
+  }, [detailData.files])
+
+  const clearShareCheckedRows = useCallback(() => {
+    setShareSelectedRows([])
+  }, [])
+
+  const startShareRemoving = useCallback(() => {
+    setShareRemoving(true)
+  }, [])
+
+  const cancelShareRemoving = useCallback(() => {
+    setShareRemoving(false)
+    setShareTreeCheckedKeys(new Set())
+    clearShareCheckedRows()
+  }, [clearShareCheckedRows])
+
+  const openShareRemoveSubmitConfirm = useCallback(() => {
+    setShareRemoveSubmitConfirmOpen(true)
+  }, [])
+
+  const closeShareRemoveSubmitConfirm = useCallback(() => {
+    setShareRemoveSubmitConfirmOpen(false)
+  }, [])
+
+  // submitShareRemoving 需在 shareTableConfig 声明之后（见下方）
+
+  // 共享表格配置 Hook
+  const useShareTableConfig = createSelectTableConfig({
+    tableAPI: canViewSharePage
+      ? (queryParams) => {
+          // 部门顶级节点，departmentId传null查询所有
+          if (queryParams.departmentId === '0') {
+            queryParams.departmentId = null
+          }
+          return getKnowDocSharedPageAPI({
+            ...queryParams,
+            knowledgeDocumentId: opeId,
+          })
+        }
+      : undefined,
+    treeAPI: hasPermission('knowledge:manage-permission-dep-list')
+      ? getDepartmentTreeAPI
+      : undefined,
+    tree: {
+      fieldNames: {
+        id: 'id',
+        label: 'name',
+        children: 'children',
+      },
+      searchField: 'departmentId',
+    },
+    searchFields: [
+      {
+        prop: 'userName',
+        label: 'menus.knowledge.share.user_name',
+        placeholder: 'menus.knowledge.share.user_name_placeholder',
+      },
+      {
+        prop: 'grantUserName',
+        label: 'menus.knowledge.share.grant_user',
+        placeholder: 'menus.knowledge.share.grant_user_placeholder',
+      },
+    ],
+    pageInfo: {
+      searchButtonSize: 'small',
+    },
+    table: {
+      showPagination: true,
+      showSelection: canDeleteShare && shareRemoving,
+    },
+    pagination: {page: 1, pageSize: 10, total: 0},
+  })
+
+  // 调用 Hook 获取配置
+  const shareTableConfig = useShareTableConfig()
+
+  // 共享表格列定义：checkbox 由 SelectTableView 的 selectionMode 控制（避免出现两个选择列）
+  const shareColumns = useMemo(
+    () => [
+      {
+        title: 'menus.knowledge.share.user_name',
+        key: 'userName',
+        width: 120,
+      },
+      {
+        title: 'menus.knowledge.share.department',
+        key: 'departmentName',
+        width: 150,
+      },
+      {
+        title: 'menus.knowledge.share.grant_user',
+        key: 'grantUserName',
+        width: 150,
+      },
+      {
+        title: 'menus.knowledge.share.grant_time',
+        key: 'grantTime',
+        width: 150,
+      },
+    ],
+    [],
+  )
+
+  const submitShareRemoving = useCallback(async () => {
+    const knowledgeDocumentId = opeId
+    if (!knowledgeDocumentId) return
+
+    const idList = (Array.isArray(shareSelectedRows) ? shareSelectedRows : [])
+      .map((row: any) => row?.id)
+      .filter((x: any) => x != null && String(x).trim() !== '')
+      .map((x: any) => String(x))
+
+    const departmentIdList = Array.from(shareTreeCheckedKeys)
+      .filter((x) => x != null && String(x).trim() !== '' && String(x) !== '0')
+      .map((x) => String(x))
+
+    if (idList.length === 0 && departmentIdList.length === 0) return
+
+    setShareRemovingSubmitting(true)
+    try {
+      await deleteKnowDocSharedAPI({
+        knowledgeDocumentId: String(knowledgeDocumentId),
+        idList,
+        departmentIdList,
+      })
+      showToast(t('common.operation_success'), 'success')
+      cancelShareRemoving()
+      closeShareRemoveSubmitConfirm()
+      await shareTableConfig?.fetchTableData?.()
+    } catch (e) {
+      console.error('remove knowledge doc share failed:', e)
+    } finally {
+      setShareRemovingSubmitting(false)
+    }
+  }, [
+    cancelShareRemoving,
+    closeShareRemoveSubmitConfirm,
+    opeId,
+    shareSelectedRows,
+    shareTableConfig,
+    shareTreeCheckedKeys,
+  ])
+  const tabActions = useMemo(() => {
+    if (activeTab === 'share' && canDeleteShare) {
+      if (shareRemoving) {
+        return (
+          <>
+            <CxButton.Cancel
+              size="small"
+              disabled={shareRemovingSubmitting}
+              onClick={cancelShareRemoving}
+            >
+              {t('common.cancel')}
+            </CxButton.Cancel>
+            <CxButton.Delete
+              size="small"
+              icon={false}
+              loading={shareRemovingSubmitting}
+              disabled={
+                shareRemovingSubmitting ||
+                (shareSelectedRows.length === 0 && shareTreeCheckedKeys.size === 0)
+              }
+              onClick={openShareRemoveSubmitConfirm}
+            >
+              {t('selectTable.remove_selected')}
+            </CxButton.Delete>
+          </>
+        )
+      }
+      return (
+        <CxButton.Delete
+          size="small"
+          icon={false}
+          onClick={startShareRemoving}
+        >
+          {t('selectTable.batch_remove')}
+        </CxButton.Delete>
+      )
+    }
+    return null
+  }, [
+    activeTab,
+    canDeleteShare,
+    shareSelectedRows.length,
+    shareTreeCheckedKeys.size,
+    shareRemoving,
+    shareRemovingSubmitting,
+    cancelShareRemoving,
+    openShareRemoveSubmitConfirm,
+    startShareRemoving,
+    submitShareRemoving,
+    t,
+  ])
+
+  const handleShareTreeCheck = useCallback((key: string | number, checked: boolean) => {
+    const k = String(key)
+    setShareTreeCheckedKeys((prev) => {
+      const next = new Set(prev)
+      if (checked) {
+        next.add(k)
+      } else {
+        next.delete(k)
+      }
+      return next
+    })
+  }, [])
+
+  return (
+    <CxModal
+      title={t('menus.knowledge.doc.detail_title')}
+      isOpen={isOpen}
+      onClose={close}
+      opeType="detail"
+      modalConfig={{
+        width: DOC_DETAIL_MODAL_WIDTH,
+        styles: {
+          ...docDetailModalShellStyles,
+        },
+        rootClassName: 'cx-modal-content-fill',
+      }}>
+      {loading ? (
+        <div className="flex justify-center py-20">
+          <Spin size="large"/>
+        </div>
+      ) : (
+        <Form
+          component={false}
+          className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+          <div className="grid shrink-0 grid-cols-1 md:grid-cols-4">
+            <Form.Item label={t('menus.knowledge.doc.name')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100 break-words">
+                {detailData.name || '-'}
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('menus.knowledge.doc.version')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100 break-words">
+                {detailData.version != null && detailData.version !== ''
+                  ? String(detailData.version)
+                  : '-'}
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('menus.knowledge.doc.type')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                <CxTag.Enum value={detailData.type} enumKey="knowledgeDocType"/>
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('menus.knowledge.doc.col_audit_status')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                <CxTag.Enum value={detailData.auditStatus} enumKey="auditStatus"/>
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('common.status')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                <CxTag.Enabled value={detailData.status}/>
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('common.description')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100 break-words">
+                {String(detailData.description ?? '').trim() || '-'}
+              </div>
+            </Form.Item>
+          </div>
+
+          {/* Tabs 区域 */}
+          <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
+            {tabActions ? (
+              <div className="absolute right-0 top-0 z-10 flex items-center gap-2">
+                {tabActions}
+              </div>
+            ) : null}
+            <CxTabs
+              activeKey={activeTab}
+              onChange={setActiveTab}
+              className="flex-1 flex flex-col min-h-0 [&_.ant-tabs-nav]:pr-[220px]"
+              items={[
+                {
+                  key: 'content',
+                  label: t('menus.knowledge.doc.tab_content'),
+                  children: (
+                    <div className="min-h-0 flex-1 flex flex-col overflow-hidden">
+                      {normalizeType(detailData.type) === 0 ? (
+                        <div
+                          className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                          <div
+                            className="flex min-h-[44px] shrink-0 items-center border-b border-gray-200 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-700/50">
+                            <h3
+                              className="line-clamp-1 py-0.5 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
+                              {t('menus.knowledge.doc.content')}
+                            </h3>
+                          </div>
+                          <div
+                            className="min-h-0 flex-1 overflow-auto p-3 prose dark:prose-invert prose-sm max-w-none text-gray-900 dark:text-gray-100">
+                            {String(detailData.rawText ?? '').trim() ? (
+                              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                                {String(detailData.rawText ?? '')}
+                              </ReactMarkdown>
+                            ) : (
+                              <span className="text-gray-400 text-sm not-prose">
+                                {t('menus.knowledge.doc.preview_empty')}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      ) : (
+                        <div
+                          className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                          <div
+                            className="flex min-h-[44px] shrink-0 items-center border-b border-gray-200 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-700/50">
+                            <h3
+                              className="line-clamp-1 py-0.5 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
+                              {t('menus.knowledge.doc.attachment')}
+                            </h3>
+                          </div>
+                          <div className="min-h-0 flex-1 overflow-auto p-3">
+                            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
+                              {fileUploadList.map((f, index) => (
+                                <div
+                                  key={f.uid}
+                                  className="relative h-[92px] rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800 px-4"
+                                >
+                                  <div
+                                    className="absolute right-2 top-2 h-5 min-w-5 px-1.5 rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-200 text-xs flex items-center justify-center">
+                                    {index + 1}
+                                  </div>
+                                  <div className="flex h-full items-center gap-3">
+                                    <div className="shrink-0" style={{width: 72, height: 72}}>
+                                      <CxUploadFile
+                                        disabled
+                                        draggable={false}
+                                        maxCount={1}
+                                        displayMode="picture"
+                                        thumbSize={72}
+                                        fileList={[f]}
+                                      />
+                                    </div>
+                                    <div className="min-w-0 flex-1">
+                                      <div
+                                        className="text-sm text-gray-900 dark:text-gray-100 break-words line-clamp-2">
+                                        {f.name || '-'}
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                              {fileUploadList.length === 0 ? (
+                                <div className="text-sm text-gray-400">{t('common.empty')}</div>
+                              ) : null}
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  ),
+                },
+                {
+                  key: 'share',
+                  label: t('menus.knowledge.doc.tab_share'),
+                  children: (
+                    <div className="min-h-0 flex-1 flex flex-col overflow-hidden h-full">
+                      {shareTableConfig ? (
+                        <div className="flex min-h-0 h-full flex-col overflow-hidden">
+                          <div className="min-h-0 flex-1">
+                            <SelectTableView
+                              expectTree
+                              noPadding
+                              pageConfig={shareTableConfig}
+                              columns={shareColumns as any}
+                              rowKey="id"
+                              selectionMode={shareRemoving ? 'multiple' : 'none'}
+                              showSelectedPanel={false}
+                              treeCheckable={canDeleteShare && shareRemoving}
+                              treeCheckedKeys={shareTreeCheckedKeys}
+                              onTreeCheck={(_key, checked, node) => {
+                                const nodeKey = node?.id ?? node?.key ?? _key
+                                handleShareTreeCheck(nodeKey, checked)
+                              }}
+                              treeRenderLabel={(node: any) => node?.name ?? node?.title ?? '-'}
+                              value={shareSelectedRows}
+                              onChange={(next) => {
+                                setShareSelectedRows(Array.isArray(next) ? next : [])
+                              }}
+                            />
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="flex items-center justify-center h-full text-gray-400">
+                          {t('common.no_data')}
+                        </div>
+                      )}
+                    </div>
+                  ),
+                },
+              ]}
+            />
+          </div>
+        </Form>
+      )}
+      <ConfirmDialog
+        isOpen={shareRemoveSubmitConfirmOpen}
+        danger
+        title={t('common.confirm')}
+        message={t('selectTable.remove_selected_confirm')}
+        confirmText={t('common.confirm')}
+        cancelText={t('common.cancel')}
+        onClose={closeShareRemoveSubmitConfirm}
+        onConfirm={() => void submitShareRemoving()}
+      />
+    </CxModal>
+  )
+})
+
+DocDetailModal.displayName = 'DocDetailModal'
+
+export default DocDetailModal

package/src/views/page-menus/knowledge/modal/doc-parse.ts

@@ -0,0 +1,99 @@
+type KnowDocFile = {
+  id?: string
+  fileName?: string
+  fileType?: string
+  fileId?: string
+  sortOrder?: number
+  fileUrl?: string
+}
+
+export type KnowDocDetail = {
+  id?: string | number
+  name?: string
+  docName?: string
+  description?: string
+  version?: string | number
+  type?: number
+  docType?: number
+  rawText?: string
+  content?: string
+  status?: number
+  auditStatus?: number
+  reviewStatus?: number
+  files?: KnowDocFile[]
+}
+
+export type DocFileRow = {
+  rowKey?: string
+  fileId: string
+  name: string
+  fileName: string
+  fileUrl: string
+  fileType: string
+  id: string
+  sortOrder: number
+}
+
+export type ParsedDocDetail = {
+  id: string
+  name: string
+  description: string
+  version: string
+  type: number
+  rawText: string
+  status: number | undefined
+  auditStatus: number | undefined
+  files: KnowDocFile[]
+}
+
+/** 去掉文件名后缀（只去最后一个扩展名）。 */
+export function stripFileSuffix(fullName: string): string {
+  const raw = fullName || ''
+  const idx = raw.lastIndexOf('.')
+  if (idx <= 0) return raw
+  return raw.slice(0, idx)
+}
+
+/** 解析文档详情：严格按接口字段取值，不做兜底猜测。 */
+export function parseDocDetail(detail: KnowDocDetail): ParsedDocDetail {
+  return {
+    id: detail?.id != null ? `${detail.id}` : '',
+    name: `${detail?.name ?? detail?.docName ?? ''}`,
+    description: `${detail?.description ?? ''}`,
+    version: detail?.version != null ? `${detail.version}` : '',
+    type: typeof detail?.type === 'number' ? detail.type : (typeof detail?.docType === 'number' ? detail.docType : 0),
+    rawText: `${detail?.rawText ?? detail?.content ?? ''}`,
+    status: typeof detail?.status === 'number' ? detail.status : undefined,
+    auditStatus:
+      typeof detail?.auditStatus === 'number'
+        ? detail.auditStatus
+        : (typeof detail?.reviewStatus === 'number' ? detail.reviewStatus : undefined),
+    files: Array.isArray(detail?.files) ? detail.files : [],
+  }
+}
+
+/** 把详情 files 转成文件编辑表格所需行数据。 */
+export function parseDocFileRows(files: KnowDocFile[]): DocFileRow[] {
+  const arr = Array.isArray(files) ? files : []
+  return arr.map((x) => {
+    const fileId = `${x?.fileId ?? ''}`
+    const fileName = `${x?.fileName ?? ''}`
+    const fileUrl = `${x?.fileUrl ?? ''}`
+    const fileType = `${x?.fileType ?? ''}`
+    return {
+      fileId,
+      name: stripFileSuffix(fileName),
+      fileName,
+      fileUrl,
+      fileType,
+      id: x?.id != null ? `${x.id}` : '',
+      sortOrder: typeof x?.sortOrder === 'number' ? x.sortOrder : 0,
+    }
+  })
+}
+
+/** 从 axios 业务体中取出详情 data（成功时返回体就是业务 data，不是 AxiosResponse）。 */
+export function pickApiData(res: any) {
+  return res?.data
+}
+