feat(config): 实现后端配置管理功能
- 添加 ApiUrl 和 theme 配置字段支持 - 新增根据 code 查询应用参数的 API 接口- 实现配置 store 管理网站配置数据 - 支持 API 地址优先级: 后台配置 > 本地配置- 配置数据自动存储到 localStorage 实现持久化- 添加配置管理说明文档 CONFIG_MANAGEMENT.md- 优化请求工具支持动态 API 地址切换- 移除无用的 openNew 工具函数引入 - 实现主题配置自动加载和存储功能
This commit is contained in:
149
CONFIG_MANAGEMENT.md
Normal file
149
CONFIG_MANAGEMENT.md
Normal file
@@ -0,0 +1,149 @@
|
||||
# 后端配置管理说明
|
||||
|
||||
## 概述
|
||||
|
||||
本项目实现了与小程序端一致的配置管理机制,后端管理端现在也支持优先使用后台配置的API地址。
|
||||
|
||||
## 核心文件
|
||||
|
||||
1. `src/store/modules/config.ts` - 配置状态管理模块
|
||||
2. `src/composables/useConfig.ts` - 配置初始化组合式函数
|
||||
3. `src/views/system/config-demo.vue` - 配置演示页面
|
||||
4. `src/utils/request.ts` - 更新后的请求工具,支持API地址优先级
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 1. API地址优先级
|
||||
- 优先使用后台配置的API地址(存储在config中的ApiUrl字段)
|
||||
- 如果未配置,则回退使用本地配置的API_BASE_URL
|
||||
|
||||
### 2. 配置存储
|
||||
- 使用Pinia进行状态管理
|
||||
- 同时存储在localStorage中,支持持久化
|
||||
- 提供获取、设置、刷新、清除配置的方法
|
||||
|
||||
### 3. 自动初始化
|
||||
- 应用启动时自动加载配置
|
||||
- 支持从缓存中快速恢复配置
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 在组件中使用配置store
|
||||
|
||||
```typescript
|
||||
import { useConfigStore } from '@/store/modules/config';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const configStore = useConfigStore();
|
||||
|
||||
// 获取配置
|
||||
const config = configStore.config;
|
||||
|
||||
// 获取API地址
|
||||
const apiUrl = configStore.getApiUrl;
|
||||
|
||||
// 获取网站名称
|
||||
const siteName = configStore.getSiteName;
|
||||
|
||||
// 刷新配置
|
||||
const refreshConfig = async () => {
|
||||
try {
|
||||
await configStore.refetchConfig();
|
||||
} catch (error) {
|
||||
console.error('刷新配置失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
config,
|
||||
apiUrl,
|
||||
siteName,
|
||||
refreshConfig
|
||||
};
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 在组合式API中使用
|
||||
|
||||
```typescript
|
||||
import { useConfigStore } from '@/store/modules/config';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const configStore = useConfigStore();
|
||||
|
||||
// 监听配置变化
|
||||
watch(() => configStore.config, (newConfig) => {
|
||||
console.log('配置已更新:', newConfig);
|
||||
});
|
||||
|
||||
return {};
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 在请求工具中使用
|
||||
|
||||
请求工具会自动优先使用配置中的API地址:
|
||||
|
||||
```typescript
|
||||
// src/utils/request.ts
|
||||
const getBaseUrl = (): string => {
|
||||
// 尝试从配置store获取后台配置的API地址
|
||||
try {
|
||||
const configStore = useConfigStore();
|
||||
if (configStore.config && configStore.config.ApiUrl) {
|
||||
return configStore.config.ApiUrl;
|
||||
}
|
||||
|
||||
// 回退到localStorage
|
||||
const configStr = localStorage.getItem('config');
|
||||
if (configStr) {
|
||||
const config = typeof configStr === 'string' ? JSON.parse(configStr) : configStr;
|
||||
if (config && config.ApiUrl) {
|
||||
return config.ApiUrl;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('获取后台配置API地址失败:', error);
|
||||
}
|
||||
|
||||
// 最后回退到本地配置
|
||||
return API_BASE_URL;
|
||||
};
|
||||
```
|
||||
|
||||
## 配置字段说明
|
||||
|
||||
配置对象包含以下字段:
|
||||
|
||||
- `siteName` - 网站名称
|
||||
- `siteLogo` - 网站Logo
|
||||
- `domain` - 域名
|
||||
- `icpNo` - ICP备案号
|
||||
- `copyright` - 版权信息
|
||||
- `loginBgImg` - 登录背景图
|
||||
- `address` - 联系地址
|
||||
- `tel` - 联系电话
|
||||
- `kefu2` - 客服2
|
||||
- `kefu1` - 客服1
|
||||
- `email` - 邮箱
|
||||
- `loginTitle` - 登录标题
|
||||
- `sysLogo` - 系统Logo
|
||||
- `ApiUrl` - API地址(新增)
|
||||
- `theme` - 主题(新增)
|
||||
|
||||
## 菜单配置
|
||||
|
||||
配置演示页面已添加到系统管理菜单中:
|
||||
- 路径:`/system/config-demo`
|
||||
- 组件:`/src/views/system/config-demo.vue`
|
||||
- 图标:`ExperimentOutlined`
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 配置数据会自动存储在localStorage中,键名为`config`
|
||||
2. 主题配置会存储在localStorage中,键名为`user_theme`
|
||||
3. 如果需要自定义配置字段,需要更新`src/api/cms/cmsWebsiteField/model/index.ts`中的Config接口定义
|
||||
Reference in New Issue
Block a user