1
import Nav from "./Nav.jsx";
2
import PageHeading from "./PageHeading.jsx";
3
import AnimatedCardGrid from "./AnimatedCardGrid.jsx";
4

5
export default function HomePage({ current, onNavigate }) {
6
  return (
7
    <AnimatedCardGrid className="dashboard-grid">
8
      ...
9
      <article className="hero-stage panel-full">
10
        <Nav current={current} onNavigate={onNavigate} />
11
        <PageHeading title="关于我" subtitle="项目，创意，灵感，心得，我的作品" />
12
      </article>
13
      ...
14
  );
15
}

1
// 网站要显示的"内容"，全都集中在这里。
2
// 想改标题、改文案、加作品？只动这个文件，组件代码一个字都不用碰。
3
// 这就是"数据与界面分离"：组件只管"怎么显示"，site.js 只管"显示什么"。
4

5
// 现在这些值写死在文件里，是因为还没有接入后端。
6
// 等接入后端，可以改成从网络接口实时取——而组件那边照样一个字都不用动。
7

8
export const home = {
9
  heroTitle: "关于我",
10
  heroSubtitle: "项目，创意，灵感，心得，我的作品",
11
  featuredWork: {
12
    kicker: "作品",
13
    title: "文字实验室",
14
    copy: "拼音和情绪，挖掘中文里的细节",
15
    linkLabel: "打开作品",
16
  },
17
  identity: {
18
    motto: "已识乾坤大，尤怜草木青",
19
    learning: "零到全栈",
20
  },
21
};
22

23
export const textLab = {
24
  heroTitle: "文字实验室",
25
  heroSubtitle: "拼音和情绪，挖掘中文里的细节",
26
};

1
import { useState } from "react";
2

3
// 文字实验室的"输入区"卡片。
4
// 这一节它多了一个"会变的值"：text——这就是 state。
5
//   · text 是这个组件自己揣着的值，出生时带着一段默认文字；
6
//   · 用户每打一个字、删一个字，text 就变；
7
//   · text 一变，下面那行"已输入 N 字"当场跟着跳——
8
//     你连一句"找到那个元素再去改它"都不用写，React 自己刷。
9
export default function InputCard() {
10
  const [text, setText] = useState("今天的风很轻，适合把脑海里的想法慢慢写下来。");
11

12
  return (
13
    <article className="panel panel-half lab-panel card">
14
      <div className="panel-heading">
15
        <p className="section-kicker">输入区</p>
16
        <h3>贴一段中文</h3>
17
      </div>
18
      <form className="lab-form" onSubmit={(e) => e.preventDefault()}>
19
        <label htmlFor="text-input">文本内容</label>
20
        <textarea
21
          id="text-input"
22
          rows="8"
23
          placeholder="例如：生活没有标准答案，但每一天都值得认真感受。"
24
          value={text}
25
          onChange={(e) => setText(e.target.value)}
26
        />
27
        {/* state 现身：text 一变，这行数字自动跟着变 */}
28
        <p className="lab-count">已输入 {text.length} 字</p>
29
        <button className="primary-button" type="button">开始分析</button>
30
      </form>
31
    </article>
32
  );
33
}

1
import HomePage from "./components/HomePage.jsx";
2
import TextLabPage from "./components/TextLabPage.jsx";
3
import { useRoute } from "./router/useRoute.js";
4

5
export default function App() {
6
  // 上一节中，"现在在哪一页"记在内存（useState）里——一刷新就被打回首页。
7
  // 这一节换成 useRoute：把"在哪一页"读自 / 写入浏览器地址栏。
8
  const { path, navigate } = useRoute();
9

10
  // 看地址栏决定显示哪一页：/text-lab → 文字实验室；其它（含 /）→ 个人主页
11
  const current = path.startsWith("/text-lab") ? "textlab" : "home";
12

13
  // 点导航 → 改地址栏（而不再是改内存里的值）
14
  const onNavigate = (key) => navigate(key === "textlab" ? "/text-lab" : "/");
15

16
  return (
17
    <div className="app-shell">
18
      <div className="page-shell">
19
        <main className="page-content">
20
          {current === "home"
21
            ? <HomePage current={current} onNavigate={onNavigate} />
22
            : <TextLabPage current={current} onNavigate={onNavigate} />}
23
        </main>
24
      </div>
25
    </div>
26
  );
27
}

1
import { useEffect, useState } from "react";
2

3
// 一个非常小的"路由"，干三件事：
4
//   - 读浏览器地址栏的 path，决定显示哪一页（一刷新还在这一页）
5
//   - 提供一个 navigate(path)，点导航时把"在哪一页"写进地址栏
6
//   - 用户按浏览器前进 / 后退，界面也跟着变
7
//
8
// 关键就在于：上一节把"在哪一页"记在内存里（一刷新就丢）；
9
// 这一版把它换成"写在网址里"——网址刷新不丢、能整条复制、能前进后退。
10
//
11
// 这一版"够用但糙"：自己手写、要兼顾的边角不少。真实项目里大家不手搓，
12
// 而是用现成的库（叫 react-router）；再往后 Next.js 会用"文件夹=路由"把它整个替掉。
13
export function useRoute() {
14
  const [path, setPath] = useState(window.location.pathname);
15

16
  useEffect(() => {
17
    const handler = () => setPath(window.location.pathname);
18
    window.addEventListener("popstate", handler);
19
    return () => window.removeEventListener("popstate", handler);
20
  }, []);
21

22
  function navigate(to) {
23
    if (to === path) return;
24
    window.history.pushState({}, "", to);
25
    setPath(to);
26
  }
27

28
  return { path, navigate };
29
}