From 730186948365e2eb443adfecd6e270ee80bc7bd9 Mon Sep 17 00:00:00 2001
From: Misaka_Company <pengqiangqiang0@gmail.com>
Date: Wed, 1 Apr 2026 11:08:45 +0800
Subject: [PATCH] feat(ui): migrate LogPanel and SegmentedProgressBar to shadcn
 theming

- LogPanel: Use shadcn Button, ScrollArea, and semantic color tokens
- SegmentedProgressBar: Use shadcn semantic color tokens for dark mode support
- Both components now properly support light/dark themes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/renderer/src/components/ui/LogPanel.tsx   | 55 +++++++++++--------
 .../components/ui/SegmentedProgressBar.tsx    | 41 +++++++-------
 2 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/src/renderer/src/components/ui/LogPanel.tsx b/src/renderer/src/components/ui/LogPanel.tsx
index e174ca5..7e05646 100644
--- a/src/renderer/src/components/ui/LogPanel.tsx
+++ b/src/renderer/src/components/ui/LogPanel.tsx
@@ -1,5 +1,8 @@
 import React, { useEffect, useRef } from 'react'
 import { Terminal } from 'lucide-react'
+import { Button } from './Button'
+import { ScrollArea } from './shadcn/scroll-area'
+import { cn } from '@renderer/lib/utils'
 import type { LogEntry, LogLevel } from '../../stores/extractorStore'
 
 interface LogPanelProps {
@@ -10,15 +13,15 @@ interface LogPanelProps {
 const getLogColor = (level: LogLevel): string => {
   switch (level) {
     case 'error':
-      return 'text-red-400'
+      return 'text-destructive'
     case 'warning':
-      return 'text-amber-400'
+      return 'text-amber-500 dark:text-amber-400'
     case 'success':
-      return 'text-emerald-400'
+      return 'text-emerald-500 dark:text-emerald-400'
     case 'system':
-      return 'text-blue-400'
+      return 'text-blue-500 dark:text-blue-400'
     default:
-      return 'text-slate-400'
+      return 'text-muted-foreground'
   }
 }
 
@@ -30,32 +33,36 @@ const LogPanel: React.FC<LogPanelProps> = ({ logs, onClear }) => {
   }, [logs])
 
   return (
-    <div className="bg-slate-900 rounded-xl shadow-lg border border-slate-700 overflow-hidden flex flex-col min-h-[300px] flex-1">
-      <div className="bg-slate-800 px-4 py-2 flex items-center justify-between border-b border-slate-700 flex-shrink-0">
-        <div className="flex items-center gap-2 text-slate-400 text-sm">
+    <div className="bg-card rounded-xl shadow-lg border border-border overflow-hidden flex flex-col min-h-[300px] flex-1">
+      <div className="bg-muted/50 px-4 py-2 flex items-center justify-between border-b border-border flex-shrink-0">
+        <div className="flex items-center gap-2 text-muted-foreground text-sm">
           <Terminal size={16} />
           <span>执行日志</span>
         </div>
-        <button
-          className="text-xs text-slate-400 hover:text-white transition-colors"
+        <Button
+          size="sm"
+          variant="ghost"
           onClick={onClear}
+          className="h-7 px-2"
         >
           清空
-        </button>
-      </div>
-      <div className="flex-1 p-4 font-mono text-sm overflow-y-auto leading-relaxed">
-        {logs.length === 0 ? (
-          <div className="text-slate-500 text-center py-8">等待执行...</div>
-        ) : (
-          logs.map((log, index) => (
-            <div key={index} className={getLogColor(log.level)}>
-              <span className="text-slate-600">[{log.timestamp}]</span>{' '}
-              <span className="text-slate-500">[{log.level.toUpperCase()}]</span> {log.message}
-            </div>
-          ))
-        )}
-        <div ref={logsEndRef} />
+        </Button>
       </div>
+      <ScrollArea className="flex-1">
+        <div className="p-4 font-mono text-sm leading-relaxed">
+          {logs.length === 0 ? (
+            <div className="text-muted-foreground text-center py-8">等待执行...</div>
+          ) : (
+            logs.map((log, index) => (
+              <div key={index} className={cn(getLogColor(log.level))}>
+                <span className="text-muted-foreground/60">[{log.timestamp}]</span>{' '}
+                <span className="text-muted-foreground/40">[{log.level.toUpperCase()}]</span> {log.message}
+              </div>
+            ))
+          )}
+          <div ref={logsEndRef} />
+        </div>
+      </ScrollArea>
     </div>
   )
 }
diff --git a/src/renderer/src/components/ui/SegmentedProgressBar.tsx b/src/renderer/src/components/ui/SegmentedProgressBar.tsx
index 741da37..61f6309 100644
--- a/src/renderer/src/components/ui/SegmentedProgressBar.tsx
+++ b/src/renderer/src/components/ui/SegmentedProgressBar.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { cn } from '@renderer/lib/utils'
 import type { ExtractionPhase } from '../../stores/extractorStore'
 
 interface SegmentedProgressBarProps {
@@ -13,11 +14,11 @@ interface SegmentedProgressBarProps {
   }
 }
 
