# 前端

**Repository Path**: ai_sst/front

## Basic Information

- **Project Name**: 前端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-14
- **Last Updated**: 2026-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# my-app — AI 需求分析与 SST 拆分助手

基于 **React 19 + Vite 8** 构建的智能化需求管理前端应用，集成 OpenCode 大模型对话能力，支持需求澄清、完整度评估、SST 子任务拆分、文件管理与会话管理。

---

## ✨ 核心功能

| 功能模块       | 说明                                      |
| ---------- | --------------------------------------- |
| 🤖 AI 需求分析 | 与 OpenCode 后端对话，自动提取需求结构化信息并计算完整度       |
| 📊 需求完整度评估 | 基于内置模板（背景、目标、价值、优先级、业务价值等）实时评分          |
| 📁 SST 拆分  | 将确认后的需求拆分为多个子任务（SST），支持自定义数量与调整         |
| 📝 需求提交    | 一键提交至需求管理平台，生成需求编号并同步到 Jira             |
| 💬 会话管理    | 支持新建、切换、删除 OpenCode 会话，本地缓存会话标题         |
| 📂 文件管理    | 集成 FileBrowser，支持浏览、上传、下载、新建文件夹、拖拽加载到聊天 |
| 🗂️ 草稿中心   | 内置产品、设计、技术方案三类草稿，支持继续编辑                 |
| 🎯 多模型/多技能 | 支持切换多个 AI 模型与技能包（需求分析、架构设计、代码生成等）       |

---

## 🛠 技术栈

- **框架**：React 19 + Vite 8
- **样式**：Tailwind CSS 4 + `@tailwindcss/typography`
- **动画**：Framer Motion
- **Markdown 渲染**：`react-markdown` + `rehype-raw` + `remark-gfm`
- **工具库**：clsx、tailwind-merge
- **代码规范**：ESLint 9 + `eslint-plugin-react-hooks`

---

## 📦 安装与运行

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 代码检查
npm run lint
```

---

## 🖥 依赖服务本地启动

前端开发环境需要同时启动以下两个本地服务，对应 `vite.config.js` 中的代理配置：

### OpenCode 服务（端口 8087）

启动 headless 模式，提供会话与消息 API：

```bash
opencode serve --port 8087
```

> 如需同时打开 OpenCode Web UI，可另起终端执行：
> 
> ```bash
> opencode web --port 4096
> ```

### FileBrowser 服务（端口 8086）

使用官方二进制启动（示例）：

```bash
filebrowser -p 8086 -r /path/to/files -d /path/to/filebrowser.db
```

或使用 Docker：

```bash
docker run -d \
  -v /path/to/files:/srv \
  -v /path/to/filebrowser.db:/database.db \
  -p 8086:80 \
  filebrowser/filebrowser
```

> 默认管理员账号/密码：`admin` / `admin`，首次登录后建议立即修改。

---

### 后管服务（端口 8081）

```bash
1.clone工程 git clone https://gitee.com/ai_sst/backend.git
2.安装依赖
cd backend
npm install

3.启动服务
npm start
```

### 需求管理接口服务（端口 8082）

```bash
下载 https://gitee.com/ai_sst/mcp-startlink
本地启动端口 8081
```

## 🔧 关键配置

### Vite 代理配置（`vite.config.js`）

| 代理路径                | 目标服务                    | 说明                 |
| ------------------- | ----------------------- | ------------------ |
| `/api/opencode`     | `http://127.0.0.1:8087` | OpenCode 会话与消息 API |
| `/api/requirements` | `http://127.0.0.1:8081` | 需求管理后台 API         |
| `/api/filebrowser`  | `127.0.0.1:8086`        | FileBrowser 文件管理代理 |

> **注意**：FileBrowser 代理插件（`plugins/filebrowser-proxy.js`）会自动处理登录认证与 Token 刷新，配置中的用户名密码请根据实际环境修改。

