Jasper 测试开发平台

统一、可扩展、用户友好的测试开发一体化平台，实现团队内部开发、测试与效率工具的集中接入与统一体验。

📖 项目背景

Jasper 测试开发平台旨在解决团队内部工具分散、使用体验不统一的问题。通过模块化的架构设计，将各类开发工具、测试工具、效率工具进行整合，为开发者和测试同事提供一站式的解决方案。

核心愿景

统一体验：所有工具模块遵循统一的设计语言和交互规范
可扩展性：基于模块化架构，支持快速接入新工具模块
用户友好：现代化的 UI 设计，提供流畅的使用体验
团队协作：支持用户注册、权限管理，便于团队协作

🛠️ 技术栈

核心框架

React 19.2 - 现代化的前端框架
TypeScript 5.9 - 类型安全的 JavaScript 超集
Vite 7.2 - 极速的前端构建工具

UI 框架

Ant Design 6.0 - 企业级 UI 设计语言和组件库
@ant-design/icons - 丰富的图标库

状态管理与路由

Zustand 5.0 - 轻量级状态管理库
React Router 7.9 - 声明式路由管理

代码编辑与语法高亮

CodeMirror 6 - 强大的代码编辑器
- @codemirror/lang-javascript - JavaScript/TypeScript 支持
- @codemirror/lang-python - Python 支持
- @codemirror/lang-java - Java 支持
- @codemirror/lang-html - HTML 支持
- @codemirror/lang-css - CSS 支持
- @codemirror/lang-json - JSON 支持
- @codemirror/lang-sql - SQL 支持
- @codemirror/lang-markdown - Markdown 支持
- @codemirror/lang-xml - XML 支持
- @codemirror/theme-one-dark - 深色主题

工具库

Axios 1.13 - HTTP 客户端
dayjs - 轻量级日期处理库
react-markdown - Markdown 渲染组件
remark-gfm - GitHub Flavored Markdown 支持

✨ 核心功能

1. 用户认证系统

用户注册：支持用户名、邮箱、密码注册
用户登录：安全的登录验证机制
会话管理：基于 localStorage 的会话持久化
权限控制：支持开发者、测试员、管理员三种角色
路由守卫：未登录用户自动跳转到登录页

2. 首页新闻中心

实时新闻聚合：从 CryptoCompare API 获取最新加密市场新闻
交易所分类：支持 Binance、OKX、Bybit、Gate.io、KuCoin、Huobi 等主流交易所
智能匹配：每个交易所卡片显示专属新闻，避免重复
自动刷新：每 30 分钟自动更新新闻内容
手动刷新：支持一键手动刷新最新内容

3. API 测试工具

HTTP 请求测试：支持 GET、POST、PUT、DELETE 等常用方法
请求配置：URL、Query 参数、Headers、Body 完整配置
环境变量：支持环境变量管理，便于不同环境切换
测试用例：保存常用测试用例，快速复用
响应展示：状态码、响应时间、Headers、Body（JSON 高亮）
历史记录：自动保存测试历史，支持查看和复用

4. 代码生成器

SQL 解析：自动解析 SQL 表结构
代码模板：生成 Entity、Service、Controller 等代码模板
多语言支持：支持多种编程语言的代码生成
一键复制：快速复制生成的代码片段

5. 灵感笔记

富文本编辑：支持纯文本和 Markdown 格式
标签管理：支持多标签分类和检索
颜色标记：多种颜色标记，便于视觉区分
搜索功能：支持标题、正文、标签全文搜索
卡片展示：美观的渐变背景卡片展示
删除确认：友好的删除确认弹窗
点击编辑：点击卡片直接进入编辑界面

6. DEX 兑换工具

代币兑换：模拟 DEX 代币兑换流程
Token 选择：支持主流代币选择
滑点设置：可配置滑点容忍度
Gas 优先级：支持不同 Gas 优先级设置
路径展示：透明展示兑换路径
钱包连接：支持 MetaMask、OKX Wallet 等钱包连接

