From cba0d42474a15cebc4d47a2b657a26712e00964d Mon Sep 17 00:00:00 2001
From: zhongyingmin <join_zhong@163.com>
Date: Tue, 18 Aug 2026 17:33:42 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=90=8C=E6=AD=A5=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=E4=B8=8E=E6=A8=AA=E5=B1=8F=E6=8F=90=E7=A4=BA=E7=9A=84=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8C=96=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md |  4 ++--
 README.md | 16 ++++++----------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 71536da..44755b4 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -129,8 +129,8 @@ bun run lint:fix   # 自动修复代码问题
 
 开发时要尊重模板已有能力：
 
-- 页面按 `1920 x 1080` 设计稿开发，整体缩放逻辑在 `src/utils/useScale.ts`。
-- 横屏访问提示逻辑在 `src/utils/useOrientation.ts` 与通用组件中。
+- 页面按 `1920 x 1080` 设计稿开发，整体缩放由 `src/course-runtime/canvas` 的 `CourseCanvas` 组件承担。
+- 横屏访问提示由 `src/course-runtime/orientation` 的 `OrientationGuard` 组件承担。
 - 易班能力通过 `src/utils/yiban.ts` 和 `public/videoajax/` 相关脚本封装。
 - 移动端调试使用 `src/utils/vconsole.ts`。
 - 新增通用组件时，同步考虑是否需要在 [src/pages/Components/index.tsx](src/pages/Components/index.tsx) 增加示例。
diff --git a/README.md b/README.md
index 30ab536..6a3d0d9 100644
--- a/README.md
+++ b/README.md
@@ -164,8 +164,6 @@ src/
 ├── styles/       # 全局样式
 ├── types/        # TypeScript 类型
 └── utils/        # 工具函数
-    ├── useOrientation.ts # 横竖屏检测
-    ├── useScale.ts       # 1920x1080 整体缩放
     ├── vconsole.ts       # 调试工具
     └── yiban.ts          # 易班 API 封装
 ```
@@ -305,18 +303,16 @@ function MyComponent() {
 
 ### 课程画布适配
 
-模板采用 [src/app.config.ts](src/app.config.ts) 中的 `appConfig.design` 作为课程设计稿尺寸，默认是 `1920 x 1080`。页面内容按该设计稿开发，App 外层会通过整体缩放适配不同屏幕。
+模板按 `1920 x 1080` 设计稿开发，由 `src/course-runtime/canvas` 的 `CourseCanvas` 组件承担整体缩放。`CourseCanvas` 默认 `width=1920`、`height=1080`、`maxScale=1`，如需其他设计稿尺寸或放大比例，显式传入对应 props 即可。
 
 当前默认缩放策略：
 
 - PC 端：按可视区域等比缩放并居中显示
-- 大屏：`appConfig.scale.max` 默认为 `1`，不会超过设计稿原始尺寸，周围留白
-- 移动端：优先横屏访问，竖屏时显示横屏提示
+- 大屏：`maxScale` 默认为 `1`，不会超过设计稿原始尺寸，周围留白
+- 移动端：优先横屏访问，竖屏时由 `OrientationGuard` 显示横屏提示
 - 视口：缩放逻辑优先读取 `visualViewport`，移动端地址栏显示/隐藏时更稳定
 - 页面内容：按 `1920 x 1080` 设计稿进行开发，不使用 rem 适配
 
-整体缩放逻辑维护在 [src/utils/useScale.ts](src/utils/useScale.ts)。如需修改设计稿尺寸或最大放大比例，优先修改 [src/app.config.ts](src/app.config.ts)。
-
 本地运行 `bun dev` 后，可以访问标准课程页示例：
 
 ```text
@@ -451,10 +447,10 @@ toast.error("网络异常，请稍后重试");
 基础示例：
 
 ```tsx
-import { DragDropProvider, Draggable, Droppable } from "@/components/business";
-import { useScale } from "@/utils";
+import { DragDropProvider, Draggable, Droppable } from "@/components/course-interactions/drag-drop";
+import { useCourseCanvas } from "@/course-runtime/canvas";
 
-const scale = useScale();
+const { scale } = useCourseCanvas();
 
 <DragDropProvider
   scale={scale}