.claude/skills/d8d-dev/visual-diff-mode-pencil.md

@@ -241,15 +241,34 @@ PVD-1 PER-PAGE LOOP:
 
 大多数功能页面需要登录才能访问，未登录会自动跳转到登录页。正确流程：
 
-1. 如果已有测试 token，在 `browser_navigate` **之前** 注入 token 到 `localStorage`:
+1. **生成测试 token**（需要组织者权限的页面必须）：
+   项目已提供预先生成 token 的脚本，直接运行：
+   ```bash
+   node tests/generate-test-token.cjs
+   ```
+   输出一个已认证组织者身份的 JWT token，复制备用。
+
+   > 脚本会使用 `api/.env` 中的 `JWT_SECRET` 生成签名，确保与后端验证一致。
+
+2. 如果已有测试 token，在 `browser_navigate` **之前** 注入 token 到 `localStorage`:
    ```javascript
    await page.evaluate((token, userInfo) => {
      localStorage.setItem('token', token);
      localStorage.setItem('user', JSON.stringify(userInfo));
    }, token, userInfo);
    ```
-2. 再导航到目标 URL
-3. 如果需要组织者权限，确保测试账号已通过局头认证（状态 `APPROVED`）
+   其中 `userInfo` 是：
+   ```javascript
+   {
+     id: "test-organizer-user-id",
+     nickname: "Test Organizer",
+     role: "organizer",
+     organizer: { id: "test-organizer-id", status: "APPROVED" }
+   }
+   ```
+
+3. 再导航到目标 URL
+4. 如果需要组织者权限，确保测试账号已通过局头认证（状态 `APPROVED`）
 
 ### 常见问题排查
 
@@ -301,6 +320,23 @@ PVD-1 PER-PAGE LOOP:
      - 设计规范（是否违反 Neon Pulse 原则：如存在不必要的 1px 边框）
 ```
 
+### 可复用组件检查（通用规则）
+
+设计稿 (.pen) 中标记 `reusable: true` 的组件为**全局可复用组件**，必须抽取为 Vue 全局组件在 `app/mini-program/src/components/` 目录，所有页面使用 import 导入，禁止在每个页面重复手写完整实现。
+
+**检查规则**：
+  1. 先通过 Pencil MCP `batch_get` 扫描 `.pen` 中所有标记 `reusable: true` 的节点 → 获取全局可复用组件列表
+  2. 对每个需要使用该组件的页面：
+     - 如果页面**完整手写实现了可复用组件代码**（未 import 使用全局组件）→ 🟡 中等差异 `moderate_count += 1`
+     - 如果使用了全局组件但样式（背景色/尺寸）不符合设计规范 → 🟡 中等差异 `moderate_count += 1`
+     - 正确使用了全局组件且样式符合规范 → 不计数
+
+**当前已识别可复用组件**：
+  - `NavigationBarPrimary` (一级页面通用导航栏) → 要求：背景 `#000000` 不透明
+  - `NavigationBarWithBack` (二级页面带返回导航栏) → 要求：背景 `#000000cc` 半透明 + `backdrop-filter: blur(20px)`
+
+**修复要求**：发现重复手写实现必须抽取为全局组件，并更新所有页面使用。
+
 ### 图标检查特别规则（@egoist/tailwindcss-icons）
 
 **设计要求**：设计节点 `type=icon_font` 必须用 tailwindcss-icons 实现，禁止使用 emoji 或纯文本占位。