106 lines
5.0 KiB
TypeScript
106 lines
5.0 KiB
TypeScript
import Link from 'next/link'
|
||
import { ArrowLeft, HeartPulse } from 'lucide-react'
|
||
import DepartmentShell from './DepartmentShell'
|
||
import {
|
||
BRAND_HEALTH_BRANDS,
|
||
BRAND_HEALTH_DIMENSIONS,
|
||
type BrandHealthBrand,
|
||
} from './brand-health'
|
||
|
||
function BrandHealthRow({ brand }: { brand: BrandHealthBrand }) {
|
||
return (
|
||
<article
|
||
aria-labelledby={`brand-health-${brand.key}`}
|
||
className="overflow-hidden rounded-xl border border-[#e2e8f0] bg-white shadow-[0_6px_18px_rgba(15,23,42,0.05)]"
|
||
>
|
||
<div className="h-1 bg-[#5a9ce6]" aria-hidden="true" />
|
||
<div className="p-5 sm:p-7">
|
||
<header className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
|
||
<div className="flex min-w-0 items-center gap-4">
|
||
<span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#edf5ff] text-[#176fc1]">
|
||
<HeartPulse className="h-5 w-5" aria-hidden="true" />
|
||
</span>
|
||
<div className="min-w-0">
|
||
<h2 id={`brand-health-${brand.key}`} className="text-xl font-bold tracking-[-0.02em] text-[#101828] sm:text-2xl">
|
||
{brand.name}
|
||
</h2>
|
||
<p className="mt-1 text-sm font-semibold text-[#176fc1]">{brand.team}负责品牌</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between gap-5 border-t border-[#e2e9f2] pt-4 sm:justify-end sm:border-l sm:border-t-0 sm:pl-6 sm:pt-0">
|
||
<div>
|
||
<p className="text-xs font-bold text-[#738198]">品牌健康分</p>
|
||
<p className="mt-1 text-3xl font-bold tabular-nums tracking-[-0.03em] text-[#101828]" aria-label={`${brand.name}品牌健康分待接入`}>—</p>
|
||
</div>
|
||
<span className="inline-flex min-h-8 items-center rounded-lg bg-[#f1f6fc] px-3 text-xs font-bold text-[#5f7189]">
|
||
数据源待接入
|
||
</span>
|
||
</div>
|
||
</header>
|
||
|
||
<dl
|
||
aria-label={`${brand.name}五项健康度数据`}
|
||
className="mt-5 grid gap-px overflow-hidden rounded-2xl bg-[#e2e9f2] sm:grid-cols-2 lg:grid-cols-5"
|
||
>
|
||
{BRAND_HEALTH_DIMENSIONS.map((dimension) => (
|
||
<div
|
||
key={dimension.key}
|
||
className="bg-[#f8fafd] p-4"
|
||
>
|
||
<dt className="text-sm font-bold text-[#1b2738]">{dimension.label}</dt>
|
||
<dd className="mt-4 flex items-end justify-between gap-3">
|
||
<span className="text-2xl font-bold tabular-nums text-slate-400" aria-label={`${dimension.label}当前分数待接入`}>—</span>
|
||
<span className="rounded-md bg-white px-2 py-1 text-xs font-bold tabular-nums text-[#5f7189]">
|
||
权重 {dimension.weight}%
|
||
</span>
|
||
</dd>
|
||
<p className="mt-3 text-xs text-slate-500">当前分数待接入</p>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
</div>
|
||
</article>
|
||
)
|
||
}
|
||
|
||
export default function BrandHealthDashboard() {
|
||
return (
|
||
<DepartmentShell>
|
||
<main className="mx-auto max-w-[1600px] px-4 pb-16 pt-7 sm:px-6 lg:px-8">
|
||
<header className="border-b border-[#dfe4ea] pb-6">
|
||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-[#edf5ff] text-[#176fc1]">
|
||
<HeartPulse className="h-6 w-6" aria-hidden="true" />
|
||
</div>
|
||
<h1 className="mt-6 text-balance text-3xl font-bold tracking-[-0.03em] sm:text-4xl">六品牌健康度</h1>
|
||
<p className="mt-3 max-w-3xl text-base leading-7 text-[#66758b] sm:text-lg">
|
||
按创意团队归属查看六个品牌的统一健康度框架。当前先展示五项评分维度与权重，实际分数将在业务数据源接入后显示。
|
||
</p>
|
||
</header>
|
||
|
||
<section aria-labelledby="brand-health-list-title" className="mt-6">
|
||
<div className="mb-4 flex flex-wrap items-end justify-between gap-3 rounded-lg border border-[#e2e8f0] bg-white px-6 py-5">
|
||
<div>
|
||
<h2 id="brand-health-list-title" className="text-xl font-bold tracking-[-0.02em] sm:text-2xl">六个品牌模块</h2>
|
||
<p className="mt-1 text-sm text-[#66758b]">创意A：朴美、索菲亚、顾家；创意B：欧意朗、卓禾、亿家达。</p>
|
||
</div>
|
||
<p className="rounded-full bg-[#f1f6fc] px-4 py-2 text-sm font-semibold text-[#5f7189]">6 个品牌 · 5 项健康维度</p>
|
||
</div>
|
||
|
||
<div className="grid gap-4">
|
||
{BRAND_HEALTH_BRANDS.map((brand) => <BrandHealthRow key={brand.key} brand={brand} />)}
|
||
</div>
|
||
</section>
|
||
|
||
<Link
|
||
href="/"
|
||
className="mt-10 inline-flex min-h-11 items-center gap-2 rounded-xl bg-[#247fd3] px-4 text-sm font-bold text-white transition-colors hover:bg-[#176fc1] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#78aee9] focus-visible:ring-offset-2"
|
||
>
|
||
<ArrowLeft className="h-4 w-4" aria-hidden="true" />
|
||
返回部门看板
|
||
</Link>
|
||
</main>
|
||
</DepartmentShell>
|
||
)
|
||
}
|