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/components/console/account-menu.tsx

@@ -17,7 +17,7 @@ import {
 import { Input } from "~/components/ui/input.tsx";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover.tsx";
 import { errorMessage, LOGIN_PATH } from "~/lib/api.ts";
-import { formatDateTime } from "~/lib/utils.ts";
+import { cn, formatDateTime } from "~/lib/utils.ts";
 import { FormField, zodFieldErrors } from "./form-field.tsx";
 
 const PasswordForm = PasswordChangeRequest.extend({ confirm: z.string() }).refine((v) => v.newPassword === v.confirm, {
@@ -107,7 +107,8 @@ function ChangePasswordDialog({ open, onOpenChange }: { open: boolean; onOpenCha
 }
 
 /** 右上角账户弹层:当前身份、会话到期、改密、二次验证、登出 */
-export function AccountMenu({ session }: { session: SessionInfo }) {
+/** bare:放在顶栏的玻璃胶囊里时触发器不自带玻璃 */
+export function AccountMenu({ session, bare = false }: { session: SessionInfo; bare?: boolean }) {
   const [open, setOpen] = useState(false);
   const [pwdOpen, setPwdOpen] = useState(false);
   const navigate = useNavigate();
@@ -128,7 +129,15 @@ export function AccountMenu({ session }: { session: SessionInfo }) {
     <>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
-          <Button variant="outline" size="sm" className="max-w-40" aria-label="账户">
+          <Button
+            variant={bare ? "ghost" : "outline"}
+            size="sm"
+            className={cn(
+              "max-w-40",
+              bare && "data-[state=open]:bg-foreground/[0.08] data-[state=open]:text-foreground",
+            )}
+            aria-label="账户"
+          >
             <UserRound />
             <span className="hidden truncate sm:inline">{actor?.name ?? "账户"}</span>
           </Button>

apps/web/app/components/console/inbox-bell.tsx

@@ -71,7 +71,8 @@ function Group({
   );
 }
 
-export function InboxBell() {
+/** bare:放在顶栏的玻璃胶囊里时触发器不自带玻璃 */
+export function InboxBell({ bare = false }: { bare?: boolean }) {
   const q = useAttention();
   const [open, setOpen] = useState(false);
   const navigate = useNavigate();
@@ -83,7 +84,13 @@ export function InboxBell() {
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button variant="outline" size="icon-sm" className="relative" aria-label={label} title={label}>
+        <Button
+          variant={bare ? "ghost" : "outline"}
+          size="icon-sm"
+          className={cn("relative", bare && "data-[state=open]:bg-foreground/[0.08] data-[state=open]:text-foreground")}
+          aria-label={label}
+          title={label}
+        >
           <Bell className="h-4 w-4" />
           {total ? (
             <span className="absolute -top-0.5 -right-0.5 min-w-4 rounded-full bg-primary px-1 text-center text-micro leading-4 font-semibold text-primary-foreground tabular-nums">

apps/web/app/components/console/status-badge.tsx

@@ -14,10 +14,13 @@ const TONE: Record<StatusTone, { box: string; dot: string }> = {
 /** 状态徽章:文字必填,不只靠颜色传达状态 */
 export function StatusBadge({
   tone = "neutral",
+  onMedia = false,
   children,
   className,
 }: {
   tone?: StatusTone;
+  /** 压在海报 / 剧照上:换成烟色小玻璃(glass-chip-media)白字,状态色只留在圆点上 */
+  onMedia?: boolean;
   children: ReactNode;
   className?: string;
 }) {
@@ -25,12 +28,15 @@ export function StatusBadge({
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-meta font-medium whitespace-nowrap",
-        t.box,
+        "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-meta font-medium whitespace-nowrap",
+        onMedia ? "glass-chip-media" : ["border", t.box],
         className,
       )}
     >
-      <span aria-hidden className={cn("h-1.5 w-1.5 rounded-full", t.dot)} />
+      <span
+        aria-hidden
+        className={cn("h-1.5 w-1.5 rounded-full", onMedia && tone === "neutral" ? "bg-current opacity-70" : t.dot)}
+      />
       {children}
     </span>
   );