119 lines
4.7 KiB
TypeScript
119 lines
4.7 KiB
TypeScript
'use client'
|
||
|
||
import Link from 'next/link'
|
||
import { useSession } from 'next-auth/react'
|
||
import type { CSSProperties } from 'react'
|
||
import {
|
||
ArrowRight,
|
||
Bot,
|
||
BriefcaseBusiness,
|
||
Gauge,
|
||
Settings2,
|
||
UsersRound,
|
||
type LucideIcon,
|
||
} from 'lucide-react'
|
||
import DepartmentShell from './DepartmentShell'
|
||
import {
|
||
WORKSPACE_SECTIONS,
|
||
type WorkspaceSection,
|
||
type WorkspaceSectionKey,
|
||
} from './workspace-navigation'
|
||
|
||
const SECTION_ICONS: Record<WorkspaceSectionKey, LucideIcon> = {
|
||
dashboard: Gauge,
|
||
business: BriefcaseBusiness,
|
||
assets: Bot,
|
||
organization: UsersRound,
|
||
governance: Settings2,
|
||
}
|
||
|
||
function WorkspaceRow({ section }: { section: WorkspaceSection }) {
|
||
const Icon = SECTION_ICONS[section.key]
|
||
|
||
return (
|
||
<article
|
||
id={`workspace-${section.key}`}
|
||
aria-labelledby={`workspace-${section.key}-title`}
|
||
className="overflow-hidden rounded-xl border border-[#e2e8f0] bg-white shadow-[0_8px_24px_rgba(15,23,42,0.06)]"
|
||
>
|
||
<div className="p-5 sm:p-7">
|
||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-8">
|
||
<div className="flex min-w-0 items-start gap-4">
|
||
<span
|
||
className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl"
|
||
style={{ backgroundColor: section.accentSoft, color: section.accentText }}
|
||
>
|
||
<Icon className="h-5 w-5" aria-hidden="true" />
|
||
</span>
|
||
<div className="min-w-0">
|
||
<h2 id={`workspace-${section.key}-title`} className="text-xl font-bold tracking-[-0.02em] text-[#101828]">{section.title}</h2>
|
||
<p className="mt-1 text-sm font-semibold" style={{ color: section.accentText }}>{section.summary}</p>
|
||
</div>
|
||
</div>
|
||
<p className="max-w-2xl text-sm leading-6 text-[#66758b] sm:text-right">{section.description}</p>
|
||
</div>
|
||
|
||
<nav
|
||
aria-label={`${section.title}二级页面`}
|
||
className="mt-6 grid grid-cols-1 gap-px overflow-hidden rounded-lg bg-[#e2e9f2] sm:grid-cols-2 lg:[grid-template-columns:repeat(var(--workspace-item-count),minmax(0,1fr))]"
|
||
style={{ '--workspace-item-count': section.items.length } as CSSProperties}
|
||
>
|
||
{section.items.map((item) => (
|
||
<Link
|
||
key={item.key}
|
||
href={item.href}
|
||
className="group flex min-h-[78px] min-w-0 items-center justify-between gap-3 bg-[#f7f9fc] px-4 py-3 text-left transition-[background-color,box-shadow] duration-200 hover:relative hover:z-10 hover:bg-white hover:shadow-[0_8px_22px_rgba(67,93,126,0.10)] focus-visible:relative focus-visible:z-20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[#5a9ce6]"
|
||
>
|
||
<span className="min-w-0">
|
||
<span className="block text-sm font-bold leading-5 text-[#1b2738]">{item.title}</span>
|
||
<span className="mt-1 block text-xs leading-4 text-[#738198]">
|
||
{item.status === 'connected' ? item.productName : '二级框架'}
|
||
</span>
|
||
</span>
|
||
<span
|
||
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl transition-transform duration-200 group-hover:translate-x-0.5"
|
||
style={{ backgroundColor: section.accentSoft, color: section.accentText }}
|
||
>
|
||
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||
</span>
|
||
</Link>
|
||
))}
|
||
</nav>
|
||
</div>
|
||
</article>
|
||
)
|
||
}
|
||
|
||
export default function BrandCenterDashboard() {
|
||
const { status } = useSession()
|
||
|
||
if (status === 'loading') {
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center bg-[#edf3fa] text-[#66758b]">
|
||
正在进入品牌中心部门看板…
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<DepartmentShell>
|
||
<main className="mx-auto max-w-[1600px] px-4 pb-12 pt-7 sm:px-6 sm:pb-16 lg:px-8">
|
||
<div className="border-b border-[#dfe4ea] pb-6">
|
||
<h1 className="max-w-4xl text-balance text-3xl font-bold tracking-[-0.03em] text-[#101828] sm:text-4xl">
|
||
品牌中心部门看板
|
||
</h1>
|
||
<p className="mt-3 max-w-3xl text-base leading-7 text-[#66758b] sm:text-lg">
|
||
从五个工作板块进入对应能力页面。当前先建立部门工作地图，业务数据将在后续阶段接入。
|
||
</p>
|
||
</div>
|
||
|
||
<section aria-label="五个工作板块" className="mt-6">
|
||
<div className="grid gap-5">
|
||
{WORKSPACE_SECTIONS.map((section) => <WorkspaceRow key={section.key} section={section} />)}
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</DepartmentShell>
|
||
)
|
||
}
|