# auto-tools-web

**Repository Path**: umeone/auto-tools-web

## Basic Information

- **Project Name**: auto-tools-web
- **Description**: 基于vue3和Python实现的web工具
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-13
- **Last Updated**: 2026-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Auto Tools - 工具管理系统

一个基于 Vue 3 的生产级别工具管理系统框架，支持多种工具模块的扩展。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 下一代前端构建工具
- **Vue Router 4** - Vue.js 官方路由管理器
- **Pinia** - Vue 状态管理库
- **Element Plus** - Vue 3 UI 组件库
- **Axios** - HTTP 客户端

## 功能特性

- ✅ 用户登录/登出
- ✅ 动态菜单系统
- ✅ 可折叠侧边栏
- ✅ 路由权限控制
- ✅ 响应式布局
- ✅ 工具模块扩展支持

## 项目结构

```
auto-tools/
├── public/              # 静态资源
├── src/
│   ├── api/            # API 接口
│   ├── assets/         # 资源文件
│   ├── components/     # 公共组件
│   ├── layouts/        # 布局组件
│   ├── router/         # 路由配置
│   ├── stores/         # Pinia 状态管理
│   ├── utils/          # 工具函数
│   ├── views/          # 页面组件
│   │   ├── login/     # 登录页面
│   │   └── dashboard/ # 主页
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
├── .env                # 环境变量
├── .env.development     # 开发环境变量
├── .env.production     # 生产环境变量
├── index.html          # HTML 模板
├── package.json        # 项目依赖
└── vite.config.js      # Vite 配置
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发环境运行

```bash
npm run dev
```

访问 http://localhost:3000

### 生产环境构建

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 开发说明

### 开发环境登录

在开发环境中，系统使用 Mock 登录，任意用户名和密码即可登录。

### 添加新工具模块

1. 在 `src/views/` 下创建工具页面组件
2. 在 `src/router/index.js` 中添加路由配置
3. 在 `src/stores/menu.js` 中添加菜单项

示例：

```javascript
// 1. 创建 src/views/tools/MyTool.vue

// 2. 在 router/index.js 添加路由
{
  path: 'tools',
  name: 'Tools',
  component: () => import('@/views/tools/MyTool.vue'),
  meta: { title: '我的工具', icon: 'Tools' }
}

// 3. 在 stores/menu.js 添加菜单
menuList.value.push({
  path: '/tools',
  name: 'Tools',
  meta: { title: '我的工具', icon: 'Tools' }
})
```

### API 接口

在 `src/api/` 目录下创建接口文件，使用 axios 进行请求。

示例：

```javascript
import request from './auth'

export const getToolList = () => request.get('/tools')
export const createTool = (data) => request.post('/tools', data)
```

### 状态管理

在 `src/stores/` 目录下创建 Pinia store。

示例：

```javascript
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useToolStore = defineStore('tool', () => {
  const tools = ref([])
  
  const addTool = (tool) => {
    tools.value.push(tool)
  }
  
  return { tools, addTool }
})
```

## 环境配置

- `.env` - 通用环境变量
- `.env.development` - 开发环境变量
- `.env.production` - 生产环境变量

可在环境文件中配置 API 基础路径等参数：

```
VITE_API_BASE_URL=/api
```

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## License

MIT