cx-chat 0.0.2 → 0.0.4

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

@@ -1,330 +0,0 @@
-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>
-  )
-}