PyREUser3 0.1.0__py3-none-any.whl

pyreuser3/web/handler.py

@@ -0,0 +1,178 @@
+"""本地 Web UI 的 HTTP 请求处理。
+
+通过工厂函数 :func:`make_handler` 把服务配置、任务仓库和转换桥接器绑定到一个
+``BaseHTTPRequestHandler`` 子类上，处理单页应用首页、任务查询 API、路径选择与
+导出任务提交等请求。
+"""
+
+from __future__ import annotations
+
+import json
+from http.server import BaseHTTPRequestHandler
+from typing import Any
+from urllib.parse import urlparse
+
+from .jobs import JobStore
+from .page import INDEX_HTML
+from .picker import pick_path
+from .runners import ConversionRunners
+from .settings import WebSettings
+
+
+def make_handler(
+    settings: WebSettings,
+    jobs: JobStore,
+    runners: ConversionRunners,
+) -> type[BaseHTTPRequestHandler]:
+    """创建绑定当前服务状态的请求处理类。
+
+    参数：
+        settings (WebSettings): 服务运行配置。
+        jobs (JobStore): 后台任务仓库。
+        runners (ConversionRunners): 把 Web 表单参数桥接到核心转换器的执行器。
+
+    返回：
+        type[BaseHTTPRequestHandler]: 一个已闭包捕获上述依赖的请求处理类，供
+        ``ThreadingHTTPServer`` 实例化。
+    """
+
+    class WebHandler(BaseHTTPRequestHandler):
+        """处理静态首页和本地 JSON API。"""
+
+        def log_message(self, format: str, *args: Any) -> None:
+            """输出简洁的请求日志。
+
+            参数：
+                format (str): 标准库格式字符串。
+                *args (Any): 与 ``format`` 对应的参数。
+
+            返回：
+                None: 直接打印到标准输出。
+            """
+            print(f"{self.address_string()} - {format % args}")
+
+        def do_GET(self) -> None:
+            """处理首页、任务列表和任务详情的 GET 请求。
+
+            返回：
+                None: 通过写入响应体返回结果；未匹配路径返回 404。
+            """
+            path = urlparse(self.path).path
+            if path == "/":
+                # 首页是单页应用，所有前端资源都内嵌在模板里。
+                self._send_html(INDEX_HTML)
+                return
+            if path == "/api/jobs":
+                # 任务列表不包含完整日志，避免轮询时响应体过大。
+                self._handle_jobs()
+                return
+            if path.startswith("/api/jobs/"):
+                # 任务详情包含日志，用于右侧日志面板刷新。
+                self._handle_job(path.rsplit("/", 1)[-1])
+                return
+            self._send_json(404, {"error": "未找到请求路径"})
+
+        def do_POST(self) -> None:
+            """处理路径选择和导出任务提交的 POST 请求。
+
+            返回：
+                None: 通过写入响应体返回结果；请求异常时返回 400，未匹配返回 404。
+            """
+            path = urlparse(self.path).path
+            try:
+                payload = self._read_json()
+                if path == "/api/pick-path":
+                    # 只有用户主动点击选择按钮时才打开本机文件/目录对话框。
+                    self._send_json(200, pick_path(payload))
+                    return
+                if path == "/api/export":
+                    # 只提交任务，实际转换由后台线程执行。
+                    job = jobs.start("export", payload, runners.run_export)
+                    self._send_json(202, {"jobId": job.id})
+                    return
+                self._send_json(404, {"error": "未找到请求路径"})
+            except Exception as exc:
+                # 请求体解析失败或参数结构异常时直接返回 400。
+                self._send_json(400, {"error": f"{exc.__class__.__name__}: {exc}"})
+
+        def _read_json(self) -> dict[str, Any]:
+            """读取并校验 JSON 请求体。
+
+            返回：
+                dict[str, Any]: 解析后的请求体对象；无请求体时返回空字典。
+
+            异常：
+                ValueError: 当请求体不是 JSON 对象时抛出。
+            """
+            length = int(self.headers.get("Content-Length", "0") or "0")
+            raw = self.rfile.read(length) if length else b"{}"
+            if not raw:
+                return {}
+            data = json.loads(raw.decode("utf-8"))
+            if not isinstance(data, dict):
+                raise ValueError("请求体必须是 JSON 对象")
+            return data
+
+        def _handle_jobs(self) -> None:
+            """返回当前任务列表和 Web 根目录。
+
+            返回：
+                None: 以 JSON 响应输出任务列表（不含日志）和根目录。
+            """
+            payload = {
+                "jobs": [
+                    jobs.serialize(job, include_logs=False) for job in jobs.list_jobs()
+                ],
+                "rootDir": str(settings.root_dir),
+            }
+            self._send_json(200, payload)
+
+        def _handle_job(self, job_id: str) -> None:
+            """返回单个任务详情。
+
+            参数：
+                job_id (str): 任务唯一标识。
+
+            返回：
+                None: 以 JSON 响应输出含日志的任务详情；不存在时返回 404。
+            """
+            job = jobs.get(job_id)
+            if job is None:
+                self._send_json(404, {"error": "任务不存在"})
+                return
+            self._send_json(200, {"job": jobs.serialize(job, include_logs=True)})
+
+        def _send_html(self, html: str) -> None:
+            """发送 HTML 响应。
+
+            参数：
+                html (str): 要返回的 HTML 文本。
+
+            返回：
+                None: 写出状态行、响应头和正文。
+            """
+            data = html.encode("utf-8")
+            self.send_response(200)
+            self.send_header("Content-Type", "text/html; charset=utf-8")
+            self.send_header("Content-Length", str(len(data)))
+            self.end_headers()
+            self.wfile.write(data)
+
+        def _send_json(self, status: int, payload: dict[str, Any]) -> None:
+            """发送 JSON 响应。
+
+            参数：
+                status (int): HTTP 状态码。
+                payload (dict[str, Any]): 要序列化为 JSON 的响应体。
+
+            返回：
+                None: 写出状态行、响应头和正文。
+            """
+            data = json.dumps(payload, ensure_ascii=False).encode("utf-8")
+            self.send_response(status)
+            self.send_header("Content-Type", "application/json; charset=utf-8")
+            self.send_header("Content-Length", str(len(data)))
+            self.end_headers()
+            self.wfile.write(data)
+
+    return WebHandler

