428 lines
22 KiB
TypeScript
428 lines
22 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
||
import { Alert, Avatar, Button, Empty, Input, Message, Modal, Select, Spin, Tag, Typography } from '@arco-design/web-react'
|
||
import {
|
||
IconApps, IconArrowLeft, IconArrowRight, IconCheckCircle, IconClockCircle,
|
||
IconFile, IconFolder, IconPlus, IconRefresh, IconRobot, IconSearch, IconSettings,
|
||
} from '@arco-design/web-react/icon'
|
||
import {
|
||
ApiError, checkServerConnection, createAISession, createCron, createProject, createTask, fetchAISessions, fetchExperts,
|
||
fetchProjects, fetchWorkspace, login, updateTask, uploadSource,
|
||
type AISession, type ApiSession, type Expert, type Project, type Workspace,
|
||
} from './api'
|
||
|
||
const { Text, Title } = Typography
|
||
type View = 'home' | 'tasks' | 'notes' | 'ai' | 'more'
|
||
type DockSide = 'left' | 'right'
|
||
type Action = 'project' | 'task' | 'cron' | null
|
||
type ConnectionStatus = 'checking' | 'online' | 'offline'
|
||
|
||
const navItems: Array<{ id: View; label: string; icon: React.ReactNode }> = [
|
||
{ id: 'home', label: '项目', icon: <IconApps /> },
|
||
{ id: 'tasks', label: '计划', icon: <IconCheckCircle /> },
|
||
{ id: 'notes', label: '资料', icon: <IconFile /> },
|
||
{ id: 'ai', label: 'AI', icon: <IconRobot /> },
|
||
{ id: 'more', label: '更多', icon: <IconSettings /> },
|
||
]
|
||
|
||
export function App() {
|
||
const [session, setSession] = useState<ApiSession | null>(() => readStoredSession())
|
||
const [projects, setProjects] = useState<Project[]>([])
|
||
const [projectId, setProjectId] = useState('')
|
||
const [workspace, setWorkspace] = useState<Workspace | null>(null)
|
||
const [experts, setExperts] = useState<Expert[]>([])
|
||
const [aiSessions, setAISessions] = useState<AISession[]>([])
|
||
const [view, setView] = useState<View>('home')
|
||
const [dockSide, setDockSide] = useState<DockSide>(() => {
|
||
if ('__TAURI_INTERNALS__' in window) return 'right'
|
||
return localStorage.getItem('senlin-mini-dock') === 'left' ? 'left' : 'right'
|
||
})
|
||
const [loading, setLoading] = useState(Boolean(session))
|
||
const [error, setError] = useState('')
|
||
const [action, setAction] = useState<Action>(null)
|
||
const refreshGeneration = useRef(0)
|
||
|
||
useEffect(() => {
|
||
document.documentElement.dataset.dock = dockSide
|
||
localStorage.setItem('senlin-mini-dock', dockSide)
|
||
void moveDesktopWindow(dockSide)
|
||
}, [dockSide])
|
||
|
||
useEffect(() => {
|
||
if (!session) return
|
||
let cancelled = false
|
||
setLoading(true)
|
||
void fetchProjects(session)
|
||
.then((items) => {
|
||
if (cancelled) return
|
||
setProjects(items)
|
||
setProjectId((current) => items.some((item) => item.id === current) ? current : items[0]?.id ?? '')
|
||
})
|
||
.catch((requestError) => !cancelled && setError(errorMessage(requestError)))
|
||
.finally(() => !cancelled && setLoading(false))
|
||
return () => { cancelled = true }
|
||
}, [session])
|
||
|
||
useEffect(() => {
|
||
if (!session || !projectId) return
|
||
void refreshProject(session, projectId)
|
||
}, [projectId, session])
|
||
|
||
async function refreshProject(activeSession = session, activeProject = projectId) {
|
||
if (!activeSession || !activeProject) return
|
||
const generation = ++refreshGeneration.current
|
||
setLoading(true)
|
||
setError('')
|
||
try {
|
||
const [nextWorkspace, nextExperts, nextSessions] = await Promise.all([
|
||
fetchWorkspace(activeSession, activeProject),
|
||
experts.length ? Promise.resolve(experts) : fetchExperts(activeSession),
|
||
fetchAISessions(activeSession, activeProject),
|
||
])
|
||
if (generation !== refreshGeneration.current) return
|
||
setWorkspace(nextWorkspace)
|
||
setExperts(nextExperts)
|
||
setAISessions(nextSessions)
|
||
} catch (requestError) {
|
||
if (generation === refreshGeneration.current) setError(errorMessage(requestError))
|
||
} finally {
|
||
if (generation === refreshGeneration.current) setLoading(false)
|
||
}
|
||
}
|
||
|
||
async function dock(side: DockSide) {
|
||
setDockSide(side)
|
||
}
|
||
|
||
if (!session) return <Login onLogin={(next) => { localStorage.setItem('senlin-mini-session', JSON.stringify(next)); setSession(next) }} />
|
||
|
||
const activeProject = projects.find((project) => project.id === projectId) ?? projects[0]
|
||
const content = !workspace || !activeProject
|
||
? <Empty description="还没有项目，点击右上角新建" />
|
||
: renderView(view, {
|
||
session, workspace, experts, aiSessions,
|
||
refresh: () => refreshProject(),
|
||
openAction: setAction,
|
||
})
|
||
|
||
return (
|
||
<div className="mini-shell">
|
||
<header className="mini-header" data-tauri-drag-region>
|
||
<div className="mini-brand" data-tauri-drag-region>
|
||
<img src="/senlinai-icon.svg" alt="" />
|
||
<span>森林AI</span>
|
||
<Tag size="small" color="arcoblue">Mini 1.0</Tag>
|
||
</div>
|
||
<div className="window-actions">
|
||
<Button aria-label="停靠左侧" className={dockSide === 'left' ? 'active' : ''} type="text" size="mini" icon={<IconArrowLeft />} onClick={() => void dock('left')} />
|
||
<Button aria-label="停靠右侧" className={dockSide === 'right' ? 'active' : ''} type="text" size="mini" icon={<IconArrowRight />} onClick={() => void dock('right')} />
|
||
</div>
|
||
</header>
|
||
|
||
<div className="project-switcher">
|
||
<Select
|
||
value={projectId || undefined}
|
||
placeholder="选择项目"
|
||
onChange={setProjectId}
|
||
triggerElement={() => (
|
||
<button className="project-trigger">
|
||
<Avatar size={26} style={{ background: activeProject?.background || '#165DFF' }}>{projectMark(activeProject)}</Avatar>
|
||
<span>{activeProject?.name || '选择项目'}</span>
|
||
<small>{activeProject?.identifier || ''}</small>
|
||
</button>
|
||
)}
|
||
>
|
||
{projects.map((project) => <Select.Option key={project.id} value={project.id}>{project.name}</Select.Option>)}
|
||
</Select>
|
||
<Button aria-label="刷新" type="text" shape="circle" icon={<IconRefresh />} loading={loading} onClick={() => void refreshProject()} />
|
||
<Button aria-label="新建项目" type="text" shape="circle" icon={<IconPlus />} onClick={() => setAction('project')} />
|
||
</div>
|
||
|
||
<nav className="mini-nav" aria-label="主要导航">
|
||
{navItems.map((item) => (
|
||
<button className={view === item.id ? 'active' : ''} key={item.id} onClick={() => setView(item.id)}>
|
||
{item.icon}<span>{item.label}</span>
|
||
</button>
|
||
))}
|
||
</nav>
|
||
|
||
{error ? <Alert className="mini-alert" type="error" content={error} closable onClose={() => setError('')} /> : null}
|
||
<main className="mini-content"><Spin loading={loading} block>{content}</Spin></main>
|
||
|
||
<footer className="mini-footer">
|
||
<span><i /> 服务已连接</span>
|
||
<button onClick={() => { localStorage.removeItem('senlin-mini-session'); setSession(null); setWorkspace(null) }}>退出登录</button>
|
||
</footer>
|
||
|
||
<ActionModal
|
||
action={action}
|
||
workspace={workspace}
|
||
onClose={() => setAction(null)}
|
||
onProject={async (name) => {
|
||
const project = await createProject(session, name)
|
||
const next = await fetchProjects(session)
|
||
setProjects(next)
|
||
setProjectId(project.id)
|
||
}}
|
||
onTask={async (title, tag) => {
|
||
if (!projectId) return
|
||
await createTask(session, projectId, title, tag)
|
||
await refreshProject()
|
||
}}
|
||
onCron={async (title, schedule) => {
|
||
if (!projectId) return
|
||
await createCron(session, projectId, title, schedule)
|
||
await refreshProject()
|
||
}}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function renderView(view: View, props: ViewProps) {
|
||
if (view === 'tasks') return <TasksView {...props} />
|
||
if (view === 'notes') return <NotesView {...props} />
|
||
if (view === 'ai') return <AIView {...props} />
|
||
if (view === 'more') return <MoreView {...props} />
|
||
return <HomeView {...props} />
|
||
}
|
||
|
||
type ViewProps = {
|
||
session: ApiSession
|
||
workspace: Workspace
|
||
experts: Expert[]
|
||
aiSessions: AISession[]
|
||
refresh: () => void | Promise<void>
|
||
openAction: (action: Action) => void
|
||
}
|
||
|
||
function HomeView({ workspace, openAction }: ViewProps) {
|
||
const pending = workspace.tasks.filter((task) => !task.completed)
|
||
return (
|
||
<section className="mini-page home-view">
|
||
<div className="page-intro">
|
||
<Text type="secondary">当前项目</Text>
|
||
<Title heading={4}>{workspace.project.name}</Title>
|
||
<p>{workspace.project.description || '把计划、资料与 AI 会话放进同一个项目上下文。'}</p>
|
||
</div>
|
||
<div className="metric-grid">
|
||
<Metric value={pending.length} label="待办计划" color="blue" />
|
||
<Metric value={workspace.notesSources.length} label="笔记资料" color="green" />
|
||
<Metric value={workspace.aiSessions.length} label="AI 会话" color="purple" />
|
||
<Metric value={workspace.cronPlans.length} label="计划任务" color="orange" />
|
||
</div>
|
||
<div className="section-title"><strong>快速操作</strong></div>
|
||
<div className="quick-actions">
|
||
<button onClick={() => openAction('task')}><IconPlus /><span><b>新建计划</b><small>快速记录下一步</small></span></button>
|
||
<button onClick={() => openAction('cron')}><IconClockCircle /><span><b>计划任务</b><small>添加周期安排</small></span></button>
|
||
</div>
|
||
<div className="section-title"><strong>接下来</strong><Tag color="arcoblue">{pending.length}</Tag></div>
|
||
<div className="compact-list">
|
||
{pending.slice(0, 4).map((task) => <div key={task.id}><IconCheckCircle /><span><b>{task.title}</b><small>{task.tag || '未分类'}</small></span></div>)}
|
||
{!pending.length && <Empty description="当前没有未完成计划" />}
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
function Metric({ value, label, color }: { value: number; label: string; color: string }) {
|
||
return <div className={`metric ${color}`}><strong>{value}</strong><span>{label}</span></div>
|
||
}
|
||
|
||
function TasksView({ session, workspace, refresh, openAction }: ViewProps) {
|
||
const [tag, setTag] = useState('全部')
|
||
const tags = workspace.tags.filter((item) => item.name !== '全部' && item.name !== 'all')
|
||
const tasks = tag === '全部' ? workspace.tasks : workspace.tasks.filter((task) => task.tag === tag)
|
||
return (
|
||
<section className="mini-page">
|
||
<div className="page-title"><div><Title heading={5}>工作计划</Title><Text type="secondary">轻点圆圈即可更新状态</Text></div><Button type="primary" size="small" icon={<IconPlus />} onClick={() => openAction('task')}>新建</Button></div>
|
||
<div className="filter-strip">
|
||
{['全部', ...tags.map((item) => item.name)].map((item) => <button className={tag === item ? 'active' : ''} key={item} onClick={() => setTag(item)}>{item}</button>)}
|
||
</div>
|
||
<div className="sticky-list">
|
||
{tasks.map((task) => (
|
||
<article className={task.completed ? 'task-note completed' : 'task-note'} key={task.id}>
|
||
<button className="task-check" aria-label={task.completed ? '恢复计划' : '完成计划'} onClick={async () => { await updateTask(session, workspace.project.id, task); await refresh() }}><IconCheckCircle /></button>
|
||
<div><strong>{task.title}</strong><p>{task.summary || '暂无说明'}</p><span>{task.tag || '未分类'} · {task.createdAt}</span></div>
|
||
</article>
|
||
))}
|
||
{!tasks.length && <Empty description="当前筛选下没有计划" />}
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
function NotesView({ session, workspace, refresh }: ViewProps) {
|
||
const fileInput = useRef<HTMLInputElement>(null)
|
||
return (
|
||
<section className="mini-page">
|
||
<div className="page-title"><div><Title heading={5}>笔记资料</Title><Text type="secondary">项目资料随手可取</Text></div><Button type="primary" size="small" icon={<IconPlus />} onClick={() => fileInput.current?.click()}>上传</Button></div>
|
||
<input className="hidden-file" ref={fileInput} type="file" onChange={async (event) => { const file = event.target.files?.[0]; if (!file) return; await uploadSource(session, workspace.project.id, file); await refresh(); event.target.value = '' }} />
|
||
<div className="note-grid">
|
||
{workspace.notesSources.map((note, index) => <article className={`source-note tone-${index % 4}`} key={note.id}><IconFile /><strong>{note.title}</strong><p>{note.source || note.kind}</p><span>{note.tag || '资料'} · {note.updatedAt}</span></article>)}
|
||
{!workspace.notesSources.length && <Empty description="还没有笔记或资料" />}
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
function AIView({ session, workspace, experts, aiSessions, refresh }: ViewProps) {
|
||
const [query, setQuery] = useState('')
|
||
const [category, setCategory] = useState('全部')
|
||
const [expertId, setExpertId] = useState('')
|
||
const [prompt, setPrompt] = useState('')
|
||
const [sending, setSending] = useState(false)
|
||
const categories = [...new Set(experts.map((expert) => expert.categoryName))]
|
||
const visible = experts.filter((expert) => (category === '全部' || expert.categoryName === category) && `${expert.name}${expert.description}`.toLowerCase().includes(query.toLowerCase()))
|
||
const selected = experts.find((expert) => expert.id === expertId)
|
||
return (
|
||
<section className="mini-page ai-view">
|
||
<div className="page-title"><div><Title heading={5}>AI 会话</Title><Text type="secondary">先选择专家，再开始会话</Text></div><Tag color="purple">{experts.length} 位</Tag></div>
|
||
<Input prefix={<IconSearch />} value={query} onChange={setQuery} allowClear placeholder="搜索专家" />
|
||
<div className="filter-strip">
|
||
{['全部', ...categories].map((item) => <button className={category === item ? 'active' : ''} key={item} onClick={() => setCategory(item)}>{item}</button>)}
|
||
</div>
|
||
<div className="expert-strip">
|
||
{visible.slice(0, 30).map((expert) => <button className={expertId === expert.id ? 'active' : ''} key={expert.id} onClick={() => setExpertId(expert.id)}><i style={{ background: expert.color }}>{expert.emoji}</i><span><b>{expert.name}</b><small>{expert.categoryName}</small></span></button>)}
|
||
</div>
|
||
<div className="mini-composer">
|
||
<div className="selected-expert">{selected ? <><i style={{ background: selected.color }}>{selected.emoji}</i><span><b>{selected.name}</b><small>{selected.description}</small></span></> : <Text type="secondary">选择一位专家进行会话</Text>}</div>
|
||
<Input.TextArea value={prompt} onChange={setPrompt} autoSize={{ minRows: 3, maxRows: 6 }} placeholder={selected ? `向${selected.name}发送消息` : '请先选择专家'} />
|
||
<Button type="primary" long loading={sending} disabled={!selected || !prompt.trim()} onClick={async () => { if (!selected) return; setSending(true); try { await createAISession(session, workspace.project.id, selected.id, prompt.trim()); setPrompt(''); await refresh() } finally { setSending(false) } }}>开始会话</Button>
|
||
</div>
|
||
<div className="section-title"><strong>最近会话</strong></div>
|
||
<div className="session-list">{aiSessions.slice(0, 5).map((item) => <div key={item.id}><i style={{ background: item.expert?.color }}>{item.expert?.emoji || '🤖'}</i><span><b>{item.title}</b><small>{item.expert?.name || '森林AI'}</small></span></div>)}</div>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
function MoreView({ workspace, openAction }: ViewProps) {
|
||
return (
|
||
<section className="mini-page">
|
||
<div className="page-title"><div><Title heading={5}>更多</Title><Text type="secondary">项目周期安排与客户端信息</Text></div><Button size="small" icon={<IconPlus />} onClick={() => openAction('cron')}>计划任务</Button></div>
|
||
<div className="settings-card"><strong>计划任务</strong>{workspace.cronPlans.map((plan) => <div key={plan.id}><IconClockCircle /><span><b>{plan.title}</b><small>{plan.schedule} · {plan.enabled ? '已启用' : '已停用'}</small></span></div>)}{!workspace.cronPlans.length && <Text type="secondary">暂无周期计划</Text>}</div>
|
||
<div className="settings-card"><strong>停靠说明</strong><p>顶部箭头可将桌面窗口停靠至当前屏幕左侧或右侧。Web 模式会记住布局偏好，桌面模式会同时移动实际窗口。</p></div>
|
||
<div className="settings-card version-card"><img src="/senlinai-icon.svg" alt="" /><span><b>森林AI Mini</b><small>v1.0 完整版 · 窄屏停靠客户端</small></span></div>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
function Login({ onLogin }: { onLogin: (session: ApiSession) => void }) {
|
||
const [server, setServer] = useState('http://localhost:9150')
|
||
const [email, setEmail] = useState('demo@senlin.ai')
|
||
const [password, setPassword] = useState('password123')
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState('')
|
||
const [connection, setConnection] = useState<ConnectionStatus>('checking')
|
||
|
||
useEffect(() => {
|
||
const controller = new AbortController()
|
||
const timer = window.setTimeout(() => void checkConnection(controller.signal), 300)
|
||
return () => {
|
||
controller.abort()
|
||
window.clearTimeout(timer)
|
||
}
|
||
}, [server])
|
||
|
||
async function checkConnection(signal?: AbortSignal) {
|
||
setConnection('checking')
|
||
try {
|
||
const online = await checkServerConnection(server, signal)
|
||
if (!signal?.aborted) setConnection(online ? 'online' : 'offline')
|
||
} catch (requestError) {
|
||
if (!(requestError instanceof DOMException && requestError.name === 'AbortError')) setConnection('offline')
|
||
}
|
||
}
|
||
|
||
async function submitLogin() {
|
||
if (loading) return
|
||
setLoading(true)
|
||
setError('')
|
||
try {
|
||
onLogin(await login(server, email.trim(), password))
|
||
} catch (requestError) {
|
||
setError(errorMessage(requestError))
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="mini-login">
|
||
<form className="login-note" onSubmit={(event) => { event.preventDefault(); void submitLogin() }}>
|
||
<img src="/senlinai-icon.svg" alt="" />
|
||
<Title heading={3}>森林AI Mini</Title>
|
||
<Text type="secondary">停靠在屏幕一侧，随时记录与推进项目</Text>
|
||
<label>服务器地址<Input value={server} onChange={setServer} /></label>
|
||
<div className={`mini-connection ${connection}`} role="status">
|
||
<i />
|
||
<strong>{connection === 'checking' ? '正在检查' : connection === 'online' ? '连接正常' : '连接异常'}</strong>
|
||
<button type="button" onClick={() => void checkConnection()}>{connection === 'checking' ? '检查中' : '重新检查'}</button>
|
||
</div>
|
||
<label>邮箱<Input value={email} onChange={setEmail} /></label>
|
||
<label>密码<Input.Password value={password} onChange={setPassword} /></label>
|
||
{error ? <Alert type="error" content={error} /> : null}
|
||
<Button type="primary" htmlType="submit" long loading={loading}>连接工作台</Button>
|
||
<small>v1.0 完整版</small>
|
||
</form>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function ActionModal({ action, workspace, onClose, onProject, onTask, onCron }: {
|
||
action: Action
|
||
workspace: Workspace | null
|
||
onClose: () => void
|
||
onProject: (name: string) => Promise<void>
|
||
onTask: (title: string, tag: string) => Promise<void>
|
||
onCron: (title: string, schedule: string) => Promise<void>
|
||
}) {
|
||
const [title, setTitle] = useState('')
|
||
const [tag, setTag] = useState('')
|
||
const [schedule, setSchedule] = useState('0 9 * * 1-5')
|
||
const [loading, setLoading] = useState(false)
|
||
useEffect(() => { if (action) { setTitle(''); setTag(''); setSchedule('0 9 * * 1-5') } }, [action])
|
||
const labels = action === 'project' ? ['新建项目', '项目名称'] : action === 'task' ? ['新建计划', '计划标题'] : ['新建计划任务', '任务名称']
|
||
return (
|
||
<Modal className="mini-modal" visible={Boolean(action)} title={labels[0]} onCancel={onClose} footer={null} unmountOnExit>
|
||
<div className="mini-form">
|
||
<label>{labels[1]}<Input autoFocus value={title} onChange={setTitle} /></label>
|
||
{action === 'task' ? <label>标签<Select value={tag || undefined} placeholder="可选" onChange={setTag}>{workspace?.tags.filter((item) => item.name !== 'all' && item.name !== '全部').map((item) => <Select.Option key={item.id} value={item.name}>{item.name}</Select.Option>)}</Select></label> : null}
|
||
{action === 'cron' ? <label>Cron 表达式<Input value={schedule} onChange={setSchedule} /></label> : null}
|
||
<Button type="primary" long loading={loading} disabled={!title.trim()} onClick={async () => { setLoading(true); try { if (action === 'project') await onProject(title.trim()); if (action === 'task') await onTask(title.trim(), tag); if (action === 'cron') await onCron(title.trim(), schedule.trim()); onClose() } catch (requestError) { Message.error(errorMessage(requestError)) } finally { setLoading(false) } }}>保存</Button>
|
||
</div>
|
||
</Modal>
|
||
)
|
||
}
|
||
|
||
function readStoredSession(): ApiSession | null {
|
||
try {
|
||
const value = JSON.parse(localStorage.getItem('senlin-mini-session') || 'null') as ApiSession | null
|
||
return value?.baseUrl && value?.token ? value : null
|
||
} catch {
|
||
return null
|
||
}
|
||
}
|
||
|
||
function projectMark(project?: Project) {
|
||
if (!project) return <IconFolder />
|
||
if (project.icon && !['folder', 'project'].includes(project.icon)) return project.icon
|
||
const chars = Array.from(project.name.trim())
|
||
const chinese = chars.some((char) => /[\u3400-\u9fff]/.test(char))
|
||
return chars.slice(0, chinese ? 2 : 4).join('').toUpperCase()
|
||
}
|
||
|
||
function errorMessage(error: unknown) {
|
||
if (error instanceof ApiError || error instanceof Error) return error.message
|
||
return '操作失败，请稍后重试'
|
||
}
|
||
|
||
async function moveDesktopWindow(side: DockSide) {
|
||
if (!('__TAURI_INTERNALS__' in window)) return
|
||
try {
|
||
const { invoke } = await import('@tauri-apps/api/core')
|
||
await invoke('dock_window', { side })
|
||
} catch (requestError) {
|
||
Message.warning(errorMessage(requestError))
|
||
}
|
||
}
|