cx-chat 0.0.1

package/src/components/cx-ui/upload-file/index.tsx

@@ -0,0 +1,640 @@
+import { downloadFileAPI, getFileInfoAPI, getImgAPI, uploadFileAPI } from '@/api/upload'
+import { handlerDownload } from '@/utils'
+import { getFileIconAssetByName, getLowerFileExt, renderFileIconAsset } from '@/utils/file-icons'
+import { getStore } from '@/utils/storage'
+import {
+  DeleteOutlined,
+  DownloadOutlined,
+  EyeOutlined,
+  InboxOutlined,
+  PlusOutlined,
+} from '@ant-design/icons'
+import { CxModal, CxTooltip, useCxModal } from '@cx-ui'
+import aesUtil from '@utils/aesUtil'
+import type { UploadFile, UploadProps } from 'antd'
+import { Button, Image, Upload, message } from 'antd'
+import type { RcFile } from 'antd/es/upload'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import './index.less'
+
+// 图片回显缓存：避免同一 address 重复请求 getImg
+const IMG_OBJECT_URL_CACHE = new Map<string, string>()
+const IMG_OBJECT_URL_PENDING = new Map<string, Promise<string>>()
+
+const isPreviewableUrl = (url: unknown) => {
+  if (url == null) return false
+  const str = `${url}`
+  return /^https?:\/\//i.test(str) || /^data:/i.test(str) || /^blob:/i.test(str)
+}
+
+
+const normalizeApiData = (raw: any) => {
+  if (raw?.data?.data != null) return raw.data.data
+  if (raw?.data != null) return raw.data
+  return raw
+}
+
+const isImageFile = (file: Pick<UploadFile, 'type' | 'name' | 'url'>) => {
+  if (file.type && file.type.startsWith('image/')) return true
+  const ext = getLowerFileExt(file.name || (file.url ? `${file.url}` : ''))
+  return ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg'].includes(ext)
+}
+
+const isAcceptedFile = (file: File, accept: string) => {
+  const rule = (accept || '').trim()
+  if (!rule || rule === '*') return true
+
+  const items = rule
+    .split(',')
+    .map((x) => x.trim())
+    .filter(Boolean)
+  if (items.length === 0) return true
+
+  const name = (file.name || '').toLowerCase()
+  const type = file.type || ''
+
+  return items.some((it) => {
+    if (it === '*/*') return true
+    if (it.endsWith('/*')) {
+      const prefix = it.slice(0, it.length - 1)
+      return type.startsWith(prefix)
+    }
+    if (it.startsWith('.')) return name.endsWith(it.toLowerCase())
+    return type === it
+  })
+}
+
+const getThumbUrl = (file: UploadFile) => {
+  if (file.url) return `${file.url}`
+  const address = (file as any)?.address ? `${(file as any).address}` : ''
+  if (isPreviewableUrl(address)) return address
+  return ''
+}
+
+/** 根据文件后缀返回图标颜色（用于上传组件的文件缩略图）。 */
+const getFileIconColorByExt = (ext?: string) => {
+  const e = (ext || '').toLowerCase()
+  if (['doc', 'docx'].includes(e)) return '#2b6ff7'
+  if (['xls', 'xlsx', 'csv'].includes(e)) return '#17a34a'
+  if (['ppt', 'pptx'].includes(e)) return '#f97316'
+  if (['pdf'].includes(e)) return '#ef4444'
+  if (['txt', 'md', 'log'].includes(e)) return '#64748b'
+  if (['zip', 'rar', '7z', 'tar', 'gz'].includes(e)) return '#8b5cf6'
+  if (['mp3', 'wav', 'flac', 'aac'].includes(e)) return '#06b6d4'
+  if (['mp4', 'mov', 'avi', 'mkv', 'webm'].includes(e)) return '#a855f7'
+  return 'rgba(0,0,0,0.45)'
+}
+
+const getServerDisplayName = (data: any, fallback?: string) => {
+  if (data?.fileName) return `${data.fileName}`
+  if (data?.fullName) return `${data.fullName}`
+  if (data?.name && data?.suffix) return `${data.name}.${data.suffix}`
+  if (data?.name) return `${data.name}`
+  return fallback || 'file'
+}
+
+export type UploadFileDisplayMode = string
+
+export type UploadFileProps = {
+  /** 回显用的文件 id 集合（编辑态传入），例如 ['id1','id2'] */
+  value?: string[]
+  /** 直接设置回显用的 fileList（优先级高于 value 拉取详情） */
+  fileList?: UploadFile[]
+  /** 上传成功后的回调：直接回传上传后的 fileList（antd UploadFile[]）。 */
+  onUploaded?: (fileList: UploadFile[]) => void
+  /** 是否公开文件：影响上传参数与回显取图接口，默认 false */
+  isPublic?: boolean
+  /** 最大文件大小（KB），默认 20480KB（20MB） */
+  maxSizeKB?: number
+  /** 接受的文件类型，默认 * */
+  accept?: string
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 允许上传的最大个数，默认 9 */
+  maxCount?: number
+  /** 是否支持拖拽上传，默认 true；false 时展示按钮上传 */
+  draggable?: boolean
+  /**
+   * 显示方式：
+   * - 'file-list'：文件列表
+   * - 'picture'：卡片/缩略图（图片直接展示，其他展示图标）
+   * - 'picture+list'：上面卡片，下面列表
+   */
+  displayMode?: UploadFileDisplayMode
+  /** 缩略图尺寸（px），仅 picture / picture+list 生效，默认 104 */
+  thumbSize?: number
+}
+
+/** 文件上传组件：基于 antd Upload 封装，支持拖拽/按钮、图片预览、文件下载与删除。 */
+const UploadFile: React.FC<UploadFileProps> = ({
+  value,
+  fileList,
+  onUploaded,
+  isPublic = false,
+  maxSizeKB = 20 * 1024,
+  accept = '*',
+  disabled = false,
+  maxCount = 9,
+  draggable = true,
+  displayMode = 'file-list',
+  thumbSize = 104,
+}) => {
+  const { t } = useTranslation()
+  const [uploadFileList, setUploadFileList] = useState<UploadFile[]>([])
+  const [previewTitle, setPreviewTitle] = useState('')
+  const [previewUrl, setPreviewUrl] = useState('')
+  const previewModal = useCxModal()
+  const nameNodeMapRef = useRef(new Map<string, HTMLDivElement | null>())
+  const [nameTooltipOpenMap, setNameTooltipOpenMap] = useState<Record<string, boolean>>({})
+
+  const isPictureMode = displayMode === 'picture' || displayMode === 'picture+list'
+  const listType: UploadProps['listType'] = isPictureMode ? 'picture-card' : 'text'
+
+  const canUploadMore = uploadFileList.length < maxCount
+  const isEmpty = uploadFileList.length === 0
+  const hasUploading = uploadFileList.some((f) => f && f.status === 'uploading')
+
+  const uploadHeaders = useMemo(() => {
+    const token = getStore('token')
+    return token ? ({ 'token-agent': `${token}` } as any) : undefined
+  }, [])
+
+  useEffect(() => {
+    if (Array.isArray(fileList)) {
+      setUploadFileList(fileList)
+      return
+    }
+
+    let cancelled = false
+
+    const run = async () => {
+      const list = Array.isArray(value) ? value : []
+      if (list.length === 0) {
+        setUploadFileList([])
+        return
+      }
+
+      // fileId：拉取文件详情拿到 fullName/address
+      let infos: any[] = []
+      try {
+        const res = await getFileInfoAPI(list.join(','))
+          const data = normalizeApiData(res)
+          infos = Array.isArray(data) ? data : data?.list || []
+      } catch {
+        infos = []
+      }
+
+      const infoMap = new Map<string, any>()
+      infos.forEach((x) => {
+        const id = x?.id != null ? `${x.id}` : ''
+        if (id) infoMap.set(id, x)
+      })
+
+      const next = await Promise.all(
+        list.map(async (fileId) => {
+          const info = infoMap.get(fileId)
+          const address = info?.address ? `${info.address}` : ''
+          const name = getServerDisplayName(info, 'file')
+
+          const base: UploadFile = {
+            uid: fileId,
+            name,
+            status: 'done',
+            ...(address ? ({ address } as any) : undefined),
+            ...(isPreviewableUrl(address) ? ({ url: address } as any) : undefined),
+          }
+
+          if (!isPictureMode) return base
+
+          // picture 模式：仅图片才取 blob 预览（非图片就显示图标）
+          if (!isImageFile({ name, url: address })) return base
+          if (!address) return base
+
+          try {
+            const cacheKey = `${isPublic ? 1 : 0}:${address}`
+            const cachedUrl = IMG_OBJECT_URL_CACHE.get(cacheKey)
+            if (cachedUrl) return { ...base, url: cachedUrl }
+
+            const pending = IMG_OBJECT_URL_PENDING.get(cacheKey)
+            const urlPromise =
+              pending ??
+              (async () => {
+                const blob: any = await getImgAPI({ isPublic, url: aesUtil.encrypt(address) })
+                const url = blob ? URL.createObjectURL(blob) : ''
+                if (url) IMG_OBJECT_URL_CACHE.set(cacheKey, url)
+                return url
+              })()
+
+            if (!pending) IMG_OBJECT_URL_PENDING.set(cacheKey, urlPromise)
+            const url = await urlPromise
+            IMG_OBJECT_URL_PENDING.delete(cacheKey)
+            return { ...base, url }
+          } catch {
+            return base
+          }
+        })
+      )
+
+      if (cancelled) return
+      setUploadFileList(next)
+    }
+
+    void run()
+    return () => {
+      cancelled = true
+    }
+  }, [fileList, value, isPublic, isPictureMode])
+
+  /** 自定义上传：调用 uploadFileAPI，拦截器已统一解密。 */
+  const customUpload: UploadProps['customRequest'] = async (options) => {
+    const { file, onSuccess, onError } = options
+
+    try {
+      const response: any = await uploadFileAPI({
+        file: file as RcFile,
+        isPublic,
+      })
+
+      // 拦截器返回 { code: 200, data: {...} }，需取 data 字段
+      const respData: any = response.data || response
+
+      if (respData && typeof respData === 'object') {
+        respData.uid = respData.uid ?? respData.id ?? (file as any).uid
+        respData.status = 'done'
+        respData.name = getServerDisplayName(respData, (file as File).name)
+
+        if (isPreviewableUrl(respData.address)) {
+          respData.url = respData.address
+        } else {
+          const origin = file as File
+          const isImg = isImageFile({ name: respData.name, type: origin.type, url: respData.address })
+          // 图片才生成 blob url，避免非图片占用内存且无意义
+          respData.url = isImg ? URL.createObjectURL(origin) : respData.url
+        }
+      }
+
+      setUploadFileList((prev) => {
+        const uploadingUid = (file as any).uid
+        const filtered = (prev || []).filter((x: any) => x && x.uid !== uploadingUid)
+        const next = [...filtered, respData as any]
+        onUploaded?.(next as any)
+        return next as any
+      })
+
+      onSuccess?.(respData)
+    } catch (error: any) {
+      message.error('上传失败，请重试')
+      onError?.(error)
+      
+      setUploadFileList((prev) => {
+        const uploadingUid = (file as any).uid
+        return (prev || []).filter((x: any) => x && x.uid !== uploadingUid)
+      })
+    }
+  }
+  /** 上传前校验：文件大小与格式（基于 accept）。 */
+  const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+    if (file.size > maxSizeKB * 1024) {
+      const maxMB = (maxSizeKB / 1024).toFixed(0)
+      message.error(`文件不能超过 ${maxMB}MB`)
+      return false
+    }
+    if (!isAcceptedFile(file as any, accept)) {
+      message.error('文件格式不支持')
+      return false
+    }
+    return true
+  }
+
+  /** 移除文件：从列表中移除并同步到上级。 */
+  const handleRemove: UploadProps['onRemove'] = (file) => {
+    const next = uploadFileList.filter((x: any) => x && x.uid !== file.uid)
+    setUploadFileList(next)
+    onUploaded?.(next)
+    return true
+  }
+
+  /** 预览：图片弹框展示；非图片走下载。 */
+  const handlePreview = async (file: UploadFile) => {
+    const url = file.url ? `${file.url}` : ''
+    const address = (file as any)?.address ? `${(file as any).address}` : ''
+
+    if (!isImageFile(file)) {
+      return
+    }
+
+    if (url) {
+      setPreviewTitle(file.name || '')
+      setPreviewUrl(url)
+      previewModal.open({ opeType: 'detail' })
+      return
+    }
+
+    if (address) {
+      try {
+        const cacheKey = `${isPublic ? 1 : 0}:${address}`
+        const cachedUrl = IMG_OBJECT_URL_CACHE.get(cacheKey)
+        const nextUrl = cachedUrl
+          ? cachedUrl
+          : await (async () => {
+              const pending = IMG_OBJECT_URL_PENDING.get(cacheKey)
+              const urlPromise =
+                pending ??
+                (async () => {
+                  const blob: any = await getImgAPI({ isPublic, url: aesUtil.encrypt(address) })
+                  const u = blob ? URL.createObjectURL(blob) : ''
+                  if (u) IMG_OBJECT_URL_CACHE.set(cacheKey, u)
+                  return u
+                })()
+              if (!pending) IMG_OBJECT_URL_PENDING.set(cacheKey, urlPromise)
+              const u = await urlPromise
+              IMG_OBJECT_URL_PENDING.delete(cacheKey)
+              return u
+            })()
+
+        if (!nextUrl) return
+        setPreviewTitle(file.name || '')
+        setPreviewUrl(nextUrl)
+        previewModal.open({ opeType: 'detail' })
+      } catch {
+        message.error('预览失败')
+      }
+    }
+  }
+
+  /** 下载文件：调用 downloadFileAPI 成功后用 handlerDownload 触发下载。 */
+  const handleDownload = async (file: UploadFile) => {
+    try {
+      const fileId = file.uid
+      const blob: any = await downloadFileAPI(fileId)
+      handlerDownload(blob, undefined, file.name)
+    } catch {
+      message.error('下载失败')
+    }
+  }
+
+  /** 自定义渲染：picture 模式下对非图片展示文件图标与操作；列表模式增强 hover 操作。 */
+  const itemRender: UploadProps['itemRender'] = (originNode, file, _fileList, actions) => {
+    if (!isPictureMode) {
+      // text 列表：文件名后提供查看(图片)/下载 + 删除
+      const isImg = isImageFile(file)
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            {originNode}
+          </div>
+          {isImg ? (
+            <Button
+              type="text"
+              size="small"
+              icon={<EyeOutlined />}
+              onClick={() => void handlePreview(file)}
+            />
+          ) : (
+            <Button
+              type="text"
+              size="small"
+              icon={<DownloadOutlined />}
+              onClick={() => void handleDownload(file)}
+            />
+          )}
+          {!disabled ? (
+            <Button
+              type="text"
+              size="small"
+              icon={<DeleteOutlined />}
+              onClick={() => actions.remove?.()}
+            />
+          ) : null}
+        </div>
+      )
+    }
+
+    // picture 卡片：自渲染（图片/文件都统一尺寸与 hover）
+    const isImg = isImageFile(file)
+    const thumbUrl = isImg ? getThumbUrl(file) : ''
+    const ext = getLowerFileExt(file.name || (file.url ? `${file.url}` : ''))
+    const iconColor = getFileIconColorByExt(ext)
+    return (
+      <div
+        className="cx-upload-file-card"
+        style={{
+          width: thumbSize,
+          height: thumbSize,
+          border: '1px solid rgba(5,5,5,0.06)',
+          borderRadius: 6,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+          background: '#fff',
+        }}
+      >
+        {isImg ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={thumbUrl}
+            alt={file.name}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              borderRadius: 6,
+              display: 'block',
+            }}
+            onClick={() => void handlePreview(file)}
+          />
+        ) : (
+          <div
+            style={{
+              fontSize: Math.max(36, Math.floor(thumbSize * 0.52)),
+              color: iconColor,
+              lineHeight: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {renderFileIconAsset(getFileIconAssetByName(file.name || (file.url ? `${file.url}` : '')))}
+          </div>
+        )}
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            background: 'rgba(0,0,0,0.45)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 10,
+            borderRadius: 6,
+          }}
+          className="cx-upload-file-card-mask"
+        >
+          {isImg ? (
+            <Button type="text" icon={<EyeOutlined />} onClick={() => void handlePreview(file)} />
+          ) : (
+            <Button type="text" icon={<DownloadOutlined />} onClick={() => void handleDownload(file)} />
+          )}
+          {!disabled ? (
+            <Button type="text" icon={<DeleteOutlined />} onClick={() => actions.remove?.()} />
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+
+  const uploadCommonProps: UploadProps = {
+    accept,
+    listType,
+    maxCount,
+    multiple: maxCount > 1,
+    disabled,
+    fileList: uploadFileList,
+    beforeUpload,
+    customRequest: customUpload,
+    onRemove: handleRemove,
+    onPreview: (file) => void handlePreview(file),
+    itemRender,
+    openFileDialogOnClick: true,
+    showUploadList: isPictureMode
+      ? { showPreviewIcon: true, showRemoveIcon: !disabled, showDownloadIcon: false }
+      : { showRemoveIcon: !disabled },
+  }
+
+  const uploaderNode = draggable ? (
+    <Upload.Dragger {...uploadCommonProps} style={canUploadMore ? undefined : { display: 'none' }}>
+      <div style={{ padding: 12 }}>
+        <InboxOutlined style={{ fontSize: 28, color: 'rgba(0,0,0,0.35)' }} />
+        <div style={{ marginTop: 8, color: 'rgba(0,0,0,0.65)' }}>
+          {t('common.upload_drag_title')}，{t('common.upload_drag_or_click')}
+        </div>
+      </div>
+    </Upload.Dragger>
+  ) : (
+    <Upload {...uploadCommonProps}>
+      {canUploadMore ? (
+        <Button icon={<PlusOutlined />} disabled={disabled}>
+          上传文件
+        </Button>
+      ) : null}
+    </Upload>
+  )
+
+  /** 渲染列表：用于 picture+list 的下方文件列表展示（含下载/删除）。 */
+  const renderFileList = () => {
+    if (uploadFileList.length === 0) return null
+    return (
+      <div className="cx-upload-file-list">
+        {uploadFileList.map((f) => (
+          <div key={f.uid} className="cx-upload-file-list-item">
+            <div
+              style={{
+                fontSize: 20,
+                color: getFileIconColorByExt(getLowerFileExt(f.name)),
+                lineHeight: 1,
+                flex: '0 0 auto',
+              }}
+            >
+              {renderFileIconAsset(getFileIconAssetByName(f.name))}
+            </div>
+            <CxTooltip
+              title={f.name}
+              placement="topLeft"
+              mouseEnterDelay={0}
+              open={!!nameTooltipOpenMap[f.uid]}
+              getPopupContainer={(triggerNode) => triggerNode.parentElement ?? document.body}
+            >
+              <div
+                className="cx-upload-file-list-name"
+                ref={(el) => {
+                  nameNodeMapRef.current.set(f.uid, el)
+                }}
+                onMouseEnter={() => {
+                  const el = nameNodeMapRef.current.get(f.uid)
+                  const shouldOpen = !!el && el.scrollWidth > el.clientWidth
+                  setNameTooltipOpenMap((prev) => (prev[f.uid] === shouldOpen ? prev : { ...prev, [f.uid]: shouldOpen }))
+                }}
+                onMouseLeave={() => {
+                  setNameTooltipOpenMap((prev) => (prev[f.uid] ? { ...prev, [f.uid]: false } : prev))
+                }}
+              >
+                {f.name}
+              </div>
+            </CxTooltip>
+            {!disabled ? (
+              <div className="cx-upload-file-list-actions">
+                {isImageFile(f) ? (
+                  <Button
+                    type="text"
+                    size="small"
+                    icon={<EyeOutlined />}
+                    onClick={() => void handlePreview(f)}
+                  />
+                ) : (
+                  <Button
+                    type="text"
+                    size="small"
+                    icon={<DownloadOutlined />}
+                    onClick={() => void handleDownload(f)}
+                  />
+                )}
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<DeleteOutlined />}
+                  onClick={() => void handleRemove(f as any)}
+                />
+              </div>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className="cx-upload-file-root"
+      style={isEmpty ? undefined : { ['--cx-upload-thumb-size' as any]: `${thumbSize}px` }}
+    >
+      {displayMode === 'picture+list' ? (
+        <div className={`cx-upload-file-picture-list-wrap${isEmpty ? ' is-empty' : ''}`}>
+          {/* 空态用 Dragger；关键：uploading 阶段也保持 Dragger，避免组件切换导致上传中断 */}
+          {draggable && (isEmpty || hasUploading) ? (
+            <Upload.Dragger
+              {...uploadCommonProps}
+              style={canUploadMore ? { width: '100%' } : { display: 'none' }}
+            >
+              <div style={{ padding: 12 }}>
+                <InboxOutlined style={{ fontSize: 28, color: 'rgba(0,0,0,0.35)' }} />
+                <div style={{ marginTop: 8, color: 'rgba(0,0,0,0.65)' }}>
+                  {t('common.upload_drag_title')}，{t('common.upload_drag_or_click')}
+                </div>
+              </div>
+            </Upload.Dragger>
+          ) : (
+            <Upload {...uploadCommonProps}>{canUploadMore ? <PlusOutlined /> : null}</Upload>
+          )}
+          {renderFileList()}
+        </div>
+      ) : (
+        uploaderNode
+      )}
+
+      <CxModal
+        isOpen={previewModal.isOpen}
+        title={previewTitle}
+        onClose={previewModal.close}
+        opeType="detail"
+        modalConfig={{ width: 900 }}
+      >
+        <Image alt={previewTitle} src={previewUrl} style={{ width: '100%' }} />
+      </CxModal>
+    </div>
+  )
+}
+
+export default UploadFile
+