jflow/frontend

Jflow 前端应用

基于Vue 3 + Naive UI的现代化AI Agent工作流平台前端应用。

功能特性

• 🔐 用户认证: 集成Jingrow SaaS登录
• 🤖 AI智能体管理: 创建、编辑、执行智能体
• 🔧 节点管理: 管理工作流节点组件
• 📊 仪表板: 系统概览和统计信息
• ⚙️ 设置管理: 个人和系统配置

技术栈

• Vue 3 - 渐进式前端框架
• TypeScript - 类型安全的JavaScript
• Naive UI - 现代化UI组件库
• Pinia - 轻量级状态管理
• Vue Router - 路由管理
• Axios - HTTP客户端
• Vite - 快速构建工具

快速开始

1. 安装依赖

npm install

2. 启动开发服务器

npm run dev

3. 访问应用

打开浏览器访问: http://localhost:3000

项目结构

src/
├── main.ts                 # 应用入口
├── App.vue                 # 根组件
├── router/                 # 路由配置
│   └── index.ts
├── stores/                 # 状态管理
│   ├── auth.ts            # 认证状态
│   ├── agent.ts           # 智能体状态
│   └── node.ts            # 节点状态
├── api/                   # API客户端
│   ├── index.ts           # Axios配置
│   ├── auth.ts            # 认证API
│   ├── agents.ts          # 智能体API
│   └── nodes.ts           # 节点API
├── components/            # 通用组件
│   └── layout/            # 布局组件
│       ├── AppLayout.vue
│       ├── AppHeader.vue
│       └── AppSidebar.vue
├── views/                 # 页面视图
│   ├── auth/              # 认证页面
│   │   └── Login.vue
│   ├── agents/            # 智能体页面
│   │   └── AgentList.vue
│   ├── nodes/             # 节点页面
│   │   └── NodeList.vue
│   ├── flows/             # 流程页面
│   │   └── FlowBuilder.vue
│   ├── Dashboard.vue      # 仪表板
│   └── Settings.vue       # 设置页面
└── assets/                # 静态资源
    └── styles/
        └── main.css       # 全局样式

开发指南

添加新页面

1. 在 src/views/ 下创建页面组件
2. 在 src/router/index.ts 中添加路由
3. 在 src/components/layout/AppSidebar.vue 中添加菜单项

添加新API

1. 在 src/api/ 下创建API文件
2. 在对应的store中添加状态管理
3. 在组件中调用API

样式规范

• 使用Naive UI组件库
• 遵循Vue 3 Composition API
• 使用TypeScript类型定义
• 响应式设计，支持移动端

构建部署

开发环境

npm run dev

生产构建

npm run build

预览构建结果

npm run preview

环境配置

复制环境变量示例文件并配置：

cp env.example .env.local

编辑 .env.local 文件：

# Jingrow SaaS配置
VITE_JINGROW_API_URL=https://cloud.jingrow.com

# 本地API配置
VITE_LOCAL_API_URL=http://localhost:8000

# 应用配置
VITE_APP_NAME=Jflow
VITE_APP_VERSION=1.0.0

环境变量说明

• VITE_JINGROW_API_URL: Jingrow SaaS API地址，默认为 https://cloud.jingrow.com
• VITE_LOCAL_API_URL: 本地API服务地址，默认为 http://localhost:8000
• VITE_APP_NAME: 应用名称
• VITE_APP_VERSION: 应用版本

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

许可证

MIT License