shiyue/ittoview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: keep ITTO highlight controls sticky

Browse Source
This commit is contained in:
ittoview
2026-05-23 03:47:58 +01:00
parent d3ae9697ef
commit 8a66eb50e1
1 changed files with 41 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/pages/IttoCollectionsPage.tsx
View File

@@ -160,47 +160,49 @@ export function IttoCollectionsPage() {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <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> <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<h1 className="text-xl font-bold text-gray-900 dark:text-white">输入 · 工具 · 输出</h1> <div>
<p className="text-sm text-gray-500 dark:text-gray-400">按知识领域与子过程汇总</p> <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>
<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 && ( {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="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> <span className="font-medium">标签：{selectedText}</span>
<button <button
type="button" type="button"
onClick={() => setSelectedText(null)} 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-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="清除标签" aria-label="清除标签"
> >
<X size={14} /> <X size={14} />
</button> </button>
</div> </div>
)} )}
</div>
<motion.div <motion.div
key={activeTab} key={activeTab}