cx-chat 0.0.1

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

@@ -0,0 +1,600 @@
+import {
+  approveKnowDocAPI,
+  deleteKnowDocAPI,
+  disableKnowDocAPI,
+  enableKnowDocAPI,
+  getKnowDocPageAPI,
+  getKnowledgeDetailAPI,
+  rejectKnowDocAPI,
+  submitKnowDocAuditAPI,
+} from '@/api/menus/knowledge'
+import { DetailLink } from '@/components/common/detail-link'
+import ConfirmDialog from '@/components/common/modal/confirm-dialog'
+import { useAuth } from '@/contexts/AuthContext'
+import { useToast } from '@/contexts/ToastContext'
+import { useRouter } from '@/hooks/useRouter'
+import { ALIGN, ENUM_DATA } from '@/meta'
+import KnowledgeUserSelectModal from '@/views/page-menus/knowledge/modal/knowledge-user-select-modal'
+import DocTypePickerModal, {
+  openDocTypePickerModal,
+  type DocTypePickerRef,
+} from '@/views/page-menus/knowledge/modal/doc-type-picker-modal'
+import ListPageView, { createListPageConfig } from '@components/table-view'
+import { CxButton, CxTag } from '@cx-ui'
+import { FileText, Send, Share2 } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLocation, useParams } from 'react-router-dom'
+import DocDetailModal from './modal/doc-detail-modal'
+import DocSubmitModal from './modal/doc-submit-modal'
+
+/** 供 createListPageConfig 的 tableAPI 读取当前路由知识库 id（同步于渲染） */
+const knowledgeDocRouteIdRef: { current: string | undefined } = {
+  current: undefined,
+}
+
+type KnowledgeBaseBrief = {
+  id?: string | number
+  name?: string
+  code?: string
+  description?: string
+}
+
+/** 从知识库列表进入文档页时由 index 传入，避免标题括号先 id 后名称闪动 */
+type KnowledgeDocLocationState = {
+  knowledgeName?: string
+}
+
+/** 审核状态常量 */
+const AUDIT_STATUS = {
+  DRAFT: 10,       // 草稿
+  PENDING: 20,     // 待审核
+  APPROVED: 30,    // 审核通过
+  REJECTED: 40,    // 审核拒绝
+} as const
+
+/** 审核状态：优先 auditStatus，兼容 reviewStatus */
+function docAuditStatus(record: any): number | undefined {
+  const v = record?.auditStatus ?? record?.reviewStatus
+  if (v === undefined || v === null) return undefined
+  const n = Number(v)
+  return Number.isNaN(n) ? undefined : n
+}
+
+/** 缺省未返回审核字段时按草稿处理 */
+function docAuditStatusOrDraft(record: any): number {
+  return docAuditStatus(record) ?? AUDIT_STATUS.DRAFT
+}
+
+/**
+ * 操作按钮逻辑（新规则）：
+ * - 编辑：只能编辑草稿(10)或审核拒绝(40)
+ * - 删除：只能删除草稿(10)或审核通过(30)、审核拒绝(40)且禁用的数据
+ * - 状态：只有审核通过(30)才能启用或禁用
+ */
+
+function docStatusEnabled(record: any): boolean {
+  return Number(record?.status) === 1
+}
+
+/** 编辑：不能编辑待审核(20)和审核通过(30) */
+function canDocEdit(record: any): boolean {
+  const aud = docAuditStatusOrDraft(record)
+  if (aud === AUDIT_STATUS.PENDING) return false
+  if (aud === AUDIT_STATUS.APPROVED) return false
+  return true
+}
+
+/** 删除：不能删除待审核(20)和审核通过且启用(30+启用) */
+function canDocDelete(record: any): boolean {
+  const aud = docAuditStatusOrDraft(record)
+  const on = docStatusEnabled(record)
+
+  if (aud === AUDIT_STATUS.PENDING) return false
+  if (aud === AUDIT_STATUS.APPROVED && on) return false
+
+  return true
+}
+
+/** 启用：仅审核通过且当前禁用 */
+function canDocEnable(record: any): boolean {
+  const aud = docAuditStatusOrDraft(record)
+  const on = docStatusEnabled(record)
+  return aud === AUDIT_STATUS.APPROVED && !on
+}
+
+/** 禁用：仅审核通过且当前启用 */
+function canDocDisable(record: any): boolean {
+  const aud = docAuditStatusOrDraft(record)
+  const on = docStatusEnabled(record)
+  return aud === AUDIT_STATUS.APPROVED && on
+}
+
+/** 提交审核：仅草稿 */
+function canDocSubmitReview(record: any): boolean {
+  return docAuditStatusOrDraft(record) === AUDIT_STATUS.DRAFT
+}
+
+/** 审核通过：仅待审核 */
+function canDocApprove(record: any): boolean {
+  return docAuditStatusOrDraft(record) === AUDIT_STATUS.PENDING
+}
+
+/** 审核拒绝：仅待审核 */
+function canDocReject(record: any): boolean {
+  return docAuditStatusOrDraft(record) === AUDIT_STATUS.PENDING
+}
+
+function canDocShare(record: any): boolean {
+  return docAuditStatusOrDraft(record) === AUDIT_STATUS.APPROVED
+}
+
+const useKnowledgeDocListPageConfig = createListPageConfig({
+  tableAPI: (params) =>
+    getKnowDocPageAPI({
+      ...params,
+      knowledgeId: knowledgeDocRouteIdRef.current,
+    }),
+  table: {
+    scrollX: false,
+  },
+  deleteAPI: deleteKnowDocAPI,
+  updateStatusAPI: ({ id, status, record }) =>
+    Number(status) === 1
+      ? enableKnowDocAPI(id)
+      : disableKnowDocAPI(id),
+  pageInfo: {
+    // 文档页标题由页面 `titleExtra` 拼接（用于“知识库管理 / xxx · 文档管理”可点击返回）
+    subTitle: 'menus.knowledge.doc.page_subtitle',
+  },
+  searchFields: [
+    {
+      prop: 'keyword',
+      label: 'common.keyword',
+      placeholder: 'menus.knowledge.doc.search_keyword_placeholder',
+    },
+    {
+      prop: 'status',
+      label: 'common.status',
+      type: 'select',
+      placeholder: 'common.status',
+      options: ENUM_DATA.commonStatus.option,
+      width: '120px',
+    },
+    {
+      prop: 'auditStatus',
+      label: 'menus.knowledge.doc.col_audit_status',
+      type: 'select',
+      placeholder: 'menus.knowledge.doc.col_audit_status',
+      options: ENUM_DATA.auditStatus.option,
+      width: '140px',
+    },
+  ],
+  statusToggle: {
+    dangerOnDisable: true,
+    disableConfirm: {
+      cancelText: 'common.cancel',
+      content: 'menus.knowledge.doc.disable_confirm_content',
+      okText: 'common.confirm',
+      title: 'menus.knowledge.doc.disable_confirm_title',
+    },
+    enableConfirm: {
+      cancelText: 'common.cancel',
+      content: 'menus.knowledge.doc.enable_confirm_content',
+      okText: 'common.confirm',
+      title: 'menus.knowledge.doc.enable_confirm_title',
+    },
+  },
+  detailAction: {
+    detailType: 'modal',
+    labelKey: 'common.view',
+  },
+  deleteConfirm: {
+    title: 'menus.knowledge.doc.delete_confirm_title',
+    content: 'menus.knowledge.doc.delete_confirm_content',
+    okText: 'common.delete',
+    cancelText: 'common.cancel',
+  },
+})
+
+function KnowledgeDocDetailView() {
+  const { t, i18n } = useTranslation()
+  const { showToast } = useToast()
+  const { hasPermission } = useAuth()
+  const { id: routeKnowledgeId = '' } = useParams<{ id: string }>()
+  const location = useLocation()
+  const router = useRouter()
+  const knowledgeNameFromList = (
+    location.state as KnowledgeDocLocationState | null
+  )?.knowledgeName
+
+  knowledgeDocRouteIdRef.current = routeKnowledgeId
+
+  const auditStatusTagWidth = i18n.language?.startsWith('en') ? 90 : 80
+
+  const [knowledgeBase, setKnowledgeBase] = useState<KnowledgeBaseBrief | null>(null)
+  const docSubmitRef = useRef<{ open: (p?: unknown) => void } | null>(null)
+  const depUserSelectRef = useRef<{ open: (p?: any) => void } | null>(null)
+  const typePickerRef = useRef<DocTypePickerRef | null>(null)
+
+  const [auditDialog, setAuditDialog] = useState<
+    null | { kind: 'approve' | 'reject'; record: any }
+  >(null)
+  const [submitReviewDialog, setSubmitReviewDialog] = useState<null | { record: any }>(null)
+
+  useEffect(() => {
+    if (!routeKnowledgeId) return
+    let cancelled = false
+    ;(async () => {
+      try {
+        const res = await getKnowledgeDetailAPI(routeKnowledgeId)
+        const raw = (res as any)?.data?.data ?? (res as any)?.data ?? res
+        if (!cancelled) setKnowledgeBase((raw as KnowledgeBaseBrief) ?? null)
+      } catch {
+        if (!cancelled) setKnowledgeBase(null)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [routeKnowledgeId])
+
+  const pageConfig = useKnowledgeDocListPageConfig()
+
+  /** 标题：知识库管理 / {name} · 文档管理（点击“知识库管理”返回列表） */
+  const knowledgeTitleSuffixSlash = useMemo(() => {
+    const fromApi = String(knowledgeBase?.name ?? '').trim()
+    const fromList = String(knowledgeNameFromList ?? '').trim()
+    const name = fromApi || fromList
+    const kbTitle = t('menus.knowledge.page_title')
+    const docTitle = t('menus.knowledge.manage_docs')
+    return (
+      <span className="inline-flex items-center">
+        <button
+          type="button"
+          className="cursor-pointer hover:underline"
+          onClick={() => router.toIndex()}
+        >
+          {kbTitle}
+        </button>
+        {name ? (
+          <>
+            <span className="mx-2">/</span>
+            <span className="max-w-[420px] truncate" title={name}>
+              {name}
+            </span>
+            <span className="mx-2">·</span>
+            <span>{docTitle}</span>
+          </>
+        ) : null}
+      </span>
+    )
+  }, [knowledgeBase?.name, knowledgeNameFromList, router, t])
+
+  // titleExtra 继承 ListPageView 的渐变标题样式
+
+  const openAddDoc = useCallback(() => {
+    void openDocTypePickerModal(typePickerRef).then((picked) => {
+      if (picked === 0 || picked === 1) {
+        docSubmitRef.current?.open({
+          opeType: 'add',
+          docType: picked,
+          knowledgeId: routeKnowledgeId,
+        })
+      }
+    })
+  }, [routeKnowledgeId])
+
+  pageConfig.onEdit = useCallback(
+    (payload: { data?: any }) => {
+      const record = payload?.data
+      docSubmitRef.current?.open({
+        opeType: 'edit',
+        opeId: record?.id,
+        data: record,
+        knowledgeId: routeKnowledgeId,
+      })
+    },
+    [routeKnowledgeId],
+  )
+
+  const docDisplayName = (data: any) =>
+    String(data?.name ?? data?.docName ?? '').trim() || '-'
+
+  const runSubmitReviewConfirm = useCallback(async () => {
+    const record = submitReviewDialog?.record
+    const id = record?.id ?? record?._id
+    if (id === undefined || id === null) {
+      setSubmitReviewDialog(null)
+      return
+    }
+    try {
+      await submitKnowDocAuditAPI(id)
+      showToast(t('menus.knowledge.doc.submit_review_success'), 'success')
+      await pageConfig.fetchTableData?.()
+    } catch (e: any) {
+      console.log(e.message)
+    } finally {
+      setSubmitReviewDialog(null)
+    }
+  }, [pageConfig, showToast, submitReviewDialog, t])
+
+  const runAuditConfirm = useCallback(async () => {
+    if (!auditDialog) return
+    const { kind, record } = auditDialog
+    const id = record?.id ?? record?._id
+    if (id === undefined || id === null) {
+      setAuditDialog(null)
+      return
+    }
+    try {
+      if (kind === 'approve') {
+        await approveKnowDocAPI(id)
+        showToast(t('menus.knowledge.doc.approve_success'), 'success')
+      } else {
+        await rejectKnowDocAPI(id)
+        showToast(t('menus.knowledge.doc.reject_success'), 'success')
+      }
+      await pageConfig.fetchTableData?.()
+    } catch (e: any) {
+      console.log(e.message)
+    } finally {
+      setAuditDialog(null)
+    }
+  }, [auditDialog, pageConfig, showToast, t])
+
+  const columns = useMemo(
+    () => [
+      {
+        title: 'menus.knowledge.doc.name',
+        key: 'name',
+        align: ALIGN.LEFT,
+        minWidth: 200,
+        render: (value: string, data: any) => {
+          const text = value ?? data.docName ?? '-'
+          return (
+            <DetailLink
+              text={text}
+              onClick={() =>
+                pageConfig.onDetail?.({
+                  type: 'detail',
+                  data,
+                  config: pageConfig.detailAction,
+                })
+              }
+            />
+          )
+        },
+      },
+      {
+        title: 'menus.knowledge.doc.version',
+        key: 'version',
+        align: ALIGN.CENTER,
+        width: 100,
+        render: (v: unknown) => (v != null && String(v) !== '' ? String(v) : '-'),
+      },
+      {
+        title: 'menus.knowledge.doc.type',
+        key: 'type',
+        align: ALIGN.CENTER,
+        width: 120,
+        render: (type: unknown, record: any) => {
+          const n = Number(type ?? record.docType ?? 0)
+          const isFile = n === 1
+          return (
+            <CxTag color={isFile ? 'green' : 'blue'}>
+              {isFile ? t('menus.knowledge.doc.type_file') : t('menus.knowledge.doc.type_text')}
+            </CxTag>
+          )
+        },
+      },
+      {
+        title: 'menus.knowledge.doc.col_audit_status',
+        key: 'auditStatus',
+        align: ALIGN.CENTER,
+        width: 110,
+        render: (_: unknown, record: any) => {
+          const a = docAuditStatus(record)
+          if (a === undefined) return <span className="text-gray-400">-</span>
+          return <CxTag.Enum value={a} enumKey="auditStatus"/>
+        },
+      },
+      {
+        title: 'common.status',
+        key: 'status',
+        align: ALIGN.CENTER,
+        width: 100,
+        render: (status: number) => {
+          return (
+            <CxTag.Enabled value={status} />
+          )
+        },
+      },
+      {
+        title: 'common.description',
+        key: 'description',
+        align: ALIGN.CENTER,
+        ellipsis: true,
+        minWidth: 300,
+        render: (v: unknown, record: any) => {
+          const s = String(v ?? record?.description ?? '')
+          if (!s.trim()) return '-'
+          return s.length > 80 ? `${s.slice(0, 80)}…` : s
+        },
+      },
+      {
+        title: 'common.actions',
+        key: 'action',
+        width: 200,
+        align: ALIGN.LEFT,
+        render: (_: any, data: any) => {
+          const showEnable = hasPermission('knowledge:doc:enable') && canDocEnable(data);
+          const showDisable = hasPermission('knowledge:doc:disable') && canDocDisable(data);
+          const showEdit = hasPermission('knowledge:doc:edit') && canDocEdit(data);
+          const showSubmit = hasPermission('knowledge:doc:submitAudit') && canDocSubmitReview(data);
+          const showApprove = hasPermission('knowledge:doc:approve') && canDocApprove(data);
+          const showReject = hasPermission('knowledge:doc:reject') && canDocReject(data);
+          const showDelete = hasPermission('knowledge:doc:delete') && canDocDelete(data);
+          const showShare = hasPermission('knowledge:doc:data-permission-add') && canDocShare(data);
+
+          return (
+            <div className="flex justify-start items-center flex-wrap gap-2">
+              {showShare && (
+                <CxButton.Icon
+                  type="default"
+                  title={t('menus.knowledge.action_doc_share')}
+                  tooltipTone="primary"
+                  icon={<Share2 className="size-4 shrink-0" aria-hidden />}
+                  onClick={() => {
+                    depUserSelectRef.current?.open({
+                      title: t('menus.knowledge.action_doc_share'),
+                      knowledgeId: routeKnowledgeId,
+                      knowledgeDocId: data?.id,
+                      deptSelectable: true,
+                      mode: 'doc-share',
+                    })
+                  }}
+                />
+              )}
+              {showEnable && (
+                <CxButton.IconEnable
+                  onClick={() =>
+                    pageConfig.onStatusToggle?.({
+                      nextStatus: 1,
+                      data,
+                    })
+                  }
+                />
+              )}
+              {showDisable && (
+                <CxButton.IconDisable
+                  onClick={() =>
+                    pageConfig.onStatusToggle?.({
+                      nextStatus: 0,
+                      data,
+                    })
+                  }
+                />
+              )}
+              {showEdit && (
+                <CxButton.IconEdit
+                  onClick={() =>
+                    pageConfig.onEdit?.({
+                      type: 'edit',
+                      data,
+                      config: undefined,
+                    })
+                  }
+                />
+              )}
+              {showSubmit && (
+                <CxButton.Icon
+                  title={t('menus.knowledge.doc.action_submit_review')}
+                  tooltipTone="primary"
+                  icon={<Send size={16} />}
+                  onClick={() => setSubmitReviewDialog({ record: data })}
+                />
+              )}
+              {showApprove && (
+                <CxButton.IconAccept
+                  title={t('menus.knowledge.doc.action_approve')}
+                  onClick={() =>
+                    setAuditDialog({ kind: 'approve', record: data })
+                  }
+                />
+              )}
+              {showReject && (
+                <CxButton.IconReject
+                  title={t('menus.knowledge.doc.action_reject')}
+                  onClick={() =>
+                    setAuditDialog({ kind: 'reject', record: data })
+                  }
+                />
+              )}
+              {showDelete && (
+                <CxButton.IconDelete onClick={() => pageConfig.onDelete?.(data)} />
+              )}
+            </div>
+          )
+        },
+      },
+    ],
+    [t, hasPermission, pageConfig],
+  )
+
+  const auditDialogTitle =
+    auditDialog == null
+      ? ''
+      : auditDialog.kind === 'approve'
+        ? t('menus.knowledge.doc.approve_confirm_title')
+        : t('menus.knowledge.doc.reject_confirm_title')
+  const auditDialogMessage =
+    auditDialog == null
+      ? ''
+      : auditDialog.kind === 'approve'
+        ? t('menus.knowledge.doc.approve_confirm_content', {
+            name: docDisplayName(auditDialog.record),
+          })
+        : t('menus.knowledge.doc.reject_confirm_content', {
+            name: docDisplayName(auditDialog.record),
+          })
+
+  const submitReviewDialogTitle = submitReviewDialog == null ? '' : t('menus.knowledge.doc.submit_review_confirm_title')
+  const submitReviewDialogMessage =
+    submitReviewDialog == null
+      ? ''
+      : t('menus.knowledge.doc.submit_review_confirm_content', {
+          name: docDisplayName(submitReviewDialog.record),
+        })
+
+  return (
+    <>
+      <ListPageView
+        columns={columns}
+        titleIcon={<FileText className="text-blue-400" size={32} />}
+        headerActions={
+          hasPermission('knowledge:doc:add') ? (
+            <CxButton.Add onClick={openAddDoc}>{t('menus.knowledge.doc.add')}</CxButton.Add>
+          ) : null
+        }
+        pageConfig={pageConfig}
+        detailModalComponent={DocDetailModal}
+        showBackToList
+        titleExtra={knowledgeTitleSuffixSlash}
+      />
+      <DocSubmitModal
+        ref={docSubmitRef}
+        onOk={async () => {
+          await pageConfig.fetchTableData?.()
+        }}
+        onCancel={() => {}}
+      />
+      <DocTypePickerModal ref={typePickerRef} />
+      <ConfirmDialog
+        overlayClassName="z-[2000]"
+        isOpen={auditDialog != null}
+        title={auditDialogTitle}
+        message={auditDialogMessage}
+        danger={auditDialog?.kind === 'reject'}
+        onClose={() => setAuditDialog(null)}
+        onConfirm={() => void runAuditConfirm()}
+      />
+      <ConfirmDialog
+        overlayClassName="z-[2000]"
+        isOpen={submitReviewDialog != null}
+        title={submitReviewDialogTitle}
+        message={submitReviewDialogMessage}
+        onClose={() => setSubmitReviewDialog(null)}
+        onConfirm={() => void runSubmitReviewConfirm()}
+      />
+      <KnowledgeUserSelectModal
+        ref={depUserSelectRef}
+        onOk={async () => {
+          // 暂只负责“分配”动作；结果展示后续在 detail-modal 内做
+        }}
+      />
+    </>
+  )
+}
+
+export default KnowledgeDocDetailView