20260825224435

code/fms/fms-vue/src/components/ui/tree/index.scss

@@ -5,6 +5,7 @@
   color: var(--fms-text);
   font-size: var(--fms-font-size);
   line-height: 1.5;
+  font-weight: 500;
   outline: none;
 }
 
@@ -36,13 +37,13 @@
   outline-offset: -2px;
 }
 
-/* 选中：主色淡底 + 主色加粗文字（不依赖单一颜色表达） */
-.tree-node.is-selected {
-  background: color-mix(in srgb, var(--fms-primary) 6%, transparent);
-}
-.tree-node.is-selected .tree-node-content {
-  color: var(--fms-primary);
-  font-weight: 600;
+/* 选中：主色淡底，明显区分于灰底页面；文字保持默认色。
+   比例取 5%：深色主题（如 #0f172b）在白底上约 #f3f3f4，接近 hover 浅色 #f1f5f9；
+   比例过高（10%）时深色主题会算出 #e7e7e9 等偏深灰，显得脏。
+   注意 hover 规则 specificity 更高，需连同 hover 一起覆盖，避免悬停时选中态被盖掉 */
+.tree-node.is-selected,
+.tree-node.is-selected:hover:not(.is-disabled) {
+  background: color-mix(in srgb, var(--fms-primary) 5%, transparent);
 }
 
 .tree-node.is-disabled,
@@ -68,7 +69,7 @@
   width: var(--fms-tree-switcher-size);
   height: var(--fms-tree-switcher-size);
   margin-right: 2px;
-  color: var(--fms-text-secondary);
+  color: inherit;
   border-radius: 50%;
   cursor: pointer;
   transition:
@@ -126,6 +127,23 @@
 .tree-node.is-block .tree-node-content {
   flex: 1 1 auto;
 }
+
+/* 节点图标：位于标题前，继承文字默认色，与标题对齐 */
+.tree-node-icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--fms-tree-icon-size);
+  height: var(--fms-tree-icon-size);
+  margin-right: 8px;
+  color: inherit;
+
+  svg {
+    width: var(--fms-tree-icon-size);
+    height: var(--fms-tree-icon-size);
+  }
+}
 .tree-highlight {
   background: color-mix(in srgb, var(--fms-primary) 22%, transparent);
   color: var(--fms-primary);