Round6: 前台图片缩略图+下载/视频修复; 后台连接测试单次+自动消失; 导航重组; 存储中文化; 自动化去掉创建按钮; 短信验证码(注册/重置/充值通知)
This commit is contained in:
QihuAI Design committed
1 parent
ba09017884
commit
d179cc2f02
14 files changed
+806
-149
No files matched your search
@@ -1045,3 +1045,215 @@
|
||||
border-color: transparent;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* ===== AI 生成媒体：固定缩略图 + 下载 ===== */
|
||||
.md-text-seg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-media-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.chat-media-img {
|
||||
display: block;
|
||||
max-width: 320px;
|
||||
max-height: 320px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-tertiary);
|
||||
cursor: zoom-in;
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
.chat-media-video {
|
||||
display: block;
|
||||
max-width: 360px;
|
||||
max-height: 320px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: var(--radius-md);
|
||||
background: #000;
|
||||
cursor: zoom-in;
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
.chat-media-bar {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.chat-media-link {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.chat-media-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 下载按钮 */
|
||||
.chat-media-dl-btn {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast), background var(--transition-fast);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.chat-media-wrap:hover .chat-media-dl-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.chat-media-dl-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
/* 下载弹层 */
|
||||
.chat-media-dl-pop {
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
right: 8px;
|
||||
z-index: 20;
|
||||
width: 220px;
|
||||
padding: var(--space-md);
|
||||
background: var(--color-card-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
animation: fadeIn var(--transition-fast);
|
||||
}
|
||||
|
||||
.chat-media-dl-title {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.chat-media-dl-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.chat-media-dl-label {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.chat-media-dl-fmts {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.chat-media-dl-fmt {
|
||||
flex: 1;
|
||||
padding: 4px 0;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-bg-tertiary);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.chat-media-dl-fmt.active {
|
||||
color: var(--color-text-inverse);
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.chat-media-dl-sizes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.chat-media-dl-size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px;
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.chat-media-dl-size:hover {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-accent-subtle);
|
||||
}
|
||||
|
||||
.chat-media-dl-size-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.chat-media-dl-size-px {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* 灯箱预览 */
|
||||
.chat-lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.78);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-overlay);
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.chat-lightbox-close {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 22px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-full);
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.chat-lightbox-close:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.chat-lightbox-content {
|
||||
max-width: 92vw;
|
||||
max-height: 86vh;
|
||||
}
|
||||
@@ -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>;
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -44,10 +44,16 @@ const LoginPage: React.FC = () => {
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleSendSms = () => {
|
||||
const handleSendSms = async () => {
|
||||
if (!regPhone.trim() || smsCountdown > 0) return;
|
||||
setSmsSent(true);
|
||||
startCountdown(setSmsCountdown);
|
||||
try {
|
||||
await authAPI.sendCode(regPhone, 'register');
|
||||
setSmsSent(true);
|
||||
startCountdown(setSmsCountdown);
|
||||
setErrorMsg('');
|
||||
} catch (e: any) {
|
||||
setErrorMsg(e.detail || e.message || '验证码发送失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSendEmailCode = () => {
|
||||
@@ -115,8 +121,12 @@ const LoginPage: React.FC = () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data: any = { username: regUsername, password: regPassword };
|
||||
if (registerMethod === 'phone') data.phone = regPhone;
|
||||
else data.email = regEmail;
|
||||
if (registerMethod === 'phone') {
|
||||
data.phone = regPhone;
|
||||
data.sms_code = smsCode;
|
||||
} else {
|
||||
data.email = regEmail;
|
||||
}
|
||||
const res = await authAPI.register(data);
|
||||
const { access_token, user: userData } = res.data;
|
||||
localStorage.setItem('aiflow_token', access_token);
|
||||
|
||||
Reference in new issue
Block a user