From be90a46cb40fdc7ed2769c50c581cc9eb40b570b Mon Sep 17 00:00:00 2001
From: 666ghj <670939375@qq.com>
Date: Sun, 14 Dec 2025 03:43:40 +0800
Subject: [PATCH] Add custom scrollbar styles for left and right panels in
 Step4Report component

- Introduced custom scrollbar styles for both left and right panels to enhance the visual appearance and user experience.
- Adjusted scrollbar width, track background, and thumb colors for improved aesthetics and usability.
---
 frontend/src/components/Step4Report.vue | 34 +++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/frontend/src/components/Step4Report.vue b/frontend/src/components/Step4Report.vue
index 5f2666e..31347d5 100644
--- a/frontend/src/components/Step4Report.vue
+++ b/frontend/src/components/Step4Report.vue
@@ -1196,6 +1196,23 @@ watch(() => props.reportId, (newId) => {
   flex-direction: column;
 }
 
+.left-panel::-webkit-scrollbar {
+  width: 4px;
+}
+
+.left-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.left-panel::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+}
+
+.left-panel::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.25);
+}
+
 .outline-overview {
   padding: 20px;
   border-bottom: 1px solid #F3F4F6;
@@ -1567,6 +1584,23 @@ watch(() => props.reportId, (newId) => {
   flex-direction: column;
 }
 
+.right-panel::-webkit-scrollbar {
+  width: 4px;
+}
+
+.right-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.right-panel::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
+}
+
+.right-panel::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
 /* Workflow Timeline */
 .workflow-timeline {
   padding: 20px;