96009bc9
 hexiaodong
hxd
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
# 绿纤协同平台配置系统说明
## 📋 概述
本配置系统用于管理不同环境的API地址配置，支持本地开发环境和正式环境的快速切换。
## 🏗️ 文件结构
```
html/
├── config.js # 主配置文件
├── expansion.html # 拓客页面（已集成配置）
├── expansion-template.html # 拓客模板页面（已集成配置）
└── README-config.md # 本说明文档
```
## ⚙️ 配置说明
### 环境配置
**1. 本地开发环境 (development)**
- 名称：本地开发环境
- API地址：`http://localhost:5000`
- 描述：本地开发服务器
**2. 正式环境 (production)**
- 名称：正式环境
- API地址：`http://lvqian.antissoft.com`
- 描述：生产环境服务器
### 默认环境
- 默认使用正式环境（production）
- 可通过修改 `config.js` 中的 `CURRENT_ENV` 变量来切换
## 🚀 使用方法
### 1. 基本使用
在HTML页面中引入配置文件：
```html
<script src="config.js"></script>
```
### 2. 获取配置信息
```javascript
// 获取当前环境配置
const config = window.APP_CONFIG.getCurrentConfig();
// 获取API基础地址
const apiUrl = window.APP_CONFIG.getApiBaseUrl();
// 获取环境名称
const envName = window.APP_CONFIG.getEnvName();
// 获取环境描述
const envDesc = window.APP_CONFIG.getEnvDescription();
```
### 3. 环境切换
```javascript
// 切换到开发环境
window.APP_CONFIG.switchEnvironment('development');
// 切换到正式环境
window.APP_CONFIG.switchEnvironment('production');
```
### 4. 环境检查
```javascript
// 检查是否为开发环境
if (window.APP_CONFIG.isDevelopment()) {
console.log('当前为开发环境');
}
// 检查是否为生产环境
if (window.APP_CONFIG.isProduction()) {
console.log('当前为生产环境');
}
```
## 🔧 页面集成
### 拓客页面 (expansion.html)
- 已完全集成配置系统
- 支持环境切换按钮
- 显示当前环境信息
- 自动加载默认配置
### 拓客模板页面 (expansion-template.html)
- 已集成配置系统
- 自动加载默认配置
- 支持配置持久化
## 💾 配置持久化
### localStorage 存储
- `expansionApiBaseUrl`: 拓客页面的API地址
- `expansionTemplateApiUrl`: 拓客模板页面的API地址
### 优先级
1. 用户手动输入的配置（localStorage）
2. 配置文件中的默认值
3. 硬编码的备用值
## 🎯 开发调试
### 控制台命令
```javascript
// 查看当前配置
console.log(window.APP_CONFIG.getCurrentConfig());
// 切换环境
window.APP_CONFIG.switchEnvironment('development');
// 查看所有可用环境
console.log(window.APP_CONFIG.getAvailableEnvironments());
```
### 环境切换事件
当环境切换时，会触发 `envChanged` 事件：
```javascript
window.addEventListener('envChanged', function(event) {
console.log('环境已切换:', event.detail);
});
```
## 🔄 添加新页面
### 1. 引入配置文件
```html
<script src="config.js"></script>
```
### 2. 加载配置
```javascript
function loadConfig() {
const savedApiUrl = localStorage.getItem('yourPageApiUrl');
const defaultApiUrl = window.APP_CONFIG ? window.APP_CONFIG.getApiBaseUrl() : 'http://localhost:5000';
const apiUrl = savedApiUrl || defaultApiUrl;
// 设置到页面元素
document.getElementById('apiUrl').value = apiUrl;
}
```
### 3. 保存配置
```javascript
function saveConfig() {
const apiUrl = document.getElementById('apiUrl').value;
localStorage.setItem('yourPageApiUrl', apiUrl);
}
```
## 🚨 注意事项
1. **配置文件加载顺序**: 确保在使用配置前已加载 `config.js`
2. **localStorage 键名**: 不同页面使用不同的键名避免冲突
3. **环境切换**: 切换环境后需要重新加载页面配置
4. **错误处理**: 配置加载失败时使用备用值
## 📝 更新日志
- **v1.0.0**: 初始版本，支持开发和生产环境
- 支持环境切换功能
- 集成到拓客相关页面
- 添加配置持久化支持
|
