update

docker-compose.yml

@@ -5,7 +5,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: tradus-web:1.3.22
+    image: tradus-web:1.3.23
     container_name: tradus-web
     ports:
       - '6000:80'

src/App.vue

@@ -427,11 +427,43 @@ onMounted(() => {
     fetchUserInfo() // 应用初始化时获取用户信息
     startUserInfoRefresh() // 开始定期刷新
   }
+
+  // 添加全局滚动监听，用于滚动条显示
+  let scrollTimer: number | undefined
+  const handleScroll = (e: Event) => {
+    const target = e.target as HTMLElement
+    if (target) {
+      target.classList.add('scrolling')
+      clearTimeout(scrollTimer)
+      scrollTimer = window.setTimeout(() => {
+        target.classList.remove('scrolling')
+      }, 1000)
+    }
+  }
+
+  // 为所有可滚动元素添加滚动监听
+  document.addEventListener('scroll', handleScroll, true)
+
+  // 清理函数
+  const cleanup = () => {
+    document.removeEventListener('scroll', handleScroll, true)
+    clearTimeout(scrollTimer)
+  }
+
+  // 保存清理函数到全局
+  ;(globalThis as typeof globalThis & { __scrollCleanup?: () => void }).__scrollCleanup = cleanup
 })
 
 onUnmounted(() => {
   document.removeEventListener('click', closeMenus)
   stopUserInfoRefresh() // 组件卸载时停止定时刷新
+
+  // 清理滚动监听
+  const cleanup = (globalThis as typeof globalThis & { __scrollCleanup?: () => void })
+    .__scrollCleanup
+  if (cleanup) {
+    cleanup()
+  }
 })
 </script>
 
@@ -2002,33 +2034,57 @@ body {
 
 /* 全局滚动条样式 */
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
-  height: 8px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
   background: transparent;
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--color-border);
+  background-color: transparent;
-  border-radius: 4px;
+  border-radius: 3px;
-  transition: all 0.2s ease;
+  transition: background-color 0.3s ease;
 }
 
-::-webkit-scrollbar-thumb:hover {
+/* 只在滚动时显示滚动条 */
-  background-color: var(--color-accent);
+::-webkit-scrollbar-thumb:hover,
+*:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+/* 深色主题下的滚动条 */
+[data-theme='dark'] ::-webkit-scrollbar-thumb:hover,
+[data-theme='dark'] *:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.3);
 }
 
 /* Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--color-border) transparent;
+  scrollbar-color: transparent transparent;
 }
 
 *:hover {
-  scrollbar-color: var(--color-accent) transparent;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+/* Firefox 深色主题 */
+[data-theme='dark'] *:hover {
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+/* 滚动时显示滚动条 */
+*::-webkit-scrollbar-thumb:active,
+.scrolling::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+[data-theme='dark'] *::-webkit-scrollbar-thumb:active,
+[data-theme='dark'] .scrolling::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.4) !important;
 }
 
 /* 确保滚动行为平滑 */