Round6: 前台图片缩略图+下载/视频修复; 后台连接测试单次+自动消失; 导航重组; 存储中文化; 自动化去掉创建按钮; 短信验证码(注册/重置/充值通知)

frontend/src/pages/front/ChatPage.tsx

@@ -5,8 +5,146 @@ import type { Conversation, Message } from '@/types';
 import './ChatPage.css';
 
 // ===== Enhanced Markdown Renderer =====
+// 媒体(图片/视频)以受限缩略图呈现，并提供下载(格式+尺寸)选项
+interface MediaInfo { type: 'img' | 'video'; src: string; alt?: string; }
+
+// 全屏灯箱预览
+const ChatLightbox: React.FC<{ src: string; type: 'img' | 'video'; onClose: () => void }> = ({ src, type, onClose }) => {
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', h);
+    return () => document.removeEventListener('keydown', h);
+  }, [onClose]);
+  return (
+    <div className="chat-lightbox" onClick={onClose}>
+      <button className="chat-lightbox-close" onClick={onClose} aria-label="关闭">×</button>
+      <div className="chat-lightbox-content" onClick={(e) => e.stopPropagation()}>
+        {type === 'video'
+          ? <video src={src} controls autoPlay style={{ maxWidth: '92vw', maxHeight: '86vh', borderRadius: 8 }} />
+          : <img src={src} alt="" style={{ maxWidth: '92vw', maxHeight: '86vh', borderRadius: 8 }} />}
+      </div>
+    </div>
+  );
+};
+
+// 根据原始尺寸推算 3 个建议下载尺寸（保持宽高比）
+function computeSizes(natural: { w: number; h: number }) {
+  if (natural.w && natural.h) {
+    const ratio = natural.w / natural.h;
+    const fit = (maxDim: number) => ratio >= 1
+      ? { w: maxDim, h: Math.round(maxDim / ratio) }
+      : { w: Math.round(maxDim * ratio), h: maxDim };
+    return [
+      { label: '小图', ...fit(512) },
+      { label: '中图', ...fit(1024) },
+      { label: '原始', w: natural.w, h: natural.h },
+    ];
+  }
+  // 未知原始尺寸时按生成默认 4:3 给出三档
+  return [
+    { label: '小图', w: 512, h: 384 },
+    { label: '中图', w: 1024, h: 768 },
+    { label: '大图', w: 2048, h: 1536 },
+  ];
+}
+
+// 客户端画布转换格式+尺寸后下载；跨域受限时回退到新标签页打开原图
+function downloadImage(src: string, format: 'png' | 'jpg' | 'webp', w: number, h: number) {
+  const fallback = () => window.open(src, '_blank');
+  const img = new Image();
+  img.crossOrigin = 'anonymous';
+  img.onload = () => {
+    try {
+      const canvas = document.createElement('canvas');
+      canvas.width = w; canvas.height = h;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) { fallback(); return; }
+      if (format === 'jpg') { ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, w, h); }
+      ctx.drawImage(img, 0, 0, w, h);
+      const mime = format === 'jpg' ? 'image/jpeg' : format === 'webp' ? 'image/webp' : 'image/png';
+      canvas.toBlob((blob) => {
+        if (!blob) { fallback(); return; }
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url; a.download = `aiflow-image-${w}x${h}.${format}`;
+        document.body.appendChild(a); a.click(); a.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+      }, mime, 0.92);
+    } catch (e) {
+      fallback();
+    }
+  };
+  img.onerror = fallback;
+  img.src = src;
+}
+
+// 媒体渲染组件：固定尺寸缩略图 + 点击放大 + 下载(格式/尺寸)
+const ChatMedia: React.FC<{ info: MediaInfo }> = ({ info }) => {
+  const [open, setOpen] = useState(false);
+  const [dlOpen, setDlOpen] = useState(false);
+  const [fmt, setFmt] = useState<'png' | 'jpg' | 'webp'>('png');
+  const [natural, setNatural] = useState<{ w: number; h: number }>({ w: 0, h: 0 });
+
+  if (info.type === 'video') {
+    return (
+      <div className="chat-media-wrap">
+        <video className="chat-media-video" src={info.src} controls preload="metadata" onClick={() => setOpen(true)} />
+        <div className="chat-media-bar">
+          <a className="chat-media-link" href={info.src} target="_blank" rel="noopener" onClick={(e) => e.stopPropagation()}>打开 / 下载原视频</a>
+        </div>
+        {open && <ChatLightbox src={info.src} type="video" onClose={() => setOpen(false)} />}
+      </div>
+    );
+  }
+
+  const sizes = computeSizes(natural);
+  return (
+    <div className="chat-media-wrap">
+      <img
+        className="chat-media-img"
+        src={info.src}
+        alt={info.alt || '生成图片'}
+        loading="lazy"
+        onClick={() => setOpen(true)}
+        onLoad={(e) => {
+          const im = e.currentTarget;
+          if (im.naturalWidth && im.naturalHeight) setNatural({ w: im.naturalWidth, h: im.naturalHeight });
+        }}
+      />
+      <button className="chat-media-dl-btn" title="下载图片" onClick={(e) => { e.stopPropagation(); setDlOpen((o) => !o); }}>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
+        </svg>
+      </button>
+      {dlOpen && (
+        <div className="chat-media-dl-pop" onClick={(e) => e.stopPropagation()}>
+          <div className="chat-media-dl-title">下载图片</div>
+          <div className="chat-media-dl-row">
+            <span className="chat-media-dl-label">格式</span>
+            <div className="chat-media-dl-fmts">
+              {(['png', 'jpg', 'webp'] as const).map((f) => (
+                <button key={f} className={`chat-media-dl-fmt ${fmt === f ? 'active' : ''}`} onClick={() => setFmt(f)}>{f.toUpperCase()}</button>
+              ))}
+            </div>
+          </div>
+          <div className="chat-media-dl-label">尺寸</div>
+          <div className="chat-media-dl-sizes">
+            {sizes.map((s, i) => (
+              <button key={i} className="chat-media-dl-size" onClick={() => { downloadImage(info.src, fmt, s.w, s.h); setDlOpen(false); }}>
+                <span className="chat-media-dl-size-label">{s.label}</span>
+                <span className="chat-media-dl-size-px">{s.w}×{s.h}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+      {open && <ChatLightbox src={info.src} type="img" onClose={() => setOpen(false)} />}
+    </div>
+  );
+};
+
 const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
-  const html = useMemo(() => {
+  const nodes = useMemo(() => {
     let text = content;
 
     // 1. Extract code blocks first (protect from other replacements)
@@ -25,12 +163,14 @@ const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
       return '\x00INLINE' + idx + '\x00';
     });
 
-    // 2.5 Extract media blocks (<img>/<video>) to protect from other replacements
-    const mediaBlocks: string[] = [];
-    text = text.replace(/<(img|video)[^>]*\/?>/gi, (_m: string) => {
-      const idx = mediaBlocks.length;
-      mediaBlocks.push(_m);
-      return '\x00MEDIA' + idx + '\x00';
+    // 2.5 Extract media blocks (<img>/<video>) → 结构化，后续渲染为 React 组件
+    const mediaBlocks: MediaInfo[] = [];
+    text = text.replace(/<(img|video)([^>]*?)\/?>/gi, (_m: string, tag: string, attrs: string) => {
+      const type = tag.toLowerCase() === 'img' ? 'img' : 'video';
+      const srcM = attrs.match(/src=["']([^"']+)["']/i);
+      const altM = attrs.match(/alt=["']([^"']*)["']/i);
+      mediaBlocks.push({ type, src: srcM ? srcM[1] : '', alt: altM ? altM[1] : '' });
+      return '\x00MEDIA' + (mediaBlocks.length - 1) + '\x00';
     });
 
     // 3. Headers
@@ -66,7 +206,6 @@ const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
     // 10. Restore code blocks and inline codes
     text = text.replace(/\x00CODEBLOCK(\d+)\x00/g, (_m: string, idx: string) => codeBlocks[parseInt(idx)] || '');
     text = text.replace(/\x00INLINE(\d+)\x00/g, (_m: string, idx: string) => inlineCodes[parseInt(idx)] || '');
-    text = text.replace(/\x00MEDIA(\d+)\x00/g, (_m: string, idx: string) => mediaBlocks[parseInt(idx)] || '');
 
     // 11. Wrap in paragraph and clean up
     text = '<p class="md-p">' + text + '</p>';
@@ -77,10 +216,24 @@ const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
     text = text.replace(/<p class="md-p">(<hr[\s\S]*?)<\/p>/g, '$1');
     text = text.replace(/<p class="md-p">(<blockquote[\s\S]*?<\/blockquote>)<\/p>/g, '$1');
 
-    return text;
+    // 12. 拆分为文本片段与媒体组件
+    const parts = text.split(/(\x00MEDIA\d+\x00)/g);
+    return parts.map((part: string, i: number) => {
+      const m = part.match(/^\x00MEDIA(\d+)\x00$/);
+      if (m) {
+        const info = mediaBlocks[parseInt(m[1])];
+        if (info && info.src) return <ChatMedia key={'m' + i} info={info} />;
+        return null;
+      }
+      if (!part) return null;
+      // 仅清除被媒体切分产生的悬空 <p> 标签，保留段落内部的成对 <p>
+      let s = part.replace(/^<\/p>/, '').replace(/<p class="md-p">$/, '');
+      if (!s.trim()) return null;
+      return <div key={'t' + i} className="md-text-seg" dangerouslySetInnerHTML={{ __html: s }} />;
+    });
   }, [content]);
 
-  return <div className="markdown-body" dangerouslySetInnerHTML={{ __html: html }} />;
+  return <div className="markdown-body">{nodes}</div>;
 };