代码示例gitcode地址
https://gitcode.com/yunting/cirrus-ui.git
项目简介
基于Vite7构建，集成Vue3和Element-plus以及Avue等框架。项目采用响应式设计，提供直观的可视化界面，
支持Jmeter压测任务配置、执行监控、结果分析，
Redis缓存的查看管理功能，
AI对话管理。
项目说明
项目文件包
| 项目文件包 | 说明 |
|---|---|
| mock | mock数据目录，模拟后端API响应 |
| src/api | API接口定义，封装所有后端请求方法 |
| src/assets | 静态资源目录，存放图片等资源文件 |
| src/components | 通用组件目录，存放可复用的Vue组件 |
| src/config | 配置文件目录，存放环境变量、菜单列表等配置 |
| src/constants | 常量定义目录，存放全局常量 |
| src/lang | 语言国际化目录，存放多语言配置 |
| src/layout | 布局组件目录，定义页面整体布局 |
| src/router | 路由配置目录，定义页面路由规则 |
| src/store | 状态管理目录，使用Pinia管理全局状态 |
| src/styles | 样式文件目录，存放全局样式和主题配置 |
| src/utils | 工具函数目录，封装通用工具方法 |
| src/views | 页面组件目录，存放所有业务页面 |
| src/App.vue | 根组件，应用入口组件 |
| src/main.js | 应用入口文件，初始化Vue实例 |
| src/aios.js | Axios封装，统一处理API请求 |
| src/error.js | 错误处理配置 |
| src/style.css | 全局样式文件 |
核心功能模块
| 功能模块 | 说明 | 路径 |
|---|---|---|
| JMeter压测管理 | 提供JMX文件上传、测试用例管理、执行监控等功能 | src/views/jmeter/ |
| Redis缓存管理 | 提供Redis缓存键查询、管理、删除等功能 | src/views/redis/ |
| 用户管理 | 提供用户登录、注销、列表管理、新增编辑、删除等功能 | src/views/user/ |
| 系统设置 | 提供系统配置等功能 | src/views/setting/ |
| AI对话管理 | 提供对话配置和AI对话页面 | src/views/chat/ |
使用框架包
| 框架包 | 说明 | 备注 |
|---|---|---|
| element-plus | UI 组件库 | pnpm add element-plus |
| @element-plus/icons-vue | Element Plus 官方图标库 | pnpm add @element-plus/icons-vue |
| vue | Vue框架 | pnpm add vue@3 |
| @smallwei/avue | 基于 Element Plus 的二次封装低代码组件库 | pnpm add @smallwei/avue |
| pinia | 轻量级状态管理库 | pnpm add pinia |
| vue-router | Vue 官方路由 | pnpm add vue-router@4 |
| axios | HTTP 请求库 | pnpm add axios |
| crypto-js | 常用加密/哈希算法库 | pnpm add crypto-js |
| dayjs | 时间工具库 | pnpm add dayjs |
| js-cookie | Cookie 读写封装库 | pnpm add js-cookie |
| nprogress | 顶部小蓝条进度条 | pnpm add nprogress |
| mockjs | 纯前端“造假数据”库，负责 生成随机 JSON（姓名、手机号、分页列表…） | pnpm add mockjs |
| vite-plugin-mock | mockjs（或手写）数据注册成可访问的 HTTP 接口 | pnpm add -D vite-plugin-mock |
| eslint | JavaScript/TypeScript 静态代码检查器，统一风格、提前发现低级错误 | pnpm add eslint -D |
| @eslint/js | ESLint 官方「JS 推荐规则」配置包，提供 eslint:recommended 等现成规则集 | pnpm add @eslint/js -D |
| eslint-plugin-vue | Vue 官方 ESLint 插件，给 .vue 文件做语法/风格/逻辑检查 | pnpm add eslint-plugin-vue -D |
| unplugin-auto-import | 全自动按需导入，写代码时不再 import { ref } from 'vue' | pnpm add unplugin-auto-import -D |
| vite-plugin-compression | 构建时一键生成 .gz / .br 压缩包，让 Nginx 直接走静态压缩，减少 60%+ 传输体积 | pnpm add vite-plugin-compression -D |
| vite-plugin-vue-setup-extend | 允许在 <script setup name="xxx"> 标签上直接写组件名 |
pnpm add vite-plugin-vue-setup-extend -D |
| vue-element-plus-x | 开箱即用的 企业级 AI 交互组件库 | pnpm add vue-element-plus-x |
| hook-fetch | SSE请求 | pnpm add hook-fetch |
| vite-plugin-svg-icons | svg图标 | pnpm add vite-plugin-svg-icons -D |
| typescript-api-pro | TypeScript类型 | pnpm add typescript-api-pro -D |
项目启动说明
前置条件
- Docker 20.10.22 （验证环境版本）
- Docker Compose v2.15.1（验证环境版本）
- Node安装
克隆项目
# 克隆项目到本地
git clone https://gitcode.com/yunting/cirrus-ui.git
快速开始
# 进入项目目录
cd cirrus-ui
# 设置 npm 镜像源
pnpm config set registry https://registry.npmmirror.com
# 安装依赖
pnpm install
# 使用后端本地接口启动服务
pnpm run dev
# 或使用mock数据启动服务
pnpm run dev:mock
# 使用后端本地接口启动服务 没有JWT认证
pnpm run dev:nojwt
# 打开默认页面
open http://localhost:5173/
Docker本地启动
# 进入项目目录
cd cirrus-ui
# 构建 Docker 镜像
docker build -t cirrus-ui:1.0.0 .
docker build --no-cache -t cirrus-ui:1.0.0 .
# 启动 Docker 容器
docker run -d --name cirrus-ui -p 8097:8097 cirrus-ui:1.0.0
# 打开默认页面
open http://localhost:8097/login
运行示例
Jmeter环境变量
Phantomjs环境变量
Jmeter分页数据
Jmeter编辑GET
Jmeter编辑POST
Jmeter上传
Jmeter预览报告
Redis数据查询
Redis查看缓存
对话配置分页数据
对话配置新增
openapi对话
AI对话(历史会话)
备注
后端项目地址
-
cirrus-be项目地址
-
cirrus-ai项目地址
参考文档项目
- npm、yarn、pnpm区别
- Avue Crud 组件选项
- element-plus-x生成式AI组件库