feat(frontend): 不带 sidebar 的聊天页顶栏右侧也展示名称+岗位
紧凑布局(无全局 Header)下复用 UserIdentityBadge,数据源与全量模式 Header 一致,仅在 !compactChrome 时渲染,避免与全局顶栏重复。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
392394b4c9
commit
54fff09e74
2 files changed
+66
No files matched your search
@@ -0,0 +1,54 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { User } from "lucide-react";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
|
||||||
|
import { getStoredAuth } from "@/core/auth";
|
||||||
|
import { useMyPosition } from "@/core/positions";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { readUserInfo } from "@/strategy-components/lib/light-app";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 名称 + 岗位 用户标识。全量模式由 strategy-components/Header.tsx 顶栏右侧展示;
|
||||||
|
* 紧凑模式(不带全局顶栏)无处承载,故抽成共享组件,复用同一套数据来源
|
||||||
|
* (`readUserInfo().userName` 优先、回退 auth 邮箱前缀;岗位取 `useMyPosition`),
|
||||||
|
* 供页面级顶栏(如 ChatPage)右侧复用,保证两套布局一致。
|
||||||
|
*
|
||||||
|
* 配色按当前内容区前景色(foreground / muted-foreground),适配聊天页浅底顶栏,
|
||||||
|
* 而非 Header 的白字贴 banner 方案。
|
||||||
|
*/
|
||||||
|
export function UserIdentityBadge({ className }: { className?: string }) {
|
||||||
|
const auth = getStoredAuth();
|
||||||
|
const { data: myPosition } = useMyPosition();
|
||||||
|
const positionName = myPosition?.name?.trim() || "";
|
||||||
|
|
||||||
|
// 与 Header.tsx 一致:外部登录写入的真实用户名优先,缺省回退邮箱前缀。
|
||||||
|
const displayName = useMemo(() => {
|
||||||
|
const info = readUserInfo();
|
||||||
|
const name = typeof info.userName === "string" ? info.userName.trim() : "";
|
||||||
|
if (name) return name;
|
||||||
|
const email = auth?.email?.trim();
|
||||||
|
return email ? email.split("@")[0] : "用户";
|
||||||
|
}, [auth?.email]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn("flex shrink-0 items-center gap-2", className)}
|
||||||
|
title={positionName ? `${displayName}·${positionName}` : displayName}
|
||||||
|
>
|
||||||
|
<div className="bg-muted text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full">
|
||||||
|
<User className="size-3.5" />
|
||||||
|
</div>
|
||||||
|
<div className="hidden min-w-0 text-left sm:block">
|
||||||
|
<p className="text-foreground truncate text-sm font-medium leading-tight">
|
||||||
|
{displayName}
|
||||||
|
</p>
|
||||||
|
{positionName && (
|
||||||
|
<p className="text-muted-foreground truncate text-[11px] leading-tight">
|
||||||
|
{positionName}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -27,6 +27,7 @@ import { QuestionNavigator } from "@/components/workspace/question-navigator";
|
|||||||
import { ThreadTitle } from "@/components/workspace/thread-title";
|
import { ThreadTitle } from "@/components/workspace/thread-title";
|
||||||
import { TodoList } from "@/components/workspace/todo-list";
|
import { TodoList } from "@/components/workspace/todo-list";
|
||||||
import { TokenUsageIndicator } from "@/components/workspace/token-usage-indicator";
|
import { TokenUsageIndicator } from "@/components/workspace/token-usage-indicator";
|
||||||
|
import { UserIdentityBadge } from "@/components/workspace/user-identity-badge";
|
||||||
import { Welcome } from "@/components/workspace/welcome";
|
import { Welcome } from "@/components/workspace/welcome";
|
||||||
import { CompactWelcome } from "@/components/workspace/compact-welcome";
|
import { CompactWelcome } from "@/components/workspace/compact-welcome";
|
||||||
import { readSidebarEnabled } from "@/core/page-layout/sidebar-enabled";
|
import { readSidebarEnabled } from "@/core/page-layout/sidebar-enabled";
|
||||||
@@ -481,6 +482,17 @@ export default function ChatPage() {
|
|||||||
<ExportTrigger threadId={threadId} />
|
<ExportTrigger threadId={threadId} />
|
||||||
<KnowledgeSaveTrigger threadId={threadId} />
|
<KnowledgeSaveTrigger threadId={threadId} />
|
||||||
<ArtifactTrigger />
|
<ArtifactTrigger />
|
||||||
|
{/* 不带全局顶栏(紧凑模式)时,名称+岗位回落到聊天页顶栏右侧,
|
||||||
|
与全量模式 Header 右上角保持一致。全量模式已有顶栏则不重复展示。 */}
|
||||||
|
{!compactChrome && (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="bg-border/70 mx-1 h-6 w-px shrink-0"
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
<UserIdentityBadge />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main className="flex min-h-0 max-w-full grow flex-col">
|
<main className="flex min-h-0 max-w-full grow flex-col">
|
||||||
|
|||||||
Reference in new issue
Block a user