fix: 优化进度调试与答题交互

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

.claude/settings.local.json

@@ -45,7 +45,21 @@
       "Bash(git -C /Users/zhongyidian/工作/育享/沪上又见故人来/shanghai-residences/.claude/worktrees/agent-a41031e2 show main:src/pages/zhangleping/home.tsx)",
       "Bash(git -C /Users/zhongyidian/工作/育享/沪上又见故人来/shanghai-residences/.claude/worktrees/agent-a41031e2 show main:src/store/storeNames.ts)",
       "Bash(git -C /Users/zhongyidian/工作/育享/沪上又见故人来/shanghai-residences/.claude/worktrees/agent-a41031e2 grep -n \"getUserDefine\" main -- src/pages/zhangleping src/store/zhanglepingStore.ts src/App.tsx)",
-      "Bash(git -C /Users/zhongyidian/工作/育享/沪上又见故人来/shanghai-residences/.claude/worktrees/agent-a41031e2 grep -n \"setDrawArtwork\\\\|clearDrawArtwork\\\\|drawArtworkDataUrl\" main -- src)"
+      "Bash(git -C /Users/zhongyidian/工作/育享/沪上又见故人来/shanghai-residences/.claude/worktrees/agent-a41031e2 grep -n \"setDrawArtwork\\\\|clearDrawArtwork\\\\|drawArtworkDataUrl\" main -- src)",
+      "Bash(git grep *)",
+      "Bash(git commit -m ' *)",
+      "Bash(bun ls-files *)",
+      "Bash(bunx prettier *)",
+      "Bash(awk 'NR>=216 && NR<=380' src/config/puzzleData.ts)",
+      "Bash(awk 'NR>=380 && NR<=540' src/config/puzzleData.ts)",
+      "Bash(awk '/^worktree / {wt=$2} /^branch / {br=$2; if \\(wt ~ /\\\\.claude\\\\/worktrees\\\\/agent-/\\) print wt\"\\\\t\"br}')",
+      "Read(//tmp/**)",
+      "Bash(git check-ignore *)",
+      "Bash(git config *)",
+      "WebSearch",
+      "Bash(grep -v \"^--$\")",
+      "Bash(grep -E \"^\\\\S+.*>.*</GuideStepsItem>$\")",
+      "Bash(git -C \"/Users/zhongyidian/工作/育享/沪上又见故人来/shanghai-residences/.claude/worktrees/agent-ab7540fc239364906\" status --short)"
     ],
     "deny": [
       "Read(public/**)",

.env.example

@@ -0,0 +1 @@
+VITE_DEBUG_ENTRY=false

.env.production

@@ -0,0 +1 @@
+VITE_DEBUG_ENTRY=false

.env.test

@@ -0,0 +1,2 @@
+VITE_DEBUG_ENTRY=true
+VITE_DISABLE_FIRST_WATCH_VIDEO_GATING=true

INPUT_VALIDATION.md

@@ -0,0 +1,128 @@
+# 信件输入校验功能说明
+
+## 功能概述
+
+为信件模板（`LetterTemplate.tsx`）的输入框添加了严格的内容校验，包括：
+
+1. **禁止英文字母** - 自动过滤并提示
+2. **禁止数字** - 自动过滤并提示
+3. **禁止所有标点符号和特殊符号**（包括中文标点和英文标点）- 自动过滤并提示
+4. **敏感词过滤** - 检测并替换为星号，提交时校验
+
+## 实现细节
+
+### 1. 核心函数（`src/lib/utils/sensitiveWords.ts`）
+
+#### `filterInput(input: string): string`
+实时过滤输入内容，在用户输入时自动去除：
+- 英文字母（a-z, A-Z）
+- 数字（0-9）
+- 所有标点符号（包括中文标点：，。！？；：等）
+- 所有特殊符号（@#$%^&*等）
+- 敏感词（替换为星号）
+
+#### `validateInput(input: string): { valid: boolean, message: string }`
+提交时完整校验，返回详细的错误信息：
+- 空内容检测
+- 英文字母检测
+- 数字检测
+- 特殊符号检测
+- 敏感词检测
+
+#### 辅助函数
+- `containsEnglish()` - 检测是否包含英文
+- `containsNumber()` - 检测是否包含数字
+- `containsSpecialChars()` - 检测是否包含标点符号或特殊符号（包括中文标点）
+- `containsSensitiveWord()` - 检测是否包含敏感词
+
+### 2. 敏感词库
+
+已扩展的敏感词库包括：
+- 基础不文明用语
+- 暴力相关词汇
+- 违法违规内容
+- 歧视性用语
+
+可根据实际需求在 `SENSITIVE_WORDS` 数组中扩展。
+
+### 3. 用户体验
+
+#### 实时过滤
+用户输入时：
+- **中文输入法支持**：在输入拼音时不会被过滤，等用户选择中文后才进行过滤
+- **英文字母、数字、所有标点符号和特殊符号** 会被立即删除（用户无法输入）
+- **敏感词** 会被替换为星号（例如："垃圾" → "**"）
+- **中文字符** 可以正常输入
+
+示例：
+- 输入 "你好abc123世界" → 实时显示 "你好世界"
+- 输入 "测试垃圾内容" → 实时显示 "测试**内容"
+- 输入 "你好，世界！" → 实时显示 "你好世界"（标点被过滤）
+- 使用中文输入法输入 "nihao" → 看到拼音 → 选择"你好" → 显示"你好" ✅
+
+#### 提交校验
+当用户点击提交时：
+- 如果内容包含被禁止的字符或敏感词，会显示相应提示
+- 错误的输入框会清空并标红
+- 用户需要重新填写
+
+#### 允许的内容
+- ✅ 纯中文字符（汉字）
+- ✅ 空格
+- ❌ 英文字母（自动删除）
+- ❌ 数字（自动删除）
+- ❌ 所有标点符号（包括中文标点如，。！？；：等，自动删除）
+- ❌ 所有特殊符号（@#$%^&*等，自动删除）
+- ⚠️ 敏感词（替换为星号 * ）
+
+## 测试
+
+所有校验函数都已通过测试：
+- ✓ 英文字母检测和过滤
+- ✓ 数字检测和过滤
+- ✓ 特殊符号检测和过滤
+- ✓ 敏感词检测和过滤
+- ✓ 中文标点符号保留
+- ✓ 完整的提交校验流程
+
+## 使用示例
+
+```typescript
+import { filterInput, validateInput } from '@/lib/utils/sensitiveWords'
+
+// 实时过滤
+const handleChange = (value: string) => {
+  const filtered = filterInput(value) // 自动过滤英文、数字、特殊符号、敏感词
+  setValue(filtered)
+}
+
+// 提交前校验
+const handleSubmit = () => {
+  const result = validateInput(value)
+  if (!result.valid) {
+    showHint(result.message)
+    return
+  }
+  // 继续提交逻辑
+}
+```
+
+## 配置选项
+
+在 `LetterFieldConfig` 中可以通过 `sanitize` 字段控制是否启用校验：
+
+```typescript
+const field: LetterFieldConfig = {
+  type: 'input',
+  sanitize: true,  // 默认启用校验
+  // sanitize: false, // 禁用校验（不建议）
+}
+```
+
+## 注意事项
+
+1. **落款姓名** 也会进行相同的校验
+2. **中文输入法支持** - 使用 `onCompositionStart` 和 `onCompositionEnd` 事件处理中文输入法，确保拼音输入过程不会被过滤
+3. **敏感词库** 需要定期维护和更新
+4. 如果需要添加更多敏感词，请在 `sensitiveWords.ts` 的 `SENSITIVE_WORDS` 数组中添加
+5. 所有标点符号（包括中文标点）都会被过滤

bun.lock

@@ -8,6 +8,7 @@
         "axios": "^1.12.2",
         "clsx": "^2.1.1",
         "framer-motion": "^12.23.26",
+        "html-to-image": "^1.11.13",
         "lucide-react": "^0.545.0",
         "mammoth": "^1.11.0",
         "react": "^19.1.1",
@@ -621,6 +622,8 @@
 
     "hasown": ["hasown@2.0.2", "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
+    "html-to-image": ["html-to-image@1.11.13", "https://registry.npmmirror.com/html-to-image/-/html-to-image-1.11.13.tgz", {}, "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg=="],
+
     "ignore": ["ignore@7.0.5", "https://registry.npmmirror.com/ignore/-/ignore-7.0.5.tgz", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
 
     "immediate": ["immediate@3.0.6", "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz", {}, "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="],

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />

package-lock.json

@@ -8,6 +8,9 @@
       "name": "shanghai-residences",
       "version": "0.0.0",
       "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "axios": "^1.12.2",
         "clsx": "^2.1.1",
         "framer-motion": "^12.23.26",
@@ -339,6 +342,59 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.27.3",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",

package.json

@@ -8,8 +8,10 @@
     "bun": ">=1.0.0"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
+    "dev": "vite --mode development",
+    "dev:test": "vite --mode test",
+    "build": "tsc && vite build --mode production",
+    "build:test": "tsc && vite build --mode test",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",

public/videoajax/videoajax.js

@@ -8,400 +8,450 @@
  *    http://en.wikipedia.org/wiki/Base64
  */
 
-(function(global) {
-    'use strict';
-    // existing version for noConflict()
-    var _Base64 = global.Base64;
-    var version = "2.1.5";
-    // if node.js, we use Buffer
-    var buffer;
-    if (typeof module !== 'undefined' && module.exports) {
-        buffer = require('buffer').Buffer;
+;(function (global) {
+  'use strict'
+  // existing version for noConflict()
+  var _Base64 = global.Base64
+  var version = '2.1.5'
+  // if node.js, we use Buffer
+  var buffer
+  if (typeof module !== 'undefined' && module.exports) {
+    buffer = require('buffer').Buffer
+  }
+  // constants
+  var b64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+  var b64tab = (function (bin) {
+    var t = {}
+    for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i
+    return t
+  })(b64chars)
+  var fromCharCode = String.fromCharCode
+  // encoder stuff
+  var cb_utob = function (c) {
+    if (c.length < 2) {
+      var cc = c.charCodeAt(0)
+      return cc < 0x80
+        ? c
+        : cc < 0x800
+          ? fromCharCode(0xc0 | (cc >>> 6)) + fromCharCode(0x80 | (cc & 0x3f))
+          : fromCharCode(0xe0 | ((cc >>> 12) & 0x0f)) +
+            fromCharCode(0x80 | ((cc >>> 6) & 0x3f)) +
+            fromCharCode(0x80 | (cc & 0x3f))
+    } else {
+      var cc = 0x10000 + (c.charCodeAt(0) - 0xd800) * 0x400 + (c.charCodeAt(1) - 0xdc00)
+      return (
+        fromCharCode(0xf0 | ((cc >>> 18) & 0x07)) +
+        fromCharCode(0x80 | ((cc >>> 12) & 0x3f)) +
+        fromCharCode(0x80 | ((cc >>> 6) & 0x3f)) +
+        fromCharCode(0x80 | (cc & 0x3f))
+      )
     }
-    // constants
-    var b64chars
-        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
-    var b64tab = function(bin) {
-        var t = {};
-        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;
-        return t;
-    }(b64chars);
-    var fromCharCode = String.fromCharCode;
-    // encoder stuff
-    var cb_utob = function(c) {
-        if (c.length < 2) {
-            var cc = c.charCodeAt(0);
-            return cc < 0x80 ? c
-                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))
-                                + fromCharCode(0x80 | (cc & 0x3f)))
-                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))
-                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))
-                   + fromCharCode(0x80 | ( cc         & 0x3f)));
-        } else {
-            var cc = 0x10000
-                + (c.charCodeAt(0) - 0xD800) * 0x400
-                + (c.charCodeAt(1) - 0xDC00);
-            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))
-                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))
-                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))
-                    + fromCharCode(0x80 | ( cc         & 0x3f)));
-        }
-    };
-    var re_utob = /[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;
-    var utob = function(u) {
-        return u.replace(re_utob, cb_utob);
-    };
-    var cb_encode = function(ccc) {
-        var padlen = [0, 2, 1][ccc.length % 3],
-        ord = ccc.charCodeAt(0) << 16
-            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)
-            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),
-        chars = [
-            b64chars.charAt( ord >>> 18),
-            b64chars.charAt((ord >>> 12) & 63),
-            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),
-            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)
-        ];
-        return chars.join('');
-    };
-    var btoa = global.btoa ? function(b) {
-        return global.btoa(b);
-    } : function(b) {
-        return b.replace(/[\s\S]{1,3}/g, cb_encode);
-    };
-    var _encode = buffer
-        ? function (u) { return (new buffer(u)).toString('base64') } 
-    : function (u) { return btoa(utob(u)) }
-    ;
-    var encode = function(u, urisafe) {
-        return !urisafe 
-            ? _encode(u)
-            : _encode(u).replace(/[+\/]/g, function(m0) {
-                return m0 == '+' ? '-' : '_';
-            }).replace(/=/g, '');
-    };
-    var encodeURI = function(u) { return encode(u, true) };
-    // decoder stuff
-    var re_btou = new RegExp([
-        '[\xC0-\xDF][\x80-\xBF]',
-        '[\xE0-\xEF][\x80-\xBF]{2}',
-        '[\xF0-\xF7][\x80-\xBF]{3}'
-    ].join('|'), 'g');
-    var cb_btou = function(cccc) {
-        switch(cccc.length) {
-        case 4:
-            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)
-                |    ((0x3f & cccc.charCodeAt(1)) << 12)
-                |    ((0x3f & cccc.charCodeAt(2)) <<  6)
-                |     (0x3f & cccc.charCodeAt(3)),
-            offset = cp - 0x10000;
-            return (fromCharCode((offset  >>> 10) + 0xD800)
-                    + fromCharCode((offset & 0x3FF) + 0xDC00));
-        case 3:
-            return fromCharCode(
-                ((0x0f & cccc.charCodeAt(0)) << 12)
-                    | ((0x3f & cccc.charCodeAt(1)) << 6)
-                    |  (0x3f & cccc.charCodeAt(2))
-            );
-        default:
-            return  fromCharCode(
-                ((0x1f & cccc.charCodeAt(0)) << 6)
-                    |  (0x3f & cccc.charCodeAt(1))
-            );
-        }
-    };
-    var btou = function(b) {
-        return b.replace(re_btou, cb_btou);
-    };
-    var cb_decode = function(cccc) {
-        var len = cccc.length,
-        padlen = len % 4,
-        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)
-            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)
-            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)
-            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),
-        chars = [
-            fromCharCode( n >>> 16),
-            fromCharCode((n >>>  8) & 0xff),
-            fromCharCode( n         & 0xff)
-        ];
-        chars.length -= [0, 0, 2, 1][padlen];
-        return chars.join('');
-    };
-    var atob = global.atob ? function(a) {
-        return global.atob(a);
-    } : function(a){
-        return a.replace(/[\s\S]{1,4}/g, cb_decode);
-    };
-    var _decode = buffer
-        ? function(a) { return (new buffer(a, 'base64')).toString() }
-    : function(a) { return btou(atob(a)) };
-    var decode = function(a){
-        return _decode(
-            a.replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })
-                .replace(/[^A-Za-z0-9\+\/]/g, '')
-        );
-    };
-    var noConflict = function() {
-        var Base64 = global.Base64;
-        global.Base64 = _Base64;
-        return Base64;
-    };
-    // export Base64
-    global.Base64 = {
-        VERSION: version,
-        atob: atob,
-        btoa: btoa,
-        fromBase64: decode,
-        toBase64: encode,
-        utob: utob,
-        encode: encode,
-        encodeURI: encodeURI,
-        btou: btou,
-        decode: decode,
-        noConflict: noConflict
-    };
-    // if ES5 is available, make Base64.extendString() available
-    if (typeof Object.defineProperty === 'function') {
-        var noEnum = function(v){
-            return {value:v,enumerable:false,writable:true,configurable:true};
-        };
-        global.Base64.extendString = function () {
-            Object.defineProperty(
-                String.prototype, 'fromBase64', noEnum(function () {
-                    return decode(this)
-                }));
-            Object.defineProperty(
-                String.prototype, 'toBase64', noEnum(function (urisafe) {
-                    return encode(this, urisafe)
-                }));
-            Object.defineProperty(
-                String.prototype, 'toBase64URI', noEnum(function () {
-                    return encode(this, true)
-                }));
-        };
+  }
+  var re_utob = /[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g
+  var utob = function (u) {
+    return u.replace(re_utob, cb_utob)
+  }
+  var cb_encode = function (ccc) {
+    var padlen = [0, 2, 1][ccc.length % 3],
+      ord =
+        (ccc.charCodeAt(0) << 16) |
+        ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8) |
+        (ccc.length > 2 ? ccc.charCodeAt(2) : 0),
+      chars = [
+        b64chars.charAt(ord >>> 18),
+        b64chars.charAt((ord >>> 12) & 63),
+        padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),
+        padlen >= 1 ? '=' : b64chars.charAt(ord & 63),
+      ]
+    return chars.join('')
+  }
+  var btoa = global.btoa
+    ? function (b) {
+        return global.btoa(b)
+      }
+    : function (b) {
+        return b.replace(/[\s\S]{1,3}/g, cb_encode)
+      }
+  var _encode = buffer
+    ? function (u) {
+        return new buffer(u).toString('base64')
+      }
+    : function (u) {
+        return btoa(utob(u))
+      }
+  var encode = function (u, urisafe) {
+    return !urisafe
+      ? _encode(u)
+      : _encode(u)
+          .replace(/[+\/]/g, function (m0) {
+            return m0 == '+' ? '-' : '_'
+          })
+          .replace(/=/g, '')
+  }
+  var encodeURI = function (u) {
+    return encode(u, true)
+  }
+  // decoder stuff
+  var re_btou = new RegExp(
+    ['[\xC0-\xDF][\x80-\xBF]', '[\xE0-\xEF][\x80-\xBF]{2}', '[\xF0-\xF7][\x80-\xBF]{3}'].join('|'),
+    'g'
+  )
+  var cb_btou = function (cccc) {
+    switch (cccc.length) {
+      case 4:
+        var cp =
+            ((0x07 & cccc.charCodeAt(0)) << 18) |
+            ((0x3f & cccc.charCodeAt(1)) << 12) |
+            ((0x3f & cccc.charCodeAt(2)) << 6) |
+            (0x3f & cccc.charCodeAt(3)),
+          offset = cp - 0x10000
+        return fromCharCode((offset >>> 10) + 0xd800) + fromCharCode((offset & 0x3ff) + 0xdc00)
+      case 3:
+        return fromCharCode(
+          ((0x0f & cccc.charCodeAt(0)) << 12) |
+            ((0x3f & cccc.charCodeAt(1)) << 6) |
+            (0x3f & cccc.charCodeAt(2))
+        )
+      default:
+        return fromCharCode(((0x1f & cccc.charCodeAt(0)) << 6) | (0x3f & cccc.charCodeAt(1)))
     }
-    // that's it!
-})(this);
+  }
+  var btou = function (b) {
+    return b.replace(re_btou, cb_btou)
+  }
+  var cb_decode = function (cccc) {
+    var len = cccc.length,
+      padlen = len % 4,
+      n =
+        (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0) |
+        (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0) |
+        (len > 2 ? b64tab[cccc.charAt(2)] << 6 : 0) |
+        (len > 3 ? b64tab[cccc.charAt(3)] : 0),
+      chars = [fromCharCode(n >>> 16), fromCharCode((n >>> 8) & 0xff), fromCharCode(n & 0xff)]
+    chars.length -= [0, 0, 2, 1][padlen]
+    return chars.join('')
+  }
+  var atob = global.atob
+    ? function (a) {
+        return global.atob(a)
+      }
+    : function (a) {
+        return a.replace(/[\s\S]{1,4}/g, cb_decode)
+      }
+  var _decode = buffer
+    ? function (a) {
+        return new buffer(a, 'base64').toString()
+      }
+    : function (a) {
+        return btou(atob(a))
+      }
+  var decode = function (a) {
+    return _decode(
+      a
+        .replace(/[-_]/g, function (m0) {
+          return m0 == '-' ? '+' : '/'
+        })
+        .replace(/[^A-Za-z0-9\+\/]/g, '')
+    )
+  }
+  var noConflict = function () {
+    var Base64 = global.Base64
+    global.Base64 = _Base64
+    return Base64
+  }
+  // export Base64
+  global.Base64 = {
+    VERSION: version,
+    atob: atob,
+    btoa: btoa,
+    fromBase64: decode,
+    toBase64: encode,
+    utob: utob,
+    encode: encode,
+    encodeURI: encodeURI,
+    btou: btou,
+    decode: decode,
+    noConflict: noConflict,
+  }
+  // if ES5 is available, make Base64.extendString() available
+  if (typeof Object.defineProperty === 'function') {
+    var noEnum = function (v) {
+      return { value: v, enumerable: false, writable: true, configurable: true }
+    }
+    global.Base64.extendString = function () {
+      Object.defineProperty(
+        String.prototype,
+        'fromBase64',
+        noEnum(function () {
+          return decode(this)
+        })
+      )
+      Object.defineProperty(
+        String.prototype,
+        'toBase64',
+        noEnum(function (urisafe) {
+          return encode(this, urisafe)
+        })
+      )
+      Object.defineProperty(
+        String.prototype,
+        'toBase64URI',
+        noEnum(function () {
+          return encode(this, true)
+        })
+      )
+    }
+  }
+  // that's it!
+})(this)
 
 if (this['Meteor']) {
-    Base64 = global.Base64; // for normal export in Meteor.js
+  Base64 = global.Base64 // for normal export in Meteor.js
 }
 
