fix(web): 恢复移动端 Header 的 GitHub/X 链接 (#81)
* 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 登录态临时代码
This commit is contained in:
+5
-2
@@ -1313,6 +1313,7 @@ export default function HomePage() {
|
|||||||
const [authModalOpen, setAuthModalOpen] = useState(false);
|
const [authModalOpen, setAuthModalOpen] = useState(false);
|
||||||
const [pendingAction, setPendingAction] = useState<"start" | null>(null);
|
const [pendingAction, setPendingAction] = useState<"start" | null>(null);
|
||||||
|
|
||||||
|
|
||||||
const styleRow = OPTS.findIndex((o) => o.modal);
|
const styleRow = OPTS.findIndex((o) => o.modal);
|
||||||
const voiceRow = OPTS.findIndex((o) => o.label === "语音配音");
|
const voiceRow = OPTS.findIndex((o) => o.label === "语音配音");
|
||||||
const paceRow = OPTS.findIndex((o) => o.label === "内容节奏");
|
const paceRow = OPTS.findIndex((o) => o.label === "内容节奏");
|
||||||
@@ -1652,7 +1653,7 @@ export default function HomePage() {
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
aria-label="GitHub"
|
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" />
|
<i className="fa-brands fa-github" />
|
||||||
</a>
|
</a>
|
||||||
@@ -1661,7 +1662,7 @@ export default function HomePage() {
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
aria-label="X / Twitter"
|
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" />
|
<i className="fa-brands fa-x-twitter" />
|
||||||
</a>
|
</a>
|
||||||
@@ -1776,6 +1777,8 @@ export default function HomePage() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{/* 使用提示:可被用户永久关闭(localStorage:infiplot:hintClosed) */}
|
{/* 使用提示:可被用户永久关闭(localStorage:infiplot:hintClosed) */}
|
||||||
{!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">
|
<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">
|
||||||
|
|||||||
@@ -59,21 +59,21 @@ export function UserChip({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setMenuOpen((v) => !v)}
|
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 ? (
|
{avatarUrl ? (
|
||||||
<img
|
<img
|
||||||
src={avatarUrl}
|
src={avatarUrl}
|
||||||
alt=""
|
alt=""
|
||||||
className="h-5 w-5 rounded-full object-cover"
|
className="h-4 w-4 rounded-full object-cover"
|
||||||
referrerPolicy="no-referrer"
|
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}
|
{initial}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
<span className="max-w-[100px] truncate">{label}</span>
|
|
||||||
</button>
|
</button>
|
||||||
{menuOpen && (
|
{menuOpen && (
|
||||||
<>
|
<>
|
||||||
|
|||||||
Reference in New Issue
Block a user