From 8a66eb50e187372c487b1201c3fbd7ef93872909 Mon Sep 17 00:00:00 2001
From: ittoview <ittoview@example.com>
Date: Sat, 23 May 2026 03:47:58 +0100
Subject: [PATCH] feat: keep ITTO highlight controls sticky

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

diff --git a/src/pages/IttoCollectionsPage.tsx b/src/pages/IttoCollectionsPage.tsx
index dea4845..2755409 100644
--- a/src/pages/IttoCollectionsPage.tsx
+++ b/src/pages/IttoCollectionsPage.tsx
@@ -160,47 +160,49 @@ export function IttoCollectionsPage() {
 
   return (
     <div className="space-y-4">
-      <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 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>
         </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="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>
-      )}
+        {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}