20260807230157

code/fms/fms-vue/src/layouts/components/AppSidebar.vue

@@ -454,8 +454,8 @@ onMounted(() => {
     color: #3f3f46;
     font-weight: 500;
     box-shadow:
-      0 1px 3px rgb(0 0 0 / 4%),
-      0 2px 4px rgb(0 0 0 / 3%);
+      0 1px 2px rgb(0 0 0 / 2%),
+      0 1px 1px rgb(0 0 0 / 1%);
   }
 
   &.collapsed {

code/fms/fms-vue/src/layouts/components/AppTabs.vue

@@ -149,6 +149,20 @@ function handleTabKeydown(event, index) {
   focusAdjacentTab(index, event.key === "ArrowLeft" ? -1 : 1);
 }
 
+function handleWheel(event) {
+  const track = trackRef.value;
+  if (!track || track.scrollWidth <= track.clientWidth) return;
+  const delta =
+    Math.abs(event.deltaY) >= Math.abs(event.deltaX) ? event.deltaY : event.deltaX;
+  if (!delta) return;
+  event.preventDefault();
+  track.scrollLeft += delta;
+}
+
+function refreshTab(key) {
+  appStore.refreshRoute(key);
+}
+
 </script>
 
 <template>
@@ -166,12 +180,12 @@ function handleTabKeydown(event, index) {
     </button>
 
     <!-- 标签轨道 -->
-    <div ref="trackRef" class="tab-track" role="tablist" @scroll.passive="updateScrollState">
+    <div ref="trackRef" class="tab-track" role="tablist" @scroll.passive="updateScrollState" @wheel="handleWheel">
       <div
         v-for="(item, index) in tabItems"
         :key="item.key"
         class="tab-item"
-        :class="{ 'tab-item--active': item.key === activeTab }"
+        :class="{ 'tab-item--active': item.key === activeTab, 'tab-item--closable': item.closable }"
       >
         <button
           type="button"
@@ -182,6 +196,7 @@ function handleTabKeydown(event, index) {
           :tabindex="item.key === activeTab ? 0 : -1"
           @click="changeTab(item.key)"
           @keydown="handleTabKeydown($event, index)"
+          @dblclick.prevent="refreshTab(item.key)"
         >
           <span>{{ getDisplayTabLabel(item) }}</span>
         </button>
@@ -274,8 +289,9 @@ function handleTabKeydown(event, index) {
   }
 }
 
-/* ---- 标签项（应用 tab 药丸式） ---- */
+/* ---- 标签项（浅灰高亮，与侧栏选中语言统一） ---- */
 .tab-item {
+  position: relative;
   display: flex;
   flex: none;
   min-width: 72px;
@@ -283,32 +299,34 @@ function handleTabKeydown(event, index) {
   align-items: center;
   overflow: hidden;
   border-radius: 8px;
-  background: transparent;
+  background: #f4f4f5;
   color: #71717a;
   transition:
     background-color 0.15s ease,
     color 0.15s ease;
 
-  background: #f4f4f5;
-
   &:hover {
-    background: #ebebeb;
+    background: #f4f4f5;
     color: #3f3f46;
   }
 
-  /* 选中态：实心深色药丸，应用 tab 的醒目语言 */
+  /* 选中态：纯白凸起药丸（inset 描边 + 轻投影，边缘利落不脏）；关闭 X 作为会话标签的强区分信号 */
   &--active {
-    color: #ffffff;
+    color: #27272a;
     font-weight: 500;
-    background: #18181b;
+    background: #ffffff;
+    box-shadow:
+      inset 0 0 0 1px #e4e4e7,
+      0 1px 2px rgb(0 0 0 / 6%),
+      0 1px 1px rgb(0 0 0 / 4%);
 
     &:hover {
-      background: #27272a;
-      color: #ffffff;
+      background: #ffffff;
+      color: #27272a;
     }
 
     .tab-item__close:hover {
-      background: rgb(255 255 255 / 12%);
+      background: rgb(0 0 0 / 8%);
     }
   }
 
@@ -330,6 +348,7 @@ function handleTabKeydown(event, index) {
     padding: 0 8px;
     font-size: 13px;
     overflow: hidden;
+    transition: padding-right 0.15s ease;
 
     span {
       white-space: nowrap;
@@ -338,16 +357,30 @@ function handleTabKeydown(event, index) {
     }
   }
 
+  /* 仅可关闭标签预留右侧 X 空间；不可关闭（如工作台）保持对称居中 */
+  &--closable &__select {
+    padding-right: 24px;
+  }
+
   &__close {
+    position: absolute;
+    top: 0;
+    right: 2px;
+    bottom: 0;
     display: grid;
     flex: none;
     width: 22px;
     padding: 0;
     place-items: center;
     border-radius: 4px;
+    color: #a1a1aa;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
 
     &:hover {
       background: rgb(0 0 0 / 8%);
+      color: #71717a;
     }
 
     .lucide {

code/fms/fms-vue/src/layouts/components/SidebarMenuItem.vue

@@ -89,7 +89,9 @@ function handleClick() {
   background: #f4f4f5;
   color: #3f3f46;
   font-weight: 500;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 4%), 0 2px 4px rgb(0 0 0 / 3%);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 2%),
+    0 1px 1px rgb(0 0 0 / 1%);
 }
 
 /* ---- 可展开的父级按钮 ---- */