<template>
  <svg viewBox="0 0 600 400" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto drop-shadow-2xl">
    <defs>
      <linearGradient id="dm-frame" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#1E1B4B" />
        <stop offset="100%" stop-color="#312E81" />
      </linearGradient>
      <linearGradient id="dm-bar" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#22C55E" />
        <stop offset="100%" stop-color="#4ADE80" />
      </linearGradient>
      <linearGradient id="dm-chart" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#4F46E5" />
        <stop offset="100%" stop-color="#818CF8" />
      </linearGradient>
      <clipPath id="dm-screen-clip">
        <rect x="60" y="20" width="480" height="290" rx="4" />
      </clipPath>
    </defs>

    <!-- Laptop lid -->
    <rect x="40" y="8" width="520" height="310" rx="16" fill="url(#dm-frame)" />
    <rect x="50" y="16" width="500" height="294" rx="8" fill="#0F0D2E" />

    <!-- Screen -->
    <rect x="60" y="20" width="480" height="286" rx="4" fill="#F8FAFC" />

    <!-- Camera -->
    <circle cx="300" cy="12" r="3" fill="#312E81" />

    <!-- Laptop base -->
    <path d="M20 318 L580 318 L600 345 Q600 360 585 360 L15 360 Q0 360 0 345 Z" fill="url(#dm-frame)" />
    <rect x="250" y="323" width="100" height="6" rx="3" fill="#312E81" />
    <ellipse cx="300" cy="368" rx="80" ry="6" fill="#1E1B4B" opacity="0.2" />

    <!-- Screen content -->
    <g clip-path="url(#dm-screen-clip)">
      <!-- Sidebar -->
      <rect x="60" y="20" width="110" height="290" fill="white" />
      <line x1="170" y1="20" x2="170" y2="310" stroke="#E2E8F0" stroke-width="1" />

      <!-- Logo in sidebar -->
      <circle cx="95" cy="48" r="14" fill="#4F46E5" />
      <text x="95" y="53" text-anchor="middle" font-size="12" font-weight="bold" fill="white">灵</text>
      <text x="120" y="48" font-size="8" font-weight="bold" fill="#1E1B4B">灵犀学</text>
      <text x="120" y="58" font-size="6" fill="#64748B">管理控制台</text>

      <!-- Sidebar menu items -->
      <rect x="68" y="80" width="94" height="24" rx="6" fill="#EEF2FF" />
      <rect x="76" y="87" width="8" height="8" rx="2" fill="#4F46E5" />
      <text x="90" y="95" font-size="8" fill="#4F46E5" font-weight="600">数据看板</text>

      <rect x="76" y="117" width="8" height="8" rx="2" fill="#CBD5E1" />
      <text x="90" y="125" font-size="8" fill="#64748B">任务管理</text>

      <rect x="76" y="142" width="8" height="8" rx="2" fill="#CBD5E1" />
      <text x="90" y="150" font-size="8" fill="#64748B">资源中心</text>

      <rect x="76" y="167" width="8" height="8" rx="2" fill="#CBD5E1" />
      <text x="90" y="175" font-size="8" fill="#64748B">智能处理</text>

      <rect x="76" y="192" width="8" height="8" rx="2" fill="#CBD5E1" />
      <text x="90" y="200" font-size="8" fill="#64748B">数据分析</text>

      <rect x="76" y="217" width="8" height="8" rx="2" fill="#CBD5E1" />
      <text x="90" y="225" font-size="8" fill="#64748B">团队管理</text>

      <!-- Main content area -->
      <!-- Header -->
      <text x="186" y="44" font-size="12" font-weight="bold" fill="#1E1B4B">运营数据总览</text>
      <rect x="460" y="30" width="68" height="22" rx="6" fill="#4F46E5" />
      <text x="494" y="45" text-anchor="middle" font-size="8" font-weight="600" fill="white">导出报告</text>

      <!-- Stats row -->
      <rect x="182" y="58" width="84" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
      <text x="194" y="76" font-size="7" fill="#64748B">处理总量</text>
      <text x="194" y="96" font-size="16" font-weight="bold" fill="#1E1B4B">5,847</text>
      <text x="250" y="96" font-size="7" fill="#22C55E" font-weight="600">↑12%</text>

      <rect x="274" y="58" width="84" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
      <text x="286" y="76" font-size="7" fill="#64748B">准确率</text>
      <text x="286" y="96" font-size="16" font-weight="bold" fill="#22C55E">96.8%</text>

      <rect x="366" y="58" width="84" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
      <text x="378" y="76" font-size="7" fill="#64748B">节省时间</text>
      <text x="378" y="96" font-size="16" font-weight="bold" fill="#4F46E5">482h</text>

      <rect x="458" y="58" width="72" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
      <text x="468" y="76" font-size="7" fill="#64748B">响应时间</text>
      <text x="468" y="96" font-size="16" font-weight="bold" fill="#F59E0B">2.1s</text>

      <!-- Chart area -->
      <rect x="182" y="120" width="190" height="130" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
      <text x="196" y="140" font-size="8" font-weight="bold" fill="#1E1B4B">本周处理趋势</text>

      <!-- Bar chart -->
      <rect x="200" y="210" width="20" height="28" rx="3" fill="url(#dm-chart)" opacity="0.6" />
      <rect x="226" y="195" width="20" height="43" rx="3" fill="url(#dm-chart)" opacity="0.7" />
      <rect x="252" y="180" width="20" height="58" rx="3" fill="url(#dm-chart)" opacity="0.8" />
      <rect x="278" y="170" width="20" height="68" rx="3" fill="url(#dm-chart)" opacity="0.9" />
      <rect x="304" y="160" width="20" height="78" rx="3" fill="url(#dm-chart)" />
      <rect x="330" y="175" width="20" height="63" rx="3" fill="url(#dm-chart)" opacity="0.85" />
      <text x="210" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周一</text>
      <text x="236" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周二</text>
      <text x="262" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周三</text>
      <text x="288" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周四</text>
      <text x="314" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周五</text>
      <text x="340" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周六</text>

      <!-- Donut chart area -->
      <rect x="380" y="120" width="148" height="130" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
      <text x="394" y="140" font-size="8" font-weight="bold" fill="#1E1B4B">分类分布</text>

      <!-- Donut chart -->
      <circle cx="430" cy="195" r="32" fill="none" stroke="#EEF2FF" stroke-width="10" />
      <circle cx="430" cy="195" r="32" fill="none" stroke="#4F46E5" stroke-width="10" stroke-dasharray="80 120" stroke-dashoffset="0" stroke-linecap="round" />
      <circle cx="430" cy="195" r="32" fill="none" stroke="#22C55E" stroke-width="10" stroke-dasharray="50 150" stroke-dashoffset="-80" stroke-linecap="round" />
      <circle cx="430" cy="195" r="32" fill="none" stroke="#F59E0B" stroke-width="10" stroke-dasharray="35 165" stroke-dashoffset="-130" stroke-linecap="round" />
      <text x="430" y="193" text-anchor="middle" font-size="10" font-weight="bold" fill="#1E1B4B">5,847</text>
      <text x="430" y="203" text-anchor="middle" font-size="6" fill="#64748B">总处理</text>

      <!-- Legend -->
      <circle cx="483" cy="170" r="3" fill="#4F46E5" />
      <text x="490" y="173" font-size="6" fill="#64748B">类型 A 40%</text>
      <circle cx="483" cy="186" r="3" fill="#22C55E" />
      <text x="490" y="189" font-size="6" fill="#64748B">类型 B 25%</text>
      <circle cx="483" cy="202" r="3" fill="#F59E0B" />
      <text x="490" y="205" font-size="6" fill="#64748B">类型 C 18%</text>
      <circle cx="483" cy="218" r="3" fill="#E2E8F0" />
      <text x="490" y="221" font-size="6" fill="#64748B">其他 17%</text>

      <!-- Recent tasks -->
      <rect x="182" y="260" width="346" height="44" rx="8" fill="white" stroke="#E2E8F0" stroke-width="1" />
      <circle cx="202" cy="282" r="10" fill="#DCFCE7" />
      <text x="202" y="286" text-anchor="middle" font-size="10" fill="#22C55E">✓</text>
      <text x="220" y="278" font-size="8" font-weight="600" fill="#1E1B4B">A 组 · 内容处理批次</text>
      <text x="220" y="292" font-size="6" fill="#64748B">42/42 已完成 · 准确率 97.2%</text>
      <rect x="440" y="273" width="52" height="18" rx="9" fill="#DCFCE7" />
      <text x="466" y="286" text-anchor="middle" font-size="7" font-weight="600" fill="#22C55E">已完成</text>
    </g>
  </svg>
</template>
