# jss-prototype

**Repository Path**: yinyhy/jss-prototype

## Basic Information

- **Project Name**: jss-prototype
- **Description**: 计算所原型
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-02-11
- **Last Updated**: 2026-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 科技感测试管理平台

基于 Vue3 + Vite + TailwindCSS 构建的现代化测试管理系统，具有科技感的 UI 设计和完整的功能模块。

## 🚀 技术栈

- **前端框架**: Vue 3.4+ (Composition API)
- **构建工具**: Vite 5.0+
- **样式框架**: TailwindCSS 3.4+
- **路由管理**: Vue Router 4.0+
- **状态管理**: Pinia 2.0+
- **动画库**: @vueuse/motion
- **图标库**: Font Awesome 6.5+
- **字体**: Noto Sans SC

## ✨ 功能特性

### 🎨 界面设计
- 科技感深色主题，支持明暗模式切换
- 玻璃态效果和霓虹边框
- 动态粒子背景和数据流动画
- 响应式布局，支持移动端

### 📊 仪表板
- 实时统计数据展示
- 图表占位符（可集成 ECharts）
- 快速操作入口
- 系统状态监控

### 🧪 测试管理
- **测试平台**: 管理不同测试环境
- **测试用例**: 创建、编辑、管理测试用例
- **用例绑定**: 将用例关联到测试任务
- **脚本编辑**: 查看和编辑测试执行脚本

### 📋 任务管理
- **任务列表**: 查看所有测试任务及状态
- **任务创建**: 创建新的测试任务
- **任务详情**: 查看任务执行详情和进度
- **任务执行**: 实时监控任务执行过程
- **执行结果**: 查看测试结果和报告

### 🖥️ 设备管理
- **设备列表**: 管理所有测试设备
- **设备创建**: 添加新设备
- **设备详情**: 查看设备状态和系统信息
- **设备测试**: 执行设备连接和性能测试
- **进程管理**: 监控设备上运行的进程

## 📁 项目结构

```
src/
├── components/          # 可复用组件
│   ├── dashboard/      # 仪表板组件
│   ├── device/         # 设备管理组件
│   ├── layout/         # 布局组件
│   └── test/           # 测试管理组件
├── composables/        # 组合式函数
├── router/             # 路由配置
├── stores/             # Pinia 状态管理
├── styles/             # 样式文件
├── utils/              # 工具函数
├── views/              # 页面组件
│   ├── device/         # 设备管理页面
│   ├── task/           # 任务管理页面
│   └── test/           # 测试管理页面
└── main.ts             # 应用入口
```

## 🛠️ 开发指南

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 🎯 核心组件说明

### 布局组件
- `AppLayout.vue`: 主布局容器
- `AppHeader.vue`: 顶部导航栏
- `AppSidebar.vue`: 左侧导航栏
- `NavGroup.vue`: 导航组件

### 状态管理
- `theme.ts`: 主题状态管理
- `sidebar.ts`: 侧边栏状态管理
- `user.ts`: 用户信息管理
- `task.ts`: 任务状态管理

### 工具函数
- `format.ts`: 格式化工具函数
- `storage.ts`: 本地存储工具类

## 🎨 样式系统

### 科技感配色
- **主色调**: 
  - 科技蓝: `#00d4ff`
  - 科技紫: `#8b5cf6`
  - 科技绿: `#10b981`

### 特效类
- `.tech-gradient`: 科技感渐变文字
- `.cyber-gradient`: 赛博朋克渐变
- `.glass-effect`: 玻璃态效果
- `.neon-border`: 霓虹边框
- `.hover-glow`: 悬浮发光效果
- `.data-stream`: 数据流动效果
- `.tech-progress`: 科技感进度条

### 动画效果
- `animate-glow`: 发光动画
- `animate-fadeIn`: 淡入动画
- `animate-slideIn`: 滑入动画
- `animate-cyberpunk`: 赛博朋克动画

## 🔧 自定义配置

### 主题配置
在 `tailwind.config.js` 中可以自定义：
- 颜色主题
- 动画效果
- 字体配置

### 环境变量
可以通过 `.env` 文件配置：
- API 接口地址
- 应用配置项

## 📝 开发规范

### 组件命名
- 使用 PascalCase 命名组件文件
- 组件名称应该描述性强且唯一

### 代码风格
- 使用 Composition API
- TypeScript 类型定义
- 响应式数据管理

### 提交规范
- feat: 新功能
- fix: 修复问题
- docs: 文档更新
- style: 样式调整
- refactor: 代码重构

## 🚧 TODO 功能扩展

- [ ] 集成 ECharts 图表库
- [ ] 添加国际化支持
- [ ] 实现 WebSocket 实时通信
- [ ] 添加单元测试
- [ ] 性能优化和懒加载
- [ ] PWA 支持
- [ ] Docker 部署配置

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！