+
{open && (
-
+
{items.map((it, i) => (
))}
-
)}
@@ -265,102 +314,80 @@ function StyleModal({
}, []);
const close = () => {
setShown(false);
- setTimeout(onClose, 300);
+ setTimeout(onClose, 280);
};
const list = items.map((name, i) => ({ name, i })).filter((x) => x.name.includes(q.trim()));
return (
-
-
e.stopPropagation()}>
-
-
-
- 选择绘画风格
-
默认「自动」· 由模型根据 prompt 判断风格
+
+
e.stopPropagation()}
+ className={
+ "flex w-[1000px] max-w-[94vw] max-h-[86vh] flex-col overflow-hidden rounded-sm border border-clay-900/15 bg-cream-50 shadow-2xl shadow-clay-900/25 transition-all duration-300 " +
+ (shown ? "opacity-100 scale-100" : "opacity-0 scale-95")
+ }
+ >
+
+
+ 选择绘画风格
+
+ 默认「自动」· 由模型根据 prompt 判断风格
+
-
+
setQ(e.target.value)}
placeholder="搜索风格…"
autoFocus
+ className="h-10 w-full rounded-sm border border-clay-900/15 bg-cream-100 pl-4 pr-10 font-sans text-sm text-clay-900 outline-none transition-colors focus:border-ember-500 placeholder:text-clay-400"
/>
- ⌕
+
-
-
+
{list.map(({ name, i }) => (
-
{
onPick(i);
close();
}}
+ className={
+ "flex h-20 items-center justify-center rounded-sm border px-3 text-center transition-all " +
+ (i === value
+ ? "border-ember-500 bg-ember-500/5 text-ember-500"
+ : "border-clay-900/12 text-clay-700 hover:border-clay-900/35 hover:bg-cream-100")
+ }
>
-
-
{name}
-
+
{name}
+
))}
- {list.length === 0 &&
没有匹配的风格
}
+ {list.length === 0 && (
+
+ 没有匹配的风格
+
+ )}
);
}
-/* ---------- scale-to-fit hero canvas ---------- */
-
-function HeroCanvas({ children }: { children: React.ReactNode }) {
- const stageRef = useRef
(null);
- const canvasRef = useRef(null);
-
- useLayoutEffect(() => {
- const fit = () => {
- const stage = stageRef.current;
- const canvas = canvasRef.current;
- if (!stage || !canvas) return;
- // scale to fit width; clamp so very wide screens don't pixel-up the design
- const s = Math.min(1, stage.clientWidth / HERO_CANVAS_W);
- canvas.style.transform = `scale(${s})`;
- stage.style.height = HERO_CANVAS_H * s + "px";
- };
- fit();
- window.addEventListener("resize", fit);
- const ro = new ResizeObserver(fit);
- if (stageRef.current) ro.observe(stageRef.current);
- return () => {
- window.removeEventListener("resize", fit);
- ro.disconnect();
- };
- }, []);
-
- return (
-
- );
-}
-
/* ---------- page ---------- */
export default function HomePage() {
@@ -370,23 +397,64 @@ export default function HomePage() {
const [open, setOpen] = useState(-1);
const [styleOpen, setStyleOpen] = useState(false);
const [prompt, setPrompt] = useState("");
- const inputRef = useRef(null);
+ const inputRef = useRef(null);
+
+ // 顶部使用提示：默认展示，用户可点 × 永久关闭（localStorage:yume:hintClosed）。
+ const [hintClosed, setHintClosed] = useState(false);
const styleRow = OPTS.findIndex((o) => o.modal);
const genderIndex = sel[0] ?? 0;
- const gender = (OPTS[0]!.items[genderIndex] as "男性向" | "女性向") ?? "男性向";
+ const gender = (OPTS[0]!.items[genderIndex] as Gender) ?? "男性向";
const phrases = EXAMPLE_PHRASES[gender];
+ // 性向切换时，整片瀑布流做淡出→换图→淡入的过渡（而非瞬切）。
+ const [galleryGender, setGalleryGender] = useState(gender);
+ const [fading, setFading] = useState(false);
+ useEffect(() => {
+ if (gender === galleryGender) return;
+ setFading(true);
+ const t = setTimeout(() => {
+ setGalleryGender(gender);
+ setFading(false);
+ }, 280);
+ return () => clearTimeout(t);
+ }, [gender, galleryGender]);
+
/* close any open dropdown on outside click */
useEffect(() => {
const h = (e: MouseEvent) => {
const target = e.target as HTMLElement | null;
- if (!target?.closest?.(".ip-cat")) setOpen(-1);
+ if (!target?.closest?.("[data-cat]")) setOpen(-1);
};
document.addEventListener("mousedown", h);
return () => document.removeEventListener("mousedown", h);
}, []);
+ useEffect(() => {
+ try {
+ if (localStorage.getItem("yume:hintClosed") === "1") setHintClosed(true);
+ } catch {
+ /* ignore */
+ }
+ }, []);
+
+ // 输入框随内容自动增高：长文本整段可见（打字与点卡片填入都覆盖）。
+ useEffect(() => {
+ const el = inputRef.current;
+ if (!el) return;
+ el.style.height = "auto";
+ el.style.height = `${el.scrollHeight}px`;
+ }, [prompt]);
+
+ const closeHint = () => {
+ setHintClosed(true);
+ try {
+ localStorage.setItem("yume:hintClosed", "1");
+ } catch {
+ /* ignore */
+ }
+ };
+
const start = () => {
const userPrompt = prompt.trim();
const artStyle = OPTS[1]!.items[sel[1] ?? 0]!;
@@ -420,6 +488,9 @@ export default function HomePage() {
// 「自动」→ fall back to 二次元 (project default). Plain prompts like
// "由模型自动判断画风" are not understood by FLUX — it just paints them
// literally, so we'd rather lock in a sensible default.
+ // TODO(自动路由): 后续实现真正的「自动」——由模型依据世界观 / 玩家 prompt
+ // 选出最合适的画风，再映射到对应风格提示词，而非固定回退到二次元。届时
+ // 同步更新风格弹窗副标题（「由模型根据 prompt 判断风格」）使文案与行为一致。
const effectiveStyle = artStyle === "自动" ? "二次元" : artStyle;
const styleGuide = styleMap[effectiveStyle] ?? styleMap["二次元"]!;
const audioEnabled = voice === "开启";
@@ -436,196 +507,228 @@ export default function HomePage() {
inputRef.current?.focus();
};
- return (
-
- {/* ================== HERO (scale-to-fit 1900×980 canvas) ================== */}
-
- {/* tagline */}
-
+ const stories = STORIES[galleryGender];
+ const imgPrefix = galleryGender === "女性向" ? "f" : "m";
- {/* prompt bar */}
-
+ return (
+
+ {/* ================== HEADER ================== */}
+
+
+ {/* ================== HERO 控制区（居中，呼应原型布局） ================== */}
+
+
+
+ 今天想体验什么故事？
+
+
+ {/* prompt 输入（居中） */}
- ) : (
-