style: 重构导航栏状态切换为单状态 Toggle 圆形按钮并实现旋转动效

Author: AceCandy

index.html

@@ -35,16 +35,18 @@ <h1>Claude Code 中文速查表</h1>
           <div class="os-toggle" id="osToggle" aria-label="系统快捷键切换">
             <button class="os-btn active" type="button" data-os="mac" title="Mac 快捷键" aria-label="切换到 Mac 快捷键">
               <svg width="14" height="14" viewBox="0 0 814 1000" fill="currentColor" aria-hidden="true"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57.8-155.5-127.4c-58.4-83-106.3-211.5-106.3-334.2 0-196.5 127.8-300.9 253.3-300.9 66.8 0 122.4 43.4 164.1 43.4 39.5 0 101.1-46 176.2-46 28.5 0 130.9 2.6 198.3 99.1zm-169.5-92.8c31.2-37 52.4-88.1 52.4-139.3 0-7.1-.6-14.3-1.9-20.1-50 1.6-109.2 33.3-145 75.1-25.8 29.3-52.4 79.8-52.4 131.6 0 7.8.6 15.6 1.3 18.2 2.6.6 6.4 1.3 10.3 1.3 44.7 0 101.1-30.5 135.3-66.8z"/></svg>
-              <span class="os-btn-label">Mac</span>
             </button>
             <button class="os-btn" type="button" data-os="win" title="Windows 快捷键" aria-label="切换到 Windows 快捷键">
               <svg width="14" height="14" viewBox="0 0 88 88" fill="currentColor" aria-hidden="true"><path d="M0 12.402l35.687-4.86.016 34.423-35.67.203zm35.67 33.529l.028 34.453L.028 71.48l-.026-25.55zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349l-.011 41.34-47.318-6.678-.066-34.739z"/></svg>
-              <span class="os-btn-label">Win</span>
             </button>
           </div>
           <div class="theme-toggle" id="themeToggle" aria-label="主题切换">
-            <button class="theme-btn active" type="button" data-theme="light" aria-label="切换到浅色主题">浅</button>
-            <button class="theme-btn" type="button" data-theme="dark" aria-label="切换到深色主题">深</button>
+            <button class="theme-btn active" type="button" data-theme="light" aria-label="切换到浅色主题">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
+            </button>
+            <button class="theme-btn" type="button" data-theme="dark" aria-label="切换到深色主题">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+            </button>
           </div>
         </div>
         <div class="header-meta">

script.js

@@ -68,7 +68,12 @@
   buttons.forEach(function (button) {
     button.addEventListener("click", function () {
       localStorage.setItem("cc-os-manual", "1");
-      applyOS(button.dataset.os);
+      if (button.classList.contains("active")) {
+        var nextOS = button.dataset.os === "mac" ? "win" : "mac";
+        applyOS(nextOS);
+      } else {
+        applyOS(button.dataset.os);
+      }
     });
   });
 
@@ -103,7 +108,12 @@
   if (buttons.length > 0) {
     buttons.forEach(function (button) {
       button.addEventListener("click", function () {
-        applyTheme(button.dataset.theme);
+        if (button.classList.contains("active")) {
+          var nextTheme = button.dataset.theme === "light" ? "dark" : "light";
+          applyTheme(nextTheme);
+        } else {
+          applyTheme(button.dataset.theme);
+        }
       });
     });
   }

styles.css

@@ -342,70 +342,50 @@ a,
 .theme-toggle {
   position: relative;
   display: inline-flex;
+  width: 36px;
+  height: 36px;
   align-items: center;
-  padding: 0.2rem;
+  justify-content: center;
   border: 1px solid var(--control-border);
-  border-radius: 999px;
+  border-radius: 50%;
   background: var(--control-bg);
   isolation: isolate;
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
 }
 
