Move project page modules under pages

apps/senlinai-acro-react/src/pages/overview.tsx

@@ -1,7 +1,7 @@
 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 '../features/projects/project-data'
+import { aiSessions, inbox, notes, tasks } from './projects/project-data'
 
 const { Row, Col } = Grid
 const { Title, Text } = Typography

apps/senlinai-acro-react/src/pages/project.tsx

@@ -1,11 +1,11 @@
 import { Layout } from '@arco-design/web-react'
 import { OverviewPage } from './overview'
-import { ProjectInspector } from '../features/projects/project-inspector'
-import { ProjectRail } from '../features/projects/project-rail'
-import { ProjectSidebar } from '../features/projects/project-sidebar'
-import { ProjectStatusbar } from '../features/projects/project-statusbar'
-import { ProjectTopbar } from '../features/projects/project-topbar'
-import type { ChannelKey, Project, Theme } from '../features/projects/project-types'
+import { ProjectInspector } from './projects/project-inspector'
+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 } from './projects/project-types'
 
 const { Content } = Layout
 

apps/senlinai-acro-react/src/pages/projects/project-data.tsx

@@ -0,0 +1,53 @@
+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: '已将此讨论关联到任务：智能报表导出功能。' },
+]

apps/senlinai-acro-react/src/pages/projects/project-inspector.tsx

@@ -0,0 +1,70 @@
+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 } from './project-types'
+
+const { Sider } = Layout
+const { Title, Text, Paragraph } = Typography
+
+export function ProjectInspector({ activeProject, activeChannel, selectedItem }: { activeProject: Project; activeChannel: ChannelKey; selectedItem: string }) {
+  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={activeProject.name} /><Property label="频道" value={channels.find((c) => c.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>
+  )
+}

apps/senlinai-acro-react/src/pages/projects/project-rail.tsx

@@ -0,0 +1,25 @@
+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 } from './project-types'
+
+const { Sider } = Layout
+
+export function ProjectRail({ activeProject, onSelectProject }: { activeProject: Project; onSelectProject: (project: Project) => void }) {
+  return (
+    <Sider className="project-rail" width={96}>
+      <Button className="dashboard-button" icon={<IconDashboard />} />
+      <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={activeProject.id === project.id ? 'project-button active' : 'project-button'} onClick={() => onSelectProject(project)} style={{ '--project-color': project.color } as CSSProperties} title={project.name}>
+              {project.short}
+            </button>
+          </Badge>
+        ))}
+      </Space>
+      <Button className="create-project" aria-label="新建项目" icon={<IconPlus />} title="新建项目" />
+    </Sider>
+  )
+}

apps/senlinai-acro-react/src/pages/projects/project-sidebar.tsx

@@ -0,0 +1,35 @@
+import { Badge, Button, Divider, Layout, Space, Tag, Typography } from '@arco-design/web-react'
+import { IconDashboard, IconMore, IconSettings } from '@arco-design/web-react/icon'
+import { channels } from './project-data'
+import type { ChannelKey, Project } from './project-types'
+
+const { Sider } = Layout
+const { Title, Text } = Typography
+
+export function ProjectSidebar({ activeProject, activeChannel, onSelectChannel, onSelectItem }: { activeProject: Project; activeChannel: ChannelKey; onSelectChannel: (key: ChannelKey) => void; onSelectItem: (title: string) => void }) {
+  return (
+    <Sider className="channel-sidebar" width={248}>
+      <div className="project-title"><Space><IconDashboard /><Title heading={5}>{activeProject.name}</Title></Space><Button icon={<IconSettings />} size="mini" /></div>
+      <div className="channel-list">
+        {channels.map((channel) => (
+          <button key={channel.key} className={activeChannel === channel.key ? 'channel-button active' : 'channel-button'} onClick={() => onSelectChannel(channel.key)}>
+            <span className="channel-left">{channel.icon}<Text>{channel.label}</Text></span>
+            {channel.count !== undefined ? <Badge count={channel.count} maxCount={999} /> : <IconMore />}
+          </button>
+        ))}
+      </div>
+      <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></button>
+        ))}
+      </section>
+      <Divider />
+      <section className="tag-cloud">
+        <Text className="section-title">标签</Text>
+        <Space wrap>{['全部', '需求', '设计', '研发', '运营', 'AI'].map((tag) => <Tag key={tag} color={tag === '全部' ? 'arcoblue' : 'gray'}>{tag}</Tag>)}</Space>
+      </section>
+    </Sider>
+  )
+}

