# ScreenCaptureAdmin

**Repository Path**: jijie0418/screen-capture-admin

## Basic Information

- **Project Name**: ScreenCaptureAdmin
- **Description**: ScreenCaptureAdmin是一个屏幕监控功能的管理工具，支持多平台截屏及图像处理操作，适用于开发者、教育者和技术爱好者。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-12
- **Last Updated**: 2025-04-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

# 考试监控系统

## 项目结构

项目采用主流的Vue 3 + Vite项目结构，主要目录和文件说明如下：

```
src/
├── api/                  # API服务层
│   ├── apiClient.js      # 通用API客户端工具
│   ├── authApi.js        # 认证相关API
│   ├── examApi.js        # 考试相关API
│   ├── studentApi.js     # 学生相关API
│   ├── userApi.js        # 用户管理API
│   └── index.js          # API模块统一导出
├── assets/               # 静态资源
├── components/           # 所有组件（包括页面级和可复用组件）
├── config/               # 配置文件
│   ├── api.js            # API配置
│   └── settings.js       # 应用配置
├── router/               # 路由配置
│   └── index.js          # 路由定义和权限控制
├── stores/               # 状态管理
│   ├── authStore.js      # 认证状态管理
│   ├── examStore.js      # 考试状态管理
│   └── permissionStore.js# 权限状态管理
├── utils/                # 工具函数
│   ├── formatters.js     # 格式化工具
│   └── imageHelpers.js   # 图片处理工具
├── App.vue               # 应用入口组件
└── main.js               # 应用入口文件
```

## 项目结构说明

### API 层

采用模块化的API结构，每个模块对应一种资源类型：

- `apiClient.js`: 创建和配置axios实例的工具
- `authApi.js`: 处理用户认证相关API
- `examApi.js`: 管理考试相关API
- `studentApi.js`: 提供学生专属API
- `userApi.js`: 用户管理API

### 状态管理

使用Pinia作为状态管理库：

- `authStore.js`: 管理用户认证状态和用户信息
- `examStore.js`: 管理考试数据
- `permissionStore.js`: 处理权限和动态路由

### 组件结构

- `components/`: 包含所有应用组件，包括页面级组件和可复用组件

### 配置

- `config/api.js`: API相关配置，如基础URL和端点
- `config/settings.js`: 应用通用配置

### 工具函数

- `utils/formatters.js`: 提供日期、数字等格式化函数
- `utils/imageHelpers.js`: 提供图片处理相关工具

## 开发指南

### 添加新功能

1. 在`api/`目录创建或更新API服务
2. 在`stores/`目录创建或更新状态管理
3. 在`components/`或`views/`目录创建UI组件
4. 在`router/index.js`添加路由配置

### 目录结构最佳实践

- API请求统一放在`api/`目录
- 所有组件（包括页面级组件）放在`components/`目录
- 全局状态管理放在`stores/`目录
- 配置参数放在`config/`目录