feat(components):为滚动条组件添加自定义宽高支持

- 为 CuteHorizontalScrollBar 组件添加 width 属性以支持自定义宽度
- 为 CuteVerticalScrollBar 组件添加 height 属性以支持自定义高度
- 修改水平滚动条样式，更新滚动条滑块颜色及悬停效果
- 调整垂直滚动条样式，移除固定高度设置
- 更新组件模板以绑定动态样式属性

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: scroll; /* 允许水平滚动 */
-  overflow-x: auto; /* 允许水平滚动 */
   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>
 

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