重构前端 Wave0-2 体验基线(05-28-frontend-ux-redesign)
这个提交包含在:
@@ -135,8 +135,8 @@ export function Topbar() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="sticky top-0 z-10 border-b border-slate-200/80 bg-white/94 px-4 py-3 shadow-[0_4px_14px_rgba(15,23,42,0.035)] sm:px-8">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<header className="app-topbar sticky top-0 z-10 px-4 py-2.5 sm:px-8">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<Dialog open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
|
||||
<DialogTrigger asChild>
|
||||
@@ -164,9 +164,11 @@ export function Topbar() {
|
||||
</Dialog>
|
||||
|
||||
<div className="min-w-0">
|
||||
<div className="text-xs font-bold uppercase tracking-[0.2em] text-primary/70">{pageMeta.group}</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2">
|
||||
<p className="truncate text-lg font-semibold text-[var(--color-text-primary)]">{pageMeta.title}</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<p className="truncate text-base font-semibold text-[var(--color-text-primary)] md:text-lg">{pageMeta.title}</p>
|
||||
<span className="hidden rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-[var(--color-text-secondary)] sm:inline-flex">
|
||||
{pageMeta.group}
|
||||
</span>
|
||||
{wecomEntry ? (
|
||||
<span
|
||||
className="badge-neutral border-primary-200 bg-primary-50 text-primary"
|
||||
@@ -176,7 +178,7 @@ export function Topbar() {
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-[var(--color-text-secondary)]">{me ? `你好,${me.name}` : "欢迎进入海音达工作台"}</div>
|
||||
<div className="mt-0.5 text-xs text-[var(--color-text-secondary)]">{me ? `${me.name} · 当前工作区` : "海音达 OA"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -187,10 +189,11 @@ export function Topbar() {
|
||||
type="button"
|
||||
onClick={() => setSearchOpen(true)}
|
||||
data-testid="global-search-trigger"
|
||||
className="hidden md:inline-flex"
|
||||
className="app-command-button hidden md:inline-flex"
|
||||
>
|
||||
<span className="material-symbols-outlined mr-1 text-[18px]">search</span>
|
||||
搜索
|
||||
<span className="ml-2 rounded bg-white px-1.5 py-0.5 text-[11px] text-slate-500">Ctrl K</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
@@ -199,7 +202,7 @@ export function Topbar() {
|
||||
type="button"
|
||||
onClick={() => setSearchOpen(true)}
|
||||
data-testid="global-search-trigger-mobile"
|
||||
className="md:hidden"
|
||||
className="app-command-button md:hidden"
|
||||
aria-label="打开搜索"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">search</span>
|
||||
@@ -213,7 +216,7 @@ export function Topbar() {
|
||||
aria-label="通知"
|
||||
type="button"
|
||||
data-testid="notifications-bell"
|
||||
className="relative"
|
||||
className="app-command-button relative"
|
||||
>
|
||||
<BellIcon />
|
||||
{unreadCount > 0 ? (
|
||||
|
||||
在新工单中引用
屏蔽一个用户