代码示例gitcode地址

https://gitcode.com/yunting/cirrus-ui.git

项目简介

基于Vite7构建，集成Vue3和Element-plus以及Avue等框架。项目采用响应式设计，提供直观的可视化界面，
支持Jmeter压测任务配置、执行监控、结果分析，
Redis缓存的查看管理功能，
AI对话管理。

项目说明

项目文件包

项目文件包说明
mockmock数据目录，模拟后端API响应
src/apiAPI接口定义，封装所有后端请求方法
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.jsAxios封装，统一处理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-plusUI 组件库pnpm add element-plus
@element-plus/icons-vueElement Plus 官方图标库pnpm add @element-plus/icons-vue
vueVue框架pnpm add vue@3
@smallwei/avue基于 Element Plus 的二次封装低代码组件库pnpm add @smallwei/avue
pinia轻量级状态管理库pnpm add pinia
vue-routerVue 官方路由pnpm add vue-router@4
axiosHTTP 请求库pnpm add axios
crypto-js常用加密/哈希算法库pnpm add crypto-js
dayjs时间工具库pnpm add dayjs
js-cookieCookie 读写封装库pnpm add js-cookie
nprogress顶部小蓝条进度条pnpm add nprogress
mockjs纯前端“造假数据”库，负责 生成随机 JSON（姓名、手机号、分页列表…）pnpm add mockjs
vite-plugin-mockmockjs（或手写）数据注册成可访问的 HTTP 接口pnpm add -D vite-plugin-mock
eslintJavaScript/TypeScript 静态代码检查器，统一风格、提前发现低级错误pnpm add eslint -D
@eslint/jsESLint 官方「JS 推荐规则」配置包，提供 eslint:recommended 等现成规则集pnpm add @eslint/js -D
eslint-plugin-vueVue 官方 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-fetchSSE请求pnpm add hook-fetch
vite-plugin-svg-iconssvg图标pnpm add vite-plugin-svg-icons -D
typescript-api-proTypeScript类型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环境变量

sys_env_jmx

Phantomjs环境变量

sys_env_pjs

Jmeter分页数据

jmx_pageList

Jmeter编辑GET

jmx_edit_get

Jmeter编辑POST

jmx_edit_post

Jmeter上传

jmx_upload

Jmeter预览报告

jmx_preview_report

Redis数据查询

redis_page

Redis查看缓存

redis_preview

对话配置分页数据

chat_page

对话配置新增

chat_config

openapi对话

chat_openapi

AI对话(历史会话)

chat_detail

备注

后端项目地址

参考文档项目

# 前端 # jmeter # redis # docker
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

使用Agent Harness构建PRD生产流水线：产品文档的Rules‑Skills‑Agents

avatar 2048 AI社区
cover

知漫剧 AI 短剧制作平台深度评测

avatar 2048 AI社区

Milvus向量数据库

Milvus 是开源、云原生分布式向量数据库，由 Zilliz 公司主导开发，专门用来存储、管理海量向量数据，并做向量相似度检索。✅ 优点原生向量数据库，专为相似度检索设计，不是在普通数据库上加向量插件云原生分布式，支持水平扩容，亿级向量毫秒检索支持混合检索：向量检索 + 标量过滤，完美适配RAG丰富索引，支持GPU加速、磁盘索引SDK完善：Python、Java、Go，生态成熟，LangChai

avatar 2048 AI社区