login.html 19.3 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>
  <!-- 引入MD5加密库 -->
  <script src="md5.js"></script>
  <!-- 引入认证工具 -->
  <script src="auth-utils.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
      margin: 0;
      min-height: 100vh;
      background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .login-container {
      width: 100%;
      max-width: 420px;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 4px 24px 0 rgba(76, 175, 80, 0.10), 0 1.5px 6px 0 rgba(76, 175, 80, 0.08);
      border: 1.5px solid #c8e6c9;
      overflow: hidden;
    }
    .login-header {
      background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
      padding: 32px 24px 24px 24px;
      text-align: center;
      position: relative;
    }
    .login-header::after {
      content: '';
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 2px 12px 0 rgba(67, 233, 123, 0.08);
    }
    .login-title {
      color: #fff;
      font-size: 1.4em;
      font-weight: bold;
      letter-spacing: 2px;
      margin-bottom: 8px;
    }
    .login-subtitle {
      color: #e0f2f1;
      font-size: 0.95em;
      margin-bottom: 0;
    }
    .login-form {
      padding: 40px 24px 32px 24px;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .form-group:last-child {
      margin-bottom: 0;
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #388e3c;
      letter-spacing: 1px;
      font-size: 0.95em;
    }
    .input-wrapper {
      position: relative;
    }
    .input-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      color: #6a9c6a;
    }
    input {
      width: 100%;
      padding: 12px 12px 12px 40px;
      border: 1.5px solid #c8e6c9;
      border-radius: 10px;
      font-size: 1em;
      transition: all 0.2s ease;
      background: #f9fff9;
      outline: none;
      box-sizing: border-box;
    }
    input:focus {
      border-color: #43a047;
      box-shadow: 0 0 0 3px rgba(67, 233, 123, 0.15);
      background: #fff;
    }
    input::placeholder {
      color: #a5d6a7;
    }
    .login-btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(90deg, #43a047 60%, #66bb6a 100%);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 1.1em;
      font-weight: bold;
      letter-spacing: 2px;
      box-shadow: 0 2px 8px #a5d6a7;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-top: 8px;
    }
    .login-btn:hover, .login-btn:active {
      background: linear-gradient(90deg, #388e3c 60%, #43a047 100%);
      box-shadow: 0 4px 16px #a5d6a7;
      transform: translateY(-1px);
    }
    .login-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    .form-footer {
      text-align: center;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #e8f5e9;
    }
    .form-footer a {
      color: #43a047;
      text-decoration: none;
      font-size: 0.9em;
      transition: color 0.2s;
    }
    .form-footer a:hover {
      color: #388e3c;
    }
    /* 弹窗样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      backdrop-filter: blur(4px);
    }

    .modal {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      max-width: 90%;
      width: 400px;
      animation: modalSlideIn 0.3s ease-out;
      border: 1.5px solid #c8e6c9;
      overflow: hidden;
    }

    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .modal-header {
      background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
      padding: 20px 24px;
      text-align: center;
      position: relative;
    }

    .modal-title {
      color: #fff;
      font-size: 1.2em;
      font-weight: bold;
      margin: 0;
      letter-spacing: 1px;
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 20px;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: #fff;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transition: background 0.2s;
    }

    .modal-close:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    .modal-body {
      padding: 24px;
      text-align: center;
    }

    .modal-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
    }

    .modal-icon.success {
      background: #e8f5e9;
      color: #43a047;
    }

    .modal-icon.error {
      background: #ffebee;
      color: #f44336;
    }

    .modal-icon.info {
      background: #e3f2fd;
      color: #2196f3;
    }

    .modal-message {
      font-size: 1.1em;
      color: #333;
      margin-bottom: 24px;
      line-height: 1.5;
    }

    .modal-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
    }

    .modal-btn {
      padding: 10px 24px;
      border: none;
      border-radius: 8px;
      font-size: 1em;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
      min-width: 100px;
    }

    .modal-btn.primary {
      background: linear-gradient(90deg, #43a047 60%, #66bb6a 100%);
      color: #fff;
      box-shadow: 0 2px 8px #a5d6a7;
    }

    .modal-btn.primary:hover {
      background: linear-gradient(90deg, #388e3c 60%, #43a047 100%);
      box-shadow: 0 4px 16px #a5d6a7;
      transform: translateY(-1px);
    }

    .modal-btn.secondary {
      background: #f5f5f5;
      color: #666;
      border: 1px solid #ddd;
    }

    .modal-btn.secondary:hover {
      background: #e0e0e0;
      color: #333;
    }


    @media (max-width: 480px) {
      body { padding: 16px; }
      .login-container { border-radius: 16px; }
      .login-header { padding: 24px 20px 20px 20px; }
      .login-form { padding: 32px 20px 24px 20px; }
      .login-title { font-size: 1.3em; }
    }
  </style>
</head>
<body>
  <div class="login-container">
    <div class="login-header">
      <h1 class="login-title">绿纤协同平台</h1>
      <p class="login-subtitle">用户登录</p>
    </div>

    <div class="login-form">
      <form id="loginForm">
        <div class="form-group">
          <label for="username">用户名</label>
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
            <input
              type="text"
              id="username"
              name="username"
              placeholder="请输入用户名"
              required
              autocomplete="username"
            >
          </div>
        </div>

        <div class="form-group">
          <label for="password">密码</label>
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
            </svg>
            <input
              type="password"
              id="password"
              name="password"
              placeholder="请输入密码"
              required
              autocomplete="current-password"
            >
          </div>
        </div>

        <button type="submit" class="login-btn" id="loginBtn">
          登录
        </button>
      </form>


      <div class="form-footer">
        <a href="index.html">返回首页</a>
      </div>
    </div>

    <!-- 弹窗组件 -->
    <div id="modalOverlay" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h3 class="modal-title" id="modalTitle">提示</h3>
          <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
          <div class="modal-icon" id="modalIcon">
            <span id="modalIconText">ℹ️</span>
          </div>
          <div class="modal-message" id="modalMessage">消息内容</div>
          <div class="modal-actions" id="modalActions">
            <button class="modal-btn primary" id="modalPrimaryBtn" onclick="closeModal()">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 显示弹窗消息
    function showModal(title, message, type = 'info', options = {}) {
      const modalOverlay = document.getElementById('modalOverlay');
      const modalTitle = document.getElementById('modalTitle');
      const modalMessage = document.getElementById('modalMessage');
      const modalIcon = document.getElementById('modalIcon');
      const modalIconText = document.getElementById('modalIconText');
      const modalActions = document.getElementById('modalActions');

      // 设置标题和消息
      modalTitle.textContent = title;
      modalMessage.textContent = message;

      // 设置图标和样式
      modalIcon.className = `modal-icon ${type}`;

      // 根据类型设置图标
      const iconMap = {
        'success': '✅',
        'error': '❌',
        'info': 'ℹ️',
        'warning': '⚠️'
      };
      modalIconText.textContent = iconMap[type] || 'ℹ️';

      // 设置按钮
      if (options.primaryText) {
        const primaryBtn = document.getElementById('modalPrimaryBtn');
        primaryBtn.textContent = options.primaryText;
        primaryBtn.onclick = options.primaryAction || closeModal;
      }

      if (options.secondaryText) {
        // 如果已经有按钮，先清空
        modalActions.innerHTML = '';

        // 添加主按钮
        const primaryBtn = document.createElement('button');
        primaryBtn.className = 'modal-btn primary';
        primaryBtn.textContent = options.primaryText || '确定';
        primaryBtn.onclick = options.primaryAction || closeModal;
        modalActions.appendChild(primaryBtn);

        // 添加次要按钮
        const secondaryBtn = document.createElement('button');
        secondaryBtn.className = 'modal-btn secondary';
        secondaryBtn.textContent = options.secondaryText;
        secondaryBtn.onclick = options.secondaryAction || closeModal;
        modalActions.appendChild(secondaryBtn);
      }

      // 显示弹窗
      modalOverlay.style.display = 'flex';

      // 自动隐藏消息（可选）
      if (options.autoHide) {
        setTimeout(() => {
          closeModal();
        }, options.autoHideDelay || 3000);
      }
    }

    // 关闭弹窗
    function closeModal() {
      const modalOverlay = document.getElementById('modalOverlay');
      modalOverlay.style.display = 'none';
    }

    // 显示消息（兼容性函数）
    function showMessage(element, message) {
      // 这个函数现在用于弹窗显示，element参数被忽略
      const titleMap = {
        'success': '成功',
        'error': '错误',
        'info': '提示',
        'warning': '警告'
      };

      // 根据消息内容判断类型
      let type = 'info';
      if (message.includes('成功')) type = 'success';
      if (message.includes('错误') || message.includes('失败')) type = 'error';

      showModal(titleMap[type] || '提示', message, type);
    }

    document.getElementById('loginForm').addEventListener('submit', function(e) {
      e.preventDefault();

      const username = document.getElementById('username').value.trim();
      const password = document.getElementById('password').value.trim();
      const loginBtn = document.getElementById('loginBtn');

      // 验证输入
      if (!username || !password) {
        showModal('验证失败', '请填写完整的用户名和密码', 'error');
        return;
      }

      // 开始登录过程
      loginBtn.disabled = true;
      loginBtn.textContent = '登录中...';

      // 调用后端登录API
      callLoginAPI(username, password, loginBtn);
    });

    // 调用后端登录API
    async function callLoginAPI(username, password, loginBtn) {
      try {
        // 获取API基础地址（使用配置文件中的环境配置）
        const apiBaseUrl = window.APP_CONFIG ? window.APP_CONFIG.getApiBaseUrl() : '';
        const loginUrl = `${apiBaseUrl}/api/oauth/Login`;

        console.log('=== 登录API调试信息 ===');
        console.log('APP_CONFIG存在:', !!window.APP_CONFIG);
        console.log('当前环境:', window.APP_CONFIG ? window.APP_CONFIG.getEnvName() : '未加载');
        console.log('API基础地址:', apiBaseUrl);
        console.log('完整登录URL:', loginUrl);
        console.log('用户名:', username);
        console.log('原始密码长度:', password.length);
        console.log('MD5加密后密码:', md5(password));
        console.log('========================');

        // 使用表单数据格式，符合后端API要求
        // 注意：后端需要MD5加密后的密码
        const formData = new URLSearchParams();
        formData.append('account', username);
        formData.append('password', md5(password)); // 对密码进行MD5加密

        const response = await fetch(loginUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': 'application/json'
          },
          body: formData
        });

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const result = await response.json();
        console.log('登录API响应:', result);

        // 处理登录响应
        if (result.success || result.code === 200) {
          // 登录成功
          showModal('登录成功', '登录成功！正在跳转...', 'success', {
            autoHide: true,
            autoHideDelay: 1500
          });

          // 使用认证工具设置认证状态
          if (window.AUTH_UTILS && window.AUTH_UTILS.setAuthState) {
            window.AUTH_UTILS.setAuthState(result.data);
            console.log('✅ 认证状态已通过工具设置');
          } else {
            // 备用方案：直接设置
            if (result.data && result.data.token) {
              window.AUTH_TOKEN = result.data.token;
              localStorage.setItem('authToken', result.data.token);
              console.log('✅ Token已保存到全局变量:', window.AUTH_TOKEN);
            }
          }

          // 显示功能提示
          showModal('功能提示', '目前系统仅开通拓客功能，将自动跳转到拓客板块', 'info', {
            autoHide: true,
            autoHideDelay: 3000
          });

          // 延迟跳转到拓客页面
          setTimeout(() => {
            // 跳转到拓客页面
            window.location.href = 'expansion.html';
          }, 3000);
        } else {
          // 登录失败
          const errorMessage = result.message || result.msg || '登录失败，请重试';
          showModal('登录失败', errorMessage, 'error');
          loginBtn.disabled = false;
          loginBtn.textContent = '登录';
        }

      } catch (error) {
        console.error('登录API调用失败:', error);

        // 显示错误信息
        let errorMessage = '网络连接失败，请检查网络设置';
        if (error.message.includes('HTTP 401')) {
          errorMessage = '用户名或密码错误，请重试';
        } else if (error.message.includes('HTTP 500')) {
          errorMessage = '服务器内部错误，请联系管理员';
        } else if (error.message.includes('Failed to fetch')) {
          errorMessage = '无法连接到服务器，请检查API地址是否正确';
        }

        showModal('登录失败', errorMessage, 'error');
        loginBtn.disabled = false;
        loginBtn.textContent = '登录';
      }
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化弹窗事件
      const modalOverlay = document.getElementById('modalOverlay');
      modalOverlay.addEventListener('click', function(e) {
        if (e.target === modalOverlay) {
          closeModal();
        }
      });

      // ESC键关闭弹窗
      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
          closeModal();
        }
      });

      // 等待配置文件加载完成
      waitForConfigLoad();
    });

    // 等待配置文件加载完成
    function waitForConfigLoad() {
      console.log('🔍 检查配置文件状态...');
      console.log('window.APP_CONFIG:', window.APP_CONFIG);
      console.log('typeof window.APP_CONFIG:', typeof window.APP_CONFIG);

      if (window.APP_CONFIG) {
        console.log('✅ 配置文件已加载');
        console.log('当前环境变量:', window.APP_CONFIG.CURRENT_ENV);
        console.log('当前环境名称:', window.APP_CONFIG.getEnvName());
        console.log('当前API地址:', window.APP_CONFIG.getApiBaseUrl());

        console.log('✅ 环境配置完成');
        console.log('当前环境:', window.APP_CONFIG.getEnvName());
        console.log('API地址:', window.APP_CONFIG.getApiBaseUrl());
      } else {
        // 如果配置还没加载，等待一下再试
        console.log('⏳ 等待配置文件加载...');
        console.log('重试次数:', (window.retryCount || 0) + 1);
        window.retryCount = (window.retryCount || 0) + 1;

        if (window.retryCount > 50) { // 最多等待5秒
          console.error('❌ 配置文件加载超时！');
          showModal('配置错误', '配置文件加载失败，请刷新页面重试', 'error');
          return;
        }

        setTimeout(waitForConfigAndShowInfo, 100);
      }
    }


    // 回车键快速登录
    document.addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        document.getElementById('loginForm').dispatchEvent(new Event('submit'));
      }
    });
  </script>
</body>
</html>