开发规范

Guide.md

@@ -177,6 +177,25 @@ go run main.go build path/to/xjs.js
   - 预期现象
   - 参数组合/边界条件
 
+### 6.3 功能演示页面约定（必须可精确定位）
+
+目标：我只说“改哪个功能的演示”，你能精准找到对应页面、路由和引用的库。
+
+- **入口路由（doc 首页）**：`/doc/#<token>` → 映射到 `doc/<path>.html`
+  - 例：`/doc/#layer_test__dom__steps` → `doc/layer/test_dom_steps.html`
+- **示例页面结构**：
+  - **演示区块在上**、代码区块在下（tabs + code），便于直接看效果
+  - 演示区块应包含最小可操作按钮/交互
+- **必须显式声明引用的库（页面内）**：
+  - 样式：`doc/demo.css`（示例通用样式）、`xjs.css`（组件运行时样式）
+  - 脚本：`doc/highlight_css.js`（代码高亮）
+  - 功能库：`animal.js` + `layer.js`（调试时直接加载源码，避免缓存覆盖）
+
+落地示例（当前对照页）：
+- 功能：Layer DOM + Steps
+- 路由：`/doc/#layer_test__dom__steps`
+- 页面：`doc/layer/test_dom_steps.html`
+
 ---
 
 ## 7. 扩展开发指南（新增能力的推荐落点）
@@ -269,6 +288,8 @@ xjs.layer({
 
 Layer 支持“同一弹窗内”的步骤流：点击确认按钮不关闭，而是平滑切换到下一步；最后一步确认后 resolve。
 
+演示：`/#layer_test__dom__steps`
+
 推荐写法（链式）：
 
 ```js

doc/demo.css

@@ -90,7 +90,7 @@ body.scrolling *::-webkit-scrollbar-track {
 }
 
 .container {
-    max-width: 980px;
+   
     width: 100%;
 }
 

doc/index.html

@@ -676,8 +676,8 @@
             const startX = midRect.left + clamp(activeRect.right, 0, middleFrame.clientWidth);
             const startY = midRect.top + activeCenter.y;
 
-            // Point into the code area a bit (not exactly at left edge)
-            const endX = rightRect.left + clamp(anchorRect.left + 18, 12, contentFrame.clientWidth - 12);
+            // Stop just before the content block (avoid entering the dark code area)
+            const endX = rightRect.left + clamp(anchorRect.left - 2, 6, contentFrame.clientWidth - 12);
             const endY = rightRect.top + anchorCenter.y;
 
             // Draw an L-shaped polyline.

doc/layer/test_dom_steps.html

@@ -82,6 +82,16 @@
     </p>
 
     <div class="box-container">
+      <div class="demo-visual">
+        <div class="row">
+          <button class="btn primary" onclick="openDom()">Open DOM popup</button>
+          <button class="btn success" onclick="openWizard()">Open step wizard</button>
+        </div>
+        <div class="hint">
+          Tip: step wizard disables backdrop/ESC close to avoid accidental dismiss.
+        </div>
+      </div>
+
       <div class="box-header">
         <div class="box-title">Example</div>
         <div class="tabs">
@@ -163,16 +173,6 @@ then restore it back (and restore display/hidden state) on close. */</pre>
         <strong>功能说明：</strong>
         <code class="inline">dom</code> 支持把指定 DOM（可默认隐藏）挂进弹窗并在关闭时还原；步骤流通过同一弹窗内平滑切换实现“分步填写”体验，最终 <code class="inline">res.value</code> 返回每一步的 <code class="inline">preConfirm</code> 结果数组。
       </div>
-
-      <div class="demo-visual">
-        <div class="row">
-          <button class="btn primary" onclick="openDom()">Open DOM popup</button>
-          <button class="btn success" onclick="openWizard()">Open step wizard</button>
-        </div>
-        <div class="hint">
-          Tip: step wizard disables backdrop/ESC close to avoid accidental dismiss.
-        </div>
-      </div>
     </div>
 
     <!-- Hidden DOM content (these are mounted into Layer) -->