Align dashboard home layout with CloudNative theme (#562)
This commit is contained in:
shenlan
GitHub
parent
04132e93b6
commit
8a54bd6a1c
@ -1,25 +1,30 @@
|
||||
import type { CommonHomeLayoutConfig } from '@templates/layouts/commonHome'
|
||||
|
||||
export const defaultHomeLayoutConfig: CommonHomeLayoutConfig = {
|
||||
rootClassName: 'bg-slate-950',
|
||||
rootClassName:
|
||||
'relative min-h-screen bg-gradient-to-b from-[#0B1120] via-[#0C1A2E] to-[#0F172A] text-slate-100',
|
||||
hero: {
|
||||
sectionClassName: 'relative isolate overflow-hidden pb-24 pt-24 text-slate-100',
|
||||
sectionClassName: 'relative isolate overflow-hidden py-24',
|
||||
overlays: [
|
||||
'absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.18),_transparent_60%)]',
|
||||
'absolute inset-0 bg-[linear-gradient(130deg,_rgba(12,18,32,0.92),_rgba(8,47,73,0.45))]',
|
||||
],
|
||||
containerClassName: 'relative px-4',
|
||||
contentClassName: 'mx-auto max-w-6xl',
|
||||
containerClassName: 'relative px-6 sm:px-8',
|
||||
contentClassName: 'mx-auto max-w-7xl',
|
||||
slot: {
|
||||
key: 'ProductMatrix',
|
||||
},
|
||||
},
|
||||
content: {
|
||||
sectionClassName: 'relative bg-slate-50 pb-16 pt-20',
|
||||
overlays: ['absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-slate-950 via-slate-900/0'],
|
||||
containerClassName: 'relative px-4',
|
||||
contentClassName: 'mx-auto max-w-6xl',
|
||||
gridClassName: 'grid gap-8 lg:grid-cols-[minmax(0,2.5fr)_minmax(0,1fr)] lg:items-start',
|
||||
sectionClassName: 'relative isolate py-20',
|
||||
overlays: [
|
||||
'absolute inset-x-0 top-0 h-px bg-white/10',
|
||||
'absolute inset-0 bg-[radial-gradient(circle_at_bottom,_rgba(56,189,248,0.08),_transparent_65%)]',
|
||||
],
|
||||
containerClassName: 'relative px-6 sm:px-8',
|
||||
contentClassName: 'mx-auto max-w-7xl',
|
||||
gridClassName:
|
||||
'grid gap-10 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-start lg:gap-12',
|
||||
slots: [
|
||||
{ key: 'ArticleFeed' },
|
||||
{ key: 'Sidebar' },
|
||||
|
||||
@ -19,19 +19,22 @@ export default async function ArticleFeed() {
|
||||
const posts = await getHomepagePosts()
|
||||
|
||||
return (
|
||||
<section className="space-y-6">
|
||||
<header className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.2em] text-sky-600">最新动态</p>
|
||||
<h2 className="text-2xl font-semibold text-slate-900 sm:text-3xl">产品与社区快讯</h2>
|
||||
<section className="space-y-8">
|
||||
<header className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.3em] text-sky-300">最新动态</p>
|
||||
<h2 className="text-2xl font-semibold text-white sm:text-3xl">产品与社区快讯</h2>
|
||||
</div>
|
||||
<Link href="/docs" className="text-sm font-medium text-sky-600 hover:text-sky-700">
|
||||
<Link
|
||||
href="/docs"
|
||||
className="text-sm font-semibold text-sky-300 transition hover:text-sky-200"
|
||||
>
|
||||
浏览全部更新 →
|
||||
</Link>
|
||||
</header>
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-8">
|
||||
{!posts.length ? (
|
||||
<p className="rounded-3xl border border-dashed border-slate-200 bg-slate-50 p-8 text-center text-sm text-slate-500">
|
||||
<p className="rounded-3xl border border-dashed border-white/20 bg-white/5 p-8 text-center text-sm text-slate-200/70">
|
||||
暂无内容，敬请期待更多来自产品与社区的最新动态。
|
||||
</p>
|
||||
) : null}
|
||||
@ -40,33 +43,35 @@ export default async function ArticleFeed() {
|
||||
return (
|
||||
<article
|
||||
key={post.slug}
|
||||
className="group rounded-3xl border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg sm:p-8"
|
||||
className="group rounded-3xl border border-white/10 bg-white/5 p-6 text-slate-100 shadow-lg shadow-sky-950/30 transition hover:-translate-y-1 hover:border-white/30 hover:bg-white/10 hover:shadow-sky-900/40 sm:p-8"
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-500 sm:text-sm">
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-300/80 sm:text-sm">
|
||||
{formattedDate ? <span>{formattedDate}</span> : null}
|
||||
{post.author ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="hidden h-1 w-1 rounded-full bg-slate-400 sm:inline" aria-hidden />
|
||||
<span className="hidden h-1 w-1 rounded-full bg-slate-400/80 sm:inline" aria-hidden />
|
||||
<span>{post.author}</span>
|
||||
</span>
|
||||
) : null}
|
||||
{post.readingTime ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="hidden h-1 w-1 rounded-full bg-slate-400 sm:inline" aria-hidden />
|
||||
<span className="hidden h-1 w-1 rounded-full bg-slate-400/80 sm:inline" aria-hidden />
|
||||
<span>{post.readingTime}</span>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<h3 className="mt-4 text-xl font-semibold text-slate-900 transition group-hover:text-sky-600 sm:text-2xl">
|
||||
<h3 className="mt-4 text-xl font-semibold text-white transition group-hover:text-sky-200 sm:text-2xl">
|
||||
{post.title}
|
||||
</h3>
|
||||
{post.excerpt ? <p className="mt-3 text-sm text-slate-600 sm:text-base">{post.excerpt}</p> : null}
|
||||
{post.excerpt ? (
|
||||
<p className="mt-3 text-sm text-slate-200/80 sm:text-base">{post.excerpt}</p>
|
||||
) : null}
|
||||
{post.tags.length ? (
|
||||
<div className="mt-5 flex flex-wrap gap-2">
|
||||
{post.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-flex items-center rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700"
|
||||
className="inline-flex items-center rounded-full bg-slate-900/60 px-3 py-1 text-xs font-medium text-slate-200"
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
|
||||
@ -11,9 +11,9 @@ export default async function ProductMatrix() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-8 lg:grid-cols-[minmax(0,2.5fr)_minmax(0,1fr)] lg:items-start">
|
||||
<div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-start lg:gap-12">
|
||||
<ProductMatrixClient solutions={solutions} />
|
||||
<ContactPanel className="lg:sticky lg:top-[calc(var(--app-shell-nav-offset)+1.5rem)]" />
|
||||
<ContactPanel className="w-full lg:sticky lg:top-16 lg:h-fit lg:w-[360px] lg:self-start" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -5,8 +5,12 @@ import SidebarCard from './SidebarCard'
|
||||
export default async function Sidebar() {
|
||||
const sections = await getSidebarSections()
|
||||
|
||||
if (!sections.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className="space-y-6">
|
||||
<aside className="w-full space-y-6 rounded-3xl border border-white/20 bg-white/90 p-6 text-slate-900 shadow-xl shadow-sky-900/15 backdrop-blur lg:sticky lg:top-16 lg:h-fit lg:w-[360px]">
|
||||
{sections.map((section) => (
|
||||
<SidebarCard key={section.slug} section={section} />
|
||||
))}
|
||||
|
||||
@ -17,13 +17,13 @@ export default function SidebarCard({ section }: SidebarCardProps) {
|
||||
const hasTagsLayout = section.layout === 'tags' && section.tags.length > 0
|
||||
|
||||
return (
|
||||
<section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<section className="rounded-2xl border border-slate-200/70 bg-white/95 p-5 shadow-md shadow-sky-900/10">
|
||||
<header className="mb-4 flex items-center justify-between gap-3">
|
||||
<h3 className="text-lg font-semibold text-slate-900">{section.title}</h3>
|
||||
{isValidCta(section) ? (
|
||||
<Link
|
||||
href={section.ctaHref}
|
||||
className="text-sm font-medium text-sky-600 transition hover:text-sky-700"
|
||||
className="text-sm font-semibold text-blue-600 transition hover:text-blue-700"
|
||||
>
|
||||
{section.ctaLabel}
|
||||
</Link>
|
||||
@ -42,7 +42,7 @@ export default function SidebarCard({ section }: SidebarCardProps) {
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="prose prose-sm max-w-none text-slate-600 [&_a]:text-sky-600 [&_a]:no-underline hover:[&_a]:underline"
|
||||
className="prose prose-sm max-w-none text-slate-600 [&_a]:text-blue-600 [&_a]:no-underline hover:[&_a]:underline"
|
||||
dangerouslySetInnerHTML={{ __html: section.bodyHtml }}
|
||||
/>
|
||||
)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user