-; (function (root) {
+;(function (root) {
+  // body...
+
+  var videoajax = function (argument) {
     // body...
+    var host = '/'
 
-    var videoajax = function (argument) {
-        // body...
-        var host = '/';
-
-        this._setHost=function(hoststr) {
-            host = hoststr;
-        };
-        this._getHost = function(){
-            return host;
-        }
-    };
-
-    $.extend(videoajax.prototype,{
-        /**
-         * 设置主域名
-         * @param hosts {String} default: '/' 主域名字符串
-         */
-        setHost :function(hosts){
-            this._setHost(hosts);
-        },
-        //user_id,course_id,lesson_id，break_point
-        /**
-         * 播放退出时间点
-         * @param data {dataObject} 向后台传递的数据对象，应该包含 
-         *          user_id {Number} 用户ID
-         *          course_id {Number} 课程ID
-         *          lesson_id {Number} 课时ID
-         *          break_point {Number} 断点
-         *@param callback {Function} 回调方法
-         */
-        quitBreakPoint:function(data,callback){
-            var paramfiled = ["user_id","course_id","lesson_id","break_point"];
-            var dataStr = verfiyData(paramfiled,data);
-            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addBreakPoint',{
-                userViewPoint:dataStr
-            },function(data){
-                    isFunction(callback) ? callback(data.code == 200,data) : '';
-                }
-            );
-        },
-        /**
-         * user_id:123,course_id:23,lesson_id:3
-         *播放历史记录
-         * @param data {dataObject} 向后台传递的数据对象，应该包含 
-         *          user_id {Number} 用户ID
-         *          course_id {Number} 课程ID
-         *          lesson_id {Number} 课时ID
-         *@param callback {Function} 回调方法
-         */
-        getBreakPoint:function(data,callback){
-            var paramfiled = ["user_id","course_id","lesson_id"];
-            var dataStr = verfiyData(paramfiled,data);
-            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=userbreakpoint',{
-                userCourseInfo:dataStr
-            },function(data){
-                    isFunction(callback) ? callback(data.code == 200,data) : '';
-                    // isFunction(callback) ? callback(data) : '';
-                }
-            );
-        },
-        /**
-         *用户答题答案
-         * @param data {dataObject} 向后台传递的数据对象，应该包含 
-         *          user_id {Number} 用户ID
-         *          course_id {Number} 课程ID
-         *          lesson_id {Number} 课时ID
-         *          question_order {Number} 问题序号
-         *          answer {String} 问题
-         *@param callback {Function} 回调方法
-         */
-        getUserAnswer:function(data,callback){
-            var paramfiled = ["user_id","lesson_id","course_id","question_order","answer"];
-            var dataStr = verfiyData(paramfiled,data);
-            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addUserAnswer',{
-                userAnswerInfo:dataStr
-            },function(data){
-                    isFunction(callback) ? callback(data.code == 200,data) : '';
-                }
-            );
-
-        },
-        /**
-         *播放结束
-         * @param data {dataObject} 向后台传递的数据对象，应该包含 
-         *          order {Number} 排序ID
-         *          co {Number} 课时ID
-         *@param callback {Function} 回调方法
-         */
-        finishCourse:function(data,callback){
-            var paramfiled = ["order","co","process"];
-            var dataStr = verfiyData(paramfiled,data);
-            getDate(this._getHost()+'index.php?m=user&c=learnrecord&a=playcount',data,function(data){
-                    isFunction(callback) ? callback(data.code == 200,data) : '';
-                    // isFunction(callback) ? callback(data) : '';
-                }
-            );
-        },
-        /**
-         *课程进度获取
-         * @param data {dataObject} 向后台传递的数据对象，应该包含 
-         *          order {Number} 排序ID
-         *          co {Number} 课时ID
-         *@param callback {Function} 回调方法
-         *   注回调使用的参数,值类似为: {"status":true,"data":{"process":"91"}}
-         *                        或: {"status":false,"data":'参数丢失'}
-         *                        其中status为true为调用正常, 如果有值则data返回json形式的进度, 没有值则返回[]
-         *                        status为false时, data保存的是错误提示
-         */
-        getfinishCourse:function(data,callback){
-            var paramfiled = ["order","co"];
-            var dataStr = verfiyData(paramfiled,data);
-            getDate(this._getHost()+'index.php?m=user&c=learnrecord&a=getuserlessionprocess',data,function(data){
-                    isFunction(callback) ? callback(data) : '';
-                    // isFunction(callback) ? callback(data) : '';
-                }
-            );
-        },
-        /**
-         *解码加密的breakpoint
-         * @pparam basecode {String} 要解码的字符串
-         */
-        fromBaseCode : function(basecode){
-            return getBreakPoint(basecode);
-        },
-        /**
-         *通过key值和课时值获取自定的数据
-         * @param data {dataObject} 向后台传递的数据对象，应该包含 
-         *          lessonId {Number} 课时ID
-         *          order {Number} 排序ID
-         *@param callback {Function} 回调方法
-         */
-        getUserDefineInfo :function(data,callback){
-            var paramfiled = ["lessonId","order"];
-            var dataStr = verfiyData(paramfiled,data);
-            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=getUserDefineInfo',{
-            	defineDate:dataStr
-            },function(data){
-                isFunction(callback) ? callback(data) : '';
-            });
-        },
-        /**
-         *通过key值和课时值及用户ID获取自定的数据
-         * @param data {dataObject} 向后台传递的数据对象，应该包含 
-         *          lessonId {Number} 课时ID
-         *          order {Number} 排序ID
-         *@param callback {Function} 回调方法
-         */
-        getUserDefineInfoByUser :function(data,callback){
-            var paramfiled = ["lessonId","order"];
-            var dataStr = verfiyData(paramfiled,data);
-            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=getUserDefineInfoByUser',{
-                defineUserDate:dataStr
-            },function(data){
-                isFunction(callback) ? callback(data) : '';
-            });
-        },
-        /**
-         *增加自定数据
-         * @param data {dataObject} 向后台传递的数据对象，应该包含 
-         *          lessonId {Number} 课时ID
-         *          key {string} 键值ID
-         *          content {string} 字内容
-         *@param callback {Function} 回调方法
-         */
-        addUserDefine:function(data,callback){
-            var paramfiled = ["lessonId","key","content"];
-            var dataStr = verfiyData(paramfiled,data);
-            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addUserDefine',{
-                addDefineDate:dataStr
-            },function(data){
-                isFunction(callback) ? callback(data) : '';
-            });
-        }
-    })
-    
-    var getDate = function(url,data,callback){
-        $.get(url,data,function(data){
-            callback(data);
-        },'json')
-    };
-
-    var isFunction = function(fn){
-        if(typeof fn === 'function')return true;
-        return false;
+    this._setHost = function (hoststr) {
+      host = hoststr
     }
-    var verfiyData = function(field,data){
-        var arr=[];
-        console.log(field);
-        console.log('<br/>');
-        console.log(data);
-        for(var i in field){
+    this._getHost = function () {
+      return host
+    }
+  }
 
-            if(!data[field[i]]){
-                throw new Error('data is error');
-            }
-            arr.push(field[i]+':'+data[field[i]]);
+  $.extend(videoajax.prototype, {
+    /**
+     * 设置主域名
+     * @param hosts {String} default: '/' 主域名字符串
+     */
+    setHost: function (hosts) {
+      this._setHost(hosts)
+    },
+    //user_id,course_id,lesson_id，break_point
+    /**
+     * 播放退出时间点
+     * @param data {dataObject} 向后台传递的数据对象，应该包含
+     *          user_id {Number} 用户ID
+     *          course_id {Number} 课程ID
+     *          lesson_id {Number} 课时ID
+     *          break_point {Number} 断点
+     *@param callback {Function} 回调方法
+     */
+    quitBreakPoint: function (data, callback) {
+      var paramfiled = ['user_id', 'course_id', 'lesson_id', 'break_point']
+      var dataStr = verfiyData(paramfiled, data)
+      getDate(
+        this._getHost() + 'index.php?m=zzplatform&c=userview&a=addBreakPoint',
+        {
+          userViewPoint: dataStr,
+        },
+        function (data) {
+          isFunction(callback) ? callback(data.code == 200, data) : ''
         }
-        if(root.JSON){
-            return JSON.stringify(data);
-        }else{
-            return '{'+arr.join(',')+'}';
+      )
+    },
+    /**
+     * user_id:123,course_id:23,lesson_id:3
+     *播放历史记录
+     * @param data {dataObject} 向后台传递的数据对象，应该包含
+     *          user_id {Number} 用户ID
+     *          course_id {Number} 课程ID
+     *          lesson_id {Number} 课时ID
+     *@param callback {Function} 回调方法
+     */
+    getBreakPoint: function (data, callback) {
+      var paramfiled = ['user_id', 'course_id', 'lesson_id']
+      var dataStr = verfiyData(paramfiled, data)
+      getDate(
+        this._getHost() + 'index.php?m=zzplatform&c=userview&a=userbreakpoint',
+        {
+          userCourseInfo: dataStr,
+        },
+        function (data) {
+          isFunction(callback) ? callback(data.code == 200, data) : ''
+          // isFunction(callback) ? callback(data) : '';
         }
+      )
+    },
+    /**
+     *用户答题答案
+     * @param data {dataObject} 向后台传递的数据对象，应该包含
+     *          user_id {Number} 用户ID
+     *          course_id {Number} 课程ID
+     *          lesson_id {Number} 课时ID
+     *          question_order {Number} 问题序号
+     *          answer {String} 问题
+     *@param callback {Function} 回调方法
+     */
+    getUserAnswer: function (data, callback) {
+      var paramfiled = ['user_id', 'lesson_id', 'course_id', 'question_order', 'answer']
+      var dataStr = verfiyData(paramfiled, data)
+      getDate(
+        this._getHost() + 'index.php?m=zzplatform&c=userview&a=addUserAnswer',
+        {
+          userAnswerInfo: dataStr,
+        },
+        function (data) {
+          isFunction(callback) ? callback(data.code == 200, data) : ''
+        }
+      )
+    },
+    /**
+     *播放结束
+     * @param data {dataObject} 向后台传递的数据对象，应该包含
+     *          order {Number} 排序ID
+     *          co {Number} 课时ID
+     *@param callback {Function} 回调方法
+     */
+    finishCourse: function (data, callback) {
+      var paramfiled = ['order', 'co', 'process']
+      var dataStr = verfiyData(paramfiled, data)
+      getDate(
+        this._getHost() + 'index.php?m=user&c=learnrecord&a=playcount',
+        data,
+        function (data) {
+          isFunction(callback) ? callback(data.code == 200, data) : ''
+          // isFunction(callback) ? callback(data) : '';
+        }
+      )
+    },
+    /**
+     *课程进度获取
+     * @param data {dataObject} 向后台传递的数据对象，应该包含
+     *          order {Number} 排序ID
+     *          co {Number} 课时ID
+     *@param callback {Function} 回调方法
+     *   注回调使用的参数,值类似为: {"status":true,"data":{"process":"91"}}
+     *                        或: {"status":false,"data":'参数丢失'}
+     *                        其中status为true为调用正常, 如果有值则data返回json形式的进度, 没有值则返回[]
+     *                        status为false时, data保存的是错误提示
+     */
+    getfinishCourse: function (data, callback) {
+      var paramfiled = ['order', 'co']
+      var dataStr = verfiyData(paramfiled, data)
+      getDate(
+        this._getHost() + 'index.php?m=user&c=learnrecord&a=getuserlessionprocess',
+        data,
+        function (data) {
+          isFunction(callback) ? callback(data) : ''
+          // isFunction(callback) ? callback(data) : '';
+        }
+      )
+    },
+    /**
+     *解码加密的breakpoint
+     * @pparam basecode {String} 要解码的字符串
+     */
+    fromBaseCode: function (basecode) {
+      return getBreakPoint(basecode)
+    },
+    /**
+     *通过key值和课时值获取自定的数据
+     * @param data {dataObject} 向后台传递的数据对象，应该包含
+     *          lessonId {Number} 课时ID
+     *          order {Number} 排序ID
+     *@param callback {Function} 回调方法
+     */
+    getUserDefineInfo: function (data, callback) {
+      var paramfiled = ['lessonId', 'order']
+      var dataStr = verfiyData(paramfiled, data)
+      getDate(
+        this._getHost() + 'index.php?m=zzplatform&c=userview&a=getUserDefineInfo',
+        {
+          defineDate: dataStr,
+        },
+        function (data) {
+          isFunction(callback) ? callback(data) : ''
+        }
+      )
+    },
+    /**
+     *通过key值和课时值及用户ID获取自定的数据
+     * @param data {dataObject} 向后台传递的数据对象，应该包含
+     *          lessonId {Number} 课时ID
+     *          order {Number} 排序ID
+     *@param callback {Function} 回调方法
+     */
+    getUserDefineInfoByUser: function (data, callback) {
+      var paramfiled = ['lessonId', 'order']
+      var dataStr = verfiyData(paramfiled, data)
+      getDate(
+        this._getHost() + 'index.php?m=zzplatform&c=userview&a=getUserDefineInfoByUser',
+        {
+          defineUserDate: dataStr,
+        },
+        function (data) {
+          isFunction(callback) ? callback(data) : ''
+        }
+      )
+    },
+    /**
+     *增加自定数据
+     * @param data {dataObject} 向后台传递的数据对象，应该包含
+     *          lessonId {Number} 课时ID
+     *          key {string} 键值ID
+     *          content {string} 字内容
+     *@param callback {Function} 回调方法
+     */
+    addUserDefine: function (data, callback) {
+      var paramfiled = ['lessonId', 'key', 'content']
+      var dataStr = verfiyData(paramfiled, data)
+      getDate(
+        this._getHost() + 'index.php?m=zzplatform&c=userview&a=addUserDefine',
+        {
+          addDefineDate: dataStr,
+        },
+        function (data) {
+          isFunction(callback) ? callback(data) : ''
+        }
+      )
+    },
+  })
 
-    }
+  var getDate = function (url, data, callback) {
+    $.get(
+      url,
+      data,
+      function (data) {
+        callback(data)
+      },
+      'json'
+    )
+  }
 
-    var getBreakPoint = function (base64point) {
-        var newbc = base64point.split('').reverse().join('');
-        return Base64.fromBase64(newbc);
+  var isFunction = function (fn) {
+    if (typeof fn === 'function') return true
+    return false
+  }
+  var verfiyData = function (field, data) {
+    var arr = []
+    console.log(field)
+    console.log('<br/>')
+    console.log(data)
+    for (var i in field) {
+      if (!data[field[i]]) {
+        throw new Error('data is error')
+      }
+      arr.push(field[i] + ':' + data[field[i]])
     }
+    if (root.JSON) {
+      return JSON.stringify(data)
+    } else {
+      return '{' + arr.join(',') + '}'
+    }
+  }
 
-    root.videoAjax = function(){
-        return new videoajax();
-    }
-}(this));
+  var getBreakPoint = function (base64point) {
+    var newbc = base64point.split('').reverse().join('')
+    return Base64.fromBase64(newbc)
+  }
+
+  root.videoAjax = function () {
+    return new videoajax()
+  }
+})(this)

