RECS-WEB-MODLE-REACT/app/character/page.tsx

"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import data from "../data/content-templates.json";
import styles from "./CharacterDetail.module.css";

const character = data.character;

export default function CharacterDetailPage() {
  const [favorite, setFavorite] = useState(false);
  const [tags, setTags] = useState<string[]>(character.tags);
  const [newTag, setNewTag] = useState("");
  const [note, setNote] = useState("第 09 话需要加强她主动提出关闭穹顶照明的动机铺垫。\n与遥的冲突不能只停留在信息差，需要落到选择差异。 ");
  const [editingNote, setEditingNote] = useState(false);
  const [activeTab, setActiveTab] = useState("overview");
  const [toast, setToast] = useState("");

  useEffect(() => {
    try {
      const saved = window.localStorage.getItem("star-character-detail");
      if (saved) {
        const parsed = JSON.parse(saved);
        setFavorite(Boolean(parsed.favorite));
        if (Array.isArray(parsed.tags)) setTags(parsed.tags);
        if (typeof parsed.note === "string") setNote(parsed.note);
      }
    } catch { /* use JSON defaults */ }
  }, []);

  useEffect(() => {
    window.localStorage.setItem("star-character-detail", JSON.stringify({ favorite, tags, note }));
  }, [favorite, tags, note]);

  const notify = (message: string) => {
    setToast(message);
    window.setTimeout(() => setToast(""), 2100);
  };

  const addTag = () => {
    const value = newTag.trim();
    if (!value || tags.includes(value)) return;
    setTags((current) => [...current, value]);
    setNewTag("");
    notify(`已添加标签「${value}」`);
  };

  return (
    <div className={styles.page}>
      <header className={styles.topbar}>
        <Link className={styles.brand} href="/"><span>S</span><strong>STELLAR<br /><small>CHARACTER DATABASE</small></strong></Link>
        <nav><Link href="/simple-list">简单列表</Link><Link className={styles.active} href="/character">角色详情</Link><Link href="/markdown">Markdown 编辑器</Link></nav>
        <div className={styles.headerActions}><button onClick={() => notify("搜索为模板交互占位")}>⌕</button><button onClick={() => notify("分享链接已复制（演示）")}>↗</button><span>林</span></div>
      </header>

      <section className={styles.cover}>
        <div className={styles.coverImage} />
        <div className={styles.coverShade} />
        <div className={styles.coverInner}>
          <div className={styles.breadcrumb}><Link href="/">模板首页</Link><span>/</span><Link href="/simple-list">角色资料库</Link><span>/</span><strong>{character.name}</strong></div>
          <div className={styles.identity}>
            <p>{character.code}</p><h1>{character.name}</h1><span>{character.nameEn}</span><blockquote>“{character.quote}”</blockquote>
          </div>
          <button className={favorite ? styles.following : styles.follow} onClick={() => { setFavorite((value) => !value); notify(favorite ? "已取消收藏" : "已收藏角色"); }}>{favorite ? "✓ 已收藏" : "＋ 收藏角色"}</button>
        </div>
      </section>

      <main className={styles.content}>
        <aside className={styles.profileCard}>
          <div className={styles.portrait} role="img" aria-label="天野澪角色形象"><span>主角</span></div>
          <div className={styles.profileBody}>
            <p>{character.role}</p>
            <dl>
              <div><dt>年龄</dt><dd>{character.age} 岁</dd></div><div><dt>生日</dt><dd>{character.birthday}</dd></div><div><dt>身高</dt><dd>{character.height}</dd></div><div><dt>声优</dt><dd>{character.voice}</dd></div><div><dt>所属</dt><dd>{character.affiliation}</dd></div>
            </dl>
            <button onClick={() => notify("角色编辑表单为模板交互占位")}>编辑基础资料</button>
          </div>
        </aside>

        <div className={styles.mainColumn}>
          <nav className={styles.tabs}>{[["overview","角色概览"],["setting","能力设定"],["timeline","剧情轨迹"]].map(([id,label]) => <button key={id} className={activeTab === id ? styles.tabActive : ""} onClick={() => setActiveTab(id)}>{label}</button>)}</nav>

          {activeTab === "overview" && <>
            <section className={styles.panel}><header><div><span>PROFILE</span><h2>角色简介</h2></div><button onClick={() => notify("编辑器为模板交互占位")}>编辑</button></header><p className={styles.bio}>{character.bio}</p><div className={styles.keyFacts}><div><small>核心动机</small><strong>寻找十二年前讯号的来源</strong></div><div><small>外部目标</small><strong>让城市重新看见星空</strong></div><div><small>内在冲突</small><strong>理性判断与情感信任</strong></div></div></section>
            <section className={styles.panel}><header><div><span>RELATIONSHIPS</span><h2>人物关系</h2></div><button onClick={() => notify("关系图为模板交互占位")}>查看关系图</button></header><div className={styles.relations}>{character.relations.map((item) => <article key={item.name}><span className={styles[item.tone]}>{item.initial}</span><p><strong>{item.name}</strong><small>{item.relation}</small></p><button>→</button></article>)}</div></section>
          </>}

          {activeTab === "setting" && <>
            <section className={styles.panel}><header><div><span>PERSONAL ATTRIBUTES</span><h2>人物能力值</h2></div><small>设定集 v2.4</small></header><div className={styles.traits}>{character.traits.map((trait) => <div key={trait.label}><p><span>{trait.label}</span><strong>{trait.value}</strong></p><i><b style={{width:`${trait.value}%`}} /></i></div>)}</div></section>
            <section className={styles.panel}><header><div><span>SPECIAL SKILLS</span><h2>技能与专长</h2></div></header><div className={styles.skills}>{character.skills.map((skill) => <article key={skill.name}><span>{skill.level}</span><p><strong>{skill.name}</strong><small>{skill.description}</small></p></article>)}</div></section>
          </>}

          {activeTab === "timeline" && <section className={styles.panel}><header><div><span>STORY TIMELINE</span><h2>剧情轨迹</h2></div><button onClick={() => notify("已切换为按剧集排序")}>按剧集排序</button></header><div className={styles.timeline}>{character.timeline.map((item,index) => <article key={item.episode}><i>{index+1}</i><div><span>{item.episode} · {item.type}</span><strong>{item.title}</strong></div><button>查看剧集 →</button></article>)}</div></section>}
        </div>

        <aside className={styles.sideColumn}>
          <section className={styles.tagPanel}><header><div><span>TAGS</span><h2>角色标签</h2></div><small>{tags.length} 个</small></header><div className={styles.tags}>{tags.map((tag,index) => <span className={index < 2 ? styles.importantTag : ""} key={tag}>#{tag}<button onClick={() => setTags((current) => current.filter((item) => item !== tag))}>×</button></span>)}</div><form onSubmit={(event) => {event.preventDefault();addTag();}}><input value={newTag} onChange={(event) => setNewTag(event.target.value)} placeholder="输入新标签" /><button type="submit">添加</button></form><p>标签保存在当前浏览器，可用于筛选、归类和快速检索。</p></section>

          <section className={styles.notePanel}><header><div><span>PRIVATE NOTE</span><h2>创作备注</h2></div><button onClick={() => { setEditingNote((value) => !value); if (editingNote) notify("备注已保存"); }}>{editingNote ? "保存" : "编辑"}</button></header>{editingNote ? <textarea value={note} onChange={(event) => setNote(event.target.value)} autoFocus /> : <p>{note}</p>}<small>仅当前设备可见 · 自动保存</small></section>

          <section className={styles.versionPanel}><span>v2.4</span><div><strong>角色设定已同步</strong><small>最后更新：今天 14:32 · 林知夏</small></div><button onClick={() => notify("版本记录为模板交互占位")}>记录</button></section>
        </aside>
      </main>
      {toast && <div className={styles.toast}>✓　{toast}</div>}
    </div>
  );
}