feat: AI沙箱流式对话+引导学习+静态服务优化
- 后端: AI沙箱流式对话(SSE), reasoning_content 回退支持 - 前端: 沙箱页流式渲染, 引导学习面板, 默认场景/Starter兜底 - 优化: 前端改用静态文件服务器(node server.js)替代next dev, CSS永不丢失 - 修复: 通用模型默认改为可用模型, predev不再删.next缓存
This commit is contained in:
yuzhiran-dev
@@ -4,9 +4,10 @@
|
||||
"description": "宇之然 AI - 官网前端",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"predev": "rm -rf .next",
|
||||
"predev": "rm -rf out",
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"test": "vitest run",
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
const http = require('http');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const PORT = process.env.PORT || 3000;
|
||||
const ROOT = path.join(__dirname, 'out');
|
||||
|
||||
const MIME = {
|
||||
'.html': 'text/html; charset=utf-8',
|
||||
'.css': 'text/css; charset=utf-8',
|
||||
'.js': 'application/javascript; charset=utf-8',
|
||||
'.json': 'application/json; charset=utf-8',
|
||||
'.png': 'image/png',
|
||||
'.jpg': 'image/jpeg',
|
||||
'.jpeg': 'image/jpeg',
|
||||
'.gif': 'image/gif',
|
||||
'.svg': 'image/svg+xml',
|
||||
'.ico': 'image/x-icon',
|
||||
'.webp': 'image/webp',
|
||||
'.woff': 'font/woff',
|
||||
'.woff2': 'font/woff2',
|
||||
'.ttf': 'font/ttf',
|
||||
'.txt': 'text/plain; charset=utf-8',
|
||||
'.xml': 'application/xml; charset=utf-8',
|
||||
'.webmanifest': 'application/manifest+json',
|
||||
'.map': 'application/octet-stream',
|
||||
};
|
||||
|
||||
function resolvePath(url) {
|
||||
const decoded = decodeURIComponent(url).split('?')[0];
|
||||
if (decoded === '/') return path.join(ROOT, 'index.html');
|
||||
|
||||
const ext = path.extname(decoded);
|
||||
if (ext) return path.join(ROOT, decoded);
|
||||
|
||||
const asHtml = path.join(ROOT, decoded + '.html');
|
||||
if (fs.existsSync(asHtml)) return asHtml;
|
||||
|
||||
const asIndex = path.join(ROOT, decoded, 'index.html');
|
||||
if (fs.existsSync(asIndex)) return asIndex;
|
||||
|
||||
return path.join(ROOT, decoded + '.html');
|
||||
}
|
||||
|
||||
function sendFile(res, filePath, statusCode) {
|
||||
const ext = path.extname(filePath);
|
||||
const ct = MIME[ext] || 'application/octet-stream';
|
||||
const isHtml = ext === '.html';
|
||||
|
||||
fs.readFile(filePath, (err, data) => {
|
||||
if (err) {
|
||||
res.writeHead(500);
|
||||
res.end('Internal Server Error');
|
||||
return;
|
||||
}
|
||||
res.writeHead(statusCode, {
|
||||
'Content-Type': ct,
|
||||
'Cache-Control': isHtml ? 'no-cache' : 'public, max-age=31536000, immutable',
|
||||
});
|
||||
res.end(data);
|
||||
});
|
||||
}
|
||||
|
||||
function serve(req, res) {
|
||||
const filePath = path.normalize(resolvePath(req.url));
|
||||
|
||||
if (!filePath.startsWith(ROOT)) {
|
||||
res.writeHead(403);
|
||||
res.end('Forbidden');
|
||||
return;
|
||||
}
|
||||
|
||||
fs.access(filePath, fs.constants.F_OK, (err) => {
|
||||
if (err) {
|
||||
const four04 = path.join(ROOT, '404.html');
|
||||
fs.access(four04, fs.constants.F_OK, (err2) => {
|
||||
if (err2) {
|
||||
sendFile(res, path.join(ROOT, 'index.html'), 200);
|
||||
} else {
|
||||
sendFile(res, four04, 404);
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
sendFile(res, filePath, 200);
|
||||
});
|
||||
}
|
||||
|
||||
const server = http.createServer(serve);
|
||||
server.listen(PORT, () => {
|
||||
console.log(`Static server running at http://localhost:${PORT} (serving ${ROOT})`);
|
||||
});
|
||||
@@ -1,120 +1,95 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { API_BASE } from '@/lib/config';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import * as Dialog from '@/components/ui/dialog';
|
||||
|
||||
interface Config { key: string; value: string; description: string; category: string }
|
||||
interface Config {
|
||||
key: string;
|
||||
value: string;
|
||||
description: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
const CATEGORIES = ['site', 'ai', 'member'];
|
||||
|
||||
const CATEGORY_NAMES: Record<string, string> = { site: '站点设置', ai: 'AI 配置', member: '会员设置' };
|
||||
|
||||
const CATEGORY_LABELS: Record<string, { key: string; label: string; type: string; placeholder: string }[]> = {
|
||||
site: [
|
||||
{ key: 'site_name', label: '网站名称', type: 'text', placeholder: '宇之然 AI' },
|
||||
{ key: 'site_logo', label: 'Logo URL', type: 'text', placeholder: 'https://...' },
|
||||
{ key: 'icp_number', label: '备案号', type: 'text', placeholder: '京ICP备...' },
|
||||
{ key: 'contact_email', label: '联系邮箱', type: 'email', placeholder: 'admin@example.com' },
|
||||
{ key: 'contact_phone', label: '联系电话', type: 'text', placeholder: '010-...' },
|
||||
{ key: 'company_name', label: '公司名称', type: 'text', placeholder: '北京宇之然科技中心' },
|
||||
],
|
||||
ai: [
|
||||
{ key: 'default_model', label: '默认模型', type: 'text', placeholder: 'general' },
|
||||
{ key: 'available_models', label: '可用模型(逗号分隔)', type: 'text', placeholder: 'general,deepseek-v4-flash' },
|
||||
{ key: 'daily_quota_free', label: '免费用户日配额', type: 'number', placeholder: '10' },
|
||||
{ key: 'daily_quota_monthly', label: '月卡用户日配额', type: 'number', placeholder: '100' },
|
||||
{ key: 'daily_quota_yearly', label: '年卡用户日配额', type: 'number', placeholder: '200' },
|
||||
{ key: 'openai_api_key', label: 'OpenAI API Key', type: 'password', placeholder: 'sk-...' },
|
||||
{ key: 'openai_api_url', label: 'OpenAI API URL', type: 'text', placeholder: 'https://api.openai.com/v1' },
|
||||
{ key: 'sensenova_api_key', label: '商汤 API Key', type: 'password', placeholder: 'sk-...' },
|
||||
{ key: 'sensenova_api_url', label: '商汤 API URL', type: 'text', placeholder: 'https://token.sensenova.cn/v1' },
|
||||
{ key: 'max_tokens', label: '最大 Token 数', type: 'number', placeholder: '2000' },
|
||||
{ key: 'temperature', label: '默认 Temperature', type: 'text', placeholder: '0.7' },
|
||||
],
|
||||
member: [
|
||||
{ key: 'price_monthly', label: '月卡价格(元)', type: 'number', placeholder: '29.9' },
|
||||
{ key: 'price_yearly', label: '年卡价格(元)', type: 'number', placeholder: '199' },
|
||||
{ key: 'quota_monthly', label: '月卡日配额', type: 'number', placeholder: '100' },
|
||||
{ key: 'quota_yearly', label: '年卡日配额', type: 'number', placeholder: '200' },
|
||||
],
|
||||
};
|
||||
function getAuthHeaders() {
|
||||
const token = localStorage.getItem('adminToken');
|
||||
return { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' };
|
||||
}
|
||||
|
||||
export default function ConfigPage() {
|
||||
const [configs, setConfigs] = useState<Config[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [category, setCategory] = useState('site');
|
||||
const [form, setForm] = useState<Record<string, string>>({});
|
||||
const [saveMsg, setSaveMsg] = useState('');
|
||||
const [showNewKey, setShowNewKey] = useState(false);
|
||||
const [newKey, setNewKey] = useState('');
|
||||
const [newValue, setNewValue] = useState('');
|
||||
const [newDesc, setNewDesc] = useState('');
|
||||
const [category, setCategory] = useState('ai');
|
||||
|
||||
useEffect(() => { loadConfigs(); }, [category]);
|
||||
// Dialog state
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editingKey, setEditingKey] = useState<string | null>(null);
|
||||
const [formKey, setFormKey] = useState('');
|
||||
const [formValue, setFormValue] = useState('');
|
||||
const [formDesc, setFormDesc] = useState('');
|
||||
|
||||
async function loadConfigs() {
|
||||
const loadConfigs = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('adminToken');
|
||||
const res = await fetch(`${API_BASE}/admin/config/${category}`, { headers: { Authorization: `Bearer ${token}` } });
|
||||
const res = await fetch(`${API_BASE}/admin/config/${category}`, { headers: getAuthHeaders() });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
const configMap: Record<string, string> = {};
|
||||
(data.items || []).forEach((c: Config) => { configMap[c.key] = c.value; });
|
||||
setConfigs(data.items || []);
|
||||
setForm(configMap);
|
||||
}
|
||||
} catch {}
|
||||
setLoading(false);
|
||||
}, [category]);
|
||||
|
||||
useEffect(() => { loadConfigs(); }, [loadConfigs]);
|
||||
|
||||
function openAddDialog() {
|
||||
setEditingKey(null);
|
||||
setFormKey('');
|
||||
setFormValue('');
|
||||
setFormDesc('');
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
async function saveConfig(key: string) {
|
||||
const token = localStorage.getItem('adminToken');
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/admin/config/${key}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
|
||||
body: JSON.stringify({ value: form[key] || '' }),
|
||||
});
|
||||
if (res.ok) { setSaveMsg('保存成功'); setTimeout(() => setSaveMsg(''), 2000); }
|
||||
else { setSaveMsg('保存失败'); }
|
||||
} catch { setSaveMsg('保存失败'); }
|
||||
function openEditDialog(c: Config) {
|
||||
setEditingKey(c.key);
|
||||
setFormKey(c.key);
|
||||
setFormValue(c.value);
|
||||
setFormDesc(c.description || '');
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
async function addNewConfig() {
|
||||
if (!newKey.trim()) return;
|
||||
const token = localStorage.getItem('adminToken');
|
||||
async function handleSave() {
|
||||
if (!formKey.trim()) return;
|
||||
const key = editingKey || formKey;
|
||||
try {
|
||||
await fetch(`${API_BASE}/admin/config/${newKey}`, {
|
||||
await fetch(`${API_BASE}/admin/config/${key}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
|
||||
body: JSON.stringify({ value: newValue, description: newDesc, category }),
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({ value: formValue, description: formDesc, category }),
|
||||
});
|
||||
setShowNewKey(false); setNewKey(''); setNewValue(''); setNewDesc('');
|
||||
setDialogOpen(false);
|
||||
loadConfigs();
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function getLabel(key: string): string | undefined {
|
||||
for (const cat of Object.values(CATEGORY_LABELS)) {
|
||||
const found = cat.find(f => f.key === key);
|
||||
if (found) return found.label;
|
||||
}
|
||||
return key;
|
||||
}
|
||||
|
||||
function getPlaceholder(key: string): string | undefined {
|
||||
for (const cat of Object.values(CATEGORY_LABELS)) {
|
||||
const found = cat.find(f => f.key === key);
|
||||
if (found) return found.placeholder;
|
||||
}
|
||||
return '';
|
||||
async function handleDelete(key: string) {
|
||||
if (!window.confirm(`确定删除配置项 "${key}" 吗？`)) return;
|
||||
try {
|
||||
await fetch(`${API_BASE}/admin/config/${key}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders(),
|
||||
});
|
||||
loadConfigs();
|
||||
} catch {}
|
||||
}
|
||||
|
||||
if (loading) return <div className="p-6">加载中...</div>;
|
||||
|
||||
const allKeys = [...new Set([...(CATEGORY_LABELS[category] || []).map(f => f.key), ...configs.map(c => c.key)])];
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
@@ -122,28 +97,9 @@ export default function ConfigPage() {
|
||||
<h1 className="text-2xl font-bold text-foreground">系统配置</h1>
|
||||
<p className="text-sm text-muted-foreground">配置站点、AI、会员等设置</p>
|
||||
</div>
|
||||
<button onClick={() => setShowNewKey(!showNewKey)}
|
||||
className="px-3 py-1.5 bg-brand-600 text-white rounded-lg text-sm hover:bg-brand-700">
|
||||
{showNewKey ? '取消' : '+ 新增配置'}
|
||||
</button>
|
||||
<Button onClick={openAddDialog}>+ 新增配置</Button>
|
||||
</div>
|
||||
|
||||
{saveMsg && (
|
||||
<div className={`mb-4 px-4 py-2 rounded-lg text-sm ${saveMsg === '保存成功' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
|
||||
{saveMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showNewKey && (
|
||||
<div className="bg-card border border-border rounded-xl p-4 mb-6 space-y-3">
|
||||
<h3 className="text-sm font-semibold text-foreground">新增配置项</h3>
|
||||
<input value={newKey} onChange={e => setNewKey(e.target.value)} placeholder="配置键名" className="w-full px-3 py-2 border border-border rounded-lg bg-background text-foreground text-sm" />
|
||||
<input value={newValue} onChange={e => setNewValue(e.target.value)} placeholder="配置值" className="w-full px-3 py-2 border border-border rounded-lg bg-background text-foreground text-sm" />
|
||||
<input value={newDesc} onChange={e => setNewDesc(e.target.value)} placeholder="描述（可选）" className="w-full px-3 py-2 border border-border rounded-lg bg-background text-foreground text-sm" />
|
||||
<button onClick={addNewConfig} className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm hover:bg-brand-700">创建</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-4 mb-6">
|
||||
{CATEGORIES.map(cat => (
|
||||
<button key={cat} onClick={() => setCategory(cat)}
|
||||
@@ -153,24 +109,65 @@ export default function ConfigPage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-card border border-border rounded-xl p-6 space-y-4">
|
||||
{allKeys.map(key => (
|
||||
<div key={key} className="grid grid-cols-3 gap-4 items-center">
|
||||
<label className="text-sm text-muted-foreground">{getLabel(key) || key}</label>
|
||||
<div className="col-span-2 flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={form[key] || ''}
|
||||
onChange={e => setForm({ ...form, [key]: e.target.value })}
|
||||
placeholder={getPlaceholder(key)}
|
||||
className="flex-1 px-3 py-2 border border-border rounded-lg bg-background text-foreground text-sm"
|
||||
/>
|
||||
<button onClick={() => saveConfig(key)} className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm whitespace-nowrap hover:bg-brand-700">保存</button>
|
||||
<div className="bg-card border border-border rounded-xl overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-muted/50 border-b border-border">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">配置项</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">描述</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">值</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-muted-foreground uppercase">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{configs.map(c => (
|
||||
<tr key={c.key} className="hover:bg-accent/50">
|
||||
<td className="px-6 py-4 text-sm font-medium text-foreground">{c.key}</td>
|
||||
<td className="px-6 py-4 text-sm text-muted-foreground">{c.description || '-'}</td>
|
||||
<td className="px-6 py-4 text-sm text-foreground max-w-xs truncate">{c.value}</td>
|
||||
<td className="px-6 py-4 text-sm text-right whitespace-nowrap">
|
||||
<button onClick={() => openEditDialog(c)} className="text-brand-600 hover:underline text-sm mr-3">编辑</button>
|
||||
<button onClick={() => handleDelete(c.key)} className="text-red-500 hover:underline text-sm">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{configs.length === 0 && (
|
||||
<div className="text-center py-12 text-sm text-muted-foreground">暂无配置项</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Dialog.Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<Dialog.DialogContent>
|
||||
<Dialog.DialogHeader>
|
||||
<Dialog.DialogTitle>{editingKey ? '编辑配置' : '新增配置'}</Dialog.DialogTitle>
|
||||
<Dialog.DialogDescription>
|
||||
{editingKey ? `修改配置项 "${editingKey}"` : '添加一个新的系统配置项'}
|
||||
</Dialog.DialogDescription>
|
||||
</Dialog.DialogHeader>
|
||||
<div className="space-y-4">
|
||||
{!editingKey && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1">配置键名</label>
|
||||
<Input value={formKey} onChange={e => setFormKey(e.target.value)} placeholder="例如：site_name" />
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1">配置值</label>
|
||||
<Input value={formValue} onChange={e => setFormValue(e.target.value)} placeholder="配置值" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1">描述</label>
|
||||
<Input value={formDesc} onChange={e => setFormDesc(e.target.value)} placeholder="配置项描述（可选）" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{allKeys.length === 0 && <p className="text-sm text-muted-foreground text-center py-8">暂无配置项</p>}
|
||||
</div>
|
||||
<Dialog.DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>取消</Button>
|
||||
<Button onClick={handleSave}>保存</Button>
|
||||
</Dialog.DialogFooter>
|
||||
</Dialog.DialogContent>
|
||||
</Dialog.Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -28,8 +28,8 @@ interface Order {
|
||||
|
||||
const PLANS = [
|
||||
{ id: 'FREE', nameKey: 'planFree' as const, price: 0, period: '', popular: false, features: ['featureSandboxFree', 'featureModelsFree', 'featurePromptsFree', 'featureCoursesFree', 'featureAdsFree'] as const },
|
||||
{ id: 'MONTHLY', nameKey: 'planMonthly' as const, price: 29.9, period: 'perMonth', popular: true, features: ['featureSandboxPro', 'featureModelsPro', 'featurePromptsPro', 'featureCoursesPro', 'featureAdsPro'] as const },
|
||||
{ id: 'YEARLY', nameKey: 'planYearly' as const, price: 199, period: 'perYear', popular: false, features: ['featureSandboxUnlimited', 'featureModelsPremium', 'featurePromptsPremium', 'featureCoursesPremium', 'featureAdsPremium'] as const },
|
||||
{ id: 'MONTHLY', nameKey: 'planMonthly' as const, price: 49.9, period: 'perMonth', popular: true, features: ['featureSandboxPro', 'featureModelsPro', 'featurePromptsPro', 'featureCoursesPro', 'featureAdsPro'] as const },
|
||||
{ id: 'YEARLY', nameKey: 'planYearly' as const, price: 299, period: 'perYear', popular: false, features: ['featureSandboxUnlimited', 'featureModelsPremium', 'featurePromptsPremium', 'featureCoursesPremium', 'featureAdsPremium'] as const },
|
||||
];
|
||||
|
||||
const FEATURE_LABELS = ['featureSandbox', 'featureModels', 'featurePrompts', 'featureCourses', 'featureAds'] as const;
|
||||
@@ -72,7 +72,7 @@ export default function MemberPage() {
|
||||
const tradeType = useJsapi ? 'JSAPI' : 'NATIVE';
|
||||
|
||||
const body: Record<string, any> = {
|
||||
amount: planType === 'MONTHLY' ? 29.9 : 199,
|
||||
amount: planType === 'MONTHLY' ? 49.9 : 299,
|
||||
planType, payChannel: 'wxpay', tradeType,
|
||||
};
|
||||
if (useJsapi && openid) body.openid = openid;
|
||||
@@ -147,7 +147,7 @@ export default function MemberPage() {
|
||||
<h3 className="text-lg font-semibold text-foreground mb-1">{t.member[plan.nameKey]}</h3>
|
||||
<div className="mb-4">
|
||||
{plan.price > 0 ? (
|
||||
<span className="text-3xl font-bold text-foreground">{plan.price === 29.9 ? t.member.priceMonthly : t.member.priceYearly}<span className="text-sm font-normal text-muted-foreground">{t.member[plan.period]}</span></span>
|
||||
<span className="text-3xl font-bold text-foreground">{plan.price === 49.9 ? t.member.priceMonthly : t.member.priceYearly}<span className="text-sm font-normal text-muted-foreground">{t.member[plan.period]}</span></span>
|
||||
) : (
|
||||
<span className="text-2xl font-bold text-foreground">¥0</span>
|
||||
)}
|
||||
|
||||
@@ -9,7 +9,9 @@ import { DEFAULT_MODEL } from '@/lib/models';
|
||||
import { ModelSelector } from '@/components/ui/model-selector';
|
||||
import { useT } from '@/i18n';
|
||||
import { CodeBlock } from '@/components/ui/code-block';
|
||||
import LearningPath, { LEARNING_STAGES } from '@/components/sandbox/learning-path';
|
||||
import { API_BASE } from '@/lib/config';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
interface Message {
|
||||
role: 'system' | 'user' | 'assistant';
|
||||
@@ -25,6 +27,43 @@ interface SessionItem {
|
||||
tokens: number;
|
||||
}
|
||||
|
||||
interface GuideTask {
|
||||
taskKey: string;
|
||||
hint: string;
|
||||
actionLabel?: string;
|
||||
}
|
||||
|
||||
const STAGE_GUIDES: Record<string, GuideTask[]> = {
|
||||
'welcome': [
|
||||
{ taskKey: 'taskSendMsg', hint: '在下方输入框中输入任意问题（如"什么是 AI？"），然后按回车或点击发送按钮', actionLabel: '已发送第一条消息' },
|
||||
{ taskKey: 'taskTryStarter', hint: '点击下方任意 Starter 气泡（如"帮我写一封邮件"），快速开始一次对话', actionLabel: '已尝试 Starter' },
|
||||
{ taskKey: 'taskReadReply', hint: '阅读 AI 回复的内容和格式，观察它如何组织语言、分段和排版', actionLabel: '已理解回复特点' },
|
||||
],
|
||||
'scene': [
|
||||
{ taskKey: 'taskSwitchCoding', hint: '点击右侧场景下拉菜单 👉，选择「编程助手」，体验编程场景的专属提示', actionLabel: '已切换到编程' },
|
||||
{ taskKey: 'taskSwitchWriting', hint: '再次打开场景菜单，选择「写作助手」，试问"帮我润色这段文字"', actionLabel: '已切换到写作' },
|
||||
{ taskKey: 'taskSwitchStudy', hint: '切换到「学习辅导」场景，提问"请解释一下什么是机器学习"', actionLabel: '已切换到学习' },
|
||||
],
|
||||
'params': [
|
||||
{ taskKey: 'taskHighTemp', hint: '点击右上角的 ⚙ 高级参数按钮，将 Temperature 滑动到 0.9，然后发送一个问题', actionLabel: '已调高 Temperature' },
|
||||
{ taskKey: 'taskLowTemp', hint: '将 Temperature 滑动到 0.1，发送同样的问题，观察两次回复的差异', actionLabel: '已调低 Temperature' },
|
||||
{ taskKey: 'taskCompareTemp', hint: '对比高低 Temperature 的回复：高值更富创意多样，低值更保守聚焦', actionLabel: '已理解区别' },
|
||||
],
|
||||
'models': [
|
||||
{ taskKey: 'taskSwitchModel', hint: '在顶部的模型选择器中切换到 DeepSeek V4 Flash 模型', actionLabel: '已切换模型' },
|
||||
{ taskKey: 'taskCompareModel', hint: '向两个模型问同样的问题，观察他们在回复风格、详细程度上的差异', actionLabel: '已对比模型' },
|
||||
],
|
||||
'prompts': [
|
||||
{ taskKey: 'taskRolePrompt', hint: '输入一条包含角色设定的提示词，例如："你是一名资深编辑，请帮我审稿这篇文字，指出改进方向"', actionLabel: '已使用角色提示' },
|
||||
{ taskKey: 'taskStructured', hint: '尝试使用结构化提示：分步骤说明任务，例如："第一步：概括要点；第二步：分析优缺点；第三步：给出改进建议"', actionLabel: '已完成结构化提示' },
|
||||
],
|
||||
'master': [
|
||||
{ taskKey: 'taskTryStarter', hint: '选择一个 Starter 问题开始你的综合实战练习', actionLabel: '已选择问题' },
|
||||
{ taskKey: 'taskCodeExec', hint: '当 AI 生成代码后，点击消息下方的「在代码沙盒中运行」按钮，打开代码沙箱执行代码', actionLabel: '已运行代码' },
|
||||
{ taskKey: 'taskCommunity', hint: '点击「分享到社区」按钮，将你的对话分享到宇之然社区', actionLabel: '已分享到社区' },
|
||||
],
|
||||
};
|
||||
|
||||
function extractCodeBlocks(content: string): string[] {
|
||||
const blocks: string[] = [];
|
||||
const regex = /```(?:\w+)?\n([\s\S]*?)```/g;
|
||||
@@ -67,6 +106,7 @@ function SandboxPage() {
|
||||
const [maxTokens, setMaxTokens] = useState(2000);
|
||||
const [quota, setQuota] = useState<{ used: number; remaining: number } | null>(null);
|
||||
const [sessions, setSessions] = useState<SessionItem[]>([]);
|
||||
const [sessionsLoading, setSessionsLoading] = useState(false);
|
||||
const [sessionsOpen, setSessionsOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [conversationId, setConversationId] = useState(() => crypto.randomUUID());
|
||||
@@ -76,9 +116,14 @@ function SandboxPage() {
|
||||
const [renameValue, setRenameValue] = useState('');
|
||||
const [uploadedImages, setUploadedImages] = useState<string[]>([]);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [mode, setMode] = useState<'free' | 'learn'>('learn');
|
||||
const [guidedStageId, setGuidedStageId] = useState<string | null>(null);
|
||||
const [guidedTaskIdx, setGuidedTaskIdx] = useState(0);
|
||||
const [guidedDone, setGuidedDone] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const messagesContainerRef = useRef<HTMLDivElement>(null);
|
||||
const isStreamingRef = useRef(false);
|
||||
const { isLoggedIn } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -94,15 +139,27 @@ function SandboxPage() {
|
||||
}, [isLoggedIn]);
|
||||
|
||||
useEffect(() => {
|
||||
const DEFAULT_SCENES = [
|
||||
{ id: 'general-chat', name: '通用对话', icon: '💬', systemPrompt: '你是一个智能 AI 助手', starters: ['什么是 AI？', '帮我写一封邮件', '解释一下量子计算', '推荐一本好书'] },
|
||||
{ id: 'coding', name: '编程助手', icon: '💻', systemPrompt: '你是一个编程专家，擅长解答编程问题和编写代码', starters: ['用 Python 写一个斐波那契数列', '解释 RESTful API 设计原则', '帮我调试这段代码', '什么是闭包？'] },
|
||||
{ id: 'writing', name: '写作助手', icon: '✍️', systemPrompt: '你是一个专业的写作助手，擅长润色和创作各类文本', starters: ['帮我润色这段文字', '写一篇产品介绍', '如何写好工作总结？', '帮我拟一份会议邀请'] },
|
||||
{ id: 'study', name: '学习辅导', icon: '📚', systemPrompt: '你是一个耐心的学习辅导员，善于解释复杂概念', starters: ['什么是机器学习？', '解释 HTTP 与 HTTPS 的区别', '帮我理解微积分', '英语单词记忆技巧'] },
|
||||
];
|
||||
|
||||
fetch(`${API_BASE}/skills`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const scenes = (data.items || []).map((s: any) => ({ id: s.id, name: s.name, icon: s.icon, systemPrompt: s.systemPrompt, starters: s.starters }));
|
||||
setSCENES(scenes);
|
||||
const all = scenes.length > 0 ? scenes : DEFAULT_SCENES;
|
||||
setSCENES(all);
|
||||
const skillParam = searchParams.get('skill');
|
||||
const initialScene = scenes.find((s: any) => s.id === skillParam) ? skillParam : (scenes[0]?.id || '');
|
||||
const initialScene = all.find((s: any) => s.id === skillParam) ? skillParam : (all[0]?.id || '');
|
||||
setScene(initialScene);
|
||||
})
|
||||
.catch(() => {
|
||||
setSCENES(DEFAULT_SCENES);
|
||||
setScene(DEFAULT_SCENES[0].id);
|
||||
})
|
||||
.finally(() => setSkillsLoading(false));
|
||||
}, []);
|
||||
|
||||
@@ -115,12 +172,13 @@ function SandboxPage() {
|
||||
function loadSessions(tk?: string) {
|
||||
const token = tk || getToken();
|
||||
if (!token) return;
|
||||
setSessionsLoading(true);
|
||||
const params = searchQuery ? `?search=${encodeURIComponent(searchQuery)}` : '';
|
||||
fetch(`${API_BASE}/sandbox/sessions${params}`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}).then(r => r.json()).then(data => {
|
||||
if (data.items) setSessions(data.items);
|
||||
}).catch(() => {});
|
||||
}).catch(() => {}).finally(() => setSessionsLoading(false));
|
||||
}
|
||||
|
||||
function handleSceneChange(sceneId: string) {
|
||||
@@ -131,6 +189,68 @@ function SandboxPage() {
|
||||
]);
|
||||
}
|
||||
|
||||
function handleStartStage(stage: typeof LEARNING_STAGES[0]) {
|
||||
const s = SCENES.find(x => x.id === stage.sceneId);
|
||||
const stageName = t.sandbox[stage.descKey as keyof typeof t.sandbox] as string;
|
||||
const stageDesc = t.sandbox[stage.descDescKey as keyof typeof t.sandbox] as string;
|
||||
if (s) {
|
||||
setScene(stage.sceneId);
|
||||
setModel(stage.model);
|
||||
setTemperature(stage.temperature);
|
||||
setTopP(1);
|
||||
setMaxTokens(2000);
|
||||
setConversationId(crypto.randomUUID());
|
||||
setCurrentSessionId(null);
|
||||
setMessages([
|
||||
{ role: 'assistant', content: `📚 **${stageName}**\n\n${stageDesc}\n\n开始练习吧！按照左侧引导逐步完成本阶段任务。` },
|
||||
]);
|
||||
}
|
||||
setMode('free');
|
||||
setGuidedStageId(stage.id);
|
||||
setGuidedTaskIdx(0);
|
||||
setGuidedDone(false);
|
||||
if (stage.id === 'params') setShowParams(true);
|
||||
}
|
||||
|
||||
function handleCompleteTask() {
|
||||
const guide = guidedStageId ? STAGE_GUIDES[guidedStageId] : null;
|
||||
if (!guide) return;
|
||||
if (guidedTaskIdx < guide.length - 1) {
|
||||
setGuidedTaskIdx(guidedTaskIdx + 1);
|
||||
} else {
|
||||
setGuidedDone(true);
|
||||
try {
|
||||
const raw = localStorage.getItem('sandbox_learning_progress');
|
||||
const progress = raw ? JSON.parse(raw) : { done: [] };
|
||||
if (!progress.done.includes(guidedStageId)) {
|
||||
progress.done.push(guidedStageId);
|
||||
for (const task of guide) {
|
||||
if (!progress.done.includes(task.taskKey)) progress.done.push(task.taskKey);
|
||||
}
|
||||
localStorage.setItem('sandbox_learning_progress', JSON.stringify(progress));
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
function handleNextStage() {
|
||||
if (!guidedStageId) return;
|
||||
const idx = LEARNING_STAGES.findIndex(s => s.id === guidedStageId);
|
||||
if (idx >= 0 && idx < LEARNING_STAGES.length - 1) {
|
||||
handleStartStage(LEARNING_STAGES[idx + 1]);
|
||||
} else {
|
||||
setGuidedStageId(null);
|
||||
setGuidedTaskIdx(0);
|
||||
setGuidedDone(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleExitGuide() {
|
||||
setGuidedStageId(null);
|
||||
setGuidedTaskIdx(0);
|
||||
setGuidedDone(false);
|
||||
}
|
||||
|
||||
async function handleSend(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
const text = input.trim();
|
||||
@@ -143,7 +263,6 @@ function SandboxPage() {
|
||||
|
||||
try {
|
||||
const tk = getToken();
|
||||
let reply = '';
|
||||
if (tk) {
|
||||
const curScene = SCENES.find(s => s.id === scene) || SCENES[0];
|
||||
const systemPrompt = curScene?.systemPrompt || '你是一个智能 AI 助手';
|
||||
@@ -159,31 +278,84 @@ function SandboxPage() {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${tk}`,
|
||||
},
|
||||
body: JSON.stringify({ conversationId, model, messages: apiMessages, temperature, top_p: topP, max_tokens: maxTokens, ...(uploadedImages.length > 0 ? { images: uploadedImages } : {}) }),
|
||||
body: JSON.stringify({ conversationId, model, messages: apiMessages, temperature, top_p: topP, max_tokens: maxTokens, stream: true, ...(uploadedImages.length > 0 ? { images: uploadedImages } : {}) }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.message || '请求失败');
|
||||
reply = data.reply;
|
||||
if (data.conversationId) setConversationId(data.conversationId);
|
||||
if (data.sessionId) setCurrentSessionId(data.sessionId);
|
||||
|
||||
if ((res.headers.get('content-type') || '').includes('text/event-stream')) {
|
||||
isStreamingRef.current = true;
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: '' }]);
|
||||
|
||||
const reader = res.body!.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buf = '';
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buf += decoder.decode(value, { stream: true });
|
||||
const lines = buf.split('\n');
|
||||
buf = lines.pop() || '';
|
||||
for (const line of lines) {
|
||||
if (!line.startsWith('data: ')) continue;
|
||||
try {
|
||||
const d = JSON.parse(line.slice(6));
|
||||
if (d.type === 'text') {
|
||||
setMessages(prev => {
|
||||
const msgs = [...prev];
|
||||
if (msgs.length > 0) {
|
||||
const last = msgs[msgs.length - 1];
|
||||
if (last.role === 'assistant') {
|
||||
msgs[msgs.length - 1] = { ...last, content: last.content + d.content };
|
||||
}
|
||||
}
|
||||
return msgs;
|
||||
});
|
||||
} else if (d.type === 'done') {
|
||||
if (d.sessionId) setCurrentSessionId(d.sessionId);
|
||||
if (d.conversationId) setConversationId(d.conversationId);
|
||||
} else if (d.type === 'error') {
|
||||
throw new Error(d.message);
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.message || '请求失败');
|
||||
if (data.conversationId) setConversationId(data.conversationId);
|
||||
if (data.sessionId) setCurrentSessionId(data.sessionId);
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: data.reply }]);
|
||||
}
|
||||
|
||||
if (quota) setQuota({ ...quota, used: quota.used + 1, remaining: quota.remaining - 1 });
|
||||
setUploadedImages([]);
|
||||
loadSessions(tk);
|
||||
} else {
|
||||
await new Promise(r => setTimeout(r, 300));
|
||||
reply = '📝 注册登录后可体验完整 AI 对话功能。\n\n点击右上角「登录」或「注册」即可开始使用。';
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: '📝 注册登录后可体验完整 AI 对话功能。\n\n点击右上角「登录」或「注册」即可开始使用。' }]);
|
||||
}
|
||||
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: reply }]);
|
||||
} catch (e: any) {
|
||||
if (e.message.includes('今日沙箱使用次数已用完')) {
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: '今日沙箱使用次数已用完。' + (isLoggedIn ? '' : ' 登录后可获得更多使用次数。') }]);
|
||||
} else if (e.message.includes('未登录') || e.message.includes('Unauthorized')) {
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: '登录已过期，请重新登录后再试。' }]);
|
||||
const errMsg = e.message.includes('今日沙箱使用次数已用完')
|
||||
? '今日沙箱使用次数已用完。' + (isLoggedIn ? '' : ' 登录后可获得更多使用次数。')
|
||||
: e.message.includes('未登录') || e.message.includes('Unauthorized')
|
||||
? '登录已过期，请重新登录后再试。'
|
||||
: `出错啦：${e.message}`;
|
||||
|
||||
if (isStreamingRef.current) {
|
||||
setMessages(prev => {
|
||||
const msgs = [...prev];
|
||||
const last = msgs[msgs.length - 1];
|
||||
if (last?.role === 'assistant' && last.content === '') {
|
||||
msgs[msgs.length - 1] = { role: 'assistant', content: errMsg };
|
||||
return msgs;
|
||||
}
|
||||
return [...prev, { role: 'assistant', content: errMsg }];
|
||||
});
|
||||
} else {
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: `出错啦：${e.message}` }]);
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: errMsg }]);
|
||||
}
|
||||
} finally {
|
||||
isStreamingRef.current = false;
|
||||
setSending(false);
|
||||
}
|
||||
}
|
||||
@@ -266,7 +438,7 @@ function SandboxPage() {
|
||||
}
|
||||
|
||||
async function shareSessionLink() {
|
||||
if (!getToken() || !currentSessionId) { alert('请先登录'); return; }
|
||||
if (!getToken() || !currentSessionId) { toast.error('请先登录'); return; }
|
||||
try {
|
||||
const tk = getToken();
|
||||
const res = await fetch(`${API_BASE}/sandbox/sessions/${currentSessionId}/share`, {
|
||||
@@ -275,13 +447,13 @@ function SandboxPage() {
|
||||
const data = await res.json();
|
||||
if (data.shareUrl) {
|
||||
await navigator.clipboard.writeText(data.shareUrl);
|
||||
alert('链接已复制');
|
||||
toast.success(t.sandbox.linkCopied);
|
||||
}
|
||||
} catch { alert('生成分享链接失败'); }
|
||||
} catch { toast.error('生成分享链接失败'); }
|
||||
}
|
||||
|
||||
function shareToCommunity(content: string, title?: string) {
|
||||
if (!getToken()) { alert('请先登录'); return; }
|
||||
if (!getToken()) { toast.error('请先登录'); return; }
|
||||
apiFetch('/community/posts', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
@@ -289,7 +461,7 @@ function SandboxPage() {
|
||||
content: `【AI沙箱对话分享】\n\n${content}\n\n---\n来自宇之然AI沙箱`,
|
||||
tags: '沙箱分享,AI对话',
|
||||
}),
|
||||
}).then(() => alert('分享成功！')).catch(() => alert('分享失败'));
|
||||
}).then(() => toast.success(t.sandbox.shareSuccess)).catch(() => toast.error(t.sandbox.shareFailed));
|
||||
}
|
||||
|
||||
const currentScene = SCENES.find(s => s.id === scene) || SCENES[0] || null;
|
||||
@@ -320,6 +492,12 @@ function SandboxPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
|
||||
<button onClick={() => setShowParams(!showParams)}
|
||||
className={`px-2.5 py-1.5 rounded-xl text-xs font-medium border transition-colors ${
|
||||
showParams ? 'bg-brand-600 text-white border-brand-600' : 'bg-card text-muted-foreground border-border hover:text-foreground'
|
||||
}`}>
|
||||
⚙ {t.sandbox.advancedParams}
|
||||
</button>
|
||||
<ModelSelector value={model} onChange={setModel} className="w-40 sm:w-48" />
|
||||
{!isLoggedIn && (
|
||||
<Link href="/auth"
|
||||
@@ -348,7 +526,13 @@ function SandboxPage() {
|
||||
className="w-full px-3 py-1.5 bg-background border border-border rounded-lg text-xs focus:outline-none focus:border-brand-400" />
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{sessions.length === 0 ? (
|
||||
{sessionsLoading ? (
|
||||
<div className="p-4 space-y-3">
|
||||
{[1,2,3].map(i => (
|
||||
<div key={i} className="h-12 bg-muted rounded-lg animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : sessions.length === 0 ? (
|
||||
<div className="p-4 text-center text-xs text-muted-foreground">{t.sandbox.noHistory}</div>
|
||||
) : sessions.map(s => (
|
||||
<div key={s.id} onClick={() => { if (renamingId !== s.id) { loadSession(s.id); setSessionsOpen(false); } }}
|
||||
@@ -382,54 +566,119 @@ function SandboxPage() {
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex gap-2 mb-4 overflow-x-auto pb-1">
|
||||
{SCENES.map(s => (
|
||||
<button key={s.id} onClick={() => handleSceneChange(s.id)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium whitespace-nowrap border transition-colors shrink-0 ${
|
||||
scene === s.id
|
||||
? 'bg-brand-600 text-white border-brand-600'
|
||||
: 'bg-card text-muted-foreground border-border hover:border-brand-400 hover:text-foreground'
|
||||
}`}>
|
||||
<span>{s.icon}</span>
|
||||
<span>{s.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div />
|
||||
<button onClick={() => setShowParams(!showParams)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-lg border transition-colors ${
|
||||
showParams ? 'bg-accent text-foreground border-border' : 'text-muted-foreground border-border hover:text-foreground hover:bg-accent'
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<button onClick={() => setMode('learn')}
|
||||
className={`px-3 py-1.5 rounded-xl text-xs font-medium border transition-colors ${
|
||||
mode === 'learn' ? 'bg-brand-600 text-white border-brand-600' : 'bg-card text-muted-foreground border-border hover:text-foreground'
|
||||
}`}>
|
||||
<svg className={`w-3.5 h-3.5 transition-transform ${showParams ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
||||
</svg>
|
||||
{t.sandbox.advancedParams}
|
||||
📚 {t.sandbox.learnMode}
|
||||
</button>
|
||||
<button onClick={() => setMode('free')}
|
||||
className={`px-3 py-1.5 rounded-xl text-xs font-medium border transition-colors ${
|
||||
mode === 'free' ? 'bg-brand-600 text-white border-brand-600' : 'bg-card text-muted-foreground border-border hover:text-foreground'
|
||||
}`}>
|
||||
🎯 {t.sandbox.freeMode}
|
||||
</button>
|
||||
{mode === 'free' && SCENES.length > 0 && (
|
||||
<select value={scene} onChange={e => handleSceneChange(e.target.value)}
|
||||
className="ml-2 px-2 py-1.5 text-xs bg-card border border-border rounded-lg text-foreground focus:outline-none focus:border-brand-400">
|
||||
{SCENES.map(s => (
|
||||
<option key={s.id} value={s.id}>{s.icon} {s.name}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showParams && (
|
||||
<div className="bg-card border border-border rounded-xl p-4 mb-3 space-y-3">
|
||||
{[
|
||||
{ label: t.sandbox.temperature, min: 0, max: 2, step: 0.1, val: temperature, set: setTemperature, fmt: (v: number) => v.toFixed(1) },
|
||||
{ label: t.sandbox.topP, min: 0, max: 1, step: 0.05, val: topP, set: setTopP, fmt: (v: number) => v.toFixed(2) },
|
||||
{ label: t.sandbox.maxTokens, min: 100, max: 8192, step: 100, val: maxTokens, set: setMaxTokens, fmt: (v: number) => String(v) },
|
||||
].map(p => (
|
||||
<div key={p.label}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<label className="text-xs font-medium text-foreground">{p.label}</label>
|
||||
<span className="text-xs text-muted-foreground tabular-nums">{p.fmt(p.val)}</span>
|
||||
</div>
|
||||
<input type="range" min={p.min} max={p.max} step={p.step} value={p.val}
|
||||
onChange={e => p.set(parseFloat(e.target.value))}
|
||||
className="w-full h-1.5 bg-muted rounded-full appearance-none cursor-pointer accent-brand-600" />
|
||||
<div className="bg-card border border-border rounded-2xl p-4 mb-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground block mb-1">{t.sandbox.temperature} ({temperature})</label>
|
||||
<input type="range" min="0" max="2" step="0.1" value={temperature}
|
||||
onChange={e => setTemperature(parseFloat(e.target.value))}
|
||||
className="w-full accent-brand-600" />
|
||||
</div>
|
||||
))}
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground block mb-1">{t.sandbox.topP} ({topP})</label>
|
||||
<input type="range" min="0" max="1" step="0.05" value={topP}
|
||||
onChange={e => setTopP(parseFloat(e.target.value))}
|
||||
className="w-full accent-brand-600" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground block mb-1">{t.sandbox.maxTokens} ({maxTokens})</label>
|
||||
<input type="range" min="256" max="4096" step="256" value={maxTokens}
|
||||
onChange={e => setMaxTokens(parseInt(e.target.value))}
|
||||
className="w-full accent-brand-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-card rounded-2xl border border-border shadow-sm overflow-hidden flex flex-col" style={{ maxHeight: '65vh' }}>
|
||||
{guidedStageId && mode === 'free' && (() => {
|
||||
const guide = STAGE_GUIDES[guidedStageId];
|
||||
const stage = LEARNING_STAGES.find(s => s.id === guidedStageId);
|
||||
const stageNum = LEARNING_STAGES.findIndex(s => s.id === guidedStageId) + 1;
|
||||
const task = guide?.[guidedTaskIdx];
|
||||
const isLast = guidedTaskIdx >= guide.length - 1;
|
||||
const progressPct = ((guidedDone ? guide.length : guidedTaskIdx) / guide.length) * 100;
|
||||
return (
|
||||
<div className="bg-brand-600/5 border border-brand-200 dark:border-brand-800 rounded-2xl p-4 mb-4">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-bold text-brand-600 uppercase tracking-wider">{stageNum} / {LEARNING_STAGES.length}</span>
|
||||
<span className="text-sm font-semibold text-foreground">{t.sandbox[stage?.descKey as keyof typeof t.sandbox] as string}</span>
|
||||
</div>
|
||||
<div className="w-full bg-muted rounded-full h-1 mb-3">
|
||||
<div className="bg-brand-600 h-1 rounded-full transition-all" style={{ width: `${progressPct}%` }} />
|
||||
</div>
|
||||
{guidedDone ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">🎉</span>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">{t.sandbox.stageDone}！本阶段全部完成</p>
|
||||
<p className="text-xs text-muted-foreground">你已经掌握了这一阶段的核心技能，继续前进吧！</p>
|
||||
</div>
|
||||
</div>
|
||||
) : task ? (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="w-5 h-5 rounded-full bg-brand-600 text-white flex items-center justify-center text-[10px] font-bold shrink-0">{guidedTaskIdx + 1}</span>
|
||||
<span className="text-xs font-medium text-foreground">{t.sandbox[task.taskKey as keyof typeof t.sandbox] as string}</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground ml-7 mb-2">{task.hint}</p>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{!guidedDone ? (
|
||||
<button onClick={handleCompleteTask}
|
||||
className="px-4 py-2 text-sm font-medium bg-brand-600 text-white rounded-xl hover:bg-brand-700 transition-colors">
|
||||
{isLast ? '✅ 全部完成！' : '✅ 完成，下一步'}
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={handleNextStage}
|
||||
className="px-4 py-2 text-sm font-medium bg-brand-600 text-white rounded-xl hover:bg-brand-700 transition-colors">
|
||||
{stageNum < LEARNING_STAGES.length ? '➡️ 下一阶段' : '🎊 完成全部！'}
|
||||
</button>
|
||||
)}
|
||||
<button onClick={handleExitGuide} className="px-3 py-2 text-xs text-muted-foreground hover:text-foreground transition-colors">退出引导</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{mode === 'learn' && (
|
||||
<div className="bg-card rounded-2xl border border-border shadow-sm p-4 sm:p-6 overflow-y-auto" style={{ maxHeight: '75vh' }}>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<h2 className="text-lg font-semibold text-foreground">{t.sandbox.learnPath}</h2>
|
||||
</div>
|
||||
<LearningPath onStartStage={handleStartStage} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === 'free' && (<>
|
||||
<div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{isNewChat && (
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
@@ -523,7 +772,20 @@ function SandboxPage() {
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border p-4">
|
||||
{quota && (
|
||||
{quota && quota.remaining <= 0 ? (
|
||||
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-3 mb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-amber-800 dark:text-amber-300">{t.sandbox.quotaExhausted}</div>
|
||||
<div className="text-xs text-amber-600 dark:text-amber-400 mt-0.5">{t.sandbox.quotaUpgradeHint}</div>
|
||||
</div>
|
||||
<Link href="/my/member"
|
||||
className="px-3 py-1.5 text-xs font-medium bg-brand-600 text-white rounded-lg hover:bg-brand-700 shrink-0">
|
||||
{t.sandbox.upgradeNow}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : quota && (
|
||||
<div className="text-xs text-muted-foreground mb-2">
|
||||
{t.sandbox.dailyQuota.replace('{used}', String(quota.used)).replace('{remaining}', String(quota.remaining))}
|
||||
</div>
|
||||
@@ -574,8 +836,8 @@ function SandboxPage() {
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>)}
|
||||
<div className="mt-4 text-center text-xs text-muted-foreground">
|
||||
{t.sandbox.aiReplyDisclaimer}{!isLoggedIn && ` ${t.sandbox.loginForMoreQuota}`}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useT } from '@/i18n';
|
||||
|
||||
export interface LearningStage {
|
||||
id: string;
|
||||
tasks: string[];
|
||||
sceneId: string;
|
||||
model: string;
|
||||
temperature: number;
|
||||
}
|
||||
|
||||
export const LEARNING_STAGES: (LearningStage & { descKey: string; descDescKey: string; taskKeys: string[] })[] = [
|
||||
{ id: 'welcome', descKey: 'stageWelcome', descDescKey: 'stageWelcomeDesc', taskKeys: ['taskSendMsg', 'taskTryStarter', 'taskReadReply'], sceneId: 'general-chat', model: 'general', temperature: 0.7, tasks: [] },
|
||||
{ id: 'scene', descKey: 'stageScene', descDescKey: 'stageSceneDesc', taskKeys: ['taskSwitchCoding', 'taskSwitchWriting', 'taskSwitchStudy'], sceneId: 'coding', model: 'deepseek-v4-flash', temperature: 0.7, tasks: [] },
|
||||
{ id: 'params', descKey: 'stageParams', descDescKey: 'stageParamsDesc', taskKeys: ['taskHighTemp', 'taskLowTemp', 'taskCompareTemp'], sceneId: 'general-chat', model: 'general', temperature: 0.9, tasks: [] },
|
||||
{ id: 'models', descKey: 'stageModels', descDescKey: 'stageModelsDesc', taskKeys: ['taskSwitchModel', 'taskCompareModel'], sceneId: 'general-chat', model: 'deepseek-v4-flash', temperature: 0.7, tasks: [] },
|
||||
{ id: 'prompts', descKey: 'stagePrompts', descDescKey: 'stagePromptsDesc', taskKeys: ['taskRolePrompt', 'taskStructured'], sceneId: 'general-chat', model: 'general', temperature: 0.5, tasks: [] },
|
||||
{ id: 'master', descKey: 'stageMaster', descDescKey: 'stageMasterDesc', taskKeys: ['taskTryStarter', 'taskCodeExec', 'taskCommunity'], sceneId: 'coding', model: 'deepseek-v4-flash', temperature: 0.7, tasks: [] },
|
||||
];
|
||||
|
||||
const STORAGE_KEY = 'sandbox_learning_progress';
|
||||
|
||||
interface StageProgress {
|
||||
done: string[];
|
||||
}
|
||||
|
||||
function loadProgress(): StageProgress {
|
||||
if (typeof window === 'undefined') return { done: [] };
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (raw) return JSON.parse(raw);
|
||||
} catch {}
|
||||
return { done: [] };
|
||||
}
|
||||
|
||||
function saveProgress(p: StageProgress) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(p));
|
||||
}
|
||||
|
||||
interface Props {
|
||||
onStartStage: (stage: (typeof LEARNING_STAGES)[0]) => void;
|
||||
}
|
||||
|
||||
export default function LearningPath({ onStartStage }: Props) {
|
||||
const t = useT();
|
||||
const [progress, setProgress] = useState<StageProgress>({ done: [] });
|
||||
|
||||
useEffect(() => {
|
||||
setProgress(loadProgress());
|
||||
}, []);
|
||||
|
||||
function markDone(stageId: string) {
|
||||
const next = { ...progress, done: progress.done.includes(stageId) ? progress.done : [...progress.done, stageId] };
|
||||
setProgress(next);
|
||||
saveProgress(next);
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
const next = { done: [] };
|
||||
setProgress(next);
|
||||
saveProgress(next);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs text-muted-foreground">{t.sandbox.learnPathDesc}</p>
|
||||
<button onClick={resetAll} className="text-xs text-muted-foreground hover:text-foreground underline shrink-0 ml-2">重新开始</button>
|
||||
</div>
|
||||
<div className="w-full bg-muted rounded-full h-1.5">
|
||||
<div className="bg-brand-600 h-1.5 rounded-full transition-all" style={{ width: `${(progress.done.length / LEARNING_STAGES.length) * 100}%` }} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
{LEARNING_STAGES.map((stage, i) => {
|
||||
const unlocked = i === 0 || progress.done.includes(LEARNING_STAGES[i - 1].id);
|
||||
const completed = progress.done.includes(stage.id);
|
||||
return (
|
||||
<div key={stage.id}
|
||||
className={`rounded-xl border p-3 transition-colors ${completed ? 'bg-green-500/5 border-green-200 dark:border-green-800' : unlocked ? 'bg-card border-border hover:border-brand-400' : 'bg-muted/30 border-border/50 opacity-50'}`}>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold shrink-0 ${completed ? 'bg-green-500 text-white' : unlocked ? 'bg-brand-600 text-white' : 'bg-muted-foreground/30 text-muted-foreground'}`}>
|
||||
{completed ? '✓' : i + 1}
|
||||
</span>
|
||||
<button onClick={() => unlocked && !completed && onStartStage(stage)} disabled={!unlocked || completed}
|
||||
className={`min-w-0 text-left ${unlocked && !completed ? 'cursor-pointer hover:opacity-80' : 'cursor-default'}`}>
|
||||
<div className="text-sm font-medium text-foreground truncate">
|
||||
{t.sandbox[stage.descKey as keyof typeof t.sandbox] as string}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
{t.sandbox[stage.descDescKey as keyof typeof t.sandbox] as string}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{completed ? (
|
||||
<span className="text-xs text-green-600 font-medium shrink-0">{t.sandbox.stageDone}</span>
|
||||
) : unlocked ? (
|
||||
<button onClick={() => onStartStage(stage)}
|
||||
className="text-xs px-2.5 py-1 bg-brand-600 text-white rounded-lg hover:bg-brand-700 shrink-0">
|
||||
{t.sandbox.startPractice}
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground shrink-0">🔒</span>
|
||||
)}
|
||||
</div>
|
||||
{unlocked && (
|
||||
<div className="mt-2 space-y-1">
|
||||
{stage.taskKeys.map(tk => (
|
||||
<label key={tk} className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
|
||||
<input type="checkbox" checked={progress.done.includes(tk)} onChange={() => {
|
||||
const tasks = [...progress.done];
|
||||
if (tasks.includes(tk)) {
|
||||
const idx = tasks.indexOf(tk);
|
||||
tasks.splice(idx, 1);
|
||||
} else {
|
||||
tasks.push(tk);
|
||||
}
|
||||
const next = { ...progress, done: tasks };
|
||||
setProgress(next);
|
||||
saveProgress(next);
|
||||
if (stage.taskKeys.every(k => next.done.includes(k)) && !next.done.includes(stage.id)) {
|
||||
markDone(stage.id);
|
||||
}
|
||||
}}
|
||||
className="w-3 h-3 rounded border-border accent-brand-600" />
|
||||
{t.sandbox[tk as keyof typeof t.sandbox] as string}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import type { Translations } from './zh'
|
||||
|
||||
const en: Translations = {
|
||||
common: { loading: 'Loading...', save: 'Save', cancel: 'Cancel', delete: 'Delete', confirm: 'Confirm', search: 'Search', back: 'Back', login: 'Login', register: 'Register', logout: 'Logout', retry: 'Retry', noData: 'No data', viewAll: 'View all' },
|
||||
nav: { home: 'Home', courses: 'Courses', prompts: 'Prompts', sandbox: 'AI Sandbox', discover: 'Discover', my: 'My', tools: 'Tools', community: 'Community', skills: 'Skills', models: 'Models', articles: 'Articles' },
|
||||
nav: { home: 'Home', courses: 'Courses', prompts: 'Prompts', sandbox: 'Sandbox', discover: 'Discover', my: 'My', tools: 'Tools', community: 'Community', skills: 'Skills', models: 'Models', articles: 'Articles' },
|
||||
home: { badge: 'Free AI Learning Community', heroHighlight: 'Empower Everyone', heroRest: 'to Master AI', desc: 'AI knowledge, prompt engineering, sandbox practice & model encyclopedia', startExplore: 'Get Started', freeRegister: 'Register Free', statTopics: 'AI Topics', statPrompts: 'Curated Prompts', statTools: 'AI Tool Reviews', statExplorers: 'Explorers', whyTitle: 'Why Yuzhiran?', whyDesc: 'Four core advantages to master AI fast', featureGuide: 'Guided Learning', featureGuideDesc: 'Content organized by role and scenario', featureSandbox: 'AI Sandbox', featureSandboxDesc: 'Built-in AI sandbox to learn by doing', featurePrompts: 'Prompt Library', featurePromptsDesc: '200+ curated prompt templates', featureUpdate: 'Always Up-to-date', featureUpdateDesc: 'Content updated as AI evolves', popularTopics: 'Popular Topics', popularDesc: 'From beginner to expert, explore AI systematically', moduleCount: '{n} modules', studentCount: '{n} learners', openSandbox: 'Open Sandbox', ctaTitle: 'Ready to Start Your AI Journey?', ctaDesc: 'Register now and explore everything for free' },
|
||||
auth: { loginTitle: 'Login', registerTitle: 'Register', phone: 'Phone', password: 'Password', nickname: 'Nickname', welcomeBack: 'Welcome back', loginSubtitle: 'Log in to continue your AI journey', joinTitle: 'Join Yuzhiran', registerSubtitle: 'Register for free and explore AI', accountPlaceholder: 'Phone / Email', loggingIn: 'Logging in...', nicknameOptional: 'Nickname (optional)', passwordHint: 'Password (min 6 characters)', confirmPassword: 'Confirm password', registering: 'Registering...', agreePrefix: 'By registering, you agree to our', termsOfService: 'Terms of Service', privacyPolicy: 'Privacy Policy', aiAgreement: 'AI Service Agreement', fillAccountAndPassword: 'Please enter account and password', fillPhoneOrEmail: 'Please enter phone or email', fillPassword: 'Please enter password', passwordMinLength: 'Password must be at least 6 characters', passwordsNotMatch: 'Passwords do not match', loginFailed: 'Login failed', registerFailed: 'Registration failed', loginSuccess: 'Login successful', registerSuccess: 'Registration successful' },
|
||||
dashboard: { title: 'My Learning', desc: 'Track your learning progress and stats', inProgressCourses: 'Courses in Progress', completedLessons: 'Lessons Completed', favoritePrompts: 'Favorite Prompts', studyDays: 'Study Days', todayLearned: "Today's Learning", tabProgress: 'Progress', tabFavorites: 'Favorites', tabProfile: 'Profile', noLearningRecords: 'No learning records yet', browseCourses: 'Browse Courses', learningProgress: 'Learning Progress', lessonCount: '{completed}/{total} lessons ({progress}%)', noFavorites: 'No favorite prompts yet', browsePrompts: 'Browse Prompts', profile: 'Profile', nicknameLabel: 'Nickname', nicknamePlaceholder: 'Enter nickname', memberPlan: 'Membership', freeUser: 'Free User', memberExpire: 'Membership Expires', joinDate: 'Joined', saveSuccess: 'Saved successfully', saveFailed: 'Save failed', loadFailed: 'Failed to load data' },
|
||||
@@ -23,9 +23,10 @@ const en: Translations = {
|
||||
notFound: { title: '404', desc: 'Page not found', backToHome: 'Back to Home' },
|
||||
share: { missingToken: 'Missing share token', invalidLink: 'Invalid share link', notAvailable: 'Shared content not available', expired: 'This share link may have expired', goToSandbox: 'Go to AI Sandbox', backToSandbox: 'AI Sandbox', modelInfo: 'Model: {model} · {date}' },
|
||||
path: { back: 'Back', totalProgress: 'Total Progress', taskCount: '{completed}/{total} tasks' },
|
||||
sandbox: { title: 'AI Sandbox', subtitle: 'Experience AI conversations online', placeholder: 'Ask me anything...', send: 'Send', sending: 'Sending', newChat: 'New Chat', history: 'History', searchHistory: 'Search history...', noHistory: 'No history', sceneGeneral: 'General', sceneCoding: 'Coding', sceneWriting: 'Writing', sceneStudy: 'Study', sceneEnglish: 'English', modelGeneral: 'General', modelDeepSeek: 'DeepSeek V4 Flash', advancedParams: 'Advanced', temperature: 'Temperature', topP: 'Top P', maxTokens: 'Max Tokens', helpful: 'Helpful', notHelpful: 'Not Helpful', runInCodeSandbox: 'Run in Code Sandbox', shareToCommunity: 'Share to Community', copyShareLink: 'Copy Link', linkCopied: 'Link copied', loginForMore: 'Login for more', dailyQuota: 'Used {used} today, {remaining} remaining', aiReplyDisclaimer: 'AI replies are for reference only.', loginForMoreQuota: 'Login for more daily quota and models.', justNow: 'just now', minutesAgo: '{n}m ago', hoursAgo: '{n}h ago' },
|
||||
sandbox: { title: 'Sandbox', subtitle: 'Experience AI conversations online', placeholder: 'Ask me anything...', send: 'Send', sending: 'Sending', newChat: 'New Chat', history: 'History', searchHistory: 'Search history...', noHistory: 'No history', sceneGeneral: 'General', sceneCoding: 'Coding', sceneWriting: 'Writing', sceneStudy: 'Study', sceneEnglish: 'English', modelGeneral: 'General', modelDeepSeek: 'DeepSeek V4 Flash', advancedParams: 'Advanced', temperature: 'Temperature', topP: 'Top P', maxTokens: 'Max Tokens', helpful: 'Helpful', notHelpful: 'Not Helpful', runInCodeSandbox: 'Run in Code Sandbox', shareToCommunity: 'Share to Community', copyShareLink: 'Copy Link', linkCopied: 'Link copied', shareSuccess: 'Shared successfully', shareFailed: 'Share failed', loginForMore: 'Login for more', dailyQuota: 'Used {used} today, {remaining} remaining', aiReplyDisclaimer: 'AI replies are for reference only.', loginForMoreQuota: 'Login for more daily quota and models.', justNow: 'just now', minutesAgo: '{n}m ago', hoursAgo: '{n}h ago',
|
||||
freeMode: 'Free Mode', learnMode: 'Learning Mode', learnPath: 'Learning Path', learnPathDesc: 'From zero to pro in 6 steps. Click each stage to practice in free mode, check tasks when done to proceed.', stage: 'Step {n}', stageProgress: '{done}/{total} done', startPractice: 'Start Practice', stageDone: 'Completed', stageLocked: 'Locked', stageWelcome: 'First Contact', stageWelcomeDesc: 'Start your first AI conversation', stageScene: 'Scene Practice', stageSceneDesc: 'Practice in different role scenarios', stageParams: 'Parameter Tuning', stageParamsDesc: 'Adjust Temperature and see what changes', stageModels: 'Model Comparison', stageModelsDesc: 'Switch models to compare their styles', stagePrompts: 'Advanced Prompting', stagePromptsDesc: 'Learn role-setting, structured prompts', stageMaster: 'Final Challenge', stageMasterDesc: 'Apply everything in a real-world task', taskSendMsg: 'Send your first message', taskTryStarter: 'Try a starter question', taskReadReply: 'Understand AI reply characteristics', taskSwitchCoding: 'Switch to Coding scene', taskSwitchWriting: 'Switch to Writing scene', taskSwitchStudy: 'Switch to Study scene', taskHighTemp: 'Try Temperature at 0.9', taskLowTemp: 'Try Temperature at 0.1', taskCompareTemp: 'Compare the differences', taskSwitchModel: 'Switch to DeepSeek model', taskCompareModel: 'Compare model reply styles', taskRolePrompt: 'Write a prompt with role-setting', taskStructured: 'Try structured step-by-step prompts', taskCodeExec: 'Run AI-generated code in Code Sandbox', taskCommunity: 'Share a conversation to Community', quotaExhausted: 'Free quota exhausted', upgradeNow: 'Upgrade', quotaUpgradeHint: 'Upgrade for more quota and all models', quotaLoginHint: 'Login for more free daily quota' },
|
||||
learning: { analytics: 'Learning Analytics', analyticsDesc: 'Analyze your learning based on AI conversations', path: 'Learning Path', pathDesc: 'Master AI skills systematically', totalSessions: 'AI Sessions', domainsCovered: 'Domains Covered', avgMastery: 'Avg Mastery', knowledgeDomains: 'Knowledge Domains', weakAreas: 'Weak Areas', weakDesc: 'Consider strengthening these areas:', recommendations: 'Recommendations', recDesc: 'Based on your weak areas', toStrengthen: 'To Strengthen', conversations: '{count} conversations', clickToGo: 'Go' },
|
||||
member: { title: 'Membership', desc: 'Manage your subscription', currentPlan: 'Current Plan', freeUser: 'You are on the Free plan', monthly: 'Monthly', yearly: 'Yearly', monthlyPrice: '¥29.9/month', yearlyPrice: '¥199/year', expires: 'Expires: {date}', benefits: 'All courses + unlimited sandbox + premium prompts + ad-free', orderHistory: 'Order History', noOrders: 'No orders yet', processing: 'Processing...', planFree: 'Free', planMonthly: 'Monthly', planYearly: 'Yearly', priceMonthly: '¥29.9', priceYearly: '¥199', perMonth: '/mo', perYear: '/yr', popular: 'Popular', featureSandbox: 'AI Sandbox', featureSandboxFree: '10/day', featureSandboxPro: '100/day', featureSandboxUnlimited: 'Unlimited', featureModels: 'Models', featureModelsFree: '1 model', featureModelsPro: '2 models', featureModelsPremium: 'All models', featurePrompts: 'Prompts', featurePromptsFree: 'Basic', featurePromptsPro: 'All', featurePromptsPremium: 'All + Exclusive', featureCourses: 'Courses', featureCoursesFree: 'Partial', featureCoursesPro: 'All', featureCoursesPremium: 'All', featureAds: 'Ads', featureAdsFree: 'Ads', featureAdsPro: 'Ad-free', featureAdsPremium: 'Ad-free', dailyQuota: 'Daily Quota', used: '{n} used', subscribe: 'Subscribe', currentPlan_badge: 'Current' },
|
||||
member: { title: 'Membership', desc: 'Manage your subscription', currentPlan: 'Current Plan', freeUser: 'You are on the Free plan', monthly: 'Monthly', yearly: 'Yearly', monthlyPrice: '¥49.9/month', yearlyPrice: '¥299/year', expires: 'Expires: {date}', benefits: 'All courses + unlimited sandbox + premium prompts + ad-free', orderHistory: 'Order History', noOrders: 'No orders yet', processing: 'Processing...', planFree: 'Free', planMonthly: 'Monthly', planYearly: 'Yearly', priceMonthly: '¥49.9', priceYearly: '¥299', perMonth: '/mo', perYear: '/yr', popular: 'Popular', featureSandbox: 'AI Sandbox', featureSandboxFree: '10/day', featureSandboxPro: '100/day', featureSandboxUnlimited: 'Unlimited', featureModels: 'Models', featureModelsFree: '1 model', featureModelsPro: '2 models', featureModelsPremium: 'All models', featurePrompts: 'Prompts', featurePromptsFree: 'Basic', featurePromptsPro: 'All', featurePromptsPremium: 'All + Exclusive', featureCourses: 'Courses', featureCoursesFree: 'Partial', featureCoursesPro: 'All', featureCoursesPremium: 'All', featureAds: 'Ads', featureAdsFree: 'Ads', featureAdsPro: 'Ad-free', featureAdsPremium: 'Ad-free', dailyQuota: 'Daily Quota', used: '{n} used', subscribe: 'Subscribe', currentPlan_badge: 'Current' },
|
||||
compare: { title: 'Compare Lab', desc: 'Compare how different models respond', placeholder: 'Enter a question or prompt to compare...', startCompare: 'Start Compare', comparing: 'Comparing...', backToSandbox: 'Back to Sandbox', noResponse: 'No response' },
|
||||
codeSandbox: { title: 'Code Sandbox', run: 'Run', runShortcut: 'Run (⌘⏎)', template: 'Template...', blank: 'Blank', react: 'React (CDN)', chart: 'Chart (Chart.js)', three: '3D (Three.js)', console: 'Console' },
|
||||
skills: { title: 'Skills', desc: 'Composable AI learning skill modules', search: 'Search skills...', allCategories: 'All Categories', allDifficulties: 'All Levels', beginner: 'Beginner', intermediate: 'Intermediate', advanced: 'Advanced', tasks: 'Practice Tasks', starters: 'Try These', prerequisites: 'Prerequisites', apply: 'Use This Skill', categories: { basic: 'Basic', technical: 'Technical', creative: 'Creative', education: 'Education', advanced: 'Advanced', career: 'Career' } },
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
const zh = {
|
||||
common: { loading: '加载中...', save: '保存', cancel: '取消', delete: '删除', confirm: '确认', search: '搜索', back: '返回', login: '登录', register: '注册', logout: '退出登录', retry: '重试', noData: '暂无数据', viewAll: '查看全部' },
|
||||
nav: { home: '首页', courses: '课程', prompts: '提示词库', sandbox: 'AI 沙盒', discover: '发现', my: '我的', tools: '工具', community: '社区', skills: '技能', models: '模型', articles: '文章' },
|
||||
nav: { home: '首页', courses: '课程', prompts: '提示词库', sandbox: '沙盒', discover: '发现', my: '我的', tools: '工具', community: '社区', skills: '技能', models: '模型', articles: '文章' },
|
||||
home: { badge: '免费 AI 知识社区', heroHighlight: '让每个人', heroRest: '都能用好 AI', desc: '涵盖 AI 通识、提示词工程、沙盒实战、模型百科', startExplore: '开始探索', freeRegister: '免费注册', statTopics: 'AI 专题', statPrompts: '精选提示词', statTools: 'AI 工具评测', statExplorers: '探索者', whyTitle: '为什么选择宇之然？', whyDesc: '四大核心优势，助你快速掌握 AI', featureGuide: '分领域指南', featureGuideDesc: '按职业和场景分类内容，学即所用', featureSandbox: 'AI 沙盒实战', featureSandboxDesc: '内置 AI 对话沙盒，边学边练', featurePrompts: '提示词库', featurePromptsDesc: '精选 200+ 提示词模板', featureUpdate: '持续更新', featureUpdateDesc: '紧跟大模型迭代，内容实时更新', popularTopics: '热门专题', popularDesc: '从入门到精通，系统探索 AI', moduleCount: '{n} 模块', studentCount: '{n} 人关注', openSandbox: '打开沙盒', ctaTitle: '准备好开启 AI 之旅了吗？', ctaDesc: '立即注册，免费探索所有内容' },
|
||||
auth: { loginTitle: '登录', registerTitle: '注册', phone: '手机号', password: '密码', nickname: '昵称', welcomeBack: '欢迎回来', loginSubtitle: '登录继续你的 AI 探索之旅', joinTitle: '加入宇之然', registerSubtitle: '免费注册，开始探索 AI', accountPlaceholder: '手机号 / 邮箱', loggingIn: '登录中...', nicknameOptional: '昵称（选填）', passwordHint: '密码（至少 6 位）', confirmPassword: '确认密码', registering: '注册中...', agreePrefix: '注册即表示同意', termsOfService: '服务协议', privacyPolicy: '隐私政策', aiAgreement: 'AI 服务协议', fillAccountAndPassword: '请填写账号和密码', fillPhoneOrEmail: '请填写手机号或邮箱', fillPassword: '请填写密码', passwordMinLength: '密码至少 6 位', passwordsNotMatch: '两次密码不一致', loginFailed: '登录失败', registerFailed: '注册失败', loginSuccess: '登录成功', registerSuccess: '注册成功' },
|
||||
dashboard: { title: '我的学习', desc: '掌握你的学习进度和统计', inProgressCourses: '学习中课程', completedLessons: '已完成课时', favoritePrompts: '收藏提示词', studyDays: '学习天数', todayLearned: '今日学习', tabProgress: '学习进度', tabFavorites: '收藏夹', tabProfile: '个人设置', noLearningRecords: '还没有学习记录', browseCourses: '浏览课程', learningProgress: '学习进度', lessonCount: '{completed}/{total} 课时 ({progress}%)', noFavorites: '还没有收藏的提示词', browsePrompts: '浏览提示词', profile: '个人资料', nicknameLabel: '昵称', nicknamePlaceholder: '输入昵称', memberPlan: '会员计划', freeUser: '免费用户', memberExpire: '会员到期', joinDate: '注册时间', saveSuccess: '保存成功', saveFailed: '保存失败', loadFailed: '加载数据失败' },
|
||||
@@ -21,9 +21,10 @@ const zh = {
|
||||
notFound: { title: '404', desc: '页面未找到', backToHome: '返回首页' },
|
||||
share: { missingToken: '缺少分享参数', invalidLink: '分享链接无效', notAvailable: '分享内容不可用', expired: '该分享链接可能已过期或不存在', goToSandbox: '前往 AI 沙盒', backToSandbox: 'AI 沙盒', modelInfo: '模型: {model} · {date}' },
|
||||
path: { back: '返回我的', totalProgress: '总进度', taskCount: '{completed}/{total} 任务' },
|
||||
sandbox: { title: 'AI 沙盒', subtitle: '在线体验 AI 对话，边学边练', placeholder: '输入你的问题...', send: '发送', sending: '发送中', newChat: '新对话', history: '历史记录', searchHistory: '搜索历史...', noHistory: '暂无历史记录', sceneGeneral: '通用对话', sceneCoding: '编程助手', sceneWriting: '写作助手', sceneStudy: '学习辅导', sceneEnglish: '英语学习', modelGeneral: '通用模式', modelDeepSeek: 'DeepSeek V4 Flash', advancedParams: '高级参数', temperature: 'Temperature', topP: 'Top P', maxTokens: 'Max Tokens', helpful: '有用', notHelpful: '没用', runInCodeSandbox: '在代码沙盒中运行', shareToCommunity: '分享到社区', copyShareLink: '复制分享链接', linkCopied: '链接已复制', loginForMore: '登录使用更多', dailyQuota: '今日已用 {used} 次，剩余 {remaining} 次', aiReplyDisclaimer: 'AI 回复由人工智能生成，仅供参考。', loginForMoreQuota: '登录后可获得更多使用次数和更多模型选择。', justNow: '刚刚', minutesAgo: '{n} 分钟前', hoursAgo: '{n} 小时前' },
|
||||
sandbox: { title: '沙盒', subtitle: '在线体验 AI 对话，边学边练', placeholder: '输入你的问题...', send: '发送', sending: '发送中', newChat: '新对话', history: '历史记录', searchHistory: '搜索历史...', noHistory: '暂无历史记录', sceneGeneral: '通用对话', sceneCoding: '编程助手', sceneWriting: '写作助手', sceneStudy: '学习辅导', sceneEnglish: '英语学习', modelGeneral: '通用模式', modelDeepSeek: 'DeepSeek V4 Flash', advancedParams: '高级参数', temperature: 'Temperature', topP: 'Top P', maxTokens: 'Max Tokens', helpful: '有用', notHelpful: '没用', runInCodeSandbox: '在代码沙盒中运行', shareToCommunity: '分享到社区', copyShareLink: '复制分享链接', linkCopied: '链接已复制', shareSuccess: '分享成功', shareFailed: '分享失败', loginForMore: '登录使用更多', dailyQuota: '今日已用 {used} 次，剩余 {remaining} 次', aiReplyDisclaimer: 'AI 回复由人工智能生成，仅供参考。', loginForMoreQuota: '登录后可获得更多使用次数和更多模型选择。', justNow: '刚刚', minutesAgo: '{n} 分钟前', hoursAgo: '{n} 小时前',
|
||||
freeMode: '自由模式', learnMode: '学习模式', learnPath: '学习路径', learnPathDesc: '从零到精通，6 步掌握 AI 对话。点击每项文字进入自由模式练习，学会后打钩确认进入下一项', stage: '第 {n} 步', stageProgress: '{done}/{total} 已完成', startPractice: '开始练习', stageDone: '已完成', stageLocked: '未解锁', stageWelcome: 'AI 初体验', stageWelcomeDesc: '了解 AI 能做什么，发起第一次对话', stageScene: '场景实战', stageSceneDesc: '在不同角色场景中练习对话技巧', stageParams: '参数调优', stageParamsDesc: '调节 Temperature 等参数，观察回复变化', stageModels: '模型对比', stageModelsDesc: '切换不同模型，了解各自特点与差异', stagePrompts: '提示词进阶', stagePromptsDesc: '学习角色设定、结构化提示等高级技巧', stageMaster: '综合实战', stageMasterDesc: '综合运用所学，完成一个完整的实战任务', taskSendMsg: '发送第一条消息', taskTryStarter: '尝试一个 Starter 问题', taskReadReply: '理解 AI 回复的特点', taskSwitchCoding: '切换到编程助手场景', taskSwitchWriting: '切换到写作助手场景', taskSwitchStudy: '切换到学习辅导场景', taskHighTemp: '调高 Temperature 到 0.9 试试', taskLowTemp: '调低 Temperature 到 0.1 对比', taskCompareTemp: '对比两次回复的差异', taskSwitchModel: '切换到 DeepSeek 模型', taskCompareModel: '对比不同模型的回复风格', taskRolePrompt: '使用角色设定写一条提示词', taskStructured: '使用结构化提示（步骤化）', taskCodeExec: '在代码沙盒中运行 AI 生成的代码', taskCommunity: '将对话分享到社区', quotaExhausted: '今日免费次数已用完', upgradeNow: '升级会员', quotaUpgradeHint: '升级会员可获得更多使用次数和全部模型', quotaLoginHint: '登录后可获得更多免费使用次数' },
|
||||
learning: { analytics: '学情分析', analyticsDesc: '基于 AI 沙盒对话分析你的学习情况', path: '学习路径', pathDesc: '从入门到精通，系统掌握 AI 技能', totalSessions: 'AI 对话次数', domainsCovered: '涉及知识领域', avgMastery: '平均掌握度', knowledgeDomains: '知识领域覆盖', weakAreas: '薄弱环节', weakDesc: '以下领域你较少涉及，建议加强学习：', recommendations: '推荐学习', recDesc: '根据你的薄弱环节推荐以下内容', toStrengthen: '待加强', conversations: '{count} 次对话', clickToGo: '点击前往' },
|
||||
member: { title: '会员中心', desc: '管理你的会员订阅', currentPlan: '当前会员', freeUser: '你当前是免费用户', monthly: '月卡会员', yearly: '年卡会员', monthlyPrice: '开通月卡 ¥29.9/月', yearlyPrice: '开通年卡 ¥199/年', expires: '到期时间：{date}', benefits: '会员权益：全部课程 + 不限次沙箱 + 专属提示词库 + 去广告', orderHistory: '订单记录', noOrders: '暂无订单记录', processing: '处理中...', planFree: '免费', planMonthly: '月卡', planYearly: '年卡', priceMonthly: '¥29.9', priceYearly: '¥199', perMonth: '/月', perYear: '/年', popular: '最受欢迎', featureSandbox: 'AI 沙盒', featureSandboxFree: '10 次/日', featureSandboxPro: '100 次/日', featureSandboxUnlimited: '不限次', featureModels: '模型选择', featureModelsFree: '1 个模型', featureModelsPro: '2 个模型', featureModelsPremium: '全部模型', featurePrompts: '提示词库', featurePromptsFree: '基础', featurePromptsPro: '全部', featurePromptsPremium: '全部 + 专属', featureCourses: '课程学习', featureCoursesFree: '部分免费', featureCoursesPro: '全部', featureCoursesPremium: '全部', featureAds: '广告', featureAdsFree: '有广告', featureAdsPro: '去广告', featureAdsPremium: '去广告', dailyQuota: '日配额用量', used: '已用 {n} 次', subscribe: '开通', currentPlan_badge: '当前方案' },
|
||||
member: { title: '会员中心', desc: '管理你的会员订阅', currentPlan: '当前会员', freeUser: '你当前是免费用户', monthly: '月卡会员', yearly: '年卡会员', monthlyPrice: '开通月卡 ¥49.9/月', yearlyPrice: '开通年卡 ¥299/年', expires: '到期时间：{date}', benefits: '会员权益：全部课程 + 不限次沙箱 + 专属提示词库 + 去广告', orderHistory: '订单记录', noOrders: '暂无订单记录', processing: '处理中...', planFree: '免费', planMonthly: '月卡', planYearly: '年卡', priceMonthly: '¥49.9', priceYearly: '¥299', perMonth: '/月', perYear: '/年', popular: '最受欢迎', featureSandbox: 'AI 沙盒', featureSandboxFree: '10 次/日', featureSandboxPro: '100 次/日', featureSandboxUnlimited: '不限次', featureModels: '模型选择', featureModelsFree: '1 个模型', featureModelsPro: '2 个模型', featureModelsPremium: '全部模型', featurePrompts: '提示词库', featurePromptsFree: '基础', featurePromptsPro: '全部', featurePromptsPremium: '全部 + 专属', featureCourses: '课程学习', featureCoursesFree: '部分免费', featureCoursesPro: '全部', featureCoursesPremium: '全部', featureAds: '广告', featureAdsFree: '有广告', featureAdsPro: '去广告', featureAdsPremium: '去广告', dailyQuota: '日配额用量', used: '已用 {n} 次', subscribe: '开通', currentPlan_badge: '当前方案' },
|
||||
compare: { title: '对比实验室', desc: '同题对比不同模型的表现', placeholder: '输入你想对比的问题或提示词...', startCompare: '开始对比', comparing: '对比中...', backToSandbox: '返回沙箱', noResponse: '无响应' },
|
||||
codeSandbox: { title: '代码沙盒', run: '运行', runShortcut: '运行 (⌘⏎)', template: '模板...', blank: '空白', react: 'React (CDN)', chart: '图表 (Chart.js)', three: '3D (Three.js)', console: '控制台输出' },
|
||||
skills: { title: '技能库', desc: '可组合的 AI 学习技能模块', search: '搜索技能...', allCategories: '全部分类', allDifficulties: '全部难度', beginner: '入门', intermediate: '中级', advanced: '高级', tasks: '练习任务', starters: '试试这些问题', prerequisites: '前置技能', apply: '使用此技能', categories: { basic: '基础', technical: '技术', creative: '创意', education: '教育', advanced: '进阶', career: '职业' } },
|
||||
|
||||
Reference in New Issue
Block a user