# React Suite 设计系统 ## React Suite 设计系统界面预览 选择一天，查看本地日程，通过模态框添加日程，或将其移除。周末不允许添加。 ## React Suite 设计系统设计参考 React Suite 6.2.4 编译后的样式表，已根据当前 v6 CSS 变量文档进行核对。以下数值为首次定义值或默认值；在其他 provider 主题中，语义别名可能解析为不同值。日历的自定义布局规则已单独标明。 ### 排版 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --rs-font-family-base | -apple-system, BlinkMacSystemFont, Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STXihei, sans-serif | 系统字体栈，包含 CJK 回退字体。 | | --rs-html-font-size | 16px | 根字号。 | | --rs-font-size-sm | 0.875rem | 根字号为 16px 时为 14px；默认正文比例。 | | --rs-font-size-md | 1rem | 默认根字号为 16px。 | | --rs-font-size-lg | 1.125rem | 默认根字号为 18px。 | | --rs-font-size-xl | 1.25rem | 默认根字号为 20px。 | | --rs-font-size-2xl | 1.5rem | 默认根字号为 24px。 | | --rs-line-height-md | calc(20 / 14) | 默认正文比例。 | ### 间距与圆角 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --rs-spacing | 0.25rem | 基础间距增量。 | | --rs-padding-inline-md | 12px | 组件的中等水平内边距。 | | --rs-padding-block-md | 8px | 组件的中等垂直内边距。 | | --rs-radius-sm | 0.25rem | 默认根字号为 4px。 | | --rs-radius-md | 0.375rem | 默认根字号为 6px。 | | --rs-radius-lg | 0.5rem | 默认根字号为 8px。 | | --rs-radius-xl | 0.75rem | 默认根字号为 12px。 | ### 主色阶 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --rs-primary-50 | #F2FAFF | 默认主色调色板等级 50。 | | --rs-primary-100 | #CCE9FF | 默认主色调色板等级 100。 | | --rs-primary-200 | #A6D7FF | 默认主色调色板等级 200。 | | --rs-primary-300 | #80C3FF | 默认主色调色板等级 300。 | | --rs-primary-400 | #59AFFF | 默认主色板级别 400。 | | --rs-primary-500 | #3498ff | 默认主色板级别 500。 | | --rs-primary-600 | #2589F5 | 默认主色板级别 600。 | | --rs-primary-700 | #1675E0 | 默认主色板级别 700。 | | --rs-primary-800 | #0A5DC2 | 默认主色板级别 800。 | | --rs-primary-900 | #004299 | 默认主色板级别 900。 | ### 语义化界面表面与状态 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --rs-bg-card | var(--rs-gray-0) | 日历和议程界面表面。 | | --rs-bg-well | var(--rs-gray-50) | 页面外部背景。 | | --rs-bg-overlay | var(--rs-gray-0) | 模态框界面表面。 | | --rs-text-primary | var(--rs-gray-800) | 常规阅读文本。 | | --rs-text-secondary | var(--rs-gray-600) | 元数据和辅助信息。 | | --rs-text-error | var(--rs-color-red) | 验证消息。 | | --rs-border-primary | var(--rs-gray-200) | 议程分隔线和面板边界。 | | --rs-btn-primary-bg | var(--rs-primary-500) | 主按钮填充色。 | | --rs-btn-primary-text | var(--rs-gray-0) | 主按钮文本。 | | --rs-state-focus-shadow | 0 0 0 2px rgb(from var(--rs-primary-500) r g b / 25%) | 焦点强调色。 | ### 日历布局选项 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | isoWeek | true | 日历每周从周一开始。 | | Initial date | new Date(2026, 9, 14) | 固定的十月示例；JavaScript 月份索引从零开始。 | | Layout switch | 760px | 原始单列断点。 | | Weekend rule | getDay() is 0 or 6 | 原始本地日程安排策略，不是 Calendar 的限制。 | ## React Suite 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## React Suite 设计系统：带独立议程的原生日历 ### 采用原生日历，并配有独立议程 > React Suite 面向组件丰富的应用，提供各类控件以及 Calendar 等更大的工作界面。本示例使用版本 6.2.4 及其编译后的样式表。应用由 CustomProvider 包裹，Calendar、Panel、Modal 等组件则从 rsuite 导入。 这个日历并不假装自己是一个联网的日程安排服务。它包含两个初始示例日程，并允许在本地添加或删除日程。选中日期和日程列表是彼此独立的 React 状态，因此切换日期不会修改日程安排。读者可以在完整的 App 源码中查看每一次状态变更。 阅读配套规范 ## React Suite 设计系统 v6 CSS 变量参考 ### v6 CSS 变量参考 此规范依据已安装的 v6 CSS，而非较早的 Less 教程编写。排版、间距、圆角、调色板和语义角色都可通过 --rs 变量使用。默认正文采用 0.875rem 的小号字体，而根字号仍为 16 像素。这一区别解释了为什么默认控件界面表面看起来可能比 16 像素字号的正文文章更紧凑。 页面在 --rs-bg-card 面板后方使用 --rs-bg-well，并使用 --rs-border-primary 分隔日程。日期标记使用 primary-500；字段错误使用语义角色 text-error。参考实现保留了文本和界面的别名，因此即使提供方主题改变了这些变量的解析方式，各角色仍然清晰易懂。 阅读配套规范 ## React Suite 设计系统：围绕日历使用库的尺寸比例 ### 围绕日历使用库的尺寸比例 在默认根字号下，实际的圆角尺寸比例包含 sm 到 xl 对应的 4、6、8 和 12 像素值。基础间距单位为 0.25rem。提供的 CSS 并未将这些尺寸仅仅当作装饰性调色板，而是在周边的日程和辅助内容中实际使用了界面表面和文本变量。 应用标题明确采用 32px 字号和 1.2 行高，在窄屏上缩小为 28px。日程标题采用 17 像素字号，以适应紧凑的日程行。这些页面级设置不会覆盖库的全局排版变量。因此，日历标签和模态框控件仍保留组件的原生尺寸。 阅读配套规范 ## React Suite 设计系统：控制选中日期，避免 UTC 偏移 ### 控制选中日期，避免 UTC 偏移 Calendar 接收一个 Date 值，onSelect 会更新该选中值。isoWeek 会将可见周的起始日设为星期一。固定的初始值使用 new Date(2026,9,14)，其中九代表十月，因为 JavaScript 的月份从零开始计数。此页面是一个刻意固定的示例，并非对今天日期的判断。 键值生成函数使用 getFullYear、getMonth 和 getDate 生成本地 YYYY-MM-DD 键。它不会使用 toISOString().slice(0,10)，因为后者会转换为 UTC，在某些时区中可能导致本地日历日期偏移。这些记录表示不带具体时间的日期，因此隐式转换为 UTC 会引入数据本身并未包含的含义。 阅读配套规范 ## React Suite 设计系统：日期标记与选中日期的内容 ### 日期标记与选中日内容 renderCell 会检查本地记录中是否包含该日期的条目，并返回一个小型事件标记。标记仅作辅助；选中日期后，日程中会显示实际标题。单靠一个彩色圆点，用户既无法知道安排了什么，也无法确定要删除哪一项。 精简的日历在移动端视图中仍保持窄小。日程位于独立的 Panel 中，包含日期标题、日程卡片和本地添加操作。在原有的 760px 断点处，日程会移到日历下方。这样的布局无需在每个日历单元格中挤入完整的事件标题，也能避免日历横向展开后难以阅读。 1. 选择包含 Navigation review 的示例日期。 2. 在日程中查看日程标题，不要只依赖圆点标记。 3. 删除该日程，并确认记录清空后日期标记也会消失。 阅读配套规范 ## React Suite 设计系统：应用的日程规则明确清晰 ### 明确应用的日程安排规则 使用 getDay() 的返回值 0 和 6 禁止安排周末日程。日历仍允许选择这些日期，以便日程显示规则说明，而不是让用户误以为日期无法使用。页面会显示警告消息，并禁用添加按钮。这是本地团队策略，并非 React Suite Calendar 的限制。 没有日程的工作日会显示明确的空状态，同时保留添加操作。删除日程会修改记录并显示本地通知，但不会声称已通知参与者。源码中展示了 Date 对象、记录数组和简单策略，方便在实际产品中有意地替换这些实现。 阅读配套规范 ## React Suite 设计系统：专注的录入对话框与验证 ### 带验证功能的简洁条目对话框 打开“添加评审日程”时，会清空标题和之前的错误。Modal 使用 Header、Title、Body 和 Footer 组合，并由 React 状态控制 open 和 onClose。输入框有明确关联的标签、无效状态和错误描述。标题去除首尾空格后若少于 3 个字符，模态框会保持打开并显示警告。 有效提交会为选中日期添加一条记录、关闭模态框并显示提示消息。Modal 组件会处理对话框行为，包括 Escape 键和焦点管理。取消操作只会关闭草稿。应用会先确认标题符合自身规则，再关闭模态框。 - 取消操作会舍弃未保存的标题。 - 被拒绝的标题仍会保留，供用户修改。 - 有效标题会添加一条本地记录，并更新日历标记。 阅读配套规范 ## React Suite 设计系统：加载 v6 样式与完整应用 ### 加载 v6 样式与完整应用 在 React 项目中安装 rsuite@6.2.4，并导入 rsuite/dist/rsuite.min.css。App 示例包含该导入、原有的 style.css 和 CustomProvider 包装器。入口设置使用 React createRoot，且不依赖远程 CDN。独立预览在本地打包了相同的原生组件和 CSS。 React Suite 还提供了不含重置样式的样式表发行版本。此示例特意使用标准样式表；混用这两种发行版本会造成样式重复，也会让页面采用哪种重置规则变得不明确。在现有应用中，应选择适合周边样式架构的发行版本，并一并检查表单和标题的样式。 阅读配套规范 ## React Suite 设计系统：实际日历需要额外的领域状态 ### 真正的日历还需要额外的领域状态 连接日历服务需要时间、时区、参与者、权限和持久化结果。这个仅包含日期的示例不会凭空添加这些字段，也不会假装成功更新状态就代表已发送邀请。页脚和提示信息明确展示了本地功能的范围。本地日期键函数适用于这些记录，但并非处理时区会议的完整方案。 如果要添加远程请求，请在确认操作成功之前保持草稿模态框打开；或者在出错时显示可恢复的错误提示。请防止重复提交，并在失败后保留所选日期和标题。组件库提供界面基础组件；应用是否正确，取决于这些组件是否与实际操作相连。 阅读配套规范 ## React Suite 设计系统组件示例 ### 完整的日历与日程应用 受控日历，包含日期单元格标记、本地日期键和模态框录入流程。 ``` import React,{useState} from 'react'; import {CustomProvider,Calendar,Panel,Button,Modal,Input,Message,Tag} from 'rsuite'; import 'rsuite/dist/rsuite.min.css'; import './style.css'; const key=d=>`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`; export default function App(){const[date,setDate]=useState(new Date(2026,9,14)),[open,setOpen]=useState(false),[title,setTitle]=useState(''),[error,setError]=useState(''),[notice,setNotice]=useState(''),[events,setEvents]=useState([{id:1,date:'2026-10-14',title:'Navigation review'},{id:2,date:'2026-10-16',title:'Prototype handoff'}]);const selected=events.filter(e=>e.date===key(date));const weekend=[0,6].includes(date.getDay());function save(){if(title.trim().length<3){setError('Use at least three characters for the session title.');return;}setEvents([...events,{id:Date.now(),date:key(date),title:title.trim()}]);setOpen(false);setNotice('Added to the local calendar only. No invitation was sent.');} return

