config-test.html 9.06 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配置系统测试页面</title>
  <!-- 引入配置文件 -->
  <script src="config.js"></script>
  <style>
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
      margin: 0;
      min-height: 100vh;
      background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
      padding: 20px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    .header {
      background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
      padding: 24px;
      text-align: center;
      color: #fff;
    }
    .header h1 {
      margin: 0;
      font-size: 1.8em;
      letter-spacing: 2px;
    }
    .content {
      padding: 24px;
    }
    .section {
      margin-bottom: 24px;
      padding: 16px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      background: #f9f9f9;
    }
    .section h3 {
      margin-top: 0;
      color: #388e3c;
      border-bottom: 2px solid #43a047;
      padding-bottom: 8px;
    }
    .config-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #eee;
    }
    .config-item:last-child {
      border-bottom: none;
    }
    .config-label {
      font-weight: bold;
      color: #333;
    }
    .config-value {
      color: #666;
      font-family: monospace;
      background: #f0f0f0;
      padding: 4px 8px;
      border-radius: 4px;
    }
    .btn {
      background: linear-gradient(90deg, #43a047 60%, #66bb6a 100%);
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      margin: 4px;
      transition: all 0.2s;
    }
    .btn:hover {
      background: linear-gradient(90deg, #388e3c 60%, #43a047 100%);
      transform: translateY(-1px);
    }
    .btn.dev {
      background: linear-gradient(90deg, #1976d2 60%, #42a5f5 100%);
    }
    .btn.dev:hover {
      background: linear-gradient(90deg, #1565c0 60%, #1976d2 100%);
    }
    .btn.prod {
      background: linear-gradient(90deg, #388e3c 60%, #66bb6a 100%);
    }
    .btn.prod:hover {
      background: linear-gradient(90deg, #2e7d32 60%, #388e3c 100%);
    }
    .status {
      padding: 8px 12px;
      border-radius: 4px;
      margin: 8px 0;
      font-weight: bold;
    }
    .status.success {
      background: #e8f5e9;
      color: #2e7d32;
      border: 1px solid #c8e6c9;
    }
    .status.info {
      background: #e3f2fd;
      color: #1976d2;
      border: 1px solid #bbdefb;
    }
    .log {
      background: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 12px;
      max-height: 200px;
      overflow-y: auto;
      font-family: monospace;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>🌱 绿纤协同平台配置系统测试</h1>
    </div>

    <div class="content">
      <!-- 当前配置信息 -->
      <div class="section">
        <h3>📋 当前配置信息</h3>
        <div id="currentConfig">
          <div class="config-item">
            <span class="config-label">当前环境:</span>
            <span class="config-value" id="currentEnv">加载中...</span>
          </div>
          <div class="config-item">
            <span class="config-label">API地址:</span>
            <span class="config-value" id="currentApiUrl">加载中...</span>
          </div>
          <div class="config-item">
            <span class="config-label">环境描述:</span>
            <span class="config-value" id="currentEnvDesc">加载中...</span>
          </div>
        </div>
      </div>

      <!-- 环境切换 -->
      <div class="section">
        <h3>🔄 环境切换</h3>
        <div>
          <button class="btn dev" onclick="switchToDev()">切换到开发环境</button>
          <button class="btn prod" onclick="switchToProd()">切换到正式环境</button>
        </div>
        <div id="switchStatus"></div>
      </div>

      <!-- 配置测试 -->
      <div class="section">
        <h3>🧪 配置测试</h3>
        <div>
          <button class="btn" onclick="testConfig()">测试配置系统</button>
          <button class="btn" onclick="clearLog()">清空日志</button>
        </div>
        <div id="testStatus"></div>
      </div>

      <!-- 可用环境 -->
      <div class="section">
        <h3>🌍 可用环境</h3>
        <div id="availableEnvs"></div>
      </div>

      <!-- 操作日志 -->
      <div class="section">
        <h3>📝 操作日志</h3>
        <div class="log" id="logOutput"></div>
      </div>
    </div>
  </div>

  <script>
    // 日志函数
    function log(message, type = 'info') {
      const logOutput = document.getElementById('logOutput');
      const timestamp = new Date().toLocaleTimeString();
      const logEntry = document.createElement('div');
      logEntry.innerHTML = `[${timestamp}] ${message}`;
      logEntry.style.color = type === 'error' ? '#d32f2f' : type === 'success' ? '#2e7d32' : '#1976d2';
      logOutput.appendChild(logEntry);
      logOutput.scrollTop = logOutput.scrollHeight;
    }

    // 清空日志
    function clearLog() {
      document.getElementById('logOutput').innerHTML = '';
      log('日志已清空', 'info');
    }

    // 更新配置显示
    function updateConfigDisplay() {
      if (window.APP_CONFIG) {
        document.getElementById('currentEnv').textContent = window.APP_CONFIG.getEnvName();
        document.getElementById('currentApiUrl').textContent = window.APP_CONFIG.getApiBaseUrl();
        document.getElementById('currentEnvDesc').textContent = window.APP_CONFIG.getEnvDescription();

        // 更新可用环境
        const availableEnvs = window.APP_CONFIG.getAvailableEnvironments();
        document.getElementById('availableEnvs').innerHTML = availableEnvs.map(env =>
          `<span class="config-value" style="margin-right: 8px;">${env}</span>`
        ).join('');

        log(`配置已加载 - 当前环境: ${window.APP_CONFIG.getEnvName()}`, 'success');
      } else {
        log('配置系统未加载', 'error');
      }
    }

    // 切换到开发环境
    function switchToDev() {
      if (window.APP_CONFIG && window.APP_CONFIG.switchEnvironment('development')) {
        updateConfigDisplay();
        showStatus('已切换到开发环境', 'success');
        log('环境已切换到开发环境', 'success');
      } else {
        showStatus('环境切换失败', 'error');
        log('环境切换失败', 'error');
      }
    }

    // 切换到正式环境
    function switchToProd() {
      if (window.APP_CONFIG && window.APP_CONFIG.switchEnvironment('production')) {
        updateConfigDisplay();
        showStatus('已切换到正式环境', 'success');
        log('环境已切换到正式环境', 'success');
      } else {
        showStatus('环境切换失败', 'error');
        log('环境切换失败', 'error');
      }
    }

    // 测试配置系统
    function testConfig() {
      if (window.APP_CONFIG) {
        const config = window.APP_CONFIG.getCurrentConfig();
        const testResults = [
          `环境名称: ${config.name}`,
          `API地址: ${config.apiBaseUrl}`,
          `环境描述: ${config.description}`,
          `是否为开发环境: ${window.APP_CONFIG.isDevelopment()}`,
          `是否为生产环境: ${window.APP_CONFIG.isProduction()}`
        ];

        showStatus('配置系统测试通过', 'success');
        log('配置系统测试结果:', 'info');
        testResults.forEach(result => log(`  ${result}`, 'info'));
      } else {
        showStatus('配置系统未加载', 'error');
        log('配置系统未加载', 'error');
      }
    }

    // 显示状态
    function showStatus(message, type) {
      const statusElement = document.getElementById('testStatus');
      statusElement.innerHTML = `<div class="status ${type}">${message}</div>`;
      if (type === 'success') {
        setTimeout(() => {
          statusElement.innerHTML = '';
        }, 3000);
      }
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      // 等待配置文件加载
      setTimeout(() => {
        updateConfigDisplay();

        // 监听环境切换事件
        window.addEventListener('envChanged', function(event) {
          log(`环境切换事件触发: ${event.detail.environment}`, 'info');
          updateConfigDisplay();
        });

        log('页面初始化完成', 'success');
      }, 100);
    });

    // 定期检查配置状态
    setInterval(() => {
      if (window.APP_CONFIG) {
        const env = window.APP_CONFIG.getCurrentConfig();
        if (env) {
          log(`心跳检测: ${env.name} - ${env.apiBaseUrl}`, 'info');
        }
      }
    }, 30000); // 30秒检查一次
  </script>
</body>
</html>