AI Auto Agent 智能体 - Vue3重构版

基于 Vue 3 + Vite + TypeScript + Pinia + TailwindCSS 重构的AI智能对话助手应用。

✨ 特性

• 🚀 Vue 3 + Vite - 快速的开发体验和构建性能
• 📘 TypeScript - 完整的类型支持
• 🎨 TailwindCSS - 现代化的UI设计
• 📦 Pinia - 轻量级状态管理
• 🔄 SSE流式传输 - 实时流式AI响应
• 💾 本地存储 - 对话历史持久化
• 📝 Markdown渲染 - 支持代码高亮
• 🎯 智能体选择 - 多种AI智能体支持
• 📱 响应式设计 - 适配不同屏幕尺寸

🛠️ 技术栈

• 框架: Vue 3.5+
• 构建工具: Vite 6.0+
• 语言: TypeScript 5.7+
• 状态管理: Pinia 2.3+
• 路由: Vue Router 4.5+
• CSS框架: TailwindCSS 3.4+
• Markdown: Marked 15.0+
• 代码高亮: Highlight.js 11.11+
• 安全处理: DOMPurify 3.2+

📦 安装

# 安装依赖
npm install

# 或使用 pnpm
pnpm install

# 或使用 yarn
yarn install

🚀 开发

# 启动开发服务器
npm run dev

# 项目将运行在 http://localhost:3000

🏗️ 构建

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

📂 项目结构

src/
├── api/              # API接口
│   └── agent.ts      # 智能体API
├── components/       # Vue组件
│   ├── ChatHeader.vue       # 顶部导航
│   ├── ChatSidebar.vue      # 侧边栏
│   ├── ChatPanel.vue        # 对话面板
│   └── ChatInput.vue        # 输入控制
├── constants/        # 常量配置
│   └── index.ts      # 智能体、案例等配置
├── router/           # 路由配置
│   └── index.ts      # 路由定义
├── stores/           # Pinia状态管理
│   └── chat.ts       # 聊天状态
├── styles/           # 样式文件
│   └── index.css     # 全局样式
├── types/            # TypeScript类型定义
│   └── index.ts      # 类型接口
├── utils/            # 工具函数
│   ├── markdown.ts   # Markdown渲染
│   └── storage.ts    # 本地存储
├── views/            # 页面视图
│   └── ChatView.vue  # 聊天主页面
├── App.vue           # 根组件
└── main.ts           # 应用入口

🔧 配置

API代理

在 vite.config.ts 中配置后端API代理：

server: {
  port: 3000,
  proxy: {
    '/api': {
      target: 'http://localhost:8099',
      changeOrigin: true
    }
  }
}

环境变量

创建 .env 文件配置环境变量（如需要）：

VITE_API_BASE_URL=http://localhost:8099

🎯 核心功能

1. 智能体对话

• 支持多种AI智能体选择
• 实时流式响应显示
• 思考过程和结果分离展示

2. 对话管理

• 对话历史保存
• 快速切换历史对话
• 删除和清空对话

3. 案例库

• 针对不同智能体的预设问题
• 快速填充输入框
• 提高使用效率

4. Markdown支持

• 完整的Markdown渲染
• 代码语法高亮
• 安全的HTML过滤

🎨 界面优化

相比原HTML版本的改进：

1. 组件化设计 - 更好的代码复用和维护
2. 响应式布局 - 更流畅的用户体验
3. 渐变背景 - 更美观的视觉效果
4. 动画效果 - 平滑的交互反馈
5. 阴影层次 - 更有层次感的UI设计
6. 图标优化 - 统一的图标风格

📝 开发指南

添加新的智能体

在 src/constants/index.ts 中添加：

export const agentCards = [
  // ...existing agents
  {
    id: '6',
    title: '新智能体',
    description: '描述',
    icon: '<svg>...</svg>',
    color: '#hexcolor'
  }
]

添加新案例

export const casesData: Record<string, Array<CaseItem>> = {
  '6': [
    {
      id: 'case-6-1',
      title: '案例标题',
      content: '案例内容'
    }
  ]
}

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 License

MIT License

👨‍💻 作者

Niudeyipi

---

注意: 确保后端服务运行在 http://localhost:8099 或修改 vite.config.ts 中的代理配置。