refactor(ui): simplify UpdateBadge to minimal dot indicator

src/App.tsx

@@ -619,8 +619,8 @@ function App() {
                 </h1>
               </div>
             ) : (
-              <>
               <div className="flex items-center gap-2">
+                <div className="relative inline-flex items-center">
                   <a
                     href="https://github.com/farion1231/cc-switch"
                     target="_blank"
@@ -634,6 +634,14 @@ function App() {
                   >
                     CC Switch
                   </a>
+                  <UpdateBadge
+                    onClick={() => {
+                      setSettingsDefaultTab("about");
+                      setCurrentView("settings");
+                    }}
+                    className="absolute -top-4 -right-4"
+                  />
+                </div>
                 <Button
                   variant="ghost"
                   size="icon"
@@ -647,13 +655,6 @@ function App() {
                   <Settings className="w-4 h-4" />
                 </Button>
               </div>
-                <UpdateBadge
-                  onClick={() => {
-                    setSettingsDefaultTab("about");
-                    setCurrentView("settings");
-                  }}
-                />
-              </>
             )}
           </div>
 

src/components/UpdateBadge.tsx

@@ -1,6 +1,6 @@
-import { X, Download } from "lucide-react";
 import { useUpdate } from "@/contexts/UpdateContext";
 import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
 
 interface UpdateBadgeProps {
   className?: string;
@@ -8,56 +8,39 @@ interface UpdateBadgeProps {
 }
 
 export function UpdateBadge({ className = "", onClick }: UpdateBadgeProps) {
-  const { hasUpdate, updateInfo, isDismissed, dismissUpdate } = useUpdate();
+  const { hasUpdate, updateInfo } = useUpdate();
   const { t } = useTranslation();
+  const isActive = hasUpdate && updateInfo;
+  const title = isActive
+    ? t("settings.updateAvailable", {
+        version: updateInfo?.availableVersion ?? "",
+      })
+    : t("settings.checkForUpdates");
 
-  // 如果没有更新或已关闭，不显示
+  if (!isActive) {
-  if (!hasUpdate || isDismissed || !updateInfo) {
     return null;
   }
 
   return (
-    <div
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      title={title}
+      aria-label={title}
+      onClick={onClick}
       className={`
-        flex items-center gap-1.5 px-2.5 py-1
+        relative h-6 w-6 rounded-full
-        bg-white dark:bg-gray-800
+        ${isActive ? "text-blue-600 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-500/10" : "text-muted-foreground hover:bg-muted/60"}
-        border border-border-default 
-        rounded-lg text-xs
-        shadow-sm
-        transition-all duration-200
-        ${onClick ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-750" : ""}
         ${className}
       `}
-      role={onClick ? "button" : undefined}
-      tabIndex={onClick ? 0 : -1}
-      onClick={onClick}
-      onKeyDown={(e) => {
-        if (!onClick) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick();
-        }
-      }}
     >
-      <Download className="w-3 h-3 text-blue-500 dark:text-blue-400" />
+      <span
-      <span className="text-gray-700 dark:text-gray-300 font-medium">
+        className={`
-        {t("settings.updateBadge")}
+          absolute inset-0 m-auto h-2 w-2 rounded-full ring-1 ring-background
-      </span>
+          ${isActive ? "bg-blue-500 dark:bg-blue-400" : "bg-blue-300/70 dark:bg-blue-300/60"}
-      <button
+        `}
-        onClick={(e) => {
+      />
-          e.stopPropagation();
+    </Button>
-          dismissUpdate();
-        }}
-        className="
-          ml-1 -mr-0.5 p-0.5 rounded
-          hover:bg-gray-100 dark:hover:bg-gray-700
-          transition-colors
-          focus:outline-none focus:ring-2 focus:ring-blue-500/20
-        "
-        aria-label={t("common.close")}
-      >
-        <X className="w-3 h-3 text-muted-foreground" />
-      </button>
-    </div>
   );
 }