### 环境变量

| 变量名                         | 默认值                | 说明                   |
| --------------------------- | ------------------ | -------------------- |
| `VITE_OPENCODE_BASE_URL`    | `/api/opencode`    | OpenCode API 基础路径    |
| `VITE_FILEBROWSER_BASE_URL` | `/api/filebrowser` | FileBrowser API 基础路径 |

---

## 📂 项目结构

```
my-app/
├── public/                  # 静态资源
├── plugins/
│   └── filebrowser-proxy.js # FileBrowser Vite 代理插件
├── src/
│   ├── components/          # UI 组件
│   │   ├── chat/            # 聊天相关组件（消息气泡、输入框、操作按钮）
│   │   ├── common/          # 通用组件（加载动画、文件图标、复制按钮）
│   │   ├── layout/          # 布局组件
│   │   ├── modals/          # 弹窗组件
│   │   └── ui/              # 基础 UI 组件（Button、Card）
│   ├── config/
│   │   ├── constants.js     # 角色配置等常量
│   │   └── templates.js     # 需求模板、SST 模板、完整度评估逻辑
│   ├── hooks/
│   │   ├── useChat.js       # 聊天状态与消息发送逻辑
│   │   ├── useRequirement.js# 需求状态、SST 拆分、提交逻辑
│   │   └── useSessions.js   # 会话列表管理
│   ├── services/
│   │   ├── opencode.js      # OpenCode API 封装
│   │   └── filebrowser.js   # FileBrowser API 封装
│   ├── utils/
│   │   ├── agents.js        # AI Agent 调用逻辑
│   │   └── helpers.js       # 通用工具函数
│   ├── App.jsx              # 主应用组件（三栏布局）
│   ├── main.jsx             # 应用入口
│   └── index.css            # 全局样式
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── eslint.config.js
```

---

## 🚀 使用指南

### 1. 需求分析

在聊天框中输入需求描述，AI 会自动分析并提取以下结构化信息：

- 需求名称、核心需求、背景、目标、价值
- 业务价值分类、需求优先级
- 登录功能、多语言支持、高并发需求（可选模块）

当完整度达到 **80%** 或所有必填信息收集完整后，右侧将自动展开「已澄清需求」面板，支持一键提交。

### 2. SST 拆分

需求提交后，可选择「进行需求 SST 拆分」，输入期望的 SST 个数，系统将自动生成子任务列表，支持：

- 确认拆分方案
- 调整拆分内容
- 单个 SST 采纳/拒绝
- 批量创建到 Jira

### 3. 文件上传与管理

- **本地文件上传**：聊天输入框旁点击附件按钮，支持文本文件自动读取内容并随消息发送。
- **FileBrowser 集成**：左侧「我的文件」面板可直接浏览服务器文件，支持拖拽文件到聊天、右键新建文件夹/删除。

### 4. 会话与草稿

- 左侧会话列表可快速切换历史对话
- 点击「新建会话」清空当前状态开始新需求
- 左侧草稿入口可查看并继续编辑已保存的产品/设计/方案草稿

---

## 📝 自定义需求模板

需求评估模板位于 `src/config/templates.js`，可根据业务需要调整：

- `requirementTemplate`：定义需求字段、必填规则、提取逻辑、评分权重
- `sstTemplate`：定义子任务字段结构
- `buildRequirementPrompt`：定义发给大模型的系统提示词

修改后无需重启，Vite HMR 将自动热更新。

---

## ⚠️ 已知限制

- 当前 FileBrowser 代理密码硬编码在 `vite.config.js` 中，生产环境建议使用环境变量注入。
- Jira 集成目前为模拟实现，真实对接需替换 `/api/requirements` 接口与 Jira 链接生成逻辑。
- 部分草稿数据为前端 Mock 数据，后续可对接后端持久化存储。

---

## 📄 License

Private — 仅供内部使用。