# 外部数据源对话框升级完成

## ✅ 更新完成

AI作物模型精准决策系统 - 全域数据感知中心 - **外部数据源编辑对话框**已完成重大升级！

---

## 📝 更新内容

### 1. 接入方式动态切换 ✅

**新增功能**：
- ✅ 在数据源对话框中添加"接入方式"选择器
- ✅ 支持4种接入方式：手动上传、API对接、FTP传输、WebSocket
- ✅ 根据选择的接入方式动态显示不同的表单内容

**位置**：`/components/ai/AIDataCenter.tsx`

```typescript
// 新增状态管理
const [selectedAccessMethod, setSelectedAccessMethod] = useState<AccessMethod>('API对接');
```

---

### 2. 手动上传模式对话框 ✅

**功能说明**：

当接入方式选择为"手动上传"时，对话框将显示与"手动上传数据"弹窗完全相同的内容：

#### 📤 对话框标题
```
📤 添加数据源 / 编辑数据源
支持CSV、JSON、XML等多种格式数据上传，支持多文件同时上传，系统将自动进行格式适配和质量校验
```

#### 📋 表单字段

1. **数据源名称**
   - 占位符："输入数据源名称，如：2024年10月气象监测数据"

2. **数据类型**
   - 气象数据
   - 卫星遥感影像
   - 土壤监测数据
   - 作物生长数据
   - 其他数据

3. **接入方式**
   - 手动上传 ⭐（已选择）
   - API对接
   - FTP传输
   - WebSocket

4. **描述说明**
   - 多行文本框
   - 提示：输入数据源的描述信息，包括数据来源、采集时间、数据范围等...

5. **数据格式**
   - CSV（逗号分隔）
   - JSON
   - XML
   - GeoJSON（地理数据）
   - Excel（.xlsx）

#### 📁 文件上传区域

```
┌─────────────────────────────────────────────────┐
│           📤  点击上传或拖拽文件到此处          │
│   支持 CSV, JSON, XML, GeoJSON, Excel 格式，   │
│            可同时上传多个文件                   │
└─────────────────────────────────────────────────┘
```

**功能特性**：
- ✅ 支持多文件选择（`multiple` 属性）
- ✅ 支持的格式：.csv, .json, .xml, .xlsx, .geojson
- ✅ 点击上传或拖拽上传

#### 📊 已选择的文件列表

显示所有已选择的文件：
```
已选择的文件
┌────────────────────────────────────────┐
│ 📄 weather_data.csv    125.50 KB  [❌] │
│ 📄 soil_moisture.json   45.20 KB  [❌] │
│ 📄 satellite_image.geo 890.30 KB  [❌] │
└────────────────────────────────────────┘
```

**功能**：
- ✅ 显示文件名、大小
- ✅ 每个文件都有删除按钮
- ✅ 实时更新文件数量

#### 📈 上传进度条

```
上传进度  75%
[████████████░░░░]
```

#### ✅ 数据质量校验

```yaml
数据质量校验
  - 自动检测数据完整性 [✓]
  - 验证数据格式规范 [✓]
  - 异常值自动标记 [✓]
```

#### 👁 数据预览

上传完成后显示数据预览：
```
数据预览                        [👁 查看详情]
┌──────────────────────────────────────┐
│ 数据记录数：1,245 条                 │
│ 数据字段数：12 个                    │
│ 完整性评分：98.5% ✅                 │
│ 时间范围：2024-10-01 至 2024-10-15  │
└──────────────────────────────────────┘
```

#### 🔘 底部按钮

```
[取消]  [✅ 确认导入 (3个文件)]
```

**按钮状态**：
- ✅ 未上传文件时禁用"确认导入"按钮
- ✅ 上传未完成时禁用"确认导入"按钮
- ✅ 上传完成后启用"确认导入"按钮
- ✅ 显示实际文件数量

---

### 3. API对接模式对话框 ✅

**功能说明**：

当接入方式选择为"API对接"、"FTP传输"或"WebSocket"时，对话框显示原有的API配置内容：

#### 📋 表单字段

1. **数据源名称**
   - 占位符："输入数据源名称"

2. **数据类型**
   - 气象数据
   - 卫星遥感
   - 土壤数据
   - 作物生长

3. **接入方式**
   - 手动上传
   - API对接 ⭐（已选择）
   - FTP传输
   - WebSocket

4. **数据提供商**
   - 输入提供商名称

5. **API端点**
   - 输入API地址
   - 占位符：https://api.example.com/data

#### 🔐 API认证配置（可选）