-/* 滑块指示器 */
-.os-toggle::before,
-.theme-toggle::before {
-  content: "";
-  position: absolute;
-  top: 0.2rem;
-  bottom: 0.2rem;
-  left: 0.2rem;
-  width: calc(50% - 0.2rem);
-  background: var(--toggle-indicator-bg);
-  border-radius: 999px;
-  box-shadow: var(--toggle-indicator-shadow);
-  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
-  z-index: 1;
+.os-toggle:hover,
+.theme-toggle:hover {
+  border-color: var(--border-strong);
+  background: color-mix(in srgb, var(--panel) 60%, var(--control-bg));
 }
 
-/* 滑动位移 */
-.os-toggle:has([data-os="win"].active)::before,
-.theme-toggle:has([data-theme="dark"].active)::before {
-  transform: translateX(100%);
+.os-toggle:active,
+.theme-toggle:active {
+  transform: scale(0.92);
 }
 
 .os-btn,
 .theme-btn {
   appearance: none;
   border: none;
   background: transparent;
-  color: var(--text-soft);
-  font: inherit;
-  cursor: pointer;
-  min-height: 44px;
-  padding: 0.6rem 0.95rem;
-  border-radius: 999px;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.4rem;
-  position: relative;
-  z-index: 2;
-  flex: 1;
-  transition: color 0.2s ease, transform 0.1s ease;
-}
-
-.os-btn {
-  min-width: 4.8rem;
-}
-
-.theme-btn {
-  min-width: 3.2rem;
-  font-weight: 700;
-}
-
-/* 按钮点击缩放反馈 */
-.os-btn:active,
-.theme-btn:active {
-  transform: scale(0.95);
+  border-radius: 50%;
+  cursor: pointer;
+  opacity: 0;
+  transform: scale(0.6) rotate(-90deg);
+  pointer-events: none;
+  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  color: var(--text-soft);
 }
 
 .github-star-link {
@@ -455,34 +435,24 @@ a,
   font-weight: 800;
 }
 
-.theme-btn {
-  min-width: 2.6rem;
-  font-weight: 700;
-}
-
-.os-btn-label {
-  font-size: 0.82rem;
-  line-height: 1;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-}
-
 .os-btn.active,
 .theme-btn.active {
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+  pointer-events: auto;
+  color: var(--text);
+}
+
+.os-btn:hover,
+.theme-btn:hover {
   color: var(--text);
-  font-weight: 800;
 }
 
 .section-switcher-btn.active {
   background: var(--control-active-bg);
   color: var(--control-active-text);
 }
 
-.os-btn:hover:not(.active),
-.theme-btn:hover:not(.active) {
-  color: var(--text);
-}
-
 .section-switcher-btn:hover:not(.active) {
   background: color-mix(in srgb, var(--panel) 60%, var(--control-bg));
 }
@@ -1165,28 +1135,9 @@ a,
   }
 
   .header-controls {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
+    display: flex;
     gap: 0.5rem;
-    width: 100%;
-  }
-
-  .os-toggle,
-  .theme-toggle {
-    min-width: 0;
-    justify-content: space-between;
-  }
-
-  .os-toggle {
-    width: 100%;
-  }
-
-  .os-btn,
-  .theme-btn {
-    min-height: 38px;
-    padding: 0.48rem 0.72rem;
-    flex: 1;
-    min-width: 0;
+    align-items: center;
   }
 
   .github-star-link {

styles.test.mjs

@@ -28,7 +28,7 @@ test('styles.css 包含 GitHub Star 入口和手机端响应式契约', () => {
   assert.doesNotMatch(styles, /@media \(max-width:\s*1180px\)/);
   assert.match(styles, /@media \(max-width:\s*760px\) \{[\s\S]*\.page-sidebar\s*\{[\s\S]*grid-column:\s*1;/);
   assert.match(styles, /@media \(max-width:\s*680px\) \{[\s\S]*\.header\s*\{[\s\S]*position:\s*static;/);
-  assert.match(styles, /@media \(max-width:\s*680px\) \{[\s\S]*\.header-controls\s*\{[\s\S]*grid-template-columns:\s*minmax\(0,\s*1fr\) auto;/);
+  assert.match(styles, /@media \(max-width:\s*680px\) \{[\s\S]*\.header-controls\s*\{[\s\S]*display:\s*flex;/);
   assert.match(styles, /@media \(max-width:\s*680px\) \{[\s\S]*\.page-sidebar\s*\{[\s\S]*position:\s*sticky;/);
   assert.match(styles, /\.page-sidebar\s*\{[\s\S]*min-width:\s*0;/);
   assert.match(styles, /@media \(max-width:\s*680px\) \{[\s\S]*\.page-shell\s*\{[\s\S]*min-width:\s*0;/);