cx-chat 0.0.2 → 0.0.3

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

@@ -1,291 +0,0 @@
-import { getImgAPI, uploadFileAPI } from '@/api/upload'
-import { DeleteOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons'
-import { CxModal, useCxModal } from '@cx-ui'
-import aesUtil from '@utils/aesUtil'
-import type { UploadFile, UploadProps } from 'antd'
-import { Button, Upload, message } from 'antd'
-import type { RcFile } from 'antd/es/upload'
-import React, { useEffect, useState } from 'react'
-
-// 回显图片缓存：避免同一 address 重复请求 getImg（开发环境 StrictMode 下尤为明显）
-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 = String(url)
-  return /^https?:\/\//i.test(str) || /^data:/i.test(str) || /^blob:/i.test(str)
-}
-export type UploadImgProps = {
-  /** 回显用的地址集合（编辑态传入），例如 ['addr1','addr2'] */
-  value?: string[]
-  /** 上传成功后的回调：直接回传上传后的 fileList（antd UploadFile[]）。 */
-  onUploaded?: (fileList: UploadFile[]) => void
-  /** 是否公开图片：影响上传参数与回显取图接口，默认 false */
-  isPublic?: boolean
-  /** 最大图片大小（KB），默认 5120KB（5MB） */
-  maxSizeKB?: number
-  /** 接受的文件类型，默认 image/* */
-  accept?: string
-  /** 是否禁用 */
-  disabled?: boolean
-  /** 上传列表样式，默认 picture-card */
-  listType?: UploadProps['listType']
-  /** 允许上传的最大个数，默认 1 */
-  maxCount?: number
-  /** 缩略图尺寸（px），默认 104 */
-  thumbSize?: number
-}
-
-/** 图片上传组件：上传到固定地址 uploadImageUrl，内部处理大小校验/失败提示；成功后回调文件 address 给上级。 */
-const UploadImg: React.FC<UploadImgProps> = ({
-  value,
-  onUploaded,
-  isPublic = false,
-  maxSizeKB = 5 * 1024,
-  accept = 'image/*',
-  disabled = false,
-  listType = 'picture-card',
-  maxCount = 1,
-  thumbSize = 104,
-}) => {
-  const [uploadFileList, setUploadFileList] = useState<UploadFile[]>([])
-  const [previewTitle, setPreviewTitle] = useState('')
-  const [previewUrl, setPreviewUrl] = useState('')
-  const previewModal = useCxModal()
-
-  useEffect(() => {
-    let cancelled = false
-
-    const run = async () => {
-      const list = Array.isArray(value) ? value : []
-      if (list.length === 0) {
-        setUploadFileList([])
-        return
-      }
-
-      const next = await Promise.all(
-        list.map(async (address) => {
-          try {
-            const cacheKey = `${isPublic ? 1 : 0}:${String(address)}`
-            const cachedUrl = IMG_OBJECT_URL_CACHE.get(cacheKey)
-            if (cachedUrl) {
-              return {
-                uid: address,
-                name: 'image.png',
-                status: 'done',
-                url: cachedUrl,
-              } as UploadFile
-            }
-
-            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 {
-              uid: address,
-              name: 'image.png',
-              status: 'done',
-              url,
-            } as UploadFile
-          } catch {
-            return {
-              uid: address,
-              name: 'image.png',
-              status: 'done',
-              url: '',
-            } as UploadFile
-          }
-        })
-      )
-
-      if (cancelled) return
-      setUploadFileList(next)
-    }
-
-    void run()
-    return () => {
-      cancelled = true
-    }
-  }, [value, isPublic])
-
-  /** 自定义上传：调用 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
-        // address 可能只是 key，不一定是可直接访问的预览 URL
-        if (isPreviewableUrl(respData.address)) {
-          respData.url = respData.address
-        } else {
-          const origin = file as File
-          respData.url = origin ? URL.createObjectURL(origin) : ''
-        }
-        respData.status = 'done'
-        respData.name = respData.name || 'image.png'
-      }
-
-      setUploadFileList((prev) => {
-        // 移除 uploading 阶段的那一项，避免残留 loading 卡片
-        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)
-      })
-    }
-  }
-
-  /** 上传前校验图片大小：最大不超过 5MB（默认 5120KB）。 */
-  const beforeUpload: UploadProps['beforeUpload'] = (file) => {
-    const sizeLimit = Math.max(1, Number(maxSizeKB || 0)) * 1024
-    if (file.size > sizeLimit) {
-      const maxMB = (Number(maxSizeKB || 0) / 1024).toFixed(0)
-      message.error(`图片不能超过 ${maxMB}MB`)
-      return false
-    }
-    return true
-  }
-
-  /** 移除文件：从列表中移除并同步到上级。 */
-  const handleRemove: UploadProps['onRemove'] = (file) => {
-    const removeUid = file.uid
-    const next = uploadFileList.filter((x: any) => x && x.uid !== removeUid)
-    setUploadFileList(next)
-    onUploaded?.(next)
-    return true
-  }
-
-  /** 预览图片：组件内用 CxModal 放大查看。 */
-  const handlePreview: UploadProps['onPreview'] = (file) => {
-    const url = (file as any)?.url
-    if (!url) return
-    setPreviewTitle(file.name || '')
-    setPreviewUrl(`${url}`)
-    previewModal.open({ opeType: 'detail' })
-  }
-
-  return (
-    <>
-      {/* 自定义渲染图片列表 */}
-      {uploadFileList.length > 0 && (
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-          {uploadFileList.map((file) => {
-            const thumbUrl = file.url || ''
-            return (
-              <div
-                key={file.uid}
-                style={{
-                  width: thumbSize,
-                  height: thumbSize,
-                  border: '1px solid rgba(5,5,5,0.06)',
-                  borderRadius: 6,
-                  position: 'relative',
-                  overflow: 'hidden',
-                }}
-              >
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src={thumbUrl}
-                  alt={file.name}
-                  style={{
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    display: 'block',
-                  }}
-                  onClick={() => handlePreview(file)}
-                />
-                {!disabled && (
-                  <div
-                    style={{
-                      position: 'absolute',
-                      inset: 0,
-                      background: 'rgba(0,0,0,0.45)',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      gap: 10,
-                      opacity: 0,
-                      transition: 'opacity 0.2s',
-                    }}
-                    className="cx-upload-img-mask"
-                    onMouseEnter={(e) => {
-                      e.currentTarget.style.opacity = '1'
-                    }}
-                    onMouseLeave={(e) => {
-                      e.currentTarget.style.opacity = '0'
-                    }}
-                  >
-                    <Button type="text" icon={<EyeOutlined />} onClick={() => handlePreview(file)} />
-                    <Button type="text" icon={<DeleteOutlined />} onClick={() => handleRemove(file)} />
-                  </div>
-                )}
-              </div>
-            )
-          })}
-        </div>
-      )}
-
-      {/* Upload 组件仅负责上传，不显示文件列表 */}
-      {uploadFileList.length < maxCount && (
-        <Upload
-          accept={accept}
-          listType="picture-card"
-          maxCount={maxCount}
-          multiple={Number(maxCount || 1) > 1}
-          disabled={disabled}
-          fileList={[]}
-          beforeUpload={beforeUpload}
-          customRequest={customUpload}
-          showUploadList={false}
-        >
-          <PlusOutlined />
-        </Upload>
-      )}
-
-      <CxModal
-        isOpen={previewModal.isOpen}
-        title={previewTitle}
-        onClose={previewModal.close}
-        opeType="detail"
-        modalConfig={{ width: 900 }}
-      >
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img alt={previewTitle} src={previewUrl} style={{ width: '100%', display: 'block' }} />
-      </CxModal>
-    </>
-  )
-}
-
-export default UploadImg
-

