赵忠林
562b020e57
- 新增API密钥创建表单界面 - 实现API密钥名称输入验证 - 添加表单提交和取消功能 - 集成密钥管理弹窗组件 - 支持密钥信息的双向数据绑定 - 添加表单校验规则和错误提示 - 实现密钥创建成功后的消息通知 - 提供密钥管理模块的基础架构支持
149 lines
3.6 KiB
Markdown
149 lines
3.6 KiB
Markdown
# 后端配置管理说明
|
||
|
||
## 概述
|
||
|
||
本项目实现了与小程序端一致的配置管理机制，后端管理端现在也支持优先使用后台配置的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接口定义 |