yuzhiran-dev
cba785e6bd
- 后端: POST /sessions/:id/share 生成 HMAC 签名分享令牌 - 后端: GET /sandbox/shared/:token 公开查看分享会话 - 前端: sandbox/page.tsx 新增「复制分享链接」按钮 - 前端: /sandbox/share?token=xxx 分享查看页面 - 全栈: 后端 build + 前端 61 页 + 92 tests 全部通过
103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { Suspense, useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api/v1';
|
|
|
|
interface SharedMessage {
|
|
role: string;
|
|
content: string;
|
|
}
|
|
|
|
interface SharedSession {
|
|
id: number;
|
|
model: string;
|
|
title: string;
|
|
createdAt: string;
|
|
messages: SharedMessage[];
|
|
}
|
|
|
|
function SharedSessionInner() {
|
|
const searchParams = useSearchParams();
|
|
const token = searchParams.get('token');
|
|
const [session, setSession] = useState<SharedSession | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (!token) { setError('缺少分享参数'); setLoading(false); return; }
|
|
fetch(`${API_BASE}/sandbox/shared/${encodeURIComponent(token)}`)
|
|
.then(r => { if (!r.ok) throw new Error('分享链接无效'); return r.json(); })
|
|
.then(data => setSession(data))
|
|
.catch(e => setError(e.message))
|
|
.finally(() => setLoading(false));
|
|
}, [token]);
|
|
|
|
if (loading) return (
|
|
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<Skeleton className="h-8 w-48 mb-6" />
|
|
<Skeleton className="h-4 w-72 mb-8" />
|
|
<Skeleton className="h-64 w-full rounded-2xl" />
|
|
</div>
|
|
);
|
|
|
|
if (error || !session) return (
|
|
<div className="max-w-3xl mx-auto px-4 py-20 text-center">
|
|
<div className="text-4xl mb-4">🔗</div>
|
|
<h1 className="text-xl font-bold text-foreground mb-2">分享内容不可用</h1>
|
|
<p className="text-muted-foreground mb-6">{error || '该分享链接可能已过期或不存在'}</p>
|
|
<Link href="/sandbox" className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm hover:bg-brand-700">
|
|
前往 AI 沙盒
|
|
</Link>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="mb-8">
|
|
<Link href="/sandbox" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
|
|
← AI 沙盒
|
|
</Link>
|
|
<h1 className="text-2xl font-bold text-foreground">{session.title}</h1>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
模型: {session.model} · {new Date(session.createdAt).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{session.messages.map((msg, i) => (
|
|
<div key={i} className={`flex items-start gap-3 ${msg.role === 'user' ? 'justify-end' : ''}`}>
|
|
{msg.role === 'assistant' && (
|
|
<div className="w-8 h-8 bg-brand-600 rounded-xl flex items-center justify-center text-white text-sm font-bold shrink-0">Y</div>
|
|
)}
|
|
<div className={`max-w-[80%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap ${
|
|
msg.role === 'user' ? 'bg-brand-600 text-white' : 'bg-muted text-foreground'
|
|
}`}>
|
|
{msg.content}
|
|
</div>
|
|
{msg.role === 'user' && (
|
|
<div className="w-8 h-8 bg-muted-foreground/20 rounded-xl flex items-center justify-center text-xs font-bold shrink-0">我</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SharedSessionPage() {
|
|
return (
|
|
<Suspense fallback={
|
|
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<Skeleton className="h-8 w-48 mb-6" />
|
|
<Skeleton className="h-64 w-full rounded-2xl" />
|
|
</div>
|
|
}>
|
|
<SharedSessionInner />
|
|
</Suspense>
|
|
);
|
|
}
|