功能区 Features

概览

Features 是一个综合性的功能展示组件，支持三个层级的内容：主功能大图展示、图片特性网格和其他特性列表。适合在产品页中全面展示产品能力。

实时预览

核心能力

为什么选择我们
一站式解决方案

我们提供从内容创作到发布的完整工作流。

核心功能

极速响应

毫秒级的页面加载速度。

安全加固

企业级的安全防护体系。

全球分发

CDN 加速覆盖全球。

灵活配置

高度可定制的配置选项。

使用方法

import { Features } from '@goenhance/cms-ui';
import { Zap, Shield, Globe } from 'lucide-react';

const Example = () => (
  <Features
    badge="产品特性"
    title="强大功能"
    subtitle="一站搞定"
    description="全面的功能覆盖。"
    mainFeature={{
      badge: "核心亮点",
      title: "可视化编辑器",
      description: "拖拽即所得...",
      text: "立即体验",
      url: "/demo",
      mediaUrl: "/feature-main.jpg",
      alt: "编辑器截图"
    }}
    imageFeatures={{
      title: "核心功能",
      list: [
        { icon: Zap, title: "极速", description: "...", color: "text-yellow-500" }
      ]
    }}
    otherFeatures={{
      title: "更多能力",
      list: [
        { icon: Shield, title: "安全", description: "...", color: "text-green-500" }
      ]
    }}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
badge	string	-	顶部徽章文字
title	string	-	主标题
subtitle	string	-	渐变副标题
description	string	-	描述文本
mainFeature	MainFeature	-	主功能展示（大图+文案）
imageFeatures	{ title, list }	-	图标特性网格
otherFeatures	{ title, list }	-	其他特性列表
sectionId	string	"features"	section 元素的 id

FeatureItem

属性	类型	说明
icon	LucideIcon	图标组件
title	string	特性标题
subtitle	string	可选副标题
description	string	特性描述
color	string	图标颜色类
bgColor	string	自定义图标背景类

MainFeature

属性	类型	说明
badge	string	功能标签
title	string	功能标题
description	string	功能描述
text	string	按钮文字
url	string	按钮链接
target	string	链接打开方式
mediaUrl	string	展示图片 URL
alt	string	图片替代文本
poster	string	视频封面

特性

• 三层结构：主功能大图 + 图标网格 + 其他列表，灵活组合。
• 渐变副标题：subtitle 自动应用品牌渐变色。
• 悬停动效：卡片悬停时上浮并增强阴影，图标缩放。

---

主题覆盖

可覆盖变量

类名：mewx-cms-features

变量名	用途	默认值
--mewx-cms-features-bg	背景色	var(--blocks-bg-page)
--mewx-cms-features-badge-bg	徽章背景	var(--blocks-primary-lightest)
--mewx-cms-features-badge-border	徽章边框	var(--blocks-primary-lighter)
--mewx-cms-features-badge-text	徽章文字色	var(--blocks-primary)
--mewx-cms-features-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-features-muted-text	描述文字色	var(--blocks-text-muted)
--mewx-cms-features-gradient-text	渐变副标题	var(--blocks-gradient-text)
--mewx-cms-features-card-bg	卡片背景	var(--blocks-bg-card)
--mewx-cms-features-card-shadow	卡片阴影	var(--blocks-shadow-card)
--mewx-cms-features-card-hover-shadow	卡片悬停阴影	var(--blocks-shadow-card-hover)
--mewx-cms-features-card-radius	卡片圆角	var(--blocks-radius-2xl)
--mewx-cms-features-icon-bg	图标背景	var(--blocks-primary-lightest)
--mewx-cms-features-icon-radius	图标圆角	var(--blocks-radius-lg)
--mewx-cms-features-subtitle-text	特性副标题色	var(--blocks-primary)

覆盖示例

/* 暗色功能区 */
.dark-features {
  --mewx-cms-features-bg: 15 23 42;
  --mewx-cms-features-heading-text: 255 255 255;
  --mewx-cms-features-muted-text: 148 163 184;
  --mewx-cms-features-card-bg: 30 41 59;
  --mewx-cms-features-icon-bg: 51 65 85;
}

<Features className="dark-features" badge="核心能力" title="为什么选择我们" subtitle="解决方案" description="..." />