# 工厂常量配置系统使用说明

## 概述

新的工厂常量配置系统允许您通过枚举类型调用弹窗，所有弹窗的关键路径和配置信息都统一存储在常量配置文件中。后期维护只需修改配置文件，无需修改代码文件。

## 当前支持的弹窗类型

| 枚举值 | 弹窗名称 | 说明 |
|--------|----------|------|
| `MODAL_TYPES.SKU` | SKU定价弹窗 | SKU定价相关功能 |
| `MODAL_TYPES.ABOUT` | 关于我们弹窗 | 关于插件的信息 |
| `MODAL_TYPES.REGION` | 区域定价弹窗 | 区域定价相关功能 |
| `MODAL_TYPES.CARGO` | 货运表单弹窗 | 货运表单相关功能 |

## 使用方法

### 1. 基本调用方式

```javascript
// 通过枚举类型调用弹窗
loadAndShowModal(MODAL_TYPES.SKU);     // 调用SKU定价弹窗
loadAndShowModal(MODAL_TYPES.ABOUT);   // 调用关于我们弹窗
loadAndShowModal(MODAL_TYPES.REGION);  // 调用区域定价弹窗
loadAndShowModal(MODAL_TYPES.CARGO);   // 调用货运表单弹窗
```

### 2. 直接使用工厂模式

```javascript
// 检查工厂模式是否已加载
if (!window.ModalFactory) {
    // 加载工厂模式代码
    await new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = chrome.runtime.getURL('mode/modal-factory.js');
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

// 创建工厂实例
const modalFactory = new window.ModalFactory();

// 通过简称调用弹窗
await modalFactory.showModalByKey('sku');

// 或者使用完整方法
await modalFactory.createModal('about');
```

### 3. 检查弹窗是否存在

```javascript
const modalFactory = new window.ModalFactory();
const hasModal = await modalFactory.hasModal('sku');
if (hasModal) {
    await modalFactory.showModalByKey('sku');
}
```

### 4. 获取所有可用弹窗

```javascript
const modalFactory = new window.ModalFactory();
const availableModals = await modalFactory.getAvailableModals();
console.log('可用弹窗:', availableModals);
```

## 配置文件结构

配置文件位于：`mode/config/modal-config.js`

```javascript
const MODAL_CONFIG = {
    // SKU定价弹窗
    sku: {
        htmlFile: 'model/sku-pricing-modal.html',
        jsFile: 'js/sku-pricing-modal/sku-pricing-modal.js',
        modalId: 'skuPricingModal',
        displayName: 'SKU定价弹窗'
    },
    
    // 关于我们弹窗
    about: {
        htmlFile: 'model/about-modal.html',
        jsFile: 'js/modal/about-modal.js',
        modalId: 'aboutModal',
        displayName: '关于我们弹窗'
    },
    
    // 区域定价弹窗
    region: {
        htmlFile: 'model/region-pricing-modal.html',
        jsFile: 'js/modal/region-pricing-modal.js',
        modalId: 'regionPricingModal',
        displayName: '区域定价弹窗'
    },
    
    // 货运表单弹窗
    cargo: {
        htmlFile: 'model/cargo-form.html',
        jsFile: 'js/cargo-form.js',
        modalId: 'cargoFormModal',
        displayName: '货运表单弹窗'
    }
};
```

## 添加新弹窗的步骤

### 1. 在配置文件中添加新弹窗

```javascript
// 在 MODAL_CONFIG 对象中添加新配置
const MODAL_CONFIG = {
    // ... 现有配置 ...
    
    // 新弹窗配置
    newModal: {
        htmlFile: 'model/new-modal.html',
        jsFile: 'js/modal/new-modal.js',
        modalId: 'newModal',
        displayName: '新弹窗'
    }
};

// 在 MODAL_TYPES 中添加常量
const MODAL_TYPES = {
    // ... 现有常量 ...
    NEW_MODAL: 'newModal'
};
```

### 2. 调用新弹窗

```javascript
// 通过简称调用
loadAndShowModal('newModal');

// 或者使用常量
loadAndShowModal(MODAL_TYPES.NEW_MODAL);
```

## 优势

1. **简化调用**：只需输入简称即可调用弹窗
2. **易于维护**：所有配置集中管理，修改只需更新配置文件
3. **扩展性强**：添加新弹窗只需修改配置文件
4. **类型安全**：提供常量类型，减少拼写错误
5. **自动验证**：配置文件自动验证完整性

## 注意事项

1. 配置文件路径为 `mode/config/modal-config.js`
2. 所有弹窗的HTML文件必须在 `model/` 文件夹下
3. 所有弹窗的JS文件必须在对应的JS文件夹下
4. 弹窗ID必须与HTML文件中的弹窗元素ID一致
5. 新增弹窗后，需要确保对应的HTML和JS文件存在

## 错误处理

系统会自动验证配置文件的完整性，如果配置有误会在控制台显示错误信息。常见的错误包括：

- 缺少必要的配置项（htmlFile、jsFile、modalId）
- 文件路径不存在
- 弹窗元素ID不匹配

通过这个系统，您可以轻松管理和扩展弹窗功能，大大提高了代码的可维护性和扩展性。