```yaml
认证方式:
  - 无需认证
  - API Key
  - Bearer Token
  - Basic Auth
  - OAuth 2.0

配置项:
  - API Key / Token
  - 请求头名称
```

#### ⚙️ 其他配置

6. **更新频率**
   - 实时
   - 每5分钟
   - 每小时
   - 每天
   - 每周

7. **数据格式**
   - JSON
   - XML
   - CSV
   - GeoJSON

8. **数据字段**
   - 用逗号分隔多个字段
   - 如：温度,湿度,降水量

9. **描述说明**
   - 多行文本框

#### 🔄 同步设置

```
[✓] 启用自动同步     [🔗 测试连接]
```

**注意**：
- ✅ 显示"测试连接"按钮
- ✅ 支持自动同步开关

#### 🔘 底部按钮

```
[取消]  [保存配置]
```

---

### 4. 测试连接按钮控制 ✅

**规则**：

1. **数据源列表中的测试连接按钮**
   - 接入方式为"手动上传"时：❌ **隐藏按钮**
   - 接入方式为其他方式时：✅ **显示按钮**

2. **编辑对话框中的测试连接按钮**
   - 接入方式为"手动上传"时：❌ **不显示**
   - 接入方式为其他方式时：✅ **显示按钮**

**代码实现**：

```typescript
// 数据源列表中
{source.accessMethod !== '手动上传' && (
  <Button size="sm" variant="outline" onClick={handleTestConnection}>
    <Link className="w-3 h-3" />
  </Button>
)}

// 对话框中
{selectedAccessMethod !== '手动上传' && (
  <Button size="sm" variant="outline" onClick={handleTestConnection}>
    <Link className="w-3 h-3 mr-1" />
    测试连接
  </Button>
)}
```

---

## 🎨 界面对比

### 手动上传模式 vs API对接模式

| 项目 | 手动上传模式 | API对接模式 |
|------|-------------|------------|
| 对话框标题图标 | 📤 Upload | 无 |
| 描述文字 | 支持多文件上传... | 配置接入方式和参数 |
| 数据提供商 | ❌ 不显示 | ✅ 显示 |
| API端点 | ❌ 不显示 | ✅ 显示 |
| API认证配置 | ❌ 不显示 | ✅ 显示 |
| 描述说明位置 | 上方（第3项） | 下方（最后一项） |
| 数据格式选项 | CSV/JSON/XML/GeoJSON/Excel | JSON/XML/CSV/GeoJSON |
| 文件上传区域 | ✅ 显示 | ❌ 不显示 |
| 文件列表 | ✅ 显示 | ❌ 不显示 |
| 上传进度 | ✅ 显示 | ❌ 不显示 |
| 数据质量校验 | ✅ 显示 | ❌ 不显示 |
| 数据预览 | ✅ 显示 | ❌ 不显示 |
| 更新频率 | ❌ 不显示 | ✅ 显示 |
| 数据字段 | ❌ 不显示 | ✅ 显示 |
| 启用自动同步 | ❌ 不显示 | ✅ 显示 |
| 测试连接按钮 | ❌ 不显示 | ✅ 显示 |
| 确认按钮文字 | ✅ 确认导入 (X个文件) | 保存配置 |
| 按钮禁用逻辑 | 无文件或未完成时禁用 | 无禁用 |

---

## 📊 完整功能流程

### 场景1：添加手动上传数据源

```
1. 点击"添加数据源"按钮
   ↓
2. 打开数据源对话框
   - 默认接入方式：API对接
   ↓
3. 填写数据源名称
   ↓
4. 选择数据类型
   ↓
5. 选择接入方式 → "手动上传" ⭐
   ↓
6. 对话框内容切换为手动上传模式
   - 隐藏API相关字段
   - 显示文件上传区域
   - 显示数据质量校验
   - 隐藏测试连接按钮
   ↓
7. 填写描述说明
   ↓
8. 选择数据格式
   ↓
9. 上传文件（支持多个）
   - 点击上传区域
   - 选择文件
   - 查看文件列表
   ↓
10. 等待上传完成
    - 查看上传进度
    ↓
11. 查看数据预览（可选）
    ↓
12. 点击"✅ 确认导入 (X个文件)"
    ↓
13. 保存成功，关闭对话框
```

---

### 场景2：编辑手动上传数据源

```
1. 在数据源列表中找到手动上传的数据源
   ↓
2. 注意：该数据源的操作栏**没有测试连接按钮** ✅
   ↓
3. 点击"编辑"按钮
   ↓
4. 打开数据源对话框
   - 自动设置接入方式为"手动上传"
   - 自动显示手动上传模式界面
   ↓
5. 修改数据源信息
   ↓
6. 重新上传文件（如需要）
   ↓
7. 点击"✅ 确认导入"
   ↓
8. 保存成功
```

