欢迎来到我的学习笔记
你好！这是一个用于记录个人前端开发学习进度、测试代码逻辑和练习页面排版的小型静态站点。目前主要关注 React 框架、组件化开发以及现代 UI 样式（如 Glassmorphism）的实现。
学习笔记 #01：JSON 数据结构解析练习
在最近的 API 接口联调练习中，我尝试解析了带有嵌套结构的复杂 JSON 数据。为了方便测试，我使用了一组虚拟宠物（类似精灵）的种族值数据作为 mock data。
// Mock Data: 用于测试雷达图组件的渲染
const mockPetData = {
"name": "喵喵",
"id": 1001,
"stats": {
"hp": 40,
"attack": 45,
"defense": 39,
"speed": 90
},
"eggGroup": ["陆上组"]
};
// 思考：如何优雅地将 stats 对象映射为图表组件的 props？
学习笔记 #02：CSS Flexbox 网格布局测试
在设计列表展示页时，我测试了如何使用 Flexbox 实现响应式的卡片布局。下面是用“虚拟宠物蛋”作为数据源模拟的 UI 布局结构，重点测试不同屏幕尺寸下的自适应折行效果。
<!-- 布局结构测试 -->
<div class="grid-container">
<div class="egg-card">
<span>数据源: 动物蛋组</span>
<span>孵化周期: 20循环</span>
</div>
<div class="egg-card">
<span>数据源: 植物蛋组</span>
<span>孵化周期: 15循环</span>
</div>
</div>