AgentScope Platform Front

AgentScope 平台前端项目，提供智能体部署、插件市场、技能市场、用户中心等一站式功能。

技术栈

| 分类 | 技术 | 版本 | |------|------|------| | 前端框架 | React | 19.2 | | 构建工具 | Vite | 6.0 | | 类型系统 | TypeScript | 5.2 | | 样式方案 | Tailwind CSS | 3.4 | | UI 组件库 | Ant Design + @agentscope-ai/design | 5.21 / 1.0 | | 路由 | React Router | 6.8 | | 状态管理 | Zustand | 5.0 | | 国际化 | i18next + react-i18next | 24.2 / 15.4 | | HTTP 请求 | axios | 1.15 | | 动画 | framer-motion | 12.38 | | Markdown 渲染 | react-markdown + rehype/remark 插件 | 10.1 |

功能模块

• 首页 — 平台介绍与快速入口
• 一键部署 — QwenPaw 应用部署、状态监控、日志查看、重启管理
• 插件市场 — 插件浏览、详情、编辑、发布、草稿管理
• 技能市场 — 技能浏览、详情、创建
• 用户主页 — 个人技能、插件、智能体管理
• 消息中心 — 评论、反馈、通知消息
• 建议反馈 — 用户反馈提交
• 设置 — 基本信息设置、邮箱密码、第三方绑定
• 管理后台 — 反馈管理、瞭望塔、举报处理
• 智能体开发中心 — 智能体网络、生态瞭望塔

快速开始

环境要求

• Node.js >= 18
• npm >= 9

安装依赖

npm install

启动开发服务器

npm run dev

开发服务器默认运行在 http://localhost:8080，API 请求（/api、/oauth2）会自动代理至预发环境 https://platform-pre.agentscope.io。

构建生产包

npm run build

构建流程先执行 TypeScript 类型检查（tsc --noEmit），再通过 Vite 打包至 out/ 目录。CSS 合并为 assets/style.css，JS 入口统一为 assets/index.js。

预览构建结果

npm run preview

代码检查

npm run lint

项目结构

src/
├── components/          # 通用组件（Icon、PageHeader、Footer 等）
├── contexts/            # React Context
├── hooks/               # 自定义 Hooks（useAuth、useAppMessage 等）
├── i18n/                # 国际化配置
│   └── locales/         # zh.ts / en.ts 语言包
├── lib/                 # 工具库（apiError、formatters、storage 等）
├── pages/               # 页面组件
│   ├── Home/            # 首页
│   ├── Deploy/          # 一键部署
│   ├── PluginMarket/    # 插件市场
│   ├── SkillMarket/     # 技能市场
│   ├── UserProfile/     # 用户主页
│   ├── Notifications/   # 消息中心
│   ├── Settings/        # 设置
│   ├── Admin/           # 管理后台
│   └── AgentDevHub/     # 智能体开发中心
├── services/            # API 接口封装
├── types/               # TypeScript 类型定义
├── utils/               # 通用工具函数
├── App.tsx              # 根组件（路由配置）
├── main.tsx             # 应用入口
└── index.css            # 全局样式

环境变量

在项目根目录创建 .env 文件，参考 .env.example：

# API 服务地址（本地 dev 代理与生产构建共用）
VITE_API_BASE_URL=https://platform-pre.agentscope.io

线上同域部署时无需配置此变量，前端会自动使用 window.location.origin 作为 API 基地址。

开发说明

路径别名

项目配置了 @ 路径别名，指向 src/ 目录：

import PageHeader from "@/components/PageHeader";

国际化

项目采用中英文双语方案，语言包位于 src/i18n/locales/。新增文案时需同时在 zh.ts 和 en.ts 中添加对应 key。

开发代理

开发环境下，/api 和 /oauth2 请求代理至预发环境，并自动注入 Origin 和 Referer 请求头。代理配置见 vite.config.ts。