From d5527f9e53e55050de69f346c2c444000471e848 Mon Sep 17 00:00:00 2001 From: shenlan Date: Fri, 17 Oct 2025 10:08:44 +0800 Subject: [PATCH] Restore news and community sections below product matrix (#537) --- ui/homepage/app/page.tsx | 24 +-- .../components/home/ContactPanelClient.tsx | 15 +- .../components/home/HeroProductTabs.tsx | 12 +- ui/homepage/components/home/ProductMatrix.tsx | 84 +------- .../components/home/ProductMatrixClient.tsx | 199 ++++++++++++++++++ .../content/homepage/solutions/xcloudflow.md | 10 +- .../content/homepage/solutions/xcontrol.md | 10 +- .../content/homepage/solutions/xscopehub.md | 10 +- .../content/homepage/solutions/xstream.md | 10 +- ui/homepage/lib/homepageContent.ts | 4 + 10 files changed, 257 insertions(+), 121 deletions(-) create mode 100644 ui/homepage/components/home/ProductMatrixClient.tsx diff --git a/ui/homepage/app/page.tsx b/ui/homepage/app/page.tsx index a01ecf1..021d0e3 100644 --- a/ui/homepage/app/page.tsx +++ b/ui/homepage/app/page.tsx @@ -5,8 +5,6 @@ import Navbar from '@components/Navbar' import { AskAIButton } from '@components/AskAIButton' import ArticleFeed from '@components/home/ArticleFeed' -import ContactPanel from '@components/home/ContactPanel' -import HeroBanner from '@components/home/HeroBanner' import ProductMatrix from '@components/home/ProductMatrix' import Sidebar from '@components/home/Sidebar' @@ -14,17 +12,19 @@ export default function HomePage() { return ( <> -
- -
-
-
-
- +
+
+
+
+ +
+
+
+
+
+
+
-
-
-
diff --git a/ui/homepage/components/home/ContactPanelClient.tsx b/ui/homepage/components/home/ContactPanelClient.tsx index 90db4d5..3f8fc82 100644 --- a/ui/homepage/components/home/ContactPanelClient.tsx +++ b/ui/homepage/components/home/ContactPanelClient.tsx @@ -10,13 +10,11 @@ import { X, type LucideIcon, } from 'lucide-react' -import { useEffect, useMemo, useState } from 'react' +import { useMemo, useState } from 'react' import clsx from 'clsx' import type { ContactPanelContent, ContactItemContent } from '@lib/homepageContent' -const STORAGE_KEY = 'xcontrol-homepage-contact-collapsed' - const iconMap: Record = { mail: Mail, 'life-buoy': LifeBuoy, @@ -157,17 +155,6 @@ function InfoCard({ item }: { item: ContactItemContent }) { export default function ContactPanelClient({ panel, className }: ContactPanelClientProps) { const [collapsed, setCollapsed] = useState(false) - useEffect(() => { - const stored = window.localStorage.getItem(STORAGE_KEY) - if (stored === 'true') { - setCollapsed(true) - } - }, []) - - useEffect(() => { - window.localStorage.setItem(STORAGE_KEY, collapsed ? 'true' : 'false') - }, [collapsed]) - if (!panel.items.length) { return null } diff --git a/ui/homepage/components/home/HeroProductTabs.tsx b/ui/homepage/components/home/HeroProductTabs.tsx index ab7cff7..0b53ae9 100644 --- a/ui/homepage/components/home/HeroProductTabs.tsx +++ b/ui/homepage/components/home/HeroProductTabs.tsx @@ -143,7 +143,8 @@ export default function HeroProductTabs({ items }: HeroProductTabsProps) { /> ) : null} {(activeItem.primaryCtaLabel && activeItem.primaryCtaHref) || - (activeItem.secondaryCtaLabel && activeItem.secondaryCtaHref) ? ( + (activeItem.secondaryCtaLabel && activeItem.secondaryCtaHref) || + (activeItem.tertiaryCtaLabel && activeItem.tertiaryCtaHref) ? (
{activeItem.primaryCtaLabel && activeItem.primaryCtaHref ? ( ) : null} + {activeItem.tertiaryCtaLabel && activeItem.tertiaryCtaHref ? ( + + {activeItem.tertiaryCtaLabel} + + ) : null}
) : null}
diff --git a/ui/homepage/components/home/ProductMatrix.tsx b/ui/homepage/components/home/ProductMatrix.tsx index 34d5464..ad3a869 100644 --- a/ui/homepage/components/home/ProductMatrix.tsx +++ b/ui/homepage/components/home/ProductMatrix.tsx @@ -1,14 +1,8 @@ -import Link from 'next/link' +import ContactPanel from './ContactPanel' +import ProductMatrixClient from './ProductMatrixClient' import { getHeroSolutions } from '@lib/homepageContent' -function truncate(text: string, maxLength: number) { - if (text.length <= maxLength) { - return text - } - return `${text.slice(0, maxLength - 1)}…` -} - export default async function ProductMatrix() { const solutions = await getHeroSolutions() @@ -17,75 +11,9 @@ export default async function ProductMatrix() { } return ( -
-
-
-

产品矩阵

-

旗舰能力一览

-
- - 查看全部方案 → - -
-
- {solutions.map((solution) => ( -
-
-
-
-

- {solution.title} -

- {solution.tagline ? ( -

{truncate(solution.tagline, 60)}

- ) : null} -
- {solution.features.length ? ( -
    - {solution.features.slice(0, 3).map((feature) => ( -
  • - - {feature} -
    • - ))} -
- ) : null} - {solution.bodyHtml ? ( -
- ) : null} -
- {(solution.primaryCtaLabel && solution.primaryCtaHref) || - (solution.secondaryCtaLabel && solution.secondaryCtaHref) ? ( -
- {solution.primaryCtaLabel && solution.primaryCtaHref ? ( - - {solution.primaryCtaLabel} - - ) : null} - {solution.secondaryCtaLabel && solution.secondaryCtaHref ? ( - - {solution.secondaryCtaLabel} - - ) : null} -
- ) : null} -
- ))} -
-
+
+ + +
) } diff --git a/ui/homepage/components/home/ProductMatrixClient.tsx b/ui/homepage/components/home/ProductMatrixClient.tsx new file mode 100644 index 0000000..b9ef9ba --- /dev/null +++ b/ui/homepage/components/home/ProductMatrixClient.tsx @@ -0,0 +1,199 @@ +'use client' + +import Link from 'next/link' +import { useMemo, useState } from 'react' +import clsx from 'clsx' + +import type { HeroSolution } from '@lib/homepageContent' + +const OVERVIEW_HIGHLIGHTS = [ + '跨集群与多云环境的一体化策略治理', + '以策略为核心的安全与合规自动化', + '将标准化模板加速落地业务流程', +] + +type ProductMatrixClientProps = { + solutions: HeroSolution[] +} + +export default function ProductMatrixClient({ solutions }: ProductMatrixClientProps) { + const [activeIndex, setActiveIndex] = useState(0) + + const activeSolution = useMemo(() => solutions[activeIndex] ?? solutions[0], [solutions, activeIndex]) + + if (!solutions.length || !activeSolution) { + return null + } + + const ctas = [ + activeSolution.primaryCtaLabel && activeSolution.primaryCtaHref + ? { + label: activeSolution.primaryCtaLabel, + href: activeSolution.primaryCtaHref, + variant: 'primary' as const, + } + : null, + activeSolution.secondaryCtaLabel && activeSolution.secondaryCtaHref + ? { + label: activeSolution.secondaryCtaLabel, + href: activeSolution.secondaryCtaHref, + variant: 'secondary' as const, + } + : null, + activeSolution.tertiaryCtaLabel && activeSolution.tertiaryCtaHref + ? { + label: activeSolution.tertiaryCtaLabel, + href: activeSolution.tertiaryCtaHref, + variant: 'ghost' as const, + } + : null, + ].filter(Boolean) as Array<{ label: string; href: string; variant: 'primary' | 'secondary' | 'ghost' }> + + return ( +
+
+
+
+ 云原生运营中心 +

+ 打造一体化的 XControl 控制平面 +

+

+ 将资产管理、访问控制、可观测与自动化工作流整合到一个响应迅速的体验里，帮助团队高效落地治理策略。 +

+
+
    + {OVERVIEW_HIGHLIGHTS.map((highlight) => ( +
  • + + {highlight} +
    • + ))} +
+
+
+ {solutions.map((solution, index) => { + const isActive = index === activeIndex + return ( + + ) + })} +
+
+
+ {activeSolution.tagline ? ( +

+ {activeSolution.tagline} +

+ ) : null} +

{activeSolution.title}

+ {activeSolution.description ? ( +
+

产品文案

+

{activeSolution.description}

+
+ ) : null} + {activeSolution.bodyHtml ? ( +
+ ) : null} +
+
+ {activeSolution.features.length ? ( +
+

能力速览

+
    + {activeSolution.features.map((feature) => ( +
  • + + {feature} +
    • + ))} +
+
+ ) : null} + {ctas.length ? ( +
+ {ctas.map(({ href, label, variant }) => ( + + {label} + + ))} +
+ ) : null} +
+
+
+
+
+ {solutions.map((solution, index) => { + const isActive = index === activeIndex + return ( + + ) + })} +
+
+ ) +} diff --git a/ui/homepage/content/homepage/solutions/xcloudflow.md b/ui/homepage/content/homepage/solutions/xcloudflow.md index 20c2b04..906f453 100644 --- a/ui/homepage/content/homepage/solutions/xcloudflow.md +++ b/ui/homepage/content/homepage/solutions/xcloudflow.md @@ -3,10 +3,12 @@ title: XCloudFlow tagline: 多云 IaC order: 1 description: 通过声明式模型统一编排多云基础设施，自动化落地资源策略与合规标准。 -primaryCtaLabel: 了解 XCloudFlow -primaryCtaHref: /products/xcloudflow -secondaryCtaLabel: 产品文档 -secondaryCtaHref: /docs/xcloudflow +primaryCtaLabel: 立刻体验 +primaryCtaHref: /demo?product=xcloudflow +secondaryCtaLabel: 下载链接 +secondaryCtaHref: /download?product=xcloudflow +tertiaryCtaLabel: 文档链接 +tertiaryCtaHref: /docs/xcloudflow features: - 跨云资源蓝图与参数化交付 - GitOps 工作流驱动基础设施变更 diff --git a/ui/homepage/content/homepage/solutions/xcontrol.md b/ui/homepage/content/homepage/solutions/xcontrol.md index ca29de9..86de632 100644 --- a/ui/homepage/content/homepage/solutions/xcontrol.md +++ b/ui/homepage/content/homepage/solutions/xcontrol.md @@ -3,10 +3,12 @@ title: XControl 平台 tagline: 云原生治理中枢 order: 3 description: 为多团队提供统一的权限、策略与工作流编排，让交付与治理协同无缝衔接。 -primaryCtaLabel: 申请试用 -primaryCtaHref: /trial -secondaryCtaLabel: 查看能力矩阵 -secondaryCtaHref: /products/xcontrol#capabilities +primaryCtaLabel: 立刻体验 +primaryCtaHref: /demo?product=xcontrol +secondaryCtaLabel: 下载链接 +secondaryCtaHref: /download?product=xcontrol +tertiaryCtaLabel: 文档链接 +tertiaryCtaHref: /docs/xcontrol features: - 一站式权限与合规策略中心 - 工作流自动化驱动跨团队协作 diff --git a/ui/homepage/content/homepage/solutions/xscopehub.md b/ui/homepage/content/homepage/solutions/xscopehub.md index eed1e8e..6bbc611 100644 --- a/ui/homepage/content/homepage/solutions/xscopehub.md +++ b/ui/homepage/content/homepage/solutions/xscopehub.md @@ -3,10 +3,12 @@ title: XScopeHub tagline: AI & 可观察性 order: 2 description: 利用 AI 驱动的分析工作台，统一日志、指标与追踪，快速定位异常并推荐修复路径。 -primaryCtaLabel: 探索 XScopeHub -primaryCtaHref: /products/xscopehub -secondaryCtaLabel: 体验 Demo -secondaryCtaHref: /demo/xscopehub +primaryCtaLabel: 立刻体验 +primaryCtaHref: /demo?product=xscopehub +secondaryCtaLabel: 下载链接 +secondaryCtaHref: /download?product=xscopehub +tertiaryCtaLabel: 文档链接 +tertiaryCtaHref: /docs/xscopehub features: - 全栈可观察性数据联邦检索 - 智能告警关联与根因分析 diff --git a/ui/homepage/content/homepage/solutions/xstream.md b/ui/homepage/content/homepage/solutions/xstream.md index b21eb08..92e63f3 100644 --- a/ui/homepage/content/homepage/solutions/xstream.md +++ b/ui/homepage/content/homepage/solutions/xstream.md @@ -3,10 +3,12 @@ title: XStream tagline: 网络加速器 order: 4 description: 按需构建全球传输网络，保障跨地域应用与数据同步的稳定低时延体验。 -primaryCtaLabel: 查看加速方案 -primaryCtaHref: /products/xstream -secondaryCtaLabel: 下载白皮书 -secondaryCtaHref: /resources/xstream-whitepaper +primaryCtaLabel: 立刻体验 +primaryCtaHref: /demo?product=xstream +secondaryCtaLabel: 下载链接 +secondaryCtaHref: /download?product=xstream +tertiaryCtaLabel: 文档链接 +tertiaryCtaHref: /docs/xstream features: - 动态最优路径与带宽调度 - 内置零信任安全与访问控制 diff --git a/ui/homepage/lib/homepageContent.ts b/ui/homepage/lib/homepageContent.ts index bafd575..d76ea71 100644 --- a/ui/homepage/lib/homepageContent.ts +++ b/ui/homepage/lib/homepageContent.ts @@ -26,6 +26,8 @@ export interface HeroSolution { primaryCtaHref?: string secondaryCtaLabel?: string secondaryCtaHref?: string + tertiaryCtaLabel?: string + tertiaryCtaHref?: string } export interface HomepagePost { @@ -153,6 +155,8 @@ export async function getHeroSolutions(): Promise { primaryCtaHref: ensureString(file.metadata.primaryCtaHref), secondaryCtaLabel: ensureString(file.metadata.secondaryCtaLabel), secondaryCtaHref: ensureString(file.metadata.secondaryCtaHref), + tertiaryCtaLabel: ensureString(file.metadata.tertiaryCtaLabel), + tertiaryCtaHref: ensureString(file.metadata.tertiaryCtaHref), order: ensureNumber(file.metadata.order), })) } catch (error) {