yuanzonghao
8eda27f241
PR #9 已完成首页和 layout 的视觉品牌迁移，此 commit 补齐剩余的 技术性改名 —— workspace 包名、source import、localStorage 键、 CSS keyframe、内部 header logo、.env.example、README。 - @yume/* → @infiplot/* (6 package.json + 17 imports + lockfile) - localStorage/sessionStorage: yume:* → infiplot:* (含 PR #9 新增的 yume:hintClosed) - CSS keyframe yume-ripple → infiplot-ripple - new/play 页面 header logo "云梦" → "InfiPlot" - 代码注释中的「云梦」style 形容词删除（layout.tsx, page.tsx） - 根 package.json name + description（描述跟齐 staging "AI 实时交互剧情游戏"） - README: tagline / Vercel deploy URL / 目录树 / engine 描述 保留：prompts.ts 的 LLM 体裁术语「视觉小说/galgame」、CustomForm placeholder 的「视觉小说画风」（图像模型识别的风格名词）。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
export function CustomForm() {
|
|
const router = useRouter();
|
|
const [worldSetting, setWorldSetting] = useState("");
|
|
const [styleGuide, setStyleGuide] = useState("");
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
const canSubmit =
|
|
worldSetting.trim().length > 10 &&
|
|
styleGuide.trim().length > 5 &&
|
|
!submitting;
|
|
|
|
function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!canSubmit) return;
|
|
setSubmitting(true);
|
|
sessionStorage.setItem(
|
|
"infiplot:custom",
|
|
JSON.stringify({ worldSetting, styleGuide }),
|
|
);
|
|
router.push("/play?custom=1");
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-12 animate-fade-in">
|
|
<div>
|
|
<label className="flex items-baseline justify-between mb-4">
|
|
<span className="text-[10px] smallcaps text-clay-700 font-medium">
|
|
<span className="text-clay-400 mr-2 font-serif italic not-italic font-normal">
|
|
①
|
|
</span>
|
|
World · 世界观
|
|
</span>
|
|
<span className="text-[10px] text-clay-400 num">
|
|
{worldSetting.length}
|
|
</span>
|
|
</label>
|
|
<textarea
|
|
value={worldSetting}
|
|
onChange={(e) => setWorldSetting(e.target.value)}
|
|
rows={6}
|
|
placeholder="例：1990 年代末的中国南方县城。主角是高三转学生，在多雨的六月遇到一个总在天台读诗的同学。剧情慢热、含蓄、带点伤感⋯"
|
|
className="w-full bg-transparent border-0 border-b border-clay-900/20 px-0 py-3 text-clay-900 font-serif text-lg leading-[1.7] focus:outline-none focus:border-clay-700 transition-colors resize-none placeholder:font-serif placeholder:italic placeholder:text-base placeholder:leading-[1.7]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex items-baseline justify-between mb-4">
|
|
<span className="text-[10px] smallcaps text-clay-700 font-medium">
|
|
<span className="text-clay-400 mr-2 font-serif italic not-italic font-normal">
|
|
②
|
|
</span>
|
|
Style · 画风
|
|
</span>
|
|
<span className="text-[10px] text-clay-400 num">
|
|
{styleGuide.length}
|
|
</span>
|
|
</label>
|
|
<textarea
|
|
value={styleGuide}
|
|
onChange={(e) => setStyleGuide(e.target.value)}
|
|
rows={4}
|
|
placeholder="例：水彩柔光，午后暖意，动漫视觉小说画风，传统对话面板⋯"
|
|
className="w-full bg-transparent border-0 border-b border-clay-900/20 px-0 py-3 text-clay-900 font-serif text-lg leading-[1.7] focus:outline-none focus:border-clay-700 transition-colors resize-none placeholder:font-serif placeholder:italic placeholder:text-base placeholder:leading-[1.7]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="pt-6 flex items-center justify-between">
|
|
<span className="text-[10px] smallcaps text-clay-500">
|
|
{submitting
|
|
? "正在唤起第一帧…"
|
|
: canSubmit
|
|
? "准 · 备 · 就 · 绪"
|
|
: "两 · 段 · 即 · 可 · 开 · 场"}
|
|
</span>
|
|
<button
|
|
type="submit"
|
|
disabled={!canSubmit}
|
|
className="group flex items-center gap-3 text-[10px] smallcaps text-clay-900 disabled:text-clay-300 disabled:cursor-not-allowed enabled:hover:text-ember-500 transition-colors duration-300"
|
|
>
|
|
开 始
|
|
<span className="w-10 h-px bg-current transition-all duration-300 group-enabled:group-hover:w-16" />
|
|
<i className="fa-solid fa-arrow-right text-[9px]" />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|