ui: simplify brand knowledge header

This commit is contained in:
江林铖 2026-09-15 11:27:31 +08:00
parent 34f355b538
commit 2db3cf962f
2 changed files with 17 additions and 33 deletions

View File

@ -24,7 +24,9 @@ describe('BrandKnowledgeDashboard', () => {
it('shows the real upload entry and empty state', async () => {
render(<BrandKnowledgeDashboard />)
expect(screen.getByRole('heading', { level: 1, name: '品牌知识库' })).toBeInTheDocument()
const main = screen.getByRole('main')
expect(within(main).queryByRole('heading', { level: 1, name: '品牌知识库' })).not.toBeInTheDocument()
expect(within(main).queryByText('可上传')).not.toBeInTheDocument()
expect(screen.getByRole('searchbox', { name: '搜索品牌知识' })).toBeInTheDocument()
expect(screen.getByRole('navigation', { name: '知识类型' })).toBeInTheDocument()
expect(screen.getAllByRole('button').map((button) => button.textContent)).toEqual(expect.arrayContaining([...BRAND_KNOWLEDGE_TYPE_OPTIONS]))

View File

@ -225,36 +225,18 @@ export default function BrandKnowledgeDashboard() {
<DepartmentShell>
<main className="min-h-[calc(100dvh-72px)] bg-[#f2f4f7] text-[#101828]">
<div className="mx-auto max-w-7xl px-4 pb-16 pt-6 sm:px-6 lg:px-8">
<header className="mb-8 flex flex-col gap-6">
<div className="flex items-center justify-between gap-4">
<div className="flex min-w-0 items-center gap-3">
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#e9f8f2] text-[#087052]">
<BookOpen className="h-5 w-5" aria-hidden="true" />
</span>
<div className="min-w-0">
<h1 className="truncate text-2xl font-bold tracking-[-0.03em] text-[#101828] sm:text-3xl">品牌知识库</h1>
<p className="mt-1 truncate text-sm text-[#8a99ad]">品牌中心部门工作台</p>
</div>
</div>
<span className="inline-flex shrink-0 items-center gap-2 rounded-lg border border-[#b8e5d5] bg-[#f0fbf6] px-3 py-2 text-xs font-semibold text-[#087052]">
<span className="h-2 w-2 rounded-full bg-[#31d0aa]" aria-hidden="true" />
可上传
</span>
</div>
<div className="flex items-center justify-between gap-4">
<p className="text-sm text-[#66758b]" role="status" aria-live="polite">{notice}</p>
<button
ref={uploadButtonRef}
type="button"
onClick={() => { setNotice(''); setIsUploadDialogOpen(true) }}
className="inline-flex min-h-11 items-center gap-2 rounded-lg bg-[#247fd3] px-5 text-sm font-bold text-white shadow-[0_8px_22px_rgba(36,127,211,0.16)] transition-colors hover:bg-[#176fc1] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff] focus-visible:ring-offset-2"
>
<Upload className="h-4 w-4" aria-hidden="true" />
上传知识
</button>
</div>
</header>
<div className="mb-6 flex min-h-11 items-center justify-end gap-4">
<p className="mr-auto text-sm text-[#66758b]" role="status" aria-live="polite">{notice}</p>
<button
ref={uploadButtonRef}
type="button"
onClick={() => { setNotice(''); setIsUploadDialogOpen(true) }}
className="inline-flex min-h-11 shrink-0 items-center gap-2 rounded-lg bg-[#247fd3] px-5 text-sm font-bold text-white shadow-[0_8px_22px_rgba(36,127,211,0.16)] transition-colors hover:bg-[#176fc1] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff] focus-visible:ring-offset-2"
>
<Upload className="h-4 w-4" aria-hidden="true" />
上传知识
</button>
</div>
<section aria-label="品牌知识库筛选">
<label className="relative block">
@ -289,7 +271,7 @@ export default function BrandKnowledgeDashboard() {
</section>
<section className="mt-6" aria-labelledby="brand-knowledge-content-title">
<div className="flex items-center justify-between gap-4 border-b border-[#dfe4ea] pb-4">
<div className="flex flex-col items-start justify-between gap-3 border-b border-[#dfe4ea] pb-4 sm:flex-row sm:items-center sm:gap-4">
<div>
<h2 id="brand-knowledge-content-title" className="text-lg font-bold text-[#101828]">知识内容</h2>
<p className="mt-1 text-sm text-[#8a8f97]">人员上传的知识文件将按类型保存,并可在此下载</p>
@ -297,7 +279,7 @@ export default function BrandKnowledgeDashboard() {
<button
type="button"
disabled
className="inline-flex items-center gap-1.5 text-sm font-semibold text-[#8a8f97]"
className="inline-flex min-h-11 items-center gap-1.5 text-sm font-semibold text-[#8a8f97]"
title="内容接入后开放排序"
>
最近更新