From 69dfdcc09429d1b6fb30f7e8d763e07b12c54a9a Mon Sep 17 00:00:00 2001
From: ittoview <ittoview@example.com>
Date: Sat, 23 May 2026 03:56:20 +0100
Subject: [PATCH] style: refine ITTO sticky highlight bar

---
 src/pages/IttoCollectionsPage.tsx | 105 ++++++++++++++++++------------
 1 file changed, 64 insertions(+), 41 deletions(-)

diff --git a/src/pages/IttoCollectionsPage.tsx b/src/pages/IttoCollectionsPage.tsx
index 2755409..963b467 100644
--- a/src/pages/IttoCollectionsPage.tsx
+++ b/src/pages/IttoCollectionsPage.tsx
@@ -160,49 +160,72 @@ export function IttoCollectionsPage() {
 
   return (
     <div className="space-y-4">
-      <div className="space-y-3 sticky top-20 z-30 rounded-2xl bg-gray-50/95 pb-1 backdrop-blur dark:bg-gray-900/95">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div>
-            <h1 className="text-xl font-bold text-gray-900 dark:text-white">输入 · 工具 · 输出</h1>
-            <p className="text-sm text-gray-500 dark:text-gray-400">按知识领域与子过程汇总</p>
-          </div>
-          <div className="inline-flex rounded-xl bg-white p-1 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
-            {tabs.map((tab) => {
-              const Icon = tab.icon
-              const isActive = activeTab === tab.key
-              return (
-                <button
-                  key={tab.key}
-                  type="button"
-                  onClick={() => setActiveTab(tab.key)}
-                  className={`inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
-                    isActive
-                      ? 'bg-indigo-600 text-white shadow-sm'
-                      : 'text-gray-600 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700'
-                  }`}
-                >
-                  <Icon size={16} />
-                  {tab.label}
-                </button>
-              )
-            })}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-xl font-bold text-gray-900 dark:text-white">输入 · 工具 · 输出</h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400">按知识领域与子过程汇总</p>
+        </div>
+        <div className="inline-flex rounded-xl bg-white p-1 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
+          {tabs.map((tab) => {
+            const Icon = tab.icon
+            const isActive = activeTab === tab.key
+            return (
+              <button
+                key={tab.key}
+                type="button"
+                onClick={() => setActiveTab(tab.key)}
+                className={`inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
+                  isActive
+                    ? 'bg-indigo-600 text-white shadow-sm'
+                    : 'text-gray-600 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700'
+                }`}
+              >
+                <Icon size={16} />
+                {tab.label}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      {selectedText && (
+        <div className="sticky top-16 z-20 -mx-1 rounded-xl border border-yellow-200/80 bg-white/90 px-3 py-2 shadow-sm backdrop-blur dark:border-yellow-500/25 dark:bg-gray-900/90">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <div className="flex items-center gap-2 rounded-lg bg-yellow-50 px-3 py-1.5 text-sm text-yellow-900 dark:bg-yellow-500/10 dark:text-yellow-100">
+              <span className="font-medium">标签：{selectedText}</span>
+              <button
+                type="button"
+                onClick={() => setSelectedText(null)}
+                className="inline-flex h-5 w-5 items-center justify-center rounded-full text-yellow-700 transition-colors hover:bg-yellow-100 hover:text-yellow-900 dark:text-yellow-200 dark:hover:bg-yellow-500/20"
+                aria-label="清除标签"
+              >
+                <X size={13} />
+              </button>
+            </div>
+            <div className="inline-flex rounded-lg bg-gray-100 p-0.5 dark:bg-gray-800">
+              {tabs.map((tab) => {
+                const Icon = tab.icon
+                const isActive = activeTab === tab.key
+                return (
+                  <button
+                    key={tab.key}
+                    type="button"
+                    onClick={() => setActiveTab(tab.key)}
+                    className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
+                      isActive
+                        ? 'bg-indigo-600 text-white shadow-sm'
+                        : 'text-gray-600 hover:bg-white dark:text-gray-300 dark:hover:bg-gray-700'
+                    }`}
+                  >
+                    <Icon size={14} />
+                    {tab.label}
+                  </button>
+                )
+              })}
+            </div>
           </div>
         </div>
-
-        {selectedText && (
-          <div className="flex flex-wrap items-center gap-2 rounded-xl bg-yellow-50 px-4 py-3 text-sm text-yellow-900 ring-1 ring-yellow-200 dark:bg-yellow-500/10 dark:text-yellow-100 dark:ring-yellow-500/30">
-            <span className="font-medium">标签：{selectedText}</span>
-            <button
-              type="button"
-              onClick={() => setSelectedText(null)}
-              className="inline-flex h-6 w-6 items-center justify-center rounded-full text-yellow-700 transition-colors hover:bg-yellow-100 hover:text-yellow-900 dark:text-yellow-200 dark:hover:bg-yellow-500/20"
-              aria-label="清除标签"
-            >
-              <X size={14} />
-            </button>
-          </div>
-        )}
-      </div>
+      )}
 
       <motion.div
         key={activeTab}