Jammy/TrueGrowth

Fork 0

Files

Jammy 3b6781d695 Initial TrueGrowth source import

2026-07-07 09:36:36 +08:00

4.7 KiB

Raw Blame History

Quickstart: 对话抽屉 (Chat Drawer)

Date: 2025-12-03 Feature: 001-chat-drawer

快速开始

环境准备

# 确保在项目根目录
cd /Users/liquid/code/self/aitu

# 安装依赖
npm install

# 启动开发服务器
npm start
# 访问 http://localhost:7200

开发工作流

# 类型检查
nx typecheck drawnix

# 代码检查
nx lint drawnix

# 运行测试
nx test drawnix

# 构建
nx build drawnix

文件位置

新建文件清单

packages/drawnix/src/
├── components/
│   └── chat-drawer/
│       ├── ChatDrawer.tsx          # 主组件
│       ├── ChatDrawerTrigger.tsx   # 触发按钮
│       ├── MessageList.tsx         # 消息列表
│       ├── MessageItem.tsx         # 单条消息
│       ├── MessageInput.tsx        # 输入框
│       ├── SessionList.tsx         # 会话列表
│       ├── SessionItem.tsx         # 单个会话
│       ├── AttachmentPreview.tsx   # 附件预览
│       ├── StreamingText.tsx       # 流式文本
│       ├── index.ts                # 导出入口
│       └── chat-drawer.scss        # 样式
├── hooks/
│   ├── useChatSessions.ts
│   ├── useChatMessages.ts
│   ├── useChatStream.ts
│   └── useChatStorage.ts
├── services/
│   └── chat-service.ts
├── types/
│   └── chat.types.ts
└── constants/
    └── CHAT_CONSTANTS.ts

需要修改的现有文件

packages/drawnix/src/
├── drawnix.tsx                    # 添加 ChatDrawer 组件
├── hooks/use-drawnix.tsx          # 扩展 DrawnixState 添加 chat 状态
└── styles/index.scss              # 导入 chat-drawer.scss

关键实现参考

1. 组件结构参考

参考 components/task-queue/TaskQueuePanel.tsx:

面板展开/收起动画
状态管理模式
BEM 样式命名

2. 存储实现参考

参考 services/storage-service.ts:

localforage 配置
异步存储操作
存储容量管理

3. 流式响应参考

参考 utils/gemini-api/:

API 调用模式
流式数据处理
错误处理

4. 样式参考

参考 components/task-queue/task-queue.scss:

BEM 命名规范
CSS 变量使用
响应式布局

集成步骤

Step 1: 创建类型定义

// packages/drawnix/src/types/chat.types.ts
// 从 specs/001-chat-drawer/contracts/chat-api.ts 复制接口定义

Step 2: 创建常量

// packages/drawnix/src/constants/CHAT_CONSTANTS.ts
export const CHAT_CONSTANTS = {
  MAX_SESSIONS: 50,
  MAX_MESSAGES_PER_SESSION: 100,
  // ...
};

Step 3: 实现存储服务

// packages/drawnix/src/services/chat-storage-service.ts
import localforage from 'localforage';

const chatStore = localforage.createInstance({
  name: 'aitu-chat',
  storeName: 'sessions',
});

Step 4: 实现 Hooks

// packages/drawnix/src/hooks/useChatStorage.ts
export function useChatStorage() {
  // 参考 useTaskStorage.ts 实现
}

Step 5: 实现组件

// packages/drawnix/src/components/chat-drawer/ChatDrawer.tsx
export const ChatDrawer: React.FC<ChatDrawerProps> = () => {
  // 实现
};

Step 6: 集成到主组件

// packages/drawnix/src/drawnix.tsx
import { ChatDrawer } from './components/chat-drawer';

// 在 Wrapper 组件内添加
<ChatDrawer />

测试验证

手动测试清单

抽屉展开/收起
- 点击触发按钮展开抽屉
- 点击收起按钮收起抽屉
- 动画流畅（60fps）
发送消息
- 输入文本并发送
- 显示加载状态
- 流式显示 AI 回复
对话历史
- 刷新页面后历史保留
- 关闭浏览器后历史保留
会话管理
- 创建新会话
- 切换会话
- 删除会话
附件功能
- 上传图片
- 上传文档
- 显示附件预览
响应式布局
- 桌面端自适应宽度
- 移动端全屏覆盖

常见问题

Q: 如何调试存储问题？

// 在浏览器控制台
const db = await localforage.createInstance({ name: 'aitu-chat' });
const sessions = await db.getItem('sessions');
console.log(sessions);

Q: 如何查看 AI API 请求？

打开浏览器开发者工具 → Network 标签 → 筛选 Fetch/XHR

Q: 组件样式不生效？

确保在 styles/index.scss 中导入了 chat-drawer.scss

4.7 KiB Raw Blame History Unescape Escape