pyreuser3/web/jobs.py

@@ -0,0 +1,243 @@
+"""本地 Web UI 的后台任务管理。
+
+转换任务可能耗时较长，因此放到后台线程执行。本模块提供线程安全的内存任务
+仓库 :class:`JobStore`：负责创建任务、启动工作线程、记录日志与状态、序列化给
+前端，并在超出上限时清理旧任务。任务记录仅存于内存，进程退出即丢失。
+"""
+
+from __future__ import annotations
+
+import threading
+import time
+import uuid
+from dataclasses import dataclass, field
+from typing import Any, Callable
+
+
+@dataclass
+class Job:
+    """浏览器提交的一次导出任务。
+
+    属性：
+        id (str): 任务唯一标识（短十六进制串）。
+        kind (str): 任务类型（如 ``"export"``）。
+        status (str): 任务状态：``queued`` / ``running`` / ``done`` / ``failed``。
+        created_at (float): 创建时间戳（秒）。
+        updated_at (float): 最近更新时间戳（秒）。
+        logs (list[str]): 带时间前缀的日志行列表。
+        result (dict[str, Any] | None): 成功时的结果数据。
+        error (str | None): 失败时的错误描述。
+    """
+
+    id: str
+    kind: str
+    status: str = "queued"
+    created_at: float = field(default_factory=time.time)
+    updated_at: float = field(default_factory=time.time)
+    logs: list[str] = field(default_factory=list)
+    result: dict[str, Any] | None = None
+    error: str | None = None
+
+
+# 任务执行函数签名：接收 (载荷, 日志回调)，返回结果字典。
+Runner = Callable[[dict[str, Any], Callable[[str], None]], dict[str, Any]]
+
+
+class JobStore:
+    """线程安全的内存任务仓库。
+
+    使用一把互斥锁保护任务字典，对外暴露的读取方法均返回任务克隆，避免调用方
+    在锁外读取时碰到并发修改。
+    """
+
+    def __init__(self, max_jobs: int = 50) -> None:
+        """初始化任务仓库。
+
+        参数：
+            max_jobs (int): 内存中保留的最大任务数量，超出时清理最旧任务。
+
+        返回：
+            None: 构造函数，仅初始化内部状态。
+        """
+        # Web UI 只用于本地临时操作，任务记录无需持久化到磁盘。
+        self.max_jobs = max_jobs
+        self._jobs: dict[str, Job] = {}
+        self._lock = threading.Lock()
+
+    def start(self, kind: str, payload: dict[str, Any], runner: Runner) -> Job:
+        """创建后台任务并立即启动线程。
+
+        参数：
+            kind (str): 任务类型标识。
+            payload (dict[str, Any]): 传给 ``runner`` 的请求载荷。
+            runner (Runner): 实际执行任务的可调用对象。
+
+        返回：
+            Job: 新建的任务对象（其状态会由后台线程异步更新）。
+        """
+        # 任务 ID 不需要可预测，只需要足够短、方便在前端显示。
+        job = Job(id=uuid.uuid4().hex[:12], kind=kind)
+        with self._lock:
+            self._jobs[job.id] = job
+            self._cleanup_locked()
+
+        # 转换任务可能耗时很长，因此必须放到后台线程中执行。
+        thread = threading.Thread(
+            target=self._run_worker,
+            args=(job, payload, runner),
+            daemon=True,
+        )
+        thread.start()
+        return job
+
+    def list_jobs(self) -> list[Job]:
+        """按创建时间倒序返回任务快照。
+
+        返回：
+            list[Job]: 任务克隆列表，最新创建的排在最前。
+        """
+        with self._lock:
+            # 返回克隆对象，避免 HTTP 层在锁外读取时碰到并发修改。
+            return sorted(
+                (self._clone(job) for job in self._jobs.values()),
+                key=lambda job: job.created_at,
+                reverse=True,
+            )
+
+    def get(self, job_id: str) -> Job | None:
+        """按任务 ID 返回单个任务快照。
+
+        参数：
+            job_id (str): 任务唯一标识。
+
+        返回：
+            Job | None: 任务克隆；不存在时返回 ``None``。
+        """
+        with self._lock:
+            job = self._jobs.get(job_id)
+            return self._clone(job) if job is not None else None
+
+    def serialize(self, job: Job, include_logs: bool = False) -> dict[str, Any]:
+        """把任务对象转换成可 JSON 序列化的字典。
+
+        参数：
+            job (Job): 待序列化的任务对象。
+            include_logs (bool): 是否包含日志列表（任务列表接口通常不含日志以减小体积）。
+
+        返回：
+            dict[str, Any]: 使用驼峰字段名的任务字典，便于前端直接消费。
+        """
+        # 前端使用驼峰字段名，因此这里统一完成字段名转换。
+        data: dict[str, Any] = {
+            "id": job.id,
+            "kind": job.kind,
+            "status": job.status,
+            "createdAt": job.created_at,
+            "updatedAt": job.updated_at,
+            "result": job.result,
+            "error": job.error,
+        }
+        if include_logs:
+            data["logs"] = list(job.logs)
+        return data
+
+    def _run_worker(self, job: Job, payload: dict[str, Any], runner: Runner) -> None:
+        """在后台线程中执行具体任务。
+
+        参数：
+            job (Job): 当前任务对象。
+            payload (dict[str, Any]): 传给 ``runner`` 的请求载荷。
+            runner (Runner): 实际执行任务的可调用对象。
+
+        返回：
+            None: 通过更新任务状态/日志反馈执行结果。
+        """
+        self._set_job(job.id, status="running")
+        self._log(job.id, "任务已启动。")
+        try:
+            # runner 接收一个日志回调，便于转换流程把阶段性信息写回任务。
+            result = runner(payload, lambda message: self._log(job.id, message))
+        except Exception as exc:
+            # 单个任务失败只更新任务状态，不影响 HTTP 服务和其他任务。
+            error = f"{exc.__class__.__name__}: {exc}"
+            self._set_job(job.id, status="failed", error=error)
+            self._log(job.id, f"任务失败：{error}")
+            return
+        self._set_job(job.id, status="done", result=result)
+        self._log(job.id, "任务完成。")
+
+    def _set_job(self, job_id: str, **changes: Any) -> None:
+        """在锁内更新任务字段。
+
+        参数：
+            job_id (str): 任务唯一标识。
+            **changes (Any): 要写入任务对象的字段名到新值的映射。
+
+        返回：
+            None: 原地更新任务并刷新 ``updated_at``；任务不存在时直接返回。
+        """
+        with self._lock:
+            job = self._jobs.get(job_id)
+            if job is None:
+                return
+            for key, value in changes.items():
+                setattr(job, key, value)
+            job.updated_at = time.time()
+
+    def _log(self, job_id: str, message: str) -> None:
+        """在锁内追加一条任务日志。
+
+        参数：
+            job_id (str): 任务唯一标识。
+            message (str): 日志文本（会自动加上 ``[时:分:秒]`` 前缀）。
+
+        返回：
+            None: 原地追加日志并刷新 ``updated_at``；任务不存在时直接返回。
+        """
+        with self._lock:
+            job = self._jobs.get(job_id)
+            if job is None:
+                return
+            job.logs.append(f"[{time.strftime('%H:%M:%S')}] {message}")
+            job.updated_at = time.time()
+
+    def _cleanup_locked(self) -> None:
+        """在锁内移除超出保留上限的旧任务。
+
+        调用方必须已持有 ``self._lock``。
+
+        返回：
+            None: 原地裁剪任务字典，仅保留最新的 ``max_jobs`` 个任务。
+        """
+        if len(self._jobs) <= self.max_jobs:
+            return
+        ordered = sorted(
+            self._jobs.values(),
+            key=lambda job: job.created_at,
+            reverse=True,
+        )
+        keep = {job.id for job in ordered[: self.max_jobs]}
+        for job_id in list(self._jobs):
+            if job_id not in keep:
+                self._jobs.pop(job_id, None)
+
+    @staticmethod
+    def _clone(job: Job) -> Job:
+        """复制任务对象，隔离调用方和内部存储。
+
+        参数：
+            job (Job): 源任务对象。
+
+        返回：
+            Job: 字段值相同、但日志列表为独立副本的新任务对象。
+        """
+        return Job(
+            id=job.id,
+            kind=job.kind,
+            status=job.status,
+            created_at=job.created_at,
+            updated_at=job.updated_at,
+            logs=list(job.logs),
+            result=job.result,
+            error=job.error,
+        )

