feat(web): 设计规范与 uhd_web 同步(截至 2026-10-08)

- 材质统一边光:slab / float / pill / pill-selected / seg-thumb / chrome-side 改为左上亮右下暗的 1px 边光 + 外侧暗线;新增 lens / field / chip 参数与 pg-float-modal
- 主按钮:转动光谱环改为静态左上光谱高光,悬停沿边扫过一小段;次按钮同为 lens 玻璃
- Input / Textarea / SelectTrigger 挂 .field-glass,原生下拉与实体选择器同步;对话框按钮行 gap-3
- 提示条改 pg-float(状态色只在图标、展开不叠放);新增 GlassTooltip 接管 title 提示
- 触屏判断 input-modality.ts、touch / hover 自定义变体;animate-pg-pop 改 backwards;scroll-fade-end
- 控制台外壳:侧栏无硬分隔线、折叠开关进标志行;顶栏去磨砂,右侧控件收进玻璃胶囊
- 登录页居中单卡 auth-card;详情头图「订阅」改回普通主按钮,删除 pill-solid;发现页海报角标改 glass-chip-media
- 引入 simple-liquid-glass(liquid-surface.tsx);更新 docs/design 三份规范与 CHANGELOG

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei

apps/web/app/routes/console/files.tsx

@@ -843,7 +843,7 @@ export default function FilesPage() {
         aria-label="排序"
         value={sort}
         onChange={(e) => patch({ sort: e.target.value === "name" ? null : e.target.value })}
-        className="h-8 rounded-lg border border-input bg-transparent px-2 text-caption"
+        className="field-glass h-8 rounded-xl px-2 text-caption"
       >
         {SORT_OPTIONS.map((o) => (
           <option key={o.value} value={o.value}>

apps/web/app/routes/console/layout.tsx

@@ -1,5 +1,5 @@
 import type { SessionInfo } from "@umt/contracts";
-import { ChevronLeft, ChevronRight, Clapperboard, LoaderCircle, Menu } from "lucide-react";
+import { Clapperboard, LoaderCircle, Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Link, Outlet, useLocation, useMatches } from "react-router";
 import { useSession } from "~/api/auth.ts";
@@ -10,6 +10,7 @@ import { AgentLauncher, AgentNavEntry } from "~/components/console/agent-launche
 import { ErrorState } from "~/components/console/empty-state.tsx";
 import { InboxBell } from "~/components/console/inbox-bell.tsx";
 import { findNavItem, NAV_GROUPS, type NavGroup, pageTitle } from "~/components/console/nav.ts";
+import { LiquidSurface } from "~/components/liquid-surface.tsx";
 import PrismLeak from "~/components/prism-leak.tsx";
 import { CommandPalette } from "~/components/search/command-palette.tsx";
 import { SearchTrigger } from "~/components/search/search-trigger.tsx";
@@ -129,19 +130,13 @@ function CollapsedNav() {
   );
 }
 
-function Brand({ collapsed = false }: { collapsed?: boolean }) {
+function Brand({ className }: { className?: string }) {
   return (
-    <Link
-      to="/console"
-      className={cn(
-        "flex items-center transition-opacity hover:opacity-80",
-        collapsed ? "w-full justify-center" : "gap-2",
-      )}
-    >
-      <span className="grid h-7 w-7 place-items-center rounded-lg pill-selected">
+    <Link to="/console" className={cn("flex items-center gap-2 transition-opacity hover:opacity-80", className)}>
+      <span className="grid h-7 w-7 shrink-0 place-items-center rounded-lg pill-selected">
         <Clapperboard className="h-4 w-4" />
       </span>
-      {!collapsed && <p className="text-xs font-bold tracking-wide text-foreground">UHD Media Tool</p>}
+      <p className="truncate text-xs font-bold tracking-wide text-foreground">UHD Media Tool</p>
     </Link>
   );
 }
@@ -186,27 +181,47 @@ function ConsoleShell({ session }: { session: SessionInfo }) {
       <PrismLeak className="-z-10" />
 
       {/* 桌面端侧栏 */}
+      {/* 侧栏贴边,不做浮起卡片;右边不画硬分隔线,由 pg-chrome-side 给内侧细亮边、外侧细暗线和淡投影 */}
       <aside
         className={cn(
-          "pg-chrome pg-chrome-side fixed inset-y-0 left-0 z-30 hidden flex-col border-r transition-all duration-layout select-none xl:flex",
+          "pg-chrome pg-chrome-side fixed inset-y-0 left-0 z-30 hidden flex-col transition-all duration-layout select-none xl:flex",
           collapsed ? "w-[60px]" : "w-60",
         )}
       >
-        <button
-          type="button"
-          onClick={() => setCollapsed((v) => !v)}
-          className="absolute top-3 -right-4 z-40 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-[var(--shell-border)] bg-background text-muted-foreground shadow-md transition-all duration-base hover:scale-110 hover:bg-foreground/[0.04] hover:text-foreground"
-          title={collapsed ? "展开侧边栏" : "收起侧边栏"}
-        >
-          {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
-        </button>
+        {/* 标志行 + 折叠开关:展开时开关在名称右侧;收起后只剩标志,悬停换成展开图标,点一下展开 */}
         <div
           className={cn(
-            "flex h-14 shrink-0 items-center border-b border-[var(--shell-border)]",
-            collapsed ? "justify-center px-0" : "px-4",
+            "flex h-14 shrink-0 items-center border-b border-[var(--shell-border)] transition-all duration-layout",
+            collapsed ? "justify-center px-0" : "gap-2 pr-2 pl-4",
           )}
         >
-          <Brand collapsed={collapsed} />
+          {collapsed ? (
+            <button
+              type="button"
+              onClick={() => setCollapsed(false)}
+              title="展开侧边栏"
+              aria-label="展开侧边栏"
+              className="group/logo relative grid h-9 w-9 cursor-pointer place-items-center rounded-full transition-colors duration-base hover:bg-foreground/[0.06]"
+            >
+              <span className="grid h-7 w-7 place-items-center rounded-lg pill-selected transition-opacity duration-base group-hover/logo:opacity-0">
+                <Clapperboard className="h-4 w-4" />
+              </span>
+              <PanelLeftOpen className="absolute h-[18px] w-[18px] text-muted-foreground opacity-0 transition-opacity duration-base group-hover/logo:opacity-100" />
+            </button>
+          ) : (
+            <>
+              <Brand className="min-w-0 flex-1" />
+              <button
+                type="button"
+                onClick={() => setCollapsed(true)}
+                title="收起侧边栏"
+                aria-label="收起侧边栏"
+                className="grid h-8 w-8 shrink-0 cursor-pointer place-items-center rounded-full text-muted-foreground transition-colors duration-base hover:bg-foreground/[0.06] hover:text-foreground"
+              >
+                <PanelLeftClose className="h-[18px] w-[18px]" />
+              </button>
+            </>
+          )}
         </div>
         {collapsed ? <CollapsedNav /> : <ExpandedNav groups={NAV_GROUPS} />}
       </aside>
@@ -218,7 +233,9 @@ function ConsoleShell({ session }: { session: SessionInfo }) {
           collapsed ? "xl:ml-[60px]" : "xl:ml-60",
         )}
       >
-        <header className="pg-chrome sticky top-0 z-20 flex h-14 items-center border-b px-4 md:px-6">
+        {/* 顶栏不铺磨砂(磨砂栏会成为背景根,里面的玻璃糊不到页面):页面底色渐隐托住标题,
+            右侧通知、智能体、日夜切换与账户收进一枚玻璃胶囊 */}
+        <header className="sticky top-0 z-20 flex h-14 items-center bg-gradient-to-b from-background/90 via-background/60 to-transparent px-4 md:px-6">
           <div className="flex min-w-0 items-center gap-3">
             <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
               <SheetTrigger asChild>
@@ -239,11 +256,15 @@ function ConsoleShell({ session }: { session: SessionInfo }) {
           </div>
           <div className="ml-auto flex items-center gap-2">
             <SearchTrigger />
-            {/* 桌面有侧栏主入口与右下角悬浮按钮,顶栏小按钮只在窄屏保留 */}
-            <InboxBell />
-            <AgentDrawerTrigger className="xl:hidden" />
-            <ThemeToggle />
-            <AccountMenu session={session} />
+            <LiquidSurface tier="regular" radius={20} noRefraction style={{ width: "auto", height: "auto" }}>
+              <div className="flex items-center gap-0.5 p-1">
+                <InboxBell bare />
+                {/* 桌面有侧栏主入口与右下角悬浮按钮,顶栏的智能体按钮只在窄屏保留 */}
+                <AgentDrawerTrigger className="xl:hidden" />
+                <ThemeToggle bare />
+                <AccountMenu session={session} bare />
+              </div>
+            </LiquidSurface>
           </div>
         </header>
 

apps/web/app/routes/console/library.$id.tsx

@@ -1179,8 +1179,8 @@ export default function LibraryDetailPage() {
           <>
             {e.status !== "merged" ? (
               <>
-                {/* 头图区唯一的主操作:实心;其余保持描边 */}
-                <Button variant="solid" size="sm" onClick={() => setSubscribing(true)}>
+                {/* 头图区唯一的主操作(棱镜高光);其余是次操作 */}
+                <Button size="sm" onClick={() => setSubscribing(true)}>
                   <CalendarPlus />
                   订阅
                 </Button>

apps/web/app/routes/console/media.tmdb.$type.$id.tsx

@@ -133,8 +133,8 @@ function Detail({ d }: { d: TmdbMediaDetail }) {
         badges={<InventoryBadges inv={d.inventory} />}
         actions={
           <>
-            {/* 头图区唯一的主操作:实心;其余保持描边 */}
-            <Button variant="solid" size="sm" onClick={() => setSubscribing(true)}>
+            {/* 头图区唯一的主操作(棱镜高光);其余是次操作 */}
+            <Button size="sm" onClick={() => setSubscribing(true)}>
               <CalendarPlus />
               订阅
             </Button>

apps/web/app/routes/login.tsx

@@ -77,10 +77,7 @@ function IconInput({
   return (
     <div className="relative">
       <Icon className="pointer-events-none absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-      <Input
-        className={cn("h-12 rounded-lg pl-10 text-control md:text-control", trailing && "pr-11", className)}
-        {...props}
-      />
+      <Input className={cn("h-12 pl-10 text-control md:text-control", trailing && "pr-11", className)} {...props} />
       {trailing ? <div className="absolute top-1/2 right-1.5 -translate-y-1/2">{trailing}</div> : null}
     </div>
   );
@@ -229,14 +226,15 @@ export default function LoginPage() {
         ? useRecovery
           ? "输入一个没用过的恢复码，用过即作废。"
           : "输入身份验证器里的 6 位验证码。"
-        : "使用管理员账号登录，会话 12 小时有效。";
+        : null;
 
   return (
     <div className="relative isolate flex min-h-screen flex-col overflow-x-hidden bg-background">
       <div className="pointer-events-none fixed inset-0 -z-10 bg-page-glow" />
       <PrismLeak className="-z-10" />
 
-      <header className="pg-chrome sticky top-0 z-20 flex h-14 items-center border-b px-4 md:px-6">
+      {/* 顶栏不铺磨砂:页面底上只有标志和日夜切换(单颗按钮不套胶囊) */}
+      <header className="sticky top-0 z-20 flex h-14 items-center bg-gradient-to-b from-background/90 via-background/60 to-transparent px-4 md:px-6">
         <div className="flex items-center gap-2">
           <span className="grid h-7 w-7 place-items-center rounded-lg pill-selected">
             <Clapperboard className="h-4 w-4" />
@@ -248,29 +246,11 @@ export default function LoginPage() {
         </div>
       </header>
 
-      <main className="mx-auto grid w-full max-w-6xl flex-1 items-center gap-10 px-4 py-10 md:px-6 lg:grid-cols-[minmax(0,1fr)_23.5rem] lg:py-16">
-        {/* 左侧品牌区(纯装饰,仅桌面) */}
-        <section className="hidden lg:block">
-          <p className="text-label font-semibold tracking-[0.18em] text-muted-foreground uppercase">媒体自动化</p>
-          <h1 className="mt-3 max-w-xl font-display text-display-sm leading-tight font-semibold text-foreground">
-            订阅、下载、整理
-          </h1>
-          <p className="mt-4 max-w-lg text-lead text-muted-foreground">每一步都有记录。拿不准的会停下来等你决定。</p>
-          <ul className="mt-8 space-y-3 text-body text-muted-foreground">
-            <li className="flex items-center gap-2.5">
-              <ShieldCheck className="h-4 w-4 text-foreground/70" />
-              单管理员登录，外部程序走 API Key
-            </li>
-            <li className="flex items-center gap-2.5">
-              <LockKeyhole className="h-4 w-4 text-foreground/70" />
-              凭证加密存储，页面不回显
-            </li>
-          </ul>
-        </section>
-
-        <section className="pg-slab w-full rounded-2xl p-6 sm:p-7">
-          <h2 className="text-title font-semibold tracking-tight text-foreground">{title}</h2>
-          <p className="mt-1 text-caption text-muted-foreground">{subtitle}</p>
+      {/* 整页居中一张卡,只放标题和表单,桌面与手机同一套;手机卡片常比屏幕高,从顶栏下方往下排,宽屏才居中 */}
+      <main className="mx-auto flex w-full max-w-md flex-1 flex-col justify-start px-4 pt-6 pb-10 sm:px-0 md:justify-center md:pb-16">
+        <section className="pg-slab auth-card w-full rounded-3xl p-7 motion-safe:animate-blur-in sm:p-8">
+          <h1 className="text-headline-xs font-semibold tracking-tight text-foreground">{title}</h1>
+          {subtitle ? <p className="mt-1 text-caption text-muted-foreground">{subtitle}</p> : null}
 
           {mode === "setup" ? (
             <div className="mt-4 flex gap-2.5 rounded-lg border border-border bg-foreground/[0.03] p-3 text-meta text-muted-foreground">