-const PHASES: { key: ExtractionPhase; label: string; color: string }[] = [
-  { key: 'login', label: '登录', color: 'bg-purple-500' },
-  { key: 'downloading', label: '下载', color: 'bg-blue-500' },
-  { key: 'merging', label: '合并', color: 'bg-amber-500' },
-  { key: 'importing', label: '入库', color: 'bg-emerald-500' }
+const PHASES: { key: ExtractionPhase; label: string; color: string; dotColor: string }[] = [
+  { key: 'login', label: '登录', color: 'bg-purple-500 dark:bg-purple-600', dotColor: 'bg-purple-600 dark:bg-purple-500' },
+  { key: 'downloading', label: '下载', color: 'bg-blue-500 dark:bg-blue-600', dotColor: 'bg-blue-600 dark:bg-blue-500' },
+  { key: 'merging', label: '合并', color: 'bg-amber-500 dark:bg-amber-600', dotColor: 'bg-amber-600 dark:bg-amber-500' },
+  { key: 'importing', label: '入库', color: 'bg-emerald-500 dark:bg-emerald-600', dotColor: 'bg-emerald-600 dark:bg-emerald-500' }
 ]
 
 export const SegmentedProgressBar: React.FC<SegmentedProgressBarProps> = ({
@@ -58,15 +59,15 @@ export const SegmentedProgressBar: React.FC<SegmentedProgressBarProps> = ({
   }
 
   const getStatusDot = (status: string) => {
-    if (status === 'completed') return 'bg-emerald-600'
-    if (status === 'active') return 'bg-blue-600 animate-pulse'
-    return 'bg-slate-300'
+    if (status === 'completed') return 'bg-emerald-600 dark:bg-emerald-500'
+    if (status === 'active') return 'bg-blue-600 dark:bg-blue-500 animate-pulse'
+    return 'bg-muted-foreground/30'
   }
 
   const getStatusText = (status: string) => {
-    if (status === 'completed') return 'text-emerald-600'
-    if (status === 'active') return 'text-blue-600 font-semibold'
-    return 'text-slate-400'
+    if (status === 'completed') return 'text-emerald-600 dark:text-emerald-400'
+    if (status === 'active') return 'text-blue-600 dark:text-blue-400 font-semibold'
+    return 'text-muted-foreground'
   }
 
   const getDetailText = () => {
@@ -121,7 +122,7 @@ export const SegmentedProgressBar: React.FC<SegmentedProgressBarProps> = ({
   const segments = getSegments()
 
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
+    <div className="bg-card rounded-xl shadow-sm border border-border p-5">
       {/* 阶段标签 */}
       <div className="flex justify-between mb-3">
         {PHASES.map((p, index) => {
@@ -129,9 +130,9 @@ export const SegmentedProgressBar: React.FC<SegmentedProgressBarProps> = ({
           return (
             <div
               key={p.key}
-              className={`flex items-center gap-2 ${getStatusText(status)} transition-colors`}
+              className={cn("flex items-center gap-2 transition-colors", getStatusText(status))}
             >
-              <div className={`w-3 h-3 rounded-full ${getStatusDot(status)} transition-colors`} />
+              <div className={cn("w-3 h-3 rounded-full transition-colors", getStatusDot(status))} />
               <span className="text-sm">{p.label}</span>
             </div>
           )
@@ -139,7 +140,7 @@ export const SegmentedProgressBar: React.FC<SegmentedProgressBarProps> = ({
       </div>
 
       {/* 分段进度条 */}
-      <div className="relative h-3 bg-slate-100 rounded-full overflow-hidden mb-3">
+      <div className="relative h-3 bg-muted rounded-full overflow-hidden mb-3">
         {segments.map((segment, index) => {
           const prevEnd = index === 0 ? 0 : segments[index - 1].end
           const segmentWidth = segment.end - prevEnd
@@ -161,7 +162,7 @@ export const SegmentedProgressBar: React.FC<SegmentedProgressBarProps> = ({
                 }}
               />
               {index < PHASES.length - 1 && (
-                <div className="absolute right-0 top-0 h-full w-px bg-white/50" />
+                <div className="absolute right-0 top-0 h-full w-px bg-background/50" />
               )}
             </div>
           )
@@ -170,11 +171,11 @@ export const SegmentedProgressBar: React.FC<SegmentedProgressBarProps> = ({
 
       {/* 详细信息 */}
       <div className="flex justify-between items-center">
-        <div className="text-sm text-slate-600">
-          <span className="text-slate-500">当前进度：</span>
-          <span className="text-slate-800">{getDetailText()}</span>
+        <div className="text-sm text-muted-foreground">
+          <span className="text-muted-foreground/70">当前进度：</span>
+          <span className="text-foreground">{getDetailText()}</span>
         </div>
-        <div className="text-xl font-bold text-slate-800">{Math.round(progress)}%</div>
+        <div className="text-xl font-bold text-foreground">{Math.round(progress)}%</div>
       </div>
     </div>
   )