---
description: 项目基础规范 - 响应式、主题、组件化
alwaysApply: true
---

# LMS 项目基础规范

以下 3 项为本项目**兜底要求**，任何改动都需遵守。

## 1. 响应式设计

必须支持 **PC / PAD / H5** 三种视口：

| 设备 | 断点 | Tailwind 前缀 |
|------|------|---------------|
| H5 手机 | < 640px | 默认 / `sm:` |
| PAD 平板 | 640px ~ 1024px | `sm:` ~ `lg:` |
| PC 桌面 | ≥ 1024px | `lg:` ~ `xl:` |

- 使用 `sm:`, `md:`, `lg:`, `xl:` 做断点适配
- 布局：`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`
- 字号：`text-base sm:text-lg md:text-xl`
- 内边距：`px-4 sm:px-6`、`py-12 md:py-16 lg:py-20`

## 2. 日间/夜间主题

- 使用 CSS 变量 `var(--background)`、`var(--foreground)` 等，勿硬编码颜色
- 主题变量定义在 `app/globals.css` 的 `:root/.light` 和 `.dark`
- 主题切换通过 `ThemeProvider` + `ThemeToggle` 实现
- 新增样式需同时适配 light/dark 两种模式

## 3. 功能组件化 / 模块化 / 配置化

- **组件化**：功能拆成独立组件，放在 `app/components/`
- **模块化**：区块组件放在 `app/components/sections/`，通用组件放 `app/components/`
- **配置化**：展示数据集中在 `config/course.ts`，组件只负责渲染

新增内容时：先加配置 → 再写/改组件 → 保持 page 简洁。