cx-chat 0.0.1

package/src/views/page-menus/knowledge/components/doc-editor-type-file.tsx

@@ -0,0 +1,330 @@
+import { CxTable, UploadFile as CxUploadFile } from '@cx-ui'
+import { Button, Form } from 'antd'
+import type { ColumnsType } from 'antd/es/table'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type RowItem = {
+  rowKey: string
+  fileId?: string
+  name?: string
+  fileName?: string
+  fileType?: string
+  fileUrl?: string
+  id?: string
+  sortOrder?: number
+}
+
+type Props = {
+  value?: RowItem[]
+  onChange?: (next: RowItem[]) => void
+  /** 表格内容区内部滚动（表头固定、底部提示固定），默认 false */
+  enableTableContentScroll?: boolean
+}
+
+let __rowKeySeq = 0
+const genRowKey = () => {
+  const cryptoAny: any = globalThis.crypto
+  if (cryptoAny && typeof cryptoAny.randomUUID === 'function') {
+    return cryptoAny.randomUUID() as string
+  }
+  __rowKeySeq += 1
+  return `${Date.now()}_${__rowKeySeq}`
+}
+
+/** 初始化默认一行数据（新增态进入文件模式时使用）。 */
+const createEmptyRow = (): RowItem => ({ rowKey: genRowKey(), fileId: '' })
+
+/** 类型 1：文件模式（表格 + 上传文件 + 排序）。 */
+export function DocEditorTypeFile({ value, onChange, enableTableContentScroll = true }: Props) {
+  const { t } = useTranslation()
+  const form = Form.useFormInstance()
+  const [dragOverKey, setDragOverKey] = useState<string | null>(null)
+  const draggingKeyRef = useRef<string | null>(null)
+  const hintRef = useRef<HTMLDivElement | null>(null)
+  const tableAreaRef = useRef<HTMLDivElement | null>(null)
+  const [tableScrollY, setTableScrollY] = useState<number | undefined>(undefined)
+  const calcScrollYRef = useRef<(() => void) | null>(null)
+
+  const rows: RowItem[] = Array.isArray(value) ? value : []
+
+  /** 写回表格数据到表单字段。 */
+  const commitRows = (next: RowItem[]) => {
+    onChange?.(next)
+    form.setFieldsValue({ knowledgeDocumentFileInfoDTOList: next })
+  }
+
+  /**
+   * 归一化行 key：
+   * - 编辑回显场景可能没有 rowKey
+   * - 不能用 index 当 token（删行/插行后会导致 key 复用，出现“删不动/序号错乱/行复用”）
+   * - 发现缺失 rowKey 时生成并写回（只写一次），保证后续稳定
+   */
+  const normalizeRows = (list: RowItem[]) => {
+    let changed = false
+    const next = (Array.isArray(list) ? list : []).map((r) => {
+      if (r?.rowKey) return r
+      changed = true
+      return { ...r, rowKey: genRowKey() }
+    })
+    return { next, changed }
+  }
+
+  const normalized = normalizeRows(rows)
+  const viewRows = normalized.next
+
+  useEffect(() => {
+    if (normalized.changed) {
+      commitRows(viewRows)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [normalized.changed])
+
+  useEffect(() => {
+    if (!enableTableContentScroll) {
+      setTableScrollY(undefined)
+      return
+    }
+    const area = tableAreaRef.current
+    if (!area) return
+
+    const calc = () => {
+      const h = area.getBoundingClientRect().height
+      if (!Number.isFinite(h) || h <= 0) {
+        setTableScrollY(undefined)
+        return
+      }
+      const headerH =
+        area.querySelector('.ant-table-header')?.getBoundingClientRect().height ?? 0
+      // antd scroll.y 控制的是 table body 高度，header 不在 body 内，需要扣掉 header 高度
+      const next = Math.floor(h - headerH)
+      setTableScrollY(next > 0 ? Math.max(120, next) : undefined)
+    }
+
+    calcScrollYRef.current = calc
+
+    // 初次挂载先补几次（等布局稳定）
+    const raf = requestAnimationFrame(() => calc())
+    const t0 = window.setTimeout(() => calc(), 0)
+    const t1 = window.setTimeout(() => calc(), 80)
+
+    // 表格区域高度由弹框/父级决定：用 ResizeObserver 跟随容器高度变化
+    const ro = new ResizeObserver(() => calc())
+    ro.observe(area)
+    return () => {
+      cancelAnimationFrame(raf)
+      window.clearTimeout(t0)
+      window.clearTimeout(t1)
+      ro.disconnect()
+      calcScrollYRef.current = null
+    }
+  }, [enableTableContentScroll])
+
+  useEffect(() => {
+    if (!enableTableContentScroll) return
+    const calc = calcScrollYRef.current
+    if (!calc) return
+    // 回显/新增/删除会影响 header 的实际高度，补一次重算，避免 body 高度偏小导致“撑不满”
+    const raf = requestAnimationFrame(() => calc())
+    return () => cancelAnimationFrame(raf)
+  }, [enableTableContentScroll, viewRows.length])
+
+  useEffect(() => {
+    if (viewRows.length === 0) onChange?.([createEmptyRow()])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  /** 按 rowKey 更新单行字段。 */
+  const updateRow = (rowKey: string, patch: Partial<RowItem>) => {
+    const next = viewRows.map((r) => (r.rowKey === rowKey ? { ...r, ...patch } : r))
+    commitRows(next)
+  }
+
+  /** 按下标更新单行字段：用于 rowKey 不匹配时兜底更新。 */
+  const updateRowAt = (index: number, patch: Partial<RowItem>) => {
+    const next = viewRows.map((r, i) => (i === index ? { ...r, ...patch } : r))
+    commitRows(next)
+  }
+
+  /** 新增一行：追加到末尾。 */
+  const handleAddRow = () => {
+    commitRows([...viewRows, createEmptyRow()])
+  }
+
+  /** 删除一行：最后一行不可删除。 */
+  const handleDeleteRow = (rowKey: string) => {
+    if (viewRows.length <= 1) return
+    commitRows(viewRows.filter((r) => r.rowKey !== rowKey))
+  }
+
+  /** 上移/下移：按当前位置交换顺序。 */
+  const moveRow = (fromIndex: number, toIndex: number) => {
+    if (toIndex < 0 || toIndex >= viewRows.length) return
+    const next = [...viewRows]
+    const item = next[fromIndex]
+    next.splice(fromIndex, 1)
+    next.splice(toIndex, 0, item)
+    commitRows(next)
+  }
+
+  /** 拖拽排序：HTML5 drag&drop 交换行位置。 */
+  const handleDropOnRow = (targetKey: string) => {
+    const fromKey = draggingKeyRef.current
+    draggingKeyRef.current = null
+    setDragOverKey(null)
+    if (!fromKey || fromKey === targetKey) return
+    const fromIndex = viewRows.findIndex((r) => r.rowKey === fromKey)
+    const toIndex = viewRows.findIndex((r) => r.rowKey === targetKey)
+    if (fromIndex < 0 || toIndex < 0) return
+    moveRow(fromIndex, toIndex)
+  }
+
+  const columns: ColumnsType<RowItem> = useMemo(
+    () => [
+      {
+        title: t('common.index'),
+        width: 70,
+        align: 'center',
+        render: (_v, _r, index) => index + 1,
+      },
+      {
+        title: t('menus.knowledge.doc.attachment'),
+        key: 'fileId',
+        width: 520,
+        onCell: () => ({
+          style: { paddingTop: 6, paddingBottom: 6 },
+        }),
+        render: (fileId: string | undefined, row, index) => (
+          <CxUploadFile
+            value={fileId ? [fileId] : []}
+            fileList={
+              row.fileId
+                ? [
+                    {
+                      uid: row.fileId,
+                      name: row.fileName ?? '',
+                      status: 'done',
+                      ...(row.fileUrl ? ({ url: row.fileUrl, address: row.fileUrl } as any) : undefined),
+                    } as any,
+                  ]
+                : []
+            }
+            maxCount={1}
+            displayMode="picture+list"
+            thumbSize={80}
+            onUploaded={(fileList) => {
+              const first: any = Array.isArray(fileList) ? fileList[0] : undefined
+              const nextFileId = first?.id ?? first?.uid ?? ''
+              const current = normalizeRows(
+                (form.getFieldValue('knowledgeDocumentFileInfoDTOList') as RowItem[]) || []
+              ).next
+              const next = current.map((r, i) =>
+                i === index
+                  ? {
+                      ...r,
+                      rowKey: r.rowKey || genRowKey(),
+                      fileId: nextFileId,
+                      fileName: first?.fullName ?? first?.name ?? '',
+                      fileType: first?.fileType ?? first?.type ?? '',
+                      fileUrl: first?.address ?? first?.url ?? '',
+                      id: first?.id ?? '',
+                    }
+                  : r
+              )
+              commitRows(next)
+            }}
+          />
+        ),
+      },
+      {
+        title: t('common.actions'),
+        width: 220,
+        align: 'center',
+        render: (_v, row, index) => (
+          <div className="flex items-center justify-center gap-2">
+            <Button size="small" onClick={() => moveRow(index, index - 1)} disabled={index === 0}>
+              {t('common.move_up')}
+            </Button>
+            <Button
+              size="small"
+              onClick={() => moveRow(index, index + 1)}
+              disabled={index === viewRows.length - 1}>
+              {t('common.move_down')}
+            </Button>
+            <Button
+              size="small"
+              danger
+              onClick={() => handleDeleteRow(row.rowKey)}
+              disabled={viewRows.length <= 1}>
+              {t('common.delete')}
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    [viewRows, t],
+  )
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden bg-white dark:bg-gray-900">
+      <div className="px-3 py-2 flex items-center justify-between border-b border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/80">
+        <div className="text-xs font-medium text-gray-500">{t('menus.knowledge.doc.attachment')}</div>
+        <Button size="small" type="primary" onClick={handleAddRow}>
+          {t('common.add')}
+        </Button>
+      </div>
+
+      <div className={enableTableContentScroll ? 'flex min-h-0 flex-1 flex-col overflow-hidden' : 'flex-1'}>
+        <div ref={tableAreaRef} className="flex-1 min-h-0 overflow-hidden">
+          <CxTable<RowItem>
+            size="small"
+            rowKey="rowKey"
+            className="cx-doc-editor-type-file-table"
+            columns={columns}
+            dataSource={viewRows}
+            sticky={enableTableContentScroll}
+            scroll={
+              enableTableContentScroll
+                ? { x: 980, ...(tableScrollY != null ? { y: tableScrollY } : undefined) }
+                : { x: 980 }
+            }
+            onRow={(record) => ({
+              draggable: true,
+              onDragStart: (e) => {
+                // 点击上传区域时不触发行拖拽，避免影响“点击选择文件”
+                const target = e.target as any
+                if (target && typeof target.closest === 'function' && target.closest('.ant-upload')) {
+                  e.preventDefault()
+                  return
+                }
+                draggingKeyRef.current = record.rowKey
+              },
+              onDragOver: (e) => {
+                // 文件拖拽上传时不要拦截，否则会导致 Upload.Dragger 收不到 drop 事件
+                if (e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files')) return
+                e.preventDefault()
+                setDragOverKey(record.rowKey)
+              },
+              onDrop: (e) => {
+                // 文件拖拽上传时不要走行排序 drop
+                if (e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files')) return
+                e.preventDefault()
+                handleDropOnRow(record.rowKey)
+              },
+            })}
+            rowClassName={(record) =>
+              dragOverKey === record.rowKey ? 'bg-blue-50 dark:bg-blue-900/20' : ''
+            }
+          />
+        </div>
+
+        <div
+          ref={hintRef}
+          className="px-3 py-2 text-xs text-gray-400 border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/80"
+        >
+          {t('common.drag_sort_hint')}
+        </div>
+      </div>
+    </div>
+  )
+}