update:css样式拆分
This commit is contained in:
xiaozhu
@@ -32,80 +32,104 @@ export function Topbar({
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="topbar">
|
||||
<div className="page-title">
|
||||
<button className="icon-button icon-button--back" type="button">
|
||||
<header className="relative z-[2] flex h-[70px] min-h-[70px] items-center justify-between border-b border-[#dfe6ee] bg-white px-[22px]">
|
||||
<div className="flex items-center gap-[9px]">
|
||||
<button
|
||||
className="grid h-[31px] w-[31px] rotate-180 cursor-pointer place-items-center rounded-[7px] border border-transparent bg-white text-[#7b8999] hover:border-[#b9c9da] hover:bg-[#f7faff]"
|
||||
type="button"
|
||||
>
|
||||
<Icon name="chevron" size={19} />
|
||||
</button>
|
||||
<div>
|
||||
<span className="page-title__eyebrow">开发工作区</span>
|
||||
<h1>{pageTitles[activePage] || "工作台"}</h1>
|
||||
<span className="text-[10px] font-[650] uppercase tracking-[0.08em] text-[#94a2b3]">
|
||||
开发工作区
|
||||
</span>
|
||||
<h1 className="m-0 mt-px text-[18px] leading-[1.1] text-[#14243a]">
|
||||
{pageTitles[activePage] || "工作台"}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="topbar__actions">
|
||||
<div className="api-state">
|
||||
<span className={`api-state__dot${apiOnline ? " is-online" : ""}`} />
|
||||
<div className="flex items-center gap-[14px]">
|
||||
<div className="flex items-center gap-[7px] text-xs text-[#768597] max-xl:hidden">
|
||||
<span
|
||||
className={`size-[7px] rounded-full ${
|
||||
apiOnline
|
||||
? "bg-[#19b878] shadow-[0_0_0_3px_rgb(25_184_120_/_11%)]"
|
||||
: "bg-[#d05151] shadow-[0_0_0_3px_rgb(208_81_81_/_10%)]"
|
||||
}`}
|
||||
/>
|
||||
{apiOnline ? "服务已连接" : "服务未连接"}
|
||||
</div>
|
||||
<div className="topbar-menu-wrap">
|
||||
<div className="relative flex items-center gap-[9px]">
|
||||
<button
|
||||
className="workspace-switcher"
|
||||
className="flex h-[46px] cursor-pointer items-center gap-[9px] rounded-lg border border-[#e0e7ee] bg-white px-[11px] hover:border-[#b9cce0]"
|
||||
type="button"
|
||||
onClick={() => onSetWorkspaceMenuOpen(!workspaceMenuOpen)}
|
||||
>
|
||||
<span className="workspace-switcher__icon">
|
||||
<span className="grid size-[30px] place-items-center rounded-[7px] bg-gradient-to-br from-[#23aa73] to-[#158d5d] text-white">
|
||||
<Icon name="workspace" size={18} />
|
||||
</span>
|
||||
<span>
|
||||
<small>当前 Workspace</small>
|
||||
<strong>{currentWorkspace.workspace_name}</strong>
|
||||
<span className="flex min-w-[155px] max-xl:min-w-[130px] flex-col items-start">
|
||||
<small className="text-[10px] text-[#97a3b1]">当前 Workspace</small>
|
||||
<strong className="max-w-[190px] truncate text-[13px] text-[#26384d]">
|
||||
{currentWorkspace.workspace_name}
|
||||
</strong>
|
||||
</span>
|
||||
<Icon name="chevron" size={15} />
|
||||
</button>
|
||||
{workspaceMenuOpen && (
|
||||
<div className="topbar-dropdown">
|
||||
{workspaces.map((workspace) => (
|
||||
<button
|
||||
className={
|
||||
workspace.workspace_id === currentWorkspace.workspace_id
|
||||
? "is-selected"
|
||||
: ""
|
||||
}
|
||||
type="button"
|
||||
key={workspace.workspace_id}
|
||||
onClick={() => {
|
||||
onSetCurrentWorkspace(workspace.workspace_id);
|
||||
onSetWorkspaceMenuOpen(false);
|
||||
}}
|
||||
>
|
||||
<Icon name="workspace" size={15} />
|
||||
<span>
|
||||
<strong>{workspace.workspace_name}</strong>
|
||||
<small>
|
||||
{workspace.workspace_id === currentWorkspace.workspace_id
|
||||
? "当前使用"
|
||||
: "点击切换"}
|
||||
</small>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
<div className="absolute top-[calc(100%+7px)] right-0 z-50 w-[260px] rounded-lg border border-[#dce5ed] bg-white p-1.5 shadow-[0_14px_38px_rgb(17_43_70_/_18%)]">
|
||||
{workspaces.map((workspace) => {
|
||||
const isSelected =
|
||||
workspace.workspace_id === currentWorkspace.workspace_id;
|
||||
return (
|
||||
<button
|
||||
className={`flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 px-2.5 py-2 text-left text-[#40576d] ${
|
||||
isSelected
|
||||
? "bg-brand-soft"
|
||||
: "bg-transparent hover:bg-brand-soft"
|
||||
}`}
|
||||
type="button"
|
||||
key={workspace.workspace_id}
|
||||
onClick={() => {
|
||||
onSetCurrentWorkspace(workspace.workspace_id);
|
||||
onSetWorkspaceMenuOpen(false);
|
||||
}}
|
||||
>
|
||||
<Icon name="workspace" size={15} />
|
||||
<span className="flex min-w-0 flex-col gap-0.5">
|
||||
<strong className="truncate text-[11px] text-[#243a50]">
|
||||
{workspace.workspace_name}
|
||||
</strong>
|
||||
<small className="text-[9px] text-[#8797a7]">
|
||||
{isSelected ? "当前使用" : "点击切换"}
|
||||
</small>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="topbar-menu-wrap">
|
||||
<button className="user-menu" type="button">
|
||||
<span className="avatar">
|
||||
<div className="relative flex items-center gap-[9px]">
|
||||
<button
|
||||
className="flex h-[46px] cursor-pointer items-center gap-[9px] rounded-lg border border-transparent bg-white px-[11px] hover:border-[#b9cce0]"
|
||||
type="button"
|
||||
>
|
||||
<span className="grid size-[34px] place-items-center rounded-full bg-gradient-to-br from-[#3b92ed] to-[#1869c9] text-sm font-bold text-white">
|
||||
{user?.display_name?.slice(0, 1) ?? "?"}
|
||||
</span>
|
||||
<span className="user-menu__copy">
|
||||
<strong>{user?.display_name ?? "未知用户"}</strong>
|
||||
<small>
|
||||
<span className="flex min-w-[50px] flex-col items-start">
|
||||
<strong className="max-w-[190px] truncate text-[13px] text-[#26384d]">
|
||||
{user?.display_name ?? "未知用户"}
|
||||
</strong>
|
||||
<small className="text-[10px] text-[#97a3b1]">
|
||||
{user?.role_code === "admin" ? "管理员" : "开发人员"}
|
||||
</small>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className="text-button"
|
||||
className="inline-flex cursor-pointer items-center gap-0.5 border-0 bg-transparent px-px py-[5px] text-xs font-semibold text-[#1474d4] hover:text-[#0d58a2]"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
void onLogout();
|
||||
|
||||
Reference in New Issue
Block a user