apps/senlinai-acro-react/src/pages/projects/project-statusbar.tsx

@@ -0,0 +1,19 @@
+import { Avatar, Button, Layout, Space, Typography } from '@arco-design/web-react'
+import { IconApps, IconCalendar, IconCheckCircleFill, IconMessage, IconRobot, IconSettings, IconStorage, IconThunderbolt, IconUserGroup } from '@arco-design/web-react/icon'
+
+const { Footer } = Layout
+const { Text } = Typography
+
+export function ProjectStatusbar() {
+  return (
+    <Footer className="statusbar">
+      <div className="status-user"><Avatar size={26} style={{ backgroundColor: '#165DFF' }}>张</Avatar><div><Text className="status-name">张明</Text><Text className="status-online">在线</Text></div><Button type="text" icon={<IconUserGroup />}>好友</Button><Button type="text" icon={<IconMessage />}>私信</Button><Button type="text" icon={<IconSettings />}>设置</Button></div>
+      <Space className="status-tasks" size={28}><span><IconCheckCircleFill /> 同步完成</span><span><IconInteractionFallback /> 3 个任务进行中</span><span><IconRobot /> AI 队列空闲</span><span><IconThunderbolt /> 本地草稿已保存</span></Space>
+      <Space className="status-system" size={24}><span><IconStorage /> 系统存储 152GB 可用</span><span>系统健康 <b>正常</b></span><IconApps /></Space>
+    </Footer>
+  )
+}
+
+function IconInteractionFallback() {
+  return <IconCalendar />
+}

apps/senlinai-acro-react/src/pages/projects/project-topbar.tsx

@@ -0,0 +1,29 @@
+import { Badge, Button, Input, Layout, Space, Typography } from '@arco-design/web-react'
+import { IconApps, IconArrowLeft, IconArrowRight, IconMoon, IconNotification, IconQuestionCircle, IconSearch, IconSun } from '@arco-design/web-react/icon'
+import type { Theme } from './project-types'
+
+const { Header } = Layout
+const { Text } = Typography
+
+export function ProjectTopbar({ theme, onToggleTheme }: { theme: Theme; onToggleTheme: () => void }) {
+  return (
+    <Header className="topbar">
+      <div className="brand-lockup">
+        <span className="brand-symbol">S</span>
+        <Text className="brand-name">SenlinAI</Text>
+      </div>
+      <div className="global-search" role="search">
+        <Input size="large" prefix={<IconSearch />} placeholder="搜索项目、频道、文档、任务、联系人..." />
+        <Button size="large" type="primary">搜索</Button>
+      </div>
+      <Space className="topbar-actions">
+        <Button aria-label={theme === 'dark' ? '切换浅色模式' : '切换深色模式'} icon={theme === 'dark' ? <IconSun /> : <IconMoon />} onClick={onToggleTheme} />
+        <Button icon={<IconArrowLeft />} disabled />
+        <Button icon={<IconArrowRight />} disabled />
+        <Badge count={8} dot><Button icon={<IconNotification />} /></Badge>
+        <Button icon={<IconQuestionCircle />} />
+        <Button icon={<IconApps />} />
+      </Space>
+    </Header>
+  )
+}

apps/senlinai-acro-react/src/pages/projects/project-types.ts

@@ -0,0 +1,21 @@
+import type { ReactElement } from 'react'
+
+export type Screen = 'login' | 'workbench'
+export type Theme = 'light' | 'dark'
+export type ChannelKey = 'overview' | 'inbox' | 'tasks' | 'ai' | 'notes' | 'cron' | 'research' | 'design'
+
+export type Project = {
+  id: string
+  name: string
+  short: string
+  badge: number
+  urgent?: boolean
+  color: string
+}
+
+export type ProjectChannel = {
+  key: ChannelKey
+  label: string
+  count?: number
+  icon: ReactElement
+}