7. 跨链桥工具

多链支持：支持 Ethereum、BSC、Polygon 等主流链
资产选择：支持多种跨链资产
优先级设置：经济、均衡、极速三种优先级
费用计算：实时计算跨链费用和 ETA
路由可视化：展示跨链路由和安全证明流程

8. 数据库控制台

多连接管理：支持维护多个数据库连接（MySQL、PostgreSQL 等）
SQL 编辑器：基于 CodeMirror 的 SQL 编辑器，支持语法高亮和自动补全
查询执行：执行 SQL 查询并展示结果
查询卡片：保存常用 SQL 为查询卡片，一键切换连接并回填语句
结果预览：表格形式展示查询结果

9. JSON 工具

格式转换：支持 JSON、XML、YAML、CSV 等格式转换
格式化：JSON 格式化美化
验证：JSON 格式验证
压缩：JSON 压缩功能

10. J 翻译工具

多语言支持：支持 20+ 种语言互译
自动识别：自动识别源语言
无限长度：支持长文本翻译
翻译历史：保存翻译历史记录
API 集成：集成 MyMemory Translation API

11. J 计算器

基础运算：支持加减乘除等基础运算
高级功能：开方、平方、百分比、倒数等高级功能
历史记录：自动保存计算历史（最多 50 条）
历史管理：支持查看、应用、删除历史记录
数据持久化：计算历史自动保存到本地

12. 代码编辑器

多语言支持：支持 18 种编程语言的语法高亮
- JavaScript、TypeScript、Python、Java
- HTML、CSS、JSON、SQL、Markdown、XML、YAML
- Go、Rust、C++、C、PHP、Ruby、Shell
在线运行：支持在线运行代码（JavaScript/TypeScript 直接执行，其他语言模拟）
代码保存：代码文件保存到个人账号
文件管理：创建、编辑、删除代码文件
语言切换：切换语言时自动更新代码模板
运行结果：独立的运行结果展示区域

13. 区块链课堂

学习资源：聚合 Web3 学习资源
分类管理：基础理论、DeFi、扩容方案、开发教程等分类
资源类型：文章、视频、新闻、RPC 地址、工具等
搜索筛选：支持按标题、描述、标签搜索和筛选
快速访问：一键复制链接或打开资源

14. Jasper 博客

博客集成：集成个人博客内容
iframe 嵌入：通过 iframe 展示博客内容
全屏展示：自适应高度的全屏展示

15. 智能助手

Lark 集成：集成 Lark 机器人 Webhook
消息发送：发送消息到 Lark 群聊
用户信息：自动包含用户信息和时间戳
格式化消息：友好的消息格式展示
配置管理：Webhook URL 自动配置
联系信息：显示技术支持联系方式

📁 项目结构

.
├── public/                    # 静态资源
├── src/
│   ├── assets/               # 图片等资源文件
│   ├── components/           # 全局通用组件
│   │   ├── AIAssistant.tsx  # 智能助手组件
│   │   ├── ModuleIcon.tsx   # 模块图标组件
│   │   ├── TokenSelect.tsx  # Token 选择组件
│   │   └── ChainSelect.tsx  # 链选择组件
│   ├── config/               # 配置文件
│   │   └── lark.ts          # Lark Webhook 配置
│   ├── data/                 # 静态数据
│   │   ├── chains.ts        # 链数据
│   │   └── tokens.ts        # Token 数据
│   ├── layouts/              # 布局组件
│   │   ├── AuthGuard.tsx    # 路由守卫
│   │   └── PlatformLayout.tsx # 平台主布局
│   ├── modules/              # 工具模块
│   │   ├── module-loader/   # 模块加载器
│   │   ├── api-test/        # API 测试工具
│   │   ├── code-gen/        # 代码生成器
│   │   ├── code-editor/     # 代码编辑器
│   │   ├── notes/           # 灵感笔记
│   │   ├── dex-swap/        # DEX 兑换
│   │   ├── cross-bridge/    # 跨链桥
│   │   ├── db-console/      # 数据库控制台
│   │   ├── json-tools/      # JSON 工具
│   │   ├── j-translate/     # J 翻译
│   │   ├── j-calculator/    # J 计算器
│   │   ├── blockchain-classroom/ # 区块链课堂
│   │   └── blog/            # Jasper 博客
│   ├── pages/                # 页面组件
│   │   ├── HomeNews.tsx     # 首页新闻
│   │   ├── Login.tsx        # 登录页
│   │   ├── Register.tsx     # 注册页
│   │   └── Settings.tsx     # 设置页
│   ├── router/               # 路由配置
│   │   └── index.tsx        # 路由定义
│   ├── stores/               # 状态管理
│   │   ├── authStore.ts     # 认证状态
│   │   └── walletStore.ts   # 钱包状态
│   ├── styles/               # 全局样式
│   │   └── global.css       # 全局 CSS
│   ├── utils/                # 工具函数
│   │   └── http.ts          # HTTP 请求封装
│   ├── App.tsx               # 根组件
│   └── main.tsx              # 入口文件
├── package.json              # 项目配置
├── vite.config.ts            # Vite 配置
└── tsconfig.json             # TypeScript 配置

