cx-chat 0.0.1

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

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

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