admin-10559/CONFIG_MANAGEMENT.md

后端配置管理说明

概述

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

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中使用

import { useConfigStore } from '@/store/modules/config';

export default defineComponent({
  setup() {
    const configStore = useConfigStore();
    
    // 监听配置变化
    watch(() => configStore.config, (newConfig) => {
      console.log('配置已更新:', newConfig);
    });
    
    return {};
  }
});

在请求工具中使用

请求工具会自动优先使用配置中的API地址：

// 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接口定义