# 广告标题功能添加说明

## 功能概述
成功为CMS广告编辑组件添加了标题字段功能，用户现在可以为每个广告图片/视频单独设置标题。

## 修改内容

### 1. 界面修改 (src/views/cms/cmsAd/components/cmsAdEdit.vue)

#### 1.1 轮播类型（type == 1）
- 为每个图片添加了独立的标题输入框
- 标题输入框位于链接输入框之上
- 支持多图片各自独立的标题设置

#### 1.2 单图类型（type == 2）
- 添加了"图片标题"表单项
- 添加了"图片链接"表单项  
- 只有上传图片后才显示标题和链接输入框

#### 1.3 视频类型（type == 3）
- 添加了"视频标题"表单项
- 添加了"视频链接"表单项
- 只有上传视频后才显示标题和链接输入框

#### 1.4 文本类型（type == 4）
- 保持原有功能不变
- 文本类型使用form.path作为链接字段

### 2. 数据结构修改

#### 2.1 chooseFile函数更新
```javascript
const chooseFile = (data: FileRecord) => {
  images.value.push({
    uid: data.id,
    url: data.downloadUrl + '?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90',
    status: 'done',
    title: '', // 初始化标题为空
    path: ''   // 初始化链接为空
  });
  form.images = data.downloadUrl + '?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90';
};
```

#### 2.2 数据保存
- 标题和链接数据随images数组一起序列化保存
- 保持与原有数据结构的兼容性

## 用户体验优化

### 1. 界面布局
- 标题输入框在链接输入框之上，符合逻辑顺序
- 所有输入框宽度统一为500px，保持界面美观
- 使用条件渲染，只在有文件时显示相关输入框

### 2. 表单验证
- 移除了有问题的TypeScript类型声明，避免编译错误
- 保持必要的表单验证功能

### 3. 多语言友好
- 所有新增文本都使用中文
- 占位符提示清晰明确

## 功能特性

### 1. 灵活性
- **轮播广告**：每张图片都可以设置独立的标题和链接
- **单图广告**：提供单独的标题和链接设置
- **视频广告**：支持视频标题和相关链接
- **文本广告**：保持原有功能不变

### 2. 数据完整性
- 新创建的文件默认标题和链接为空字符串
- 编辑已有数据时保持原有数据结构
- 数据保存时将完整的images数组序列化

### 3. 向后兼容
- 不影响现有数据的显示和编辑
- 保持原有API接口不变
- 新增字段为可选，不影响旧数据

## 使用方法

### 1. 轮播广告
1. 选择"轮播"类型
2. 上传多张图片
3. 为每张图片分别输入标题和链接地址

### 2. 单图/视频广告
1. 选择"图片"或"视频"类型
2. 上传文件
3. 在出现的表单项中输入标题和链接地址

### 3. 文本广告
1. 选择"文本"类型
2. 输入广告内容
3. 设置跳转链接（原有功能）

## 技术实现

- 使用Vue 3 Composition API
- 响应式数据绑定
- 条件渲染优化用户体验
- TypeScript类型安全（移除了有问题的验证规则类型）
- 与现有组件SelectFile完美集成

该功能现在已完全可用，用户可以为广告内容添加更丰富的标题信息，提升内容管理的灵活性。