nkkj
/
yss-project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
							<!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="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/lucide@latest"></script>
  <style>
    body { background-color: #f3f4f6; padding: 20px; font-family: system-ui, -apple-system, sans-serif; color: #1f2937; }
    
    /* 方案切换器 */
    .variant-switcher {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 24px;
    }
    .variant-btn {
      padding: 8px 20px;
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #4b5563;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .variant-btn:hover { background: #f9fafb; }
    .variant-btn.active { background: #3b82f6; color: white; border-color: #3b82f6; box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3); }

    /* 布局容器 */
    .main-grid {
      display: grid;
      grid-template-columns: 320px 1fr; /* 左侧缩小，右侧空间更大 */
      gap: 24px;
      max-width: 1400px;
      margin: 0 auto;
      align-items: start;
      height: 85vh;
    }

    /* 面板通用样式 */
    .panel {
      background: white;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      overflow: hidden;
      border: 1px solid #e5e7eb;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .panel-header { padding: 12px 16px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; border-bottom: 1px solid #f3f4f6; }
    .header-title { font-weight: 600; font-size: 15px; }
    .panel-body { padding: 12px; background: #f9fafb; overflow-y: auto; flex: 1; }

    /* 左栏：待办问题 */
    .issue-card {
      background: white; padding: 12px; border-radius: 8px; margin-bottom: 10px;
      border-left: 3px solid #a78bfa; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .issue-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
    .issue-sub { font-size: 11px; color: #6b7280; }

    /* 右栏变体容器 */
    .variant-container { height: 100%; display: none; flex-direction: column; }
    .variant-container.active { display: flex; }

    /* ================= 方案 A: 经典 Tab 增强版 ================= */
    .tab-header { display: flex; gap: 8px; padding: 10px 16px; background: white; border-bottom: 1px solid #f3f4f6; overflow-x: auto; }
    .tab-pill { 
      padding: 4px 12px; border-radius: 16px; font-size: 12px; cursor: pointer; background: #f3f4f6; color: #64748b; transition: all 0.2s; display: flex; align-items: center; gap: 6px;
    }
    .tab-pill.active { background: #fff7ed; color: #ea580c; font-weight: 600; ring: 1px solid #fdba74; }
    
    .card-a {
      background: white; padding: 14px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #e5e7eb;
      display: flex; justify-content: space-between; align-items: center;
    }
    .tag-phase { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #f1f5f9; color: #475569; margin-left: 6px; }
    .tag-phase.mod { background: #eff6ff; color: #2563eb; } /* 建模 */
    .tag-phase.render { background: #fefce8; color: #ca8a04; } /* 渲染 */

    /* ================= 方案 B: 垂直平铺流 (无Tab) ================= */
    .section-title { 
      font-size: 12px; font-weight: 700; color: #9ca3af; margin: 16px 0 8px 4px; 
      text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px;
    }
    .section-title:first-child { margin-top: 4px; }
    
    .card-b {
      background: white; padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; 
      border-left: 4px solid transparent; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .card-b.urgent { border-left-color: #ef4444; }
    .card-b.warning { border-left-color: #f59e0b; }
    .card-b.normal { border-left-color: #3b82f6; }

    /* ================= 方案 C: 紧凑矩阵 (适合多条目) ================= */
    .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 12px; }
    .card-c {
      background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb;
      display: flex; flex-direction: column; gap: 8px;
    }
    .card-c-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #6b7280; }
    .card-c-title { font-weight: 600; font-size: 13px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .progress-mini { height: 4px; background: #f3f4f6; border-radius: 2px; overflow: hidden; margin-top: 4px; }
    .progress-bar { height: 100%; background: #3b82f6; width: 70%; }

  </style>
</head>
<body>

<div class="variant-switcher">
  <button class="variant-btn active" onclick="showVariant('A')">方案 A: 经典Tab增强 (清晰分类)</button>
  <button class="variant-btn" onclick="showVariant('B')">方案 B: 垂直平铺流 (全局概览)</button>
  <button class="variant-btn" onclick="showVariant('C')">方案 C: 紧凑矩阵版 (高密度)</button>
</div>

<div class="main-grid">

  <!-- 左栏：待办问题 (固定不变) -->
  <div class="panel" style="border-top: 4px solid #8b5cf6;">
    <div class="panel-header bg-purple-50">
      <span class="header-title text-purple-900"><i data-lucide="list-todo" width="16"></i> 待办问题 (3)</span>
    </div>
    <div class="panel-body">
      <div class="issue-card">
        <div class="issue-title">需求变更确认</div>
        <div class="issue-sub">项目: 龙湖天街-A座 · 昨天</div>
      </div>
      <div class="issue-card" style="border-left-color: #ef4444;">
        <div class="issue-title text-red-600">施工图尺寸异常</div>
        <div class="issue-sub">项目: 万科城市 · 2小时前</div>
      </div>
    </div>
  </div>

  <!-- 右栏：紧急事件 (变体区域) -->
  <div class="panel" style="border-top: 4px solid #f97316;">
    
    <!-- 方案 A: 经典 Tab 增强 -->
    <div id="variant-A" class="variant-container active">
      <div class="panel-header bg-orange-50 justify-between">
        <span class="header-title text-orange-900"><i data-lucide="alert-triangle" width="16"></i> 紧急事件监控</span>
        <span class="text-xs text-orange-700 bg-orange-100 px-2 py-1 rounded">12 项异常</span>
      </div>
      
      <!-- 一级 Tab -->
      <div class="tab-header">
        <div class="tab-pill">全部 (12)</div>
        <div class="tab-pill">🔥 客户 (1)</div>
        <div class="tab-pill active">📑 阶段逾期 (5)</div>
        <div class="tab-pill">🕒 交付/小图 (6)</div>
      </div>
      
      <!-- 二级筛选 (仅在阶段逾期显示) -->
      <div class="flex gap-2 px-4 py-2 bg-orange-50/50 border-b border-orange-100 text-xs overflow-x-auto">
        <span class="font-bold text-orange-800 flex-shrink-0 self-center mr-1">筛选:</span>
        <span class="px-2 py-1 rounded bg-white border border-orange-200 text-orange-600 cursor-pointer">全部</span>
        <span class="px-2 py-1 rounded bg-blue-50 text-blue-600 cursor-pointer">建模 (2)</span>
        <span class="px-2 py-1 rounded bg-yellow-50 text-yellow-600 cursor-pointer">渲染 (1)</span>
      </div>

      <div class="panel-body">
        <!-- 卡片 A1 -->
        <div class="card-a">
          <div>
            <div class="flex items-center gap-2 mb-1">
              <span class="font-bold text-sm">万科城市花园</span>
              <span class="tag-phase mod">建模</span>
            </div>
            <div class="text-xs text-slate-500">负责人: 李婷 · 逾期 2 天</div>
          </div>
          <button class="text-xs bg-white border border-slate-200 px-3 py-1 rounded hover:bg-slate-50">催办</button>
        </div>
        
        <!-- 卡片 A2 -->
        <div class="card-a">
          <div>
            <div class="flex items-center gap-2 mb-1">
              <span class="font-bold text-sm">天鹅湖花园</span>
              <span class="tag-phase render">渲染</span>
            </div>
            <div class="text-xs text-slate-500">负责人: 张伟 · <span class="text-orange-500 font-medium">今天截止</span></div>
          </div>
          <button class="text-xs bg-green-50 text-green-600 border border-green-100 px-3 py-1 rounded">标记完成</button>
        </div>
      </div>
    </div>

    <!-- 方案 B: 垂直平铺流 -->
    <div id="variant-B" class="variant-container">
      <div class="panel-header bg-white border-b justify-between sticky top-0 z-10">
        <span class="header-title text-slate-800">全局概览</span>
        <div class="flex gap-2">
          <span class="text-xs px-2 py-1 bg-red-100 text-red-600 rounded">1 急</span>
          <span class="text-xs px-2 py-1 bg-orange-100 text-orange-600 rounded">5 警</span>
        </div>
      </div>
      
      <div class="panel-body">
        <!-- 区块 1: 客户/决策 (置顶) -->
        <div class="section-title text-red-500"><i data-lucide="siren" width="14"></i> 立即处理</div>
        
        <div class="card-b urgent flex justify-between items-center">
          <div>
            <div class="font-bold text-sm text-slate-800">锦江上院-13号 <span class="text-xs font-normal text-red-500 ml-1">投诉</span></div>
            <div class="text-xs text-slate-500 mt-1">客户反馈进度慢，已 2 小时</div>
          </div>
          <button class="p-2 bg-red-50 rounded-full text-red-600 hover:bg-red-100"><i data-lucide="message-circle" width="16"></i></button>
        </div>

        <!-- 区块 2: 阶段逾期 -->
        <div class="section-title text-orange-500 mt-4"><i data-lucide="layers" width="14"></i> 阶段进度滞后</div>
        
        <div class="card-b warning">
          <div class="flex justify-between">
            <span class="font-bold text-sm">万科城市花园</span>
            <span class="text-xs bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded">建模</span>
          </div>
          <div class="text-xs text-slate-500 mt-1 flex justify-between items-center">
            <span>李婷 · 逾期2天</span>
            <span class="text-orange-500 cursor-pointer">催办 ></span>
          </div>
        </div>
        
        <div class="card-b warning">
          <div class="flex justify-between">
            <span class="font-bold text-sm">麓湖生态城</span>
            <span class="text-xs bg-purple-50 text-purple-600 px-1.5 py-0.5 rounded">后期</span>
          </div>
          <div class="text-xs text-slate-500 mt-1">王刚 · 逾期1天</div>
        </div>

        <!-- 区块 3: 交付截止 -->
        <div class="section-title text-slate-500 mt-4"><i data-lucide="clock" width="14"></i> 交付/小图</div>
        <div class="card-b normal">
          <div class="font-bold text-sm">保利中心 <span class="text-xs font-normal text-slate-400 ml-2">小图截止</span></div>
          <div class="text-xs text-slate-500 mt-1">今天 18:00</div>
        </div>
      </div>
    </div>

    <!-- 方案 C: 紧凑矩阵版 -->
    <div id="variant-C" class="variant-container">
      <div class="panel-header bg-white border-b">
        <div class="flex items-center gap-4 text-sm w-full">
          <span class="font-bold text-slate-800 border-b-2 border-slate-800 pb-3 -mb-3.5">所有 (12)</span>
          <span class="text-slate-500 cursor-pointer pb-3 -mb-3">建模 (2)</span>
          <span class="text-slate-500 cursor-pointer pb-3 -mb-3">渲染 (1)</span>
          <span class="text-slate-500 cursor-pointer pb-3 -mb-3">软装 (1)</span>
        </div>
      </div>
      
      <div class="panel-body" style="padding: 0;">
        <div class="grid-container">
          
          <!-- 矩阵卡片 -->
          <div class="card-c border-l-4 border-l-red-500">
            <div class="card-c-header">
              <span class="text-red-500 font-bold text-xs">客户投诉</span>
              <span>2h前</span>
            </div>
            <div class="card-c-title">锦江上院-13号</div>
            <div class="text-xs text-slate-500">需立即安抚跟进</div>
            <button class="w-full mt-1 bg-red-50 text-red-600 text-xs py-1 rounded">处理</button>
          </div>

          <div class="card-c border-l-4 border-l-orange-500">
            <div class="card-c-header">
              <span class="text-orange-500 font-bold text-xs">决策</span>
              <span>已出图3天</span>
            </div>
            <div class="card-c-title">龙湖天街-B座</div>
            <div class="flex gap-1 mt-1">
              <button class="flex-1 bg-green-50 text-green-600 text-[10px] py-1 rounded">已反馈</button>
              <button class="flex-1 bg-slate-50 text-slate-500 text-[10px] py-1 rounded">未回复</button>
            </div>
          </div>

          <div class="card-c">
            <div class="card-c-header">
              <span class="text-blue-600 bg-blue-50 px-1.5 rounded text-[10px]">建模逾期</span>
              <span class="text-red-500">-2天</span>
            </div>
            <div class="card-c-title">万科城市花园</div>
            <div class="text-xs text-slate-500">李婷</div>
            <div class="progress-mini"><div class="progress-bar bg-blue-500" style="width: 30%"></div></div>
          </div>

          <div class="card-c">
            <div class="card-c-header">
              <span class="text-purple-600 bg-purple-50 px-1.5 rounded text-[10px]">后期逾期</span>
              <span class="text-red-500">-1天</span>
            </div>
            <div class="card-c-title">麓湖生态城</div>
            <div class="text-xs text-slate-500">王刚</div>
            <div class="progress-mini"><div class="progress-bar bg-purple-500" style="width: 80%"></div></div>
          </div>
          
          <div class="card-c">
            <div class="card-c-header">
              <span class="text-yellow-600 bg-yellow-50 px-1.5 rounded text-[10px]">渲染截止</span>
              <span class="text-orange-500">今天</span>
            </div>
            <div class="card-c-title">天鹅湖花园</div>
            <div class="text-xs text-slate-500">张伟</div>
            <div class="progress-mini"><div class="progress-bar bg-yellow-500" style="width: 60%"></div></div>
          </div>

        </div>
      </div>
    </div>

  </div>

</div>

<script>
  lucide.createIcons();

  function showVariant(id) {
    // 隐藏所有变体
    document.querySelectorAll('.variant-container').forEach(el => el.classList.remove('active'));
    // 显示选中的变体
    document.getElementById('variant-' + id).classList.add('active');
    
    // 更新按钮状态
    document.querySelectorAll('.variant-btn').forEach(el => el.classList.remove('active'));
    event.currentTarget.classList.add('active');
  }
</script>

</body>
</html>