智能会议记录系统

一个基于 Next.js 和 Supabase 的实时协同会议记录系统，支持多人实时编辑、任务管理、标签分类和文件上传功能。

功能特性

🚀 实时协同编辑 - 多人同时编辑会议笔记，实时显示在线状态和打字指示
📝 智能记录 - 支持富文本编辑、标签分类、截图插入等功能
📊 任务管理 - 创建和分配任务，跟踪进度和截止时间
📁 文件上传 - 支持拖拽上传会议资料，自动存储到 Supabase Storage
🔄 活动追踪 - 实时显示用户活动，记录完整的会议动态
🤖 AI 纪要总结 - 智能生成会议纪要总结

技术栈

前端: Next.js 15, React 18, TypeScript
UI 组件: shadcn/ui, Tailwind CSS
后端: Supabase (PostgreSQL, Realtime, Storage)
状态管理: React Hooks
实时通信: Supabase Realtime

快速开始

1. 环境配置

复制 .env.example 为 .env.local 并填入您的 Supabase 配置：

cp .env.example .env.local

# Supabase 配置
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

2. 数据库初始化

在 Supabase SQL 编辑器中依次执行以下脚本：

创建基础表结构：
```
-- 执行 scripts/01-create-tables.sql
```

3. AI服务配置

3.1 创建Supabase Edge Function

在Supabase项目中创建Edge Function来调用通义千问API，在Supabase控制台进入Edge Functions，点击 Deploy a new function -> Via Editor，在代码编辑器中粘贴下面代码，注意代码中要填入您的通义大模型apiKey，Function name 填写tongyi，然后点击 Deploy function。

// Setup type definitions for built-in Supabase Runtime APIs
import "jsr:@supabase/functions-js/edge-runtime.d.ts";
import { OpenAI } from "npm:openai@4.8.0";
// CORS headers
const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'authorization, apikey, content-type',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Content-Type': 'application/json,charset=utf-8'
};
const openai = new OpenAI({
  apiKey: "your api key",
  baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"
});
Deno.serve(async (req)=>{
  if (req.method === 'OPTIONS') {
    return new Response('ok', {
      headers: corsHeaders
    });
  }
  const { prompt } = await req.json();
  const response = await openai.chat.completions.create({
    model: "qwen-turbo",
    messages: [
      {
        role: "system",
        content: "你是一个专业的会议纪要助手，能够根据会议内容生成结构化的会议纪要。"
      },
      {
        role: "user",
        content: prompt
      }
    ]
  });
  return new Response(JSON.stringify({
    answer: response.choices[0].message.content
  }), {
    headers: corsHeaders
  });
});

4. Supabase Storage 配置

在 Supabase 控制台中创建名为 meeting-files 的存储桶
设置存储桶为私有（推荐）或公开
确保已执行上述存储策略脚本

5. 安装依赖

pnpm install

6. 启动开发服务器

pnpm dev

访问 http://localhost:3000 开始使用。

使用说明

创建会议

在首页点击”创建新会议”
输入会议标题和描述
系统自动生成协同编辑链接

加入会议

使用会议链接直接访问
或点击”体验演示会议”加入预设会议

文件上传

在会议页面右侧找到”会议资料”区域
拖拽文件到上传区域或点击选择文件
支持多种文件格式：图片、文档、压缩包等
上传后可下载或删除文件

实时协作

多人可同时编辑会议笔记
实时显示在线用户和打字状态
支持标签管理和任务分配
活动动态实时更新

AI会议纪要

在会议页面点击”生成会议纪要”按钮
AI将自动分析会议内容并生成结构化纪要
生成的纪要可以复制或下载为Markdown文件

项目结构

meeting-notes-system-v5/
├── app/                    # Next.js App Router
│   ├── meeting/[id]/      # 会议页面
│   └── page.tsx           # 首页
├── components/            # React 组件
│   ├── ui/               # shadcn/ui 组件
│   ├── CollaborativeEditor.tsx
│   ├── FileUpload.tsx    # 文件上传组件
│   └── ...
├── hooks/                # 自定义 Hooks
├── lib/                  # 工具库
│   ├── supabase.ts      # Supabase 客户端
│   └── ...
├── scripts/              # 数据库脚本
└── styles/               # 样式文件

故障排除

文件上传失败

确认 Supabase Storage 已正确配置
检查存储桶名称是否为 meeting-files
确认已执行存储权限策略脚本
检查浏览器控制台错误信息

实时功能不工作

确认 Supabase Realtime 已启用
检查数据库表是否已添加到实时发布
确认网络连接正常

数据库连接问题

检查环境变量配置
确认 Supabase 项目状态
验证 API 密钥权限

开发指南

添加新功能

在 components/ 目录创建新组件
在 hooks/ 目录添加相关逻辑
更新数据库结构（如需要）
添加相应的类型定义

样式定制

项目使用 Tailwind CSS，可通过修改 tailwind.config.ts 进行主题定制。