系统时延深度优化:透视网络首字节时间(TTFB)对流式传输吞吐率的确定性度量
基于边缘分发架构,全面复盘高时延网络环境下物理吞吐量衰减模型,深入探讨如何通过预解析机制保障边缘节点数据吞吐效率...
纯色通栏战报板块。直接将全局品牌色(--brand-primary)作为背景画布,通过 4 列网格高亮展现核心运营数据指标或阶段性技术成果。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| items | array | 是 | 运营指标数据对象数组。单项规范:{ value: '核心数字(如 99.9)', suffix: '单位/后缀(如 %)', label: '指标名描述' } |
{
"component": "StatsSection",
"props": {
"items": [
{ "value": "300", "suffix": "ms", "label": "响应速度" }
]
}
}
通用团队/专家阵容展示板块。对底层 API 参数进行了高容错的双向解构(同时兼容 members 与 items 字段),支持精细化头像、从业年限自动换算及多标签墙,全解耦设计,适用于各类专业团队介绍场景。
由二十年分布式基础架构经验的资深领衔,严格执行大厂级精密量化交付标准,支撑高并发原子化系统稳定运转。
首席系统架构师 / 基础科学实验室总负责人
"长期深耕数字化高精度基础架构设计与复杂高并发计算流重构,将二十余年全栈大厂精密控制思维注入系统的每一个原子节点。"
前端工程学部主任 / 交互体验美学首席科学家
"精通将前端工程原子化理念与多端异构渲染器性能调优紧密结合,提倡极致水合性能与无感人机工程的协同演进。"
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 是 | 团队版块的主标题文案(如:核心研发团队 / 专家技术委员会) |
| subtitle | string | 否 | 副标题说明,用以补充团队的整体资质、核心理念或背景支撑 |
| members | array | 否 | 【优先取用】核心成员数据集合。若为空则降级取 items 字段。单项结构契合 TeamCard 架构规范 |
| items | array | 否 | 【备用数据】团队成员数据集合,用于兼容旧版数据管道或标准编排数据流 |
{
"component": "TeamGrid",
"props": {
"title": "研发团队",
"members": [
{ "name": "Alexander", "title": "资深软件架构师", "experience": "12", "description": "系统核心组件设计负责人..." }
]
}
}
五星好评客户声誉见证系统。卡片底部深度打通并混合激活了 Svelte 端的 UserAvatar 动态外置渲染组件,支持文字头像无缝兜底与高质感阴影随动,适用于各行业展现 B 端或 C 端用户的真实口碑。
听听选择我们分布式底层架构、高效建站引擎以及全栈数字化技术支持的生态伙伴们的心声。
"把核心高频站点重构切到该原子化引擎后,首屏耗时直接缩短了十倍!广告留资转化率当天就看到了明显提升,底层架构性能非常硬核。"
"系统的模块化部署全程几乎无感。架构设计不仅复用度极高,那种如同大型互联网工厂一样的精密数据追踪和容错逻辑,让人极度安心。"
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 否 | 评价版块主标题,不传时默认显示‘客户评价’ |
| subtitle | string | 否 | 副标题引导说明文案 |
| items | array | 是 | 用户口碑数据数组。单项规范:{ content: '评价核心内容', author: '评价人姓名', role: '公司职务/身份标签', avatar: '头像URL', avatar_text: '图片缺失时的兜底纯文字代号' } |
{
"component": "Testimonials",
"props": {
"title": "真实好评",
"items": [
{ "content": "平台组件高度封装,极大地缩短了我们的上线周期...", "author": "张总", "role": "技术负责人" }
]
}
}
轻量级流式纯内容分发舱。不带任何标题、边框、或多余内边距包裹,旨在将单一口径的外部 HTML 内容流原汁原味地直出渲染,完美融入上下流式画幅。
这是通过极简 TextBlock 注入的一段干净的内容,支持原生 HTML 标签的直接加粗和无缝样式感知。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| content | string | 是 | 用于渲染输出的原始 HTML 代码或纯文本内容流 |
{
"component": "TextBlock",
"props": {
"content": "<p>极简文本块内容...</p>"
}
}
轻量级客户信任背书流。外层容器默认赋予 60% 灰度过渡滤镜(Grayscale Filter),支持内部多尺度 Logo 图片在鼠标悬浮时触发柔和缩放及色彩重现微动效。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 否 | 板块顶部的描述性小标题,支持大写和高字距布局 |
| logos | array | 是 | 合作伙伴/背书单位 Logo 图片资产数组。单项规范:{ url: '图片资源链接', alt: '单位企业代称' } |
{
"component": "TrustLogos",
"props": {
"title": "信任单位",
"logos": [
{ "url": "/logo.png", "alt": "合作单位" }
]
}
}
网页首屏高光大看板。内嵌纯 CSS 线性色彩剪裁(background-clip: text)排版技术,并配置了反穿透机制,允许局部特定高亮文本冲出渐变约束(通过全局 .text-brand-primary 穿透),达到大厂级视觉呈现。
倾力打造的 CaaS(创作即服务)底层平台方案,将模块化软件工程技术模型与极致的性能调优紧密结合。采用先进的边缘路由与流式渲染架构,为现代企业核心数字资产筑基。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 是 | 高光主标题内容(支持直接内嵌带有样式的 HTML 字符串,如带有 .text-brand-primary 的 span 标签以触发高光穿透) |
| message | string | 否 | 副标题详细导流/介绍文案 |
| badge | string | 否 | 置顶空气感悬浮徽章文案(组件自动使用 color-mix 算法混合 10% 品牌基色作为高档胶囊背景) |
| showGradient | boolean | 否 | 是否开启两侧的对角线全自动化品牌色流体模糊环境光(默认:true) |
{
"component": "Welcome",
"props": {
"title": "大厂级高光渐变看板",
"message": "构建高性能模块化数字基建...",
"badge": "PROD READY",
"showGradient": true
}
}
服务方案与多阶梯定价矩阵舱。支持组件级全局跳转链接与单项数据级链接穿透重写,完美适配多产品线导流与精细化服务分发场景。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 是 | 方案版块的区域大标题文案 |
| subtitle | string | 否 | 副标题说明文案,用于补充计费周期或透明度承诺 |
| ctaUrl | string | 否 | 全局行动点统一跳转路径,默认兜底值为 '/contact' |
| items | array | 是 | 套餐方案卡片列表数据流,单项支持扩展 title, price, features, is_popular 以及独享的 cta_url |
{
"component": "PricingTable",
"props": {
"title": "服务方案",
"ctaUrl": "/contact",
"items": [
{ "title": "专业版", "price": "¥99", "features": ["功能一", "功能二"] }
]
}
}
企业业务流程/实施周期的标准化数字罗盘。不再硬编码固定的十六进制背景色,利用 color-mix 算法自适应全局深色与浅色模式,支持阶梯式线索连接线渐变及悬浮缩放动画特效。
全面体检现有线上资产的权重分布与抓取深度,摸清各海外区域 Core Web Vitals 核心瓶颈。
基于 Fentime Aurora 引擎进行全栈极简重写,彻底干掉客户端阻塞型旧式框架组件。
多节点就近路由缓存分发,全站冷热资产分离部署,锁死全球任意角落 150ms 级 TTFB 响应。
自动化配置结构化数据标记,触发各大跨境搜索引擎极速收录,快速实现自然流量破局。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 否 | 流程版块的核心主标题文案 |
| columns | number | 否 | 布局列数(可选:3 | 4 | 5,默认:4),根据流程节点总数自适应排列 |
| steps | array | 是 | 步骤阶段对象数组。单项规范:{ title: '阶段性标题文案', desc: '步骤详细说明内容' } |
{
"component": "ProcessSteps",
"props": {
"title": "服务流程",
"columns": 4,
"steps": [
{ "title": "前期沟通", "desc": "明确具体交付标准与商务合同签署" }
]
}
}
承载核心转化与导流的产品/服务线大网格系统。支持接收来自后端的混淆唯一标识用于一键留资或路由跳转联动;内置精美图片懒加载、悬浮放大遮罩、多风格(投影/描边/极简)卡片卡座配置。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 否 | 网格主标题(不传时自动匹配当前语种的默认兜底词,如'特色服务') |
| subtitle | string | 否 | 副标题说明文案,用于进一步丰富业务或服务版块概况 |
| alignment | string | 否 | 头部文本对齐模式('left':靠左 | 'center':居中排列,默认: 'center') |
| columns | number | 否 | 网格列数布局(支持 2 | 3 | 4 列,默认: 3 列自适应变化) |
| card_style | string | 否 | 卡片视觉风格类型('shadow': 高级悬浮阴影卡 | 'border': 质感细腻描边线 | 'minimal': 极简轻量空气感,默认: 'shadow') |
| products | array | 是 | 核心展示项数据集合。单项规范:{ id: '后端传回的唯一字符串(用于咨询参数路由)', name: '产品名称', description: '功能描述', image: '封面图', category: '分类名', badge: '徽章标签', slug: '独立路由标识' } |
| baseInquiryUrl | string | 否 | 转化点咨询按钮的根路径路径,系统会自动处理多语言前缀,默认值为 '/contact' |
| baseProductUrl | string | 否 | 产品详情跳转的基础路由目录,当数据包含 slug 字段时生效,默认值为 '/products' |
{
"component": "ProductGrid",
"props": {
"title": "特色服务",
"columns": 3,
"card_style": "shadow",
"locale": "zh",
"products": [
{ "id": "2k8x", "name": "核心计算层组件", "description": "流式渲染支持...", "category": "基础架构" }
]
}
}
深度整合 Tailwind Typography 插件的工业级纯内容画布。支持干净清洗并无缝直出复杂的 HTML 代码字符串流,内置针对品牌色的超链接、引用块、列表及行内代码的超高质感现代工程排版规范。
现代云原生数字系统的统计数据表明,首屏核心数据每多产生 100ms 的水合阻塞或渲染延迟,用户潜在的交互线索转化率就会瞬时陡增 11%。采用先进的原子化边缘分发架构,可在底层物理层面上彻底剔除繁重的中心化服务器握手时间。
为了保障 B 端高并发场景下的极客级严苛要求,我们的排版基底在设计上遵循了以下技术标准:
Tailwind Typography (prose):完全由语义化工程样式驱动,实现跨视窗自适应的一致视觉权重。有关组件级全局跳转链接的配置或多语言路由的精细化重写规范,可以前往我们的参数化系统整合技术支持中心查看完整的演练说明。
“凡在首屏加载和搜索收录率上做妥协的架构体系,都是在给竞品的线上营销账号源源不断地输送转化投产比。” —— 数字化基建技术架构委员会
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| content | string | 是 | 支持双语流转的原始 HTML 文本字符串(可直接包含标题、加粗、无序列表、引用、超链接及行内代码) |
| maxWidth | string | 否 | 内容容器横向视觉约束边界类名(默认: 'max-w-4xl',控制行宽不至于过宽分散视线) |
| paddingY | string | 否 | 纵向内边距控制类名(默认: 'py-12',可根据前后区块密度弹性调整) |
| className | string | 否 | 额外追加的自定义外层容器 Tailwind 类名样式 |
{
"component": "RichText",
"props": {
"maxWidth": "max-w-3xl",
"content": "<h2>排版标题</h2><p>支持 <code>inline_code</code>、列表和加粗文本。</p>"
}
}
用于分割大型页面板块的核心导流门面。默认加重了顶部的间距配置(`pt-24`),完美防御固定悬浮导航栏的视觉遮挡 Bug,内嵌极具极客品牌调性的厚积薄发高亮胶囊线条指示器。
依托多中心高弹性混合调度底座,融合声明式组件物理层编译,全面释放您的数字化线上业务线在海内外分布式竞争中的全生命周期核心资产价值。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 是 | 大版块视觉主标题文案,字级自动匹配响应式大号字 |
| subtitle | string | 否 | 辅助阐释的副标题文案(默认内置最大宽度与舒适的文本间距) |
| alignment | string | 否 | 文本及下划指示器的对齐逻辑模式('left':靠左 | 'center':居中,默认: 'center') |
| paddingTop | string | 否 | 顶部间距控制类名(默认: 'pt-24',专为防悬浮菜单遮挡优化) |
| paddingBottom | string | 否 | 底部间距控制类名(默认: 'pb-12') |
{
"component": "SectionHeader",
"props": {
"title": "大版块标题",
"subtitle": "副标题介绍...",
"alignment": "center"
}
}
核心服务特征与业务条线矩阵布局卡片。集成多语言专属的路由翻译分流方法,使用纯净的原生样式与 CSS 伪类控制,在零额外 JS 负担的情况下实现丝滑的品牌色底框悬浮反转与高亮突显。
基于下一代原子化基础架构,将复杂的业务逻辑雕琢为高可用、低时延的工业级数字系统资产。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 否 | 服务能力矩阵网格的主标题内容 |
| subtitle | string | 否 | 用于业务概括或技术底座补充说明的副标题引导语 |
| defaultLocale | string | 否 | 系统默认备份的底层语种标识,控制组件内缺省语言路由 |
| cta | object | 否 | 右上角全局探索或查看全部的行动按钮。结构格式:{ text: '按钮文案', link: '/跳转页面' } |
| items | array | 是 | 服务子项数据节点数组。单项规范:{ title: '业务条线名称', description: '核心指标功能描述', link: '独立跳转链接', icon_symbol: '图形标识/Emoji(默认: ⚡)' } |
{
"component": "ServiceCards",
"props": {
"title": "核心技术矩阵",
"subtitle": "高性能分布式边缘计算基建卡座。",
"defaultLocale": "zh",
"cta": {
"text": "查看全部方案",
"link": "/services"
},
"items": [
{
"title": "智能算力托管",
"description": "提供微秒级流式分发与按需高弹性扩容能力。",
"icon_symbol": "⚡",
"link": "/services/compute"
}
]
}
}
用于凸显企业硬核实力的数字化资产大转盘战报。搭载高级的动态色彩感知公式(可设置 dynamic-dark / dynamic-light / pure-dark 三重主题),自动从品牌色变量中抽取 5%~10% 的色值进行底色混合渲染,内置数字等宽(tabular-nums)排版防抖和渐进式指示线动效。
全球边缘计算加速节点
首字节冷启动响应耗时
出海广告线索留资转化提升
深度战略合作上市背书企业
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| theme | string | 否 | 智能色彩混融算法主题类型('dynamic-dark': 品牌色混全黑 | 'dynamic-light': 品牌色混纯白 | 'pure-dark': 传统纯深黑色,默认: 'dynamic-dark') |
| suffix | string | 否 | 全局兜底的数字后缀字符(如 '+', '%', '倍',单项内未传时生效) |
| stats | array | 否 | 战报数据对象数组。单项规范:{ label: '成就描述标签', number: '核心突出数据', suffix: '个性化局部后缀字符' } |
{
"component": "StatCounter",
"props": {
"theme": "dynamic-dark",
"stats": [
{ "label": "服务企业", "number": "100", "suffix": "+" }
]
}
}
企业实力与信任背书墙。支持横向柔性排布与响应式流式折行,内置轻量级高质感灰度切换至全彩(Grayscale Hover)的悬浮动画微特效。
分太极光引擎底层技术栈背书
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 否 | 版块置顶的描述性小标题(默认全大写、宽字距) |
| logos | array | 是 | 品牌 Logo 资产对象数组。单项结构规范:{ url: '图片URL', alt: '品牌企业名称' }。推荐传入去底透明的 SVG 或精细 PNG 资产 |
{
"component": "LogoCloud",
"props": {
"title": "合作伙伴",
"logos": [
{ "url": "/logo.svg", "alt": "Astro" }
]
}
}
双栏高转化营销订阅卡片。左侧部署极简轻量化的邮箱/手机号一键获客留资表单;右侧支持接入精选推流文章资产,实现高价值线索二次加热。
订阅光焰科技最新技术周刊,我们将每月为您呈送大厂级全栈优化手段、全球分发降本与跨境 SEO 实战数据,绝无垃圾邮件。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 是 | 订阅舱主标题文案,通常用于利益引导(如获取行业报告) |
| subtitle | string | 否 | 副标题说明文案,用于消除留资隐私顾虑或补充高价值权益 |
| buttonText | string | 否 | 提交表单行动按钮的视觉文案(默认:立即订阅) |
| featuredPosts | array | 否 | 右侧可选接入的精选推荐内容数组。结构规范:{ title: '文章标题', cover: '封面图URL', link: '#跳转链接' } |
{
"component": "Newsletter",
"props": {
"title": "获取技术周刊",
"subtitle": "订阅说明...",
"buttonText": "立即订阅",
"featuredPosts": []
}
}
大厂标准级数据翻页导航栏。内置严谨的数学逻辑计算:首尾页码强制锁定、当页前后智能缓冲区扩充,并对冗余跨度实现自动省略号(...)折叠。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| pagination | object | 是 | 核心翻页元数据对象。结构规范:{ current_page: 当前页码, total_pages: 总页数, is_first_page: 是否第一页, is_last_page: 是否尾页 } |
| baseUrl | string | 是 | 基础翻页路由路径前缀(如:/blog) |
{
"component": "Pagination",
"props": {
"pagination": { "current_page": 1, "total_pages": 5, "is_first_page": true, "is_last_page": false },
"baseUrl": "/news"
}
}
动态文章列表加载, 可选分类过滤和子类目包含递归
暂无相关内容
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| category_id | string | 否 | 选填。后端接口分类识别 ID 或英文别名,用于精准定向抓取某一类目数据 |
| include_sub | boolean | 否 | 选填。布尔值(默认 true),控制是否向下穿透递归抓取子类目的内容 |
| limit | number | 否 | 选填。单页抓取的最大记录限制,用于分发给翻页器的 per_page 限制 |
| locale | enum | 否 | 数据语种隔离过滤标签:['zh', 'en', 'de'] |
| layout | enum | 否 | 排版呈现模式选择。可选枚举值:['grid' (标准九宫格卡片阵列), 'list' (横向通栏传统列表布局)] |
| sort_order | enum | 否 | 选填。排序标签:['asc' (升序), 'desc' (降序)],默认降序desc |
{
"component": "PostCollection",
"props": {
"category_id": "news",
"limit": 9,
"layout": "grid"
}
}
通用型技术文献/行业报告多栏响应式网格舱。内设安全路由机制:优先命中更利于搜索引擎索引的 slug 别名路径,无缝回退唯一物理 ID,内置原生国际化时间转换驱动。
为您甄选涵盖全栈性能重构、网络时延深度优化以及大规模高并发系统容灾治理等核心技术白皮书。
基于边缘分发架构,全面复盘高时延网络环境下物理吞吐量衰减模型,深入探讨如何通过预解析机制保障边缘节点数据吞吐效率...
全面拆解传统单体系统在高负载场景下的资源竞争局限,分析并论证基于原子化无状态组件卡座的解耦框架在容器化部署中的高弹性扩展优势...
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 否 | 网格版块最上方的展示性核心大标题 |
| subtitle | string | 否 | 辅助主标题进行技术概括或内容阐述的次要引导语 |
| items | array | 是 | 精选内容数据集合数组。单项字段规范:{ id: 物理唯一标识, slug: 路由别名, title: 标题, excerpt: 摘要, cover: 封面图URL, date: ISO时间戳, category_name: 分类名称, category_color: 标签主题色 } |
| locale | enum | 否 | 时间戳本地化格式化驱动参数,可选值:['zh', 'en', 'de'] |
{
"component": "PostGrid",
"props": {
"title": "精选文献",
"subtitle": "核心系统工程实践与技术度量指南。",
"locale": "zh",
"items": [
{
"id": "1",
"slug": "latency-benchmarks",
"title": "边缘端数据流式水合性能分析",
"excerpt": "探讨低算力终端在面对大规模复杂 HTML 节点直出时的排队阻塞问题。",
"cover": "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=600",
"date": "2026-05-30T04:39:00.000Z",
"category_name": "系统工程",
"category_color": "#ef4444"
}
]
}
}
黄金交错图文排版版块。支持图片左右位置自由对齐,内置高质感的底色光晕形变、Tailwind Prose 级富文本渲染以及磁性行动呼吁按钮。
分太极光全面抛弃了传统前端框架在客户端高内耗的 JavaScript 激活机制,在编译阶段直接将页面直出为纯净无瑕的语义化 HTML 结构。
让您的企业官网、出海独立站从白屏等待中解放出来,全天候全时段拦截由于加载时延而白白流失的广告点击流量。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 是 | 版块核心主标题 |
| subtitle | string | 否 | 顶部悬浮标签微文案 |
| content | string | 是 | 富文本内容(支持传入带有排版标签的 HTML/Markdown 编译流) |
| image_url | string | 是 | 右/左侧展示图片的资产路径,留空则自动调用缺省占位图 |
| image_position | enum | 否 | 图片的物理对齐方位。可选枚举值:['left' (居左,文字居右), 'right' (居右,文字居左)] |
| cta_button | object | 否 | 磁性行动链接对象。结构规范:{ text: '链接文字', link: '/路径' } |
{
"component": "FeatureSection",
"props": {
"title": "原子化渲染",
"content": "<p>页面直出...</p>",
"image_url": "/img.jpg",
"image_position": "right"
}
}
原生多列轻量级图片瀑布流。适用于展示企业实力、生产车间环境、医疗机构案例或数字化作品集。内置流畅的渐隐浮层遮罩描述。
晨欣口腔 3D 数字化正畸层流诊室
光焰科技 自动化流水部署质检单元
智算中心 核心分布式高性能渲染机柜
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 是 | 画廊居中置顶的主标题 |
| items | array | 是 | 相册资产对象数组。单项结构规范:{ url: '图片路径', alt: '无障碍替代文本与悬浮描述' } |
{
"component": "Gallery",
"props": {
"title": "车间展示",
"items": [
{ "url": "/g1.jpg", "alt": "说明文案" }
]
}
}
轻量级直出首屏横幅。直接调用系统配置的根品牌色,利用现代 CSS 混合函数生成深色自然过渡,并覆盖一层高质感点阵呼吸纹理。
依托高内聚、零依赖的极速引擎,为您提供交付纯净源码的自主可控建站方案。第二年起仅需极低的服务器基础托管费用。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 是 | 大字号置顶主标题文案 |
| text | string | 否 | 辅助诠释的说明段落 |
| variant | enum | 否 | 背景颜色填充模型。可选枚举值:['gradient' (双阶渐变色), 'solid' (品牌色纯色直出)] |
{
"component": "Hero",
"props": {
"title": "重塑企业数字官网",
"text": "辅助文案...",
"variant": "gradient"
}
}
分布式智算中心/物理网点资产展示单元。提供电话热线一键调用、外部地图重定向联动,多用于集群矩阵内部逻辑的深度原子解构。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| name | string | 是 | 物理节点或区域算力中心的官方全称 |
| address | string | 是 | 节点所处的详细地理空间或高新区街道位置信息 |
| phone | string | 是 | 技术支持热线(系统会自动打包挂钩移动端 tel: 协议呼叫) |
| business_hours | string | 否 | 节点运行/技术值守时间区间(如:周一至周日 00:00-24:00 级全天候) |
| is_main | boolean | 否 | 布尔值。填入 true 则在卡片右上角自动激发‘核心枢纽’高亮微标签 |
| map_url | string | 否 | 三维地图/坐标导航路径。有值则渲染‘查看拓扑位置’按钮,无值则自动隐藏 |
| variant | enum | 否 | 卡片版面结构形态。可选枚举值:['card' (标准正方卡片形式), 'horizontal' (通栏横向结构)] |
{
"component": "LocationCard",
"props": {
"name": "西北算力托管集群",
"address": "高新技术园区智算中心 A3 区",
"phone": "400-XXX-XXXX",
"business_hours": "00:00 - 24:00",
"is_main": false,
"map_url": "https://uri.amap.com",
"variant": "card"
}
}
大厂工程级基础设施智能路由布局舱。内设数量感知判定:网点总数少于 5 个时切为极具空间感的横向通栏垂直排列,大于等于 5 个时全自动降维扩散为标准的响应式三栏九宫格矩阵。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 是 | 网点版块最上方的展示性核心标题 |
| subtitle | string | 否 | 辅助主标题,用于简述整体分布式网点的覆盖范围与物理集群规模 |
| locations | array | 是 | 物理节点数据集合数组。内部单项对象的传参字段规范与 LocationCard 保持 100% 映射一致 |
{
"component": "LocationGrid",
"props": {
"title": "分布式物理节点网络",
"subtitle": "提供大容量、低丢包率的底座集群骨干网支持。",
"locations": [
{
"name": "华东一号智算中心",
"address": "高新技术园区张江科技路",
"phone": "400-XXX-XXXX",
"business_hours": "00:00 - 24:00",
"is_main": true,
"map_url": "https://uri.amap.com"
}
]
}
}
系统级首屏营销大幕基座。支持多层遮罩动态计算、高码率视频或高清图片背景驱动,并内置专门的视觉分离式 SEO H1 隐藏语义增强逻辑。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| badge | string | 否 | 顶部胶囊微状态标签文本 |
| title | string | 是 | 核心主标题(支持传入用于局部高亮的语义或样式标签,如 <span>) |
| seo_title | string | 否 | 专供搜索引擎抓取的隐藏式 H1 内容,在视觉上保持完美隐藏,用作结构化语义增强 |
| bg_type | enum | 否 | 背景图层核心驱动渲染类型。可选枚举值:['gradient' (渐变), 'color' (纯色), 'image' (图片背景), 'video' (视频流背景)] |
| bg_value | string | 是 | 背景核心具体值。需与 bg_type 强关联:若为渐变/纯色则填入样式类名;若为图片/视频则填入媒体资产的绝对或网络 URL 路径 |
| alignment | enum | 否 | 容器内部元素整体对齐布局。可选枚举值:['left' (靠左对齐), 'center' (水平居中), 'right' (靠右对齐)] |
| height | enum | 否 | 大幕物理最小纵向高度尺寸规格。可选枚举值:['screen' (整屏 min-h-screen), 'large' (大高度 80vh), 'medium' (中等高度 60vh)] |
| overlay_type | enum | 否 | 高对比度底层背景遮罩渲染模式。可选枚举值:['solid' (纯色过滤片), 'gradient' (渐变不透明过滤层)] |
| primary_cta | object | 否 | 第一核心行动呼吁按钮对象。数据结构:{ text: '按钮文案', link: '/路由目标' } |
| secondary_cta | object | 否 | 辅助次要行动呼吁按钮对象。数据结构:{ text: '按钮文案', link: '/路由目标' } |
{
"component": "AdvancedHero",
"props": {
"badge": "全新迭代 V2.0",
"title": "下一代分布式高可用底座",
"seo_title": "智算网络多活数据中心架构",
"bg_type": "image",
"bg_value": "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1920",
"alignment": "center",
"height": "large",
"overlay_type": "gradient",
"primary_cta": { "text": "部署计算节点", "link": "/deploy" },
"secondary_cta": { "text": "查阅系统拓扑", "link": "/docs" }
}
}
行业资讯与新闻动态的标准响应式网格舱。支持卡片式悬浮视觉聚焦、多终端自适应布局,并内置多语言底层文案配置开关。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| posts | array | 是 | 文章数据对象集合。单项结构规范:{ title: '文章标题', excerpt: '内容摘要', image: '封面图片网络URL', date: '标准发布日期' } |
{
"component": "BlogList",
"props": {"posts": [
{
"title": "全球数字化资产配置与发展指南",
"excerpt": "多节点协同生产模式下的资源调用逻辑与核心治理模型深度透视。",
"image": "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=600",
"date": "2026-05-28"
}
]
}
}
结构化内容指引目录。多用于企业服务条款(Terms)、隐私协议(Privacy)或者长篇长文页,自带点缀微动画。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 否 | 自定义目录页眉。留空则自动回退并调用系统内置的国际化默认文案 |
| links | array | 是 | 锚点跳转链接列表。单项结构规范:{ text: '显示文本', url: '#对应区域锚点ID' } |
{
"component": "ContentTable",
"props": {
"title": "快速指南目录",
"links": [
{ "text": "1. 核心架构", "url": "#arch" }
]
}
}
大面积高饱和度视觉冲击模块,用于落地页尾部的收尾转化。右顶左底双向毛玻璃光晕,强力吸睛,提高获客留资转化率。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 是 | 主导高饱和转化标题。建议字数精简,极具营销冲击力 |
| subtitle | string | 否 | 副标题说明。主要用于补充核心权益或打消客户留资顾虑 |
| btnText | string | 否 | 转化按钮的视觉文本(例如:立即免费获取体检方案) |
| btnLink | string | 否 | 按钮点击后的跳转路由或表单锚点路径 |
{
"component": "CTASection",
"props": {
"title": "准备好让官网升级秒开了吗?",
"subtitle": "告别传统的慢卡顿模板...",
"btnText": "申请免费技术测速诊断",
"btnLink": "/contact"
}
}
服务与系统核心能力展示网格。基于自动化矢量微图标映射引擎构建,结合隔离式层叠样式设计,完美支持高对比度自适应主题。
基于分布式计算节点分发技术与并行流式数据处理层,消除系统交互时延,实现指令集的高并发即时响应。
严密的数据隔离封装与高等级多区域容灾解耦机制,提供完全自主可控的数据沙箱与安全审计合规底座。
智能网络节点自适应感知环境源,跨地域多中心无缝负载均衡,保障全球化多维数据链路的安全稳定运转。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 否 | 特性矩阵板块顶部的核心归类大标题 |
| items | array | 是 | 特性优势项集合。icon 参数支持标准的连字符小写矢量标示代号(如 text-cursor) |
| id | string | 否 | HTML 元素内部底层唯一锚点 ID,用作结构化导航关联与追踪 |
{
"component": "Features",
"props": {
"title": "核心系统能力指标",
"items": [
{
"icon": "zap",
"title": "高吞吐流式计算引擎",
"description": "基于分布式计算节点分发技术,消除系统交互时延。"
}
]
}
}
全域级顶置通知公告栏。内置高精度客户端时间戳校验机制,支持自动起止时序范围控制显隐,提供高转化率的无损脉冲微光动效,常用于发布核心基础设施变更、版本迭代公告或全局系统遥测状态。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| text | string | 是 | 核心公告广播的核心文本载荷 |
| icon | string | 否 | 通知文本前置的高亮符号或状态标识令牌(如 🚀) |
| link | string | 否 | 全局联动跳转的绝对或相对目标路由路径 |
| startTime | string | 否 | 自动化分流显示开始时间,支持 ISO 标准格式(如 2026-11-20T00:00:00) |
| endTime | string | 否 | 自动化生命周期结束时间,超期后在前端自动隔离并隐藏 |
| bgColor | string | 否 | 容器渐变底色的 Tailwind 工具类名组合(如 from-indigo-600 via-purple-600 to-pink-600) |
{
"component": "AnnouncementBar",
"props": {
"text": "骨干网络核心路由矩阵全量升级中,全球多活边缘节点正在执行热重载调度。",
"icon": "⚡",
"link": "/status",
"bgColor": "from-indigo-600 via-purple-600 to-pink-600"
}
}
高并发异步数据交换网格。内置提交隔离锁与自适应解析引擎,支持客户端请求上下文路由参数的深度绑定与结构化校验。
提交您的系统运行上下文,我们的系统架构团队将在标准审计周期内发起安全通道对接。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| fields | array | 是 | 允许交互并捕获的结构化数据字段集合,例如 ['name', 'email', 'phone', 'message'] |
| title | string | 否 | 数据交换板块的核心归类大标题 |
| subtitle | string | 否 | 副标题描述文案,用于前置业务场景注解 |
| submit_text | string | 否 | 数据交互执行按钮的显式标签(如:立即提交 / 启动数据对接) |
{
"component": "ContactForm",
"props": {
"fields": ["name", "email", "message"],
"title": "启动全球企业级数据架构集成方案",
"subtitle": "提交您的系统运行上下文,我们的系统架构团队将在标准审计周期内发起安全通道对接。",
"submit_text": "启动安全链路同步"}
}
高性能结构化折叠信息舱。基于自适应高度流式弹性布局,实现了杜绝运行时闪烁与页面重绘(Reflow)的微动效平滑交互。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| title | string | 否 | 折叠矩阵顶部的核心归类大标题 |
| items | array | 是 | 嵌套问答或数据索引列表对。q 为标题层,a 为激活后向下展开的结构化多行文案层 |
| width | string | 否 | 外层包裹容器的最大跨度限制(Tailwind 类名,默认 max-w-7xl) |
{
"component": "FaqAccordion",
"props": {
"title": "系统网络架构与集成层级说明",
"items": [
{
"q": "多区域集群环境下的分布式状态如何保证高一致性同步?",
"a": "系统采用多活状态机事务总线与高性能事件消息管道,确保数据高速同步。"
}
]
}
}
独占型触达通道舱。废除繁琐的数组过滤,采用完全正交的单通道强控制结构,全量统一主副标题文案体系,干净直观地收录用户的即时链接意向。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| position | string | 否 | 挂件在视口水平方向的固定方位,可选 'left' 或 'right',默认:'right' |
| channel | object | 是 | 互斥通讯节点载荷。单次仅支持映射一种核心渠道,子结构:{ type: 'whatsapp'|'wechat'|'phone', title: 主标题, subtitle: 副标题, actionText: 动作文案(可选), account: 账号(可选), qrUrl: 二维码(可选) } |
{
"component": "FloatingContact",
"props": {
"position": "right",
"channel": {
"type": "wechat",
"qrUrl": "https://images.unsplash.com/photo-1618401471353-b98aedd07871?auto=format&fit=crop&w=300&q=80",
"title": "对接专属技术专家",
"subtitle": "即刻获取多活数据中心配额度量与数字化中台审计报告。",
"actionText": "微信扫码申请"
}
}
}
交互式前后视觉对比滑块。锁死 16:9 黄金视效比例,针对移动端触控与桌面端拖拽进行了底层像素级平滑优化,广泛适用于数字化重构前后、医疗美容/口腔种植等高客单价案例的震撼呈现。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| beforeImage | string | 是 | 重构前/诊疗前的源图片 URL 路径 |
| afterImage | string | 是 | 重构后/诊疗后的效果图片 URL 路径 |
| beforeLabel | string | 否 | 左下角覆盖的基准状态标签文本(如:优化前 / 诊疗前) |
| afterLabel | string | 否 | 右下角覆盖的效果状态标签文本(如:分太极光重构 / 诊疗后) |
{
"component": "ImageComparison",
"client": "visible",
"props": {
"beforeImage": "/images/before.jpg",
"afterImage": "/images/after.jpg",
"beforeLabel": "诊疗前",
"afterLabel": "诊疗后"
}
}
多维结构化视觉矩阵。基于声明式媒体清洗层,支持单维度字符串数组与动态对象结构之间的自适应异构转化。内置轻量级延迟渲染机制(Lazy-loading)与平滑微动效,常用于高级工程拓扑、分布式拓扑监控或数字化底座的多维细节堆叠。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| images | array | 是 | 异构媒体资产源。支持纯图片网络直连 URL 字符串数组,或带有标准映射参数的对象列表 |
| columns | number | 否 | 视口断点以上的网格系统核心分布列数,默认:2 |
| gap | string | 否 | 网格矩阵节点间的弹性间距,支持标准 CSS 跨度或 Tailwind 布局间距类名,默认:1rem |
{
"component": "ImageGrid",
"props": {
"columns": 3,
"gap": "1.5rem",
"images": [
"https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=800&q=80",
{ "url": "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=800&q=80", "alt": "集群部署" }
]
}
}
宽幅级微动效视域大看板。内嵌硬件加速的跨平台多模态滑动模块,融合亚秒级流体平滑动效与动态多层级半透明黑卡蒙层覆盖,确保在各种异构分辨率视口下,文本数据的高对比度视网膜级收录。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| slides | array | 是 | 高光视域幻灯片资产列表。包含核心直连媒体路径、动态标题以及拓扑简述 |
| autoplayDelay | number | 否 | 自适应轮播停留间隔(单位:毫秒),默认:5000 |
| class | string | 否 | 允许透传并击穿覆盖至宿主容器的外层 Tailwind 附加类名 |
{
"component": "ImageSlider",
"props": {
"autoplayDelay": 6000,
"slides": [
{
"image": "https://images.unsplash.com/photo-1544383835-bda2bc66a55d?auto=format&fit=crop&w=1600&q=80",
"title": "新一代云原生高可用计算底座",
"description": "基于无锁化解耦微服务拓扑与自主可控的高性能运行时内核。"
}
]
}
}
高性能异构数据捕获舱。相较于单列 ContactForm,此组件采用高容量双排排版栅格(sm:grid-cols-2),内置通用运行时参数智能捕获器,支持通过异步 Fetch 管道将结构化请求中立地分流至指定的数据清洗核心。
请提交您的系统规模与性能诉求,高级方案专家将在1个工作小时内为您输出初步的链路解耦与资源调度报告。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| siteId | string | 是 | 低代码容器站点的全局唯一上下文校验 Token |
| fields | array | 否 | 线索载荷字段映射清单(可选范围如:['name', 'phone', 'email', 'message']) |
| title | string | 否 | 数据舱版块顶部展现的呼唤大标题 |
| subtitle | string | 否 | 补充说明文案,用于规范留资行为或交付时效期望 |
{
"component": "InquiryForm",
"props": {
"siteId": "site_runtime_core_inquiry",
"fields": ["name", "phone", "email", "message"],
"title": "申请基础设施审计与算力配额"
}
}
用户视觉标识原子组件。遵循 Shadcn UI 基础骨架规范,当图片资源缺失或加载失败时,内部逻辑会自动切分用户名称并提取前两位字符转换为全大写英文,并自动以品牌主色(--brand-primary)进行兜底背景渲染。
| 参数名 | 类型 | 必填 | 作用 |
|---|---|---|---|
| src | string | 否 | 头像图片的真实物理或网络 URL 路径 |
| name | string | 否 | 展现的用户名称/品牌主称(用于首字母裁剪兜底逻辑) |
| className | string | 否 | 控制头像尺寸与圆角维度的外透 Tailwind 类名限制 |
{
"component": "UserAvatar",
"props": {
"src": "/images/user.jpg",
"name": "Roy Du",
"className": "w-12 h-12"
}
}