kids/layout.tsx - 儿童模式布局

kids/layout.tsx - 儿童模式布局

基本信息

属性值
路径src/app/kids/layout.tsx
类型Next.js 布局组件 (Async Server Component)
功能儿童模式的全屏游戏化布局

功能描述

为儿童学习模式提供沉浸式的游戏化布局，包括天空渐变背景、动画像素云、RTL 支持、背景音乐和关卡状态管理。

导入依赖

import { Schoolbell } from "next/font/google";
import { getLocale } from "next-intl/server";
import { KidsHeader } from "@/components/kids/layout/kids-header";
import { MusicProvider } from "@/components/kids/layout/background-music";
import { LevelProvider } from "@/components/kids/providers/level-context";

字体配置

const kidsFont = Schoolbell({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-kids",
});

字体: Schoolbell - 手写风格，适合儿童内容

RTL 支持

const RTL_LOCALES = ["ar", "he", "fa"];
const locale = await getLocale();
const isRtl = RTL_LOCALES.includes(locale);

支持从右到左的语言布局。

背景组件

PixelCloudBg

像素风格的云朵 SVG 组件，用于背景装饰。

function PixelCloudBg({ className, style }: { className?: string; style?: React.CSSProperties })

视觉效果: 8-bit 像素艺术风格云朵

UI 结构

LevelProvider
└── MusicProvider
    └── Fullscreen Container (fixed inset-0)
        ├── Sky Gradient Background
        ├── Animated Pixel Clouds (6 clouds)
        │   ├── cloud-slow (x2)
        │   ├── cloud-medium (x2)
        │   └── cloud-fast (x2)
        ├── KidsHeader
        └── Main Content Area

背景效果

天空渐变

background: linear-gradient(
  180deg,
  #4A90D9 0%,    /* 深蓝 */
  #87CEEB 30%,   /* 天蓝 */
  #98D8F0 60%,   /* 浅蓝 */
  #B8E8F8 100%   /* 极浅蓝 */
);

动画云朵

云朵动画速度延迟透明度
1slow0s90%
2medium-10s80%
3fast-5s85%
4slow-20s75%
5medium-15s70%
6fast-8s60%

动画效果: 从左侧飘移到右侧的无限循环动画

Context Providers

Provider来源功能
LevelProvider@/components/kids/providers/level-context关卡进度状态管理
MusicProvider@/components/kids/layout/background-music背景音乐控制

容器样式

<div 
  className={`fixed inset-0 flex flex-col text-xl light ${kidsFont.className}`} 
  data-theme="light" 
  dir={isRtl ? "rtl" : "ltr"}
  style={{ colorScheme: "light" }}
>
属性值说明
positionfixed inset-0全屏覆盖
displayflex flex-col垂直布局
font-sizetext-xl大字体便于阅读
themelight强制亮色主题
directionrtl / ltr根据语言自动切换
color-schemelight系统级亮色模式

组件引用

组件来源用途
KidsHeader@/components/kids/layout/kids-header顶部导航栏

应用范围

此布局应用于 /kids 路由下的所有页面：

路由页面
/kids儿童首页
/kids/map学习地图
/kids/level/{slug}关卡页面

技术特点

  1. 沉浸式体验: 全屏布局，无浏览器默认边距
  2. 游戏化设计: 像素艺术风格 + 动画背景
  3. 多语言支持: RTL 布局自动适配
  4. 状态管理: 关卡进度和音乐状态通过 Context 共享
  5. 强制主题: 儿童模式始终使用亮色主题

相关文件

  • src/app/kids/page.tsx - 儿童首页
  • src/app/kids/map/page.tsx - 学习地图
  • src/app/kids/level/[slug]/page.tsx - 关卡页面
  • src/components/kids/layout/kids-header.tsx - 顶部导航
  • src/components/kids/layout/background-music.tsx - 音乐播放器
  • src/components/kids/providers/level-context.tsx - 关卡状态
← 返回目录