🚀 快速开始

环境要求

Node.js >= 18.0.0
npm >= 9.0.0

安装依赖

npm install

开发环境运行

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

构建产物将输出到 dist/ 目录

预览生产构建

npm run preview

🔧 配置说明

Lark Webhook 配置

Lark Webhook URL 已在 src/config/lark.ts 中配置，开发环境通过 Vite 代理转发，生产环境直接使用完整 URL。

开发环境代理

Vite 配置了代理，将 /api/lark 代理到 Lark Webhook，解决 CORS 问题：

server: {
  proxy: {
    '/api/lark': {
      target: 'https://open.larksuite.com',
      changeOrigin: true,
      // ...
    }
  }
}

📦 部署

静态文件部署

构建产物为纯静态文件，可以部署到任何静态文件服务器：

Nginx 部署

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Vercel 部署

npm install -g vercel
vercel

Netlify 部署

npm install -g netlify-cli
netlify deploy --prod --dir=dist

Docker 部署

FROM nginx:alpine
COPY dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

环境变量

生产环境可以通过环境变量配置：

VITE_LARK_WEBHOOK_URL - Lark Webhook URL（可选）

🎨 设计特色

UI 设计

现代化设计：采用渐变背景、玻璃态效果、流畅动画
响应式布局：支持桌面端和移动端自适应
深色主题：代码编辑器支持深色主题
友好交互：丰富的交互反馈和提示信息

用户体验

统一体验：所有模块遵循统一的设计规范
快速响应：基于 Vite 的极速开发体验
数据持久化：用户数据、笔记、代码等自动保存到本地
智能提示：友好的错误提示和操作引导

🔐 安全说明

数据存储

用户认证信息存储在 localStorage
所有用户数据仅存储在本地浏览器
生产环境建议使用后端 API 进行数据管理

密码安全

当前版本密码以明文存储（仅用于演示）
生产环境应使用加密存储和 HTTPS

📝 开发规范

模块开发

所有模块遵循统一的模块契约：

interface PlatformModule {
  name: string          // 模块唯一标识
  title: string         // 模块显示名称
  icon: string          // 模块图标
  route: string         // 路由路径
  component: Component  // 模块组件
  order?: number        // 排序权重
  meta?: Record<string, unknown> // 元数据
}

代码规范

使用 TypeScript 严格模式
遵循 ESLint 代码规范
组件使用函数式组件和 Hooks
状态管理使用 Zustand

🗺️ 未来规划

📄 许可证

本项目为内部项目，仅供团队内部使用。

👥 贡献

欢迎提交 Issue 和 Pull Request。

📮 联系方式

如有问题或建议，请联系：

技术支持：jasper.gao
博客：https://www.gaojs.com.cn

Jasper 测试开发平台 - 让开发更高效，让测试更简单 🚀

jasper测试开发平台