# ng-code - AGI对话前端系统

基于Angular 19的前端应用，提供与svc-code后端的交互界面，支持登录、会话管理、流式对话和实时日志显示。

## 功能特性

- **用户认证**：Token认证，Bearer头部
- **会话管理**：创建、列出、切换会话
- **流式对话**：实时AI响应，SSE流式推送
- **实时日志**：订阅系统日志流，按会话过滤
- **三栏布局**：可拖动分割线，响应式设计

## 技术栈

- Angular 19 (独立组件)
- Angular Material UI
- TailwindCSS
- RxJS
- TypeScript

## 项目结构

```
src/app/
├── components/              # 主要组件
│   ├── session-list.component.ts    # 会话列表
│   ├── conversation.component.ts    # 对话区域
│   ├── log-display.component.ts     # 日志显示
│   └── dummy.component.ts           # 空组件（路由占位）
├── services/               # 业务服务
│   ├── auth.service.ts             # 认证服务
│   ├── session.service.ts          # 会话管理
│   ├── conversation.service.ts     # 对话服务
│   └── log.service.ts              # 日志服务
├── models/                # 数据模型
│   ├── auth.model.ts              # 认证模型
│   ├── session.model.ts           # 会话模型
│   ├── conversation.model.ts      # 对话模型
│   └── log.model.ts               # 日志模型
├── pages/                 # 页面组件
│   └── login/            # 登录页面
├── guards/               # 路由守卫
│   └── auth.guard.ts     # 认证守卫
├── interceptors/         # HTTP拦截器
│   └── auth.interceptor.ts # 认证拦截器
└── app.*.ts             # 应用根组件和配置
```

## 快速开始

### 前置要求

1. Node.js 18+ 和 npm
2. svc-code 后端服务运行在 localhost:8020

### 安装依赖

```bash
cd ng-code
npm install
```

### 配置代理

代理配置在 `proxy.conf.json`，默认指向 `http://localhost:8020`。

如需修改后端地址，编辑 `proxy.conf.json` 文件。

### 开发模式

```bash
npm start
```

应用将在 http://localhost:4200 启动。

### 生产构建

```bash
npm run build
```

构建产物位于 `dist/ng-code` 目录。

## API接口

前端调用以下后端API：

| 端点 | 方法 | 描述 |
|------|------|------|
| `/api/auth/login` | POST | 用户登录，返回token |
| `/api/auth/validate` | POST | 验证token有效性 |
| `/api/session/list` | GET | 获取会话列表 |
| `/api/session/create` | POST | 创建新会话 |
| `/api/prompt/stream` | POST | 流式对话（SSE） |
| `/api/logs/stream` | GET | 日志流（SSE） |

## 认证流程

1. 用户输入用户名密码登录
2. 前端调用 `/api/auth/login` 获取token
3. token保存到localStorage和内存
4. 后续API请求自动添加 `Authorization: Bearer <token>` 头部
5. 拦截器处理401错误，自动跳转到登录页

## 布局说明

应用采用三栏布局：

- **左侧**：会话列表（可调整宽度）
  - 显示所有会话的标题和ID
  - 新建会话按钮
  - 点击切换活动会话

- **中间**：对话区域（弹性宽度）
  - 显示消息历史（用户和AI）
  - 消息输入框（支持Shift+Enter换行）
  - 流式响应实时显示

- **右侧**：日志显示（可调整宽度）
  - 实时显示系统日志
  - 按级别和会话过滤
  - 自动滚动和暂停控制

## 已知限制

1. 会话删除功能需后端支持
2. 消息历史持久化需后端实现
3. 日志解析为简单文本，未结构化

## 故障排除

### 代理错误
确保svc-code后端运行在8020端口：
```bash
cd svc-code
go run main.go
```

### 认证失败
检查浏览器控制台Network标签，确认token正确添加。

### 流式连接中断
检查后端SSE端点是否可访问，浏览器控制台是否有错误。

## 开发说明

- 使用Angular独立组件架构
- 遵循rxjs响应式编程模式
- 样式使用TailwindCSS实用类
- 组件间通过服务通信，避免直接耦合

## 许可证

版权所有 © 2026 广东志华软件科技有限公司