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

style: refine ITTO sticky highlight bar

Browse Source
This commit is contained in:
ittoview
2026-05-23 03:56:20 +01:00
parent 8a66eb50e1
commit 69dfdcc094
1 changed files with 64 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/pages/IttoCollectionsPage.tsx
View File

@@ -160,49 +160,72 @@ export function IttoCollectionsPage() {
return ( return (
<div className="space-y-4"> <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 className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <div>
<div> <h1 className="text-xl font-bold text-gray-900 dark:text-white">输入 · 工具 · 输出</h1>
<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>
<p className="text-sm text-gray-500 dark:text-gray-400">按知识领域与子过程汇总</p> </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">
<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) => {
{tabs.map((tab) => { const Icon = tab.icon
const Icon = tab.icon const isActive = activeTab === tab.key
const isActive = activeTab === tab.key return (
return ( <button
<button key={tab.key}
key={tab.key} type="button"
type="button" onClick={() => setActiveTab(tab.key)}
onClick={() => setActiveTab(tab.key)} className={`inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
className={`inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors ${ isActive
isActive ? 'bg-indigo-600 text-white shadow-sm'
? 'bg-indigo-600 text-white shadow-sm' : 'text-gray-600 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700'
: 'text-gray-600 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700' }`}
}`} >
> <Icon size={16} />
<Icon size={16} /> {tab.label}
{tab.label} </button>
</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>
</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 <motion.div
key={activeTab} key={activeTab}