Connect React workspace to backend data

2026-07-20 13:02:26 +08:00
parent 215268e836
commit 875b326ddc
28 changed files with 1017 additions and 257 deletions
--- a/apps/senlinai-acro-react/scripts/structure-check.mjs
+++ b/apps/senlinai-acro-react/scripts/structure-check.mjs
@@ -12,13 +12,14 @@ const requiredFiles = [
  'src/pages/projects/project-ai.tsx',
  'src/pages/projects/project-notes.tsx',
  'src/pages/projects/project-cron.tsx',
-  'src/pages/projects/project-data.tsx',
  'src/pages/projects/project-rail.tsx',
  'src/pages/projects/project-sidebar.tsx',
  'src/pages/projects/project-topbar.tsx',
-  'src/pages/projects/project-inspector.tsx',
  'src/pages/projects/project-statusbar.tsx',
  'src/pages/projects/project-types.ts',
+  'src/api/client.ts',
+  'src/api/projects.ts',
+  'src/api/mappers.tsx',
 ]

 const failures = requiredFiles.filter((file) => !existsSync(file)).map((file) => `missing ${file}`)
@@ -27,6 +28,12 @@ if (existsSync('src/App.tsx')) {
  failures.push('legacy src/App.tsx should be removed after page split')
 }

+for (const removed of ['src/pages/projects/project-data.tsx', 'src/pages/projects/project-inspector.tsx']) {
+  if (existsSync(removed)) {
+    failures.push(`${removed} should be removed; frontend data must come from backend APIs`)
+  }
+}
+
 if (existsSync('src/app/App.tsx')) {
  const appSource = readFileSync('src/app/App.tsx', 'utf8')
  for (const forbidden of ['function LoginPage', 'function Workbench', 'function OverviewContent']) {
--- a/apps/senlinai-acro-react/src/api/client.ts
+++ b/apps/senlinai-acro-react/src/api/client.ts
@@ -0,0 +1,57 @@
+export type ApiSession = {
+  baseUrl: string
+  token: string
+}
+
+type RequestOptions = {
+  method?: string
+  body?: unknown
+  token?: string
+}
+
+let configuredBaseUrl = normalizeBaseUrl(import.meta.env.VITE_API_BASE_URL ?? 'http://127.0.0.1:18080')
+
+export function setApiBaseUrl(baseUrl: string) {
+  configuredBaseUrl = normalizeBaseUrl(baseUrl)
+}
+
+export function getApiBaseUrl() {
+  return configuredBaseUrl
+}
+
+export async function login(email: string, password: string): Promise<ApiSession> {
+  const response = await apiRequest<{ token: string }>('/api/auth/login', {
+    method: 'POST',
+    body: { email, password },
+  })
+  return { baseUrl: configuredBaseUrl, token: response.token }
+}
+
+export async function apiRequest<T>(path: string, options: RequestOptions = {}): Promise<T> {
+  const response = await fetch(`${configuredBaseUrl}${path}`, {
+    method: options.method ?? 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      ...(options.token ? { Authorization: `Bearer ${options.token}` } : {}),
+    },
+    body: options.body === undefined ? undefined : JSON.stringify(options.body),
+  })
+
+  if (!response.ok) {
+    let message = `请求失败：${response.status}`
+    try {
+      const payload = await response.json()
+      if (typeof payload.error === 'string') message = payload.error
+    } catch {
+      // Keep the status-based message when the server does not return JSON.
+    }
+    throw new Error(message)
+  }
+
+  return response.json() as Promise<T>
+}
+
+function normalizeBaseUrl(value: string) {
+  const trimmed = value.trim()
+  return trimmed.endsWith('/') ? trimmed.slice(0, -1) : trimmed
+}
--- a/apps/senlinai-acro-react/src/api/mappers.tsx
+++ b/apps/senlinai-acro-react/src/api/mappers.tsx
@@ -0,0 +1,165 @@
+import { IconClockCircle, IconEmail, IconFile, IconHome, IconLink, IconList, IconRobot, IconUserGroup } from '@arco-design/web-react/icon'
+import type {
+  BackendAISession,
+  BackendChannel,
+  BackendCronPlan,
+  BackendInboxMessage,
+  BackendNoteSource,
+  BackendProjectWorkspace,
+  BackendTask,
+} from './projects'
+import type { AISession, ChannelKey, CronJob, InboxItem, NoteSource, Project, ProjectChannel, ProjectWorkspace, TaskItem } from '../pages/projects/project-types'
+
+const projectColors = ['#165DFF', '#00B42A', '#722ED1', '#FF7D00', '#14C9C9', '#F53F3F']
+
+export function mapWorkspace(payload: BackendProjectWorkspace, index = 0): ProjectWorkspace {
+  const project: Project = {
+    id: String(payload.project.id),
+    name: payload.project.name,
+    short: payload.project.initials,
+    badge: payload.project.unreadCount,
+    urgent: payload.project.unreadCount > 20,
+    color: projectColors[index % projectColors.length],
+  }
+
+  return {
+    project,
+    channels: payload.channels.map(mapChannel),
+    tags: payload.tags.map((tag) => (tag === 'all' ? '全部' : tag)),
+    recentSessions: payload.recentSessions.map(mapAISession),
+    inbox: payload.inbox.map(mapInbox),
+    tasks: payload.tasks.map(mapTask),
+    aiSessions: payload.aiSessions.map(mapAISession),
+    notes: payload.notesSources.map(mapNoteSource),
+    cronJobs: payload.cronPlans.map(mapCronPlan),
+  }
+}
+
+function mapChannel(channel: BackendChannel): ProjectChannel {
+  return {
+    id: channel.id,
+    key: mapChannelKey(channel.type, channel.id),
+    label: channelLabel(channel),
+    count: channel.count,
+    icon: channelIcon(channel),
+    url: channel.url,
+    sortOrder: channel.sortOrder,
+  }
+}
+
+function mapChannelKey(type: string, id = ''): ChannelKey {
+  switch (type) {
+    case 'inbox':
+      return 'inbox'
+    case 'tasks':
+      return 'tasks'
+    case 'ai_sessions':
+      return 'ai'
+    case 'notes_sources':
+      return 'notes'
+    case 'cron':
+      return 'cron'
+    case 'overview':
+      return 'overview'
+    default:
+      return `custom:${id || type}`
+  }
+}
+
+function channelLabel(channel: BackendChannel) {
+  switch (channel.type) {
+    case 'overview':
+      return '概况'
+    case 'inbox':
+      return 'Inbox 消息流'
+    case 'tasks':
+      return '工作计划'
+    case 'ai_sessions':
+      return 'AI 会话'
+    case 'notes_sources':
+      return '笔记资料'
+    case 'cron':
+      return 'Cron 计划任务'
+    default:
+      return channel.title
+  }
+}
+
+function channelIcon(channel: BackendChannel) {
+  switch (channel.type) {
+    case 'overview':
+      return <IconHome />
+    case 'inbox':
+      return <IconEmail />
+    case 'tasks':
+      return <IconList />
+    case 'ai_sessions':
+      return <IconRobot />
+    case 'notes_sources':
+      return <IconFile />
+    case 'cron':
+      return <IconClockCircle />
+    default:
+      return channel.icon === 'user' ? <IconUserGroup /> : <IconLink />
+  }
+}
+
+function mapInbox(item: BackendInboxMessage): InboxItem {
+  return {
+    id: item.id,
+    title: item.title,
+    meta: `来源：${item.source}`,
+    owner: '系统',
+    time: item.time,
+    tag: item.tag || item.status,
+    summary: item.summary,
+    status: item.status,
+  }
+}
+
+function mapTask(task: BackendTask): TaskItem {
+  return {
+    id: task.id,
+    title: task.title,
+    owner: task.owner,
+    progress: task.completed ? '100%' : '60%',
+    due: task.due || '未设置',
+    tag: task.tag || (task.completed ? '已完成' : '进行中'),
+    summary: task.summary,
+    completed: task.completed,
+  }
+}
+
+function mapAISession(session: BackendAISession): AISession {
+  return {
+    id: session.id,
+    title: session.title,
+    summary: session.summary,
+    owner: 'AI',
+    time: session.updatedAt,
+  }
+}
+
+function mapNoteSource(note: BackendNoteSource): NoteSource {
+  return {
+    id: note.id,
+    title: note.title,
+    type: note.kind === 'note' ? '笔记' : note.source,
+    updated: note.updatedAt,
+    owner: note.source,
+    source: note.source,
+  }
+}
+
+function mapCronPlan(plan: BackendCronPlan): CronJob {
+  return {
+    id: plan.id,
+    name: plan.title,
+    expr: plan.schedule,
+    status: plan.enabled ? '运行中' : '暂停',
+    lastRun: plan.lastResult,
+    nextRun: plan.nextRun || '暂停中',
+    owner: plan.owner,
+    enabled: plan.enabled,
+  }
+}
--- a/apps/senlinai-acro-react/src/api/projects.ts
+++ b/apps/senlinai-acro-react/src/api/projects.ts
@@ -0,0 +1,96 @@
+import { apiRequest, type ApiSession } from './client'
+
+export type BackendProject = {
+  ID?: number
+  id?: number
+  Name?: string
+  name?: string
+  Description?: string
+  description?: string
+}
+
+export type BackendWorkspaceProject = {
+  id: number
+  name: string
+  description: string
+  initials: string
+  unreadCount: number
+}
+
+export type BackendChannel = {
+  id: string
+  projectID: number
+  type: string
+  title: string
+  icon: string
+  count?: number
+  url?: string
+  sortOrder: number
+}
+
+export type BackendInboxMessage = {
+  id: string
+  source: string
+  title: string
+  summary: string
+  status: string
+  tag: string
+  time: string
+}
+
+export type BackendTask = {
+  id: string
+  title: string
+  summary: string
+  completed: boolean
+  owner: string
+  due: string
+  tag: string
+}
+
+export type BackendAISession = {
+  id: string
+  title: string
+  summary: string
+  updatedAt: string
+  references: string[]
+}
+
+export type BackendNoteSource = {
+  id: string
+  kind: string
+  title: string
+  updatedAt: string
+  tag: string
+  source: string
+}
+
+export type BackendCronPlan = {
+  id: string
+  title: string
+  schedule: string
+  nextRun: string
+  enabled: boolean
+  lastResult: string
+  owner: string
+}
+
+export type BackendProjectWorkspace = {
+  project: BackendWorkspaceProject
+  channels: BackendChannel[]
+  tags: string[]
+  recentSessions: BackendAISession[]
+  inbox: BackendInboxMessage[]
+  tasks: BackendTask[]
+  aiSessions: BackendAISession[]
+  notesSources: BackendNoteSource[]
+  cronPlans: BackendCronPlan[]
+}
+
+export async function fetchProjects(session: ApiSession) {
+  return apiRequest<BackendProject[]>('/api/projects', { token: session.token })
+}
+
+export async function fetchProjectWorkspace(session: ApiSession, projectID: string | number) {
+  return apiRequest<BackendProjectWorkspace>(`/api/projects/${projectID}/workspace`, { token: session.token })
+}
--- a/apps/senlinai-acro-react/src/app/App.tsx
+++ b/apps/senlinai-acro-react/src/app/App.tsx
@@ -1,42 +1,76 @@
 import { useState } from 'react'
-import { ConfigProvider } from '@arco-design/web-react'
+import { ConfigProvider, Message, Spin } from '@arco-design/web-react'
 import '@arco-design/web-react/dist/css/arco.css'
 import '../App.css'
+import { login, setApiBaseUrl, type ApiSession } from '../api/client'
+import { mapWorkspace } from '../api/mappers'
+import { fetchProjectWorkspace, fetchProjects } from '../api/projects'
 import { LoginPage } from '../pages/login'
 import { ProjectPage } from '../pages/project'
-import { projects } from '../pages/projects/project-data'
-import type { ChannelKey, Screen, Theme, WorkbenchView } from '../pages/projects/project-types'
+import type { ChannelKey, ProjectWorkspace, Screen, Theme, WorkbenchView } from '../pages/projects/project-types'

 function App() {
  const [screen, setScreen] = useState<Screen>('login')
  const [theme, setTheme] = useState<Theme>('light')
  const [activeView, setActiveView] = useState<WorkbenchView>('workspace')
-  const [activeProject, setActiveProject] = useState(projects[0])
+  const [session, setSession] = useState<ApiSession | null>(null)
+  const [workspaces, setWorkspaces] = useState<ProjectWorkspace[]>([])
+  const [activeProjectID, setActiveProjectID] = useState<string>('')
  const [activeChannel, setActiveChannel] = useState<ChannelKey>('overview')
  const [, setSelectedItem] = useState('Inbox 待处理（36）')
+  const [loading, setLoading] = useState(false)

  const dark = theme === 'dark'
+  const activeWorkspace = workspaces.find((workspace) => workspace.project.id === activeProjectID) ?? workspaces[0]
+
+  async function handleLogin(input: { server: string; email: string; password: string }) {
+    setLoading(true)
+    try {
+      setApiBaseUrl(input.server)
+      const nextSession = await login(input.email, input.password)
+      const backendProjects = await fetchProjects(nextSession)
+      const backendWorkspaces = await Promise.all(
+        backendProjects.map((project, index) => fetchProjectWorkspace(nextSession, project.ID ?? project.id ?? '').then((workspace) => mapWorkspace(workspace, index))),
+      )
+      setSession(nextSession)
+      setWorkspaces(backendWorkspaces)
+      setActiveProjectID(backendWorkspaces[0]?.project.id ?? '')
+      setActiveChannel('overview')
+      setActiveView('workspace')
+      setScreen('workbench')
+    } catch (error) {
+      Message.error(error instanceof Error ? error.message : '登录失败')
+    } finally {
+      setLoading(false)
+    }
+  }

  return (
    <ConfigProvider>
      <main className={dark ? 'app theme-dark' : 'app'}>
        {screen === 'login' ? (
-          <LoginPage onLogin={() => setScreen('workbench')} />
-        ) : (
+          <Spin loading={loading} style={{ width: '100%' }}>
+            <LoginPage onLogin={handleLogin} />
+          </Spin>
+        ) : activeWorkspace && session ? (
          <ProjectPage
            activeView={activeView}
-            activeProject={activeProject}
+            activeWorkspace={activeWorkspace}
+            workspaces={workspaces}
            activeChannel={activeChannel}
            theme={theme}
            onSelectWorkspace={() => setActiveView('workspace')}
            onSelectProject={(project) => {
-              setActiveProject(project)
+              setActiveProjectID(project.id)
              setActiveView('project')
+              setActiveChannel('overview')
            }}
            onSelectChannel={setActiveChannel}
            onSelectItem={setSelectedItem}
            onToggleTheme={() => setTheme(dark ? 'light' : 'dark')}
          />
+        ) : (
+          <Spin loading />
        )}
      </main>
    </ConfigProvider>
--- a/apps/senlinai-acro-react/src/pages/login.tsx
+++ b/apps/senlinai-acro-react/src/pages/login.tsx
@@ -5,8 +5,10 @@ import { IconBook, IconCheckCircleFill, IconLaunch, IconSafe, IconUserGroup } fr

 const { Title, Text, Paragraph } = Typography

-export function LoginPage({ onLogin }: { onLogin: () => void }) {
-  const [server, setServer] = useState('https://10.0.0.15:8080')
+export function LoginPage({ onLogin }: { onLogin: (input: { server: string; email: string; password: string }) => void }) {
+  const [server, setServer] = useState('http://127.0.0.1:8080')
+  const [email, setEmail] = useState('demo@senlin.ai')
+  const [password, setPassword] = useState('password123')

  return (
    <section className="login-screen">
@@ -34,10 +36,10 @@ export function LoginPage({ onLogin }: { onLogin: () => void }) {
              <Input value={server} onChange={setServer} placeholder="例如：https://10.0.0.15:8080" suffix={<IconLaunch />} />
            </Form.Item>
            <Form.Item label="账号">
-              <Input placeholder="请输入用户名或邮箱" />
+              <Input value={email} onChange={setEmail} placeholder="请输入用户名或邮箱" />
            </Form.Item>
            <Form.Item label="密码">
-              <Input.Password placeholder="请输入密码" />
+              <Input.Password value={password} onChange={setPassword} placeholder="请输入密码" />
            </Form.Item>
            <div className="login-row">
              <Space size={8}>
@@ -46,7 +48,7 @@ export function LoginPage({ onLogin }: { onLogin: () => void }) {
              </Space>
              <Button type="text" size="mini">无法连接?</Button>
            </div>
-            <Button type="primary" long size="large" onClick={onLogin}>
+            <Button type="primary" long size="large" onClick={() => onLogin({ server, email, password })}>
              登录
            </Button>
            <div className="connection-card">
--- a/apps/senlinai-acro-react/src/pages/project.tsx
+++ b/apps/senlinai-acro-react/src/pages/project.tsx
@@ -5,13 +5,14 @@ import { ProjectRail } from './projects/project-rail'
 import { ProjectSidebar } from './projects/project-sidebar'
 import { ProjectStatusbar } from './projects/project-statusbar'
 import { ProjectTopbar } from './projects/project-topbar'
-import type { ChannelKey, Project, Theme, WorkbenchView } from './projects/project-types'
+import type { ChannelKey, Project, ProjectWorkspace, Theme, WorkbenchView } from './projects/project-types'

 const { Content } = Layout

 export function ProjectPage({
  activeView,
-  activeProject,
+  activeWorkspace,
+  workspaces,
  activeChannel,
  theme,
  onSelectProject,
@@ -21,7 +22,8 @@ export function ProjectPage({
  onToggleTheme,
 }: {
  activeView: WorkbenchView
-  activeProject: Project
+  activeWorkspace: ProjectWorkspace
+  workspaces: ProjectWorkspace[]
  activeChannel: ChannelKey
  theme: Theme
  onSelectProject: (project: Project) => void
@@ -31,6 +33,7 @@ export function ProjectPage({
  onToggleTheme: () => void
 }) {
  const isWorkspace = activeView === 'workspace'
+  const projects = workspaces.map((workspace) => workspace.project)

  return (
    <Layout className="workbench-shell">
@@ -38,7 +41,8 @@ export function ProjectPage({

      <Layout className="workbench-main" hasSider>
        <ProjectRail
-          activeProject={activeProject}
+          activeProject={activeWorkspace.project}
+          projects={projects}
          activeView={activeView}
          onSelectWorkspace={onSelectWorkspace}
          onSelectProject={onSelectProject}
@@ -47,7 +51,7 @@ export function ProjectPage({
        {!isWorkspace && (
          <ProjectSidebar
            activeView={activeView}
-            activeProject={activeProject}
+            activeWorkspace={activeWorkspace}
            activeChannel={activeChannel}
            onSelectChannel={onSelectChannel}
            onSelectItem={onSelectItem}
@@ -56,11 +60,11 @@ export function ProjectPage({

        <Content className="stage">
          {isWorkspace ? (
-            <WorkspacePage onSelectProject={onSelectProject} />
+            <WorkspacePage workspaces={workspaces} onSelectProject={onSelectProject} />
          ) : (
            <ProjectChannelPage
              activeChannel={activeChannel}
-              activeProject={activeProject}
+              activeWorkspace={activeWorkspace}
              onSelectItem={onSelectItem}
            />
          )}
--- a/apps/senlinai-acro-react/src/pages/projects/project-ai.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-ai.tsx
@@ -1,7 +1,6 @@
 import { Avatar, Button, Card, Input, Space, Tag, Typography } from '@arco-design/web-react'
 import { IconPlus, IconRobot, IconSend } from '@arco-design/web-react/icon'
-import { aiSessions } from './project-data'
-import type { Project } from './project-types'
+import type { ProjectWorkspace } from './project-types'

 const { Title, Text, Paragraph } = Typography

@@ -11,13 +10,16 @@ const messages = [
  { role: 'user', text: '把建议拆成可执行任务。' },
 ]

-export function ProjectAi({ activeProject, onSelectItem }: { activeProject: Project; onSelectItem: (title: string) => void }) {
+export function ProjectAi({ activeWorkspace, onSelectItem }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void }) {
+  const { aiSessions, project } = activeWorkspace
+  const selected = aiSessions[0]
+
  return (
    <div className="project-channel-page project-ai-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>AI 会话</Title>
-          <Text type="secondary">{activeProject.name} 的项目内 AI session，左侧会话列表，右侧对话详情。</Text>
+          <Text type="secondary">{project.name} 的项目内 AI session，左侧会话列表，右侧对话详情。</Text>
        </div>
        <Button type="primary" icon={<IconPlus />}>新建会话</Button>
      </div>
@@ -43,7 +45,7 @@ export function ProjectAi({ activeProject, onSelectItem }: { activeProject: Proj

        <Card className="ai-chat-panel queue-section" bordered>
          <div className="section-header">
-            <Title heading={6}>{aiSessions[0].title}</Title>
+            <Title heading={6}>{selected?.title ?? '暂无会话'}</Title>
            <Tag color="green">队列空闲</Tag>
          </div>
          <div className="chat-thread">
--- a/apps/senlinai-acro-react/src/pages/projects/project-channel-page.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-channel-page.tsx
@@ -4,32 +4,30 @@ import { ProjectInbox } from './project-inbox'
 import { ProjectNotes } from './project-notes'
 import { ProjectOverview } from './project-overview'
 import { ProjectTasks } from './project-tasks'
-import type { ChannelKey, Project } from './project-types'
+import type { ChannelKey, ProjectWorkspace } from './project-types'

 export function ProjectChannelPage({
  activeChannel,
-  activeProject,
+  activeWorkspace,
  onSelectItem,
 }: {
  activeChannel: ChannelKey
-  activeProject: Project
+  activeWorkspace: ProjectWorkspace
  onSelectItem: (title: string) => void
 }) {
  switch (activeChannel) {
    case 'inbox':
-      return <ProjectInbox activeProject={activeProject} onSelectItem={onSelectItem} />
+      return <ProjectInbox activeWorkspace={activeWorkspace} onSelectItem={onSelectItem} />
    case 'tasks':
-      return <ProjectTasks activeProject={activeProject} onSelectItem={onSelectItem} />
+      return <ProjectTasks activeWorkspace={activeWorkspace} onSelectItem={onSelectItem} />
    case 'ai':
-      return <ProjectAi activeProject={activeProject} onSelectItem={onSelectItem} />
+      return <ProjectAi activeWorkspace={activeWorkspace} onSelectItem={onSelectItem} />
    case 'notes':
-      return <ProjectNotes activeProject={activeProject} onSelectItem={onSelectItem} />
+      return <ProjectNotes activeWorkspace={activeWorkspace} onSelectItem={onSelectItem} />
    case 'cron':
-      return <ProjectCron activeProject={activeProject} onSelectItem={onSelectItem} />
+      return <ProjectCron activeWorkspace={activeWorkspace} onSelectItem={onSelectItem} />
    case 'overview':
-    case 'research':
-    case 'design':
    default:
-      return <ProjectOverview onSelectItem={onSelectItem} />
+      return <ProjectOverview activeWorkspace={activeWorkspace} onSelectItem={onSelectItem} />
  }
 }
--- a/apps/senlinai-acro-react/src/pages/projects/project-cron.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-cron.tsx
@@ -1,23 +1,20 @@
 import { Button, Card, Space, Switch, Tag, Typography } from '@arco-design/web-react'
 import { IconClockCircle, IconPlus, IconThunderbolt } from '@arco-design/web-react/icon'
-import type { Project } from './project-types'
+import type { ProjectWorkspace } from './project-types'

 const { Title, Text } = Typography

-const cronJobs = [
-  { name: '每日竞品价格抓取', expr: '0 8 * * *', status: '运行中', lastRun: '今天 08:00', nextRun: '明天 08:00', owner: '李明' },
-  { name: '周报摘要生成', expr: '0 18 * * 5', status: '运行中', lastRun: '上周五 18:00', nextRun: '本周五 18:00', owner: '张伟' },
-  { name: '过期任务提醒', expr: '*/30 9-18 * * 1-5', status: '暂停', lastRun: '昨天 17:30', nextRun: '暂停中', owner: '系统' },
-  { name: '资料索引刷新', expr: '0 */4 * * *', status: '运行中', lastRun: '今天 12:00', nextRun: '今天 16:00', owner: '系统' },
-]
+export function ProjectCron({ activeWorkspace, onSelectItem }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void }) {
+  const { cronJobs, project } = activeWorkspace
+  const enabledCount = cronJobs.filter((job) => job.enabled).length
+  const pausedCount = cronJobs.length - enabledCount

-export function ProjectCron({ activeProject, onSelectItem }: { activeProject: Project; onSelectItem: (title: string) => void }) {
  return (
    <div className="project-channel-page project-cron-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>Cron 计划任务</Title>
-          <Text type="secondary">{activeProject.name} 的定时任务、自动检查和周期性 AI 工作。</Text>
+          <Text type="secondary">{project.name} 的定时任务、自动检查和周期性 AI 工作。</Text>
        </div>
        <Button type="primary" icon={<IconPlus />}>新建计划</Button>
      </div>
@@ -26,8 +23,8 @@ export function ProjectCron({ activeProject, onSelectItem }: { activeProject: Pr
        <div className="section-header">
          <Title heading={6}>任务列表</Title>
          <Space>
-            <Tag color="green">3 运行中</Tag>
-            <Tag color="gray">1 暂停</Tag>
+            <Tag color="green">{enabledCount} 运行中</Tag>
+            <Tag color="gray">{pausedCount} 暂停</Tag>
          </Space>
        </div>
        {cronJobs.map((job) => (
@@ -42,12 +39,12 @@ export function ProjectCron({ activeProject, onSelectItem }: { activeProject: Pr
            }}
          >
            <span className="row-title"><IconClockCircle /> {job.name}</span>
-            <Tag color={job.status === '运行中' ? 'green' : 'gray'}>{job.status}</Tag>
+            <Tag color={job.enabled ? 'green' : 'gray'}>{job.status}</Tag>
            <span>{job.expr}</span>
            <span>{job.lastRun}</span>
            <span>{job.nextRun}</span>
            <span>{job.owner}</span>
-            <Switch size="small" checked={job.status === '运行中'} />
+            <Switch size="small" checked={job.enabled} />
          </div>
        ))}
      </Card>
--- a/apps/senlinai-acro-react/src/pages/projects/project-data.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-data.tsx
@@ -1,53 +0,0 @@
-import { IconClockCircle, IconEmail, IconFile, IconHome, IconLink, IconList, IconRobot, IconUserGroup } from '@arco-design/web-react/icon'
-import type { Project, ProjectChannel } from './project-types'
-
-export const projects: Project[] = [
-  { id: 'a1', name: '项目 A1', short: 'A1', badge: 635, urgent: true, color: '#165DFF' },
-  { id: 'a2', name: '项目 A2', short: 'PM', badge: 36, color: '#00B42A' },
-  { id: 'b1', name: '项目 B1', short: 'DS', badge: 4, urgent: true, color: '#722ED1' },
-  { id: 'c3', name: '项目 C3', short: 'OP', badge: 45, color: '#FF7D00' },
-]
-
-export const channels: ProjectChannel[] = [
-  { key: 'overview', label: '概况', count: 635, icon: <IconHome /> },
-  { key: 'inbox', label: 'Inbox 消息流', count: 36, icon: <IconEmail /> },
-  { key: 'tasks', label: '工作计划', count: 12, icon: <IconList /> },
-  { key: 'ai', label: 'AI 会话', count: 4, icon: <IconRobot /> },
-  { key: 'notes', label: '笔记资料', count: 343, icon: <IconFile /> },
-  { key: 'cron', label: 'Cron 计划任务', count: 45, icon: <IconClockCircle /> },
-  { key: 'research', label: '客户研究频道', icon: <IconUserGroup /> },
-  { key: 'design', label: '产品设计频道', icon: <IconLink /> },
-]
-
-export const inbox = [
-  { title: '竞争对手定价更新监控', meta: '来源：产品研究 · 竞品追踪', owner: '李明', time: '2 小时前', tag: '市场情报' },
-  { title: '客户反馈：导出功能报错', meta: '来源：客户支持 · 工单 #CS-1287', owner: '王芳', time: '4 小时前', tag: '客户反馈' },
-  { title: 'API 调用策略评估建议', meta: '来源：后端架构讨论', owner: '张伟', time: '6 小时前', tag: '架构' },
-  { title: '更新需求文档 v1.3.2', meta: '来源：产品需求 · 文档评审', owner: '陈晨', time: '昨天', tag: '需求文档' },
-]
-
-export const tasks = [
-  { title: '智能报表导出功能', owner: '张伟', progress: '60%', due: '2026-07-24', tag: '进行中' },
-  { title: '企业版权限体系梳理', owner: '李明', progress: '30%', due: '2026-07-28', tag: '进行中' },
-  { title: 'Q3 营销策略制定', owner: '王芳', progress: '45%', due: '2026-07-31', tag: '进行中' },
-]
-
-export const aiSessions = [
-  { title: '生成 Q3 营销策略初稿', summary: '基于市场分析和竞品数据，输出 Q3 营销策略重点...', owner: '张伟', time: '今天 08:47' },
-  { title: '产品定价模型讨论', summary: '针对企业版与标准版定价模型进行对比分析...', owner: '李明', time: '昨天 16:05' },
-  { title: '客户流失原因分析', summary: '分析近三个月客户流失数据与反馈原因...', owner: '王芳', time: '昨天 10:22' },
-  { title: '行业趋势与机会洞察', summary: '围绕 AI 在企业协同领域的趋势与机会...', owner: '张伟', time: '7 月 18 日' },
-]
-
-export const notes = [
-  { title: '用户权限体系设计文档 v2.1', type: '文档', updated: '2026-07-19', owner: '李明' },
-  { title: '导出功能技术方案评审', type: '文档', updated: '2026-07-18', owner: '张伟' },
-  { title: '2026 Q3 竞品功能对比表', type: '表格', updated: '2026-07-18', owner: '王芳' },
-]
-
-export const discussions = [
-  { name: '李明', time: '2026-07-20 09:12', text: '关于导出报错的问题，已在测试环境复现，初步定位为权限校验逻辑异常。' },
-  { name: '张伟', time: '2026-07-20 09:18', text: '@李明 麻烦同步修复预计完成时间，我这边需要同步给客户。' },
-  { name: '王芳', time: '2026-07-20 10:05', text: '补充：客户反馈影响范围主要集中在企业版用户。' },
-  { name: '系统通知', time: '2026-07-20 10:30', text: '已将此讨论关联到任务：智能报表导出功能。' },
-]
--- a/apps/senlinai-acro-react/src/pages/projects/project-inbox.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-inbox.tsx
@@ -1,7 +1,6 @@
 import { Button, Card, Grid, Space, Tag, Typography } from '@arco-design/web-react'
 import { IconArchive, IconEmail, IconRefresh, IconSend, IconStar } from '@arco-design/web-react/icon'
-import { inbox } from './project-data'
-import type { Project } from './project-types'
+import type { ProjectWorkspace } from './project-types'

 const { Row, Col } = Grid
 const { Title, Text, Paragraph } = Typography
@@ -12,7 +11,8 @@ const folders = [
  { label: '已归档', count: 42, color: 'gray' },
 ]

-export function ProjectInbox({ activeProject, onSelectItem }: { activeProject: Project; onSelectItem: (title: string) => void }) {
+export function ProjectInbox({ activeWorkspace, onSelectItem }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void }) {
+  const { inbox, project } = activeWorkspace
  const selected = inbox[0]

  return (
@@ -20,7 +20,7 @@ export function ProjectInbox({ activeProject, onSelectItem }: { activeProject: P
      <div className="overview-head">
        <div>
          <Title heading={4}>Inbox 消息流</Title>
-          <Text type="secondary">{activeProject.name} 的邮件式收件箱，聚合外部反馈、系统通知和待处理线索。</Text>
+          <Text type="secondary">{project.name} 的邮件式收件箱，聚合外部反馈、系统通知和待处理线索。</Text>
        </div>
        <Space>
          <Button icon={<IconRefresh />}>刷新</Button>
@@ -65,13 +65,13 @@ export function ProjectInbox({ activeProject, onSelectItem }: { activeProject: P

        <Card className="mail-detail queue-section" bordered>
          <div className="section-header">
-            <Title heading={6}>{selected.title}</Title>
+            <Title heading={6}>{selected?.title ?? '暂无消息'}</Title>
            <Space>
              <Button type="text" icon={<IconStar />} />
              <Button type="text" icon={<IconSend />} />
            </Space>
          </div>
-          <Text type="secondary">{selected.meta} · {selected.owner}</Text>
+          <Text type="secondary">{selected ? `${selected.meta} · ${selected.owner}` : '真实接口暂无消息'}</Text>
          <Paragraph>
            已收到新的项目消息，需要判断是否转为任务、笔记或资料。当前建议先补充影响范围，再同步给相关负责人。
          </Paragraph>
--- a/apps/senlinai-acro-react/src/pages/projects/project-inspector.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-inspector.tsx
@@ -1,97 +0,0 @@
-import { Avatar, Button, Divider, Input, Layout, Message, Space, Tabs, Typography } from '@arco-design/web-react'
-import { IconLink, IconMessage, IconMore } from '@arco-design/web-react/icon'
-import { channels, discussions } from './project-data'
-import type { ChannelKey, Project, WorkbenchView } from './project-types'
-
-const { Sider } = Layout
-const { Title, Text, Paragraph } = Typography
-
-export function ProjectInspector({
-  activeView,
-  activeProject,
-  activeChannel,
-  selectedItem,
-}: {
-  activeView: WorkbenchView
-  activeProject: Project
-  activeChannel: ChannelKey
-  selectedItem: string
-}) {
-  const workspaceMode = activeView === 'workspace'
-
-  return (
-    <Sider className="inspector" width={360}>
-      <Tabs defaultActiveTab="discussion">
-        <Tabs.TabPane key="discussion" title="讨论">
-          <InspectorDiscussion selectedItem={selectedItem} />
-        </Tabs.TabPane>
-        <Tabs.TabPane key="props" title="属性">
-          <div className="property-list">
-            <Property label="所属项目" value={workspaceMode ? '全部项目' : activeProject.name} />
-            <Property label="频道" value={workspaceMode ? '工作台总览' : channels.find((channel) => channel.key === activeChannel)?.label ?? '概况'} />
-            <Property label="创建人" value="张伟" />
-            <Property label="更新时间" value="2026-07-20 10:30" />
-          </div>
-        </Tabs.TabPane>
-        <Tabs.TabPane key="more" title="更多">
-          <Space direction="vertical" className="more-actions">
-            <Button long>复制链接</Button>
-            <Button long>标记已处理</Button>
-            <Button long status="danger">归档对象</Button>
-          </Space>
-        </Tabs.TabPane>
-      </Tabs>
-    </Sider>
-  )
-}
-
-function InspectorDiscussion({ selectedItem }: { selectedItem: string }) {
-  return (
-    <div className="discussion-panel">
-      <div className="inspector-title">
-        <Title heading={5}>关于「{selectedItem}」</Title>
-        <Button size="mini" icon={<IconMore />} />
-      </div>
-      <Text type="secondary">注：同一对象的讨论与协作记录</Text>
-      <Divider />
-      <Space direction="vertical" size={18} className="discussion-list">
-        {discussions.map((item) => (
-          <div className="discussion-item" key={`${item.name}-${item.time}`}>
-            <Avatar size={30}>{item.name.slice(0, 1)}</Avatar>
-            <div>
-              <Space>
-                <Text className="discussion-name">{item.name}</Text>
-                <Text type="secondary">{item.time}</Text>
-              </Space>
-              <Paragraph>{item.text}</Paragraph>
-              <Button type="text" size="mini">回复</Button>
-            </div>
-          </div>
-        ))}
-      </Space>
-      <div className="comment-box">
-        <Input.TextArea placeholder="写下你的评论，Enter 发送，⌘ + Enter 换行" autoSize={{ minRows: 3, maxRows: 4 }} />
-        <div className="comment-actions">
-          <Space>
-            <Button type="text" icon={<IconAttachmentFallback />} />
-            <Button type="text" icon={<IconMessage />} />
-          </Space>
-          <Button type="primary" onClick={() => Message.success('评论已发送（原型）')}>发送</Button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function IconAttachmentFallback() {
-  return <IconLink />
-}
-
-function Property({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="property-row">
-      <Text type="secondary">{label}</Text>
-      <Text>{value}</Text>
-    </div>
-  )
-}
--- a/apps/senlinai-acro-react/src/pages/projects/project-notes.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-notes.tsx
@@ -1,19 +1,20 @@
 import { Button, Card, Space, Tag, Typography } from '@arco-design/web-react'
 import { IconFile, IconFolder, IconPlus, IconSearch } from '@arco-design/web-react/icon'
-import { notes } from './project-data'
-import type { Project } from './project-types'
+import type { ProjectWorkspace } from './project-types'

 const { Title, Text } = Typography

 const folders = ['需求文档', '技术方案', '会议纪要', '竞品资料']

-export function ProjectNotes({ activeProject, onSelectItem }: { activeProject: Project; onSelectItem: (title: string) => void }) {
+export function ProjectNotes({ activeWorkspace, onSelectItem }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void }) {
+  const { notes, project } = activeWorkspace
+
  return (
    <div className="project-channel-page project-notes-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>笔记资料</Title>
-          <Text type="secondary">{activeProject.name} 的在线文件管理页，集中管理笔记、资料和附件。</Text>
+          <Text type="secondary">{project.name} 的在线文件管理页，集中管理笔记、资料和附件。</Text>
        </div>
        <Space>
          <Button icon={<IconSearch />}>搜索资料</Button>
--- a/apps/senlinai-acro-react/src/pages/projects/project-overview.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-overview.tsx
@@ -1,19 +1,20 @@
 import { useMemo } from 'react'
 import { Button, Card, Grid, Space, Tag, Typography } from '@arco-design/web-react'
 import { IconCalendar, IconCheckCircleFill, IconClockCircle, IconEmail, IconFile, IconMore, IconRobot } from '@arco-design/web-react/icon'
-import { aiSessions, inbox, notes, tasks } from './project-data'
+import type { InboxItem, ProjectWorkspace } from './project-types'

 const { Row, Col } = Grid
 const { Title, Text } = Typography

-export function ProjectOverview({ onSelectItem }: { onSelectItem: (title: string) => void }) {
+export function ProjectOverview({ activeWorkspace, onSelectItem }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void }) {
+  const { inbox, tasks, aiSessions, notes, cronJobs } = activeWorkspace
  const metrics = useMemo(() => [
-    { title: 'Inbox 待处理', value: 36, delta: '较昨日 -8', icon: <IconEmail />, color: 'arcoblue' },
-    { title: '进行中的任务', value: 12, delta: '较昨日 -2', icon: <IconCheckCircleFill />, color: 'green' },
-    { title: 'AI 会话活跃', value: 4, delta: '较昨日 +1', icon: <IconRobot />, color: 'purple' },
-    { title: '笔记资料总数', value: 343, delta: '较昨日 +5', icon: <IconFile />, color: 'cyan' },
-    { title: '计划任务', value: 45, delta: '较昨日 +0', icon: <IconClockCircle />, color: 'orange' },
-  ], [])
+    { title: 'Inbox 待处理', value: inbox.length, delta: '实时接口', icon: <IconEmail />, color: 'arcoblue' },
+    { title: '进行中的任务', value: tasks.filter((task) => !task.completed).length, delta: '实时接口', icon: <IconCheckCircleFill />, color: 'green' },
+    { title: 'AI 会话活跃', value: aiSessions.length, delta: '实时接口', icon: <IconRobot />, color: 'purple' },
+    { title: '笔记资料总数', value: notes.length, delta: '实时接口', icon: <IconFile />, color: 'cyan' },
+    { title: '计划任务', value: cronJobs.length, delta: '实时接口', icon: <IconClockCircle />, color: 'orange' },
+  ], [aiSessions.length, cronJobs.length, inbox.length, notes.length, tasks])

  return (
    <div className="overview-page">
@@ -44,15 +45,15 @@ export function ProjectOverview({ onSelectItem }: { onSelectItem: (title: string
        ))}
      </Row>

-      <QueueSection title="Inbox 待处理（36）" items={inbox} onSelectItem={onSelectItem} />
-      <TaskSection onSelectItem={onSelectItem} />
-      <AISessionSection onSelectItem={onSelectItem} />
-      <NoteSection onSelectItem={onSelectItem} />
+      <QueueSection title={`Inbox 待处理（${inbox.length}）`} items={inbox} onSelectItem={onSelectItem} />
+      <TaskSection tasks={tasks} onSelectItem={onSelectItem} />
+      <AISessionSection aiSessions={aiSessions} onSelectItem={onSelectItem} />
+      <NoteSection notes={notes} onSelectItem={onSelectItem} />
    </div>
  )
 }

-function QueueSection({ title, items, onSelectItem }: { title: string; items: typeof inbox; onSelectItem: (title: string) => void }) {
+function QueueSection({ title, items, onSelectItem }: { title: string; items: InboxItem[]; onSelectItem: (title: string) => void }) {
  return (
    <Card className="queue-section" bordered>
      <div className="section-header">
@@ -72,11 +73,11 @@ function QueueSection({ title, items, onSelectItem }: { title: string; items: ty
  )
 }

-function TaskSection({ onSelectItem }: { onSelectItem: (title: string) => void }) {
+function TaskSection({ tasks, onSelectItem }: { tasks: ProjectWorkspace['tasks']; onSelectItem: (title: string) => void }) {
  return (
    <Card className="queue-section" bordered>
      <div className="section-header">
-        <Title heading={6}>进行中的任务（12）</Title>
+        <Title heading={6}>进行中的任务（{tasks.length}）</Title>
        <Button type="text" size="mini">查看全部</Button>
      </div>
      {tasks.map((task) => (
@@ -92,11 +93,11 @@ function TaskSection({ onSelectItem }: { onSelectItem: (title: string) => void }
  )
 }

-function AISessionSection({ onSelectItem }: { onSelectItem: (title: string) => void }) {
+function AISessionSection({ aiSessions, onSelectItem }: { aiSessions: ProjectWorkspace['aiSessions']; onSelectItem: (title: string) => void }) {
  return (
    <Card className="queue-section" bordered>
      <div className="section-header">
-        <Title heading={6}>AI 会话（4）</Title>
+        <Title heading={6}>AI 会话（{aiSessions.length}）</Title>
        <Button type="text" size="mini">查看全部</Button>
      </div>
      {aiSessions.map((session) => (
@@ -111,7 +112,7 @@ function AISessionSection({ onSelectItem }: { onSelectItem: (title: string) => v
  )
 }

-function NoteSection({ onSelectItem }: { onSelectItem: (title: string) => void }) {
+function NoteSection({ notes, onSelectItem }: { notes: ProjectWorkspace['notes']; onSelectItem: (title: string) => void }) {
  return (
    <Card className="queue-section" bordered>
      <div className="section-header">
--- a/apps/senlinai-acro-react/src/pages/projects/project-rail.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-rail.tsx
@@ -1,18 +1,19 @@
 import type { CSSProperties } from 'react'
 import { Badge, Button, Layout, Space } from '@arco-design/web-react'
 import { IconDashboard, IconPlus } from '@arco-design/web-react/icon'
-import { projects } from './project-data'
 import type { Project, WorkbenchView } from './project-types'

 const { Sider } = Layout

 export function ProjectRail({
  activeProject,
+  projects,
  activeView,
  onSelectWorkspace,
  onSelectProject,
 }: {
  activeProject: Project
+  projects: Project[]
  activeView: WorkbenchView
  onSelectWorkspace: () => void
  onSelectProject: (project: Project) => void
--- a/apps/senlinai-acro-react/src/pages/projects/project-sidebar.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-sidebar.tsx
@@ -1,32 +1,32 @@
 import { Badge, Button, Divider, Layout, Space, Tag, Typography } from '@arco-design/web-react'
 import { IconApps, IconDashboard, IconMore, IconSettings } from '@arco-design/web-react/icon'
-import { channels } from './project-data'
-import type { ChannelKey, Project, WorkbenchView } from './project-types'
+import type { ChannelKey, ProjectWorkspace, WorkbenchView } from './project-types'

 const { Sider } = Layout
 const { Title, Text } = Typography

 export function ProjectSidebar({
  activeView,
-  activeProject,
+  activeWorkspace,
  activeChannel,
  onSelectChannel,
  onSelectItem,
 }: {
  activeView: WorkbenchView
-  activeProject: Project
+  activeWorkspace: ProjectWorkspace
  activeChannel: ChannelKey
  onSelectChannel: (key: ChannelKey) => void
  onSelectItem: (title: string) => void
 }) {
  const workspaceMode = activeView === 'workspace'
+  const channels = activeWorkspace.channels

  return (
    <Sider className="channel-sidebar" width={248}>
      <div className="project-title">
        <Space>
          {workspaceMode ? <IconApps /> : <IconDashboard />}
-          <Title heading={5}>{workspaceMode ? '工作台' : activeProject.name}</Title>
+          <Title heading={5}>{workspaceMode ? '工作台' : activeWorkspace.project.name}</Title>
        </Space>
        <Button icon={<IconSettings />} size="mini" />
      </div>
@@ -36,7 +36,7 @@ export function ProjectSidebar({
          <>
            <button className="channel-button active">
              <span className="channel-left"><IconDashboard /><Text>工作台总览</Text></span>
-              <Badge count={4} />
+            <Badge count={channels.length} />
            </button>
            <button className="channel-button">
              <span className="channel-left"><IconApps /><Text>全部项目</Text></span>
@@ -46,7 +46,7 @@ export function ProjectSidebar({
        ) : (
          channels.map((channel) => (
            <button
-              key={channel.key}
+              key={channel.id}
              className={activeChannel === channel.key ? 'channel-button active' : 'channel-button'}
              onClick={() => onSelectChannel(channel.key)}
            >
@@ -61,7 +61,7 @@ export function ProjectSidebar({
      <section className="tag-cloud">
        <Text className="section-title">标签</Text>
        <Space wrap>
-          {['全部', '需求', '设计', '研发', '运营', 'AI'].map((tag) => (
+          {activeWorkspace.tags.map((tag) => (
            <Tag key={tag} color={tag === '全部' ? 'arcoblue' : 'gray'}>{tag}</Tag>
          ))}
        </Space>
@@ -70,10 +70,10 @@ export function ProjectSidebar({
      <Divider />
      <section className="recent-sessions">
        <Text className="section-title">最近会话</Text>
-        {['需求评审要点整理', '生成 Q3 营销策略初稿', 'npx 安装 skill 至 codex', '产品定价模型讨论'].map((title, index) => (
-          <button key={title} onClick={() => onSelectItem(title)}>
-            <Text>{title}</Text>
-            <Text type="secondary">{index === 0 ? '09:15' : index === 1 ? '08:47' : '昨天'}</Text>
+        {activeWorkspace.recentSessions.slice(0, 4).map((session) => (
+          <button key={session.id} onClick={() => onSelectItem(session.title)}>
+            <Text>{session.title}</Text>
+            <Text type="secondary">{session.time}</Text>
          </button>
        ))}
      </section>
--- a/apps/senlinai-acro-react/src/pages/projects/project-tasks.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-tasks.tsx
@@ -1,23 +1,18 @@
 import { Button, Card, Progress, Space, Tag, Typography } from '@arco-design/web-react'
 import { IconCalendar, IconCheckCircle, IconPlus, IconUser } from '@arco-design/web-react/icon'
-import { tasks } from './project-data'
-import type { Project } from './project-types'
+import type { ProjectWorkspace, TaskItem } from './project-types'

 const { Title, Text } = Typography

-const lanes = [
-  { title: '待开始', color: 'gray', items: ['权限边界确认', '客户案例素材整理'] },
-  { title: '进行中', color: 'arcoblue', items: tasks.map((task) => task.title) },
-  { title: '已完成', color: 'green', items: ['项目模板初始化', '会议纪要归档'] },
-]
-
-export function ProjectTasks({ activeProject, onSelectItem }: { activeProject: Project; onSelectItem: (title: string) => void }) {
+export function ProjectTasks({ activeWorkspace, onSelectItem }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void }) {
+  const { tasks, project } = activeWorkspace
+  const lanes = makeLanes(tasks)
  return (
    <div className="project-channel-page project-tasks-page overview-page">
      <div className="overview-head">
        <div>
          <Title heading={4}>工作计划</Title>
-          <Text type="secondary">{activeProject.name} 的 TODO 计划、负责人和截止时间。</Text>
+          <Text type="secondary">{project.name} 的 TODO 计划、负责人和截止时间。</Text>
        </div>
        <Button type="primary" icon={<IconPlus />}>新建任务</Button>
      </div>
@@ -59,3 +54,13 @@ export function ProjectTasks({ activeProject, onSelectItem }: { activeProject: P
    </div>
  )
 }
+
+function makeLanes(tasks: TaskItem[]) {
+  const done = tasks.filter((task) => task.completed)
+  const active = tasks.filter((task) => !task.completed)
+  return [
+    { title: '待开始', color: 'gray', items: active.slice(0, 1).map((task) => task.title) },
+    { title: '进行中', color: 'arcoblue', items: active.map((task) => task.title) },
+    { title: '已完成', color: 'green', items: done.length ? done.map((task) => task.title) : ['暂无已完成任务'] },
+  ]
+}
--- a/apps/senlinai-acro-react/src/pages/projects/project-types.ts
+++ b/apps/senlinai-acro-react/src/pages/projects/project-types.ts
@@ -3,7 +3,7 @@ import type { ReactElement } from 'react'
 export type Screen = 'login' | 'workbench'
 export type Theme = 'light' | 'dark'
 export type WorkbenchView = 'workspace' | 'project'
-export type ChannelKey = 'overview' | 'inbox' | 'tasks' | 'ai' | 'notes' | 'cron' | 'research' | 'design'
+export type ChannelKey = 'overview' | 'inbox' | 'tasks' | 'ai' | 'notes' | 'cron' | `custom:${string}`

 export type Project = {
  id: string
@@ -16,7 +16,72 @@ export type Project = {

 export type ProjectChannel = {
  key: ChannelKey
+  id: string
  label: string
  count?: number
  icon: ReactElement
+  url?: string
+  sortOrder: number
+}
+
+export type InboxItem = {
+  id: string
+  title: string
+  meta: string
+  owner: string
+  time: string
+  tag: string
+  summary: string
+  status: string
+}
+
+export type TaskItem = {
+  id: string
+  title: string
+  owner: string
+  progress: string
+  due: string
+  tag: string
+  summary: string
+  completed: boolean
+}
+
+export type AISession = {
+  id: string
+  title: string
+  summary: string
+  owner: string
+  time: string
+}
+
+export type NoteSource = {
+  id: string
+  title: string
+  type: string
+  updated: string
+  owner: string
+  source: string
+}
+
+export type CronJob = {
+  id: string
+  name: string
+  expr: string
+  status: string
+  lastRun: string
+  nextRun: string
+  owner: string
+  enabled: boolean
+}
+
+export type ProjectWorkspace = {
+  project: Project
+  channels: ProjectChannel[]
+  tags: string[]
+  recentSessions: AISession[]
+  inbox: InboxItem[]
+  tasks: TaskItem[]
+  aiSessions: AISession[]
+  notes: NoteSource[]
+  cronJobs: CronJob[]
 }
--- a/apps/senlinai-acro-react/src/pages/workspace.tsx
+++ b/apps/senlinai-acro-react/src/pages/workspace.tsx
@@ -6,13 +6,17 @@ import {
  IconFile,
  IconRobot,
 } from '@arco-design/web-react/icon'
-import { aiSessions, inbox, notes, projects, tasks } from './projects/project-data'
-import type { Project } from './projects/project-types'
+import type { Project, ProjectWorkspace } from './projects/project-types'

 const { Row, Col } = Grid
 const { Title, Text } = Typography

-export function WorkspacePage({ onSelectProject }: { onSelectProject: (project: Project) => void }) {
+export function WorkspacePage({ workspaces, onSelectProject }: { workspaces: ProjectWorkspace[]; onSelectProject: (project: Project) => void }) {
+  const projects = workspaces.map((workspace) => workspace.project)
+  const inbox = workspaces.flatMap((workspace) => workspace.inbox)
+  const tasks = workspaces.flatMap((workspace) => workspace.tasks).filter((task) => !task.completed)
+  const aiSessions = workspaces.flatMap((workspace) => workspace.aiSessions)
+  const notes = workspaces.flatMap((workspace) => workspace.notes)
  const totalProjectBadges = projects.reduce((sum, project) => sum + project.badge, 0)
  const urgentProjects = projects.filter((project) => project.urgent).length
  const workspaceMetrics = [