OrgTJWater/next-tjwater-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refine mobile workbench sheets

Browse Source
This commit is contained in:
jiang
2026-07-27 12:56:03 +08:00
parent f0485ca86e
commit f8c79a2af3
12 changed files with 114 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/agent/components/agent-command-panel.tsx
+24 -14
View File
@@ -2,7 +2,6 @@ import {
Activity,
CheckCircle2,
ChevronsUpDown,
ChevronDown,
ChevronLeft,
DatabaseZap,
History,
@@ -16,7 +15,8 @@ import {
Shield,
ShieldCheck,
Square,
Volume2
Volume2,
X
} from "lucide-react";
import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react";
import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
@@ -292,19 +292,29 @@ export function AgentCommandPanel({
>
<History size={17} aria-hidden="true" />
</button>
<button
type="button"
aria-label={presentation === "mobile-sheet" ? "关闭 Agent 面板" : "折叠 Agent 面板"}
title={presentation === "mobile-sheet" ? "关闭 Agent 面板" : "折叠 Agent 面板"}
onClick={onCollapse}
className="agent-panel-icon-button grid h-9 w-9 shrink-0 place-items-center rounded-xl text-slate-600 transition"
>
{presentation === "mobile-sheet" ? (
<ChevronDown size={17} aria-hidden="true" />
) : (
{presentation === "mobile-sheet" ? (
<button
type="button"
aria-label="关闭 Agent 面板"
title="关闭 Agent 面板"
onClick={onCollapse}
className="group grid h-10 w-10 shrink-0 place-items-center rounded-full text-slate-500"
>
<span className="surface-control grid h-9 w-9 place-items-center rounded-full shadow-[inset_0_0_0_1px_rgba(148,163,184,0.26),0_4px_12px_rgba(15,33,55,0.10)] transition-[color,background-color,scale] group-active:scale-95 [@media(hover:hover)]:group-hover:bg-blue-50 [@media(hover:hover)]:group-hover:text-blue-700">
<X size={17} strokeWidth={2.25} aria-hidden="true" />
</span>
</button>
) : (
<button
type="button"
aria-label="折叠 Agent 面板"
title="折叠 Agent 面板"
onClick={onCollapse}
className="agent-panel-icon-button grid h-9 w-9 shrink-0 place-items-center rounded-xl text-slate-600 transition"
>
<ChevronLeft size={17} aria-hidden="true" />
)}
</button>
</button>
)}
</div>
<AnimatePresence initial={false}>
{historyOpen ? (
src/features/workbench/components/mobile-workbench-sheet-layout.ts
+2 -6
View File
@@ -1,21 +1,17 @@
import { WORKBENCH_LAYOUT } from "../layout/workbench-layout";
export type MobileWorkbenchSheetSnap = "peek" | "half" | "full";
export type MobileWorkbenchSheetSnap = "half" | "full";
export function getMobileWorkbenchSheetHeight(
snap: MobileWorkbenchSheetSnap,
viewportHeight: number
) {
if (snap === "peek") {
return WORKBENCH_LAYOUT.mobileSheet.peekHeight;
}
if (snap === "half") {
return Math.round(viewportHeight * WORKBENCH_LAYOUT.mobileSheet.halfViewportRatio);
}
return Math.max(
WORKBENCH_LAYOUT.mobileSheet.peekHeight,
Math.round(viewportHeight * WORKBENCH_LAYOUT.mobileSheet.halfViewportRatio),
viewportHeight - WORKBENCH_LAYOUT.mobileSheet.fullTopGap
);
}
src/features/workbench/components/mobile-workbench-sheet.test.ts
+1 -2
View File
@@ -2,8 +2,7 @@ import { describe, expect, it } from "vitest";
import { getMobileWorkbenchSheetHeight } from "./mobile-workbench-sheet-layout";
describe("mobile workbench sheet heights", () => {
it("keeps the three deterministic snap heights", () => {
expect(getMobileWorkbenchSheetHeight("peek", 844)).toBe(96);
it("keeps the two deterministic snap heights", () => {
expect(getMobileWorkbenchSheetHeight("half", 844)).toBe(439);
expect(getMobileWorkbenchSheetHeight("full", 844)).toBe(776);
});
src/features/workbench/components/mobile-workbench-sheet.tsx
+7 -30
View File
@@ -6,7 +6,6 @@ import {
type PointerEvent,
type ReactNode
} from "react";
import { X } from "lucide-react";
import { cn } from "@/shared/ui/cn";
import {
getMobileWorkbenchSheetHeight,
@@ -22,11 +21,9 @@ type MobileWorkbenchSheetProps = {
onClose: () => void;
children: ReactNode;
className?: string;
closing?: boolean;
onCloseComplete?: () => void;
};
const SNAP_ORDER: MobileWorkbenchSheetSnap[] = ["peek", "half", "full"];
const SNAP_ORDER: MobileWorkbenchSheetSnap[] = ["half", "full"];
export function MobileWorkbenchSheet({
label,
@@ -34,9 +31,7 @@ export function MobileWorkbenchSheet({
onSnapChange,
onClose,
children,
className,
closing = false,
onCloseComplete
className
}: MobileWorkbenchSheetProps) {
const pointerStartRef = useRef<{ y: number; height: number } | null>(null);
const draggedRef = useRef(false);
@@ -87,7 +82,7 @@ export function MobileWorkbenchSheet({
draggedRef.current = true;
}
const minHeight = getMobileWorkbenchSheetHeight("peek", window.innerHeight);
const minHeight = getMobileWorkbenchSheetHeight("half", window.innerHeight);
const maxHeight = getMobileWorkbenchSheetHeight("full", window.innerHeight);
setDragHeight(Math.min(maxHeight, Math.max(minHeight, start.height + delta)));
}
@@ -134,7 +129,7 @@ export function MobileWorkbenchSheet({
if (event.key === "Home") {
event.preventDefault();
onSnapChange("peek");
onSnapChange("half");
return;
}
@@ -150,17 +145,11 @@ export function MobileWorkbenchSheet({
data-snap={snap}
className={cn(
"mobile-workbench-sheet acrylic-panel pointer-events-auto absolute bottom-0 left-0 right-0 z-40 flex min-h-0 flex-col overflow-hidden rounded-t-[20px] border-x border-t transition-[height] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none lg:hidden",
closing && "pointer-events-none",
className
)}
style={{ height: closing ? 0 : (dragHeight ?? restingHeight) }}
onTransitionEnd={(event) => {
if (closing && event.propertyName === "height" && event.target === event.currentTarget) {
onCloseComplete?.();
}
}}
style={{ height: dragHeight ?? restingHeight }}
>
<div className="relative flex h-7 shrink-0 items-center">
<div className="flex h-7 shrink-0 items-center">
<button
type="button"
aria-label={`${label}高度，当前${getSnapLabel(snap)}`}
@@ -173,14 +162,6 @@ export function MobileWorkbenchSheet({
>
<span className="h-1 w-10 rounded-full bg-slate-400/70 transition-[width,background-color] group-focus-visible:w-12 group-focus-visible:bg-blue-600" />
</button>
<button
type="button"
aria-label={`关闭${label}`}
className="absolute right-2 grid h-7 w-7 place-items-center rounded-lg text-slate-500 transition hover:bg-blue-50 hover:text-blue-700"
onClick={onClose}
>
<X size={15} aria-hidden="true" />
</button>
</div>
<div className="min-h-0 flex-1 overscroll-contain">{children}</div>
</section>
@@ -205,14 +186,10 @@ function getClosestSnap(height: number, viewportHeight: number): MobileWorkbench
getMobileWorkbenchSheetHeight(closest, viewportHeight) - height
);
return candidateDistance < closestDistance ? candidate : closest;
}, "peek");
}, "half");
}
function getSnapLabel(snap: MobileWorkbenchSheetSnap) {
if (snap === "peek") {
return "预览档";
}
if (snap === "half") {
return "半屏档";
}
src/features/workbench/components/scheduled-condition-feed.tsx
+16
View File
@@ -4,6 +4,7 @@ import {
ChevronRight,
ClipboardList,
History,
X,
XCircle
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
@@ -58,6 +59,7 @@ type ScheduledConditionFeedProps = {
onFocusRequestHandled?: (requestId: number) => void;
onSelectedConditionChange?: (conditionId: string | null) => void;
onExpandAgent: () => void;
onClose?: () => void;
onLoadHistorySession: (sessionId: string) => void | Promise<void>;
onSubmitPrompt: (prompt: string) => void | Promise<void>;
};
@@ -79,6 +81,7 @@ export function ScheduledConditionFeed({
onFocusRequestHandled,
onSelectedConditionChange,
onExpandAgent,
onClose,
onLoadHistorySession,
onSubmitPrompt
}: ScheduledConditionFeedProps) {
@@ -325,6 +328,19 @@ export function ScheduledConditionFeed({
/>
<span className="sr-only">{expanded ? "收起工况任务" : "展开工况任务"}</span>
</button>
{mobileSheet && onClose ? (
<button
type="button"
aria-label="关闭工况任务"
title="关闭工况任务"
onClick={onClose}
className="group grid h-10 w-10 shrink-0 place-items-center rounded-full text-slate-500"
>
<span className="surface-control grid h-9 w-9 place-items-center rounded-full shadow-[inset_0_0_0_1px_rgba(148,163,184,0.26),0_4px_12px_rgba(15,33,55,0.10)] transition-[color,background-color,scale] group-active:scale-95 [@media(hover:hover)]:group-hover:bg-blue-50 [@media(hover:hover)]:group-hover:text-blue-700">
<X size={17} strokeWidth={2.25} aria-hidden="true" />
</span>
</button>
) : null}
</header>
<div
src/features/workbench/layout/workbench-layout.ts
-1
View File
@@ -21,7 +21,6 @@ export const WORKBENCH_LAYOUT = {
tickerWidth: 460
},
mobileSheet: {
peekHeight: 96,
halfViewportRatio: 0.52,
fullTopGap: 68
}
src/features/workbench/map-workbench-page.tsx
+9 -22
View File
@@ -107,7 +107,6 @@ export function MapWorkbenchPage() {
const [conditionFeedExpanded, setConditionFeedExpanded] = useState(false);
const [mobileSheet, setMobileSheet] = useState<"agent" | "condition" | null>(null);
const [mobileSheetSnap, setMobileSheetSnap] = useState<MobileWorkbenchSheetSnap>("half");
const [mobileSheetClosing, setMobileSheetClosing] = useState(false);
const [agentCollapsedForCondition, setAgentCollapsedForCondition] = useState(false);
const prefersReducedMotion = useReducedMotion();
const [taskTickerVisible, setTaskTickerVisible] = useState(true);
@@ -149,7 +148,6 @@ export function MapWorkbenchPage() {
setViewportWidth(window.innerWidth);
if (mediaQuery.matches) {
setMobileSheet(null);
setMobileSheetClosing(false);
}
};
@@ -193,24 +191,12 @@ export function MapWorkbenchPage() {
return;
}
setMobileSheetClosing(false);
setMobileSheet("agent");
setMobileSheetSnap("half");
}
const closeMobileSheet = useCallback(() => {
if (prefersReducedMotion) {
setMobileSheet(null);
setMobileSheetClosing(false);
return;
}
setMobileSheetClosing(true);
}, [prefersReducedMotion]);
const completeMobileSheetClose = useCallback(() => {
setMobileSheet(null);
setMobileSheetClosing(false);
}, []);
function handleConditionExpandedChange(nextExpanded: boolean) {
@@ -255,7 +241,6 @@ export function MapWorkbenchPage() {
}
setConditionFeedExpanded(false);
setMobileSheetClosing(false);
setMobileSheetSnap("half");
setMobileSheet("condition");
}
@@ -577,7 +562,6 @@ export function MapWorkbenchPage() {
setConditionFeedVisible(true);
setActiveToolId(null);
if (!isLargeScreen) {
setMobileSheetClosing(false);
setMobileSheet("condition");
setMobileSheetSnap("half");
}
@@ -998,17 +982,21 @@ export function MapWorkbenchPage() {
aria-label="打开 Agent 面板"
title="打开 Agent 面板"
onClick={openAgentPanelForViewport}
className="acrylic-control grid h-12 w-12 shrink-0 place-items-center rounded-xl border text-violet-700 active:scale-95"
className="acrylic-control grid h-11 w-11 shrink-0 place-items-center rounded-xl border text-violet-700 active:scale-95"
>
<AgentPersona className="pointer-events-none h-9 w-9" state={agent.personaState} />
<AgentPersona className="pointer-events-none h-8 w-8" state={agent.personaState} />
</button>
<MapToolbar items={toolbarItems} orientation="horizontal" className="justify-center" />
<MapToolbar
items={toolbarItems}
orientation="horizontal"
className="h-11 justify-center"
/>
<button
type="button"
aria-label="打开工况任务"
title="打开工况任务"
onClick={toggleConditionFeedForViewport}
className="acrylic-control grid h-12 w-12 shrink-0 place-items-center rounded-xl border text-blue-700 active:scale-95"
className="acrylic-control grid h-11 w-11 shrink-0 place-items-center rounded-xl border text-blue-700 active:scale-95"
>
<CalendarClock size={20} aria-hidden="true" />
</button>
@@ -1022,8 +1010,6 @@ export function MapWorkbenchPage() {
snap={mobileSheetSnap}
onSnapChange={setMobileSheetSnap}
onClose={closeMobileSheet}
closing={mobileSheetClosing}
onCloseComplete={completeMobileSheetClose}
>
{mobileSheet === "agent" ? (
<AgentCommandPanel
@@ -1044,6 +1030,7 @@ export function MapWorkbenchPage() {
onFocusRequestHandled={handleConditionFocusRequestHandled}
onSelectedConditionChange={setSelectedConditionId}
onExpandAgent={openAgentPanelForViewport}
onClose={closeMobileSheet}
onLoadHistorySession={handleLoadAgentHistorySession}
onSubmitPrompt={agent.submitPrompt}
/>