chore: Help / Settings / Select / RippleButton 样式嵌套化

把 Help / Settings / Select / RippleButton 四个文件的 style 块从平铺 CSS 改写为 SCSS 嵌套形式：父-子选择器用 & 引用，状态变体（&:hover / &.active / &.primary）下嵌；行注释从 /* */ 改为 //；保持视觉与行为完全一致，构建产物大小不变。Popup.vue 的样式较多，留下个 patch 再处理。将版本号提升到 1.3.1。

Author: setube

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stackprism",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "description": "StackPrism 用于检测网页前端、后端、CDN、SaaS、广告营销、统计、登录、支付、网站程序和主题模板线索。",
   "scripts": {

src/ui/components/RippleButton.vue

@@ -66,44 +66,44 @@
 
 <style lang="scss" scoped>
   .sp-rb {
-    position: relative;
-    overflow: hidden;
     isolation: isolate;
+    overflow: hidden;
+    position: relative;
+
+    &--primary .sp-rb-ripple {
+      background: #ffffff;
+      opacity: 0.28;
+    }
   }
 
   .sp-rb-content {
-    position: relative;
-    z-index: 1;
-    display: inline-flex;
     align-items: center;
+    display: inline-flex;
     gap: 6px;
+    position: relative;
+    z-index: 1;
   }
 
   .sp-rb-ripples {
-    position: absolute;
     inset: 0;
     pointer-events: none;
+    position: absolute;
     z-index: 0;
   }
 
   .sp-rb-ripple {
-    position: absolute;
-    border-radius: 50%;
+    animation: sp-rb-spread 420ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
     background: currentColor;
+    border-radius: 50%;
     opacity: 0.18;
+    position: absolute;
     transform: scale(0);
-    animation: sp-rb-spread 420ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-
-  .sp-rb--primary .sp-rb-ripple {
-    background: #ffffff;
-    opacity: 0.28;
   }
 
   @keyframes sp-rb-spread {
     to {
-      transform: scale(1);
       opacity: 0;
+      transform: scale(1);
     }
   }
 

src/ui/components/Select.vue

@@ -248,6 +248,15 @@
     display: block;
     position: relative;
     width: 100%;
+
+    &.open .sp-select-trigger {
+      border-color: var(--accent);
+      outline: none;
+    }
+
+    &.open .sp-select-chevron {
+      color: var(--accent);
+    }
   }
 
   .sp-select-trigger {
@@ -269,20 +278,23 @@
       border-color 0.15s ease,
       color 0.15s ease;
     width: 100%;
-  }
 
-  .sp-select-trigger:hover:not(:disabled):not(.disabled),
-  .sp-select.open .sp-select-trigger,
-  .sp-select-trigger:focus-visible,
-  .sp-select-trigger:focus-within {
-    border-color: var(--accent);
-    outline: none;
-  }
+    &:hover:not(:disabled):not(.disabled),
+    &:focus-visible,
+    &:focus-within {
+      border-color: var(--accent);
+      outline: none;
+    }
 
-  .sp-select-trigger:disabled,
-  .sp-select-trigger.disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
+    &:hover:not(:disabled):not(.disabled) .sp-select-chevron {
+      color: var(--accent);
+    }
+
+    &:disabled,
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
   }
 
   .sp-select-input-wrap {
@@ -299,10 +311,10 @@
     min-width: 0;
     outline: none;
     padding: 7px 0 7px 10px;
-  }
 
-  .sp-select-input::placeholder {
-    color: var(--muted);
+    &::placeholder {
+      color: var(--muted);
+    }
   }
 
   .sp-chevron-btn {
@@ -316,10 +328,10 @@
     justify-content: center;
     padding: 0;
     width: 24px;
-  }
 
-  .sp-chevron-btn:disabled {
-    cursor: not-allowed;
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
   .sp-clear-btn,
@@ -339,12 +351,11 @@
       background 0.15s ease,
       color 0.15s ease;
     width: 18px;
-  }
 
-  .sp-clear-btn:hover,
-  .sp-clear-btn-input:hover {
-    background: var(--accent-soft);
-    color: var(--accent);
+    &:hover {
+      background: var(--accent-soft);
+      color: var(--accent);
+    }
   }
 
   .sp-select-value {
@@ -353,10 +364,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }
 
-  .sp-select-value.placeholder {
-    color: var(--muted);
+    &.placeholder {
+      color: var(--muted);
+    }
   }
 
   .sp-select-chevron {
@@ -365,15 +376,10 @@
     transition:
       color 0.15s ease,
       transform 0.2s ease;
-  }
 
-  .sp-select-chevron.flipped {
-    transform: rotate(180deg);
-  }
-
-  .sp-select.open .sp-select-chevron,
-  .sp-select-trigger:hover:not(:disabled):not(.disabled) .sp-select-chevron {
-    color: var(--accent);
+    &.flipped {
+      transform: rotate(180deg);
+    }
   }
 
   .sp-select-list {
@@ -406,15 +412,15 @@
     transition:
       background 0.12s ease,
       color 0.12s ease;
-  }
 
-  .sp-select-option.focused {
-    background: var(--accent-soft);
-  }
+    &.focused {
+      background: var(--accent-soft);
+    }
 
-  .sp-select-option.selected {
-    color: var(--accent);
-    font-weight: 500;
+    &.selected {
+      color: var(--accent);
+      font-weight: 500;
+    }
   }
 
   .sp-fade-enter-from,