---

### 场景3：添加API对接数据源

```
1. 点击"添加数据源"按钮
   ↓
2. 打开数据源对话框
   - 默认接入方式：API对接 ⭐
   - 显示API配置界面
   ↓
3. 填写数据源信息
   - 数据源名称
   - 数据类型
   - 数据提供商
   - API端点
   ↓
4. 配置API认证（可选）
   ↓
5. 设置更新频率和数据格式
   ↓
6. 填写数据字段和描述
   ↓
7. 启用自动同步（可选）
   ↓
8. 点击"测试连接"验证（可选）
   ↓
9. 点击"保存配置"
   ↓
10. 保存成功
```

---

### 场景4：切换接入方式

```
1. 打开数据源对话框
   ↓
2. 当前接入方式：API对接
   - 显示API配置界面
   ↓
3. 切换接入方式为"手动上传"
   ↓
4. 对话框内容立即切换
   - 隐藏API字段
   - 显示文件上传区域
   - 隐藏测试连接按钮
   ↓
5. 切换回"API对接"
   ↓
6. 对话框内容恢复
   - 显示API字段
   - 隐藏文件上传区域
   - 显示测试连接按钮
```

---

## 🎯 关键技术实现

### 1. 动态接入方式管理

```typescript
// 状态管理
const [selectedAccessMethod, setSelectedAccessMethod] = useState<AccessMethod>('API对接');

// 打开添加对话框时重置
onClick={() => {
  setSelectedDataSource(null);
  setSelectedAccessMethod('API对接');  // 默认API对接
  setUploadedFile(null);
  setUploadedFiles([]);
  setUploadProgress(0);
  setShowDataSourceDialog(true);
}}

// 打开编辑对话框时设置
onClick={() => {
  setSelectedDataSource(source);
  setSelectedAccessMethod(source.accessMethod);  // 使用数据源的接入方式
  setShowDataSourceDialog(true);
}}
```

---

### 2. 条件渲染逻辑

```typescript
{selectedAccessMethod === '手动上传' ? (
  <>
    {/* 手动上传模式的内容 */}
    <描述说明 />
    <数据格式选择 />
    <文件上传区域 />
    <文件列表 />
    <上传进度 />
    <数据质量校验 />
    <数据预览 />
  </>
) : (
  <>
    {/* API对接模式的内容 */}
    <数据提供商 />
    <API端点 />
    <API认证配置 />
    <更新频率 />
    <数据格式 />
    <数据字段 />
    <描述说明 />
    <自动同步和测试连接 />
  </>
)}
```

---

### 3. 测试连接按钮控制

```typescript
// 数据源列表
{source.accessMethod !== '手动上传' && (
  <Button size="sm" variant="outline" onClick={handleTestConnection}>
    <Link className="w-3 h-3" />
  </Button>
)}

// 对话框中（在API对接模式的JSX中）
<Button size="sm" variant="outline" onClick={handleTestConnection}>
  <Link className="w-3 h-3 mr-1" />
  测试连接
</Button>
```

---

### 4. 确认按钮动态文字和禁用

```typescript
<Button 
  className="bg-blue-600 hover:bg-blue-700" 
  disabled={selectedAccessMethod === '手动上传' && (uploadedFiles.length === 0 || uploadProgress < 100)}
  onClick={() => {
    handleSaveDataSource();
    if (selectedAccessMethod === '手动上传') {
      setUploadedFile(null);
      setUploadedFiles([]);
      setUploadProgress(0);
    }
  }}
>
  {selectedAccessMethod === '手动上传' ? (
    <>
      <CheckCircle2 className="w-4 h-4 mr-2" />
      确认导入 {uploadedFiles.length > 0 ? `(${uploadedFiles.length}个文件)` : ''}
    </>
  ) : (
    '保存配置'
  )}
</Button>
```

---

## ✅ 验收清单

### 功能验收 ✅

- [x] 添加数据源时，默认接入方式为"API对接"
- [x] 添加数据源时，可切换接入方式
- [x] 切换为"手动上传"时，显示手动上传界面
- [x] 切换为其他方式时，显示API配置界面
- [x] 编辑数据源时，自动设置为数据源的接入方式
- [x] 编辑手动上传数据源时，显示手动上传界面
- [x] 编辑API对接数据源时，显示API配置界面

### 测试连接按钮验收 ✅

