完善规则配置页交互细节

app/styles/pages/rules_test.css

@@ -9,6 +9,14 @@
   scroll-margin-top: 100px;
 }
 
+.rules-test-page .tag.tag-sm {
+  min-height: 20px;
+  padding: 2px 8px;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
 .rules-test-page #fields,
 .rules-test-page #sub-documents,
 .rules-test-page #visual-elements,
@@ -844,6 +852,63 @@
   background: #fbfdfc;
 }
 
+.rules-test-page .dependency-variable-button {
+  display: inline-flex;
+  align-items: stretch;
+  min-height: 32px;
+  overflow: hidden;
+  border: 1px solid #00684a;
+  border-radius: 6px;
+  background: #00684a;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.2;
+  transition: all 0.2s ease-in-out;
+}
+
+.rules-test-page .dependency-variable-button:hover {
+  border-color: #005a3f;
+  background: #005a3f;
+  color: #fff;
+}
+
+.rules-test-page .dependency-variable-main,
+.rules-test-page .dependency-variable-remove {
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  line-height: 1;
+}
+
+.rules-test-page .dependency-variable-main {
+  max-width: 260px;
+  padding: 7px 10px 7px 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rules-test-page .dependency-variable-remove {
+  justify-content: center;
+  width: 30px;
+  border-left: 1px solid rgba(255, 255, 255, 0.28);
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.rules-test-page .dependency-variable-remove:hover {
+  background: rgba(255, 255, 255, 0.16);
+  color: #fff;
+}
+
+.rules-test-page .dependency-variable-main:focus-visible,
+.rules-test-page .dependency-variable-remove:focus-visible {
+  outline: 2px solid rgba(0, 104, 74, 0.18);
+  outline-offset: -2px;
+}
+
 .rules-test-page .subrule-list {
   display: grid;
   gap: 8px;
@@ -851,7 +916,7 @@
 
 .rules-test-page .subrule-item {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: 34px minmax(0, 1fr);
   align-items: start;
   gap: 10px;
   padding: 9px 10px;
@@ -860,6 +925,22 @@
   background: #fff;
 }
 
+.rules-test-page .subrule-index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
+  border-radius: 50%;
+  background: #00684a;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1;
+  box-shadow: 0 2px 6px rgba(0, 104, 74, 0.18);
+}
+
 .rules-test-page .subrule-item div {
   display: flex;
   flex-direction: column;
@@ -882,6 +963,12 @@
   line-height: 1.45;
 }
 
+.rules-test-page .subrule-item > .subrule-index {
+  color: #fff;
+  font-size: 13px;
+  line-height: 1;
+}
+
 .rules-test-page .drawer-field-item {
   display: flex;
   align-items: center;