ng-code

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

安装依赖

cd ng-code
npm install

配置代理

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

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

开发模式

npm start

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

生产构建

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端口：

cd svc-code
go run main.go

认证失败

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

流式连接中断

检查后端SSE端点是否可访问，浏览器控制台是否有错误。

开发说明

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

许可证

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