cx-chat 0.0.1

package/src/views/chat/components/references-knowledge/modal/knowledge-detail-drawer.tsx

@@ -0,0 +1,556 @@
+import {
+  deleteKnowSharedAPI,
+  editKnowledgePermissionAPI,
+  getKnowledgeDetailAPI,
+  getKnowledgePermissionListAPI,
+  getKnowSharedUserPageAPI,
+} from '@/api/menus/knowledge'
+import { getDepartmentTreeAPI } from '@/api/system/department'
+import ConfirmDialog from '@/components/common/modal/confirm-dialog'
+import { createSelectTableConfig, SelectTableView } from '@/components/table-view'
+import { useAuth } from '@/contexts/AuthContext'
+import { useToast } from '@/contexts/ToastContext'
+import { CxButton, CxCheckbox, CxDrawer, CxTable, CxTabs, CxTag, useCxModal } from '@cx-ui'
+import { Form, Spin } from 'antd'
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { X } from 'lucide-react'
+
+interface OpenPayload {
+  opeId?: string | number
+  record?: any
+}
+
+const KnowledgeDetailDrawer = forwardRef<any, unknown>(function KnowledgeDetailDrawer(_props, ref) {
+  const { t } = useTranslation()
+  const { hasPermission } = useAuth()
+  const { showToast } = useToast()
+  const [loading, setLoading] = useState(false)
+  const [activeTab, setActiveTab] = useState('permission')
+  const [permissionList, setPermissionList] = useState<any[]>([])
+  const [permissionDraftList, setPermissionDraftList] = useState<any[]>([])
+  const [permissionEditing, setPermissionEditing] = useState(false)
+  const [permissionSubmitting, setPermissionSubmitting] = useState(false)
+  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 canViewPermissionList = hasPermission('knowledge:data-permission-list')
+  const canEditPermission = hasPermission('knowledge:manage-permission-edit')
+  const canViewSharePage = hasPermission('knowledge:data-permission-page')
+  const canDeleteShare = hasPermission('knowledge:data-permission-delete')
+
+  /** 打开抽屉时加载详情与权限数据。 */
+  const modal = useCxModal({
+    onOpen: async (payload: OpenPayload & { data?: any }) => {
+      const opeId = payload.opeId ?? payload.data?.id
+      setLoading(true)
+      modal.setFormData({})
+      setPermissionList([])
+      setPermissionDraftList([])
+      setPermissionEditing(false)
+      setPermissionSubmitting(false)
+      setShareSelectedRows([])
+      setShareRemoving(false)
+      setShareRemovingSubmitting(false)
+      setShareRemoveSubmitConfirmOpen(false)
+      setShareTreeCheckedKeys(new Set())
+      setActiveTab('permission')
+
+      if (opeId != null && opeId !== '') {
+        try {
+          const res = await getKnowledgeDetailAPI(opeId)
+          const detail = res?.data ?? {}
+          modal.setFormData({
+            id: opeId,
+            code: detail.code ?? '',
+            name: detail.name ?? '',
+            description: detail.description ?? '',
+            type: detail.type,
+            status: detail.status,
+            userId: detail.userId ?? '',
+            createTime: detail.createTime ?? '',
+            updateTime: detail.updateTime ?? '',
+          })
+
+          if (canViewPermissionList) {
+            try {
+              const permRes = await getKnowledgePermissionListAPI(opeId)
+              const permData = permRes?.data?.data ?? permRes?.data ?? []
+              const list = Array.isArray(permData) ? permData : []
+              setPermissionList(list)
+              setPermissionDraftList(list)
+            } catch (e) {
+              console.error('获取权限列表失败', e)
+              setPermissionList([])
+              setPermissionDraftList([])
+            }
+          }
+        } finally {
+          setLoading(false)
+        }
+      } else {
+        setLoading(false)
+      }
+    },
+    onClose: () => {},
+  })
+
+  const { isOpen, close } = modal
+  const detailData = (modal.formData ?? {}) as Record<string, any>
+
+  /** 暴露给父组件的 open/close 调用方法。 */
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  /** 清空共享列表的勾选数据。 */
+  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)
+  }, [])
+
+  /** 切换共享树节点勾选状态。 */
+  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
+    })
+  }, [])
+
+  /** 开始编辑权限草稿。 */
+  const handlePermissionEditStart = useCallback(() => {
+    setPermissionDraftList(permissionList.map((x) => ({ ...x })))
+    setPermissionEditing(true)
+  }, [permissionList])
+
+  /** 取消编辑并恢复原权限数据。 */
+  const handlePermissionEditCancel = useCallback(() => {
+    setPermissionDraftList(permissionList.map((x) => ({ ...x })))
+    setPermissionEditing(false)
+  }, [permissionList])
+
+  /** 切换单行权限勾选状态。 */
+  const handleTogglePermission = useCallback(
+    (row: any, field: 'knowledgePermission' | 'knowledgeDocPermission', checked: boolean) => {
+      const rowId = row?.userId ?? row?.id
+      setPermissionDraftList((prev) =>
+        prev.map((item) => {
+          const itemId = item?.userId ?? item?.id
+          if (String(itemId) !== String(rowId)) return item
+          return {
+            ...item,
+            [field]: checked,
+          }
+        }),
+      )
+    },
+    [],
+  )
+
+  /** 提交权限编辑结果。 */
+  const handlePermissionSubmit = useCallback(async () => {
+    const knowledgeId = detailData.id
+    if (!knowledgeId) return
+    setPermissionSubmitting(true)
+    try {
+      const knowledgeUserIdList = permissionDraftList
+        .filter((x) => x?.knowledgePermission === true)
+        .map((x) => x?.userId ?? x?.id)
+        .filter((x) => x != null && String(x) !== '')
+      const knowledgeDocumentUserIdList = permissionDraftList
+        .filter((x) => x?.knowledgeDocPermission === true)
+        .map((x) => x?.userId ?? x?.id)
+        .filter((x) => x != null && String(x) !== '')
+      await editKnowledgePermissionAPI({
+        knowledgeId,
+        knowledgeUserIdList,
+        knowledgeDocumentUserIdList,
+      })
+      setPermissionList(permissionDraftList.map((x) => ({ ...x })))
+      setPermissionEditing(false)
+      showToast(t('common.operation_success'), 'success')
+    } catch (error) {
+      console.error('更新知识库权限失败', error)
+    } finally {
+      setPermissionSubmitting(false)
+    }
+  }, [detailData.id, permissionDraftList, showToast, t])
+
+  /** 权限表格列定义。 */
+  const permissionColumns = useMemo(
+    () => [
+      {
+        title: t('menus.knowledge.share.user_name'),
+        dataIndex: 'userName',
+        key: 'userName',
+        width: 120,
+      },
+      {
+        title: t('menus.knowledge.permission_kb_manage'),
+        dataIndex: 'knowledgePermission',
+        key: 'knowledgePermission',
+        width: 100,
+        render: (value: boolean, row: any) =>
+          permissionEditing ? (
+            <CxCheckbox checked={value === true} onChange={(checked) => handleTogglePermission(row, 'knowledgePermission', checked)} />
+          ) : (
+            <CxTag.YesNo value={value ? 1 : 0} />
+          ),
+      },
+      {
+        title: t('menus.knowledge.permission_doc_manage'),
+        dataIndex: 'knowledgeDocPermission',
+        key: 'knowledgeDocPermission',
+        width: 100,
+        render: (value: boolean, row: any) =>
+          permissionEditing ? (
+            <CxCheckbox checked={value === true} onChange={(checked) => handleTogglePermission(row, 'knowledgeDocPermission', checked)} />
+          ) : (
+            <CxTag.YesNo value={value ? 1 : 0} />
+          ),
+      },
+    ],
+    [handleTogglePermission, permissionEditing, t],
+  )
+
+  /** 构建共享分页表格配置。 */
+  const useShareTableConfig = createSelectTableConfig({
+    tableAPI: canViewSharePage
+      ? (queryParams) => {
+          const knowledgeId = detailData.id
+          if (!knowledgeId) {
+            return Promise.resolve({ data: { content: [], totalElements: 0 } })
+          }
+          if (queryParams.departmentId === '0') {
+            queryParams.departmentId = null
+          }
+          return getKnowSharedUserPageAPI({
+            ...queryParams,
+            knowledgeId,
+          })
+        }
+      : 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 },
+  })
+
+  /** 获取共享分页配置实例。 */
+  const shareTableConfig = useShareTableConfig()
+
+  /** 提交共享批量移除。 */
+  const submitShareRemoving = useCallback(async () => {
+    const knowledgeId = detailData.id
+    if (!knowledgeId) 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 deleteKnowSharedAPI({
+        knowledgeId,
+        idList,
+        departmentIdList,
+      })
+      showToast(t('common.operation_success'), 'success')
+      cancelShareRemoving()
+      closeShareRemoveSubmitConfirm()
+      await shareTableConfig?.fetchTableData?.()
+    } catch (e) {
+      console.error('remove knowledge share failed:', e)
+    } finally {
+      setShareRemovingSubmitting(false)
+    }
+  }, [
+    cancelShareRemoving,
+    closeShareRemoveSubmitConfirm,
+    detailData.id,
+    shareSelectedRows,
+    shareTableConfig,
+    shareTreeCheckedKeys,
+    showToast,
+    t,
+  ])
+
+  /** 共享表格列定义。 */
+  const shareColumns = useMemo(
+    () => [
+      {
+        title: 'menus.knowledge.share.user_name',
+        dataIndex: 'userName',
+        key: 'userName',
+        width: 120,
+      },
+      {
+        title: 'menus.knowledge.share.department',
+        dataIndex: 'departmentName',
+        key: 'departmentName',
+        width: 150,
+      },
+    ],
+    [],
+  )
+
+  /** 根据当前 tab 构建右上角操作按钮。 */
+  const tabActions = useMemo(() => {
+    if (activeTab === 'permission' && canEditPermission) {
+      if (permissionEditing) {
+        return (
+          <>
+            <CxButton size="small" type="default" onClick={handlePermissionEditCancel} disabled={permissionSubmitting}>
+              {t('common.cancel')}
+            </CxButton>
+            <CxButton size="small" type="primary" loading={permissionSubmitting} onClick={handlePermissionSubmit}>
+              {t('common.submit')}
+            </CxButton>
+          </>
+        )
+      }
+      return (
+        <CxButton size="small" type="primary" onClick={handlePermissionEditStart}>
+          {t('common.edit')}
+        </CxButton>
+      )
+    }
+
+    if (activeTab === 'share' && canDeleteShare) {
+      if (shareRemoving) {
+        return (
+          <>
+            <CxButton.Cancel size="small" type="default" 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,
+    canEditPermission,
+    canDeleteShare,
+    permissionEditing,
+    permissionSubmitting,
+    shareSelectedRows.length,
+    shareTreeCheckedKeys.size,
+    shareRemoving,
+    shareRemovingSubmitting,
+    handlePermissionEditCancel,
+    handlePermissionEditStart,
+    handlePermissionSubmit,
+    cancelShareRemoving,
+    openShareRemoveSubmitConfirm,
+    startShareRemoving,
+    t,
+  ])
+
+  return (
+    <CxDrawer
+      title={t('menus.knowledge.detail_title')}
+      isOpen={isOpen}
+      onClose={close}
+      drawerConfig={{
+        width: 1200,
+        closable: false,
+        extra: (
+          <button
+            type="button"
+            className="rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200"
+            onClick={close}
+            aria-label={t('common.close')}
+          >
+            <X size={16} />
+          </button>
+        ),
+        styles: {
+          body: {
+            padding: 24,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            height: 'min(95dvh, 95vh)',
+          },
+        },
+      }}
+    >
+      {loading ? (
+        <div className="flex justify-center py-20">
+          <Spin size="large" />
+        </div>
+      ) : (
+        <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+          <div className="shrink-0 grid grid-cols-1 md:grid-cols-4">
+            <Form.Item label={t('menus.knowledge.code')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">{detailData.code || '-'}</div>
+            </Form.Item>
+
+            <Form.Item label={t('menus.knowledge.name')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">{detailData.name || '-'}</div>
+            </Form.Item>
+
+            <Form.Item label={t('menus.knowledge.type')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                <CxTag.Enum value={detailData.type} enumKey="knowledgeType" />
+              </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 md:col-span-4">
+              <div className="text-sm text-gray-900 dark:text-gray-100 break-words">{detailData.description || '-'}</div>
+            </Form.Item>
+          </div>
+
+          <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
+            <CxTabs
+              activeKey={activeTab}
+              onChange={setActiveTab}
+              className="flex-1 flex flex-col min-h-0 [&_.ant-tabs-nav]:pr-[220px]"
+              items={[
+                {
+                  key: 'permission',
+                  label: t('menus.knowledge.tab_permission'),
+                  children: (
+                    <div className="h-full overflow-auto">
+                      <CxTable
+                        columns={permissionColumns}
+                        dataSource={permissionEditing ? permissionDraftList : permissionList}
+                        rowKey="userId"
+                        pagination={false}
+                        scroll={{ y: 300 }}
+                      />
+                    </div>
+                  ),
+                },
+                {
+                  key: 'share',
+                  label: t('menus.knowledge.tab_share'),
+                  children: (
+                    <div className="min-h-0 flex-1 flex flex-col overflow-hidden h-full">
+                      {shareTableConfig ? (
+                        <div className="flex h-full min-h-0 flex-col overflow-hidden">
+                          <div className="min-h-0 flex-1">
+                            <SelectTableView
+                              expectTree
+                              noPadding
+                              pageConfig={shareTableConfig}
+                              columns={shareColumns as any}
+                              rowKey="userId"
+                              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 h-full items-center justify-center text-gray-400">{t('common.no_data')}</div>
+                      )}
+                    </div>
+                  ),
+                },
+              ]}
+            />
+          </div>
+        </div>
+      )}
+    </CxDrawer>
+  )
+})
+
+KnowledgeDetailDrawer.displayName = 'KnowledgeDetailDrawer'
+
+export default KnowledgeDetailDrawer