Merge pull request 'docs: 编辑器发布操作手册' (#3)

Reviewed-on: https://git.shuiankongjian.top/ScCN/scratch-gui/pulls/1

.github/workflows/ci.yml

@@ -0,0 +1,90 @@
+name: Build
+
+# 触发：组织仓库的两个主分支 push + 手动（fork/PR 运行只做质检不上传，令牌只读）
+on:
+  push:
+    branches: [develop, codex/editor-backend-integration]
+  workflow_dispatch:
+
+env:
+  GH_PROXY: https://v4.gh-proxy.org
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    # npm ci（依赖树庞大）+ webpack 4 全量构建，runner 较慢，放宽超时
+    timeout-minutes: 60
+    steps:
+      - uses: https://gitea.com/actions/checkout@v4
+
+      # 1. 手动安装 Node（runner 没有 hostedtoolcache，与 Backend/Frontend CI 同款）
+      - name: Setup Node.js manually
+        run: |
+          NODE_VERSION="22.23.3"
+          NODE_HASH="35947643734"
+          echo "Downloading Node.js v${NODE_VERSION} via proxy..."
+          curl -fL "${GH_PROXY}/https://github.com/actions/node-versions/releases/download/${NODE_VERSION}-${NODE_HASH}/node-${NODE_VERSION}-linux-x64.tar.gz" -o node.tar.gz
+          sudo mkdir -p /opt/hostedtoolcache/node/${NODE_VERSION}/x64
+          sudo tar -zxvf node.tar.gz -C /opt/hostedtoolcache/node/${NODE_VERSION}/x64 --strip-components=1
+          echo "/opt/hostedtoolcache/node/${NODE_VERSION}/x64/bin" >> "$GITHUB_PATH"
+          /opt/hostedtoolcache/node/${NODE_VERSION}/x64/bin/node -v
+          /opt/hostedtoolcache/node/${NODE_VERSION}/x64/bin/npm -v
+
+      # 2. npm 镜像
+      - name: Configure npm mirror
+        run: npm config set registry https://registry.npmmirror.com
+
+      # git 依赖（TurboWarp 的 scratch-* 是 git+ssh github 引用）在 runner 上
+      # 无法直连 github 且无 ssh 密钥 → 用 insteadOf 整体重写到代理。
+      # lock 保持 npm 的规范 ssh 形式（与 package.json 亲和，解析阶段可离线），
+      # 真正的 clone/ls-remote 由 git 配置在运行时透明替换。
+      - name: Proxy git remotes (insteadOf)
+        run: |
+          git config --global url."https://v4.gh-proxy.org/https://github.com/".insteadOf "ssh://git@github.com/"
+          git config --global url."https://v4.gh-proxy.org/https://github.com/".insteadOf "https://github.com/"
+
+      - name: Install dependencies
+        run: npm ci
+
+      # 3. micro:bit 包载入（生成物已提交入库则跳过；回退到脚本在线下载走 cross-fetch）
+      - name: Get micro:bit payload
+        run: |
+          if [ -f src/generated/microbit-hex-url.cjs ] && [ -f static/microbit/scratch-microbit-1.2.0.hex ]; then
+            echo "生成物已入库，跳过下载"
+          else
+            npm run prepublish
+          fi
+
+      # 4. 编辑器单元测试（Lint 跳过：menu-bar 存在既有的 24 项 lint 问题）
+      - name: Unit tests (sccn)
+        run: npx jest --runInBand test/unit/sccn test/unit/reducers/project-state-reducer.test.js
+
+      # 5. 生产构建：Webpack 4 需要 legacy OpenSSL；ROOT 决定部署子路径
+      - name: Build editor (ROOT=/scratch/)
+        env:
+          NODE_ENV: production
+          ROOT: /scratch/
+          NODE_OPTIONS: --openssl-legacy-provider
+        run: npm run build
+
+      # 6. 打包 build/（顶层无子目录，解压后直接是一组站点文件：editor.html、getter.js 等）
+      - name: Package build
+        run: |
+          set -eu
+          test -f build/editor.html
+          TARBALL="scratch-gui-build-${GITHUB_SHA::7}.tar.gz"
+          tar -czf "$TARBALL" -C build .
+          echo "--- 包内清单（前 20 行）---"
+          tar -tzf "$TARBALL" | head -20
+          echo "--- 大小 ---"
+          ls -lh "$TARBALL"
+
+      # 7. 上传为 Gitea Actions Artifact（push / 手动触发才上传）
+      - name: Upload build artifact
+        if: github.event_name != 'pull_request'
+        uses: https://gitea.com/actions/upload-artifact@v4
+        with:
+          name: scratch-gui-build-${{ github.sha }}
+          path: scratch-gui-build-*.tar.gz
+          retention-days: 30

docs/sccn-backend.md

@@ -0,0 +1,69 @@
+# 中社后端接入
+
+编辑器、播放器和嵌入页使用本站作品 ID。社区主站 `Frontend` 不在本次改动范围。
+
+## 本地开发
+
+1. 在 Backend 配置数据库并执行 `npm ci`、`npm run migrate`，确认迁移 008 已应用。
+2. Backend 的 `ALLOWED_ORIGINS` 加上 `http://localhost:8601`；保留已有主站 Origin。
+3. 在 Backend 执行 `npm run assets:import -- --gui ../scratch-gui`，再加 `--check` 校验素材完整。
+4. 启动 Backend（默认 3000），在本仓库执行 `npm ci` 和 `npm start`。
+   如果安装时跳过了 lifecycle scripts，先执行 `npm run prepublish` 下载并校验 micro:bit 资源。
+5. 打开 `http://localhost:8601/editor.html`，点右上角“登录以保存”，使用后端已注册账号。
+   本页面不创建账号，注册沿用主站。
+
+开发构建默认 API 为 `http://localhost:3000/api`。可在启动或构建时用环境变量指定，例如：
+
+```sh
+SCCN_API_BASE=https://api.example.com/api npm start
+SCCN_API_BASE=https://api.example.com/api NODE_ENV=production npm run build
+```
+
+生产未指定时默认同源 `/api`，需反向代理到 Backend。API 地址不能由 URL 参数覆写。
+Cookie 请求始终携带 credentials；跨站部署需要后端启用 HTTPS、Secure、SameSite=None，
+并允许编辑器 Origin。浏览器限制第三方 Cookie 时优先部署同源反向代理。
+
+## 使用流程
+
+- 登录恢复后，编辑中的新作品自动建立私有草稿；修改后 30 秒自动保存。
+- 文件菜单“立即保存”或 Ctrl/Cmd+S 保存到服务器；未登录时仍可下载到本地。
+- “保存副本”把当前编辑状态保存为新 ID，不修改原作；版本冲突后也可用它保留修改。
+- 右上角“我的作品”分页列出自己的作品；切换时对未保存修改提示确认。
+- `editor.html#123` 打开作品 123；刷新后读取后端最新版本、标题和素材。
+- 保存本地导入或 `project_url` 导入的项目后，清除导入参数，刷新时使用本站副本。
+- 本地 `.sb3` 导入/导出、打包功能保留。默认角色、背景、库素材和字体也会首次上传到本站，
+  不会误用 Scratch 的 `asset.clean` 标记跳过上传；当前页面成功上传过的素材不重复上传。
+- 素材库缩略图、角色全部造型、声音预览与添加统一读取本站；不再回退到 Scratch 官方素材站。
+- 后端未提供云变量服务，因此不接入 TurboWarp 公共云变量服务器，避免本站 ID 与官方 ID 混用。
+
+## 保存与错误处理
+
+保存使用与实际加载内容绑定的 revision。恢复登录、窗口重新获得焦点时刷新权限，
+不会替换本地 revision，因此不会把旧作品当作最新版本覆盖服务器。401 提示重新登录；
+409 保留编辑内容，提示下载备份或保存副本。私有作品未登录时显示登录与重新加载入口。
+上传或保存失败不会显示保存成功；保存期间继续修改的内容保持未保存状态。
+
+后端保存后的缩略图由 VM 截图上传。标题修改同样标记作品已变更并参与保存。
+复制/改编的新作品默认私有；本次未增加发布/审核、删除、社区页面或注册流程。
+
+## 验证
+
+```sh
+npx jest --runInBand test/unit/sccn test/unit/reducers/project-state-reducer.test.js
+npm run test:unit
+npm run build
+```
+
+接入与状态机 53 项测试、既有 addon 33 项测试通过。浏览器联调使用隔离 MySQL 9.7 数据库，
+验证登录/退出、新建、标题与快捷键保存、刷新恢复角色与背景、副本、我的作品、私有访问限制和
+并发冲突后另存副本。未使用业务库，未部署生产。
+
+旧的 `test/unit/util/project-saver-hoc.test.jsx` 与 `project-fetcher-hoc.test.jsx` 不在默认测试脚本中：
+当前 Jest 配置缺 DOM 环境及 webpack inline-loader 映射，直接执行会失败；本轮未扩展该旧测试环境。
+
+本次新增及其余改动源码 lint 通过；菜单文件仍有 24 项既存 lint 错误（HEAD 为 25 项），未做无关清理。
+
+## 素材与生产部署
+
+完整的素材导入、离线迁移、Nginx/systemd 配置、升级和备份步骤见 [Backend 部署说明](../../Backend/docs/07-editor-deployment.md)。
+首次部署必须先导入素材，再发布 GUI；本轮已导入 1,305 个素材并完成完整性校验。

docs/sccn-deploy-windows.md

@@ -0,0 +1,69 @@
+# Windows 单机部署 Runbook（编辑器同域子路径）
+
+对应 `docs/07-editor-deployment.md`（Linux 独立域名方案）。本仓库主站部署形态是
+**Windows + 单个 nginx**（`D:\Program Files\nginx`），所以编辑器采用**同域子路径 `/scratch/`**，
+构建产物从 Gitea Actions Artifact 下载，人工落地。
+
+## 1. 下载编辑器构建产物
+
+Backend / Frontend CI 同款流程：Gitea → `ScCN/scratch-gui` → Actions → 选中目标运行
+→ 底部 Artifacts 下载 `scratch-gui-build-<sha>.zip`，内含 `scratch-gui-build-<sha>.tar.gz`。
+
+构建时已固定 `ROOT=/scratch/`、`SCCN_API_BASE=/api`：所有 JS chunk 引用都带 `/scratch/` 前缀，
+必须放在 `sccn/Frontend/public/scratch/` 下；API 走同域 `/api`。
+
+## 2. 落地到主站静态目录
+
+```powershell
+# 解出的 build/ 内容 = editor.html、static/、js/ 等
+# 目标目录：nginx 站点根下的 scratch（与 Frontend 的 public 同级结构）
+tar -xzf scratch-gui-build-<sha>.tar.gz -C "D:\Program Files\nginx\sccn\Frontend\public\scratch"
+```
+
+`editor.html` 即入口：`https://<主站>/scratch/editor.html`，`#<作品ID>` 参数直接加载作品。
+
+## 3. 首次部署前：导入内置素材（服务器上执行）
+
+素材走后端存储，**必须先导入再发编辑器**（编辑器不再回退 Scratch 官方素材站）：
+
+```sh
+# 在 /srv 或服务器上的 Backend 目录
+npm run assets:import -- --gui ../scratch-gui        # 需要 scratch-gui 源码目录在旁边
+npm run assets:import -- --gui ../scratch-gui --check # 全部通过才发布
+```
+
+约 1,305 个去重素材（53.1 MiB），写入 `.env` 的 `PROJECT_STORAGE_DIR`。
+服务器无法访问外网时，按 `docs/07-editor-deployment.md` 第 3 节用素材种子包离线导入。
+
+## 4. nginx 配置（主站 server 块内）
+
+主站已有 `/api/` 反向代理（sccn-api.js 在用），编辑器同域复用即可，无需新 location：
+
+```nginx
+# 主站 server 块（sccn/Frontend/public 为 root）里只确认这两点：
+# 1) /api/ 反代到 Backend 127.0.0.1:3000（既有）
+# 2) client_max_body_size 至少 50m（编辑器上传作品/素材，与后端限制一致）
+client_max_body_size 50m;
+
+# /scratch/ 是纯静态：root 覆盖策略默认 try_files 即可，无需单独 location
+```
+
+修改后 `nginx -t` 通过再 reload。编辑器页面把 `$request_uri` 含访问凭证的作品 GET
+计入日志无害，但注意不要在 `/api/` 全路径上开共享缓存（会话与私有作品接口）。
+
+## 5. 验收清单
+
+```sh
+# 1. 编辑器可达
+curl --fail -I https://<主站>/scratch/editor.html
+# 2. API 健康（同域后端）
+curl --fail https://<主站>/api/health
+# 3. 内置素材直读（一个示例 MD5；换成 --check 清单里的即可）
+curl --fail -I "https://<主站>/api/editor/assets/internalapi/asset/809d9b47347a6af2860e7a3a35bce057.svg/get/"
+```
+
+浏览器：
+1. 打开 `/scratch/editor.html`，新作品默认角色/背景正常（素材全部来自 `/api/`，无外站请求）。
+2. 主站登录后（cookie 同域直接共享），编辑器右上角应显示已登录用户，可「我的作品」/保存。
+3. `editor.html#<主站社区的公开作品ID>` 能加载作品；闭源作品仅作者可载入源码。
+4. 修改后 Ctrl/S 保存，刷新主站社区页可见新修订。

docs/sccn-release.md

@@ -0,0 +1,128 @@
+# ScCN 编辑器：从构建到上线（操作手册）
+
+> 面向运维/发布执行者。开发视角见 [sccn-backend.md](sccn-backend.md)。
+> 本仓库默认分支即 `codex/editor-backend-integration`（ScCN 的自定义分支）。
+
+## 0. 速查
+
+| 事项 | 值 |
+| --- | --- |
+| 部署路径 | `<nginx 站点根>/scratch/` |
+| 入口 | `/scratch/editor.html` |
+| 构建时 `ROOT` | `/scratch/` |
+| API 基址 | `/api`（同域） |
+| 产物 | `scratch-gui-build-<sha>.tar.gz`（约 8 MB，解压约 400 个文件） |
+| 当前已验证产物 | `ca6ba48` → artifact id 9 |
+
+## 1. 前置条件（缺一个都会失败）
+
+1. **后端已发布**，且 `/api/health` 返回 `db:"up"`
+2. **内置素材已导入**（`Backend: npm run assets:import -- --gui ../scratch-gui`）
+   —— 编辑器不回退 Scratch 官方素材站，素材不在后端就加载不出来
+3. nginx 站点根 = Frontend 的 `public/` 内容
+
+## 2. 取构建产物
+
+### 方式 A：使用已验证的产物（推荐）
+
+若代码没有新提交，直接用已验证的那个：
+
+- Actions → 找到 head 为 `ca6ba48` 的 run → Artifacts
+- `scratch-gui-build-ca6ba48….tar.gz`
+
+### 方式 B：自己触发构建
+
+```sh
+# 在 fork 上推任意提交，或直接触发工作流
+curl -X POST \
+  -H "Authorization: token <你的 Gitea token>" \
+  -H "Content-Type: application/json" \
+  -d '{"ref":"codex/editor-backend-integration"}' \
+  https://git.shuiankongjian.top/api/v1/repos/ScCN/scratch-gui/actions/workflows/ci.yml/dispatches
+```
+
+工作流共 9 步：checkout → 装 Node 22 → npm 镜像 → **git insteadOf 代理** → `npm ci`
+→ micro:bit 载荷 → sccn 单测 → 构建（`ROOT=/scratch/`）→ 打包上传。
+
+> ⚠️ `package-lock.json` 里的 GitHub 依赖**必须保持 `git+ssh://git@github.com/...` 规范形式**，
+> 靠 CI 的 `url.insteadOf` 把流量导到镜像。直接改 lock 里的 URL 会让 npm 解析失败
+> （见提交 `24152b4`）。
+
+## 3. 落地到站点
+
+产物是 **tar.gz 内含构建后的 `build/` 内容**（不是 `<sha>/build/` 两级）。
+
+### Windows（当前生产形态）
+
+```powershell
+$dst = "D:\Program Files\nginx\sccn\Frontend\public\scratch"
+New-Item -ItemType Directory -Force -Path $dst | Out-Null
+tar -xzf scratch-gui-build-<sha>.tar.gz -C $dst
+```
+
+### Linux
+
+```sh
+tar -xzf scratch-gui-build-<sha>.tar.gz -C /srv/sccn/frontend-public/scratch
+```
+
+解压后目录应当是：
+
+```text
+scratch/
+  editor.html        ← 入口
+  index.html
+  fullscreen.html
+  embed.html
+  js/                ← webpack 产物，publicPath = /scratch/
+  static/
+```
+
+> **不要**把产物放进站点根目录（`/editor.html`），否则 chunk 会去找 `/js/...` 而 404。
+
+## 4. 发布后自检（逐条做，30 秒能完成）
+
+| # | 操作 | 期望 |
+| --- | --- | --- |
+| 1 | 打开 `/scratch/editor.html` | 编辑器加载，无白屏 |
+| 2 | F12 → Network，筛选 `js/` | 全部 200，路径都是 `/scratch/js/...` |
+| 3 | 点「素材库」 | 有内置角色/背景/声音（说明素材已导入） |
+| 4 | 新建作品 → 修改 → 保存 | 提示保存成功 |
+| 5 | 刷新页面 / 重新打开 | 作品内容还在（说明后端写入正常） |
+| 6 | 打开 `/scratch/editor.html#<作品ID>` | 直接加载该作品 |
+| 7 | 未登录状态下保存 | 提示登录，而不是静默失败 |
+
+第 2 条最关键：**任何 `/js/`（不带 `/scratch/` 前缀）的 404 都说明放错目录了**。
+
+## 5. 常见故障
+
+| 现象 | 原因 | 处理 |
+| --- | --- | --- |
+| 白屏，Network 里 `/js/*.js` 404 | 产物放在站点根而不是 `/scratch/` | 挪到 `/scratch/` |
+| 素材库为空 / 加载失败 | 后端未导入素材 | 跑 `assets:import`，再用 `--check` 复核 |
+| 保存报 401 | 未登录，或 Cookie 跨站被拦 | 确认同域访问、`COOKIE_SECURE` 与协议匹配 |
+| 保存报 409「作品已更新」 | 乐观锁：别处已保存 | 预期行为，重新加载后编辑 |
+| 保存报 403「已设为闭源」 | 作品为 closed，非作者不能取源码 | 预期行为 |
+| 构建卡在 `npm ci` | lock 被改成了非 ssh 形式 | 恢复 `git+ssh://git@github.com/...`，见第 2 节 |
+
+## 6. 回滚
+
+```sh
+# 保留上一份产物即可秒回滚
+mv scratch scratch.bak-<日期>
+tar -xzf <上一版>.tar.gz -C scratch
+```
+
+编辑器是纯静态产物，回滚不影响后端数据（作品保存在后端 `storage/`）。
+
+## 7. 与后端的版本兼容
+
+| 后端要求 | 说明 |
+| --- | --- |
+| `/api/editor/config` | 编辑器读取上传上限、会话地址 |
+| `/api/editor/session` | 判断登录态与可保存性 |
+| `/api/projects/:id/editor` | 下发 `projectToken`（5 分钟，绑定作品+修订号） |
+| `/api/editor/assets/internalapi/asset/:name/get` | 素材读取（公开、不可变） |
+
+> **修订号绑定**：作品一旦保存，revision 递增，旧的 `projectToken` 立即失效。
+> 这是有意的安全设计；如果遇到「加载凭证失效」，重新打开作品即可。

package-lock.json

@@ -21043,7 +21043,7 @@
     "node_modules/uglify-es": {
       "version": "3.3.10",
       "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.10.tgz",
-      "integrity": "sha512-rPzPisCzW68Okj1zNrfa2dR9uEm43SevDmpR6FChoZABFk9dANGnzzBMgHYUXI3609//63fnVkyQ1SQmAMyjww==",
+      "integrity": "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==",
       "deprecated": "support for ECMAScript is superseded by `uglify-js` as of v3.13.0",
       "dev": true,
       "license": "BSD-2-Clause",

src/components/menu-bar/menu-bar.jsx

@@ -32,6 +32,7 @@ import FramerateChanger from '../../containers/tw-framerate-changer.jsx';
 import ChangeUsername from '../../containers/tw-change-username.jsx';
 import CloudVariablesToggler from '../../containers/tw-cloud-toggler.jsx';
 import TWSaveStatus from './tw-save-status.jsx';
+import Account from '../sccn-account/account.jsx';
 import TWNews from './tw-news.jsx';
 
 import {openTipsLibrary, openSettingsModal, openRestorePointModal} from '../../reducers/modals';
@@ -340,7 +341,11 @@ class MenuBar extends React.Component {
         const modifier = bowser.mac ? event.metaKey : event.ctrlKey;
         if (modifier) {
             if (event.key.toLowerCase() === 's') {
-                this.props.handleSaveProject();
+                if (this.props.canSave) {
+                    this.props.onClickSave();
+                } else {
+                    this.props.handleSaveProject();
+                }
                 event.preventDefault();    
             } else if (event.key.toLowerCase() === 'o') {
                 event.preventDefault();    
@@ -1035,9 +1040,10 @@ class MenuBar extends React.Component {
                 </div>
 
                 <div className={styles.accountInfoGroup}>
-                    <TWSaveStatus
-                        showSaveFilePicker={this.props.showSaveFilePicker}
-                    />
+                    {this.props.canSave ? <SaveStatus /> : (
+                        <TWSaveStatus showSaveFilePicker={this.props.showSaveFilePicker} />
+                    )}
+                    <Account />
                 </div>
 
                 {aboutButton}

src/components/menu-bar/project-title-input.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, intlShape, injectIntl} from 'react-intl';
 import {setProjectTitle} from '../../reducers/project-title';
+import {setProjectChanged} from '../../reducers/project-changed';
 
 import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
 import Input from '../forms/input.jsx';
@@ -48,7 +49,10 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-    onSubmit: title => dispatch(setProjectTitle(title))
+    onSubmit: title => {
+        dispatch(setProjectTitle(title));
+        dispatch(setProjectChanged());
+    }
 });
 
 export default injectIntl(connect(

src/components/sccn-account/account.css

@@ -0,0 +1,14 @@
+@import "../../css/colors.css";
+.account { display: flex; align-items: center; gap: .5rem; }
+.account button { cursor: pointer; border: 1px solid rgba(255,255,255,.5); border-radius: .35rem; padding: .45rem .65rem; color: inherit; background: transparent; font: inherit; }
+.account button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+.modal { width: min(30rem, 95vw); margin: 6rem auto; }
+.content { padding: 1.25rem; color: $text-primary; background: $ui-primary; }
+.content form, .content label { display: flex; flex-direction: column; gap: .75rem; }
+.content label { margin-bottom: 1rem; }
+.content input { padding: .65rem; border: 1px solid $ui-black-transparent; border-radius: .3rem; }
+.content button { padding: .5rem .75rem; cursor: pointer; }
+.projects { list-style: none; padding: 0; max-height: 45vh; overflow: auto; }
+.projects button { width: 100%; text-align: left; margin-bottom: .5rem; overflow-wrap: anywhere; }
+.pagination { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
+.notice { position: fixed; top: 3.5rem; right: 1rem; max-width: min(34rem, 90vw); padding: 1rem; color: $text-primary; background: $ui-primary; border: 1px solid $ui-black-transparent; border-radius: .5rem; box-shadow: 0 4px 20px #0003; z-index: 10000; }

src/components/sccn-account/account.jsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import backend from '../../lib/sccn/api';
+import {setProjectId} from '../../reducers/project-state';
+import Modal from '../modal/modal.jsx';
+import styles from './account.css';
+
+class Account extends React.Component {
+    constructor (props) {
+        super(props);
+        this.state = {session: backend.state, panel: null, busy: false, items: [], page: 1, total: 0, error: ''};
+        this.handleClose = () => this.setState({panel: null, error: ''});
+        this.handleOpenLogin = () => this.setState({panel: 'login', error: ''});
+        this.handleOpenProjects = () => this.loadProjects(1);
+        this.handleLogin = this.handleLogin.bind(this);
+        this.handleLogout = this.handleLogout.bind(this);
+    }
+    componentDidMount () {
+        this.unsubscribe = backend.subscribe(session => this.setState({session}));
+    }
+    componentWillUnmount () {
+        this.unsubscribe();
+    }
+    async handleLogin (event) {
+        event.preventDefault();
+        const fields = new FormData(event.currentTarget);
+        this.setState({busy: true, error: ''});
+        try {
+            await backend.login(fields.get('email'), fields.get('password'));
+            this.handleClose();
+        } catch (error) {
+            this.setState({error: error.message});
+        } finally {
+            this.setState({busy: false});
+        }
+    }
+    async handleLogout () {
+        this.setState({busy: true});
+        try {
+            await backend.logout();
+            this.handleClose();
+        } catch (error) {
+            this.setState({error: error.message});
+        } finally {
+            this.setState({busy: false});
+        }
+    }
+    async loadProjects (page) {
+        this.setState({panel: 'projects', busy: true, error: ''});
+        try {
+            const data = await backend.request(`/projects?page=${page}&pageSize=10`);
+            this.setState({items: data.items, total: data.total, page});
+        } catch (error) {
+            this.setState({error: error.message});
+        } finally {
+            this.setState({busy: false});
+        }
+    }
+    openProject (id) {
+        // Do not silently discard unsaved work when navigating from the project list.
+        if (this.props.projectChanged &&
+            !window.confirm('当前修改尚未保存，确定打开其他作品吗？')) return; // eslint-disable-line no-alert
+        // An imported URL must not keep overriding the selected server project.
+        const url = new URL(window.location.href);
+        url.searchParams.delete('project_url');
+        url.searchParams.delete('project_title');
+        history.replaceState(null, '', `${url.pathname}${url.search}${url.hash}`);
+        this.props.openProject(String(id));
+        this.handleClose();
+    }
+    /* eslint-disable react/jsx-no-bind */
+    render () {
+        const {session, panel, busy, items, page, total, error} = this.state;
+        return (
+            <div className={styles.account}>
+                {session.user ? (
+                    <React.Fragment>
+                        <button
+                            type="button"
+                            onClick={this.handleOpenProjects}
+                        >{session.user.username}{' · 我的作品'}</button>
+                        <button
+                            type="button"
+                            disabled={busy}
+                            onClick={this.handleLogout}
+                        >{'退出'}</button>
+                    </React.Fragment>
+                ) : <button
+                    type="button"
+                    onClick={this.handleOpenLogin}
+                >{'登录以保存'}</button>}
+                {session.error && !panel ? (
+                    <div
+                        role="alert"
+                        className={styles.notice}
+                    >
+                        {session.error.message}
+                        <button
+                            type="button"
+                            onClick={() => backend.update({error: null})}
+                        >{'关闭'}</button>
+                    </div>
+                ) : null}
+                {panel ? (
+                    <Modal
+                        className={styles.modal}
+                        contentLabel={panel === 'login' ? '登录中社' : '我的作品'}
+                        id="sccn-account"
+                        onRequestClose={this.handleClose}
+                    >
+                        <div className={styles.content}>
+                            {error ? <p role="alert">{error}</p> : null}
+                            {panel === 'login' ? (
+                                <form onSubmit={this.handleLogin}>
+                                    <label>{'邮箱'}<input
+                                        name="email"
+                                        type="email"
+                                        autoComplete="username"
+                                        required
+                                    /></label>
+                                    <label>{'密码'}<input
+                                        name="password"
+                                        type="password"
+                                        autoComplete="current-password"
+                                        required
+                                    /></label>
+                                    <button
+                                        type="submit"
+                                        disabled={busy}
+                                    >{busy ? '正在登录…' : '登录'}</button>
+                                </form>
+                            ) : (
+                                <React.Fragment>
+                                    {busy ? <p>{'正在读取作品…'}</p> : null}
+                                    {!busy && !items.length ? <p>{'还没有保存的作品。'}</p> : null}
+                                    <ul className={styles.projects}>
+                                        {items.map(project => (
+                                            <li key={project.id}>
+                                                <button
+                                                    type="button"
+                                                    disabled={busy}
+                                                    onClick={() => this.openProject(project.id)}
+                                                >
+                                                    {project.title}{' · '}
+                                                    {project.visibility === 'public' ? '公开' : '私有'}
+                                                </button>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                    <div className={styles.pagination}>
+                                        <button
+                                            type="button"
+                                            disabled={busy || page === 1}
+                                            onClick={() => this.loadProjects(page - 1)}
+                                        >{'上一页'}</button>
+                                        <span>{`第 ${page} 页 · 共 ${total} 个作品`}</span>
+                                        <button
+                                            type="button"
+                                            disabled={busy || page * 10 >= total}
+                                            onClick={() => this.loadProjects(page + 1)}
+                                        >{'下一页'}</button>
+                                    </div>
+                                </React.Fragment>
+                            )}
+                        </div>
+                    </Modal>
+                ) : null}
+            </div>
+        );
+    }
+}
+Account.propTypes = {projectChanged: PropTypes.bool, openProject: PropTypes.func};
+export default connect(state => ({projectChanged: state.scratchGui.projectChanged}), dispatch => ({
+    openProject: id => dispatch(setProjectId(id))
+}))(Account);

src/components/tw-project-input/project-input.jsx

@@ -8,13 +8,13 @@ import {defaultProjectId} from '../../reducers/project-state';
 import styles from './project-input.css';
 import {setProjectId} from '../../lib/tw-navigation-utils';
 
-const PROJECT_BASE = 'https://scratch.mit.edu/projects/';
+const PROJECT_BASE = '';
 
 const messages = defineMessages({
     tooltip: {
-        defaultMessage: 'Copy and paste a Scratch project link here!',
+        defaultMessage: '输入中社作品编号',
         description: 'Project ID input tooltip',
-        id: 'tw.input.tooltip'
+        id: 'sccn.input.tooltip'
     }
 });
 
@@ -48,7 +48,7 @@ class ProjectInput extends React.Component {
         }
     }
     extractProjectId (text) {
-        const numberMatch = text.match(/\d+/);
+        const numberMatch = text.trim().match(/^(\d+)$/);
         return numberMatch ? numberMatch[0] : null;
     }
     readProjectId (e) {
@@ -96,6 +96,7 @@ class ProjectInput extends React.Component {
                 />
                 <input
                     ref={this.inputRef}
+                    placeholder="中社作品编号"
                     spellCheck="false"
                     type="text"
                     value={`${PROJECT_BASE}${projectId}`}

src/components/tw-project-load-error/project-load-error.jsx

@@ -3,9 +3,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import Box from '../box/box.jsx';
-import {ProjectUnavailableLegalReasons, ProjectUnsharedError} from '../../lib/tw-load-project-error';
+import {
+    BackendProjectError, ProjectUnavailableLegalReasons, ProjectUnsharedError
+} from '../../lib/tw-load-project-error';
 
 import styles from './project-load-error.css';
+import Account from '../sccn-account/account.jsx';
 
 const UNSHARED_DOCS = 'https://docs.turbowarp.org/unshared-projects';
 
@@ -125,6 +128,7 @@ UnavailableLegalReasonsMessage.propTypes = {
  * @returns {boolean} true if ProjectLoadError has a friendly message for this error.
  */
 const isKnownProjectLoadError = error => (
+    error instanceof BackendProjectError ||
     error instanceof ProjectUnsharedError ||
     error instanceof ProjectUnavailableLegalReasons
 );
@@ -136,7 +140,18 @@ const ProjectLoadError = ({error, isFullScreen}) => (
         })}
     >
         <Box className={styles.body}>
-            {error instanceof ProjectUnavailableLegalReasons ? (
+            {error instanceof BackendProjectError ? (
+                <React.Fragment>
+                    <p className={styles.header}>{'无法打开作品'}</p>
+                    <p>{error.message}</p>
+                    <p>{'私有作品需要使用作者账号登录。登录后请重新加载。'}</p>
+                    <Account />
+                    <button
+                        className={styles.button}
+                        onClick={handleReload}
+                    >{'重新加载'}</button>
+                </React.Fragment>
+            ) : error instanceof ProjectUnavailableLegalReasons ? (
                 <UnavailableLegalReasonsMessage moreUrl={error.moreUrl} />
             ) : (
                 <UnsharedMessage />

src/containers/library-item.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import {injectIntl, intlShape, defineMessages} from 'react-intl';
 
 import LibraryItemComponent from '../components/library-item/library-item.jsx';
+import {libraryAssetURL} from '../lib/sccn/library-assets';
 
 const messages = defineMessages({
     incompatible: {
@@ -139,7 +140,7 @@ class LibraryItem extends React.PureComponent {
     render () {
         const iconMd5 = this.curIconMd5();
         const iconURL = iconMd5 ?
-            `https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
+            libraryAssetURL(iconMd5) :
             this.props.iconRawURL;
         return (
             <LibraryItemComponent

src/generated/microbit-hex-url.cjs

@@ -0,0 +1,5 @@
+// This file is generated by scripts/prepublish.mjs
+// Do not edit this file directly
+// This file relies on a loader to turn this `require` into a URL
+module.exports = require('../static/microbit/scratch-microbit-1.2.0.hex');
+

src/lib/alerts/index.jsx

@@ -21,7 +21,7 @@ const alerts = [
         alertId: 'createSuccess',
         alertType: AlertTypes.STANDARD,
         clearList: ['createSuccess', 'creating', 'createCopySuccess', 'creatingCopy',
-            'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving'],
+            'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving', 'savingError', 'creatingError'],
         content: (
             <FormattedMessage
                 defaultMessage="New project created."
@@ -37,7 +37,7 @@ const alerts = [
         alertId: 'createCopySuccess',
         alertType: AlertTypes.STANDARD,
         clearList: ['createSuccess', 'creating', 'createCopySuccess', 'creatingCopy',
-            'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving'],
+            'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving', 'savingError', 'creatingError'],
         content: (
             <FormattedMessage
                 defaultMessage="Project saved as a copy."
@@ -53,7 +53,7 @@ const alerts = [
         alertId: 'createRemixSuccess',
         alertType: AlertTypes.STANDARD,
         clearList: ['createSuccess', 'creating', 'createCopySuccess', 'creatingCopy',
-            'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving'],
+            'createRemixSuccess', 'creatingRemix', 'saveSuccess', 'saving', 'savingError', 'creatingError'],
         content: (
             <FormattedMessage
                 defaultMessage="Project saved as a remix."

src/lib/project-fetcher-hoc.jsx

@@ -22,37 +22,12 @@ import {
 
 import log from './log';
 import storage from './storage';
-import {ProjectUnsharedError, ProjectFetchError, ProjectUnavailableLegalReasons} from './tw-load-project-error';
+import {BackendProjectError, ProjectFetchError} from './tw-load-project-error';
+import backend from './sccn/api';
 
 import VM from 'scratch-vm';
-import {fetchProjectMeta} from './tw-project-meta-fetcher-hoc.jsx';
-
-// TW: Temporary hack for project tokens
-const fetchProjectToken = async projectId => {
-    if (projectId === '0') {
-        return null;
-    }
-    // Parse ?token=abcdef
-    const searchParams = new URLSearchParams(location.search);
-    if (searchParams.has('token')) {
-        return searchParams.get('token');
-    }
-    // Parse #1?token=abcdef
-    const hashParams = new URLSearchParams(location.hash.split('?')[1]);
-    if (hashParams.has('token')) {
-        return hashParams.get('token');
-    }
-    try {
-        const metadata = await fetchProjectMeta(projectId);
-        return metadata.project_token;
-    } catch (e) {
-        log.error(e);
-        if (e instanceof ProjectUnavailableLegalReasons) {
-            throw e;
-        }
-        throw new ProjectUnsharedError('Cannot access project token. Project is probably unshared. See https://docs.turbowarp.org/unshared-projects');
-    }
-};
+const fetchProjectToken = projectId => (projectId === '0' ?
+    Promise.resolve(null) : backend.project(projectId).then(config => config.projectToken));
 
 /* Higher Order Component to provide behavior for loading projects by id. If
  * there's no id, the default project is loaded.
@@ -158,7 +133,7 @@ const ProjectFetcherHOC = function (WrappedComponent) {
                     }
                 })
                 .catch(err => {
-                    this.props.onError(err);
+                    this.props.onError(new BackendProjectError(err.message || '无法加载作品'));
                     log.error(err);
                 });
         }
@@ -210,8 +185,8 @@ const ProjectFetcherHOC = function (WrappedComponent) {
         vm: PropTypes.instanceOf(VM)
     };
     ProjectFetcherComponent.defaultProps = {
-        assetHost: 'https://assets.scratch.mit.edu',
-        projectHost: 'https://projects.scratch.mit.edu'
+        assetHost: backend.url('/editor/assets'),
+        projectHost: backend.url('/editor/projects')
     };
 
     const mapStateToProps = state => ({

src/lib/project-saver-hoc.jsx

@@ -6,7 +6,7 @@ import VM from 'scratch-vm';
 
 import collectMetadata from '../lib/collect-metadata';
 import log from '../lib/log';
-import storage from '../lib/storage';
+import backend from './sccn/api';
 import dataURItoBlob from '../lib/data-uri-to-blob';
 import saveProjectToServer from '../lib/save-project-to-server';
 
@@ -67,6 +67,10 @@ const ProjectSaverHOC = function (WrappedComponent) {
             this.props.onSetProjectSaver(this.tryToAutoSave);
         }
         componentDidUpdate (prevProps) {
+            if (this.rescheduleAfterSave && this.props.isShowingSaveable) {
+                this.rescheduleAfterSave = false;
+                this.scheduleAutoSave();
+            }
             if (!this.props.isAnyCreatingNewState && prevProps.isAnyCreatingNewState) {
                 this.reportTelemetryEvent('projectWasCreated');
             }
@@ -74,7 +78,8 @@ const ProjectSaverHOC = function (WrappedComponent) {
                 this.reportTelemetryEvent('projectDidLoad');
             }
 
-            if (this.props.projectChanged && !prevProps.projectChanged) {
+            if ((this.props.projectChanged && !prevProps.projectChanged) ||
+                this.props.reduxProjectTitle !== prevProps.reduxProjectTitle) {
                 this.scheduleAutoSave();
             }
             if (this.props.isUpdating && !prevProps.isUpdating) {
@@ -217,7 +222,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
          * @param {?object} requestParams - object of params to add to request body
          */
         storeProject (projectId, requestParams) {
-            requestParams = requestParams || {};
+            requestParams = {title: this.props.reduxProjectTitle, ...requestParams};
             this.clearAutoSaveTimeout();
             // Serialize VM state now before embarking on
             // the asynchronous journey of storing assets to
@@ -227,14 +232,8 @@ const ProjectSaverHOC = function (WrappedComponent) {
             // we just finished saving).
             const savedVMState = this.props.vm.toJSON();
             return Promise.all(this.props.vm.assets
-                .filter(asset => !asset.clean)
                 .map(
-                    asset => storage.store(
-                        asset.assetType,
-                        asset.dataFormat,
-                        asset.data,
-                        asset.assetId
-                    ).then(response => {
+                    asset => backend.upload(asset).then(response => {
                         // Asset servers respond with {status: ok} for successful POSTs
                         if (response.status !== 'ok') {
                             // Errors include a `code` property, e.g. "Forbidden"
@@ -246,7 +245,13 @@ const ProjectSaverHOC = function (WrappedComponent) {
             )
                 .then(() => this.props.onUpdateProjectData(projectId, savedVMState, requestParams))
                 .then(response => {
-                    this.props.onSetProjectUnchanged();
+                    if (this.props.vm.toJSON() === savedVMState &&
+                        this.props.reduxProjectTitle === requestParams.title) {
+                        this.props.onSetProjectUnchanged();
+                    } else {
+                        // The reducer is still in a saving state here; schedule once it returns to the editor.
+                        this.rescheduleAfterSave = true;
+                    }
                     const id = response.id.toString();
                     if (id && this.props.onUpdateProjectThumbnail) {
                         this.storeProjectThumbnail(id);

src/lib/save-project-to-server.js

@@ -1,63 +1,10 @@
-import queryString from 'query-string';
-import xhr from 'xhr';
-import storage from '../lib/storage';
+import backend from './sccn/api';
 
-/**
- * Save a project JSON to the project server.
- * This should eventually live in scratch-www.
- * @param {number} projectId the ID of the project, null if a new project.
- * @param {object} vmState the JSON project representation.
- * @param {object} params the request params.
- * @property {?number} params.originalId the original project ID if a copy/remix.
- * @property {?boolean} params.isCopy a flag indicating if this save is creating a copy.
- * @property {?boolean} params.isRemix a flag indicating if this save is creating a remix.
- * @property {?string} params.title the title of the project.
- * @return {Promise} A promise that resolves when the network request resolves.
- */
-export default function (projectId, vmState, params) {
-    const opts = {
-        body: vmState,
-        // If we set json:true then the body is double-stringified, so don't
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        withCredentials: true
-    };
-    const creatingProject = projectId === null || typeof projectId === 'undefined';
-    const queryParams = {};
-    if (Object.prototype.hasOwnProperty.call(params, 'originalId')) queryParams.original_id = params.originalId;
-    if (Object.prototype.hasOwnProperty.call(params, 'isCopy')) queryParams.is_copy = params.isCopy;
-    if (Object.prototype.hasOwnProperty.call(params, 'isRemix')) queryParams.is_remix = params.isRemix;
-    if (Object.prototype.hasOwnProperty.call(params, 'title')) queryParams.title = params.title;
-    let qs = queryString.stringify(queryParams);
-    if (qs) qs = `?${qs}`;
-    if (creatingProject) {
-        Object.assign(opts, {
-            method: 'post',
-            url: `${storage.projectHost}/${qs}`
-        });
-    } else {
-        Object.assign(opts, {
-            method: 'put',
-            url: `${storage.projectHost}/${projectId}${qs}`
-        });
-    }
-    return new Promise((resolve, reject) => {
-        xhr(opts, (err, response) => {
-            if (err) return reject(err);
-            if (response.statusCode !== 200) return reject(response.statusCode);
-            let body;
-            try {
-                // Since we didn't set json: true, we have to parse manually
-                body = JSON.parse(response.body);
-            } catch (e) {
-                return reject(e);
-            }
-            body.id = projectId;
-            if (creatingProject) {
-                body.id = body['content-name'];
-            }
-            resolve(body);
-        });
-    });
-}
+export default async (projectId, vmState, params) => {
+    const result = await backend.save(projectId, vmState, params);
+    // Once an imported URL has been saved, reloading must open the server copy.
+    const url = new URL(window.location.href);
+    for (const key of ['project_url', 'project_title', 'token']) url.searchParams.delete(key);
+    history.replaceState(null, '', `${url.pathname}${url.search}${url.hash.split('?')[0]}`);
+    return result;
+};

src/lib/sccn/api.js

@@ -0,0 +1,123 @@
+// The destination is deployment configuration, never a URL parameter supplied by a project.
+const apiBase = (process.env.SCCN_API_BASE || '/api').replace(/\/$/, '');
+
+class BackendClient {
+    constructor () {
+        this.state = {user: null, ready: false, error: null, projects: {}};
+        this.listeners = new Set();
+        this.uploaded = new Set();
+        this.revisions = new Map();
+    }
+    url (path) {
+        return `${apiBase}${path}`;
+    }
+    subscribe (listener) {
+        this.listeners.add(listener);
+        listener(this.state);
+        return () => this.listeners.delete(listener);
+    }
+    update (changes) {
+        this.state = {...this.state, ...changes};
+        this.listeners.forEach(listener => listener(this.state));
+    }
+    async request (path, options = {}) {
+        let response;
+        try {
+            response = await fetch(this.url(path), {credentials: 'include', ...options});
+        } catch (cause) {
+            const error = new Error('无法连接服务器，请检查网络后重试。作品仍保留在编辑器中。');
+            this.update({error});
+            throw error;
+        }
+        let body;
+        try {
+            body = await response.json();
+        } catch (cause) {
+            const error = new Error(`服务器返回了无效响应（${response.status}），请稍后重试。`);
+            this.update({error});
+            throw error;
+        }
+        if (!response.ok || (body.code && body.code !== 0)) {
+            const error = new Error(response.status === 409 ?
+                '作品已在其他窗口更新。请先下载备份或另存副本，再重新打开作品。' :
+                response.status === 401 ? '登录已失效，请重新登录后保存。' :
+                    body.message || `请求失败（${response.status}）`);
+            error.status = response.status;
+            error.code = body.code;
+            this.update({error, ...(response.status === 401 ? {user: null} : {})});
+            throw error;
+        }
+        return Object.prototype.hasOwnProperty.call(body, 'data') ? body.data : body;
+    }
+    async session () {
+        try {
+            const session = await this.request('/editor/session');
+            const changedUser = (this.state.user && this.state.user.id) !== (session.user && session.user.id);
+            this.update({user: session.user, ready: true, ...(changedUser ? {projects: {}} : {})});
+        } catch (error) {
+            this.update({user: null, ready: true});
+        }
+    }
+    async login (email, password) {
+        await this.request('/auth/login', {
+            method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({email, password})
+        });
+        await this.session();
+        if (!this.state.user) throw new Error('无法恢复登录会话，请检查浏览器 Cookie 设置。');
+        this.update({error: null});
+    }
+    async logout () {
+        await this.request('/auth/logout', {method: 'POST'});
+        this.update({user: null, projects: {}});
+    }
+    async project (id) {
+        const config = await this.request(`/projects/${encodeURIComponent(id)}/editor`);
+        this.revisions.set(String(id), config.revision);
+        this.update({projects: {...this.state.projects, [id]: config}});
+        return config;
+    }
+    async permissions (id) {
+        // Refresh permissions after login without replacing the loaded revision (lost-update protection).
+        const config = await this.request(`/projects/${encodeURIComponent(id)}/editor`);
+        this.update({projects: {...this.state.projects, [id]: config}});
+    }
+    async upload (asset) {
+        const name = `${asset.assetId}.${asset.dataFormat}`;
+        if (this.uploaded.has(name)) return {status: 'ok'};
+        const result = await this.request(`/editor/assets/${name}`, {
+            method: 'POST', headers: {'Content-Type': 'application/octet-stream'}, body: asset.data
+        });
+        this.uploaded.add(name);
+        return result;
+    }
+    async save (id, json, params = {}) {
+        const creating = id === null || typeof id === 'undefined' || String(id) === '0';
+        const query = new URLSearchParams();
+        if (params.title) query.set('title', params.title);
+        if (params.originalId) query.set('original_id', params.originalId);
+        if (params.isCopy) query.set('is_copy', '1');
+        if (params.isRemix) query.set('is_remix', '1');
+        if (!creating) {
+            const revision = this.revisions.get(String(id));
+            if (!revision) throw new Error('作品版本信息缺失，请先下载备份并重新打开作品。');
+            query.set('revision', revision);
+        }
+        const result = await this.request(`/editor/projects/${creating ? '' : id}?${query}`, {
+            method: creating ? 'POST' : 'PUT', headers: {'Content-Type': 'application/json'}, body: json
+        });
+        this.revisions.set(String(result.id), result.revision);
+        this.update({error: null,
+            projects: {...this.state.projects,
+                [result.id]: {
+                    canSave: true, canCreateCopy: true, canRemix: false, revision: result.revision
+                }}});
+        return result;
+    }
+    thumbnail (id, blob) {
+        return this.request(`/projects/${id}/thumbnail`, {method: 'POST', body: blob});
+    }
+}
+
+const backend = new BackendClient();
+export {BackendClient};
+export default backend;

src/lib/sccn/gui-hoc.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import backend from './api';
+
+const BackendHOC = WrappedComponent => {
+    class BackendGUI extends React.Component {
+        constructor (props) {
+            super(props);
+            this.state = backend.state;
+            this.refresh = () => backend.session();
+            this.handleThumbnail = (id, blob) => backend.thumbnail(id, blob).catch(() => {});
+        }
+        componentDidMount () {
+            this.unsubscribe = backend.subscribe(state => this.setState(state));
+            this.refresh();
+            window.addEventListener('focus', this.refresh);
+        }
+        componentDidUpdate (prevProps, prevState) {
+            if (this.state.user && this.state.user !== prevState.user &&
+                this.props.backendProjectId && this.props.backendProjectId !== '0') {
+                backend.permissions(this.props.backendProjectId).catch(() => {});
+            }
+        }
+        componentWillUnmount () {
+            this.unsubscribe();
+            window.removeEventListener('focus', this.refresh);
+        }
+        render () {
+            const {backendProjectId, backendPlayerOnly, ...props} = this.props;
+            const project = this.state.projects[backendProjectId];
+            const ownsProject = this.state.user && project && project.canSave;
+            return (
+                <WrappedComponent
+                    {...props}
+                    assetHost={backend.url('/editor/assets')}
+                    projectHost={backend.url('/editor/projects')}
+                    canSave={Boolean(ownsProject && !backendPlayerOnly)}
+                    canCreateNew={Boolean(this.state.user && !backendPlayerOnly)}
+                    canCreateCopy={Boolean(ownsProject && !backendPlayerOnly)}
+                    canRemix={Boolean(this.state.user && project && project.canRemix && !backendPlayerOnly)}
+                    onUpdateProjectThumbnail={this.handleThumbnail}
+                    autoSaveIntervalSecs={30}
+                />
+            );
+        }
+    }
+    BackendGUI.propTypes = {
+        backendProjectId: PropTypes.string,
+        backendPlayerOnly: PropTypes.bool
+    };
+    return connect(state => ({
+        backendProjectId: state.scratchGui.projectState.projectId,
+        backendPlayerOnly: state.scratchGui.mode.isPlayerOnly
+    }))(BackendGUI);
+};
+
+export default BackendHOC;

src/lib/sccn/library-assets.js

@@ -0,0 +1,4 @@
+import backend from './api';
+
+// Thumbnails (including rotating sprite costumes) use the same backend as VM assets.
+export const libraryAssetURL = name => backend.url(`/editor/assets/internalapi/asset/${name}/get/`);

src/lib/tw-load-project-error.js

@@ -43,7 +43,15 @@ class ProjectUnavailableLegalReasons extends LoadProjectError {
     }
 }
 
+class BackendProjectError extends LoadProjectError {
+    constructor (message) {
+        super(message);
+        this.name = 'BackendProjectError';
+    }
+}
+
 export {
+    BackendProjectError,
     LoadProjectError,
     ProjectUnsharedError,
     ProjectFetchError,

src/lib/tw-project-meta-fetcher-hoc.jsx

@@ -5,42 +5,16 @@ import log from './log';
 
 import {setProjectTitle} from '../reducers/project-title';
 import {setAuthor, setDescription} from '../reducers/tw';
-import {ProjectUnavailableLegalReasons} from './tw-load-project-error';
+import backend from './sccn/api';
 
 export const fetchProjectMeta = async projectId => {
-    // When people reopen tabs, sometimes the browser is *very* aggressive about caching even when the
-    // trampoline says not to, so we're going to try putting a cache buster in here.
-    const cacheBuster = `?rudebuster=${Math.random()}`;
-    const urls = [
-        `https://trampoline.turbowarp.org/api/projects/${projectId}${cacheBuster}`,
-        `https://trampoline.turbowarp.xyz/api/projects/${projectId}${cacheBuster}`
-    ];
-    let firstError;
-    for (const url of urls) {
-        try {
-            const res = await fetch(url);
-            const data = await res.json();
-            if (res.ok) {
-                return data;
-            }
-            if (res.status === 451) {
-                throw new ProjectUnavailableLegalReasons('Project is unavailable for legal reasons', data.url);
-            }
-            if (res.status === 404) {
-                throw new Error('Project is probably unshared');
-            }
-            throw new Error(`Unexpected status code: ${res.status}`);
-        } catch (err) {
-            // Mirror would get the same error so don't try again
-            if (err instanceof ProjectUnavailableLegalReasons) {
-                throw err;
-            }
-            if (!firstError) {
-                firstError = err;
-            }
-        }
-    }
-    throw firstError;
+    const metadata = await backend.request(`/projects/${projectId}`);
+    return {
+        ...metadata,
+        author: {id: metadata.owner_id,
+            username: backend.state.user &&
+            backend.state.user.id === metadata.owner_id ? backend.state.user.username : `用户 ${metadata.owner_id}`}
+    };
 };
 
 const getNoIndexTag = () => document.querySelector('meta[name="robots"][content="noindex"]');
@@ -81,7 +55,7 @@ const TWProjectMetaFetcherHOC = function (WrappedComponent) {
                             this.props.onSetProjectTitle(title);
                         }
                         const authorName = data.author.username;
-                        const authorThumbnail = `https://trampoline.turbowarp.org/avatars/${data.author.id}`;
+                        const authorThumbnail = '';
                         this.props.onSetAuthor(authorName, authorThumbnail);
                         const instructions = data.instructions || '';
                         const credits = data.description || '';

src/playground/render-gui.jsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import GUI from '../containers/gui.jsx';
+import BackendHOC from '../lib/sccn/gui-hoc.jsx';
 
-const searchParams = new URLSearchParams(location.search);
-const cloudHost = searchParams.get('cloud_host') || 'wss://clouddata.turbowarp.org';
+
+const initializeStorage = storage => {
+    storage.addOfficialScratchWebStores();
+};
 
 const RenderGUI = props => (
     <GUI
-        cloudHost={cloudHost}
-        canUseCloud
-        hasCloudPermission
+        canUseCloud={false}
+        hasCloudPermission={false}
         canSave={false}
+        onStorageInit={initializeStorage}
         basePath={process.env.ROOT}
         canEditTitle
         enableCommunity
@@ -17,4 +20,4 @@ const RenderGUI = props => (
     />
 );
 
-export default RenderGUI;
+export default BackendHOC(RenderGUI);

src/playground/render-interface.jsx

@@ -32,7 +32,6 @@ import '../lib/tw-fix-history-api';
 import GUI from './render-gui.jsx';
 import MenuBar from '../components/menu-bar/menu-bar.jsx';
 import ProjectInput from '../components/tw-project-input/project-input.jsx';
-import FeaturedProjects from '../components/tw-featured-projects/featured-projects.jsx';
 import Description from '../components/tw-description/description.jsx';
 import BrowserModal from '../components/browser-modal/browser-modal.jsx';
 import CloudVariableBadge from '../containers/tw-cloud-variable-badge.jsx';
@@ -279,22 +278,6 @@ class Interface extends React.Component {
                                     />
                                 </div>
                             ) : null}
-                            <div className={styles.section}>
-                                <p>
-                                    <FormattedMessage
-                                        // eslint-disable-next-line max-len
-                                        defaultMessage="{APP_NAME} is a Scratch mod that compiles projects to JavaScript to make them run really fast. Try it out by inputting a project ID or URL above or choosing a featured project below."
-                                        description="Description of TurboWarp on the homepage"
-                                        id="tw.home.description"
-                                        values={{
-                                            APP_NAME
-                                        }}
-                                    />
-                                </p>
-                            </div>
-                            <div className={styles.section}>
-                                <FeaturedProjects studio="27205657" />
-                            </div>
                         </React.Fragment>
                     ) : null}
                 </div>

src/reducers/project-state.js

@@ -20,7 +20,7 @@ const START_FETCHING_NEW = 'scratch-gui/project-state/START_FETCHING_NEW';
 const START_LOADING_VM_FILE_UPLOAD = 'scratch-gui/project-state/START_LOADING_VM_FILE_UPLOAD';
 const START_MANUAL_UPDATING = 'scratch-gui/project-state/START_MANUAL_UPDATING';
 const START_REMIXING = 'scratch-gui/project-state/START_REMIXING';
-const START_UPDATING_BEFORE_CREATING_COPY = 'scratch-gui/project-state/START_UPDATING_BEFORE_CREATING_COPY';
+const START_CREATING_COPY = 'scratch-gui/project-state/START_CREATING_COPY';
 const START_UPDATING_BEFORE_CREATING_NEW = 'scratch-gui/project-state/START_UPDATING_BEFORE_CREATING_NEW';
 
 const defaultProjectId = '0'; // hardcoded id of default project
@@ -308,10 +308,11 @@ const reducer = function (state, action) {
             });
         }
         return state;
-    case START_UPDATING_BEFORE_CREATING_COPY:
+    case START_CREATING_COPY:
         if (state.loadingState === LoadingState.SHOWING_WITH_ID) {
+            // Save the current snapshot as a new project, even when the original has a version conflict.
             return Object.assign({}, state, {
-                loadingState: LoadingState.UPDATING_BEFORE_COPY
+                loadingState: LoadingState.CREATING_COPY
             });
         }
         return state;
@@ -497,7 +498,7 @@ const manualUpdateProject = () => ({
 });
 
 const saveProjectAsCopy = () => ({
-    type: START_UPDATING_BEFORE_CREATING_COPY
+    type: START_CREATING_COPY
 });
 
 const remixProject = () => ({

test/unit/reducers/project-state-reducer.test.js

@@ -378,14 +378,14 @@ test('autoUpdateProject should prepare to update', () => {
     expect(resultState.projectId).toBe('100');
 });
 
-test('saveProjectAsCopy should save, before preparing to save as a copy', () => {
+test('saveProjectAsCopy creates a copy without overwriting the original', () => {
     const initialState = {
         projectId: '100',
         loadingState: LoadingState.SHOWING_WITH_ID
     };
     const action = saveProjectAsCopy();
     const resultState = projectStateReducer(initialState, action);
-    expect(resultState.loadingState).toBe(LoadingState.UPDATING_BEFORE_COPY);
+    expect(resultState.loadingState).toBe(LoadingState.CREATING_COPY);
     expect(resultState.projectId).toBe('100');
 });
 

test/unit/sccn/api.test.js

@@ -0,0 +1,82 @@
+import {BackendClient} from '../../../src/lib/sccn/api';
+
+const response = (data, status = 200) => ({ok: status < 400, status, json: async () => data});
+
+describe('ScCN backend adapter', () => {
+    let client;
+    beforeEach(() => {
+        client = new BackendClient();
+        global.fetch = jest.fn();
+    });
+    afterEach(() => { delete global.fetch; });
+
+    test('uploads even clean builtin assets once per server session', async () => {
+        fetch.mockResolvedValue(response({status: 'ok'}));
+        const asset = {assetId: 'abc', dataFormat: 'svg', data: new Uint8Array([1, 2]), clean: true};
+        await client.upload(asset);
+        await client.upload(asset);
+        expect(fetch).toHaveBeenCalledTimes(1);
+        expect(fetch.mock.calls[0][1]).toMatchObject({credentials: 'include', method: 'POST', body: asset.data});
+    });
+    test('failed uploads remain retryable', async () => {
+        fetch.mockResolvedValueOnce(response({code: 40101}, 401)).mockResolvedValue(response({status: 'ok'}));
+        const asset = {assetId: 'abc', dataFormat: 'svg', data: new Uint8Array([1])};
+        await expect(client.upload(asset)).rejects.toThrow('登录');
+        await client.upload(asset);
+        expect(fetch).toHaveBeenCalledTimes(2);
+    });
+    test('creates a project with raw JSON and updates with the loaded revision', async () => {
+        fetch.mockResolvedValueOnce(response({'content-name': '12', id: 12, revision: 1}))
+            .mockResolvedValueOnce(response({id: 12, revision: 2}));
+        await client.save(null, '{"targets":[]}', {title: '标题'});
+        await client.save('12', '{"targets":[]}', {title: '新标题'});
+        expect(fetch.mock.calls[0][0]).toContain('/editor/projects/?title=');
+        expect(fetch.mock.calls[0][1].body).toBe('{"targets":[]}');
+        expect(fetch.mock.calls[1][0]).toContain('revision=1');
+        expect(client.revisions.get('12')).toBe(2);
+    });
+    test('does not overwrite the loaded revision when refreshing permissions', async () => {
+        fetch.mockResolvedValueOnce(response({data: {revision: 4, canSave: true}}))
+            .mockResolvedValueOnce(response({data: {revision: 9, canSave: true}}))
+            .mockResolvedValueOnce(response({code: 40902}, 409));
+        await client.project('12');
+        await client.permissions('12');
+        expect(client.revisions.get('12')).toBe(4);
+        await expect(client.save('12', '{}')).rejects.toThrow('其他窗口');
+        expect(client.revisions.get('12')).toBe(4);
+        expect(fetch.mock.calls[2][0]).toContain('revision=4');
+    });
+    test('copy and remix create new IDs without a revision precondition', async () => {
+        fetch.mockResolvedValue(response({id: 13, revision: 1}));
+        await client.save(null, '{}', {originalId: 12, isCopy: 1});
+        expect(fetch.mock.calls[0][0]).toContain('original_id=12&is_copy=1');
+        expect(fetch.mock.calls[0][0]).not.toContain('revision=');
+        await client.save(null, '{}', {originalId: 12, isRemix: 1});
+        expect(fetch.mock.calls[1][0]).toContain('original_id=12&is_remix=1');
+    });
+    test('refuses updates without a loaded version', async () => {
+        await expect(client.save('12', '{}')).rejects.toThrow('版本');
+        expect(fetch).not.toHaveBeenCalled();
+    });
+    test('switching accounts clears cached ownership', async () => {
+        client.state = {...client.state, user: {id: 1}, projects: {12: {canSave: true}}};
+        fetch.mockResolvedValue(response({data: {user: {id: 2}}}));
+        await client.session();
+        expect(client.state.projects).toEqual({});
+        expect(client.state.user.id).toBe(2);
+    });
+    test('logout clears ownership and uses the HttpOnly cookie', async () => {
+        client.state = {...client.state, user: {id: 1}, projects: {12: {canSave: true}}};
+        fetch.mockResolvedValue(response({code: 0}));
+        await client.logout();
+        expect(client.state.user).toBe(null);
+        expect(client.state.projects).toEqual({});
+        expect(fetch.mock.calls[0][1]).toMatchObject({credentials: 'include', method: 'POST'});
+    });
+    test('handles network and non-JSON responses without claiming a successful save', async () => {
+        fetch.mockRejectedValueOnce(new Error('network'));
+        await expect(client.save(null, '{}')).rejects.toThrow('无法连接服务器');
+        fetch.mockResolvedValueOnce({ok: true, status: 200, json: async () => { throw new Error('html'); }});
+        await expect(client.save(null, '{}')).rejects.toThrow('无效响应');
+    });
+});

test/unit/sccn/autosave.test.js

@@ -0,0 +1,54 @@
+import projectSaverHOC from '../../../src/lib/project-saver-hoc.jsx';
+
+jest.mock('react-redux', () => ({connect: () => Component => Component}));
+jest.mock('scratch-vm', () => class VM {});
+jest.mock('../../../src/lib/collect-metadata', () => jest.fn());
+jest.mock('../../../src/lib/log', () => ({error: jest.fn()}));
+jest.mock('../../../src/reducers/alerts', () => ({}));
+jest.mock('../../../src/lib/sccn/api', () => ({upload: jest.fn()}));
+
+const makeSaver = () => {
+    const Component = projectSaverHOC(() => null);
+    const props = {
+        reduxProjectTitle: 'Original title',
+        vm: {toJSON: jest.fn(() => '{"targets":[]}'), assets: []},
+        autoSaveTimeoutId: null,
+        autoSaveIntervalSecs: 30,
+        isShowingSaveable: false,
+        isUpdating: true,
+        projectChanged: true,
+        setAutoSaveTimeoutId: jest.fn(),
+        onSetProjectUnchanged: jest.fn()
+    };
+    const instance = new Component(props);
+    instance.reportTelemetryEvent = jest.fn();
+    return {instance, props};
+};
+
+afterEach(() => jest.useRealTimers());
+
+test('edits during a save remain dirty and schedule another save after the saving state ends', async () => {
+    jest.useFakeTimers();
+    const {instance, props} = makeSaver();
+    let finish;
+    props.onUpdateProjectData = jest.fn(() => new Promise(resolve => { finish = resolve; }));
+    const saving = instance.storeProject('1');
+    await Promise.resolve();
+    instance.props = {...props, reduxProjectTitle: 'Edited while saving'};
+    finish({id: 1});
+    await saving;
+    expect(props.onSetProjectUnchanged).not.toHaveBeenCalled();
+    expect(props.setAutoSaveTimeoutId).not.toHaveBeenCalled();
+    const previous = instance.props;
+    instance.props = {...previous, isUpdating: false, isShowingSaveable: true};
+    instance.componentDidUpdate(previous);
+    expect(props.setAutoSaveTimeoutId).toHaveBeenCalledTimes(1);
+});
+
+test('an unchanged snapshot becomes clean without scheduling another save', async () => {
+    const {instance, props} = makeSaver();
+    props.onUpdateProjectData = jest.fn().mockResolvedValue({id: 1});
+    await instance.storeProject('1');
+    expect(props.onSetProjectUnchanged).toHaveBeenCalledTimes(1);
+    expect(props.setAutoSaveTimeoutId).not.toHaveBeenCalled();
+});

test/unit/sccn/library-assets.test.js

@@ -0,0 +1,9 @@
+import {libraryAssetURL} from '../../../src/lib/sccn/library-assets';
+
+jest.mock('../../../src/lib/sccn/api', () => ({url: path => `https://backend.example/api${path}`}));
+
+test('library previews use the configured backend including its API prefix', () => {
+    expect(libraryAssetURL('809d9b47347a6af2860e7a3a35bce057.svg')).toBe(
+        'https://backend.example/api/editor/assets/internalapi/asset/809d9b47347a6af2860e7a3a35bce057.svg/get/'
+    );
+});

test/unit/sccn/save-project.test.js

@@ -0,0 +1,26 @@
+import saveProject from '../../../src/lib/save-project-to-server';
+import backend from '../../../src/lib/sccn/api';
+
+jest.mock('../../../src/lib/sccn/api', () => ({save: jest.fn()}));
+
+describe('saved import navigation', () => {
+    beforeEach(() => {
+        global.window = {location: {href: 'http://localhost/editor.html?project_url=https%3A%2F%2Fexample.test%2Fa.sb3&project_title=old&token=read-token&locale=zh-cn#0?token=old'}};
+        global.history = {replaceState: jest.fn()};
+    });
+    afterEach(() => {
+        delete global.window;
+        delete global.history;
+        jest.clearAllMocks();
+    });
+    test('successful save removes stale import overrides but preserves editor options', async () => {
+        backend.save.mockResolvedValue({id: 8, revision: 1});
+        expect(await saveProject(null, '{}', {title: '作品'})).toEqual({id: 8, revision: 1});
+        expect(history.replaceState).toHaveBeenCalledWith(null, '', '/editor.html?locale=zh-cn#0');
+    });
+    test('failed saves leave the import URL intact', async () => {
+        backend.save.mockRejectedValue(new Error('offline'));
+        await expect(saveProject(null, '{}')).rejects.toThrow('offline');
+        expect(history.replaceState).not.toHaveBeenCalled();
+    });
+});

webpack.config.js

@@ -179,6 +179,8 @@ module.exports = [
                 'process.env.DEBUG': Boolean(process.env.DEBUG),
                 'process.env.ENABLE_SERVICE_WORKER': JSON.stringify(process.env.ENABLE_SERVICE_WORKER || ''),
                 'process.env.ROOT': JSON.stringify(root),
+                'process.env.SCCN_API_BASE': JSON.stringify(process.env.SCCN_API_BASE ||
+                    (process.env.NODE_ENV === 'production' ? '/api' : 'http://localhost:3000/api')),
                 'process.env.ROUTING_STYLE': JSON.stringify(process.env.ROUTING_STYLE || 'filehash'),
                 'process.env.ENABLE_WINDCHIMES': JSON.stringify(process.env.ENABLE_WINDCHIMES || '')
             }),