Skip to content

Commit d95efc5

Browse files
vnt-devvnt-dev
committed
refine sidebar collapse interactions
1 parent 4f594e9 commit d95efc5

2 files changed

Lines changed: 348 additions & 120 deletions

File tree

‎apps/kimi-code/src/App.tsx‎

Lines changed: 122 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1715,49 +1715,42 @@ export default function App() {
17151715
<WindowTitleBar
17161716
projectName={activeProject?.name}
17171717
conversationTitle={activeConversation?.title}
1718-
sidebarCollapsed={sidebarCollapsed}
17191718
/>
17201719

17211720
<div className="app-body">
17221721
<aside className={sidebarCollapsed ? "sidebar collapsed" : "sidebar"}>
17231722
<div className="brand-row">
1724-
{!sidebarCollapsed && (
1725-
<>
1726-
<div className="sidebar-heading-copy">
1727-
<strong>工作区</strong>
1728-
<span>Projects &amp; sessions</span>
1729-
</div>
1730-
<button
1731-
className="icon-button quiet"
1732-
onClick={() => setSidebarCollapsed(true)}
1733-
title="收起侧栏"
1734-
>
1735-
<PanelLeftClose size={17} />
1736-
</button>
1737-
</>
1738-
)}
1739-
{sidebarCollapsed && (
1740-
<button
1741-
className="icon-button quiet"
1742-
onClick={() => setSidebarCollapsed(false)}
1743-
title="展开侧栏"
1744-
>
1723+
<div className="sidebar-heading-copy" aria-hidden={sidebarCollapsed}>
1724+
<strong>工作区</strong>
1725+
<span>Projects &amp; sessions</span>
1726+
</div>
1727+
<button
1728+
className="icon-button quiet"
1729+
onClick={() => {
1730+
setSidebarCollapsed((value) => !value);
1731+
setProfileOpen(false);
1732+
}}
1733+
title={sidebarCollapsed ? "展开侧栏" : "收起侧栏"}
1734+
>
1735+
{sidebarCollapsed ? (
17451736
<PanelLeftOpen size={17} />
1746-
</button>
1747-
)}
1737+
) : (
1738+
<PanelLeftClose size={17} />
1739+
)}
1740+
</button>
17481741
</div>
17491742

17501743
<div className="sidebar-primary">
17511744
<button className="new-project-button" onClick={() => void addProject()}>
17521745
<Plus size={17} />
1753-
{!sidebarCollapsed && <span>打开项目</span>}
1746+
<span className="sidebar-control-label" aria-hidden={sidebarCollapsed}>
1747+
打开项目
1748+
</span>
17541749
</button>
17551750

1756-
{!sidebarCollapsed && (
1757-
<div className="sidebar-section-heading">
1758-
<span>项目</span>
1759-
</div>
1760-
)}
1751+
<div className="sidebar-section-heading" aria-hidden={sidebarCollapsed}>
1752+
<span>项目</span>
1753+
</div>
17611754

17621755
<nav className="project-list" aria-label="项目和对话">
17631756
{desktop.projects.map((project) => {
@@ -1782,52 +1775,60 @@ export default function App() {
17821775
>
17831776
<FolderGit2 size={16} />
17841777
</span>
1785-
{!sidebarCollapsed && (
1786-
<>
1787-
<span className="project-name">{project.name}</span>
1788-
<span className="project-actions">
1789-
<button
1790-
className="icon-button tiny"
1791-
type="button"
1792-
onClick={(event) =>
1793-
void createConversation(project, event)
1794-
}
1795-
title="新建对话"
1796-
aria-label={`在 ${project.name} 中新建对话`}
1797-
>
1798-
<Plus size={14} />
1799-
</button>
1800-
<button
1801-
className="icon-button tiny project-remove-button"
1802-
type="button"
1803-
onClick={(event) => {
1804-
event.stopPropagation();
1805-
setRemovalTarget({
1806-
kind: "project",
1807-
projectId: project.id,
1808-
name: project.name,
1809-
path: project.path,
1810-
conversationIds: project.conversations.map(
1811-
(conversation) => conversation.id,
1812-
),
1813-
});
1814-
}}
1815-
title="移除项目"
1816-
aria-label={`移除项目 ${project.name}`}
1817-
>
1818-
<FolderMinus size={13} />
1819-
</button>
1820-
{project.expanded ? (
1821-
<ChevronDown size={14} />
1822-
) : (
1823-
<ChevronRight size={14} />
1824-
)}
1825-
</span>
1826-
</>
1827-
)}
1778+
<span className="project-name" aria-hidden={sidebarCollapsed}>
1779+
{project.name}
1780+
</span>
1781+
<span className="project-actions" aria-hidden={sidebarCollapsed}>
1782+
<button
1783+
className="icon-button tiny"
1784+
type="button"
1785+
tabIndex={sidebarCollapsed ? -1 : 0}
1786+
onClick={(event) =>
1787+
void createConversation(project, event)
1788+
}
1789+
title="新建对话"
1790+
aria-label={`在 ${project.name} 中新建对话`}
1791+
>
1792+
<Plus size={14} />
1793+
</button>
1794+
<button
1795+
className="icon-button tiny project-remove-button"
1796+
type="button"
1797+
tabIndex={sidebarCollapsed ? -1 : 0}
1798+
onClick={(event) => {
1799+
event.stopPropagation();
1800+
setRemovalTarget({
1801+
kind: "project",
1802+
projectId: project.id,
1803+
name: project.name,
1804+
path: project.path,
1805+
conversationIds: project.conversations.map(
1806+
(conversation) => conversation.id,
1807+
),
1808+
});
1809+
}}
1810+
title="移除项目"
1811+
aria-label={`移除项目 ${project.name}`}
1812+
>
1813+
<FolderMinus size={13} />
1814+
</button>
1815+
<ChevronRight
1816+
className={`project-chevron ${
1817+
project.expanded ? "expanded" : ""
1818+
}`}
1819+
size={14}
1820+
/>
1821+
</span>
18281822
</div>
1829-
{!sidebarCollapsed && project.expanded && (
1830-
<div className="conversation-list">
1823+
<div
1824+
className={`conversation-list-collapse ${
1825+
!sidebarCollapsed && project.expanded ? "expanded" : ""
1826+
}`}
1827+
aria-hidden={sidebarCollapsed || !project.expanded}
1828+
inert={sidebarCollapsed || !project.expanded}
1829+
>
1830+
<div className="conversation-list-clip">
1831+
<div className="conversation-list">
18311832
{project.conversations.map((conversation) => (
18321833
<div
18331834
className={`conversation-row ${
@@ -1849,17 +1850,16 @@ export default function App() {
18491850
<span className="conversation-title">
18501851
{conversation.title}
18511852
</span>
1852-
<span className="conversation-meta">
1853-
{isTurnRunning(inFlightTurns[conversation.id]) && (
1853+
{isTurnRunning(inFlightTurns[conversation.id]) && (
1854+
<span className="conversation-meta">
18541855
<span
18551856
className="conversation-running-indicator"
18561857
role="status"
18571858
aria-label="对话进行中"
18581859
title="对话进行中"
18591860
/>
1860-
)}
1861-
<time>{formatTime(conversation.updatedAt)}</time>
1862-
</span>
1861+
</span>
1862+
)}
18631863
</button>
18641864
<button
18651865
className="conversation-archive-button"
@@ -1880,15 +1880,16 @@ export default function App() {
18801880
</button>
18811881
</div>
18821882
))}
1883+
</div>
18831884
</div>
1884-
)}
1885+
</div>
18851886
</div>
18861887
);
18871888
})}
18881889
</nav>
18891890

1890-
{!sidebarCollapsed && desktop.projects.length === 0 && (
1891-
<div className="sidebar-empty">
1891+
{desktop.projects.length === 0 && (
1892+
<div className="sidebar-empty" aria-hidden={sidebarCollapsed}>
18921893
<Folder size={22} />
18931894
<p>打开一个本地目录，开始和 Kimi 一起写代码。</p>
18941895
</div>
@@ -1900,22 +1901,38 @@ export default function App() {
19001901
<div className="profile-wrap">
19011902
<button
19021903
className="account-button"
1904+
tabIndex={sidebarCollapsed ? -1 : 0}
19031905
onClick={() => setProfileOpen((value) => !value)}
19041906
>
19051907
<span className="avatar">
19061908
<Sparkles size={15} />
19071909
<i />
19081910
</span>
1909-
{!sidebarCollapsed && (
1910-
<>
1911-
<span className="account-copy">
1912-
<strong>Kimi Code</strong>
1913-
<small>已连接</small>
1914-
</span>
1915-
<MoreHorizontal size={16} />
1916-
</>
1917-
)}
1911+
<span className="account-copy" aria-hidden={sidebarCollapsed}>
1912+
<strong>Kimi Code</strong>
1913+
<small>已连接</small>
1914+
</span>
1915+
<MoreHorizontal
1916+
className="account-trailing-icon"
1917+
size={16}
1918+
aria-hidden={sidebarCollapsed}
1919+
/>
19181920
</button>
1921+
<div
1922+
className="account-compact-actions"
1923+
aria-hidden={!sidebarCollapsed}
1924+
inert={!sidebarCollapsed}
1925+
>
1926+
<button
1927+
className="account-compact-kimi"
1928+
type="button"
1929+
title="Kimi Code 账号"
1930+
aria-label="打开 Kimi Code 账号菜单"
1931+
onClick={() => setProfileOpen((value) => !value)}
1932+
>
1933+
<Sparkles size={14} />
1934+
</button>
1935+
</div>
19191936
{profileOpen && (
19201937
<div className="profile-popover">
19211938
<div>
@@ -1934,15 +1951,15 @@ export default function App() {
19341951
<span className="avatar signed-out">
19351952
<CircleUserRound size={18} />
19361953
</span>
1937-
{!sidebarCollapsed && (
1938-
<>
1939-
<span className="account-copy">
1940-
<strong>登录 Kimi</strong>
1941-
<small>同步模型与额度</small>
1942-
</span>
1943-
<LogIn size={16} />
1944-
</>
1945-
)}
1954+
<span className="account-copy" aria-hidden={sidebarCollapsed}>
1955+
<strong>登录 Kimi</strong>
1956+
<small>同步模型与额度</small>
1957+
</span>
1958+
<LogIn
1959+
className="account-trailing-icon"
1960+
size={16}
1961+
aria-hidden={sidebarCollapsed}
1962+
/>
19461963
</button>
19471964
)}
19481965
</div>
@@ -2293,11 +2310,9 @@ interface ToolbarSelectOption {
22932310
function WindowTitleBar({
22942311
projectName,
22952312
conversationTitle,
2296-
sidebarCollapsed,
22972313
}: {
22982314
projectName?: string;
22992315
conversationTitle?: string;
2300-
sidebarCollapsed: boolean;
23012316
}) {
23022317
const [maximized, setMaximized] = useState(false);
23032318
const appWindow = useMemo(
@@ -2362,12 +2377,10 @@ function WindowTitleBar({
23622377
<span data-tauri-drag-region />
23632378
<span data-tauri-drag-region />
23642379
</div>
2365-
{!sidebarCollapsed && (
2366-
<div className="titlebar-brand-copy" data-tauri-drag-region>
2367-
<strong data-tauri-drag-region>Kimi Code</strong>
2368-
<span data-tauri-drag-region>Agent Desktop</span>
2369-
</div>
2370-
)}
2380+
<div className="titlebar-brand-copy" data-tauri-drag-region>
2381+
<strong data-tauri-drag-region>Kimi Code</strong>
2382+
<span data-tauri-drag-region>Agent Desktop</span>
2383+
</div>
23712384
</div>
23722385

23732386
<div className="window-titlebar-context" data-tauri-drag-region>

0 commit comments

Comments
 (0)