业务组件SmoUI 自研

ModuleCard

用于 smolink-online 模块开通、管理和限制提示的业务卡片，封装模块状态、套餐、指标和审计语义。

查看预览 Registry 资产

定位

基础组件直接使用 shadcn/ui；SmoUI 维护中文业务规则、模板和验收流程。

源码路径

components/smo/ui/module-card.tsx

快速开始

页面里直接调用 SmoUI 业务组件。组件内部可以复用 shadcn/ui 底座，但对外暴露的是 Smo 场景语义。

安装到项目

npx shadcn@latest add @smo/smo-module-card

页面直接调用

import { ModuleCard } from "@/components/smo/ui/module-card"

export default function ExamplePage() {
  return (
    <ModuleCard moduleName="会员中心" owner="smolink-online" status="enabled" description="管理会员权益、等级和核销策略。" />
  )
}

Preview / Code

预览使用 Smo 业务语境命名，避免只停留在抽象控件展示。

4 个变体

components/smo/ui/module-card.tsx

module

package

metric

status

smolink-online

会员中心

已开通

管理会员权益、等级和核销策略，适合商家日常运营。

套餐

增长套餐

指标

核销率 68%

审计记录开启

变体

enabled

生成页面时按业务语义选择，不按视觉喜好随机切换。

available

生成页面时按业务语义选择，不按视觉喜好随机切换。

locked

生成页面时按业务语义选择，不按视觉喜好随机切换。

risk

生成页面时按业务语义选择，不按视觉喜好随机切换。

业务组合

复用底座原语

底层继续使用 shadcn/ui 和 Base UI，不把基础按钮、弹窗、卡片重新发明一遍。

映射 Smo 场景

根据 SmoArch、SmoLink、smolink-online、SmoFan、SmoMark 的边界决定组件出现的位置和状态。

沉淀业务模板

成熟组合进入页面模板和 registry，让下一次从一句话生成 UI 时可以复用。

SMO 使用规则

只用于 Smo 模块或套餐对象，不作为普通 Card 替代品。

每张卡片只保留一个主动作，避免管理和开通同时出现。

受限和风险状态必须说明限制来源，并进入审计记录。

列表里优先展示模块名、状态、套餐和一个业务指标。

API 参考

属性	类型	默认值	说明
moduleName	`string`	-	模块名称。
status	`enabled \| available \| locked \| risk`	-	模块状态，决定标签、图标和默认动作。
owner	`string`	-	产品或工作区归属。
description	`string`	-	模块用途说明。
packageName	`string`	未绑定	关联套餐。
metric	`string`	待配置	模块最重要的经营指标。
onAction	`() => void`	-	主动作回调。