feat(config): 实现后端配置管理功能

- 添加 ApiUrl 和 theme 配置字段支持
- 新增根据 code 查询应用参数的 API 接口- 实现配置 store 管理网站配置数据
- 支持 API 地址优先级: 后台配置 > 本地配置- 配置数据自动存储到 localStorage 实现持久化- 添加配置管理说明文档 CONFIG_MANAGEMENT.md- 优化请求工具支持动态 API 地址切换- 移除无用的 openNew 工具函数引入
- 实现主题配置自动加载和存储功能
This commit is contained in:
2025-10-04 16:08:35 +08:00
parent 650c80f5fe
commit c00509e51b
8 changed files with 360 additions and 48 deletions

149
CONFIG_MANAGEMENT.md Normal file
View 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接口定义