REACT SUITE / TEAM CADENCE

Give the work a place in the week.

Select a day to inspect its sessions. Weekend scheduling is disabled in this example.

Local calendar
{notice&&setNotice('')}>{notice}}
events.some(e=>e.date===key(d))?:null}/>

A date with one or more local sessions

{date.toLocaleDateString('en',{weekday:'long'})}

{date.toLocaleDateString('en',{month:'long',day:'numeric',year:'numeric'})}

{weekend&&The sample team does not schedule weekend reviews.}
{selected.length?selected.map(e=>
Review session

{e.title}

):

No sessions for this day.

Choose another date or add a local review session.

}
Native React Suite Calendar, Panel, Modal, Input, Message and Button. All dates are local calendar dates; no remote calendar connection.
setOpen(false)} size='sm'>Add review session

For {key(date)}. This adds a record only in the preview.

{setTitle(v);setError('')}} aria-invalid={!!error} aria-describedby='title-error' autoFocus/>{error&&}
} ``` 代码参考 - 在 new Date 中，月份值从零开始计数。 - 日期键使用本地日历字段，而非转换为 UTC。 - 周末限制属于应用行为。 ### 响应式日历布局 围绕原生组件使用真实的 React Suite 语义变量。 ``` body{background:var(--rs-bg-well)}.schedule{max-width:1120px;margin:auto;padding:32px;color:var(--rs-text-primary)}header{display:flex;gap:24px;justify-content:space-between;align-items:start;margin-bottom:24px}h1{font-size:32px;line-height:1.2;letter-spacing:-.03em;max-width:650px;margin:8px 0 16px}h2{font-size:24px;line-height:1.3;margin:8px 0 24px}.eyebrow{font-size:11px;letter-spacing:.11em;font-weight:700;color:var(--rs-text-secondary)}.schedule-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-top:20px}.calendar-panel,.agenda-panel{background:var(--rs-bg-card)}.calendar-panel .rs-panel-body{padding:20px}.event-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rs-primary-500)}.calendar-legend{font-size:12px;color:var(--rs-text-secondary);margin-top:16px}.calendar-legend .event-dot{margin-right:6px}.agenda{margin-bottom:24px}.agenda article{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--rs-border-primary);padding:20px 0}.agenda h3{font-size:17px;line-height:1.3;margin:6px 0}.event-kind{color:var(--rs-text-secondary);font-size:12px}.empty{padding:24px 0;color:var(--rs-text-secondary)}footer{margin-top:24px;font-size:12px;color:var(--rs-text-secondary)}.field-error{color:var(--rs-text-error);font-size:13px;margin-top:8px}label{display:block;margin-bottom:8px;font-weight:600}@media(max-width:760px){.schedule{padding:20px 16px}.schedule-grid{grid-template-columns:1fr}header{flex-direction:column}h1{font-size:28px}.calendar-panel .rs-panel-body{padding:12px}} ``` 代码参考 - 页面标题和 760px 断点是原始设计选择。 ## React Suite 设计系统 Agent 设置 ### 实现起点 使用 React 19 和 React Suite 6.2.4 构建的原生示例。未使用外部日历服务。上文提供了完整应用和样式。 ``` // Create the project first: // npm create vite@latest react-suite-specimen -- --template react // cd react-suite-specimen && npm install // In a React project: // npm install rsuite@6.2.4 // Save the complete App example as App.jsx and the CSS example as style.css. import React from 'react'; import {createRoot} from 'react-dom/client'; import App from './App.jsx'; createRoot(document.getElementById('root')).render(); // index.html needs
and the Vite module entry. // App.jsx imports rsuite/dist/rsuite.min.css and wraps CustomProvider. // Keep the template index.html and replace its entry with the code above. // npm run dev ``` ### 适用于你项目的提示词 ``` 使用 React Suite 6.2.4 日历与日程组合，并搭配 CustomProvider 和原生样式表。保留工作日选择、周末禁用行为，以及用于本地审核条目的 Modal/Input 流程。在应用状态中保留所选日期和日程条目；添加条目前验证输入的审核信息；取消时不更改日程。保留响应式日历布局和按日期显示的日程内容。不要暗示应用会发送日历邀请或使用外部日程服务。 ``` ## React Suite 设计系统来源与范围 React Suite 6.2.4。本地日期日历，采用原始周末规则和示例记录；不发送邀请，也不连接外部日程服务。 - 快速入门 软件包与样式表设置。 - CSS 变量 v6 字体排印、颜色、间距和圆角。 - 日历 受控日期与单元格渲染 API。 - 模态框 复合模态框与焦点行为。 - 输入 文本输入组件。 - CustomProvider 提供程序级组件配置。 ## React Suite 设计系统相关资源 ### Skeleton 通过完整的阅读桌面体验，比较 Skeleton 5.0.1 的 Cerberus、Mint 和 Rose 真实主题，并实时检查设计令牌、暗色界面表面组合及可逆的本地状态。 ### Tabler 原生 Tabler 项目日志，采用实际的 1.6 主题变量、时间线卡片、数据网格上下文、模态框验证，以及可接收本地检查点的明暗主题组合。 ### Tamagui 通过完整的原生组件习惯追踪板（含验证、进度和空状态恢复），了解 Tamagui 实际的 v5 令牌类别以及浅色／深色蓝色主题。 - [实现参考](https://www.rsuitejs.com/components/calendar/) - [来源](https://www.rsuitejs.com/guide/css-variables/) - [来源](https://www.rsuitejs.com/components/calendar/) - [阅读配套规范](https://www.rsuitejs.com/guide/usage/) - [阅读配套规范](https://www.rsuitejs.com/guide/css-variables/) - [阅读配套规范](https://www.rsuitejs.com/components/calendar/) - [阅读配套规范](https://www.rsuitejs.com/components/modal/) - [代码参考](https://www.rsuitejs.com/components/calendar/) - [代码参考](https://www.rsuitejs.com/guide/css-variables/) - [快速入门 软件包与样式表设置。](https://www.rsuitejs.com/guide/usage/) - [CSS 变量 v6 字体排印、颜色、间距和圆角。](https://www.rsuitejs.com/guide/css-variables/) - [日历 受控日期与单元格渲染 API。](https://www.rsuitejs.com/components/calendar/) - [模态框 复合模态框与焦点行为。](https://www.rsuitejs.com/components/modal/) - [输入 文本输入组件。](https://www.rsuitejs.com/components/input/) - [CustomProvider 提供程序级组件配置。](https://www.rsuitejs.com/components/custom-provider/)