生成与 myOperator 设计系统匹配的生产就绪型 React/Tailwind CSS 代码。代码是独立的 - 不需要 myoperator-ui 包，但在视觉上与其组件相匹配。始终在输出中包含完整的 CSS 变量块。 ## 设计理念 myOperator 的设计语言是**专业、干净、有目的**： * **蓝灰色主调色板** (#343E55) — 精致且适合商业 * **绿松石色** (#2BBCCA) — 清新、现代的品牌标识 * **使用 Source Sans Pro 实现干净的排版** — 可读且专业 * **微妙的交互** - 对焦环、悬停状态、平滑过渡 * **语义颜色使用** - 成功/错误/警告状态清晰且一致其美学是**企业 SaaS**——值得信赖、高效、整洁。不浮华，不好玩，不实验。 ### 品牌颜色使用 **绿松石 (#2BBCCA) 仅适用于：** * 输入上的对焦环 * 活动/选定状态（切换开关、导航项） * 交互式徽章（例如“实时”指示器） * 链接和可点击的文本 **请勿将绿松石用于：**图表、图形、装饰元素、大背景、非交互式内容。对于图表/图形：使用 `--semantic-primary` (#343E55) 作为默认数据颜色。使用语义状态颜色表示含义（成功绿色 = 积极，错误红色 = 消极）。 ## 颜色系统始终在生成的输出中包含此 `:root` 块。有关完整的原始色阶（50-950 级），请参阅“references/design-tokens.md”。 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap'); ：根{ /* 主要用户界面 */ --语义主要：#343E55； --语义主要悬停：#2F384D； --语义主要选择：#777E8D； --语义主要突出显示：#252C3C； --语义主表面：#EBECEE； /* 品牌口音（绿松石色——仅限交互元素）*/ --语义品牌：#2BBCCA； --语义品牌悬停：#1F858F； --语义品牌选择：#71D2DB； --语义品牌表面：#EAF8FA； /* 背景 */ --semantic-bg-primary: #FFFFFF; --语义背景次要：#0C0F12； --semantic-bg-ui: #F5F5F5; --语义-bg-灰色：#E9EAEB； --语义背景悬停：#D5D7DA； --语义背景反转：#000000； /* 文本 */ --语义文本主要：#181D27； --语义文本次要：#343E55； --语义文本静音：#717680； --语义文本占位符：#A2A6B1； --语义文本链接：#4275D6； --语义文本反转：#FFFFFF； /* 边框 */ --语义边界主要：#343E55； --语义边界次要：#777E8D； --语义边框重音：#27ABB8； --语义边框布局：#E9EAEB； --语义边界输入：#E9EAEB； --语义边框输入焦点：#2BBCCA； /* 禁用 */ --语义禁用-主要：#A2A6B1； --语义禁用次要：#EBECEE； --语义禁用文本：#717680； --语义禁用边框：#D5D7DA； /* 错误 */ --语义错误主要：#F04438； --语义错误悬停：#D92D20； --语义错误表面：#FEF3F2； --语义错误文本：#B42318； --语义错误边框：#FDA29B； /* 警告 */ --语义警告主要：#F79009； --语义警告表面：#FFFAEB； --语义警告文本：#B54708； --语义警告边框：#FEC84B； /* 成功 */ --语义成功主要：#17B26A； --语义成功表面：#ECFDF3； --语义成功文本：#067647； --语义成功边框：#75E0A7； /* 信息 */ --语义信息主要：#4275D6； --语义信息表面：#ECF1FB； --语义信息文本：#2F5398； --语义信息边框：#C4D4F2； } 身体{ 字体系列：'Source Sans Pro'，sans-serif；背景：var(--semantic-bg-primary); 颜色：var(--语义文本-主)；保证金：0；填充：0； } ## 版式 **字体** ：`'Source Sans Pro'、sans-serif` — 始终以粗细 400;600;700 导入。 **约定**：默认主体为**16px**。仅对辅助/辅助文本使用 14px。 12px 用于稀有元数据。亲切 |尺寸|重量 |使用案例 ---|---|---|--- 标题/大| 32 像素 | 600 |页面标题标题/媒体 | 28 像素 | 600 |章节标题标题/小| 24 像素 | 600 |卡牌标题标题/大 | 18 像素 | 600 |小节标题标题/媒介 | 16 像素 | 600 |组件标题身体/大 | 16 像素 | 400 |默认正文身体/小 | 14 像素 | 400 |辅助/辅助文本标签/大| 14 像素 | 600 |表单标签标签/介质 | 12 像素 | 600 |小标签 ## 组件模式 ### 按钮 {/* 主要 */}

卡片标题

标题

错误

成功

我的操作员设计

包含技能