- [x] 手动上传数据源在列表中无测试连接按钮
- [x] API对接数据源在列表中有测试连接按钮
- [x] 手动上传模式对话框中无测试连接按钮
- [x] API对接模式对话框中有测试连接按钮

### 文件上传验收 ✅

- [x] 手动上传模式支持多文件选择
- [x] 显示文件列表
- [x] 支持删除单个文件
- [x] 显示上传进度
- [x] 显示数据预览
- [x] 确认按钮显示文件数量

### 界面验收 ✅

- [x] 手动上传模式的对话框标题有Upload图标
- [x] 手动上传模式的描述文字正确
- [x] 手动上传模式的字段顺序正确
- [x] 手动上传模式的确认按钮文字正确
- [x] API对接模式的所有字段正常显示

---

## 🎉 更新亮点

### 1. 统一体验 ✅

**优势**：
- 手动上传数据源的编辑体验与手动上传弹窗完全一致
- 减少用户学习成本
- 提高操作一致性

### 2. 智能隐藏 ✅

**优势**：
- 手动上传模式自动隐藏无关的API配置
- 手动上传数据源自动隐藏测试连接按钮
- 简化界面，突出重点

### 3. 动态切换 ✅

**优势**：
- 支持在同一个对话框中切换接入方式
- 实时显示对应的配置界面
- 灵活便捷

### 4. 完整功能 ✅

**优势**：
- 保留所有手动上传功能（多文件、进度、预览等）
- 保留所有API配置功能（认证、同步、测试等）
- 功能无缺失

---

## 💡 使用建议

### 推荐场景1：一次性历史数据导入

**场景**：导入历史气象监测数据

**操作**：
1. 点击"添加数据源"
2. 选择接入方式为"手动上传"
3. 上传历史数据文件
4. 确认导入

**优势**：
- 无需配置API
- 快速导入数据
- 适合一次性导入

---

### 推荐场景2：实时数据接入

**场景**：接入国家气象局实时API

**操作**：
1. 点击"添加数据源"
2. 选择接入方式为"API对接"（默认）
3. 配置API端点和认证
4. 启用自动同步
5. 测试连接
6. 保存配置

**优势**：
- 自动同步数据
- 实时更新
- 适合持续接入

---

### 推荐场景3：定期上传更新

**场景**：每周上传土壤监测数据

**操作**：
1. 首次添加数据源（手动上传模式）
2. 上传初始数据
3. 每周编辑该数据源
4. 上传新的数据文件
5. 系统自动更新

**优势**：
- 数据源信息保留
- 仅更新数据文件
- 方便管理

---

## 📋 注意事项

### 1. 接入方式选择

**重要**：
- 添加数据源时，先确定接入方式
- 接入方式决定了配置界面和功能
- 建议根据数据来源特点选择合适的接入方式

### 2. 手动上传模式

**限制**：
- 不支持自动同步
- 不支持实时更新
- 需要手动上传新数据

**适用场景**：
- 一次性数据导入
- 历史数据归档
- 定期手动更新

### 3. API对接模式

**要求**：
- 需要有效的API端点
- 可能需要API密钥或认证
- 需要稳定的网络连接

**适用场景**：
- 实时数据接入
- 自动同步更新
- 持续数据流

---

## 🎯 总结

### 主要改进 ✅

1. **接入方式选择器**
   - 添加到数据源对话框
   - 支持4种接入方式
   - 动态切换界面

2. **手动上传模式**
   - 完整的文件上传功能
   - 与手动上传弹窗一致
   - 支持多文件管理

3. **测试连接按钮控制**
   - 手动上传时隐藏
   - API对接时显示
   - 智能判断显示

4. **统一用户体验**
   - 编辑对话框与上传弹窗一致
   - 减少学习成本
   - 提高操作效率

### 用户价值 ✅

- 🎯 **操作统一** - 手动上传数据源的编辑体验与独立上传一致
- 🚀 **界面简化** - 根据接入方式智能显示相关配置
- 💪 **功能完整** - 保留所有上传和配置功能
- 📊 **灵活切换** - 支持在对话框中切换接入方式

### 可用性 ✅

- ✅ 立即可用
- ✅ 功能完整
- ✅ 体验优化
- ✅ 兼容性好

---

**更新时间**: 2024-10-23  
**更新状态**: ✅ **已完成**  
**版本**: v2.0  
**影响范围**: 外部数据源配置对话框

---

感谢您的反馈！外部数据源配置对话框已按照您的要求完成优化，实现了接入方式的动态切换和手动上传模式的完整功能！