src/App.tsx

@@ -1,17 +1,24 @@
 import { RouterProvider } from 'react-router-dom'
-import { Suspense, useEffect } from 'react'
+import { Suspense, useEffect, useState } from 'react'
 import router from './router'
 import { ScaleProvider, useScale } from './contexts/ScaleContext'
 import { RotateHint } from './components/RotateHint'
 import { HintHost } from './components'
 import { useUserStore } from './store'
-import { getUserDefine } from '@/lib/utils/api-common'
 import {
-  usePuzzleStore,
-  deserializePuzzles,
-  PUZZLE_LESSON_ID,
-  PUZZLE_KEY,
-} from '@/store/puzzleStore'
+  SyncLoadingHost,
+  SyncPromptHost,
+  showYibanSyncErrorPrompt,
+  showYibanUnauthenticatedPrompt,
+} from '@/components'
+import { usePuzzleStore, loadPuzzleStore } from '@/store/puzzleStore'
+
+const applyStoredProgressionDebugMode = async () => {
+  if (import.meta.env.VITE_DEBUG_ENTRY !== 'true') return false
+
+  const debug = await import('@/debug/progressionDebug')
+  return debug.applyStoredProgressionDebugMode()
+}
 
 /**
  * 应用内容组件
@@ -19,11 +26,12 @@ import {
  */
 function AppContent() {
   const { scaleStyle } = useScale()
+  const [bootstrapDone, setBootstrapDone] = useState(false)
   const setCourseInfo = useUserStore((state) => state.setCourseInfo)
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search)
-    const courseId = params.get('courseid')
+    const courseId = params.get('courseId') ?? params.get('courseid')
     const uid = params.get('uid')
 
     if (courseId || uid) {
@@ -37,17 +45,35 @@ function AppContent() {
   useEffect(() => {
     ;(async () => {
       try {
-        const raw = await getUserDefine(PUZZLE_LESSON_ID, PUZZLE_KEY)
-        if (!raw) return
-        const data = JSON.parse(raw) as { puzzles?: Record<string, number[]> }
-        if (data.puzzles) {
-          usePuzzleStore.setState((prev) => ({
-            ...prev,
-            puzzles: deserializePuzzles(data.puzzles),
-          }))
+        const status = await loadPuzzleStore({ backend: 'yiban' })
+
+        if (status === 'success' || status === 'empty') {
+          useUserStore.getState().setYibanConnectionStatus('connected')
+          return
+        }
+
+        useUserStore.getState().setYibanConnectionStatus('disconnected')
+        await loadPuzzleStore({ backend: 'session' })
+
+        if (status === 'unauthenticated') {
+          showYibanUnauthenticatedPrompt()
+        } else if (status === 'error') {
+          showYibanSyncErrorPrompt()
         }
       } catch (e) {
+        useUserStore.getState().setYibanConnectionStatus('disconnected')
+        await loadPuzzleStore({ backend: 'session' })
+        showYibanSyncErrorPrompt()
         console.error('Failed to load puzzle store', e)
+      } finally {
+        await applyStoredProgressionDebugMode()
+        // 仅在测试包启用时应用阶段覆盖（防止 sessionStorage 残留污染生产数据）
+        if (import.meta.env.VITE_DEBUG_ENTRY === 'true') {
+          const { applyStoredStageOverrides } = await import('@/debug/progressionDebug')
+          applyStoredStageOverrides()
+        }
+        usePuzzleStore.getState().setLoaded(true)
+        setBootstrapDone(true)
       }
     })()
   }, [])
@@ -62,9 +88,11 @@ function AppContent() {
           }}
         >
           <Suspense fallback={<div>Loading...</div>}>
-            <RouterProvider router={router} />
+            {bootstrapDone && <RouterProvider router={router} />}
             <HintHost />
+            <SyncPromptHost />
           </Suspense>
+          <SyncLoadingHost visible={!bootstrapDone} />
         </div>
       </div>
       <RotateHint />