pyreuser3/web/page.py

@@ -0,0 +1,221 @@
+"""本地 Vue Web UI 使用的 HTML、CSS 和 TypeScript 模板。"""
+
+from __future__ import annotations
+
+STYLE_CSS = r"""
+:root{--bg:#f7f7f4;--panel:#fff;--text:#1c1d1f;--muted:#697078;--line:#d8ddd6;--accent:#176f6b;--red:#b0332e;--green:#227343;--blue:#315f9b}
+*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI","Microsoft YaHei",Arial,sans-serif;font-size:14px;letter-spacing:0}
+button,input,textarea{font:inherit}.topbar{border-bottom:1px solid var(--line);background:#fffefb}.topbar-inner{max-width:1180px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
+h1{margin:0;font-size:20px;line-height:1.2}.sub{margin:4px 0 0;color:var(--muted);line-height:1.4}.pill{border:1px solid var(--line);border-radius:999px;padding:6px 11px;background:#f3f7f1;color:#10514e;white-space:nowrap}
+main{max-width:1180px;margin:0 auto;padding:18px 20px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);gap:18px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;min-width:0}
+.head{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.head h2{margin:0;font-size:15px}.form{padding:16px;display:grid;gap:14px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.inline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.field{display:grid;gap:6px;min-width:0}.wide{grid-column:1/-1}
+label{color:#32363a;font-size:13px;font-weight:650}input,textarea{width:100%;border:1px solid #cfd7cf;border-radius:7px;background:#fff;color:var(--text);padding:9px 10px;outline:none;min-width:0}input[readonly]{background:#f7f8f5;color:#303437}input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(23,111,107,.14)}textarea{min-height:88px;resize:vertical;line-height:1.45}
+.path-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}.actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}.primary{border:1px solid #10514e;background:var(--accent);color:#fff;border-radius:7px;padding:10px 15px;min-width:112px;cursor:pointer;font-weight:700}.secondary{border:1px solid var(--line);background:#fbfcfa;color:#263433;border-radius:7px;padding:9px 11px;white-space:nowrap;cursor:pointer}.primary:disabled,.secondary:disabled{cursor:not-allowed;opacity:.62}.notice{color:var(--red);line-height:1.45;word-break:break-word}
+.jobs{max-height:244px;overflow:auto}.job{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:11px 14px;display:grid;grid-template-columns:1fr auto;gap:8px;text-align:left;cursor:pointer}.job:hover,.job.active{background:#f2f7f2}.job-title{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.time{margin-top:3px;color:var(--muted);font-size:12px}
+.badge{align-self:start;border-radius:999px;padding:4px 8px;font-size:12px;border:1px solid var(--line);white-space:nowrap}.queued,.running{color:var(--blue);background:#eef4fb;border-color:#cbd9ee}.done{color:var(--green);background:#eef8f1;border-color:#c8e2cf}.failed{color:var(--red);background:#fff0ef;border-color:#e8cbc8}
+.detail{padding:14px;display:grid;gap:12px;min-height:360px}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.metric{border:1px solid var(--line);border-radius:7px;padding:10px;background:#fbfcfa}.metric span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.metric strong{font-size:18px}
+pre{margin:0;padding:12px;border:1px solid var(--line);border-radius:7px;background:#1f2424;color:#f4f6ee;min-height:180px;max-height:420px;overflow:auto;line-height:1.5;white-space:pre-wrap;word-break:break-word}.empty,.muted{color:var(--muted)}
+@media(max-width:980px){main{grid-template-columns:1fr}}@media(max-width:680px){.topbar-inner,.actions{align-items:stretch;flex-direction:column}.grid,.inline,.metrics,.path-row{grid-template-columns:1fr}main{padding:12px}.primary,.secondary{width:100%}}
+"""
+
+APP_TS = r"""
+declare const Vue:any;
+type JobStatus="queued"|"running"|"done"|"failed";
+interface Job{id:string;kind:string;status:JobStatus;createdAt:number;updatedAt:number;logs?:string[];result?:Record<string,any>|null;error?:string|null}
+interface JobsResponse{jobs:Job[];rootDir:string}
+const{createApp,computed,nextTick,onMounted,reactive,ref,watch}=Vue;
+
+async function requestJson<T>(url:string,init?:RequestInit):Promise<T>{
+  const response=await fetch(url,init);
+  const body=await response.json().catch(()=>({}));
+  if(!response.ok)throw new Error(body.error||response.statusText);
+  return body as T;
+}
+
+function collectTotals(result:Record<string,any>|null|undefined){
+  const item=result&&result.user3?result.user3:{};
+  return{total:Number(item.total||0),success:Number(item.success||0),failed:Number(item.failed||0)};
+}
+
+createApp({
+  setup(){
+    const activeJobId=ref<string|null>(null);
+    const busy=ref(false);
+    const connectionLabel=ref("已连接");
+    const jobs=ref<Job[]>([]);
+    const logBox=ref<HTMLElement|null>(null);
+    const logRenderState=reactive({jobId:null as string|null,text:""});
+    const notice=ref("");
+    const rootDir=ref("");
+    const exportForm=reactive({
+      inputDir:"",schemaPath:"",outputDir:"",
+      il2cppDumpPath:"",treeDepth:"auto",excludeRegexes:"",
+      userMagic:"0x00525355",rszMagic:"0x005A5352"
+    });
+
+    const activeJob=computed<Job|null>(()=>jobs.value.find(job=>job.id===activeJobId.value)||null);
+    const activeTotals=computed(()=>collectTotals(activeJob.value?.result));
+    function jobLogText(job:Job|null){
+      if(!job)return "选择或启动一个任务。";
+      const lines=job.logs?[...job.logs]:[];
+      if(job.error)lines.push(`[错误] ${job.error}`);
+      if(job.result)lines.push(JSON.stringify(job.result,null,2));
+      return lines.join("\n")||"任务已提交，等待日志。";
+    }
+    function isLogNearBottom(element:HTMLElement){
+      return element.scrollHeight-element.scrollTop-element.clientHeight<24;
+    }
+    function scrollLogToBottom(element:HTMLElement){
+      window.requestAnimationFrame(()=>{element.scrollTop=element.scrollHeight});
+    }
+    function renderActiveLog(){
+      const element=logBox.value;
+      if(!element)return;
+      const job=activeJob.value;
+      const text=jobLogText(job);
+      const jobId=job?.id||null;
+      const previous=logRenderState.jobId===jobId?logRenderState.text:"";
+      const switchedJob=logRenderState.jobId!==jobId;
+      const shouldFollow=switchedJob||isLogNearBottom(element);
+
+      if(switchedJob||!previous||!text.startsWith(previous)){
+        element.textContent=text;
+      }else if(text.length>previous.length){
+        element.insertAdjacentText("beforeend",text.slice(previous.length));
+      }else{
+        return;
+      }
+
+      logRenderState.jobId=jobId;
+      logRenderState.text=text;
+      if(shouldFollow)scrollLogToBottom(element);
+    }
+
+    function mergeJob(job:Job){
+      const index=jobs.value.findIndex(item=>item.id===job.id);
+      if(index>=0)jobs.value[index]={...jobs.value[index],...job};
+      else jobs.value.unshift(job);
+    }
+    function mergeJobList(incoming:Job[]){
+      jobs.value=incoming.map(job=>{
+        const current=jobs.value.find(item=>item.id===job.id);
+        return current?{...current,...job,logs:job.logs||current.logs}:job;
+      });
+    }
+    async function refreshActive(){
+      if(!activeJobId.value)return;
+      try{mergeJob((await requestJson<{job:Job}>(`/api/jobs/${activeJobId.value}`)).job)}catch{}
+    }
+    async function refreshJobs(){
+      try{
+        const data=await requestJson<JobsResponse>("/api/jobs");
+        rootDir.value=data.rootDir;
+        mergeJobList(data.jobs);
+        if(!activeJobId.value&&jobs.value.length)activeJobId.value=jobs.value[0].id;
+        await refreshActive();
+        connectionLabel.value="已连接";
+      }catch{connectionLabel.value="连接中断"}
+    }
+    async function submitExport(){
+      notice.value="";busy.value=true;
+      try{
+        const data=await requestJson<{jobId:string}>("/api/export",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({...exportForm})});
+        activeJobId.value=data.jobId;
+        await refreshActive();
+      }catch(error){notice.value=error instanceof Error?error.message:String(error)}
+      finally{busy.value=false}
+    }
+    async function pickPath(form:Record<string,any>,key:string,kind:"file"|"directory",title:string,filetypes?:string[][]){
+      notice.value="";
+      try{
+        const data=await requestJson<{path:string}>("/api/pick-path",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({kind,title,filetypes:filetypes||[]})});
+        if(data.path)form[key]=data.path;
+      }catch(error){notice.value=error instanceof Error?error.message:String(error)}
+    }
+    function selectJob(jobId:string){activeJobId.value=jobId;refreshActive()}
+    function jobName(job:Job){return `导出 #${job.id}`}
+    function statusLabel(status:JobStatus){return {queued:"排队",running:"运行中",done:"完成",failed:"失败"}[status]||status}
+    function formatTime(value:number){return value?new Date(value*1000).toLocaleString():""}
+
+    watch(activeJob,()=>{nextTick(renderActiveLog)},{deep:true,immediate:true});
+    onMounted(()=>{renderActiveLog();refreshJobs();window.setInterval(refreshJobs,1200)});
+    return{activeJob,activeJobId,activeTotals,busy,connectionLabel,exportForm,formatTime,jobName,jobs,logBox,notice,pickPath,rootDir,selectJob,statusLabel,submitExport};
+  }
+}).mount("#app");
+"""
+
+INDEX_HTML = (
+    r"""<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>RE User3 JSON Web</title>
+  <style>"""
+    + STYLE_CSS
+    + r"""</style>
+</head>
+<body>
+  <div id="app">
+    <header class="topbar"><div class="topbar-inner">
+      <div><h1>RE User3 JSON Web</h1><p class="sub">仅支持 .user.3 解包导出，所有路径请通过选择按钮指定。</p></div>
+      <div class="pill">{{ connectionLabel }}</div>
+    </div></header>
+
+    <main>
+      <section class="panel">
+        <div class="head"><h2>导出 .user.3 为 JSON</h2><span class="muted">解包任务</span></div>
+        <form class="form" @submit.prevent="submitExport">
+          <div class="grid">
+            <div class="field wide"><label>输入目录或 .user.3 文件</label><div class="path-row"><input v-model="exportForm.inputDir" readonly placeholder="请选择目录或 .user.3 文件"><button class="secondary" type="button" @click="pickPath(exportForm,'inputDir','directory','选择包含 .user.3 的目录')">选择目录</button><button class="secondary" type="button" @click="pickPath(exportForm,'inputDir','file','选择 .user.3 文件',[['user3 文件','*.user.3'],['所有文件','*.*']])">选择文件</button></div></div>
+            <div class="field wide"><label>RE_RSZ 模板 JSON</label><div class="path-row"><input v-model="exportForm.schemaPath" readonly placeholder="请选择 RE_RSZ 模板 JSON"><button class="secondary" type="button" @click="pickPath(exportForm,'schemaPath','file','选择 RE_RSZ 模板 JSON',[['JSON 文件','*.json'],['所有文件','*.*']])">选择文件</button></div></div>
+            <div class="field wide"><label>JSON 输出目录</label><div class="path-row"><input v-model="exportForm.outputDir" readonly placeholder="请选择 JSON 输出目录"><button class="secondary" type="button" @click="pickPath(exportForm,'outputDir','directory','选择 JSON 输出目录')">选择目录</button></div></div>
+            <div class="field wide"><label>il2cpp_dump.json</label><div class="path-row"><input v-model="exportForm.il2cppDumpPath" readonly placeholder="请选择 il2cpp_dump.json"><button class="secondary" type="button" @click="pickPath(exportForm,'il2cppDumpPath','file','选择 il2cpp_dump.json',[['JSON 文件','*.json'],['所有文件','*.*']])">选择文件</button></div></div>
+          </div>
+          <div class="inline">
+            <div class="field"><label>树深度</label><input v-model="exportForm.treeDepth" autocomplete="off"></div>
+            <div class="field"><label>USR magic</label><input v-model="exportForm.userMagic" autocomplete="off"></div>
+            <div class="field"><label>RSZ magic</label><input v-model="exportForm.rszMagic" autocomplete="off"></div>
+          </div>
+          <div class="field"><label>排除正则</label><textarea v-model="exportForm.excludeRegexes" spellcheck="false"></textarea></div>
+          <div class="actions"><button class="primary" type="submit" :disabled="busy">开始导出</button><div class="notice">{{ notice }}</div></div>
+        </form>
+      </section>
+
+      <aside class="panel">
+        <div class="head"><h2>任务</h2><span class="muted">{{ jobs.length }} 个</span></div>
+        <div v-if="jobs.length" class="jobs">
+          <button v-for="job in jobs" :key="job.id" class="job" :class="{active:activeJobId===job.id}" @click="selectJob(job.id)">
+            <span><span class="job-title">{{ jobName(job) }}</span><span class="time">{{ formatTime(job.updatedAt) }}</span></span>
+            <span class="badge" :class="job.status">{{ statusLabel(job.status) }}</span>
+          </button>
+        </div>
+        <div v-else class="empty">暂无任务。</div>
+        <div class="detail">
+          <div class="metrics">
+            <div class="metric"><span>总数</span><strong>{{ activeTotals.total }}</strong></div>
+            <div class="metric"><span>成功</span><strong>{{ activeTotals.success }}</strong></div>
+            <div class="metric"><span>失败</span><strong>{{ activeTotals.failed }}</strong></div>
+          </div>
+          <pre ref="logBox">选择或启动一个任务。</pre>
+        </div>
+      </aside>
+    </main>
+  </div>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+  <script src="https://unpkg.com/typescript@5/lib/typescript.js"></script>
+  <script id="app-ts" type="text/typescript">"""
+    + APP_TS
+    + r"""</script>
+  <script>
+    (function(){
+      if(!window.Vue||!window.ts){document.body.innerHTML="<div style='padding:24px;font-family:Segoe UI,Microsoft YaHei,sans-serif'>Vue 或 TypeScript CDN 加载失败。</div>";return}
+      var source=document.getElementById("app-ts").textContent;
+      var output=window.ts.transpile(source,{target:window.ts.ScriptTarget.ES2020,module:window.ts.ModuleKind.None});
+      var script=document.createElement("script");script.textContent=output;document.body.appendChild(script);
+    })();
+  </script>
+</body>
+</html>
+"""
+)