perf: 优化Webui细节

SengokuCola · SengokuCola · commit a29f718d8a39 · 2026-05-26T14:18:31.000+08:00
diff --git a/dashboard/src/index.css b/dashboard/src/index.css
@@ -654,6 +654,84 @@
   font-weight: 700;
 }
 
+:root[data-dashboard-style='future-retro'] [data-dashboard-status-dot='true'] {
+  border: 1px solid var(--retro-line) !important;
+  border-radius: 1px !important;
+  background: var(--retro-recessed-strong) !important;
+  box-shadow: none !important;
+  animation: none !important;
+}
+
+:root[data-dashboard-style='future-retro']
+  [data-dashboard-status-dot='true'][data-state='running'] {
+  background: var(--retro-rust) !important;
+}
+
+:root[data-dashboard-style='future-retro']
+  [data-dashboard-status-dot='true'][data-state='loading'] {
+  background: var(--retro-gold) !important;
+}
+
+:root[data-dashboard-style='future-retro']
+  [data-dashboard-status-dot='true'][data-state='stopped'] {
+  background: var(--retro-ink-soft) !important;
+}
+
+:root[data-dashboard-style='future-retro'] [data-dashboard-status-badge='true'] {
+  min-height: 1.7rem;
+  border: var(--retro-stroke) solid var(--retro-line) !important;
+  border-radius: 2px !important;
+  background: var(--retro-recessed) !important;
+  color: var(--retro-ink) !important;
+  box-shadow: none !important;
+  font-weight: 800;
+}
+
+:root[data-dashboard-style='future-retro']
+  [data-dashboard-status-badge='true'][data-state='running'] {
+  background: var(--retro-gold) !important;
+  color: var(--retro-ink) !important;
+}
+
+:root[data-dashboard-style='future-retro']
+  [data-dashboard-status-badge='true'][data-state='stopped'] {
+  background: var(--retro-rust) !important;
+  color: var(--retro-paper) !important;
+}
+
+:root[data-dashboard-style='future-retro'] [data-dashboard-status-badge='true'] svg {
+  color: currentColor !important;
+  stroke-width: 2.35;
+}
+
+:root[data-dashboard-style='future-retro'] [data-dashboard-feature-status='true'] {
+  min-height: 2rem;
+  border: var(--retro-stroke) solid var(--retro-line) !important;
+  border-radius: 2px !important;
+  background: transparent !important;
+  color: var(--retro-ink) !important;
+  font-weight: 700;
+  box-shadow: none !important;
+}
+
+:root[data-dashboard-style='future-retro']
+  [data-dashboard-feature-status='true'][data-enabled='true'] {
+  background: var(--retro-recessed) !important;
+}
+
+:root[data-dashboard-style='future-retro'] [data-dashboard-feature-status-light='true'] {
+  border: 1px solid var(--retro-line) !important;
+  border-radius: 1px !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+:root[data-dashboard-style='future-retro']
+  [data-dashboard-feature-status='true'][data-enabled='true']
+  [data-dashboard-feature-status-light='true'] {
+  background: var(--retro-gold) !important;
+}
+
 :root[data-dashboard-style='future-retro'] [data-dashboard-switch='true'] {
   border: var(--retro-stroke) solid var(--retro-line) !important;
   border-radius: 2px !important;
diff --git a/dashboard/src/routes/chat/MessageList.tsx b/dashboard/src/routes/chat/MessageList.tsx
@@ -85,19 +85,42 @@ export function MessageList({
   language,
 }: MessageListProps) {
   const { t } = useTranslation()
+  const viewportRef = useRef<HTMLDivElement>(null)
   const endRef = useRef<HTMLDivElement>(null)
   const messageRefs = useRef<Map<string, HTMLDivElement>>(new Map())
 
   useEffect(() => {
-    endRef.current?.scrollIntoView({ behavior: 'smooth' })
+    const viewport = viewportRef.current
+    if (!viewport) {
+      return
+    }
+
+    viewport.scrollTo({
+      top: viewport.scrollHeight,
+      behavior: 'smooth',
+    })
   }, [messages])
 
   const scrollToMessage = useCallback((messageId: string) => {
+    const viewport = viewportRef.current
     const target = messageRefs.current.get(messageId)
-    if (!target) {
+    if (!target || !viewport) {
       return false
     }
-    target.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
+    const viewportRect = viewport.getBoundingClientRect()
+    const targetRect = target.getBoundingClientRect()
+    const targetTop =
+      viewport.scrollTop +
+      targetRect.top -
+      viewportRect.top -
+      viewport.clientHeight / 2 +
+      targetRect.height / 2
+
+    viewport.scrollTo({
+      top: Math.max(0, targetTop),
+      behavior: 'smooth',
+    })
     target.classList.add('chat-message-flash')
     window.setTimeout(() => {
       target.classList.remove('chat-message-flash')
@@ -130,6 +153,7 @@ export function MessageList({
           className="h-full w-full"
           contentClassName="!block w-full min-w-0"
           scrollbars="vertical"
+          viewportRef={viewportRef}
           viewportClassName="[&>div]:!block [&>div]:!min-w-0 [&>div]:w-full"
         >
           <EmptyState botName={botDisplayName} />
@@ -144,6 +168,7 @@ export function MessageList({
         className="h-full w-full"
         contentClassName="!block w-full min-w-0"
         scrollbars="vertical"
+        viewportRef={viewportRef}
         viewportClassName="[&>div]:!block [&>div]:!min-w-0 [&>div]:w-full"
       >
         <ChatScrollContext.Provider value={scrollContextValue}>
diff --git a/dashboard/src/routes/index.tsx b/dashboard/src/routes/index.tsx
@@ -181,8 +181,13 @@ const generatePieColors = (count: number): string[] => {
 // 内部实现组件
 function FeatureStatusLight({ enabled, label }: { enabled: boolean; label: string }) {
   return (
-    <div className="inline-flex items-center gap-1.5 rounded-md border bg-background px-2 py-1 text-xs text-muted-foreground">
+    <div
+      data-dashboard-feature-status="true"
+      data-enabled={enabled ? 'true' : 'false'}
+      className="inline-flex items-center gap-1.5 rounded-md border bg-background px-2 py-1 text-xs text-muted-foreground"
+    >
       <span
+        data-dashboard-feature-status-light="true"
         className={`h-2.5 w-2.5 rounded-full ${
           enabled ? 'bg-green-500 shadow-[0_0_0_3px_rgba(34,197,94,0.18)]' : 'bg-muted-foreground/30'
         }`}
@@ -788,32 +793,68 @@ function IndexPageContent() {
                 <div className="flex items-center gap-2">
                   {isBotStatusLoading && !botStatus ? (
                     <>
-                      <div className="h-3 w-3 rounded-full bg-muted-foreground/40 animate-pulse" />
-                      <Badge variant="outline" className="whitespace-nowrap text-muted-foreground">
+                      <div
+                        data-dashboard-status-dot="true"
+                        data-state="loading"
+                        className="h-3 w-3 rounded-full bg-muted-foreground/40 animate-pulse"
+                      />
+                      <Badge
+                        data-dashboard-status-badge="true"
+                        data-state="loading"
+                        variant="outline"
+                        className="whitespace-nowrap text-muted-foreground"
+                      >
                         <RefreshCw className="h-3 w-3 mr-1 animate-spin" />
                         读取中
                       </Badge>
                     </>
                   ) : botStatus?.running ? (
                     <>
-                      <div className="h-3 w-3 rounded-full bg-green-500 animate-pulse" />
-                      <Badge variant="outline" className="whitespace-nowrap text-green-600 border-green-300 bg-green-50">
+                      <div
+                        data-dashboard-status-dot="true"
+                        data-state="running"
+                        className="h-3 w-3 rounded-full bg-green-500 animate-pulse"
+                      />
+                      <Badge
+                        data-dashboard-status-badge="true"
+                        data-state="running"
+                        variant="outline"
+                        className="whitespace-nowrap text-green-600 border-green-300 bg-green-50"
+                      >
                         <CheckCircle2 className="h-3 w-3 mr-1" />
                         {t('home.botStatus.running')}
                       </Badge>
                     </>
                   ) : botStatus ? (
                     <>
-                      <div className="h-3 w-3 rounded-full bg-red-500" />
-                      <Badge variant="outline" className="whitespace-nowrap text-red-600 border-red-300 bg-red-50">
+                      <div
+                        data-dashboard-status-dot="true"
+                        data-state="stopped"
+                        className="h-3 w-3 rounded-full bg-red-500"
+                      />
+                      <Badge
+                        data-dashboard-status-badge="true"
+                        data-state="stopped"
+                        variant="outline"
+                        className="whitespace-nowrap text-red-600 border-red-300 bg-red-50"
+                      >
                         <AlertCircle className="h-3 w-3 mr-1" />
                         {t('home.botStatus.stopped')}
                       </Badge>
                     </>
                   ) : (
                     <>
-                      <div className="h-3 w-3 rounded-full bg-muted-foreground/40" />
-                      <Badge variant="outline" className="whitespace-nowrap text-muted-foreground">
+                      <div
+                        data-dashboard-status-dot="true"
+                        data-state="unknown"
+                        className="h-3 w-3 rounded-full bg-muted-foreground/40"
+                      />
+                      <Badge
+                        data-dashboard-status-badge="true"
+                        data-state="unknown"
+                        variant="outline"
+                        className="whitespace-nowrap text-muted-foreground"
+                      >
                         <AlertCircle className="h-3 w-3 mr-1" />
                         未知
                       </Badge>
