// 使用 animal-island-ui 设计风格创建 React UI 界面或组件。当用户需要： (1) 用动物森友会风格创建 UI 页面或组件； (2) 使用 animal-island-ui 组件库开发界面； (3) 构建温馨自然、圆润可爱风格的 React 界面； (4) 复现或扩展 animal-island-ui 的视觉语言； (5) 提问"动物森友会风格"、"animal island 风格"、"可爱圆润风格"的 UI 时，务必使用此 skill。
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | animal-island-ui-style |
| description | 使用 animal-island-ui 设计风格创建 React UI 界面或组件。当用户需要： (1) 用动物森友会风格创建 UI 页面或组件； (2) 使用 animal-island-ui 组件库开发界面； (3) 构建温馨自然、圆润可爱风格的 React 界面； (4) 复现或扩展 animal-island-ui 的视觉语言； (5) 提问"动物森友会风格"、"animal island 风格"、"可爱圆润风格"的 UI 时，务必使用此 skill。 |
三文档分工（生成代码 / 调样式时按需查阅，避免互相翻查）：
AI_USAGE.md— API 手册：每个组件的 props、类型、默认值、合法取值、禁用用法。写代码优先查这里。skill/SKILL.md（本文档）— 像素级样式：设计 token、每组件精确 CSS（hex/px/keyframe）、Demo 布局、新组件开发模板。要自己实现/扩展样式时查这里。DESIGN_PROMPT.md— 给外部工具（v0 / Figma AI / Midjourney / DALL-E）的提示词包，含 clip-path、色板速查、禁用清单。只在喂别的 AI 时用。
animal-island-ui 是一套受《集合啦！动物森友会》启发的 React + TypeScript UI 组件库。 设计语言核心：温暖大地色系 + 大圆角 pill 形 + 游戏按键立体感 + 柔和动效 + 有机不规则形状。
src/components/<ComponentName>/demo/vite.config.ts（库）/ vite.config.demo.ts（Demo）src/styles/variables.less 设计 token从 src/index.ts 导出：
| 组件 | 职责 | 交互 | 装饰 / 纯展示 |
|---|---|---|---|
Button | 按钮，5 种类型 × 3 种尺寸 | ✓ | |
Input | 输入框，3 种尺寸 + clear/prefix/suffix | ✓ | |
Switch | 开关，默认/小号 | ✓ | |
Modal | SVG blob 裁切弹窗 | ✓ | |
Card | 容器，default/title，13 种 NookPhone 配色 | ✓ | |
Collapse | 手风琴（CSS Grid，无 JS 过渡） | ✓ | |
Select | 下拉选择器（受控） | ✓ | |
Checkbox | 多选框组，水平/垂直，3 种尺寸 | ✓ | |
Icon | SVG 图标库（10 个） | ✓ | |
Time | HUD 实时时钟 | ✓ | |
Phone | NookPhone 3×3 应用网格 | ✓ | |
Footer | 底部装饰图（sea/tree） | ✓ | |
Divider | 装饰分割线，5 种风格 | ✓ | |
Cursor | 游戏手指光标包裹器 | ✓ | |
Typewriter | 打字机效果，保留 ReactNode 结构 | ✓ | |
Tabs | 标签页切换，叶子摆动动画可选 | ✓ | |
CodeBlock | JSX/TS 语法高亮代码块 | ✓ |
类型导出：ButtonProps/ButtonType/ButtonSize、InputProps/InputSize、SwitchProps/SwitchSize、ModalProps、CardProps/CardType/CardColor、FooterProps/FooterType、CollapseProps、CursorProps、TimeProps、PhoneProps、DividerProps、TypewriterProps、SelectProps/SelectOption、IconProps/IconName、TabsProps/TabItem、CheckboxProps/CheckboxOption/CheckboxSize、CodeBlockProps。运行时值：ICON_LIST。
// 主色（薄荷青绿）
@primary-color: #19c8b9;
@primary-color-hover: #3dd4c6;
@primary-color-active: #11a89b;
@primary-color-bg: #e6f9f6;
// 文字（温暖棕色系）
@text-color: #794f27; // 主文字（header/sidebar）
@text-color-body: #725d42; // 正文（组件内文字）
@text-color-secondary: #9f927d; // 次级文字
@text-color-muted: #8a7b66; // 浅棕（modal body）
@text-color-disabled: #c4b89e; // 禁用
// 边框
@border-color: #9f927d;
@border-color-light: #c4b89e; // 输入框边框
@border-color-hover: #a89878; // 输入框 hover
// 背景（奶油米白）
@bg-color: #f8f8f0; // 主背景
@bg-color-content: rgb(247, 243, 223); // 内容区（Modal、Card）
@bg-color-secondary: #f0e8d8;
@bg-color-disabled: #f0ece2;
@bg-color-input: rgb(247, 243, 223); // 输入框背景
@bg-color-input-dis: #ece8dc; // 输入框禁用
// 状态色
@success-color: #6fba2c;
@success-color-active: #5a9e1e;
@warning-color: #f5c31c;
@warning-color-active: #dba90e;
@error-color: #e05a5a;
@error-color-active: #c94444;
// 游戏特殊色
@focus-yellow: #ffcc00; // 焦点高亮（非蓝色）
@focus-yellow-dark: #e0b800; // 焦点阴影
@sidebar-active-bg: #B7C6E5; // 侧边栏选中背景
@sidebar-hover-bg: #d6dff0; // 侧边栏 hover 背景
// 3D 阴影色
@shadow-btn: #bdaea0; // 按钮 3D 阴影
@shadow-input: #d4c9b4; // 输入框 3D 阴影
@shadow-switch-on: #5a9e1e; // Switch 开启 3D 阴影
NookPhone 应用调色板（Card color prop 可选值）：
| color 值 | 背景色 | 文字色 |
|---|---|---|
| default | rgb(247, 243, 223) | #725d42 |
| app-pink | #f8a6b2 | #fff |
| purple | #b77dee | #fff |
| app-blue | #889df0 | #fff |
| app-yellow | #f7cd67 | #725d42 |
| app-orange | #e59266 | #fff |
| app-teal | #82d5bb | #fff |
| app-green | #8ac68a | #fff |
| app-red | #fc736d | #fff |
| lime-green | #d1da49 | #3d5a1a |
| yellow-green | #ecdf52 | #725d42 |
| brown | #9a835a | #fff |
| warm-peach-pink | #e18c6f | #fff |
项目使用三款 Google Fonts 圆体字，必须按以下方式引入，本地未安装时通过在线地址加载：
<!-- 在 index.html <head> 中引入 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Zen+Maru+Gothic:wght@400;500;700&family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap"
rel="stylesheet"
/>
或在 CSS / Less 入口文件顶部：
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
font-family: Nunito, 'Noto Sans SC', 'Zen Maru Gothic',
-apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
| 字体 | 用途 | Google Fonts key |
|---|---|---|
| Nunito | 主字体，拉丁字符 | family=Nunito |
| Noto Sans SC | 中文字体，简体覆盖 | family=Noto+Sans+SC |
| Zen Maru Gothic | 日文字体 | family=Zen+Maru+Gothic |
字重分级：
字间距：letter-spacing: 0.01em（正文）/ 0.02em（按钮/标题）/ 1.5px（星期大写）
禁止使用细体（weight < 400）或等宽字体。
间距：xs=4px sm=8px md=12px lg=16px xl=24px
圆角：sm=12px base=18px lg=24px pill=50px（按钮/输入框）
边框：默认 2px solid，输入框 2.5px，大尺寸输入框 3px
/* 卡片/容器阴影（暖色调，非冷黑）*/
box-shadow: 0 3px 10px 0 rgba(61, 52, 40, 0.10); /* 基础 */
box-shadow: 0 8px 24px 0 rgba(61, 52, 40, 0.14); /* 较大 */
box-shadow: 0 4px 10px rgba(107, 92, 67, 0.42); /* Card */
/* 游戏按键立体阴影（最重要特征）*/
box-shadow: 0 5px 0 0 #bdaea0; /* 按钮默认 */
box-shadow: 0 6px 0 0 #bdaea0; /* 按钮 hover */
box-shadow: 0 1px 0 0 #bdaea0; /* 按钮 active */
box-shadow: 0 3px 0 0 #d4c9b4; /* 输入框 */
box-shadow: 0 2px 0 0 #d4c9b4; /* 小号输入框 */
box-shadow: 0 4px 0 0 #d4c9b4; /* 大号输入框 */
box-shadow: 0 3px 0 0 #5a9e1e; /* Switch 开启态 */
box-shadow: 0 2px 0 0 #5a9e1e; /* Switch 小号开启态 */
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* 通用 */
transition: all 0.15s; /* 快速（clear 按钮等）*/
transition: all 0.3s ease; /* 卡片 */
transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 手风琴 */
/* Hover：上浮 */
transform: translateY(-1px); /* 按钮 / 输入框 */
transform: translateY(-2px); /* Switch handle */
transform: translateY(-4px); /* 卡片 */
/* Active：下压（游戏按键反馈）*/
transform: translateY(2px); /* 按钮 active */
/* 出现动画 */
@keyframes animal-zoom-in {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
@keyframes animal-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ac-fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
| 属性 | small | middle | large |
|---|---|---|---|
| height | 32px | 45px | 48px |
| padding | 0 16px | 0 20px | 0 32px |
| font-size | 12px | 14px | 16px |
| border-radius | 12px | 50px | 24px |
| border-width | 2px | 2px | 2px |
primary 按钮精确值：
color: #794f27;
background: #f8f8f0;
border-color: #f8f8f0;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
box-shadow: 0 5px 0 0 #bdaea0;
/* hover */
transform: translateY(-1px);
box-shadow: 0 6px 0 0 #bdaea0;
/* active */
transform: translateY(2px);
box-shadow: 0 1px 0 0 #bdaea0;
/* focus-visible */
outline: 2px solid #19c8b9;
outline-offset: 2px;
/* disabled */
opacity: 0.5;
loading 斜纹动画（精确值）：
background: #0ec4b6;
border: 4px solid #4de2da;
color: #fff;
background-image: repeating-linear-gradient(
-45deg,
#0ec4b6, #0ec4b6 10px,
#01b0a7 10px, #01b0a7 20px
);
background-size: 28.28px 28.28px;
animation: animal-btn-loading 1s linear infinite;
@keyframes animal-btn-loading {
0% { background-position: 0 0; }
100% { background-position: -28.28px 0; }
}
danger primary 按钮：
color: #fff;
box-shadow: 0 5px 0 0 #c94444; /* error-active */
| 属性 | small | middle | large |
|---|---|---|---|
| height | 32px | 40px | 48px |
| padding | 0 14px | 0 18px | 0 22px |
| font-size | 12px | 14px | 16px |
| border-radius | 40px | 50px | 50px |
| border-width | 2.5px | 2.5px | 3px |
| box-shadow | 0 2px 0 0 #d4c9b4 | 0 3px 0 0 #d4c9b4 | 0 4px 0 0 #d4c9b4 |
精确颜色值：
background: rgb(247, 243, 223);
border: 2.5px solid #c4b89e;
box-shadow: 0 3px 0 0 #d4c9b4;
/* 文字 */
color: #725d42;
font-weight: 500;
letter-spacing: 0.01em;
/* placeholder */
color: #c4b89e;
font-weight: 400;
/* prefix/suffix */
color: #a0936e;
/* prefix margin-right */
margin-right: 6px;
/* suffix margin-left */
margin-left: 6px;
/* hover */
border-color: #a89878;
box-shadow: 0 3px 0 0 #c4b89e;
/* focus */
border-color: #ffcc00;
box-shadow: 0 3px 0 0 #e0b800, 0 0 0 3px rgba(255, 204, 0, 0.15);
/* disabled */
background: #ece8dc;
border-color: #d4c9b4;
box-shadow: none;
opacity: 0.6;
color: #c4b89e;
/* error */
box-shadow: 0 3px 0 0 #c94444;
/* warning */
box-shadow: 0 3px 0 0 #dba90e;
clear 按钮：
width: 20px; height: 20px;
margin-left: 4px;
color: #c4b89e;
font-size: 13px; font-weight: 700;
border-radius: 50%;
transition: all 0.15s;
/* hover */ color: #725d42; background: rgba(114, 93, 66, 0.1);
默认尺寸：
min-width: 52px;
height: 28px;
border: 2.5px solid #c4b89e;
border-radius: 50px;
background: #d4c9b4;
box-shadow: inset 0 2px 4px rgba(114, 93, 66, 0.15);
/* handle */
width: 21px; height: 21px;
top: 2px; left: 2px;
background: rgb(247, 243, 223);
border: 2px solid #c4b89e;
border-radius: 50%;
box-shadow: 0 3px 0 0 #bdaea0;
transform: translateY(-2px); /* 悬浮效果 */
/* 开启态 */
background: #86d67a;
border-color: #6fba2c;
box-shadow: inset 0 2px 4px rgba(90, 158, 30, 0.2);
/* handle 开启后 left */
left: calc(100% - 24px);
border-color: #6fba2c;
box-shadow: 0 3px 0 0 #5a9e1e;
/* focus-visible */
outline: 2px solid #ffcc00;
outline-offset: 2px;
/* disabled */
opacity: 0.5;
small 尺寸：
min-width: 38px; height: 20px; border-width: 2px;
/* handle */ width: 14px; height: 14px; top: 1px; left: 1px;
box-shadow: 0 2px 0 0 #bdaea0;
/* 开启 handle left */ left: calc(100% - 16px);
box-shadow: 0 2px 0 0 #5a9e1e;
inner 文字（checkedChildren/unCheckedChildren）：
font-size: 11px; font-weight: 700; color: #fff;
line-height: 1; letter-spacing: 0.02em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
padding: 0 8px 0 28px; /* 未开启 */
padding: 0 28px 0 8px; /* 开启 */
/* small 版 */ padding: 0 6px 0 20px; font-size: 9px;
loading spinner：
width: 11px; height: 11px;
border: 2px solid #6fba2c;
border-right-color: transparent;
border-radius: 50%;
animation: animal-spin 0.6s linear infinite;
/* 关闭态 */ border-color: #a89878;
@keyframes animal-spin { to { transform: rotate(360deg); } }
/* 默认 */
border-radius: 20px;
background: rgb(247, 243, 223);
padding: 16px 24px;
color: #725d42;
font-weight: 500;
box-shadow: 0 4px 10px rgba(107, 92, 67, 0.42);
transition: all 0.3s ease;
/* hover */ transform: translateY(-4px);
/* title 类型 */
background: #fdfdf5;
border-radius: 40px 35px 45px 38px / 38px 45px 35px 40px;
padding: 12px 32px;
font-weight: 600;
/* 外层卡片 */
border-radius: 18px;
border: 2px solid #9f927d;
margin-bottom: 12px;
/* disabled */ opacity: 0.6;
/* 问题栏 */
padding: 16px 24px;
gap: 12px;
/* 图标圆圈 */
width: 28px; height: 28px;
background: #19c8b9;
color: #fff;
border-radius: 50%;
font-size: 18px; font-weight: 700;
box-shadow: 0 2px 4px rgba(25, 200, 185, 0.3);
/* 展开时 */ transform: rotate(180deg);
/* 叶子装饰 */
opacity: 0.5;
/* 展开时 */ opacity: 1; transform: rotate(45deg);
/* 问题文字 */
font-size: 16px; font-weight: 600; line-height: 1.4;
/* 答案展开（CSS Grid trick，无 JS）*/
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* 展开 */ grid-template-rows: 1fr;
/* 内层 */ overflow: hidden;
/* 答案文字 */
padding: 0 24px;
font-size: 14px; line-height: 1.7;
/* 展开后 padding-bottom */ 24px;
/* 外层容器 */
.tabs {
background: rgb(247, 243, 223);
border-radius: 20px;
border: 2px solid #9f927d;
overflow: hidden;
}
/* 标签列表 */
.tabList {
display: flex;
gap: 4px;
padding: 12px;
background: rgba(255, 255, 255, 0.6);
border-bottom: 2px solid #c4b89e;
}
/* 标签项 */
.tabItem {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: transparent;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #8a7b66;
transition: all 0.2s ease;
}
/* hover */
.tabItem:hover {
background: rgba(25, 200, 185, 0.1);
color: #725d42;
}
/* 激活状态 */
.tabItem.active {
background: rgba(25, 200, 185, 0.15);
color: #19c8b9;
font-weight: 600;
box-shadow: 0 3px 0 0 #d4c9b4;
}
/* 标签图标 */
.tabIcon {
font-size: 10px;
}
/* 激活时图标放大 */
.tabItem.active .tabIcon {
transform: scale(1.2);
}
/* 叶子装饰动画 */
.tabLeaf {
position: absolute;
right: -6px;
top: -3px;
font-size: 12px;
animation: leafWiggle 2s ease-in-out infinite;
}
/* leafAnimation={false} 时追加 tabLeafStatic 类去除 animation */
@keyframes leafWiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
75% { transform: rotate(10deg); }
}
/* 内容区 */
.tabContent {
padding: 24px;
animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
SVG clip-path 完整 path d 值（精确还原 blob 轮廓）：
<svg style={{ position: 'absolute', width: 0, height: 0 }} aria-hidden>
<defs>
<clipPath id="animal-modal-clip" clipPathUnits="objectBoundingBox">
<path d="M0.501,0.005 L0.501,0.005 L0.523,0.005 L0.549,0.006
C0.704,0.01,0.796,0.017,0.825,0.027
L0.827,0.028
C0.872,0.045,0.939,0.044,0.978,0.17
C1,0.254,1,0.365,0.99,0.505
L0.988,0.513
C0.979,0.558,0.971,0.598,0.965,0.633
C0.956,0.689,0.979,0.77,0.964,0.865
C0.953,0.928,0.921,0.966,0.869,0.979
C0.821,0.986,0.773,0.992,0.726,0.995
L0.712,0.996 L0.694,0.997
C0.648,1,0.586,1,0.507,1
L0.501,1 L0.464,1
C0.385,1,0.325,0.998,0.283,0.995
C0.234,0.992,0.184,0.987,0.133,0.979
C0.081,0.966,0.05,0.928,0.039,0.865
C0.023,0.77,0.047,0.689,0.037,0.633
C0.031,0.595,0.023,0.552,0.013,0.505
C-0.006,0.365,-0.002,0.254,0.024,0.17
C0.064,0.045,0.13,0.045,0.174,0.028
L0.175,0.028
C0.204,0.017,0.303,0.009,0.474,0.005
L0.501,0.005" />
</clipPath>
</defs>
</svg>
Modal 精确样式：
/* 遮罩 */
background: rgba(0, 0, 0, 0.35);
animation: animal-fade-in 0.25s ease;
z-index: 1000;
/* 弹窗容器 */
max-width: calc(100vw - 32px);
max-height: calc(100vh - 64px);
animation: animal-zoom-in 0.3s ease;
/* 裁切内容区 */
clip-path: url(#animal-modal-clip);
background: rgb(247, 243, 223);
color: rgb(128, 115, 89);
padding: 48px 48px 32px 48px;
/* 标题 */
font-size: 28px; font-weight: 700;
color: rgba(114, 93, 66, 1);
padding-bottom: 15px;
/* 关闭按钮 */
width: 32px; height: 32px;
font-size: 22px;
color: rgba(114, 93, 66, 0.6);
border-radius: 50%;
transition: all 0.2s;
/* hover */ background: rgba(114, 93, 66, 0.1); color: rgba(114, 93, 66, 1);
/* body */
font-size: 20px; font-weight: 600; line-height: 1.6;
color: #8a7b66;
padding-bottom: 20px;
/* footer */
gap: 12px;
/* 普通按钮 */
height: 40px; padding: 0 24px;
font-size: 18px;
border: 2px solid rgba(114, 93, 66, 0.3);
border-radius: 39.81px;
transition: all 0.2s; line-height: 1;
/* hover */ border-color: rgba(114,93,66,0.6); background: rgba(114,93,66,0.08);
/* 主按钮（确认）*/
color: rgba(114, 93, 66, 1);
background: rgba(255, 204, 0, 1); /* 游戏黄色！*/
border-color: rgba(255, 204, 0, 1);
/* hover */ background: rgba(255,204,0,0.85); border-color: rgba(255,204,0,0.85);
/* 容器 */
display: flex; align-items: center;
gap: 20px;
padding: 16px 36px;
background: linear-gradient(180deg, #fff 0%, #f8f8f0 100%);
border: 3px solid #d4cfc3;
border-radius: 18px;
animation: ac-fade-up 0.5s ease-out;
/* 日期块（右侧分隔线）*/
padding-right: 24px;
border-right: 3px solid rgba(159, 146, 125, 0.35);
/* 星期 */
color: #6fba2c;
font-weight: 900; font-size: 14px;
letter-spacing: 1.5px;
/* 月日 */
color: #8b7355;
font-weight: 800; font-size: 22px;
/* 时间数字 */
color: #8b7355;
font-weight: 900; font-size: 48px;
letter-spacing: 2px;
/* 冒号（闪烁）*/
font-size: 48px; color: #8b7355;
position: relative; top: -0.08em;
margin: 0 1px;
animation: blink 1s step-end infinite;
@keyframes blink { 50% { opacity: 0; } }
/* 响应式 768px */
padding: 12px 20px; gap: 12px;
.acWeekday → font-size: 11px;
.acMonthday → font-size: 16px;
.acTime / .acColon → font-size: 32px;
外壳（固定尺寸，不响应式）：
.phone {
width: 527px; height: 788px;
background: #F8F4E8; /* 奶油米 */
border-radius: 136px; /* 超大圆角，近似胶囊 */
overflow: hidden;
}
.homeScreen {
height: 100%;
padding-top: 40px;
background: #F8F4E8;
background-size: 100% 200%;
animation: grasswave 8s ease-in-out infinite;
display: flex; flex-direction: column; align-items: center;
}
@keyframes grasswave {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 0% 100%; }
}
顶部时间栏：
.dateDisplay { padding: 0 70px 31px 70px; text-align: center; }
.dateDisplayHeader { display:flex; justify-content:space-between; align-items:center;
font-size: 32px; font-weight: 800; letter-spacing: 2px; color: #DDDBCC; }
.blink { font-size: 32px; font-weight: 800; color: #DDDBCC;
animation: blink 1s steps(1) infinite; vertical-align: text-bottom; }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
.dayText { font-size: 48px; font-weight: 800; color: #725C4E;
letter-spacing: 2px; height: 56px; margin-top: 20px; }
3×3 应用网格：
.appsGrid { display: grid; grid-template-columns: repeat(3, 1fr);
gap: 32px; padding: 8px; flex: 1;
align-content: center; justify-content: center; }
.appItem { width: 123px; height: 123px;
border-radius: 45px; /* 圆角正方形 */
position: relative;
display: flex; justify-content: center; align-items: center; }
.appItem:hover .appIcon { animation: iconBounce 0.3s ease-in-out forwards; }
.appIcon { width: 100%; height: 100%;
background-repeat: no-repeat; background-position: center;
background-size: 70% auto; }
.appItemOffset { overflow: hidden; }
.appIconOffset { transform: translateY(10px); }
@keyframes iconBounce {
0% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.2) rotate(-5deg); }
100% { transform: scale(1.1) rotate(-4deg); }
}
应用数据结构（src/components/Phone/Phone.tsx）：
| id | iconClass | 背景色 | offset | hasNewMessage |
|---|---|---|---|---|
| camera | iconCamera | #B77DEE | ✓ | |
| app | iconApp | #889DF0 | ✓ | |
| critterpedia | iconCritterpedia | #F7CD67 | ||
| diy | iconDiy | #E59266 | ||
| shopping | iconDesign | #F8A6B2 | ||
| variant | iconMap | #82D5BB | ✓ | |
| design | iconVariant | #8AC68A | ||
| map | iconHelicopter | #FC736D | ||
| chat | iconChat | #D1DA49 |
每个 iconClass 都绑定一个 background-image: url('./img/icon-*.svg')，iconApp 特殊使用 background-size: 100% auto（其他是 70% auto）。可用图标资源：icon-miles/camera/chat/critterpedia/design/diy/helicopter/map/shopping/variant.svg，以及状态图标 wifi.svg / location.svg / page.svg。
小红点（新消息）：
.badge {
position: absolute; top: 0; left: 0;
width: 28px; height: 28px; border-radius: 50%;
background: #FF544A;
border: 5px solid #F8F4E8; /* 奶油米描边，形成游戏风徽章 */
}
底部状态图标：
.iconWifi { width: 79px; height: 29px; background: url('./img/wifi.svg') center/contain no-repeat; }
.iconLocation { width: 36px; height: 36px; background: url('./img/location.svg') center/contain no-repeat; }
.iconPage { width: 65px; height: 32px; background: url('./img/page.svg') center/contain no-repeat; }
.pageIndicator{ display: flex; justify-content: center; align-items: center;
margin-top: 74px; }
行为： 内部 useEffect + setInterval(1000) 更新时间，12 小时制 + AM/PM + 零填充分钟，冒号闪烁 1s 一个周期。组件无业务回调，纯展示。
<Footer /> // 默认：森林（tree，高 60px）
<Footer type="sea" /> // 海浪（高 80px）
.footer { width: 100%; height: 80px;
background: url('./img/footer-sea.svg') center/contain no-repeat; }
.tree { background-image: url('./img/footer-tree.webp');
height: 60px;
background-size: cover;
background-position: bottom center; }
sea：SVG 海浪插画，viewBox="0 0 1440 186"，多色（珊瑚 #EC7175、海蓝 #327A93、浅蓝 #98D2E3、深青 #008077 等）。tree：webp 森林剪影，置于页面最底部。<Divider type="line-brown" /> // 默认
<Divider type="line-teal" />
<Divider type="line-white" />
<Divider type="line-yellow" />
<Divider type="wave-yellow" />
.divider { width: 100%; height: 12px;
background: url('./img/divider-line-brown.svg') center/contain no-repeat; }
.line-teal { background-image: url('./img/divider-line-teal.svg'); }
.line-white { background-image: url('./img/divider-line-white.png'); }
.line-yellow { background-image: url('./img/divider-line-yellow.svg'); }
.wave-yellow { background-image: url('./img/wave-yellow.svg'); }
默认 SVG 色值参考：#D8D0C3（米褐），viewBox="0 0 297 14"。
<Cursor>
<App /> {/* 此范围内所有元素变为游戏手指光标 */}
</Cursor>
样式文件为 普通 CSS（非 module）：
.animal-cursor,
.animal-cursor * {
cursor: url('./cursor-icon.png') 4 0, auto !important;
}
cursor-icon.png 热点坐标 (4, 0)!important 覆盖默认光标；className 直接挂在根 <div> 上，类名固定为 animal-cursor<Typewriter speed={90} trigger={openCount} autoPlay onDone={() => ...}>
<p>第一行 <strong>加粗</strong></p>
<p>第二行</p>
</Typewriter>
Props：
| name | type | default | 说明 |
|---|---|---|---|
children | ReactNode | — | 要逐字打出的内容，保留原有元素结构 / 换行 / 样式 |
speed | number (ms) | 90 | 每字间隔 |
trigger | unknown | — | 值变化即重新播放（通常传递弹窗 open 次数或递增 key） |
autoPlay | boolean | true | false 直接全量显示 |
onDone | () => void | — | 播放完成回调 |
实现要点：
countText(node)：递归统计 ReactNode 的纯文本长度renderTruncated(node, state)：按剩余字符数递归裁剪，React.cloneElement 保留原节点与样式useEffect 依赖 [total, speed, trigger, autoPlay]，内部 setInterval 按步递增 count<>...</>），对布局零影响Props：
| name | type | default | 说明 |
|---|---|---|---|
options | CheckboxOption[] | — | 必填；每项 { label, value, disabled? } |
value | Array<string | number> | — | 受控选中值 |
defaultValue | Array<string | number> | [] | 非受控默认值 |
size | 'small' | 'middle' | 'large' | 'middle' | 尺寸 |
disabled | boolean | false | 禁用全部项 |
direction | 'horizontal' | 'vertical' | 'horizontal' | 排列方向 |
onChange | (values) => void | — | 选中值变化 |
尺寸表（box 方框）：
| 属性 | small | middle | large |
|---|---|---|---|
| 宽高 | 18×18px | 22×22px | 28×28px |
| border-width | 2px | 2.5px | 3px |
| 标签 font-size | 12px | 14px | 16px |
| 对勾 font-size | 11px | 13px | 16px |
精确样式：
/* group */
display: flex; flex-wrap: wrap;
gap: 12px; /* horizontal */
/* vertical */ flex-direction: column; gap: 8px;
/* item */
display: inline-flex; align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
/* box（未选）*/
background: rgb(247, 243, 223);
border: 2.5px solid #c4b89e;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
/* box hover */
border-color: #19c8b9;
transform: translateY(-1px);
/* box focus-visible */
outline: 2px solid #ffcc00; outline-offset: 2px;
/* 选中 */
background: #19c8b9;
border-color: #11a89b;
/* 选中 hover */ background: #3dd4c6; border-color: #19c8b9;
/* 对勾 ✓ */
color: #fff; font-weight: 700; line-height: 1;
animation: animal-checkbox-pop 0.15s cubic-bezier(0.4,0,0.2,1);
@keyframes animal-checkbox-pop {
0% { transform: scale(0.4); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}
/* label */
color: #725d42; font-weight: 500;
letter-spacing: 0.01em;
/* item hover */ label color: #794f27;
/* 禁用（单项或整组）*/
cursor: not-allowed;
opacity: 0.55;
/* box */ background: #f0ece2; border-color: #d4c9b4; transform: none !important;
/* label */ color: #c4b89e;
Props：
| name | type | default | 说明 |
|---|---|---|---|
code | string | — | 必填；原始源码字符串，内部自动按 JSX/TS 分词高亮 |
style | CSSProperties | — | 会合并覆盖默认深色主题 |
className | string | — | 自定义类名 |
默认主题（写死在组件，不走 Less）：
padding: 20px 24px;
background: #2b2118;
border: 1px solid #3d3028;
border-radius: 20px;
font-size: 14px;
line-height: 1.7;
font-family: 'SF Mono','Fira Code','Cascadia Code',Consolas,monospace;
font-weight: 600;
color: #e8d5bc;
white-space: pre;
overflow: auto;
tab-size: 4;
Token 调色板（COLORS 常量）：
| token | 颜色 | 覆盖 |
|---|---|---|
| comment | #6b5e50 | /* */、// |
| string | #a8d4a0 | 反引号 / 单双引号、数字 |
| keyword | #d4a0e0 | import/export/const/return/async/...、true/false/null/undefined |
| react | #e06c75 | React/useState/useEffect/FC/ReactNode/CSSProperties/... |
| component | #80c0e0 | 大写驼峰标识符（JSX 组件名、类型名） |
| func | #61afef | 小写标识符后跟 ( |
| prop | #e8c87a | 标识符后跟 =（JSX props / 赋值） |
| jsx | #f0a870 | <Tag、</Tag、/> |
| operator | #d4b896 | {}[]();, 和 `+-*/=<>& |
| default | #e8d5bc | 其余文本 |
不支持
languageprop；非 JS/TS 代码（Python/Shell/SQL）会按通用规则着色，显示可能不准确。不带 copy 按钮、行号或折行。
这是 Demo 站（demo/App.tsx）的实际布局数值，用于还原完整页面效果：
/* 页面背景 */
/* 首页 */ background: url(home_bg.svg) center/cover no-repeat, #7DC395;
/* 组件页 */ background: url(content_bg_pc.jpg) center fixed;
/* Sidebar */
width: 220px; min-width: 220px;
background: url(menu_bg.svg) center/cover no-repeat;
/* 顶部 Logo 区 */
padding: 20px 16px 12px;
border-bottom: 1px solid #e8e2d6;
font-weight: 700; font-size: 15px;
color: #725d42; letter-spacing: -0.3px;
/* Logo 图片 */
width: 24px; height: 24px; margin-right: 8px;
/* 菜单列表 */
padding: 8px 0;
/* 分类标题 */
padding: 12px 16px 4px;
font-size: 11px; color: #a0936e;
font-weight: 600; letter-spacing: 0.5px;
text-transform: uppercase;
/* 菜单项 */
margin: 1px 5px;
height: 40px; padding: 0 16px;
padding-left: 26px;
font-weight: 600; font-size: 14px;
border-radius: 12px;
transition: all 0.15s;
/* inactive */ color: #8a7b66; background: transparent;
/* inactive hover */ background: #d6dff0;
/* active */ color: #fff; background: #B7C6E5;
/* 桌面 */
padding: 32px 40px;
/* 底部装饰图（桌面端，固定定位）*/
left: 220px;
width: calc(100% - 220px);
z-index: 0; pointer-events: none;
/* 顶栏 */
height: 52px; padding: 0 12px;
background: rgba(255, 252, 244, 0.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid #e8e2d6;
z-index: 50;
/* 按钮 */ font-size: 20px; color: #725d42; padding: 4px 8px; border-radius: 8px;
/* 主内容区 padding-top */ 68px;
/* 抽屉 */
width: 240px; z-index: 99;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
/* 遮罩 */ background: rgba(0, 0, 0, 0.35); z-index: 98;
/* Hero 区域 */
padding: 60px 40px 40px;
min-height: 80vh;
/* 主标题 */
font-size: 50px; font-weight: 700;
color: #FFF9E6;
text-shadow: 0px 4px 1px rgba(0, 0, 0, 0.4);
margin: 0 0 12px;
/* 版本 Badge */
font-size: 12px; font-weight: 600;
padding: 2px 10px; border-radius: 10px;
background: #e6f9f6; color: #19c8b9;
margin-left: 8px;
/* 副标题 */
font-size: 17px; color: #7c5734; line-height: 1.7;
margin: 0 0 28px; max-width: 520px;
/* Logo 图片 */
width: 172px; height: 172px;
/* Section */
padding: 48px 40px; max-width: 960px; margin: 0 auto;
/* Section 标题 */
font-size: 24px; font-weight: 700; color: #725d42; margin: 0 0 8px;
/* Section 描述 */
font-size: 14px; color: #7c5734; margin-bottom: 32px;
/* Feature 网格 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
/* Feature Card hover */
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(114, 93, 66, 0.15);
/* Feature 图标 hover */
transform: scale(1.1) rotate(-4deg);
/* 代码块 */
max-width: 600px; margin: 0 auto;
padding: 20px 28px;
background: #2b2118;
border: 1px solid #3d3028;
border-radius: 20px;
font-size: 13px; font-weight: 600;
color: #e8d5bc; line-height: 1.8;
代码高亮配色：
| Token 类型 | 颜色 |
|---|---|
| 注释 | #6b5e50（italic, weight 400） |
| 字符串 | #a8d4a0 |
| JSX 标签 | #f0a870 |
| 关键字 / npm/pnpm | #f0a870 |
| 命令动词（install/add） | #a8d4a0 |
括号 {} | #d4b896 |
箭头 => | #d4a0e0 |
| CSS 变量名 | #e8c87a |
:root | #f0a870 |
| 十六进制色值 | #8ab8e0 |
不依赖组件库时，在 :root 中声明以下变量：
:root {
/* 字体 */
--animal-font: Nunito, 'Noto Sans SC', 'Zen Maru Gothic',
-apple-system, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
/* 主色 */
--animal-primary: #19c8b9;
--animal-primary-hover: #3dd4c6;
--animal-primary-active: #11a89b;
--animal-primary-bg: #e6f9f6;
/* 文字 */
--animal-text: #794f27;
--animal-text-body: #725d42;
--animal-text-secondary: #9f927d;
--animal-text-muted: #8a7b66;
--animal-text-disabled: #c4b89e;
/* 背景 */
--animal-bg: #f8f8f0;
--animal-bg-content: rgb(247, 243, 223);
--animal-bg-disabled: #f0ece2;
/* 边框 */
--animal-border: #c4b89e;
--animal-border-hover: #a89878;
/* 圆角 */
--animal-radius-sm: 12px;
--animal-radius: 18px;
--animal-radius-lg: 24px;
--animal-radius-pill: 50px;
/* 3D 阴影 */
--animal-shadow-btn: #bdaea0;
--animal-shadow-input: #d4c9b4;
--animal-shadow-switch: #5a9e1e;
/* 游戏特殊色 */
--animal-focus-yellow: #ffcc00;
--animal-focus-yellow-d: #e0b800;
--animal-sidebar-active: #B7C6E5;
--animal-sidebar-hover: #d6dff0;
/* 状态 */
--animal-success: #6fba2c;
--animal-warning: #f5c31c;
--animal-error: #e05a5a;
/* 动效 */
--animal-ease: cubic-bezier(0.4, 0, 0.2, 1);
--animal-duration-fast: 0.15s;
--animal-duration: 0.25s;
--animal-duration-slow: 0.35s;
}
0 Npx 0 0 [暗色]，hover 上浮，active 下压cubic-bezier(0.4, 0, 0.2, 1)，平滑不生硬#ffcc00，按钮用青绿 #19c8b9，绝不用蓝色#000、冷蓝色调、扁平无阴影设计src/components/MyComponent/
├── MyComponent.tsx # 组件逻辑（必须设置 displayName）
├── myComponent.module.less # CSS Modules 样式
└── index.ts # 统一导出
src/index.ts 追加：
// 方式 A：组件用 default export
export { default as MyComponent } from './components/MyComponent'
export type { MyComponentProps } from './components/MyComponent/MyComponent'
// 方式 B：组件用 named export（如 Checkbox / CodeBlock / Select / Icon / Tabs 当前采用）
export { MyComponent } from './components/MyComponent'
export type { MyComponentProps } from './components/MyComponent'
仓库内两种风格并存；新增组件选一种即可，只要
src/index.ts能成功 re-export。
Less 模板（直接使用设计 token）：
@import '../../styles/variables.less';
.container {
background: @bg-color-content; // rgb(247,243,223)
color: @text-color-body; // #725d42
border: @border-width solid @border-color-light; // 2px solid #c4b89e
border-radius: @border-radius-base; // 18px
font-family: @font-family;
font-weight: 500;
letter-spacing: 0.01em;
transition: all @motion-duration-base @motion-ease;
box-shadow: 0 3px 0 0 @shadow-input; // #d4c9b4
&:hover:not(.disabled) {
border-color: @border-color-hover; // #a89878
transform: translateY(-1px);
box-shadow: 0 4px 0 0 @shadow-input;
}
&:focus-within {
border-color: @focus-yellow; // #ffcc00
box-shadow: 0 3px 0 0 @focus-yellow-dark,
0 0 0 3px rgba(255, 204, 0, 0.15);
}
&.disabled {
opacity: 0.6;
cursor: not-allowed;
background: @bg-color-disabled;
color: @text-color-disabled;
border-color: @shadow-input;
box-shadow: none;
}
}
TSX 模板：
import React from 'react'
import styles from './myComponent.module.less'
import classNames from 'classnames'
export interface MyComponentProps {
/** 尺寸 */
size?: 'small' | 'middle' | 'large'
/** 禁用 */
disabled?: boolean
/** 子元素 */
children?: React.ReactNode
/** 自定义类名 */
className?: string
/** 自定义样式 */
style?: React.CSSProperties
}
const MyComponent: React.FC<MyComponentProps> = ({
size = 'middle',
disabled = false,
children,
className,
style,
}) => {
const cls = classNames(
styles.container,
styles[size],
{ [styles.disabled]: disabled },
className
)
return (
<div className={cls} style={style}>
{children}
</div>
)
}
MyComponent.displayName = 'MyComponent'
export default MyComponent
每个组件在 demo/components/<ComponentName>/index.tsx 创建演示页：
import { CodeBlock, ApiTable } from '../../tools'
const props = [
{ name: 'size', type: "'small' | 'middle' | 'large'", default: "'middle'", description: '尺寸' },
]
export default function MyComponentDemo() {
return (
<div>
<h2>MyComponent</h2>
<CodeBlock code={`<MyComponent size="large">内容</MyComponent>`} />
<ApiTable data={props} />
</div>
)
}
并在 demo/ComponentPage.tsx 中注册路由，同时把 title / desc 写入 demo/pageInfo.ts：
// demo/pageInfo.ts — 供 App 静态导入的轻量元信息
export const PAGE_INFO: Record<string, { title: string; desc: string }> = {
button: { title: 'Button 按钮', desc: '...' },
input: { title: 'Input 输入框', desc: '...' },
switch: { title: 'Switch 开关', desc: '...' },
card: { title: 'Card 卡片', desc: '...' },
collapse: { title: 'Collapse 折叠面板', desc: '...' },
cursor: { title: 'Cursor 光标', desc: '...' },
time: { title: 'Time 时间', desc: '...' },
phone: { title: 'Phone 手机', desc: '...' },
footer: { title: 'Footer 底部装饰', desc: '...' },
modal: { title: 'Modal 弹窗', desc: '...' },
typewriter: { title: 'Typewriter 打字机', desc: '...' },
'divider-comp': { title: 'Divider 分割线', desc: '...' },
icon: { title: 'Icon 图标', desc: '...' },
select: { title: 'Select 选择器', desc: '...' },
checkbox: { title: 'Checkbox 多选框', desc: '...' },
codeblock: { title: 'CodeBlock 代码高亮', desc: '...' },
}
新增组件务必追加对应条目，否则 Demo 侧栏不会展示。
index.html 或样式入口引入（Nunito + Noto Sans SC + Zen Maru Gothic）value）和非受控（defaultValue）模式disabled 状态：cursor: not-allowed + opacity 0.5~0.6 + 移除阴影variables.less token，避免硬编码 hex#bdaea0 / #d4c9b4 / rgba(61,52,40,...)），非冷黑translateY(-1px 或 -4px) + 阴影加深translateY(2px) + 阴影减小#ffcc00，按钮类用 #19c8b9@motion-duration-* 和 @motion-ease tokensrc/index.ts 导出demo/components/demo/ComponentPage.tsx 中注册demo/pageInfo.ts 追加 { title, desc } 元信息