# workbench

**Repository Path**: eleven--11/workbench

## Basic Information

- **Project Name**: workbench
- **Description**: 南自--工作台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-16
- **Last Updated**: 2026-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 Admin Demo

基于 Vue 3 + Vite + Element Plus 的后台管理系统组件封装演示项目。

## 技术栈

- **Vue 3** - 渐进式JavaScript框架，使用 Composition API
- **Vite** - 新一代前端构建工具
- **Vue Router** - Vue.js 官方路由管理器
- **Pinia** - Vue.js 轻量级状态管理库
- **Element Plus** - 基于 Vue 3 的组件库
- **Axios** - Promise HTTP 客户端
- **Sass** - CSS 预处理器

## 项目结构

```
vueDemo/
├── src/
│   ├── api/                 # API 接口封装
│   │   └── user.js          # 用户相关接口
│   ├── components/          # 组件
│   │   └── common/          # 通用组件
│   │       ├── MyDialog.vue # 弹窗封装
│   │       ├── MyForm.vue   # 表单封装
│   │       ├── MySearch.vue # 搜索封装
│   │       └── MyTable.vue  # 表格封装
│   ├── router/              # 路由配置
│   │   └── index.js
│   ├── utils/               # 工具函数
│   │   ├── message.js       # 消息提示封装
│   │   └── request.js       # 网络请求封装
│   ├── views/               # 页面视图
│   │   └── DemoIndex.vue    # 组件演示页面
│   ├── App.vue              # 根组件
│   └── main.js              # 入口文件
├── index.html               # HTML 模板
├── vite.config.js           # Vite 配置
└── package.json             # 项目配置
```

## 组件说明

### 1. MySearch 搜索组件

用于快速构建搜索表单区域。

**主要功能：**
- 支持多种表单项类型：输入框、下拉选择、日期选择、日期范围、时间选择等
- 支持自动展开/收起功能
- 支持回车搜索
- 支持自定义插槽
- 支持远程数据加载

**使用示例：**

```vue
<my-search
  :fields="searchFields"
  v-model="searchParams"
  @search="handleSearch"
  @reset="handleReset"
/>
```

### 2. MyForm 表单组件

用于快速构建数据表单。

**支持的表单项类型：**
- `input` - 输入框
- `number` - 数字输入框
- `select` - 下拉选择
- `date` - 日期选择
- `time` - 时间选择
- `datetime` - 日期时间选择
- `switch` - 开关
- `radio` - 单选框
- `checkbox` - 多选框
- `textarea` - 文本域
- `upload` - 文件上传
- `editor` - 富文本编辑器
- `slot` - 自定义插槽

**使用示例：**

```vue
<my-form
  ref="formRef"
  :fields="formFields"
  v-model="formData"
  @change="handleChange"
/>
```

### 3. MyTable 表格组件

基于 Element Plus Table 的封装，支持分页、排序、筛选等功能。

**主要功能：**
- 支持自定义列类型：文本、图片、标签、进度条、开关、操作按钮等
- 支持选择框和序号列
- 支持分页组件
- 支持自定义插槽
- 支持行单击、双击事件
- 支持排序、筛选

**使用示例：**

```vue
<my-table
  ref="tableRef"
  :data="tableData"
  :columns="tableColumns"
  :total="total"
  :page="queryParams.page"
  :limit="queryParams.limit"
  :show-selection="true"
  :show-index="true"
  @selection-change="handleSelectionChange"
  @page-change="handlePageChange"
/>
```

### 4. MyDialog 弹窗组件

基于 Element Plus Dialog 的封装。

**主要功能：**
- 支持自定义标题、宽度
- 支持 loading 状态
- 支持销毁时清空内容
- 支持自定义底部插槽
- 暴露打开/关闭方法

**使用示例：**

```vue
<my-dialog
  v-model:visible="dialogVisible"
  title="提示"
  width="600px"
  @confirm="handleConfirm"
>
  <div>弹窗内容</div>
</my-dialog>
```

## 网络请求封装

### request.js

对 Axios 进行二次封装，提供统一请求处理。

**主要特性：**
- 请求拦截：自动添加 Token、请求时间戳
- 响应拦截：统一错误处理、状态码判断
- 封装方法：`get`、`post`、`put`、`delete`、`patch`
- 自动提示错误信息

**使用示例：**

```javascript
import request from '@/utils/request'

// GET 请求
const res = await request.get('/users', { page: 1, limit: 10 })

// POST 请求
const res = await request.post('/users', { username: 'test' })

// PUT 请求
const res = await request.put('/users/1', { username: 'test2' })

// DELETE 请求
const res = await request.delete('/users/1')
```

### 响应数据格式

接口需要统一返回以下格式：

```json
{
  "code": 200,
  "message": "操作成功",
  "data": {}
}
```

## 安装与运行

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

## 注意事项

1. **组件使用**：所有组件均基于 Composition API 和 `<script setup>` 语法
2. **类型提示**：组件配置通过 `fields` 数组定义，支持丰富的类型和属性
3. **API 调用**：演示页面使用模拟数据，真实项目中取消注释 API 调用代码即可
4. **样式处理**：使用 Scoped CSS 和 Deep 选择器，避免样式污染

## License

MIT

## 全屏及推出功能icon没有显示出来;
## 横向菜单及竖向菜单更换为icon。鼠标悬浮展示：菜单切换。下拉展示横向及竖向；点击更换；
## 项目头部做成那种卡片类的。方便区分层级；
##