Header.tsx
7.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Search, Settings } from 'lucide-react';
import { Input } from '../ui/input';
import { Button } from '../ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
import { useAuth } from '../auth/AuthProvider';
import { displayNameFromUser, displayRolesFromCodes } from '../../lib/currentUserDisplay';
import { formatRelativeSince } from '../../lib/relativeSince';
import type { CurrentUserMenuNodeDto } from '../../types/authSession';
import {
buildGlobalMenuSearchItems,
filterGlobalMenuSearchItems,
} from '../../lib/globalMenuSearch';
import { cn } from '../ui/utils';
interface HeaderProps {
title: string;
menus?: CurrentUserMenuNodeDto[];
/** 选中搜索结果后跳转（与侧栏 setCurrentView 一致） */
onNavigate?: (view: string) => void;
/** 右上角设置：默认跳转 Support，与侧栏一致 */
onSettingsClick?: () => void;
/** 点击右上角姓名/角色区域：进入当前用户编辑（由 Layout/App 处理路由） */
onProfileClick?: () => void;
}
export function Header({ title, menus, onNavigate, onSettingsClick, onProfileClick }: HeaderProps) {
const auth = useAuth();
const displayName = displayNameFromUser(auth.user);
/** 第一行：姓名；第二行：接口返回的人类可读角色（如 Partner Admin） */
const primaryName = auth.roleDisplay
? (auth.user?.fullName ?? '').trim() ||
(auth.user?.nick ?? auth.user?.userName ?? '').trim() ||
displayName
: displayName;
const roleLine = auth.roleDisplay ?? displayRolesFromCodes(auth.roleCodes);
const initials = primaryName
.split(/\s+/)
.filter(Boolean)
.slice(0, 2)
.map((w) => w[0]?.toUpperCase() ?? '')
.join('') || 'U';
const currentDate = new Date().toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
const searchItems = useMemo(() => buildGlobalMenuSearchItems(menus), [menus]);
const [searchQuery, setSearchQuery] = useState('');
const [searchOpen, setSearchOpen] = useState(false);
const [activeIndex, setActiveIndex] = useState(0);
const searchWrapRef = useRef<HTMLDivElement>(null);
const searchResults = useMemo(
() => filterGlobalMenuSearchItems(searchItems, searchQuery),
[searchItems, searchQuery],
);
const showResults = searchOpen && searchQuery.trim().length > 0 && searchResults.length > 0;
useEffect(() => {
setActiveIndex(0);
}, [searchQuery, searchResults.length]);
useEffect(() => {
if (!searchOpen) return;
const onDocDown = (e: MouseEvent) => {
if (!searchWrapRef.current?.contains(e.target as Node)) {
setSearchOpen(false);
}
};
document.addEventListener('mousedown', onDocDown);
return () => document.removeEventListener('mousedown', onDocDown);
}, [searchOpen]);
const pickResult = (viewKey: string) => {
onNavigate?.(viewKey);
setSearchQuery('');
setSearchOpen(false);
};
const onSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (!searchResults.length) {
if (e.key === 'Escape') setSearchOpen(false);
return;
}
if (e.key === 'ArrowDown') {
e.preventDefault();
setActiveIndex((i) => (i + 1) % searchResults.length);
return;
}
if (e.key === 'ArrowUp') {
e.preventDefault();
setActiveIndex((i) => (i - 1 + searchResults.length) % searchResults.length);
return;
}
if (e.key === 'Enter') {
e.preventDefault();
const item = searchResults[activeIndex];
if (item) pickResult(item.viewKey);
return;
}
if (e.key === 'Escape') {
setSearchOpen(false);
}
};
return (
<header className="bg-white border-b border-gray-200 px-8 flex items-center justify-between shadow-sm sticky top-0 z-10 shrink-0" style={{ height: 90 }}>
<div>
<h1 className="text-2xl font-bold" style={{ color: 'rgb(43, 50, 143)' }}>{title} Overview</h1>
<p className="text-sm text-gray-500 mt-1 flex items-center gap-2">
{currentDate} | Last updated:{' '}
{auth.loading && !auth.user?.lastUpdated
? '…'
: formatRelativeSince(auth.user?.lastUpdated ?? null)}
</p>
</div>
<div className="flex items-center gap-4">
<div ref={searchWrapRef} className="relative">
<div
className={cn(
'flex items-center w-64 h-9 rounded-md border border-gray-200 bg-gray-50 transition-colors overflow-hidden',
searchOpen && 'bg-white ring-2 ring-ring/50 border-ring',
)}
>
<Search className="h-4 w-4 text-gray-400 shrink-0 ml-3 pointer-events-none" />
<Input
type="search"
placeholder="Search..."
value={searchQuery}
onChange={(e) => {
setSearchQuery(e.target.value);
setSearchOpen(true);
}}
onFocus={() => setSearchOpen(true)}
onKeyDown={onSearchKeyDown}
className="flex-1 min-w-0 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 py-2 px-2 h-full"
aria-label="Search menus"
aria-expanded={showResults}
aria-autocomplete="list"
role="combobox"
/>
</div>
{showResults && (
<ul
className="absolute left-0 right-0 top-full mt-1 max-h-72 overflow-y-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg z-50"
role="listbox"
>
{searchResults.map((item, index) => (
<li key={item.viewKey} role="option" aria-selected={index === activeIndex}>
<button
type="button"
className={cn(
'w-full px-3 py-2 text-left transition-colors',
index === activeIndex ? 'bg-blue-50' : 'hover:bg-gray-50',
)}
onMouseEnter={() => setActiveIndex(index)}
onClick={() => pickResult(item.viewKey)}
>
<div className="text-sm font-medium text-gray-900">{item.label}</div>
{item.breadcrumb ? (
<div className="text-xs text-gray-500 mt-0.5 truncate">{item.breadcrumb}</div>
) : null}
</button>
</li>
))}
</ul>
)}
</div>
<Button
type="button"
variant="ghost"
size="icon"
className="text-gray-500 hover:text-gray-700"
aria-label="Open Support"
onClick={() => onSettingsClick?.()}
>
<Settings className="w-5 h-5" />
</Button>
<div className="h-8 w-px bg-gray-200 mx-2" />
<button
type="button"
onClick={() => onProfileClick?.()}
className="flex items-center gap-3 rounded-lg border border-transparent px-2 py-1.5 text-left transition-colors hover:border-gray-200 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40"
aria-label="Open my profile"
>
<div className="text-right hidden md:block min-w-0 max-w-[12rem]">
<div className="text-sm font-medium text-gray-900 truncate">{primaryName}</div>
<div className="text-xs text-gray-500 truncate" title={roleLine}>
{roleLine}
</div>
</div>
<Avatar className="h-10 w-10 shrink-0 border border-gray-200">
<AvatarImage src="https://github.com/shadcn.png" />
<AvatarFallback>{initials}</AvatarFallback>
</Avatar>
</button>
</div>
</header>
);
}