cx-chat 0.0.2 → 0.0.3

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

@@ -1,640 +0,0 @@
-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
-