# FileSelector 文件选择器组件

基于现有文件管理界面功能开发的公共文件选择器组件，支持从已有文件中选择或上传新文件。

## 功能特性

- 🗂️ **多文件类型支持**: 图片、视频、音频、文档等多种文件类型
- 📁 **分类管理**: 支持文件分类和子分类选择
- 🔍 **搜索功能**: 支持文件名搜索
- 📱 **双视图模式**: 网格视图和列表视图切换
- ✅ **多选/单选**: 可配置单选或多选模式
- ⬆️ **上传功能**: 支持直接上传新文件
- 🎨 **响应式设计**: 适配不同屏幕尺寸

## 使用方法

### 基础用法

```vue
<template>
  <div>
    <el-button @click="showSelector = true">选择文件</el-button>
    
    <FileSelector
      v-model="showSelector"
      :allowed-types="[1]"
      :multiple="false"
      @confirm="handleFileSelected"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import FileSelector from '@/components/FileSelector/index.vue';

const showSelector = ref(false);

const handleFileSelected = (files) => {
  console.log('选择的文件:', files);
};
</script>
```

### 高级用法

```vue
<template>
  <FileSelector
    v-model="visible"
    :allowed-types="[1, 2]"
    :multiple="true"
    :allow-upload="true"
    title="选择课程资源"
    @confirm="onConfirm"
  />
</template>

<script setup>
import { ref } from 'vue';
import FileSelector from '@/components/FileSelector/index.vue';

const visible = ref(false);

const onConfirm = (selectedFiles) => {
  // 处理选择的文件
  selectedFiles.forEach(file => {
    console.log('文件信息:', {
      id: file.id,
      name: file.name,
      url: file.url,
      size: file.size,
      type: file.type
    });
  });
};
</script>
```

## Props 属性

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|-------|------|
| modelValue | boolean | false | 控制对话框显示/隐藏 |
| allowedTypes | number[] | [1] | 允许的文件类型数组 |
| multiple | boolean | false | 是否允许多选 |
| allowUpload | boolean | true | 是否允许上传新文件 |
| title | string | '选择文件' | 对话框标题 |

### 文件类型说明

| 类型值 | 文件类型 | 支持的扩展名 |
|--------|----------|-------------|
| 1 | 图片文件 | jpg, jpeg, png, gif, bmp, webp |
| 2 | 视频文件 | mp4, avi, mov, wmv, flv, mkv |
| 3 | 音频文件 | mp3, wav, flac, aac, ogg |
| 4 | 文档文件 | pdf, doc, docx, xls, xlsx, ppt, pptx, txt |

## Events 事件

| 事件名 | 参数 | 说明 |
|--------|------|------|
| update:modelValue | boolean | 对话框显示状态改变时触发 |
| confirm | File[] | 确认选择文件时触发，返回选中的文件数组 |

## 使用场景示例

### 1. 课程封面选择（单选图片）

```vue
<FileSelector
  v-model="showCoverSelector"
  :allowed-types="[1]"
  :multiple="false"
  title="选择课程封面"
  @confirm="handleCoverSelected"
/>
```

### 2. 课程视频选择（多选视频）

```vue
<FileSelector
  v-model="showVideoSelector"
  :allowed-types="[2]"
  :multiple="true"
  title="选择课程视频"
  @confirm="handleVideosSelected"
/>
```

### 3. 教学资料选择（多选文档）

```vue
<FileSelector
  v-model="showMaterialSelector"
  :allowed-types="[4]"
  :multiple="true"
  title="选择教学资料"
  @confirm="handleMaterialsSelected"
/>
```

### 4. 混合媒体选择（图片+视频）

```vue
<FileSelector
  v-model="showMediaSelector"
  :allowed-types="[1, 2]"
  :multiple="true"
  title="选择媒体文件"
  @confirm="handleMediaSelected"
/>
```

## 完整示例

参考 `example.vue` 文件，展示了在课程管理表单中的完整使用示例，包括：

- 课程封面选择（单选图片）
- 课程视频选择（多选视频）
- 教学资料选择（多选文档）
- 文件删除和重新选择功能

## 注意事项

1. **文件类型限制**: 组件会根据 `allowedTypes` 自动过滤和验证文件类型
2. **上传限制**: 单个文件大小限制为 50MB
3. **分类依赖**: 组件依赖文件分类API，确保后端分类数据正确
4. **权限控制**: 确保用户有访问文件管理的权限
5. **样式覆盖**: 如需自定义样式，可以通过CSS覆盖组件样式

## 依赖要求

- Vue 3.x
- Element Plus
- 文件管理相关API (`@/api/file/info`, `@/api/file/category`)
- 认证工具 (`@/utils/request`, `@/utils/auth`)

## 更新日志

### v1.0.0
- 初始版本发布
- 支持基础文件选择功能
- 支持文件上传功能
- 支持多种文件类型
- 支持单选/多选模式
