Move project overview under project pages

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

@@ -0,0 +1,132 @@
+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'
+
+const { Row, Col } = Grid
+const { Title, Text } = Typography
+
+export function ProjectOverview({ onSelectItem }: { onSelectItem: (title: string) => void }) {
+  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' },
+  ], [])
+
+  return (
+    <div className="overview-page">
+      <div className="overview-head">
+        <div>
+          <Text type="secondary">项目整体快照，帮助你快速了解项目动态</Text>
+          <Title heading={4}>概况</Title>
+        </div>
+        <Space>
+          <Button icon={<IconCalendar />}>2026-07-20</Button>
+          <Button icon={<IconMore />} />
+        </Space>
+      </div>
+
+      <Row gutter={12} className="metric-row">
+        {metrics.map((metric) => (
+          <Col span={24 / metrics.length} key={metric.title}>
+            <Card className="metric-card" bordered>
+              <Space align="start">
+                <Tag color={metric.color}>{metric.icon}</Tag>
+                <div>
+                  <Text type="secondary">{metric.title}</Text>
+                  <Title heading={3}>{metric.value}</Title>
+                  <Text className="metric-delta">{metric.delta}</Text>
+                </div>
+              </Space>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+
+      <QueueSection title="Inbox 待处理（36）" items={inbox} onSelectItem={onSelectItem} />
+      <TaskSection onSelectItem={onSelectItem} />
+      <AISessionSection onSelectItem={onSelectItem} />
+      <NoteSection onSelectItem={onSelectItem} />
+    </div>
+  )
+}
+
+function QueueSection({ title, items, onSelectItem }: { title: string; items: typeof inbox; onSelectItem: (title: string) => void }) {
+  return (
+    <Card className="queue-section" bordered>
+      <div className="section-header">
+        <Title heading={6}>{title}</Title>
+        <Button type="text" size="mini">查看全部</Button>
+      </div>
+      {items.map((item) => (
+        <button key={item.title} className="data-row" onClick={() => onSelectItem(item.title)}>
+          <span className="row-title"><IconFile /> {item.title}</span>
+          <span>{item.meta}</span>
+          <Tag>{item.tag}</Tag>
+          <span>{item.owner}</span>
+          <time>{item.time}</time>
+        </button>
+      ))}
+    </Card>
+  )
+}
+
+function TaskSection({ onSelectItem }: { onSelectItem: (title: string) => void }) {
+  return (
+    <Card className="queue-section" bordered>
+      <div className="section-header">
+        <Title heading={6}>进行中的任务（12）</Title>
+        <Button type="text" size="mini">查看全部</Button>
+      </div>
+      {tasks.map((task) => (
+        <button key={task.title} className="data-row task-row" onClick={() => onSelectItem(task.title)}>
+          <span className="row-title"><IconCheckCircleFill /> {task.title}</span>
+          <Tag color="arcoblue">{task.tag}</Tag>
+          <span>进度 {task.progress}</span>
+          <span>负责人 {task.owner}</span>
+          <time>截止 {task.due}</time>
+        </button>
+      ))}
+    </Card>
+  )
+}
+
+function AISessionSection({ onSelectItem }: { onSelectItem: (title: string) => void }) {
+  return (
+    <Card className="queue-section" bordered>
+      <div className="section-header">
+        <Title heading={6}>AI 会话（4）</Title>
+        <Button type="text" size="mini">查看全部</Button>
+      </div>
+      {aiSessions.map((session) => (
+        <button key={session.title} className="data-row ai-row" onClick={() => onSelectItem(session.title)}>
+          <span className="row-title"><IconRobot /> {session.title}</span>
+          <span>{session.summary}</span>
+          <span>{session.owner}</span>
+          <time>{session.time}</time>
+        </button>
+      ))}
+    </Card>
+  )
+}
+
+function NoteSection({ onSelectItem }: { onSelectItem: (title: string) => void }) {
+  return (
+    <Card className="queue-section" bordered>
+      <div className="section-header">
+        <Title heading={6}>最近笔记资料（5）</Title>
+        <Button type="text" size="mini">查看全部</Button>
+      </div>
+      {notes.map((note) => (
+        <button key={note.title} className="data-row note-row" onClick={() => onSelectItem(note.title)}>
+          <span className="row-title"><IconFile /> {note.title}</span>
+          <Tag>{note.type}</Tag>
+          <span>更新于 {note.updated}</span>
+          <span>{note.owner}</span>
+        </button>
+      ))}
+    </Card>
+  )
+}