style: refine ITTO sticky highlight bar

src/pages/IttoCollectionsPage.tsx

@@ -160,7 +160,6 @@ 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>
@@ -190,19 +189,43 @@ export function IttoCollectionsPage() {
       </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">
+        <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-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"
+                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={14} />
+                <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>
+      )}
 
       <motion.div
         key={activeTab}