Industrial Progress Indicators 组件

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 font-sans text-gray-800 dark:text-gray-200 min-h-screen">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-2 tracking-tight">Project Status Overview</h2>
      <p class="text-gray-600 dark:text-gray-400 text-lg">Comprehensive progress tracking for 'Aurora Borealis' initiative.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 sm:gap-4 p-4 sm:p-6 md:p-8">
      <!-- Left Column: Primary Progress Indicators -->
      <div class="lg:col-span-2 space-y-6 sm:space-y-8">
        <!-- Overall Project Progress -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
            Overall Project Progress
          </h3>
          <div class="mb-2 flex justify-between items-center">
            <span class="text-lg font-medium text-blue-700 dark:text-blue-300">75% Complete</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">Target: 90% by EOM</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden border border-gray-300 dark:border-gray-600">
            <div class="bg-blue-600 dark:bg-blue-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Last Updated: 2 min ago</p>
        </section>

        <!-- Key Milestones Progress -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Key Milestones
          </h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 1: Design & Planning</span>
                <span class="text-md font-medium text-emerald-600 dark:text-emerald-400">100%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-emerald-600 dark:bg-emerald-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 2: Development & Integration</span>
                <span class="text-md font-medium text-yellow-600 dark:text-yellow-400">60%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-yellow-600 dark:bg-yellow-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 60%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 3: Testing & Deployment</span>
                <span class="text-md font-medium text-red-600 dark:text-red-400">20%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-red-600 dark:bg-red-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 20%;"></div>
              </div>
            </div>
          </div>
        </section>

        <!-- Resource Utilization -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            Resource Utilization
          </h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Budget Allocation</span>
                <span class="text-md font-medium text-orange-600 dark:text-orange-400">85% Used</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-orange-600 dark:bg-orange-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 85%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Team Workload</span>
                <span class="text-md font-medium text-green-600 dark:text-green-400">70% Capacity</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-green-600 dark:bg-green-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 70%;"></div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <!-- Right Column: Status & Updates -->
      <div class="lg:col-span-1 space-y-6 sm:space-y-8">
        <!-- Project Status Board -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L12 20L15 17M9 7L12 4L15 7M21 12H3"></path></svg>
            Current Status
          </h3>
          <dl class="divide-y divide-gray-200 dark:divide-gray-700">
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Overall Health:</dt>
              <dd class="font-semibold text-lg text-emerald-600 dark:text-emerald-400">Stable</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Next Deadline:</dt>
              <dd class="font-semibold text-lg text-blue-600 dark:text-blue-400">Feb 28, 2024</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Critical Issues:</dt>
              <dd class="font-semibold text-lg text-red-600 dark:text-red-400">2 Open</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Team Capacity:</dt>
              <dd class="font-semibold text-lg text-orange-600 dark:text-orange-400">Stretched</dd>
            </div>
          </dl>
        </section>

        <!-- Recent Activity -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Recent Activity
          </h3>
          <ul class="space-y-4">
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-purple-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Dev Team</span> updated 'Auth Module' to 90%.</p>
                <time datetime="2024-02-20" class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</time>
              </div>
            </li>
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-orange-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">QA Team</span> reported 2 critical bugs in 'Payment Gateway'.</p>
                <time datetime="2024-02-19" class="text-sm text-gray-500 dark:text-gray-400">Yesterday</time>
              </div>
            </li>
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-emerald-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Project Manager</span> approved 'Phase 1' completion.</p>
                <time datetime="2024-02-18" class="text-sm text-gray-500 dark:text-gray-400">2 days ago</time>
              </div>
            </li>
          </ul>
        </section>

        <!-- Team Members -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-sky-600 dark:text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 1.857A2.75 2.75 0 1011 4.252A2.75 2.75 0 0017 17.009zM2 13V7a3 3 0 015.356-1.857M2 13v6a3 3 0 005.356 1.857"></path></svg>
            Core Team
          </h3>
          <div class="flex flex-wrap gap-3">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah Johnson">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-400" src="https://randomuser.me/api/portraits/men/83.jpg" alt="Avatar of David Lee">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-purple-500 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Emily White">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-orange-500 dark:border-orange-400" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar of Michael Brown">
            <a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 font-semibold text-lg border-2 border-gray-400 dark:border-gray-500 transition-colors hover:bg-gray-300 dark:hover:bg-gray-600" aria-label="View all team members">+5</a>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>