动态切换前端应用中的沙盒与生产环境API

// environment.js

// 定义环境枚举，用于内部标识
const ENVS = {
  LOCAL: "local",
  SANDBOX: "sandbox",
  PROD: "prod",
};

// 定义每个环境的详细配置
const Environments = {
  Sandbox: {
    name: "Sandbox",
    env: ENVS.SANDBOX,
    apiHost: "http://156.21.190.78", // 沙盒环境API主机
    apiBase: "/api/v1",              // API基础路径
  },
  Prod: {
    name: "Production",
    env: ENVS.PROD,
    apiHost: "http://156.23.190.78", // 生产环境API主机
    apiBase: "/api/v1",
  },
  // 可以根据需要添加更多环境，例如 Local
  // Local: {
  //   name: "Local",
  //   env: ENVS.LOCAL,
  //   apiHost: "http://localhost:8000",
  //   apiBase: "/api/v1",
  // },
};

// 当前激活的环境，默认为生产环境
const Environment = {
  current: Environments.Prod,
};

// 主机名匹配器，用于自动检测环境（可选）
const ENV_MATCHERS = {
  [ENVS.LOCAL]: ["localhost", "127.0.0.1"],
  [ENVS.SANDBOX]: ["sandbox"], // 例如，如果沙盒环境部署在 sandbox.yourdomain.com
};

// 检查给定主机URL是否匹配特定环境
const isEnv = (hostUrl, environment) => {
  const matchers = ENV_MATCHERS[environment];
  if (!matchers) {
    // 如果没有为该环境定义匹配器，则认为不匹配或抛出错误
    return false;
  }
  return matchers.some((match) => hostUrl.includes(match));
};

/**
 * 根据环境名称显式设置当前环境。
 * @param {string} envName - 要设置的环境名称，如 "Sandbox" 或 "Production"。
 */
const setEnvironmentByName = (envName) => {
  switch (envName) {
    case Environments.Sandbox.name:
    case ENVS.SANDBOX:
      Environment.current = Environments.Sandbox;
      break;
    case Environments.Prod.name:
    case ENVS.PROD:
      Environment.current = Environments.Prod;
      break;
    // case Environments.Local.name:
    // case ENVS.LOCAL:
    //   Environment.current = Environments.Local;
    //   break;
    default:
      console.warn(`未知环境名称: ${envName}。将默认为生产环境。`);
      Environment.current = Environments.Prod;
  }
};

/**
 * 根据当前浏览器主机自动检测并设置环境。
 * 这通常在应用初始化时调用一次。
 * @param {string} [host=''] - 浏览器主机名，默认为 window.location.host。
 */
const autoDetectEnvironment = (host = '') => {
  const currentHost = host || window.location.host;

  if (isEnv(currentHost, ENVS.LOCAL)) {
    // 如果有 Local 环境，可以在这里设置
    // Environment.current = Environments.Local;
    return ENVS.LOCAL;
  }
  if (isEnv(currentHost, ENVS.SANDBOX)) {
    Environment.current = Environments.Sandbox;
    return ENVS.SANDBOX;
  }
  // 默认设置为生产环境
  Environment.current = Environments.Prod;
  return ENVS.PROD;
};

// 应用启动时自动检测一次环境
autoDetectEnvironment();

export { Environment, setEnvironmentByName, autoDetectEnvironment, ENVS };

// App.js (React 组件示例)
import React from "react";
import { Switch, Text } from '@chakra-ui/react'; // 假设使用Chakra UI
import { Environment, setEnvironmentByName } from "./environment";

function App() {
  // 使用当前环境的名称初始化状态
  const [currentEnvName, setCurrentEnvName] = React.useState(Environment.current.name);

  // 根据当前环境名称判断Switch的checked状态
  const isSandboxMode = currentEnvName === Environments.Sandbox.name;

  const handleToggleChange = () => {
    const nextEnvName = isSandboxMode ? Environments.Prod.name : Environments.Sandbox.name;
    setEnvironmentByName(nextEnvName); // 切换环境
    setCurrentEnvName(Environment.current.name); // 更新组件状态
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>环境切换示例</h1>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
        <Text fontSize={15} mr={2}>
          {currentEnvName}
        </Text>
        <Switch
          isChecked={isSandboxMode}
          onChange={handleToggleChange}
          colorScheme="teal"
        />
      </div>
      <p>当前激活的API主机: {Environment.current.apiHost}</p>
      <p>当前激活的API基础路径: {Environment.current.apiBase}</p>
      {/* 其他组件和API调用将使用 Environment.current */}
    </div>
  );
}

export default App;

// api.js
import axios from "axios"; // 假设使用axios
import { Environment } from "./environment";

export class Api {
  /**
   * 获取当前环境的完整基础URL。
   * @returns {string} 完整的API基础URL。
   */
  static getBaseUrl() {
    const currentEnv = Environment.current;
    if (!currentEnv || !currentEnv.apiHost || !currentEnv.apiBase) {
      console.error("环境配置不完整，无法获取API基础URL。");
      return ""; // 或者抛出错误
    }
    return `${currentEnv.apiHost}${currentEnv.apiBase}`;
  }

  /**
   * 发送GET请求。
   * @param {string} path - API路径（不包含基础URL）。
   * @param {object} config - Axios请求配置。
   * @returns {Promise<any>} Axios响应数据。
   */
  static get(path, config) {
    const url = `${Api.getBaseUrl()}${path}`;
    return axios.get(url, config);
  }

  /**
   * 发送POST请求。
   * @param {string} path - API路径。
   * @param {object} data - 请求体数据。
   * @param {object} config - Axios请求配置。
   * @returns {Promise<any>} Axios响应数据。
   */
  static post(path, data, config) {
    const url = `${Api.getBaseUrl()}${path}`;
    return axios.post(url, data, config);
  }

  // 可以根据需要添加其他HTTP方法，如 put, delete 等
}

// customerService.js (或任何其他服务文件)
import { Api } from "./api";

/**
 * 获取所有客户数据。
 * @param {number} rows - 每页行数。
 * @param {number} page - 页码。
 * @param {string} token - 认证令牌。
 * @returns {Promise<any>} 客户数据。
 */
const getAllCustomers = async (rows, page, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  try {
    const response = await Api.get(
      `/customer/paginate-customer?page=${page}&rows=${rows}`,
      config
    );
    return response.data;
  } catch (error) {
    console.error("获取客户数据失败:", error);
    throw error;
  }
};

export { getAllCustomers };