千问网页版 - 前端组件生成与CSS样式调优 · 极速实现UI还原 - 千问官网

编写一个现代化的统计指标看板卡片 (Stat Card)

包含：指标名称、大号数据、与上周环比增长绿色百分比胶囊徽章，右侧带极简 SVG 趋势折线图，支持自适应暗黑模式与悬浮轻微阴影扩展。

export const MetricCard = ({ title, value, change }: Props) => (
  <div className="p-5 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg shadow-sm hover:shadow-md transition-shadow">
    <div className="flex justify-between items-start">
      <div>
        <p className="text-xs font-medium text-neutral-500 uppercase tracking-wider">{title}</p>
        <h4 className="text-2xl font-bold mt-1 text-neutral-900 dark:text-white">{value}</h4>
      </div>
      <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-emerald-100 text-emerald-800">
        +{change}%
      </span>
    </div>
  </div>
);