SakuRain-Style v3.1.0
灵感来自樱花飘落的温柔体验，融合扁平卡片风格的UI设计理念
所有组件均可交互，点击体验完整效果
🎯 核心组件快速体验
🎬 动画效果测试器
🏷️ 动态徽章生成器
⏳ 加载状态切换
💬 模态框演示
✅ 交互说明
所有按钮点击时触发波纹扩散动画，hover状态有3px上浮效果。灵动岛导航支持hover展开、点击展开/收起。
樱花粉系 · 主色调
🎨 颜色主题生成器
📤 主题导出器
科技色 · 辅助色系
💡 配色原则
主色用于重要操作按钮，辅助色用于状态提示。点击色板可复制颜色值。
标题层级 · 清晰的信息架构
Display 1 超大标题
Display 2 主标题
Display 3 副标题
Display 4 小标题
Display 5 标签
正文规范 · 舒适的阅读体验
大号正文：重要描述信息，如简介、摘要等
基础正文：默认文本大小，适用于大部分内容
小号正文：辅助信息，如备注、提示等
弱化文本：次要信息，如时间、作者等
特殊字体 · 强调与代码
主按钮 · 主要操作
次要按钮 · 辅助操作
幽灵按钮 · 弱化视觉
尺寸系统 · 灵活适配
输入控件 · 基础表单（实时验证）
选择控件 · 单选与多选
高级控件 · 开关与滑块（实时反馈）
时间选择 · 日期与时间
搜索过滤 · 实时搜索
📝 动态表单生成器
点击下方按钮生成包含多种字段类型的动态表单
标签页 · 内容切换（点击切换）
这是基础信息标签页的内容。带有平滑的切换动画和下划线指示器。
卡片布局 · 信息层级（悬停体验）
📝 基础卡片
最基础的卡片样式，用于包裹信息内容。
🚀 悬停上浮
带有更强的悬停效果，适合可点击区域。
✨ 渐变背景
使用渐变背景营造更丰富的视觉层次。
步骤条 · 流程引导（点击步骤）
当前步骤：开始
点击上方步骤可以快速导航。
🎠 轮播图组件（触摸支持）
📱 响应式测试器
测试组件在不同设备尺寸下的表现（15秒后自动恢复）
设备尺寸模拟
📈 基础图表 · 数据可视化
折线图
柱状图
饼图
仪表盘
🎯 高级图表 · 交互与动态
动态数据更新
热力图
雷达图
散点图
💡 图表特性
所有图表支持主题切换（自动适配深浅色模式）、动态数据更新、交互式操作。
数据表格 · 结构化信息（行操作）
| 状态 | 组件 | 描述 | 操作 |
|---|---|---|---|
| 运行中 | 灵动岛导航 | 固定顶部导航 | |
| 告警 | 表单验证 | 输入验证规则 | |
| 错误 | 数据表格 | 响应式表格 | |
| 信息 | 标签页 | 内容切换 |
信息展示 · 提示框（自动消失）
🔔 通知系统（右上角弹出）
💡 特性说明
点击按钮在右上角显示浮动通知，3秒后自动消失，支持多种状态类型。
🌓 主题切换器（明暗模式）
当前主题：浅色模式
动画效果 · 交互动画（实时演示）
进度指示器 · 动态进度
环形进度
骨架屏
代码展示 · 专业美学（点击复制）
🖼️ 图片懒加载效果
⭐ 评分组件（点击评分）
点击星星进行评分，悬停可预览效果。
💬 工具提示组件（悬停查看）
不同位置的工具提示
📚 折叠面板组件（点击切换）
樱雨设计风格系统以樱花飘落为灵感，融合现代极简主义与东方美学，创造温柔而富有科技感的用户体验。
采用模块化设计思想，每个组件独立封装，支持灵活组合与扩展，确保设计系统的一致性与可维护性。
精心设计的微交互动画，包括波纹扩散、悬停上浮、平滑过渡等效果，为用户提供流畅自然的操作反馈。
🎪 树形组件（嵌套数据展示）
📊 进度条组件（多种样式）
设计哲学 · 温柔与科技的平衡
以樱花飘落为灵感，色彩系统采用温柔的粉色系，营造舒适、柔和的视觉体验，减少用户的心理压力。
引入灵动岛导航概念，通过毛玻璃、动画、悬停效果，创造流畅自然的交互体验，让界面"活"起来。
遵循扁平化设计原则，去除冗余装饰，通过卡片、间距、阴影建立清晰的信息层级。
基于8px网格系统，建立统一的设计变量，确保样式一致性，便于维护和扩展。