fix(profile-edit): 改善编辑页文案，让普通用户知道每个字段填什么

longsizhuo · longsizhuo · commit dddffee81878 · 2026-04-16T17:49:46.000Z
用户反馈"编辑个人主页这地方不知道 edit 什么，不懂 papers 是什么意思"。
根因是字段名是工程师视角（bio/tagline/pinned_papers），普通用户不理解。

改动：
- 编辑页顶部加一段"About this page"总说明：填的东西去哪里显示、全都可选
- 每个 Section 从只有 SEC 编号，扩成「SEC 编号 + 中文大标题 + 一句话描述」
- PAPERS 块重命名为"最近在读 / 推荐的论文"（papers 太学术，降低理解门槛）
- placeholder 从抽象（"项目名"）换成具体示例（"involutionhell.com"）
- IDENTITY/LINKS/PROJECTS/PAPERS 4 块都加 heading + description 说明作用

主页空态文案：
- 旧："该用户还没有填写 projects / papers"（用户反馈看不懂）
- 新："Ta 还没填个人项目和最近在读的论文" + 小字补充"仍会显示 GitHub repos 和文档贡献"
diff --git a/app/u/[username]/edit/EditProfileForm.tsx b/app/u/[username]/edit/EditProfileForm.tsx
@@ -222,32 +222,56 @@ export function EditProfileForm({ targetIdentifier }: Props) {
 
   return (
     <form onSubmit={handleSubmit} className="flex flex-col gap-10">
+      {/* 编辑页顶部总说明：告诉用户这个页面都干什么 */}
+      <div className="border border-[var(--foreground)] bg-[var(--background)] p-6 text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed">
+        <div className="font-mono text-[10px] uppercase tracking-widest text-neutral-500 mb-2">
+          About this page
+        </div>
+        <p>
+          这里填的内容会显示在你的个人主页{" "}
+          <code className="font-mono text-[#CC0000]">
+            /u/{user?.githubId ?? user?.username ?? "你"}
+          </code>{" "}
+          上，让别人知道你是谁、做什么、在读什么。全部字段都是
+          <strong> 可选</strong>，填哪个显示哪个；不填主页就只显示 GitHub
+          基础信息 + 贡献统计。
+        </p>
+      </div>
+
       {/* Section 1: 基础 */}
-      <Section title="SEC. 01 · IDENTITY">
-        <Field label="Tagline（一行小标题，如 research focus）">
+      <Section
+        title="SEC. 01 · IDENTITY"
+        heading="关于你自己"
+        description="一句小标题 + 一段自我介绍，会显示在主页左侧大块最上方。相当于你在站内的名片。"
+      >
+        <Field label="一句话标签（tagline，80 字以内）">
           <input
             type="text"
             value={prefs.tagline}
             onChange={(e) => setPrefs({ ...prefs, tagline: e.target.value })}
             maxLength={80}
-            placeholder="e.g. LLM Safety / Scaling Laws"
+            placeholder="比如：LLM Safety 方向 · UNSW 在读 / 全栈搞着玩 / 找暑期实习中"
             className="w-full border border-[var(--foreground)] bg-[var(--background)] px-3 py-2 font-mono text-sm"
           />
         </Field>
-        <Field label="Bio（一段话自我介绍，建议 80-200 字）">
+        <Field label="自我介绍（bio，80-200 字较合适）">
           <textarea
             value={prefs.bio}
             onChange={(e) => setPrefs({ ...prefs, bio: e.target.value })}
             rows={4}
             maxLength={500}
-            placeholder="介绍你是谁、在做什么、想认识什么人。"
+            placeholder="你是谁、在做什么、感兴趣的方向。举例：我是 xxx，读研在做 LLM 对齐，平时写写文档和小工具。想认识做 RLHF / 评估 / infra 的朋友。"
             className="w-full border border-[var(--foreground)] bg-[var(--background)] px-3 py-2 font-serif text-sm leading-relaxed resize-y"
           />
         </Field>
       </Section>
 
       {/* Section 2: Links */}
-      <Section title="SEC. 02 · LINKS">
+      <Section
+        title="SEC. 02 · LINKS"
+        heading="外部链接"
+        description="想让大家跟你联系 / 了解你的其他地方。最多 5 条，会显示在主页左侧大块底部，以小按钮形式展示。"
+      >
         <RepeatableList
           items={prefs.links}
           onChange={(items) => setPrefs({ ...prefs, links: items })}
@@ -259,14 +283,14 @@ export function EditProfileForm({ targetIdentifier }: Props) {
                 type="text"
                 value={item.label}
                 onChange={(e) => update({ ...item, label: e.target.value })}
-                placeholder="Label (GitHub / Blog / Twitter)"
+                placeholder="按钮上显示的字，如 Blog / Twitter / 知乎"
                 className="border border-[var(--foreground)] bg-[var(--background)] px-3 py-2 font-mono text-xs uppercase"
               />
               <input
                 type="url"
                 value={item.url}
                 onChange={(e) => update({ ...item, url: e.target.value })}
-                placeholder="https://..."
+                placeholder="https://your-blog.com"
                 className="border border-[var(--foreground)] bg-[var(--background)] px-3 py-2 font-mono text-xs"
               />
             </div>
@@ -275,7 +299,11 @@ export function EditProfileForm({ targetIdentifier }: Props) {
       </Section>
 
       {/* Section 3: Projects */}
-      <Section title="SEC. 03 · PROJECTS">
+      <Section
+        title="SEC. 03 · PROJECTS"
+        heading="你自己的项目"
+        description="想展示的个人项目 / 玩具 / 开源作品。GitHub 公开 repos 会自动出现在主页底部，这里填 GitHub 里没有或想单独强调的。最多 8 条。"
+      >
         <RepeatableList
           items={prefs.projects}
           onChange={(items) => setPrefs({ ...prefs, projects: items })}
@@ -287,7 +315,7 @@ export function EditProfileForm({ targetIdentifier }: Props) {
                 type="text"
                 value={item.title}
                 onChange={(e) => update({ ...item, title: e.target.value })}
-                placeholder="项目名"
+                placeholder="项目名，如 involutionhell.com"
                 className="border border-[var(--foreground)] bg-[var(--background)] px-3 py-2 font-serif text-sm font-bold"
               />
               <textarea
@@ -296,14 +324,14 @@ export function EditProfileForm({ targetIdentifier }: Props) {
                   update({ ...item, description: e.target.value })
                 }
                 rows={2}
-                placeholder="一段描述"
+                placeholder="一两句说明做了什么、解决什么问题。hover 时会展开显示"
                 className="border border-[var(--foreground)] bg-[var(--background)] px-3 py-2 font-sans text-xs resize-y"
               />
               <input
                 type="url"
                 value={item.url}
                 onChange={(e) => update({ ...item, url: e.target.value })}
-                placeholder="项目链接"
+                placeholder="项目链接（GitHub repo / 产品首页）"
                 className="border border-[var(--foreground)] bg-[var(--background)] px-3 py-2 font-mono text-xs"
               />
               <input
@@ -318,16 +346,20 @@ export function EditProfileForm({ targetIdentifier }: Props) {
                       .filter(Boolean),
                   })
                 }
-                placeholder="tags，逗号分隔（TypeScript, LLM, RL）"
+                placeholder="技术栈标签，逗号分隔。例如 TypeScript, Next.js, LLM"
                 className="border border-[var(--foreground)] bg-[var(--background)] px-3 py-2 font-mono text-xs"
               />
             </div>
           )}
         />
       </Section>
 
-      {/* Section 4: Papers */}
-      <Section title="SEC. 04 · PINNED PAPERS">
+      {/* Section 4: Papers — 重命名为"最近在读 / 推荐的论文"，用户更能理解 */}
+      <Section
+        title="SEC. 04 · PAPERS"
+        heading="最近在读 / 推荐的论文"
+        description="你最近读到觉得值得分享的论文（学术 / 技术博客都行）。可以填 Zotero itemKey 自动补齐信息，也可以手动填标题作者年份。不是必填，没有就留空。"
+      >
         <RepeatableList
           items={prefs.pinned_papers}
           onChange={(items) => setPrefs({ ...prefs, pinned_papers: items })}
@@ -418,16 +450,31 @@ export function EditProfileForm({ targetIdentifier }: Props) {
 
 function Section({
   title,
+  heading,
+  description,
   children,
 }: {
+  /** 左上角的 SEC 编号，全大写英文 */
   title: string;
+  /** 大号中文标题，让用户一眼知道这是什么 */
+  heading: string;
+  /** 一两句话解释这块填什么、填了之后主页哪里会显示 */
+  description: string;
   children: React.ReactNode;
 }) {
   return (
     <section className="border border-[var(--foreground)] p-6 lg:p-8 flex flex-col gap-4">
-      <div className="font-mono text-[10px] uppercase tracking-widest text-neutral-500 border-b border-[var(--foreground)] pb-3">
-        {title}
-      </div>
+      <header className="border-b border-[var(--foreground)] pb-3 flex flex-col gap-1">
+        <div className="font-mono text-[10px] uppercase tracking-widest text-neutral-500">
+          {title}
+        </div>
+        <h2 className="font-serif text-xl font-black text-[var(--foreground)]">
+          {heading}
+        </h2>
+        <p className="text-xs text-neutral-600 dark:text-neutral-400 leading-relaxed">
+          {description}
+        </p>
+      </header>
       {children}
     </section>
   );
diff --git a/app/u/[username]/page.tsx b/app/u/[username]/page.tsx
@@ -393,8 +393,12 @@ export default async function UserProfilePage({ params }: Param) {
                 />
               ))}
               {projects.length === 0 && papers.length === 0 && (
-                <div className="col-span-full border border-dashed border-[var(--foreground)] p-10 text-center text-neutral-500 font-mono text-sm">
-                  该用户还没有填写 projects / papers。
+                <div className="col-span-full border border-dashed border-[var(--foreground)] p-10 text-center text-neutral-500 font-sans text-sm leading-relaxed">
+                  Ta 还没填个人项目和最近在读的论文。
+                  <br />
+                  <span className="text-xs text-neutral-400">
+                    （下方仍会显示 GitHub 公开 repos 和文档贡献记录）
+                  </span>
                 </div>
               )}
             </div>