package/src/components/layout/components/Header.tsx

@@ -1,216 +0,0 @@
-import clsx from 'clsx';
-import { LibraryBig, LogOut, Moon, Settings, Sun } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-
-import LanguageSwitcher from '@/components/common/language-switcher';
-import { CurrentUserAvatar } from '@/components/auth/current-user-avatar';
-import { getStore, setStore } from '@/utils/storage';
-import { useSystemConfig } from '@/config/system'
-import { useUserPreferences } from '../../../hooks/useUserPreferences';
-
-type HeaderProps = {
-  user: any;
-  hasPermission: (permission: string) => boolean;
-  headerTitle: React.ReactNode | null;
-  isUserMenuOpen: boolean;
-  setIsUserMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  onLogout: () => void;
-};
-
-/** 右上角主文案：优先真实姓名/昵称，再退到账号（手机、邮箱），与权限字段无关 */
-function headerPrimaryLabel(u: any): string {
-  if (!u) return 'User';
-  const prefer =
-    u.name ||
-    u.nickname ||
-    u.nickName ||
-    u.realName ||
-    u.real_name ||
-    u.display_name ||
-    u.userName ||
-    u.username;
-  const s = typeof prefer === 'string' ? prefer.trim() : '';
-  if (s) return s;
-  const acct = u.phone || u.phone_number || u.email;
-  return acct ? String(acct).trim() : 'User';
-}
-
-function headerSubLabel(u: any): string {
-  if (!u) return '';
-  const mail = typeof u.email === 'string' ? u.email.trim() : '';
-  const tel = u.phone || u.phone_number;
-  const ts = tel != null ? String(tel).trim() : '';
-  if (mail && ts && mail !== ts) return `${mail} · ${ts}`;
-  return mail || ts || '';
-}
-
-// 语言切换已改为下拉组件（LanguageSwitcher）
-
-const Header: React.FC<HeaderProps> = ({
-  user,
-  hasPermission,
-  headerTitle,
-  isUserMenuOpen,
-  setIsUserMenuOpen,
-  onLogout,
-}) => {
-  const { t, i18n } = useTranslation();
-  const { saveTheme, saveLanguage } = useUserPreferences();
-  const { systemLogo: appLogoUrl, systemName: appName } = useSystemConfig()
-  const [theme, setTheme] = useState<'light' | 'dark'>(() => {
-    // const stored = localStorage.getItem('theme');
-    const stored = getStore('theme');
-    if (stored === 'dark' || stored === 'light') return stored;
-    return window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light';
-  });
-  const userName = headerPrimaryLabel(user);
-  const userSub = headerSubLabel(user);
-
-  useEffect(() => {
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-    setStore('theme', theme);
-    // localStorage.setItem('theme', theme);
-  }, [theme, saveTheme]);
-
-  const toggleTheme = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    const next = theme === 'light' ? 'dark' : 'light';
-    setTheme(next);
-    void saveTheme(next);
-  };
-
-  // 语言切换改为下拉组件（未来可扩展多语言）
-
-  return (
-    <header className="flex items-center justify-between px-6 py-3 bg-white dark:bg-[#131314] relative border-b border-transparent dark:border-gray-800/50 transition-colors">
-      <div className="flex items-center gap-3 relative z-10 min-w-[200px]">
-        {appLogoUrl ? (
-          <img
-            src={appLogoUrl}
-            alt={appName}
-            className="w-8 h-8 rounded-lg object-cover"
-          />
-        ) : (
-          <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold shrink-0">
-            {appName.substring(0, 2).toUpperCase()}
-          </div>
-        )}
-        <span className="font-bold text-xl text-gray-900 dark:text-white whitespace-nowrap hidden md:block">
-          {appName}
-        </span>
-      </div>
-
-      {headerTitle ? (
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
-          {typeof headerTitle === 'string' ? (
-            <div className="font-semibold text-gray-900 dark:text-white animate-in fade-in slide-in-from-top-2 duration-200 pointer-events-none">
-              {headerTitle}
-            </div>
-          ) : (
-            headerTitle
-          )}
-        </div>
-      ) : null}
-
-      <div className="relative z-10 flex justify-end min-w-[260px]">
-        <div
-          className="flex items-center gap-1 mr-2"
-          onClick={(e) => e.stopPropagation()}>
-          <button
-            type="button"
-            onClick={toggleTheme}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-500 dark:text-gray-400"
-            title={t('base.settings.theme')}>
-            {theme === 'light' ? (
-              <Sun size={18} className="text-yellow-500" />
-            ) : (
-              <Moon size={18} className="text-blue-400" />
-            )}
-            <span className="sr-only">{t('base.settings.theme')}</span>
-          </button>
-          <LanguageSwitcher direction="down" showCode />
-        </div>
-        <div
-          className={clsx(
-            'flex items-center gap-3 cursor-pointer py-1.5 pl-4 pr-3.5 rounded-full border transition-all duration-200',
-            isUserMenuOpen
-              ? 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-sm'
-              : 'border-transparent hover:bg-gray-100 dark:hover:bg-gray-800',
-          )}
-          onClick={(e) => {
-            e.stopPropagation();
-            setIsUserMenuOpen(!isUserMenuOpen);
-          }}
-          title={t('common.settings')}>
-          <div className="hidden md:block text-right">
-            <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
-              {userName}
-            </span>
-          </div>
-          <CurrentUserAvatar
-            alt={userName}
-            className="h-8 w-8 shrink-0"
-            fallbackTone="brand"
-          />
-        </div>
-
-        {isUserMenuOpen && (
-          <div
-            className="absolute right-0 top-full mt-2 w-56 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-100 dark:border-gray-700 py-2 overflow-hidden animate-fade-in-up"
-            onClick={(e) => e.stopPropagation()}>
-            <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700 mb-1">
-              <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
-                {userName}
-              </p>
-              {userSub ? (
-                <p
-                  className="text-xs text-gray-500 dark:text-gray-400 truncate"
-                  title={userSub}>
-                  {userSub}
-                </p>
-              ) : null}
-            </div>
-
-            <Link
-              to="/settings"
-              onClick={() => setIsUserMenuOpen(false)}
-              className="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
-              <Settings size={16} />
-              <span>{t('common.settings')}</span>
-            </Link>
-
-            {hasPermission('system:long-memory:page') && (
-              <Link
-                to="/memories"
-                onClick={() => setIsUserMenuOpen(false)}
-                className="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
-                <LibraryBig size={16} />
-                <span>{t('common.memory')}</span>
-              </Link>
-            )}
-
-            <div className="h-px bg-gray-100 dark:bg-gray-700 my-1" />
-
-            <button
-              onClick={onLogout}
-              className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/10 transition-colors">
-              <LogOut size={16} />
-              <span>{t('auth.logout')}</span>
-            </button>
-          </div>
-        )}
-      </div>
-    </header>
-  );
-};
-
-export default Header;