From 50d2dc579a5f1eb2eb361c4de238b405e48cb3aa Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Wed, 24 Jun 2026 10:43:08 +0800
Subject: [PATCH] =?UTF-8?q?style(web):=20=E5=BE=AE=E8=B0=83=20AI=20?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8F=B0=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/personal-workbench-ai-mode.css | 50 +++++++++++++++++--
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/web/src/assets/styles/components/personal-workbench-ai-mode.css b/web/src/assets/styles/components/personal-workbench-ai-mode.css
index 38a39f7..21c6696 100644
--- a/web/src/assets/styles/components/personal-workbench-ai-mode.css
+++ b/web/src/assets/styles/components/personal-workbench-ai-mode.css
@@ -456,20 +456,39 @@
 .workbench-ai-file-strip {
   width: min(980px, 100%);
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 2px 2px 8px;
   color: var(--ai-muted);
   font-size: 13px;
   font-weight: 700;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.7) transparent;
   animation: workbenchAiControlIn 480ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) backwards;
   animation-delay: 340ms;
 }
 
+.workbench-ai-file-strip::-webkit-scrollbar {
+  height: 8px;
+}
+
+.workbench-ai-file-strip::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.workbench-ai-file-strip::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.64);
+}
+
 .workbench-ai-file-card {
-  flex: 0 1 312px;
+  flex: 0 0 312px;
   min-width: 238px;
+  max-width: 312px;
   min-height: 64px;
   display: grid;
   grid-template-columns: 48px minmax(0, 1fr) 30px;
@@ -483,6 +502,22 @@
   box-shadow:
     0 10px 28px rgba(15, 23, 42, 0.06),
     inset 0 1px 0 rgba(255, 255, 255, 0.94);
+  cursor: pointer;
+  outline: none;
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+}
+
+.workbench-ai-file-card:hover,
+.workbench-ai-file-card:focus-visible {
+  border-color: rgba(47, 124, 255, 0.42);
+  box-shadow:
+    0 12px 30px rgba(15, 23, 42, 0.09),
+    0 0 0 3px rgba(47, 124, 255, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.94);
+  transform: translateY(-1px);
 }
 
 .workbench-ai-file-card__icon {
@@ -795,7 +830,8 @@
   gap: 20px;
   margin: 0 auto;
   overflow-y: auto;
-  padding: 64px 4px 30px;
+  padding: 64px 4px 42px;
+  scroll-padding-bottom: 42px;
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
@@ -2319,7 +2355,7 @@
   z-index: 6;
   width: min(980px, 100%);
   display: grid;
-  gap: 10px;
+  gap: 14px;
   justify-self: center;
   padding-top: 10px;
 }
@@ -2614,6 +2650,11 @@
     font-size: 13px;
   }
 
+  .workbench-ai-file-card {
+    flex-basis: min(286px, calc(100vw - 48px));
+    max-width: min(286px, calc(100vw - 48px));
+  }
+
   .workbench-ai-action-row {
     grid-template-columns: 1fr;
   }
@@ -2647,6 +2688,7 @@
   .workbench-ai-date-popover {
     width: min(276px, calc(100vw - 36px));
   }
+
 }
 
 @media (prefers-reduced-motion: reduce) {