# 后端配置管理说明

## 概述

本项目实现了与小程序端一致的配置管理机制，后端管理端现在也支持优先使用后台配置的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接口定义