智能化办公 - Dify 独立前端

基于 Next.js 15 和 Dify 后端 API 的独立前端应用，提供类似 NotebookLM 的三栏布局界面。

项目结构

src/
├── app/                      # Next.js App Router
│   ├── (auth)/              # 认证相关页面
│   │   ├── signin/          # 登录页
│   │   └── signup/          # 注册页
│   ├── (main)/              # 主应用布局（三栏）
│   │   ├── layout.tsx       # 三栏布局
│   │   ├── page.tsx         # 首页（聊天）
│   │   ├── conversations/   # 会话管理
│   │   ├── datasets/        # 知识库管理
│   │   └── notebooks/       # 笔记管理
│   ├── layout.tsx           # 根布局
│   ├── providers.tsx        # React Query Provider
│   └── globals.css          # 全局样式
├── components/
│   ├── ui/                  # 基础 UI 组件
│   │   ├── button.tsx
│   │   └── input.tsx
│   ├── layout/              # 布局组件
│   │   ├── top-nav.tsx      # 顶部导航
│   │   ├── left-sidebar.tsx # 左栏（来源）
│   │   ├── right-sidebar.tsx# 右栏（Studio）
│   │   └── status-bar.tsx   # 底部状态栏
│   ├── chat/                # 聊天组件
│   │   ├── chat-area.tsx
│   │   ├── message-list.tsx
│   │   ├── message-item.tsx
│   │   └── chat-input.tsx
│   ├── sources/             # 来源管理组件（待实现）
│   └── studio/              # Studio 工具组件（待实现）
├── services/
│   └── dify-client.ts       # Dify API 客户端
├── stores/
│   ├── auth-store.ts        # 认证状态 (Zustand)
│   └── chat-store.ts        # 聊天状态 (Zustand)
├── hooks/
│   └── use-chat.ts          # 聊天 Hook
├── lib/
│   └── utils.ts             # 工具函数
└── types/
    └── index.ts             # TypeScript 类型定义

已完成功能

阶段 1: 基础架构 ✅

• [x] Next.js 15 项目初始化
• [x] Tailwind CSS 4 + 暗色主题支持
• [x] Zustand 状态管理
• [x] TanStack Query 数据缓存
• [x] TypeScript 类型定义
• [x] Dify API 客户端封装

阶段 2: 认证系统

• [x] 登录页面
• [ ] 注册页面
• [ ] 密码找回
• [ ] OAuth 登录

阶段 3: 三栏布局 ✅

• [x] 主布局（响应式）
• [x] 顶部导航栏
• [x] 左侧边栏（来源管理）
• [x] 右侧边栏（Studio 工具）
• [x] 底部状态栏

阶段 4: 聊天功能 🟡

• [x] 聊天区域组件
• [x] 消息列表
• [x] 消息项（支持引用）
• [x] 聊天输入框（支持文件拖放）
• [x] 流式响应处理
• [ ] 会话管理（创建/删除/重命名）
• [ ] 会话历史加载

待实现功能

阶段 5: 来源管理

• [ ] 知识库列表和选择
• [ ] 文件上传组件
• [ ] 网站链接添加
• [ ] 来源状态监控

阶段 6: 笔记功能

• [ ] 笔记数据库设计
• [ ] 笔记 API 服务
• [ ] 笔记编辑器
• [ ] 笔记与会话关联

阶段 7: Studio 工具

• [ ] 音频概览（TTS）
• [ ] 报告生成
• [ ] 思维导图
• [ ] 闪卡/测验

阶段 8: 优化

• [ ] 性能优化（虚拟列表）
• [ ] 错误边界
• [ ] 加载状态优化
• [ ] 端到端测试

开发指南

环境配置

1. 复制 .env.local.example 到 .env.local
2. 配置 Dify 后端 API 地址：

   NEXT_PUBLIC_DIFY_API_URL=http://localhost:5001

启动开发服务器

npm run dev

访问 http://localhost:3000

构建生产版本

npm run build
npm start

API 集成

Dify API 端点

• 认证: /console/api/login, /console/api/register
• 聊天: /v1/chat-messages (支持流式)
• 会话: /v1/conversations
• 知识库: /console/api/datasets

添加新的 API 调用

在 src/services/dify-client.ts 中添加新方法：

async myNewMethod(params: MyParams): Promise<ApiResponse<MyResult>> {
  return this.fetch('/endpoint', {
    method: 'POST',
    body: JSON.stringify(params),
  })
}

状态管理

Auth Store

import { useAuthStore } from '@/stores/auth-store'

const { user, login, logout } = useAuthStore()

Chat Store

import { useChatStore } from '@/stores/chat-store'

const { messages, addMessage, updateMessage } = useChatStore()

技术栈

• 框架: Next.js 15 (App Router)
• 语言: TypeScript 5
• 样式: Tailwind CSS 4
• 状态管理: Zustand 5
• 数据获取: TanStack Query 5
• 图标: Lucide React
• UI 组件: 自研（基于 Shadcn/ui 设计）

下一步

1. 完成认证流程 - 注册、密码找回
2. 实现会话管理 - 加载历史会话、创建新会话
3. 集成知识库 - 来源选择、文件上传
4. 完善 Studio 工具 - 音频概览、报告生成

License

MIT