From 569d708833f1fad08650153d0e9a90a088fe9209 Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Mon, 27 Oct 2025 21:13:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=E4=B8=BA=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=AE=BD=E9=AB=98=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为 CuteHorizontalScrollBar 组件添加 width 属性以支持自定义宽度
- 为 CuteVerticalScrollBar 组件添加 height 属性以支持自定义高度
- 修改水平滚动条样式，更新滚动条滑块颜色及悬停效果
- 调整垂直滚动条样式，移除固定高度设置
- 更新组件模板以绑定动态样式属性
---
 .../dev/CuteHorizontalScrollBar.vue           | 29 ++++++++++++++-----
 .../components/dev/CuteVerticalScrollBar.vue  | 12 ++++++--
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/cutejava-front/src/views/components/dev/CuteHorizontalScrollBar.vue b/cutejava-front/src/views/components/dev/CuteHorizontalScrollBar.vue
index a54cbd67..bb052ffa 100644
--- a/cutejava-front/src/views/components/dev/CuteHorizontalScrollBar.vue
+++ b/cutejava-front/src/views/components/dev/CuteHorizontalScrollBar.vue
@@ -5,7 +5,7 @@
  * @created 2025-08-20
  -->
 <template>
-  <div class="overflow-panel">
+  <div class="overflow-panel" :style="{width: width}">
     <slot />
   </div>
 </template>
@@ -13,28 +13,43 @@
 <script>
 
 export default {
-  name: 'CuteHorizontalScrollBar'
+  name: 'CuteHorizontalScrollBar',
+  props: {
+    width: {
+      type: String,
+      required: true,
+      default: '1280px'
+    }
+  }
 }
 </script>
 
 <style scoped>
 .overflow-panel {
-  width: 1500px; /* 固定宽度 */
-  overflow-x: auto; /* 允许水平滚动 */
+  overflow-x: scroll; /* 允许水平滚动 */
   white-space: nowrap; /* 防止内容换行，使所有内容在一行显示 */
   padding: 30px 20px 30px 20px;
 }
 
+/* 滚动条宽度 */
 .overflow-panel::-webkit-scrollbar {
-  height: 5px; /* 设置水平滚动条高度 */
+  height: 5px;
 }
 
+/* 滚动条轨道 */
 .overflow-panel::-webkit-scrollbar-track {
-  background: #f1f1f1; /* 滚动条底色 */
+  background: #f1f1f1;
 }
 
+/* 滚动条滑块 */
 .overflow-panel::-webkit-scrollbar-thumb {
-  background: #DCDFE6; /* 滚动条颜色 */
+  background: #409EFF;
+  border-radius: 6px;
+}
+
+/* 鼠标悬停在滑块上时 */
+.overflow-panel::-webkit-scrollbar-thumb:hover {
+  background: #F56C6C;
 }
 </style>
 
diff --git a/cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue b/cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue
index 78ad0a9c..74a58290 100644
--- a/cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue
+++ b/cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue
@@ -5,7 +5,7 @@
  * @created 2025-08-20
  -->
 <template>
-  <div class="overflow-panel">
+  <div class="overflow-panel" :style="{height: height}">
     <slot />
   </div>
 </template>
@@ -13,13 +13,19 @@
 <script>
 
 export default {
-  name: 'CuteVerticalScrollBar'
+  name: 'CuteVerticalScrollBar',
+  props: {
+    height: {
+      type: String,
+      required: true,
+      default: '100px'
+    }
+  }
 }
 </script>
 
 <style scoped>
 .overflow-panel {
-  height: 800px;
   overflow-y: scroll;
 }