feat(notebook): redesign ai-writing header to space-info-only glass pill

移除品牌"索财笔记"与右侧"这是我的笔记"标签,header 只保留空间信息;
空间徽章重做成玻璃胶囊(渐变图标徽标 + 已连接状态点),高度 44→52px,
顶部加品牌高光线与 hover 微光,延续索财深蓝品牌色阶。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
xuhdandClaude Opus 4.8 committed 2026-06-10 17:06:21 +08:00
1 parent 6b9e1f3c2a
commit 4bf4b96fa9
1 file changed
+30 -22
@@ -57,37 +57,45 @@ export default function NotebookAIWritingPage() {
return (
<div className="h-full flex flex-col overflow-hidden">
{/* 索财笔记 Header */}
<div className="flex items-center gap-3 px-5 h-11 shrink-0 bg-gradient-to-r from-[#1e3a5f] to-[#1a3255] border-b border-[#2a4a70]">
{/* 品牌 */}
<div className="flex items-center gap-2">
<div className="w-6 h-6 rounded-md bg-blue-500 flex items-center justify-center text-white text-xs font-bold shrink-0">
索
</div>
<span className="text-[#e0f0ff] text-sm font-semibold tracking-wide">索财笔记</span>
</div>
{/* 索财笔记 Header —— 只承载空间信息(品牌 / 右侧标签已移除) */}
<div className="relative flex items-center gap-3 px-5 h-[52px] shrink-0 bg-gradient-to-r from-[#1e3a5f] to-[#1a3255] border-b border-[#2a4a70]">
{/* 顶部极细品牌高光线 */}
<div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#7fb3e8]/55 to-transparent" />
{/* 分隔线 */}
<div className="w-px h-4 bg-[#2d4f7a]" />
{/* 空间名称 */}
{/* 空间信息:精致玻璃胶囊 */}
{data?.search_space_id && (
<div className="flex items-center gap-1.5">
<span className="text-[#7fb3e8] text-xs">空间</span>
<span className="text-[#b3d4f5] text-xs font-semibold bg-[#1a3a60] border border-[#2d5080] rounded px-2 py-0.5">
<div
className="inline-flex h-7 items-center gap-2 rounded-full border border-[#7fb3e8]/30 bg-gradient-to-b from-[#2d5080]/55 to-[#1a3a60]/55 pl-2 pr-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_1px_2px_rgba(0,0,0,0.18)] backdrop-blur-sm transition-all hover:border-[#7fb3e8]/55 hover:-translate-y-px hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_2px_10px_-2px_rgba(59,130,246,0.45)]"
title={`当前空间:${spaceName ?? data.search_space_id}`}
>
{/* 图标徽标 */}
<span className="flex size-[18px] items-center justify-center rounded-[5px] bg-gradient-to-br from-[#3b82f6] to-[#1d4ed8] shadow-[0_0_0_1px_rgba(127,179,232,0.25),0_2px_6px_-1px_rgba(29,78,216,0.6)]">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="size-[11px] text-[#e0f0ff]"
>
<polygon points="12 2 2 7 12 12 22 7 12 2" />
<polyline points="2 17 12 22 22 17" />
<polyline points="2 12 12 17 22 12" />
</svg>
</span>
<span className="text-[11px] font-medium tracking-wide text-[#7fb3e8]">空间</span>
<span className="h-3 w-px bg-[#7fb3e8]/25" />
<span className="max-w-[200px] truncate text-[12.5px] font-semibold text-[#d6e8fb]">
{spaceName ?? data.search_space_id}
</span>
{/* 已连接状态点 */}
<span className="size-1.5 shrink-0 rounded-full bg-[#4ade80] shadow-[0_0_0_2px_rgba(74,222,128,0.18)]" />
</div>
)}
{/* 弹性占位 */}
<div className="flex-1" />
{/* 笔记标签 */}
<div className="flex items-center gap-1.5 bg-[#0f2840] border border-[#2a4a70] rounded-md px-2.5 py-1">
<span className="text-xs">📒</span>
<span className="text-[#bfdbfe] text-xs">这是我的笔记</span>
</div>
</div>
{/* 主体 */}