From dc08f64ec1418301de891faeaa9428d283c5d448 Mon Sep 17 00:00:00 2001
From: Zonghao Yuan <64521992+zonghaoyuan@users.noreply.github.com>
Date: Mon, 15 Jun 2026 15:28:24 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E6=81=A2=E5=A4=8D=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=20Header=20=E7=9A=84=20GitHub/X=20=E9=93=BE?=
 =?UTF-8?q?=E6=8E=A5=20(#81)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(web): restore GitHub/X links in mobile header

上一个 PR (#80) 为缓解 Header 移动端拥挤，给 GitHub/X 图标加了
hidden sm:inline-flex，导致手机端（<640px）看不到这两个入口。
横向溢出的真正元凶（导入按钮负偏移）已在 #80 修复，Header 全显示
不会重新引入左右滑动，故恢复图标在所有视口常驻显示。

* fix(web): 移动端 UserChip 只显示头像，宽度与其他图标按钮对齐

登录态 UserChip 之前是「头像 + 名字」的宽按钮（≈90px），
是齿轮/GitHub/X 图标按钮（≈16px）的 5-6 倍，导致 Header
右侧集群宽度在登录/未登录切换时剧烈变化，所有按钮位置大幅偏移。

改动：
- 去掉名字显示，只保留头像圆圈
- 头像尺寸 h-5→h-4（16px，与图标按钮一致）
- 按钮 padding 收窄至 p-0.5（总宽≈22px）
- 加 title 属性保留完整用户名（hover 可见）
- 移除开发过程中使用的 mock 登录态临时代码
---
 app/page.tsx            | 7 +++++--
 components/UserChip.tsx | 8 ++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 2833abf..256b514 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1313,6 +1313,7 @@ export default function HomePage() {
   const [authModalOpen, setAuthModalOpen] = useState(false);
   const [pendingAction, setPendingAction] = useState<"start" | null>(null);
 
+
   const styleRow = OPTS.findIndex((o) => o.modal);
   const voiceRow = OPTS.findIndex((o) => o.label === "语音配音");
   const paceRow = OPTS.findIndex((o) => o.label === "内容节奏");
@@ -1652,7 +1653,7 @@ export default function HomePage() {
             target="_blank"
             rel="noopener noreferrer"
             aria-label="GitHub"
-            className="hidden sm:inline-flex text-lg text-clay-500 hover:text-ember-500 transition-colors"
+            className="inline-flex text-lg text-clay-500 hover:text-ember-500 transition-colors"
           >
             <i className="fa-brands fa-github" />
           </a>
@@ -1661,7 +1662,7 @@ export default function HomePage() {
             target="_blank"
             rel="noopener noreferrer"
             aria-label="X / Twitter"
-            className="hidden sm:inline-flex text-base text-clay-500 hover:text-ember-500 transition-colors"
+            className="inline-flex text-base text-clay-500 hover:text-ember-500 transition-colors"
           >
             <i className="fa-brands fa-x-twitter" />
           </a>
@@ -1776,6 +1777,8 @@ export default function HomePage() {
             ))}
           </div>
 
+
+
           {/* 使用提示：可被用户永久关闭（localStorage:infiplot:hintClosed） */}
           {!hintClosed && (
             <div className="relative mx-auto mt-10 md:mt-12 max-w-[640px] rounded-sm border border-clay-900/10 bg-cream-100/50 px-5 md:px-8 py-3.5">
diff --git a/components/UserChip.tsx b/components/UserChip.tsx
index 2f47fdd..a06b969 100644
--- a/components/UserChip.tsx
+++ b/components/UserChip.tsx
@@ -59,21 +59,21 @@ export function UserChip({
       <button
         type="button"
         onClick={() => setMenuOpen((v) => !v)}
-        className="flex items-center gap-2 rounded-full border border-cream-50/15 bg-cream-50/[0.06] pl-1.5 pr-3 py-1 text-[11px] text-cream-50/80 transition-colors hover:bg-cream-50/[0.12]"
+        className="flex items-center justify-center rounded-full border border-cream-50/15 bg-cream-50/[0.06] p-0.5 text-cream-50/80 transition-colors hover:bg-cream-50/[0.12]"
+        title={label}
       >
         {avatarUrl ? (
           <img
             src={avatarUrl}
             alt=""
-            className="h-5 w-5 rounded-full object-cover"
+            className="h-4 w-4 rounded-full object-cover"
             referrerPolicy="no-referrer"
           />
         ) : (
-          <span className="flex h-5 w-5 items-center justify-center rounded-full bg-[rgba(175,138,72,0.6)] text-[10px] font-medium text-cream-50">
+          <span className="flex h-4 w-4 items-center justify-center rounded-full bg-[rgba(175,138,72,0.6)] text-[9px] font-medium text-cream-50">
             {initial}
           </span>
         )}
-        <span className="max-w-[100px] truncate">{label}</span>
       </button>
       {menuOpen && (
         <>