# mind-echo-ai-web

**Repository Path**: zhishengevolution/mind-echo-ai-web

## Basic Information

- **Project Name**: mind-echo-ai-web
- **Description**: 可视化思考与知识沉淀引擎

思考有声，知识有形 —— 你的可视化思考引擎
- **Primary Language**: TypeScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-22
- **Last Updated**: 2026-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Mind Echo AI - 前端

## 项目简介

Mind Echo AI 是一个集知识管理、创意构思和表达录制于一体的智能应用，旨在帮助用户更高效地组织和表达思想。本仓库包含 Mind Echo AI 的前端代码。

## 技术栈

- **前端框架**: Vue 3 + TypeScript + Vite
- **状态管理**: Pinia
- **路由**: Vue Router
- **认证服务**: Supabase
- **白板工具**: Excalidraw
- **样式**: CSS Variables + 品牌指南
- **AI服务**: 与后端 AI 服务集成

## 项目结构

```
/src
  /modules            # 功能模块
    /ai               # AI服务模块
      /components     # AI相关组件
      /services       # AI相关服务
      /types          # AI相关类型定义
    /auth             # 认证模块
      /components     # 认证相关组件
      /services       # 认证相关服务
    /input            # 输入模块
      /components     # 输入相关组件
    /knowledge        # 知识管理模块
      /components     # 知识管理相关组件
      /services       # 知识管理相关服务
      /types          # 知识管理相关类型定义
    /project          # 项目管理模块
      /components     # 项目管理相关组件
      /services       # 项目管理相关服务
      /types          # 项目管理相关类型定义
    /recording        # 录制模块
      /components     # 录制相关组件
      /services       # 录制相关服务
      /types          # 录制相关类型定义
    /whiteboard       # 白板模块
      /components     # 白板相关组件
      /types          # 白板相关类型定义
  /assets             # 静态资源
  /components         # 通用组件
  /config             # 配置文件
  /router             # 路由配置
  /shared             # 共享资源
    /styles           # 共享样式
    /utils            # 共享工具函数
  /stores             # 状态管理
  /types              # 全局类型定义
  /views              # 页面视图
  /App.vue            # 应用根组件
  /main.ts            # 应用入口
  /style.css          # 全局样式

/public
  /brand              # 品牌资源
    /logos            # 品牌标志
    /typography       # 品牌字体和文本
    /README.md        # 品牌资源使用说明
    /brand-config.json # 品牌配置文件
  /brand-test.html    # 品牌资源测试页面
```

## 主要功能

1. **用户认证**: 集成 Supabase 认证服务，支持手机号和邮箱登录、注册
2. **知识管理**: 创建、编辑和管理知识卡片，支持多种卡片类型
3. **创意白板**: 使用 Excalidraw 进行创意构思和绘图
4. **表达录制**: 录制视频和音频，支持预览、暂停和继续录制
5. **AI 助手**: 与后端 AI 服务集成，支持生成文本响应和结构化输出
6. **项目管理**: 管理和组织项目，跟踪项目进度

## 设计风格

项目采用 Anthropic 品牌风格指南，主要特点包括：

- **颜色方案**:
  - 主色调: #d97757 (橙色)
  - 次要色调: #6a9bcc (蓝色)
  - 第三色调: #788c5d (绿色)
  - 背景色: #faf9f5 (浅色)
  - 文本色: #141413 (深色)

- **字体**:
  - 标题: Poppins
  - 正文: Lora

## 如何运行

### 开发环境

1. 安装依赖
   ```bash
   npm install
   ```

2. 配置环境变量
   - 打开 `.env` 文件
   - 添加以下 Supabase 配置：
     ```
     # Supabase 配置
     VITE_SUPABASE_URL=your-supabase-url
     VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
     ```

3. 启动前端开发服务器
   ```bash
   npm run dev
   ```

4. 构建生产版本
   ```bash
   npm run build
   ```

### 部署环境

#### 环境要求
- Node.js 16.x 或更高版本
- npm 7.x 或更高版本
- Supabase 项目（用于认证服务）
- 静态网站托管服务（如 Vercel, Netlify, AWS S3 等）

#### 部署步骤

1. **构建前端项目**：
   ```bash
   npm run build
   ```

2. **部署到静态网站托管服务**：
   - 将 `dist` 目录部署到你的静态网站托管服务
   - 配置环境变量（根据托管服务的要求）：
     - `VITE_SUPABASE_URL`
     - `VITE_SUPABASE_ANON_KEY`

## 环境变量配置

**前端环境变量 (.env)**
| 变量名 | 描述 | 示例值 |
|-------|------|-------|
| VITE_SUPABASE_URL | Supabase 项目 URL | https://your-project.supabase.co |
| VITE_SUPABASE_ANON_KEY | Supabase 匿名访问密钥 | ********************************************************************************************************************************************************** |

## 项目特点

- **模块化设计**: 按照功能模块划分代码，提高代码可维护性和可扩展性
- **类型安全**: 使用 TypeScript 确保代码类型安全
- **响应式布局**: 适配不同屏幕尺寸
- **统一的设计风格**: 遵循品牌指南，保持 UI 风格一致
- **丰富的功能**: 集成知识管理、白板、录制和AI助手功能
- **与后端分离**: 前端和后端分离为独立仓库，提高安全性

## 许可证

MIT License