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
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
d842bb7fb4
commit
09a2adb637
38 files changed
+941
-356
No files matched your search
@@ -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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user