20260825224435

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

@@ -11,6 +11,9 @@
   color: var(--fms-text);
   font-size: var(--fms-font-size);
   line-height: var(--fms-line-height);
+  /* 默认轻阴影：对齐 shadcn-vue 输入框的 shadow-xs（0 1px 2px），
+     聚焦时与 3px 光环叠加，光环在外、投影在内，无跳动 */
+  box-shadow: var(--fms-shadow);
   transition:
     border-color 150ms ease,
     box-shadow 150ms ease;
@@ -27,7 +30,9 @@
 
 .input-wrapper.input-focused {
   border-color: var(--fms-primary);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fms-primary) 20%, transparent);
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--fms-primary) 20%, transparent),
+    var(--fms-shadow);
   /* 聚焦光环向外扩散 3px，提升层级避免被相邻表单项/后续兄弟元素遮挡 */
   z-index: 1;
 }
@@ -80,7 +85,9 @@
 
 .input-error.input-focused {
   border-color: var(--fms-danger);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fms-danger) 20%, transparent);
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--fms-danger) 20%, transparent),
+    var(--fms-shadow);
 }
 
 .input-warning {
@@ -93,7 +100,9 @@
 
 .input-warning.input-focused {
   border-color: var(--fms-warning);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fms-warning) 20%, transparent);
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--fms-warning) 20%, transparent),
+    var(--fms-shadow);
 }
 
 /* 禁用态：灰底 + 灰字 + 弱边框，悬停显示禁用光标 */

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);

code/fms/fms-vue/src/components/ui/tree/tree-node.vue

@@ -187,6 +187,8 @@ function onContextMenu(e) {
         :class="{ 'is-block': ctx.props.blockNode }"
         @click="onContentClick"
       >
+        <!-- 节点图标：节点数据 icon 字段为 lucide 组件时渲染在标题前 -->
+        <component :is="node[fn.icon]" v-if="node[fn.icon]" class="tree-node-icon" aria-hidden="true" />
         <component :is="titleSlotComp" v-if="titleSlot" />
         <span v-else-if="titleParts"
           >{{ titleParts.before }}<span class="tree-highlight">{{ titleParts.match }}</span

code/fms/fms-vue/src/components/ui/tree/utils.js

@@ -7,6 +7,7 @@ export function resolveFieldNames(fieldNames) {
     key: 'key',
     title: 'title',
     children: 'children',
+    icon: 'icon',
     ...fieldNames,
   }
 }