39 lines
1.3 KiB
Plaintext
39 lines
1.3 KiB
Plaintext
---
|
|
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 简洁。
|