wenxinduan50/agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): polish responsive accessible interface

Browse Source
This commit is contained in:
Wenxin Duan
2026-09-08 10:23:15 +08:00
parent 36b6cbac3e
commit c4a88e4aae
7 changed files with 80 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/layout/AppShell.tsx
+24 -6
View File
@@ -1,5 +1,5 @@
import { Activity, MessageSquare, PanelsTopLeft } from "lucide-react";
import { useEffect, useState, type ReactNode } from "react";
import { useEffect, useState, type KeyboardEvent, type ReactNode } from "react";
import { TopBar, type TopBarProps } from "../topbar/TopBar.js";
type WorkspaceTab = "chat" | "skills" | "events";
@@ -17,13 +17,25 @@ export function AppShell({ topBar, skills, chat, timeline }: { topBar: TopBarPro
return () => media.removeEventListener("change", update);
}, []);
const selectAdjacentTab = (current: WorkspaceTab, event: KeyboardEvent<HTMLButtonElement>) => {
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "Home" && event.key !== "End") return;
event.preventDefault();
const order: WorkspaceTab[] = ["chat", "skills", "events"];
const currentIndex = order.indexOf(current);
const targetIndex = event.key === "Home" ? 0 : event.key === "End" ? order.length - 1 : (currentIndex + (event.key === "ArrowRight" ? 1 : -1) + order.length) % order.length;
const target = order[targetIndex];
if (target === undefined) return;
setActiveTab(target);
document.getElementById(`${target}-tab`)?.focus();
};
return (
<div className="app-shell">
<TopBar {...topBar} />
<nav className="mobile-tabs" aria-label="工作区导航" role="tablist">
<TabButton id="chat" active={activeTab === "chat"} onSelect={setActiveTab}><MessageSquare size={17} />Chat</TabButton>
<TabButton id="skills" active={activeTab === "skills"} onSelect={setActiveTab}><PanelsTopLeft size={17} />Skills</TabButton>
<TabButton id="events" active={activeTab === "events"} onSelect={setActiveTab}><Activity size={17} />Events</TabButton>
<TabButton id="chat" active={activeTab === "chat"} onSelect={setActiveTab} onKeyDown={selectAdjacentTab}><MessageSquare size={17} aria-hidden="true" />Chat</TabButton>
<TabButton id="skills" active={activeTab === "skills"} onSelect={setActiveTab} onKeyDown={selectAdjacentTab}><PanelsTopLeft size={17} aria-hidden="true" />Skills</TabButton>
<TabButton id="events" active={activeTab === "events"} onSelect={setActiveTab} onKeyDown={selectAdjacentTab}><Activity size={17} aria-hidden="true" />Events</TabButton>
</nav>
<div className="workspace-grid">
<div id="skills-panel" role={mobile ? "tabpanel" : undefined} hidden={mobile && activeTab !== "skills"}>{skills}</div>
@@ -34,9 +46,15 @@ export function AppShell({ topBar, skills, chat, timeline }: { topBar: TopBarPro
);
}
function TabButton({ id, active, onSelect, children }: { id: WorkspaceTab; active: boolean; onSelect: (tab: WorkspaceTab) => void; children: ReactNode }) {
function TabButton({ id, active, onSelect, onKeyDown, children }: {
id: WorkspaceTab;
active: boolean;
onSelect: (tab: WorkspaceTab) => void;
onKeyDown: (tab: WorkspaceTab, event: KeyboardEvent<HTMLButtonElement>) => void;
children: ReactNode;
}) {
return (
<button type="button" role="tab" aria-selected={active} aria-controls={`${id}-panel`} tabIndex={active ? 0 : -1} onClick={() => onSelect(id)}>
<button id={`${id}-tab`} type="button" role="tab" aria-selected={active} aria-controls={`${id}-panel`} tabIndex={active ? 0 : -1} onClick={() => onSelect(id)} onKeyDown={(event) => onKeyDown(id, event)}>
{children}
</button>
);