60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
import Link from 'next/link'
|
||
import { ArrowLeft, Layers3 } from 'lucide-react'
|
||
import DepartmentShell from './DepartmentShell'
|
||
|
||
type WorkspacePlaceholderProps = {
|
||
title: string
|
||
description: string
|
||
capabilities?: string[]
|
||
accent: string
|
||
accentSoft: string
|
||
accentText: string
|
||
}
|
||
|
||
export default function WorkspacePlaceholder({
|
||
title,
|
||
description,
|
||
capabilities = [],
|
||
accentSoft,
|
||
accentText,
|
||
}: WorkspacePlaceholderProps) {
|
||
return (
|
||
<DepartmentShell>
|
||
<main className="mx-auto max-w-[1600px] px-4 pb-16 pt-7 sm:px-6 lg:px-8">
|
||
<section className="rounded-xl border border-[#e2e8f0] bg-white p-6 shadow-[0_6px_18px_rgba(15,23,42,0.05)] sm:p-8">
|
||
<div className="flex h-12 w-12 items-center justify-center rounded-2xl" style={{ backgroundColor: accentSoft, color: accentText }}>
|
||
<Layers3 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">{title}</h1>
|
||
<p className="mt-3 max-w-3xl text-base leading-7 text-[#66758b] sm:text-lg">{description}</p>
|
||
|
||
<div className="mt-8 rounded-lg border border-[#e5e9ef] bg-[#f8fafc] p-5 sm:p-6">
|
||
<h2 className="text-xl font-bold tracking-[-0.02em] sm:text-2xl">二级页面框架已建立</h2>
|
||
<p className="mt-2 max-w-2xl text-sm leading-6 text-[#66758b]">
|
||
当前仅提供页面结构与能力范围，业务数据和具体操作将在后续阶段接入。
|
||
</p>
|
||
|
||
{capabilities.length > 0 && (
|
||
<div className="mt-6 flex flex-wrap gap-2" aria-label={`${title}规划能力`}>
|
||
{capabilities.map((capability) => (
|
||
<span key={capability} className="rounded-xl bg-white px-3 py-2 text-sm font-semibold text-[#4f6077] shadow-[0_5px_16px_rgba(67,93,126,0.07)]">
|
||
{capability}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<Link
|
||
href="/"
|
||
className="mt-8 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>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</DepartmentShell>
|
||
)
|
||
}
|