From 72d452f75e24d377fe600a4ce85839db0332a9db Mon Sep 17 00:00:00 2001
From: Misaka_Company <pengqiangqiang0@gmail.com>
Date: Thu, 26 Mar 2026 09:08:55 +0800
Subject: [PATCH] ui: use chip controls instead of checkbox in
 ReportAnalysisDialog

- Replace Headless UI Checkbox with button elements
- Implement modern chip/tag style with rounded-full design
- Selected state: colored background with white text
- Unselected state: white background with gray border
- Add hover effects and smooth transitions
- Maintain existing toggle functionality
---
 .../src/components/ReportAnalysisDialog.tsx   | 50 +++++--------------
 1 file changed, 13 insertions(+), 37 deletions(-)

diff --git a/src/renderer/src/components/ReportAnalysisDialog.tsx b/src/renderer/src/components/ReportAnalysisDialog.tsx
index 28593bf..b4f5ae9 100644
--- a/src/renderer/src/components/ReportAnalysisDialog.tsx
+++ b/src/renderer/src/components/ReportAnalysisDialog.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import { X, FileText, Loader2, AlertCircle, RefreshCw } from 'lucide-react'
-import { Checkbox } from '@headlessui/react'
 import {
   LineChart,
   Line,
@@ -120,45 +119,22 @@ export const ReportAnalysisDialog: React.FC<ReportAnalysisDialogProps> = ({
         <div className="px-6 py-4 border-b border-slate-200 bg-white flex-shrink-0">
           <div className="flex items-center gap-4">
             <label className="text-sm font-medium text-slate-700 flex-shrink-0">选择指标:</label>
-            <div className="grid grid-cols-2 gap-3 flex-1">
+            <div className="flex flex-wrap gap-2 flex-1">
               {numericMetrics.map((metric) => (
-                <Checkbox
+                <button
                   key={metric.key}
-                  checked={selectedMetrics.includes(metric.key)}
-                  onChange={() => toggleMetric(metric.key)}
-                  className="group flex items-center gap-2 p-2 rounded-lg border border-slate-200 hover:border-blue-300 hover:bg-blue-50/50 transition-all cursor-pointer"
+                  onClick={() => toggleMetric(metric.key)}
+                  className={`px-3 py-1.5 rounded-full text-sm font-medium transition-all ${
+                    selectedMetrics.includes(metric.key)
+                      ? 'text-white border-transparent hover:bg-opacity-80'
+                      : 'bg-white text-slate-600 border border-slate-300 hover:bg-slate-50'
+                  }`}
+                  style={{
+                    backgroundColor: selectedMetrics.includes(metric.key) ? metric.color : undefined
+                  }}
                 >
-                  <div
-                    className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all ${
-                      selectedMetrics.includes(metric.key)
-                        ? 'bg-blue-600 border-blue-600'
-                        : 'bg-white border-slate-300 group-hover:border-blue-400'
-                    }`}
-                  >
-                    {selectedMetrics.includes(metric.key) && (
-                      <svg
-                        className="w-3.5 h-3.5 text-white"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={3}
-                          d="M5 13l4 4L19 7"
-                        />
-                      </svg>
-                    )}
-                  </div>
-                  <span
-                    className={`text-sm font-medium transition-colors ${
-                      selectedMetrics.includes(metric.key) ? 'text-slate-900' : 'text-slate-500'
-                    }`}
-                  >
-                    {metric.label}
-                  </span>
-                </Checkbox>
+                  {metric.label}
+                </button>
               ))}
             </div>
           </div>