Skip to main content

Module components

Module components 

Source
Expand description

组件模块 —— 按「可复用层级」组织,从通用到特定。

【导航】写 rsx! 前先查这里,避免手搓重复的 Tailwind class:

  • 要 class 常量或通用原子(按钮 / 输入 / 徽章 / 空状态)? → 原子层
  • 要页面外壳或全局导航? → 布局层
  • 要特定页面域(文章 / 评论 / 代码运行)的组件? → feature 层
  • 数据加载占位? → 骨架屏层

层级越靠上越通用、对 app 其余部分依赖越少;feature 层组件绑定各自的 models / Route / api,不应跨页面域复用。同一类样式或结构只允许 存在一个实现 —— 新增前先在本模块对应层查找,缺功能就扩展现有组件, 不要在旁边另起一套(散落的内联 class 是被禁止的反模式)。

Modules§

admin_layout
后台布局组件(侧栏 + 内容区 + admin 路由骨架屏切换)。 后台管理布局组件
assets
素材选择与上传 modal 组件。 素材相关组件模块
code_runner
代码运行器组件(可运行代码块 UI)。 代码运行器(Code Runner)组件。
comments
评论组件(列表 / 表单 / 待审核项)。 评论组件模块
empty_state
空状态组件(无数据时的插画配图 + 文案)。 空状态组件。
footer
页脚与回到顶部按钮组件。 页脚组件
forms
表单控件(FormInput / FormSelect / AlertBox / …)与 INPUT class 常量。 表单控件组件
frontend_layout
前台布局组件(header + footer + 路由骨架屏切换)。 前台布局组件
header
顶部导航栏组件。 顶部导航栏组件
nav
导航项生成组件。 前台导航项配置
post
文章详情页组件(标题 / 正文 / 目录 / 面包屑 / 相邻导航)。 文章详情组件模块
post_card
文章列表卡片组件。 文章卡片组件
skeletons
各页面数据加载期间的占位组件集合,以及通用骨架原子。 骨架屏组件模块
sql_result_table
SQL 查询结果表格组件(SQL 控制台专用)。 SQL 查询结果表格组件。
ui
通用 UI 原子与全部 class 常量(卡片 / 按钮 / 徽章 / 分页 / spinner / checkbox)。 任何 inline Tailwind class 字符串上线前,先在此查是否已有常量。 通用 UI 原子组件与类名常量。