292 lines
17 KiB
TypeScript
292 lines
17 KiB
TypeScript
// 左栏（找上下文）：顶部切换项目，中间放会话与搜索，底部放文件、工作区和账户。
|
||
// 创建、搜索、置顶与归档仍在会话段里；领域工具由服务端工作区声明，没有时装上说明行。
|
||
import { useEffect, useRef, useState } from 'react'
|
||
import { store, useStore } from '../store'
|
||
import { auth } from '../auth'
|
||
import { api } from '../api'
|
||
import { Icon } from '@ui'
|
||
import type { Conversation } from '../contracts'
|
||
import { relativeTime, filterTasks } from '../tasklist'
|
||
import { projectStage, projectStateLabel, projectWorkError } from '../projectmeta'
|
||
import { buildWorkspaceEntries } from '../workspaces'
|
||
|
||
/** 小型弹出菜单：锚点下方渲染，点击外部关闭。 */
|
||
function Menu({ anchor, onClose, children }: { anchor: HTMLElement | null; onClose: () => void; children: React.ReactNode }) {
|
||
const ref = useRef<HTMLDivElement>(null)
|
||
useEffect(() => {
|
||
if (!anchor || !ref.current) return
|
||
const r = anchor.getBoundingClientRect()
|
||
const el = ref.current
|
||
let x = r.left, y = r.bottom + 6
|
||
if (x + el.offsetWidth > window.innerWidth - 8) x = window.innerWidth - el.offsetWidth - 8
|
||
if (y + el.offsetHeight > window.innerHeight - 8) y = r.top - el.offsetHeight - 6
|
||
el.style.left = `${Math.max(8, x)}px`
|
||
el.style.top = `${Math.max(8, Math.min(y, window.innerHeight - el.offsetHeight - 8))}px`
|
||
const h = (e: MouseEvent) => { if (!el.contains(e.target as Node)) onClose() }
|
||
window.addEventListener('mousedown', h)
|
||
return () => window.removeEventListener('mousedown', h)
|
||
}, [anchor])
|
||
if (!anchor) return null
|
||
return <div ref={ref} className="tsb-menu" onClick={e => e.stopPropagation()}>{children}</div>
|
||
}
|
||
|
||
function MenuItem({ onClick, danger, icon, children }: { onClick: () => void; danger?: boolean; icon?: Parameters<typeof Icon>[0]['name']; children: React.ReactNode }) {
|
||
return <button className={`tsb-mi ${danger ? 'danger' : ''}`} onClick={onClick}>
|
||
{icon && <Icon name={icon} size={15} />}{children}
|
||
</button>
|
||
}
|
||
|
||
interface TaskSidebarProps {
|
||
onCollapse?: () => void
|
||
onConversationOpen?: () => void
|
||
onFilesOpen?: () => void
|
||
onWorkOpen?: () => void
|
||
}
|
||
|
||
export function TaskSidebar({ onCollapse = store.toggleLeft, onConversationOpen,
|
||
onFilesOpen = store.openFiles, onWorkOpen = store.focusPending,
|
||
}: TaskSidebarProps = {}) {
|
||
const projects = useStore(s => s.projects)
|
||
const tasks = useStore(s => s.tasks)
|
||
const me = useStore(s => s.me)
|
||
const adminSections = useStore(s => s.adminSections)
|
||
const artifacts = useStore(s => s.artifacts)
|
||
const currentConvId = useStore(s => s.currentConvId)
|
||
const currentProjectId = useStore(s => s.currentProjectId)
|
||
const showArchived = useStore(s => s.ui.showArchived)
|
||
const serverWorkspaces = useStore(s => s.serverWorkspaces)
|
||
/** 审计入口能力门控（增量 2）：命令面探测通过才展示「追溯审计」。 */
|
||
const rdmAuditAvailable = useStore(s => s.rdmAuditAvailable)
|
||
const rdmCockpitAvailable = useStore(s => s.rdmCockpitAvailable)
|
||
const theme = useStore(s => s.ui.theme)
|
||
const pendingBadge = useStore(s =>
|
||
s.cards.filter(c => c.status === 'action_required').length +
|
||
s.projectCards.filter(c => c.status === 'action_required').length)
|
||
|
||
const [q, setQ] = useState('')
|
||
const [menu, setMenu] = useState<{ kind: 'new' | 'account' | 'project' | `row:${string}`; anchor: HTMLElement } | null>(null)
|
||
const [creatingProject, setCreatingProject] = useState(false)
|
||
const [newProjectName, setNewProjectName] = useState('')
|
||
|
||
const createConversation = async (projectId?: string) => {
|
||
try {
|
||
await store.createTask(projectId)
|
||
onConversationOpen?.()
|
||
} catch { /* store owns the actionable failure toast */ }
|
||
}
|
||
|
||
const tools = buildWorkspaceEntries(serverWorkspaces, { rdmAudit: rdmAuditAvailable, rdmCockpit: rdmCockpitAvailable })
|
||
const visible = filterTasks(tasks.filter(t => t.projectId === currentProjectId), q)
|
||
const pinned = visible.filter(t => t.pinned)
|
||
const rest = visible.filter(t => !t.pinned)
|
||
const currentProject = projects.find(p => p.id === currentProjectId)
|
||
const stage = projectStateLabel(currentProject?.settings) ?? projectStage(currentProject?.settings)
|
||
const workError = currentProject ? projectWorkError(currentProject) : null
|
||
const rowTask = menu?.kind.startsWith('row:') ? tasks.find(t => t.id === menu.kind.slice(4)) : null
|
||
const rowMenuAnchor = menu && menu.kind.startsWith('row:') ? menu.anchor : null
|
||
|
||
const rowActions = (t: Conversation) => (
|
||
<span className="tsb-row-acts">
|
||
<button className="tsb-row-act" title="置顶 / 取消置顶" onClick={e => { e.stopPropagation(); store.pinTask(t.id, !t.pinned) }}><Icon name="pin" size={13} /></button>
|
||
<button className="tsb-row-act" title={t.archived ? '恢复' : '归档'} onClick={e => { e.stopPropagation(); store.archiveTask(t.id, !t.archived) }}>
|
||
<Icon name={t.archived ? 'undo' : 'archive'} size={13} />
|
||
</button>
|
||
<button className={`tsb-row-act ${t.crossPrivate ? 'active' : ''}`} title={t.crossPrivate ? '私有会话：不被其他会话读取（点击取消）' : '设为私有（不被其他会话读取）'}
|
||
onClick={e => { e.stopPropagation(); store.setCrossFlags(t.id, { crossPrivate: !t.crossPrivate }) }}>
|
||
<Icon name="shield" size={13} />
|
||
</button>
|
||
</span>
|
||
)
|
||
|
||
/** 切换项目：优先恢复该项目下正在看的会话，否则进第一个未归档会话。 */
|
||
const switchProject = (pid: string) => {
|
||
const next = tasks.find(t => t.projectId === pid && t.id === currentConvId)
|
||
?? tasks.find(t => t.projectId === pid && !t.archived)
|
||
if (next) store.openTask(next.id)
|
||
else store.openProject(pid)
|
||
onConversationOpen?.()
|
||
}
|
||
|
||
const taskRow = (t: Conversation) => (
|
||
<div key={t.id} className={`tsb-task ${t.id === currentConvId ? 'active' : ''} ${t.archived ? 'archived' : ''}`}
|
||
onContextMenu={e => { e.preventDefault(); setMenu({ kind: `row:${t.id}`, anchor: e.currentTarget as HTMLElement }) }}>
|
||
<button className="tsb-task-open" onClick={() => { store.openTask(t.id); onConversationOpen?.() }}>
|
||
<Icon name="message" size={14} />
|
||
<span className="tsb-task-t" title={t.title}>{t.title || '未命名对话'}</span>
|
||
{t.crossPrivate && <span className="tsb-pbadge" title="私有：不被其他会话读取"><Icon name="shield" size={11} /></span>}
|
||
<span className="tsb-task-tm">{relativeTime(t.updatedAt)}</span>
|
||
</button>
|
||
{rowActions(t)}
|
||
<button className="tsb-row-menu" aria-label={`「${t.title || '未命名对话'}」更多操作`} title="更多对话操作"
|
||
onClick={e => setMenu({ kind: `row:${t.id}`, anchor: e.currentTarget })}><Icon name="more" size={14} /></button>
|
||
</div>
|
||
)
|
||
|
||
return (
|
||
<>
|
||
{/* 项目身份唯一落点：顶部切换项目（方案：项目导航置顶）。 */}
|
||
<div className="tsb-brand">
|
||
<button className="tsb-projrow" title="切换项目"
|
||
onClick={e => { const el = e.currentTarget; setMenu(m => m?.kind === 'project' ? null : { kind: 'project', anchor: el }) }}>
|
||
<Icon name="folder" size={15} />
|
||
<span className="tsb-projrow-name">{currentProject?.name ?? '选择项目'}</span>
|
||
{stage && <span className="tsb-projrow-stage">{stage}</span>}
|
||
<span className="tsb-user-chev"><Icon name="chevron-down" size={13} /></span>
|
||
</button>
|
||
<button className="tsb-iconbtn" title="收起侧栏（⌘B）" onClick={onCollapse}><Icon name="panel-left" /></button>
|
||
</div>
|
||
|
||
{/* 主入口创建会话；项目创建保留在次级菜单。 */}
|
||
<div className="tsb-actions">
|
||
<div className="tsb-newtask">
|
||
<button className="tsb-newtask-main" title="在当前项目新建对话（⌘N）" onClick={() => createConversation()}>
|
||
<Icon name="plus" size={15} />新建对话
|
||
</button>
|
||
<button className="tsb-newtask-caret" title="更多创建选项"
|
||
onClick={e => { const el = e.currentTarget; setMenu(m => m?.kind === 'new' ? null : { kind: 'new', anchor: el }) }}><Icon name="chevron-down" size={14} /></button>
|
||
</div>
|
||
<div className="tsb-search">
|
||
<Icon name="search" size={14} />
|
||
<input aria-label="搜索本项目会话" placeholder="搜索对话…" value={q} onChange={e => setQ(e.target.value)} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="tsb-orgrow">
|
||
<span className="tsb-seclabel" style={{ padding: 0 }}>本项目会话</span>
|
||
<span style={{ flex: 1 }} />
|
||
<button className={`tsb-iconbtn ${showArchived ? 'active' : ''}`} title={showArchived ? '隐藏归档' : '查看归档'}
|
||
onClick={() => { store.setUI({ showArchived: !showArchived }); store.refreshTasks(!showArchived) }}><Icon name="archive" size={15} /></button>
|
||
</div>
|
||
|
||
{/* 中段（方案：会话与搜索）。项目切换在顶部，文件与工作区沉底。 */}
|
||
<div className="tsb-scroll">
|
||
{creatingProject && (
|
||
<div className="tsb-newproject">
|
||
<input className="tsb-search" autoFocus value={newProjectName}
|
||
onChange={e => setNewProjectName(e.target.value)}
|
||
onKeyDown={async e => {
|
||
if (e.key === 'Enter' && newProjectName.trim()) {
|
||
try {
|
||
await store.createProject(newProjectName.trim())
|
||
setCreatingProject(false); setNewProjectName('')
|
||
} catch { /* keep the input available for a corrected name */ }
|
||
}
|
||
if (e.key === 'Escape') setCreatingProject(false)
|
||
}}
|
||
placeholder="项目名称，回车创建" />
|
||
</div>
|
||
)}
|
||
|
||
{pinned.length > 0 && (
|
||
<>
|
||
<div className="tsb-seclabel">置顶</div>
|
||
{pinned.map(t => taskRow(t))}
|
||
</>
|
||
)}
|
||
|
||
{rest.length === 0 && pinned.length === 0 && (
|
||
<div className="tsb-empty">{workError ?? '从「新建对话」开始，描述你想完成的工作。'}</div>
|
||
)}
|
||
{rest.map(t => taskRow(t))}
|
||
</div>
|
||
|
||
{/* 底部（方案：文件、工作区、账户沉底）。 */}
|
||
<div className="tsb-bottom">
|
||
<button className="tsb-tool" title="文件搜索、预览、编辑与下载" onClick={onFilesOpen}>
|
||
<span className="tsb-tool-icon"><Icon name="folder" size={14} /></span>
|
||
<span className="tsb-tool-name">文件</span>
|
||
{artifacts.length > 0 && <span className="tsb-group-cnt">{artifacts.length}</span>}
|
||
</button>
|
||
{tools.map(entry => (
|
||
<button key={entry.key} className="tsb-tool" title={entry.shortcut} onClick={() => store.openWorkspace(entry.key)}>
|
||
<span className="tsb-tool-icon">{entry.icon}</span>
|
||
<span className="tsb-tool-name">{entry.title}</span>
|
||
<kbd>{entry.shortcut}</kbd>
|
||
</button>
|
||
))}
|
||
{currentProject && (
|
||
<button className="tsb-tool" onClick={() => store.openProjectSettings(currentProject.id)}>
|
||
<span className="tsb-tool-icon"><Icon name="settings" size={14} /></span>
|
||
<span className="tsb-tool-name">项目设置</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* 账户区（P7）：身份常驻；阶段 1 = API key 即身份（user 即租户 owner） */}
|
||
<div className="tsb-footer">
|
||
<button className="tsb-user" onClick={e => { const el = e.currentTarget; setMenu(m => m?.kind === 'account' ? null : { kind: 'account', anchor: el }) }}>
|
||
<span className="tsb-avatar">{(me?.name || me?.owner || '?').slice(0, 1).toUpperCase()}</span>
|
||
<span className="tsb-user-info">
|
||
<span className="tsb-user-name">{me?.name || me?.owner || '未连接'}</span>
|
||
<span className="tsb-user-sub">{me ? (me.auth ? (me.isAdmin ? '管理员 · 已认证' : '已认证') : '本地模式 · 默认租户') : '…'}</span>
|
||
</span>
|
||
<span className="tsb-user-chev"><Icon name="chevron-down" size={13} /></span>
|
||
</button>
|
||
<button className="tsb-iconbtn" title="设置" onClick={() => store.openSettings(true)}><Icon name="settings" size={15} /></button>
|
||
{pendingBadge > 0 && <button className="tsb-iconbtn active" title={`待办 ${pendingBadge}`} onClick={onWorkOpen}><Icon name="inbox" size={15} />{pendingBadge}</button>}
|
||
</div>
|
||
|
||
{/* 弹出菜单们 */}
|
||
<Menu anchor={menu?.kind === 'project' ? menu.anchor : null} onClose={() => setMenu(null)}>
|
||
{projects.map(p => {
|
||
const count = tasks.filter(t => t.projectId === p.id && !t.archived).length
|
||
const pstage = projectStateLabel(p.settings) ?? projectStage(p.settings)
|
||
return (
|
||
<MenuItem key={p.id} icon="folder" onClick={() => { switchProject(p.id); setMenu(null) }}>
|
||
{p.name}
|
||
<kbd>{p.id === currentProjectId ? '当前' : pstage ? `${pstage} · ` : ''}{count} 会话</kbd>
|
||
</MenuItem>
|
||
)
|
||
})}
|
||
{projects.length === 0 && <div className="tsb-tool-note">还没有项目</div>}
|
||
<div className="tsb-menu-div" />
|
||
<MenuItem icon="plus" onClick={() => { setCreatingProject(true); setMenu(null) }}>新建项目…</MenuItem>
|
||
</Menu>
|
||
|
||
<Menu anchor={menu?.kind === 'new' ? menu.anchor : null} onClose={() => setMenu(null)}>
|
||
<MenuItem icon="plus" onClick={() => { createConversation(); setMenu(null) }}>新建对话 · 当前项目<kbd>⌘N</kbd></MenuItem>
|
||
<div className="tsb-menu-div" />
|
||
<MenuItem icon="folder" onClick={() => { setCreatingProject(true); setMenu(null) }}>新建项目…</MenuItem>
|
||
{projects.filter(p => p.id !== currentProjectId).slice(0, 6).map(p => (
|
||
<MenuItem key={p.id} onClick={() => { createConversation(p.id); setMenu(null) }}>在「{p.name}」新建对话</MenuItem>
|
||
))}
|
||
</Menu>
|
||
|
||
<Menu anchor={rowMenuAnchor} onClose={() => setMenu(null)}>
|
||
{rowTask && <>
|
||
<MenuItem icon="pin" onClick={() => { store.pinTask(rowTask.id, !rowTask.pinned); setMenu(null) }}>{rowTask.pinned ? '取消置顶' : '置顶'}</MenuItem>
|
||
<MenuItem icon={rowTask.archived ? 'undo' : 'archive'} onClick={() => { store.archiveTask(rowTask.id, !rowTask.archived); setMenu(null) }}>{rowTask.archived ? '恢复（移出归档）' : '归档'}</MenuItem>
|
||
<div className="tsb-menu-div" />
|
||
<MenuItem icon="shield" onClick={() => { store.setCrossFlags(rowTask.id, { crossPrivate: !rowTask.crossPrivate }); setMenu(null) }}>{rowTask.crossPrivate ? '取消私有（可被其他会话读取）' : '设为私有（不被其他会话读取）'}</MenuItem>
|
||
<MenuItem icon="users" onClick={() => { store.setCrossFlags(rowTask.id, { allowCrossRead: rowTask.allowCrossRead === false }); setMenu(null) }}>{rowTask.allowCrossRead === false ? '开启读取其他会话' : '关闭读取其他会话'}</MenuItem>
|
||
<div className="tsb-menu-div" />
|
||
<MenuItem icon="settings" onClick={() => { if (rowTask) store.openProjectSettings(rowTask.projectId); setMenu(null) }}>项目设置</MenuItem>
|
||
</>}
|
||
</Menu>
|
||
|
||
<Menu anchor={menu?.kind === 'account' ? menu.anchor : null} onClose={() => setMenu(null)}>
|
||
<div className="tsb-acc-head">
|
||
<span className="tsb-avatar">{(me?.name || me?.owner || '?').slice(0, 1).toUpperCase()}</span>
|
||
<span>
|
||
<div className="tsb-acc-name">{me?.name || '未连接'}</div>
|
||
<div className="tsb-acc-mail">{me?.owner ? `租户：${me.owner}` : '—'}</div>
|
||
</span>
|
||
</div>
|
||
<div className="tsb-menu-div" />
|
||
<MenuItem icon="settings" onClick={() => { store.openSettings(true); setMenu(null) }}>偏好设置</MenuItem>
|
||
<MenuItem icon="inbox" onClick={() => { onWorkOpen(); setMenu(null) }}>待处理事项{pendingBadge > 0 ? `（${pendingBadge}）` : ''}</MenuItem>
|
||
<MenuItem icon="key" onClick={() => { store.setUI({ changePwOpen: true }); setMenu(null) }}>修改密码…</MenuItem>
|
||
<MenuItem icon="moon" onClick={() => { store.setUI({ theme: 'dark' }); setMenu(null) }}>深色主题{theme === 'dark' ? ' · 当前' : ''}</MenuItem>
|
||
<MenuItem icon="sun" onClick={() => { store.setUI({ theme: 'light' }); setMenu(null) }}>浅色主题{theme === 'light' ? ' · 当前' : ''}</MenuItem>
|
||
<MenuItem onClick={() => { store.setUI({ theme: 'molv' }); setMenu(null) }}>墨绿主题{theme === 'molv' ? ' · 当前' : ''}</MenuItem>
|
||
<MenuItem onClick={() => { store.setUI({ theme: 'system' }); setMenu(null) }}>跟随系统{theme === 'system' ? ' · 当前' : ''}</MenuItem>
|
||
{(me?.isAdmin || (me?.systemActions?.length ?? 0) > 0 || adminSections.length > 0) && <MenuItem icon="shield" onClick={() => { store.setUI({ adminZoneOpen: true }); setMenu(null) }}>系统管理…</MenuItem>}
|
||
{me?.auth && <>
|
||
<div className="tsb-menu-div" />
|
||
<MenuItem danger icon="logout" onClick={() => { api.logout().catch(() => undefined); auth.logout() }}>退出登录</MenuItem>
|
||
</>}
|
||
</Menu>
|
||
</>
|
||
)
|
||
}
|