1 files changed, 85 insertions, 31 deletions

diff --git a/src/components/rules/Rule.module.scss b/src/components/rules/Rule.module.scss
index 48a22e7..69b6f3b 100644
--- a/src/components/rules/Rule.module.scss
+++ b/src/components/rules/Rule.module.scss
@@ -1,81 +1,135 @@
-@use '~/styles/utils/custom-media' as *;
-
 .rule {
   display: flex;
   align-items: center;
-  padding: 12px 20px;
-  transition: background-color 0.2s ease;
-  border-bottom: 1px solid var(--color-separator);
+  height: 100%;
+  padding: 10px 18px;
+  transition: background-color 0.15s ease;
 
   &:hover {
-    background-color: var(--bg-near-transparent);
+    background-color: var(--color-hover-soft);
+  }
+
+  &.disabled {
+    opacity: 0.45;
+  }
+
+  @media (max-width: 768px) {
+    padding: 10px 12px;
   }
 }
 
-.left {
+.index {
   width: 40px;
   flex-shrink: 0;
   color: var(--color-text-secondary);
-  font-size: 11px;
-  opacity: 0.4;
+  font-size: 0.68rem;
+  opacity: 0.5;
   font-family: var(--font-mono);
+
+  @media (max-width: 768px) {
+    width: 28px;
+  }
 }
 
-.right {
+.main {
   flex: 1;
   min-width: 0;
-  margin-left: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
 }
 
 .payloadRow {
   display: flex;
   align-items: baseline;
-  margin-bottom: 4px;
+  gap: 10px;
+  min-width: 0;
 }
 
 .payload {
   font-family: var(--font-mono);
-  font-size: 13px;
+  font-size: 0.8rem;
   color: var(--color-text);
-  word-break: break-all;
   line-height: 1.4;
+  word-break: break-all;
+  // 定高行装不下第三行，超出的部分省略掉
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
-.size {
-  margin-left: 12px;
-  font-size: 10px;
-  color: var(--color-text-secondary);
-  background: var(--bg-near-transparent);
+.entryCount {
+  flex-shrink: 0;
+  font-size: 0.65rem;
+  color: var(--color-badge-fg);
+  background: var(--color-badge-bg);
   padding: 1px 6px;
-  border-radius: 3px;
+  border-radius: 5px;
   white-space: nowrap;
-  text-transform: uppercase;
 }
 
 .metaRow {
   display: flex;
   align-items: center;
-  gap: 12px;
-  font-size: 11px;
+  gap: 10px;
+  font-size: 0.7rem;
+  min-width: 0;
 }
 
 .typeTag {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 4px;
-  color: var(--color-text-secondary);
-  background: var(--bg-near-transparent);
-  padding: 2px 8px;
-  border-radius: 4px;
+  flex-shrink: 0;
+  color: var(--color-badge-fg);
+  background: var(--color-badge-bg);
+  padding: 2px 7px;
+  border-radius: 5px;
 
   span {
     font-weight: 500;
     text-transform: uppercase;
-    font-size: 10px;
+    font-size: 0.62rem;
+    letter-spacing: 0.02em;
   }
 }
 
-.proxyTag {
+.proxy {
   font-weight: 600;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.01em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hitInfo {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--color-text-secondary);
+  cursor: default;
+}
+
+// DOM 里排在最前，桌面端就在行首；用 mini 尺寸的开关，
+// 布局盒子和看到的一样大，不需要再拿 scale + transform-origin 去凑
+.switch {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: 12px;
+
+  &.pending {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  // 窄屏维持原样：拨到行尾
+  @media (max-width: 768px) {
+    order: 1;
+    margin-right: 0;
+    margin-left: 12px;
+  }
 }