73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
import type { CSSProperties } from 'react'
|
|
import { Badge, Button, Layout, Space } from '@arco-design/web-react'
|
|
import { IconCompass, IconDashboard, IconPlus } from '@arco-design/web-react/icon'
|
|
import type { Project, WorkbenchView } from './project-types'
|
|
|
|
const { Sider } = Layout
|
|
|
|
export function ProjectRail({
|
|
activeProject,
|
|
projects,
|
|
activeView,
|
|
open,
|
|
onClose,
|
|
onSelectWorkspace,
|
|
onSelectWorkspaceExplore,
|
|
onSelectProject,
|
|
onCreateProject,
|
|
}: {
|
|
activeProject: Project
|
|
projects: Project[]
|
|
activeView: WorkbenchView
|
|
open: boolean
|
|
onClose: () => void
|
|
onSelectWorkspace: () => void
|
|
onSelectWorkspaceExplore: () => void
|
|
onSelectProject: (project: Project) => void
|
|
onCreateProject: () => void
|
|
}) {
|
|
const selectAndClose = (action: () => void) => {
|
|
action()
|
|
onClose()
|
|
}
|
|
|
|
return (
|
|
<Sider className={open ? 'project-rail open' : 'project-rail'} width={96}>
|
|
<button className="rail-brand" aria-label="森林AI 工作台" title="森林AI 工作台" onClick={() => selectAndClose(onSelectWorkspace)}>
|
|
<img className="brand-icon" src="/senlinai-icon.svg" alt="" />
|
|
</button>
|
|
<Button
|
|
className={activeView === 'workspace' ? 'dashboard-button active' : 'dashboard-button'}
|
|
icon={<IconDashboard />}
|
|
onClick={() => selectAndClose(onSelectWorkspace)}
|
|
aria-label="工作台"
|
|
title="工作台"
|
|
/>
|
|
<Button
|
|
className={activeView === 'workspace-explore' ? 'dashboard-button active' : 'dashboard-button'}
|
|
icon={<IconCompass />}
|
|
onClick={() => selectAndClose(onSelectWorkspaceExplore)}
|
|
aria-label="探索"
|
|
title="探索"
|
|
/>
|
|
<div className="project-stack-scroll">
|
|
<Space className="project-stack" direction="vertical" size={12}>
|
|
{projects.map((project) => (
|
|
<Badge key={project.id} count={project.badge} dot={false} className={project.urgent ? 'project-badge urgent' : 'project-badge'}>
|
|
<button
|
|
className={activeView === 'project' && activeProject.id === project.id ? 'project-button active' : 'project-button'}
|
|
onClick={() => selectAndClose(() => onSelectProject(project))}
|
|
style={{ '--project-color': project.color } as CSSProperties}
|
|
title={project.name}
|
|
>
|
|
{project.short}
|
|
</button>
|
|
</Badge>
|
|
))}
|
|
</Space>
|
|
</div>
|
|
<Button className="create-project" aria-label="新建项目" icon={<IconPlus />} title="新建项目" onClick={() => selectAndClose(onCreateProject)} />
|
|
</Sider>
|
|
)
|
|
}
|