优化图片和显示问题

- 删除 design1 ui 遗留代码，修复加载竞态与新建不弹保存提示
- cloud-files 归一化旧版 .soon，IndexedDB 写入完成后再跳转设计页
- 模板/本地 .soon 首次保存须另存为，离开前统一确认
- 发版缓存 bust（version.js、soon-cache.js）及宝塔 Nginx 配置文档

Co-authored-by: Cursor <cursoragent@cursor.com>

.cursor/rules/agent-core.mdc

@@ -17,7 +17,8 @@ alwaysApply: true
 - **继承上下文**：结合整段对话；最新一条默认延续当前任务，区分细化与换方向。
 - **回复**：简体中文；标识符与代码保持原文。结构：**结论** → **要点** → **命令**（若有）。少寒暄、少加粗；禁「保证/一定/完美/彻底解决」。
 - **引用代码**：独占一行 `startLine:endLine:filepath`，行号与路径须真实。
-- **中文 UTF-8**：含中文文件 UTF-8 无 BOM；灌库只用 `scripts/apply-mysql-utf8.ps1`（禁 `type`/管道灌库）；`bat` 不写中文 SQL。
+- **中文 UTF-8**：含中文文件 UTF-8 无 BOM；灌库在 `backend-web` 目录执行 `mysql ... < database/schema.sql`（禁 `type`/管道灌库）；`bat` 不写中文 SQL。
+- **本仓库配置**：后端 `backend-web/config/local.php`；前端 `frontend-web/config/local.js`（gitignore，全量更新勿覆盖；页面直接引该文件，设置 `SOON_DEPLOY_CONFIG`）。
 
 ## 改动
 

.cursor/rules/soon-file-format.mdc

@@ -0,0 +1,35 @@
+---
+description: .soon 文件 JSON 契约（与 soonDesign-back / soonWorkerDisk 对齐）
+globs:
+  - frontend-web/js/design1/**
+  - frontend-web/js/design2/**
+  - frontend-electron/js/design1/**
+  - frontend-electron/js/design2/**
+  - frontend-web/js/common/cloud-files.js
+alwaysApply: false
+---
+
+# .soon 文件格式（不可擅自变更）
+
+## 权威参考
+
+- 旧版程序：`soonDesign-back/lib/design1/output.js`、`design2/output.js`（gitignore，本机对照）
+- 下游消费：`soonWorkerDisk/.../workAdd.vue`（依赖 `frontData`、`backData`、`frontDisplayPic` 等）
+
+## 保存契约
+
+`output()` 生成的生产字段与画布字段**必须完整写入**，禁止在 save/upload/session/IDB 路径删除或改名：
+
+- 生产：`frontData`、`backData`、`frontColorPic`、`backColorPic`、`frontBlackPic`、`backBlackPic`、`frontDisplayPic`、`backDisplayPic`、`flag`、`soonType`
+- 画布：`f`、`b`、`fo`、`bo`（及旧版可能有的 `fp`、`bp`）
+
+保存模式：`Object.assign({ f, b, fo, bo, ... }, op1)` → `JSON.stringify`，与 `soonDesign-back` 一致。
+
+## 禁止
+
+- 保存/上传/缓存前 `delete` 上述生产字段（历史上 `soonStripDesign1HeavyFields` 类逻辑）
+- 仅保留 `f/b/fo/bo` 的「精简 .soon」写法
+
+## 加载
+
+`soonNormalizeSoonJson` 只允许补全缺失的 `f/b/fo/bo`（兼容极旧文件），**不得 strip** 生产字段，以便打开后另存仍满足下游。

.gitignore

@@ -6,14 +6,24 @@ npm-debug.log*
 dist/*.zip
 _salvage/
 backend-web/config/local.php
+frontend-web/config/local.js
 docker/.env
 docker/config/local.php
-docker/config/deploy-config.js
+docker/config/local.js
 soonModels/*.soon
+# backend-web 运行时 storage（仅保留各目录 .gitkeep）
 backend-web/storage/payment/*
+backend-web/storage/cache/rate/*
+backend-web/storage/cache/wechat_certs/*
+backend-web/storage/logs/*
+backend-web/storage/users/*
+backend-web/storage/templates/*
 !backend-web/storage/**/.gitkeep
 *.log
 *.tmp
 *.bak
 *.pem
 *.key
+/soonDesign-back
+/info
+/soonModels

README.md

@@ -8,21 +8,18 @@
 |---|---|
 | [frontend-electron/](frontend-electron/) | 桌面程序 |
 | [frontend-web/](frontend-web/) | Web 前端 |
-| [backend-web/](backend-web/) | PHP API |
+| [backend-web/](backend-web/) | PHP API（含 `database/schema.sql`） |
 | [docker/](docker/) | 本地 Docker 编排（非生产部署） |
 
 ## 本地开发
 
-需 [Docker Desktop](https://www.docker.com/products/docker-desktop/)。
+需 [Docker Desktop](https://www.docker.com/products/docker-desktop/)。本地只需运行：
 
 ```bat
-docker\sync-config.ps1     :: 同步 API 地址到 deploy-config.js 与 backend local.php（改端口后必跑）
-scripts\start.bat          :: 启动
-scripts\start.bat stop     :: 停止（保留数据库）
-scripts\start.bat reset    :: 停止并清空数据库卷
+scripts\start.bat
 ```
 
-`frontend-web/assets/deploy-config.js` 由 `docker/sync-config.ps1` 根据 `docker/.env` 端口生成，请勿手改 localhost 后提交；生产环境在部署时写入实际 API 地址。
+脚本会自动：同步 `local.js` / `local.php`、启动 Docker 容器、等待 API。改 `docker/.env` 端口后重新运行即可。停止：`docker compose -p soondesign -f docker/docker-compose.yml down`
 
 | 服务 | 默认地址 |
 |------|----------|
@@ -42,9 +39,10 @@ scripts\start.bat reset    :: 停止并清空数据库卷
 
 - Web 根目录：`frontend-web/`
 - PHP 根目录：`backend-web/public/`
-- 数据库：导入 `backend-web/schema.sql`
+- 数据库：在 `backend-web` 目录执行 `mysql ... < database/schema.sql`；已有库 `php scripts/migrate-schema.php`
 - 后端：`backend-web/config/local.php.example` → `local.php`
-- 前端 API：`frontend-web/assets/deploy-config.js`
+- 前端 API：`frontend-web/config/local.js`（生产配置，勿覆盖）
+- Web 静态缓存：`scripts/write-web-version.ps1` 会随 `start.bat` 自动写入 `config/version.js`；线上 Nginx 请对齐 [docker/nginx/frontend.conf](docker/nginx/frontend.conf)（HTML/JS 禁强缓存）
 
 支付与 notify 说明见 [docs/PAYMENT.md](docs/PAYMENT.md)。列表分页契约见 [docs/API-PAGINATION.md](docs/API-PAGINATION.md)。
 

backend-web/config/local.php.example

@@ -26,7 +26,8 @@ return [
     ],
     'storage' => [
         'users_dir' => '/www/wwwroot/designadmin.cardsoon.com/backend/storage/users',
-        'models_dir' => '/www/wwwroot/design.cardsoon.com/soonModels',
+        'models_dir' => '/www/wwwroot/designadmin.cardsoon.com/soonModels',
+        'templates_dir' => '/www/wwwroot/designadmin.cardsoon.com/backend/storage/templates',
     ],
     'limits' => [
         'free_quota_mb' => 20,
@@ -54,4 +55,7 @@ return [
         'api_v3_key' => '',
         'sandbox' => false,
     ],
+    'payment' => [
+        'display_channels' => 'alipay',
+    ],
 ];

backend-web/database/schema.sql

@@ -21,6 +21,7 @@ CREATE TABLE IF NOT EXISTS `soon_files` (
   `json` LONGTEXT NOT NULL,
   `size` INT UNSIGNED NOT NULL DEFAULT 0,
   `version` INT UNSIGNED NOT NULL DEFAULT 1,
+  `thumb` MEDIUMTEXT DEFAULT NULL,
   `created_at` DATETIME NOT NULL,
   `updated_at` DATETIME NOT NULL,
   `deleted_at` DATETIME DEFAULT NULL,
@@ -48,12 +49,14 @@ CREATE TABLE IF NOT EXISTS `plans` (
 INSERT INTO `plans` (`code`,`name`,`description`,`price_cents`,`quota_mb`,`max_files`,`duration_days`,`features`,`sort_order`,`is_recommended`,`is_active`) VALUES
   ('free','免费版','免费体验设计与编辑',0,2048,200,0,
    '["设计与编辑工具免费使用"]',0,0,1),
+  ('member_lifetime','永久会员','一次激活，永久使用预览交付能力',100,2048,200,0,
+   '["高清预览","成品打印","云端保存","导出设计文件","永久有效"]',10,1,1),
   ('member_monthly','月度订阅','按月灵活使用，随时续订',1999,2048,200,30,
-   '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 个月"]',10,1,1),
+   '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 个月"]',20,0,0),
   ('member_quarterly','季度订阅','连续三个月，更省心',5299,2048,200,90,
-   '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 季"]',15,0,1),
+   '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 季"]',25,0,0),
   ('member_yearly','年度订阅','全年畅享，性价比更高',19999,2048,200,365,
-   '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 年"]',20,0,1)
+   '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 年"]',30,0,0)
 ON DUPLICATE KEY UPDATE
   name=VALUES(name),
   description=VALUES(description),
@@ -63,7 +66,8 @@ ON DUPLICATE KEY UPDATE
   duration_days=VALUES(duration_days),
   features=VALUES(features),
   sort_order=VALUES(sort_order),
-  is_recommended=VALUES(is_recommended);
+  is_recommended=VALUES(is_recommended),
+  is_active=VALUES(is_active);
 
 CREATE TABLE IF NOT EXISTS `subscriptions` (
   `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
@@ -114,6 +118,20 @@ CREATE TABLE IF NOT EXISTS `audit_logs` (
   KEY `admin` (`admin_id`, `created_at`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
+CREATE TABLE IF NOT EXISTS `soon_templates` (
+  `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
+  `name` VARCHAR(120) NOT NULL,
+  `type` TINYINT UNSIGNED NOT NULL DEFAULT 1,
+  `thumb` MEDIUMTEXT DEFAULT NULL,
+  `file_size` INT UNSIGNED NOT NULL DEFAULT 0,
+  `sort_order` INT NOT NULL DEFAULT 0,
+  `is_active` TINYINT(1) NOT NULL DEFAULT 1,
+  `created_at` DATETIME NOT NULL,
+  `updated_at` DATETIME NOT NULL,
+  PRIMARY KEY (`id`),
+  KEY `active_sort` (`is_active`, `sort_order`, `id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
 CREATE TABLE IF NOT EXISTS `settings` (
   `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
   `key` VARCHAR(120) NOT NULL,

backend-web/public/admin.php

@@ -9,6 +9,7 @@ use Soon\Api\Admin\Controllers\PaymentController;
 use Soon\Api\Admin\Controllers\PlansController;
 use Soon\Api\Admin\Controllers\SettingsController;
 use Soon\Api\Admin\Controllers\StatsController;
+use Soon\Api\Admin\Controllers\TemplatesController;
 use Soon\Api\Admin\Controllers\UsersController;
 use Soon\Api\Core\Config;
 use Soon\Api\Core\Json;
@@ -58,6 +59,12 @@ Router::post('/api/admin/orders/{id}/refund/reject', [OrdersController::class, '
 Router::get('/api/admin/plans', [PlansController::class, 'list']);
 Router::post('/api/admin/plans', [PlansController::class, 'upsert']);
 
+Router::get('/api/admin/templates', [TemplatesController::class, 'list']);
+Router::get('/api/admin/templates/{id}/thumb', [TemplatesController::class, 'thumb']);
+Router::post('/api/admin/templates', [TemplatesController::class, 'create']);
+Router::put('/api/admin/templates/{id}', [TemplatesController::class, 'update']);
+Router::delete('/api/admin/templates/{id}', [TemplatesController::class, 'delete']);
+
 Router::get('/api/admin/settings', [SettingsController::class, 'list']);
 Router::post('/api/admin/settings', [SettingsController::class, 'set']);
 Router::post('/api/admin/settings/batch', [SettingsController::class, 'setBatch']);
@@ -65,6 +72,7 @@ Router::post('/api/admin/settings/batch', [SettingsController::class, 'setBatch'
 Router::get('/api/admin/audits', [AuditsController::class, 'list']);
 
 Router::post('/api/admin/payment/upload', [PaymentController::class, 'upload']);
+Router::post('/api/admin/payment/config', [PaymentController::class, 'saveConfig']);
 Router::get('/api/admin/payment/status', [PaymentController::class, 'status']);
 
 if (str_starts_with($path, '/api/admin/')) {

backend-web/public/index.php

@@ -9,6 +9,7 @@ use Soon\Api\Controllers\PayController;
 use Soon\Api\Controllers\PlanController;
 use Soon\Api\Controllers\SettingsController;
 use Soon\Api\Controllers\SoonModelController;
+use Soon\Api\Controllers\TemplateController;
 use Soon\Api\Core\Config;
 use Soon\Api\Core\Json;
 use Soon\Api\Core\Router;
@@ -45,6 +46,8 @@ Router::get('/api/v1/auth/me', [AuthController::class, 'me']);
 
 Router::get('/api/v1/files', [FileController::class, 'index']);
 Router::post('/api/v1/files', [FileController::class, 'create']);
+Router::get('/api/v1/files/{id}/thumb', [FileController::class, 'thumb']);
+Router::get('/api/v1/files/{id}', [FileController::class, 'show']);
 Router::put('/api/v1/files/{id}', [FileController::class, 'update']);
 Router::delete('/api/v1/files/{id}', [FileController::class, 'delete']);
 Router::get('/api/v1/files/{id}/download', [FileController::class, 'download']);
@@ -61,7 +64,12 @@ Router::post('/api/v1/pay/orders/{order_no}/refund-request', [PayController::cla
 Router::post('/api/v1/pay/alipay/notify', [PayController::class, 'alipayNotify']);
 Router::post('/api/v1/pay/wechat/notify', [PayController::class, 'wechatNotify']);
 
-Router::get('/api/v1/soon-models', [SoonModelController::class, 'index']);
+Router::get('/api/v1/templates', [TemplateController::class, 'index']);
+Router::get('/api/v1/templates/{id}/thumb', [TemplateController::class, 'thumb']);
+Router::get('/api/v1/templates/{id}/file', [TemplateController::class, 'file']);
+Router::get('/api/v1/templates/{id}', [TemplateController::class, 'show']);
+Router::get('/api/v1/soon-models/files/{name}', [SoonModelController::class, 'download']);
+Router::get('/api/v1/soon-models', [TemplateController::class, 'index']);
 Router::get('/api/v1/settings', [SettingsController::class, 'publicSettings']);
 
 if (str_starts_with($path, '/api/v1/')) {

backend-web/scripts/README.md

@@ -0,0 +1,100 @@
+# 部署脚本
+
+## 权限（推荐：SSH 粘贴，勿 FTP 上传 .sh）
+
+FTP 会把脚本改成 CRLF，报 `set: pipefail`。**在服务器 SSH 整段粘贴：**
+
+```bash
+cd /www/wwwroot/designadmin.cardsoon.com
+U=www; G=www; ROOT="$PWD"
+mkdir -p "$ROOT/storage"/{users,logs,payment,cache/rate,cache/wechat_certs}
+chown -R "$U:$G" "$ROOT"
+find "$ROOT/src" "$ROOT/public" -type d -exec chmod 755 {} +
+find "$ROOT/src" "$ROOT/public" -type f -exec chmod 644 {} +
+chmod 755 "$ROOT/config"
+test -f "$ROOT/config/local.php" && chmod 640 "$ROOT/config/local.php"
+chmod 775 "$ROOT/storage/users" "$ROOT/storage/logs" "$ROOT/storage/cache/rate" "$ROOT/storage/cache/wechat_certs"
+chmod 700 "$ROOT/storage/payment"
+rm -f "$ROOT/storage/cache/rate/"*.json
+echo OK
+```
+
+## 上线步骤
+
+```bash
+cd /www/wwwroot/designadmin.cardsoon.com
+```
+
+```bash
+cp config/local.php.example config/local.php
+vi config/local.php
+```
+
+改 `db`、`jwt_secret`、`site`、`storage` 路径。
+
+```bash
+mysql -u root -p soondesign < database/schema.sql
+php scripts/migrate-schema.php
+```
+
+`migrate-schema.php` 用于已有库增量升级（可重复执行）。再执行上面「权限」整段粘贴。
+
+### MySQL 大包（云端保存失败时）
+
+若保存报「文件过大」或 `max_allowed_packet`，在宝塔 / MySQL 配置中把 `max_allowed_packet` 调到 **32M** 或以上，重启 MySQL 后生效。可临时验证：
+
+```sql
+SET GLOBAL max_allowed_packet = 33554432;
+```
+
+持久化写入 `my.cnf`（示例）：
+
+```ini
+[mysqld]
+max_allowed_packet = 32M
+```
+
+## 初始化管理员
+
+```bash
+cd /www/wwwroot/designadmin.cardsoon.com
+php scripts/seed-admin.php admin@cardsoon.com cardsoon
+```
+
+成功输出 `OK created admin` 或 `OK updated admin`。登录：`https://design.cardsoon.com/pages/admin/login.html`
+
+模型目录：`.soon` 放后端站点（推荐，避免防跨站读不到）：
+
+```bash
+mkdir -p /www/wwwroot/designadmin.cardsoon.com/soonModels
+cp /www/wwwroot/design.cardsoon.com/soonModels/*.soon /www/wwwroot/designadmin.cardsoon.com/soonModels/
+chmod 755 /www/wwwroot/designadmin.cardsoon.com/soonModels
+chmod 644 /www/wwwroot/designadmin.cardsoon.com/soonModels/*.soon
+```
+
+`local.php`：
+
+```php
+'models_dir' => '/www/wwwroot/designadmin.cardsoon.com/soonModels',
+```
+
+排查：
+
+```bash
+php scripts/check-soon-models.php
+```
+
+## 宝塔
+
+- 网站运行目录：`public`
+- Nginx：`/api/v1/` → `index.php`，`/api/admin/` → `admin.php`
+
+## 配置
+
+后端只维护 `config/local.php`（从 `local.php.example` 复制）。
+
+前端（`design.cardsoon.com`）只维护 `config/local.js`（从 `config/local.js.example` 复制）；全量更新 frontend 时不要覆盖。
+
+## 本地脚本
+
+`setup-backend-perms.sh` 供 git 拉取使用；Windows/FTP 上传易坏，请用上面 SSH 粘贴块。

backend-web/scripts/check-soon-models.php

@@ -0,0 +1,45 @@
+<?php
+declare(strict_types=1);
+
+if (PHP_SAPI !== 'cli') {
+    fwrite(STDERR, "CLI only\n");
+    exit(1);
+}
+
+require dirname(__DIR__) . '/src/bootstrap.php';
+
+use Soon\Api\Core\Config;
+use Soon\Api\Services\SoonModelService;
+
+$configured = rtrim((string)Config::get('storage.models_dir', ''), '/\\');
+$local = SOON_SERVER_ROOT . '/soonModels';
+
+fwrite(STDOUT, "configured models_dir: {$configured}\n");
+fwrite(STDOUT, "  is_dir=" . (@is_dir($configured) ? 'yes' : 'no') . ' readable=' . (@is_readable($configured) ? 'yes' : 'no') . "\n");
+
+fwrite(STDOUT, "backend soonModels: {$local}\n");
+fwrite(STDOUT, "  is_dir=" . (@is_dir($local) ? 'yes' : 'no') . ' readable=' . (@is_readable($local) ? 'yes' : 'no') . "\n");
+
+$roots = SoonModelService::roots();
+fwrite(STDOUT, 'scan roots: ' . (count($roots) ? implode(', ', $roots) : '(none)') . "\n");
+
+foreach ($roots as $root) {
+    $entries = @scandir($root) ?: [];
+    $soon = array_values(array_filter($entries, static fn(string $e): bool => str_ends_with(strtolower($e), '.soon')));
+    fwrite(STDOUT, "  {$root} => " . count($soon) . " .soon\n");
+    foreach ($soon as $f) {
+        fwrite(STDOUT, "    - {$f}\n");
+    }
+}
+
+$items = SoonModelService::list();
+fwrite(STDOUT, 'API items: ' . count($items) . "\n");
+foreach ($items as $item) {
+    fwrite(STDOUT, '  - ' . ($item['name'] ?? '') . ' (' . ($item['file'] ?? '') . ")\n");
+}
+
+if ($configured !== '' && !@is_readable($configured)) {
+    fwrite(STDOUT, "\nHint: PHP 读不到 configured 目录。把 .soon 复制到后端 {$local}，或在宝塔后端站点防跨站放行：{$configured}\n");
+}
+
+exit(count($items) > 0 ? 0 : 1);

backend-web/scripts/migrate-schema.php

@@ -0,0 +1,24 @@
+<?php
+declare(strict_types=1);
+
+/**
+ * Incremental DB migration (reads config/local.php). Safe to run repeatedly.
+ * Usage: cd backend-web && php scripts/migrate-schema.php
+ */
+if (PHP_SAPI !== 'cli') {
+    fwrite(STDERR, "CLI only\n");
+    exit(1);
+}
+
+require dirname(__DIR__) . '/src/bootstrap.php';
+require __DIR__ . '/schema-migrate-lib.php';
+
+use Soon\Api\Core\Db;
+
+try {
+    $count = soon_schema_migrate(Db::pdo());
+    fwrite(STDOUT, 'migrate-schema: done (' . $count . " ALTER/CREATE executed)\n");
+} catch (Throwable $e) {
+    fwrite(STDERR, 'migrate-schema: ' . $e->getMessage() . PHP_EOL);
+    exit(1);
+}

backend-web/scripts/schema-migrate-lib.php

@@ -0,0 +1,160 @@
+<?php
+declare(strict_types=1);
+
+/**
+ * Incremental schema patches (safe to run repeatedly).
+ *
+ * @param-out int $applied
+ */
+function soon_schema_column_exists(PDO $pdo, string $table, string $column): bool
+{
+    $stmt = $pdo->prepare(
+        'SELECT COUNT(*) FROM information_schema.COLUMNS '
+        . 'WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = :t AND COLUMN_NAME = :c'
+    );
+    $stmt->execute(['t' => $table, 'c' => $column]);
+    return (int)$stmt->fetchColumn() > 0;
+}
+
+/** @return int Number of SQL statements executed */
+function soon_schema_migrate(PDO $pdo, string $logPrefix = 'migrate-schema'): int
+{
+    $applied = 0;
+    $run = static function (string $sql) use ($pdo, $logPrefix, &$applied): void {
+        $pdo->exec($sql);
+        ++$applied;
+        fwrite(STDOUT, "{$logPrefix}: {$sql}" . PHP_EOL);
+    };
+
+    $alters = [];
+    if (!soon_schema_column_exists($pdo, 'subscriptions', 'source_order_id')) {
+        $alters[] = 'ALTER TABLE subscriptions ADD COLUMN source_order_id BIGINT UNSIGNED DEFAULT NULL AFTER plan_id';
+        $alters[] = 'ALTER TABLE subscriptions ADD KEY source_order (source_order_id)';
+    }
+    if (!soon_schema_column_exists($pdo, 'pay_orders', 'refund_status')) {
+        $alters[] = "ALTER TABLE pay_orders ADD COLUMN refund_status ENUM('none','pending','approved','rejected') NOT NULL DEFAULT 'none' AFTER status";
+        $alters[] = 'ALTER TABLE pay_orders ADD COLUMN refund_reason TEXT DEFAULT NULL AFTER refund_status';
+        $alters[] = 'ALTER TABLE pay_orders ADD COLUMN refund_note TEXT DEFAULT NULL AFTER refund_reason';
+        $alters[] = 'ALTER TABLE pay_orders ADD COLUMN cancelled_at DATETIME DEFAULT NULL AFTER paid_at';
+        $alters[] = 'ALTER TABLE pay_orders ADD COLUMN refunded_at DATETIME DEFAULT NULL AFTER cancelled_at';
+        $alters[] = 'ALTER TABLE pay_orders ADD KEY refund_status (refund_status)';
+    }
+    if (!soon_schema_column_exists($pdo, 'plans', 'description')) {
+        $alters[] = 'ALTER TABLE plans ADD COLUMN description VARCHAR(255) DEFAULT NULL AFTER name';
+        $alters[] = 'ALTER TABLE plans ADD COLUMN max_files INT UNSIGNED NOT NULL DEFAULT 0 AFTER quota_mb';
+        $alters[] = 'ALTER TABLE plans ADD COLUMN features TEXT DEFAULT NULL AFTER duration_days';
+        $alters[] = 'ALTER TABLE plans ADD COLUMN sort_order INT NOT NULL DEFAULT 0 AFTER features';
+        $alters[] = 'ALTER TABLE plans ADD COLUMN is_recommended TINYINT(1) NOT NULL DEFAULT 0 AFTER sort_order';
+    }
+    if (!soon_schema_column_exists($pdo, 'users', 'admin_level')) {
+        $alters[] = "ALTER TABLE users ADD COLUMN admin_level ENUM('full','ops') DEFAULT NULL AFTER role";
+    }
+    if (!soon_schema_column_exists($pdo, 'soon_files', 'thumb')) {
+        $alters[] = 'ALTER TABLE soon_files ADD COLUMN thumb MEDIUMTEXT DEFAULT NULL AFTER version';
+    }
+
+    foreach ($alters as $sql) {
+        $run($sql);
+    }
+
+    if (soon_schema_column_exists($pdo, 'users', 'admin_level')) {
+        $pdo->exec(
+            "UPDATE users SET admin_level = 'full' WHERE role = 'admin' AND (admin_level IS NULL OR admin_level = '')"
+        );
+        fwrite(STDOUT, "{$logPrefix}: admin_level backfill for existing admins" . PHP_EOL);
+    }
+
+    if (soon_schema_column_exists($pdo, 'plans', 'description')) {
+        $legacyCodes = ['pro_monthly' => 'member_monthly', 'pro_yearly' => 'member_yearly'];
+        foreach ($legacyCodes as $oldCode => $newCode) {
+            $stmt = $pdo->prepare('SELECT id FROM plans WHERE code = :c LIMIT 1');
+            $stmt->execute(['c' => $oldCode]);
+            if ($stmt->fetch()) {
+                $conflict = $pdo->prepare('SELECT id FROM plans WHERE code = :c LIMIT 1');
+                $conflict->execute(['c' => $newCode]);
+                if ($conflict->fetch()) {
+                    $pdo->prepare('UPDATE plans SET is_active = 0 WHERE code = :c')->execute(['c' => $oldCode]);
+                } else {
+                    $pdo->prepare('UPDATE plans SET code = :new WHERE code = :old')->execute(['new' => $newCode, 'old' => $oldCode]);
+                }
+            }
+        }
+
+        $quota = 2048;
+        $maxFiles = 200;
+        $seed = [
+            ['free', '免费版', '免费体验设计与编辑', 0, $quota, $maxFiles, 0,
+                '["设计与编辑工具免费使用"]', 0, 0, 1],
+            ['member_lifetime', '永久会员', '一次激活，永久使用预览交付能力', 100, $quota, $maxFiles, 0,
+                '["高清预览","成品打印","云端保存","导出设计文件","永久有效"]', 10, 1, 1],
+            ['member_monthly', '月度订阅', '按月灵活使用，随时续订', 1999, $quota, $maxFiles, 30,
+                '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 个月"]', 20, 0, 0],
+            ['member_quarterly', '季度订阅', '连续三个月，更省心', 5299, $quota, $maxFiles, 90,
+                '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 季"]', 25, 0, 0],
+            ['member_yearly', '年度订阅', '全年畅享，性价比更高', 19999, $quota, $maxFiles, 365,
+                '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 年"]', 30, 0, 0],
+        ];
+        $upsert = $pdo->prepare(
+            'INSERT INTO plans (code, name, description, price_cents, quota_mb, max_files, duration_days, features, sort_order, is_recommended, is_active) '
+            . 'VALUES (:c, :n, :d, :p, :q, :mf, :dd, :f, :so, :ir, :a) '
+            . 'ON DUPLICATE KEY UPDATE name=VALUES(name), description=VALUES(description), price_cents=VALUES(price_cents), '
+            . 'quota_mb=VALUES(quota_mb), max_files=VALUES(max_files), duration_days=VALUES(duration_days), '
+            . 'features=VALUES(features), sort_order=VALUES(sort_order), is_recommended=VALUES(is_recommended), is_active=VALUES(is_active)'
+        );
+        foreach ($seed as $row) {
+            $upsert->execute([
+                'c' => $row[0], 'n' => $row[1], 'd' => $row[2], 'p' => $row[3], 'q' => $row[4],
+                'mf' => $row[5], 'dd' => $row[6], 'f' => $row[7], 'so' => $row[8], 'ir' => $row[9], 'a' => $row[10],
+            ]);
+        }
+        fwrite(STDOUT, "{$logPrefix}: membership plans catalog synced" . PHP_EOL);
+
+        $legacyFeatStmt = $pdo->query(
+            'SELECT code, duration_days FROM plans WHERE features LIKE \'%预览成品效果%\' '
+            . 'OR features LIKE \'%到期后恢复为非会员%\' OR features LIKE \'%会员权益一致%\' '
+            . 'OR name LIKE \'%会员 ·%\''
+        );
+        $featUpd = $pdo->prepare('UPDATE plans SET features = :f WHERE code = :c');
+        $coreFeatures = ['高清预览', '成品打印', '云端保存', '导出设计文件'];
+        foreach ($legacyFeatStmt->fetchAll() as $legacyRow) {
+            $code = (string)$legacyRow['code'];
+            $days = (int)$legacyRow['duration_days'];
+            if ($code === 'free') {
+                $featUpd->execute([
+                    'f' => '["设计与编辑工具免费使用"]',
+                    'c' => $code,
+                ]);
+                continue;
+            }
+            $lines = $coreFeatures;
+            if ($days > 0) {
+                $period = $days >= 365 ? '1 年' : ($days === 90 ? '1 季' : ($days >= 30 && $days % 30 === 0 ? ((int)($days / 30)) . ' 个月' : $days . ' 天'));
+                $lines[] = '订阅周期：' . $period;
+            }
+            $featUpd->execute([
+                'f' => json_encode($lines, JSON_UNESCAPED_UNICODE),
+                'c' => $code,
+            ]);
+        }
+        fwrite(STDOUT, "{$logPrefix}: legacy plan copy refreshed" . PHP_EOL);
+    }
+
+    $run(
+        'CREATE TABLE IF NOT EXISTS `soon_templates` ('
+        . '`id` INT UNSIGNED NOT NULL AUTO_INCREMENT,'
+        . '`name` VARCHAR(120) NOT NULL,'
+        . '`type` TINYINT UNSIGNED NOT NULL DEFAULT 1,'
+        . '`thumb` MEDIUMTEXT DEFAULT NULL,'
+        . '`file_size` INT UNSIGNED NOT NULL DEFAULT 0,'
+        . '`sort_order` INT NOT NULL DEFAULT 0,'
+        . '`is_active` TINYINT(1) NOT NULL DEFAULT 1,'
+        . '`created_at` DATETIME NOT NULL,'
+        . '`updated_at` DATETIME NOT NULL,'
+        . 'PRIMARY KEY (`id`),'
+        . 'KEY `active_sort` (`is_active`, `sort_order`, `id`)'
+        . ') ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci'
+    );
+    fwrite(STDOUT, "{$logPrefix}: soon_templates ensured" . PHP_EOL);
+
+    return $applied;
+}

backend-web/scripts/seed-admin.php

@@ -0,0 +1,59 @@
+<?php
+declare(strict_types=1);
+
+/**
+ * 创建或重置管理员（CLI，读取 config/local.php）。
+ * 用法: cd backend-web根目录 && php scripts/seed-admin.php [email] [password]
+ */
+if (PHP_SAPI !== 'cli') {
+    fwrite(STDERR, "CLI only\n");
+    exit(1);
+}
+
+require dirname(__DIR__) . '/src/bootstrap.php';
+
+use Soon\Api\Core\Db;
+
+$email = trim((string)($argv[1] ?? getenv('SOON_ADMIN_EMAIL') ?: 'admin@cardsoon.com'));
+$plain = (string)($argv[2] ?? getenv('SOON_ADMIN_PASS') ?: 'cardsoon');
+
+if ($email === '' || $plain === '') {
+    fwrite(STDERR, "usage: php scripts/seed-admin.php [email] [password]\n");
+    exit(1);
+}
+
+$pdo = Db::pdo();
+$hash = password_hash($plain, PASSWORD_BCRYPT, ['cost' => 12]);
+$now = date('Y-m-d H:i:s');
+
+$stmt = $pdo->prepare('SELECT id FROM users WHERE email = :email LIMIT 1');
+$stmt->execute(['email' => $email]);
+$id = $stmt->fetchColumn();
+
+if ($id) {
+    $pdo->prepare(
+        'UPDATE users SET password_hash = :h, role = :role, admin_level = :level, status = :status WHERE id = :id'
+    )->execute([
+        'h' => $hash,
+        'role' => 'admin',
+        'level' => 'full',
+        'status' => 'active',
+        'id' => (int)$id,
+    ]);
+    fwrite(STDOUT, "OK updated admin #{$id} {$email}\n");
+    exit(0);
+}
+
+$pdo->prepare(
+    'INSERT INTO users (email, password_hash, role, admin_level, status, created_at) '
+    . 'VALUES (:email, :h, :role, :level, :status, :created_at)'
+)->execute([
+    'email' => $email,
+    'h' => $hash,
+    'role' => 'admin',
+    'level' => 'full',
+    'status' => 'active',
+    'created_at' => $now,
+]);
+
+fwrite(STDOUT, "OK created admin {$email}\n");

backend-web/scripts/setup-backend-perms.sh

@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+# cd 到 backend-web 根目录后: bash scripts/setup-backend-perms.sh [soonModels路径]
+set -eu
+
+ROOT="$(cd "${1:-.}" && pwd)"
+MODELS="${2:-}"
+U="${WEB_USER:-www}"
+G="${WEB_GROUP:-www}"
+
+[[ -d "$ROOT/public" && -d "$ROOT/src" ]] || { echo "错误: 请先 cd 到 backend-web"; exit 1; }
+id "$U" &>/dev/null || { echo "错误: 用户 $U 不存在"; exit 1; }
+
+mkdir -p "$ROOT/storage"/{users,logs,payment,cache/rate,cache/wechat_certs}
+chown -R "$U:$G" "$ROOT"
+find "$ROOT/src" "$ROOT/public" -type d -exec chmod 755 {} +
+find "$ROOT/src" "$ROOT/public" -type f -exec chmod 644 {} +
+chmod 755 "$ROOT/config"
+[[ -f "$ROOT/config/local.php" ]] && chmod 640 "$ROOT/config/local.php"
+chmod 775 "$ROOT/storage/users" "$ROOT/storage/logs" "$ROOT/storage/cache/rate" "$ROOT/storage/cache/wechat_certs"
+chmod 700 "$ROOT/storage/payment"
+rm -f "$ROOT/storage/cache/rate/"*.json 2>/dev/null || true
+
+if [[ -n "$MODELS" ]]; then
+  mkdir -p "$MODELS"
+  chown -R "$U:$G" "$MODELS"
+  chmod 755 "$MODELS"
+fi
+
+for d in "$ROOT/storage/users" "$ROOT/storage/logs" "$ROOT/storage/payment"; do
+  sudo -u "$U" test -w "$d" || { echo "FAIL: $d"; exit 1; }
+done
+
+echo OK

backend-web/src/Admin/Controllers/PaymentController.php

@@ -5,6 +5,7 @@ namespace Soon\Api\Admin\Controllers;
 
 use Soon\Api\Admin\Services\PaymentKeyStore;
 use Soon\Api\Core\Json;
+use Soon\Api\Services\PaymentConfig;
 
 final class PaymentController
 {
@@ -24,4 +25,14 @@ final class PaymentController
     {
         Json::ok(PaymentKeyStore::status($adminId));
     }
+
+    public function saveConfig(int $adminId): void
+    {
+        $body = Json::readBody();
+        $items = $body['items'] ?? null;
+        if (!is_array($items)) {
+            Json::fail('bad_request', 'items 须为数组', 400);
+        }
+        Json::ok(PaymentConfig::saveParams($adminId, $items));
+    }
 }

backend-web/src/Admin/Controllers/PlansController.php

@@ -57,9 +57,13 @@ final class PlansController
         if ($code !== 'free' && $priceCents <= 0) {
             Json::fail('bad_request', '付费套餐价格须大于 0', 400);
         }
-        if ($code !== 'free' && $durationDays <= 0) {
+        $isLifetime = $code === 'member_lifetime';
+        if ($code !== 'free' && !$isLifetime && $durationDays <= 0) {
             Json::fail('bad_request', '付费套餐须设置有效天数', 400);
         }
+        if ($isLifetime) {
+            $durationDays = 0;
+        }
         if ($coreFeatures === []) {
             Json::fail('bad_request', '请至少填写一条权益说明', 400);
         }

backend-web/src/Admin/Controllers/SettingsController.php

@@ -6,6 +6,8 @@ namespace Soon\Api\Admin\Controllers;
 use Soon\Api\Core\Db;
 use Soon\Api\Core\Json;
 use Soon\Api\Services\AuditService;
+use Soon\Api\Services\PaymentConfig;
+use Soon\Api\Services\SettingsConfigLoader;
 
 final class SettingsController
 {
@@ -30,6 +32,9 @@ final class SettingsController
         );
         $stmt->execute(['k' => $key, 'v' => $value, 'ts' => date('Y-m-d H:i:s')]);
         AuditService::log($adminId, 'settings.set', 'setting:' . $key, ['value' => $value]);
+        if (in_array($key, SettingsConfigLoader::PAYMENT_KEYS, true)) {
+            PaymentConfig::reloadRuntime();
+        }
         Json::ok(['key' => $key]);
     }
 
@@ -63,6 +68,9 @@ final class SettingsController
             Json::fail('bad_request', '无有效配置项', 400);
         }
         AuditService::log($adminId, 'settings.set_batch', 'settings', ['keys' => $saved]);
+        if (array_intersect($saved, SettingsConfigLoader::PAYMENT_KEYS) !== []) {
+            PaymentConfig::reloadRuntime();
+        }
         Json::ok(['keys' => $saved]);
     }
 }

backend-web/src/Admin/Controllers/TemplatesController.php

@@ -0,0 +1,60 @@
+<?php
+declare(strict_types=1);
+
+namespace Soon\Api\Admin\Controllers;
+
+use Soon\Api\Core\Json;
+use Soon\Api\Services\AuditService;
+use Soon\Api\Services\TemplateService;
+
+final class TemplatesController
+{
+    public function list(int $adminId): void
+    {
+        AuditService::log($adminId, 'templates.list', 'soon_templates');
+        Json::ok(['items' => TemplateService::listAdmin()]);
+    }
+
+    public function create(int $adminId): void
+    {
+        $body = Json::readBody();
+        $name = (string)($body['name'] ?? '');
+        $content = (string)($body['content'] ?? '');
+        $sortOrder = (int)($body['sort_order'] ?? 0);
+        $isActive = (int)($body['is_active'] ?? 1) === 1 ? 1 : 0;
+        if ($content === '') {
+            Json::fail('bad_request', 'content 必填（.soon JSON 文本）', 400);
+        }
+        $item = TemplateService::create($name, $content, $sortOrder, $isActive);
+        AuditService::log($adminId, 'templates.create', 'soon_templates:' . $item['id']);
+        Json::ok($item);
+    }
+
+    public function update(int $adminId, int $id): void
+    {
+        $body = Json::readBody();
+        $name = (string)($body['name'] ?? '');
+        $sortOrder = (int)($body['sort_order'] ?? 0);
+        $isActive = (int)($body['is_active'] ?? 1) === 1 ? 1 : 0;
+        $content = array_key_exists('content', $body) ? (string)$body['content'] : null;
+        if ($content !== null && trim($content) === '') {
+            $content = null;
+        }
+        $item = TemplateService::update($id, $name, $sortOrder, $isActive, $content);
+        AuditService::log($adminId, 'templates.update', 'soon_templates:' . $id);
+        Json::ok($item);
+    }
+
+    public function delete(int $adminId, int $id): void
+    {
+        TemplateService::delete($id);
+        AuditService::log($adminId, 'templates.delete', 'soon_templates:' . $id);
+        Json::ok(['id' => $id]);
+    }
+
+    public function thumb(int $adminId, int $id): void
+    {
+        AuditService::log($adminId, 'templates.thumb', 'soon_templates:' . $id);
+        TemplateService::outputThumbAdmin($id);
+    }
+}

backend-web/src/Admin/Controllers/UsersController.php

@@ -7,6 +7,7 @@ use Soon\Api\Core\Db;
 use Soon\Api\Core\Json;
 use Soon\Api\Services\AdminPermission;
 use Soon\Api\Services\AuditService;
+use Soon\Api\Services\MembershipService;
 
 final class UsersController
 {
@@ -270,9 +271,9 @@ final class UsersController
         try {
             $pdo->prepare('UPDATE subscriptions SET status = \'expired\' WHERE user_id = :u AND status = \'active\'')
                 ->execute(['u' => $id]);
-            if ($plan['code'] !== 'free' && $durationDays > 0) {
+            if ($plan['code'] !== 'free') {
                 $now = date('Y-m-d H:i:s');
-                $expires = date('Y-m-d H:i:s', time() + $durationDays * 86400);
+                $expires = MembershipService::subscriptionExpiresAt($durationDays);
                 $pdo->prepare(
                     'INSERT INTO subscriptions (user_id, plan_id, status, started_at, expires_at) '
                     . 'VALUES (:u, :p, \'active\', :sa, :ea)'

backend-web/src/Admin/Services/PaymentKeyStore.php

@@ -3,10 +3,9 @@ declare(strict_types=1);
 
 namespace Soon\Api\Admin\Services;
 
-use Soon\Api\Core\Config;
 use Soon\Api\Core\Json;
 use Soon\Api\Services\AuditService;
-use Soon\Api\Services\PaymentConfigLoader;
+use Soon\Api\Services\PaymentConfig;
 
 /**
  * 支付密钥保存到 storage/payment/，不入库。
@@ -42,9 +41,7 @@ final class PaymentKeyStore
         AuditService::log($adminId, 'payment.key.upload', $channel . ':' . $kind, [
             'bytes' => strlen($content),
         ]);
-        $config = Config::all();
-        PaymentConfigLoader::merge($config);
-        Config::init($config);
+        PaymentConfig::reloadRuntime();
         return ['channel' => $channel, 'kind' => $kind, 'bytes' => strlen($content)];
     }
 
@@ -60,6 +57,9 @@ final class PaymentKeyStore
             ];
         }
         AuditService::log($adminId, 'payment.key.status', 'payment');
-        return ['items' => $items];
+        return array_merge(
+            ['items' => $items],
+            PaymentConfig::adminSnapshot()
+        );
     }
 }

backend-web/src/Controllers/AuthController.php

@@ -6,6 +6,7 @@ namespace Soon\Api\Controllers;
 use Soon\Api\Core\Json;
 use Soon\Api\Middleware\Auth;
 use Soon\Api\Services\AuthService;
+use Soon\Api\Services\MembershipService;
 
 final class AuthController
 {
@@ -38,7 +39,6 @@ final class AuthController
     public function me(): void
     {
         $user = Auth::require();
-        unset($user['password_hash']);
-        Json::ok($user);
+        Json::ok(array_merge($user, MembershipService::membershipSummary((int)$user['id'])));
     }
 }

backend-web/src/Controllers/FileController.php

@@ -6,7 +6,6 @@ namespace Soon\Api\Controllers;
 use Soon\Api\Core\Json;
 use Soon\Api\Middleware\Auth;
 use Soon\Api\Services\FileService;
-use Soon\Api\Services\MembershipService;
 
 final class FileController
 {
@@ -39,17 +38,29 @@ final class FileController
     public function create(): void
     {
         $u = Auth::require();
-        MembershipService::requireActiveMember($u['id']);
         $body = Json::readBody();
         $name = (string)($body['name'] ?? 'untitled.soon');
         $json = (string)($body['json'] ?? '{}');
         Json::ok(FileService::create($u['id'], $name, $json));
     }
 
+    public function show(int $id): void
+    {
+        $u = Auth::require();
+        $row = FileService::fetch($u['id'], $id);
+        Json::ok([
+            'id' => (int)$row['id'],
+            'name' => (string)$row['name'],
+            'version' => (int)$row['version'],
+            'size' => (int)$row['size'],
+            'updated_at' => $row['updated_at'],
+            'json' => (string)$row['json'],
+        ]);
+    }
+
     public function update(int $id): void
     {
         $u = Auth::require();
-        MembershipService::requireActiveMember($u['id']);
         $body = Json::readBody();
         $name = (string)($body['name'] ?? 'untitled.soon');
         $json = (string)($body['json'] ?? '{}');
@@ -64,15 +75,15 @@ final class FileController
         Json::ok(['id' => $id]);
     }
 
+    public function thumb(int $id): void
+    {
+        $u = Auth::require();
+        FileService::outputThumb($u['id'], $id);
+    }
+
     public function download(int $id): void
     {
         $u = Auth::require();
-        $accept = (string)($_SERVER['HTTP_ACCEPT'] ?? '');
-        $jsonRead = stripos($accept, 'application/json') !== false
-            && stripos($accept, 'application/octet-stream') === false;
-        if (!$jsonRead) {
-            MembershipService::requireActiveMember($u['id']);
-        }
         $row = FileService::fetch($u['id'], $id);
         $name = (string)$row['name'];
         $json = (string)$row['json'];

backend-web/src/Controllers/PayController.php

@@ -8,6 +8,7 @@ use Soon\Api\Middleware\Auth;
 use Soon\Api\Services\MembershipService;
 use Soon\Api\Services\AlipayClient;
 use Soon\Api\Services\PayService;
+use Soon\Api\Services\PaymentConfig;
 use Soon\Api\Services\WeChatPay\Client as WeChatClient;
 
 final class PayController
@@ -25,10 +26,12 @@ final class PayController
         $u = Auth::require();
         $body = Json::readBody();
         $planId = (int)($body['plan_id'] ?? 0);
-        $channel = (string)($body['channel'] ?? 'alipay');
+        $channels = PaymentConfig::displayChannels();
+        $channel = (string)($body['channel'] ?? $channels[0]);
         if (!in_array($channel, ['alipay', 'wechat'], true)) {
             Json::fail('bad_request', '不支持的支付方式', 400);
         }
+        PaymentConfig::assertChannelAllowed($channel);
         $ip = $_SERVER['REMOTE_ADDR'] ?? '';
         Json::ok(PayService::createOrder($u['id'], $planId, $channel, $ip));
     }

backend-web/src/Controllers/PlanController.php

@@ -17,9 +17,6 @@ final class PlanController
     public function myPlan(): void
     {
         $u = Auth::require();
-        Json::ok([
-            'membership' => MembershipService::currentPlan($u['id']),
-            'recent_orders' => MembershipService::recentOrders($u['id']),
-        ]);
+        Json::ok(['membership' => MembershipService::currentPlan($u['id'])]);
     }
 }

backend-web/src/Controllers/SettingsController.php

@@ -4,12 +4,14 @@ declare(strict_types=1);
 namespace Soon\Api\Controllers;
 
 use Soon\Api\Core\Json;
-use Soon\Api\Services\MembershipService;
+use Soon\Api\Services\PaymentConfig;
 
 final class SettingsController
 {
     public function publicSettings(): void
     {
-        Json::ok(MembershipService::settings());
+        Json::ok([
+            'payment_display_channels' => PaymentConfig::displayChannels(),
+        ]);
     }
 }

backend-web/src/Controllers/SoonModelController.php

@@ -3,22 +3,28 @@ declare(strict_types=1);
 
 namespace Soon\Api\Controllers;
 
-use Soon\Api\Core\Config;
 use Soon\Api\Core\Json;
+use Soon\Api\Services\SoonModelService;
 
 final class SoonModelController
 {
     public function index(): void
     {
-        $root = (string)Config::get('storage.models_dir', dirname(SOON_SERVER_ROOT) . '/soonModels');
-        $manifest = $root . '/manifest.json';
-        if (!is_file($manifest)) {
-            Json::ok(['items' => [], 'count' => 0]);
+        $items = SoonModelService::list();
+        Json::ok(['items' => $items, 'count' => count($items)]);
     }
-        $data = json_decode((string)file_get_contents($manifest), true);
-        if (!is_array($data)) {
-            Json::fail('manifest_invalid', '模型清单已损坏', 500);
+
+    public function download(string $name): void
+    {
+        $path = SoonModelService::resolvePath($name);
+        if ($path === null) {
+            Json::fail('not_found', '模板不存在', 404);
         }
-        Json::ok($data);
+        $base = basename($path);
+        header('Content-Type: application/json; charset=utf-8');
+        header('Content-Disposition: inline; filename="' . str_replace('"', '', $base) . '"');
+        header('Cache-Control: public, max-age=300');
+        readfile($path);
+        exit;
     }
 }

backend-web/src/Controllers/TemplateController.php

@@ -0,0 +1,33 @@
+<?php
+declare(strict_types=1);
+
+namespace Soon\Api\Controllers;
+
+use Soon\Api\Core\Json;
+use Soon\Api\Services\TemplateService;
+
+final class TemplateController
+{
+    public function index(): void
+    {
+        header('Cache-Control: public, max-age=60, must-revalidate');
+        $items = TemplateService::listPublic();
+        Json::ok(['items' => $items, 'total' => count($items)]);
+    }
+
+    public function show(int $id): void
+    {
+        header('Cache-Control: public, max-age=60, must-revalidate');
+        Json::ok(TemplateService::fetchPublicJson($id));
+    }
+
+    public function thumb(int $id): void
+    {
+        TemplateService::outputThumb($id);
+    }
+
+    public function file(int $id): void
+    {
+        TemplateService::outputFile($id);
+    }
+}

backend-web/src/Core/ErrorHandler.php

@@ -0,0 +1,53 @@
+<?php
+declare(strict_types=1);
+
+namespace Soon\Api\Core;
+
+use PDOException;
+use Throwable;
+
+/**
+ * API 未捕获异常 → JSON 响应（避免空白 500）。
+ */
+final class ErrorHandler
+{
+    public static function register(): void
+    {
+        set_exception_handler([self::class, 'handleException']);
+    }
+
+    public static function handleException(Throwable $e): void
+    {
+        $path = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH) ?: '/';
+        if (!str_starts_with($path, '/api/')) {
+            http_response_code(500);
+            exit;
+        }
+        $debug = (bool)Config::get('app.debug', false);
+        $code = 'server_error';
+        $msg = '服务器错误，请稍后重试';
+        $status = 500;
+
+        if ($e instanceof PDOException) {
+            $msg = '数据库操作失败';
+            $sqlState = (string)$e->getCode();
+            $detail = $e->getMessage();
+            if (str_contains($detail, 'max_allowed_packet') || str_contains($detail, 'Packet too large')) {
+                $code = 'payload_too_large';
+                $msg = '文件过大，超出服务器数据库限制';
+                $status = 413;
+            } elseif (str_contains($detail, 'Unknown column') || str_contains($detail, "doesn't exist")) {
+                $msg = '数据库结构不完整，请导入 database/schema.sql 或执行 php scripts/migrate-schema.php';
+            } elseif ($sqlState === '22001' || str_contains($detail, 'Data too long')) {
+                $code = 'payload_too_large';
+                $msg = '文件内容过长，无法保存';
+                $status = 413;
+            }
+        }
+
+        if ($debug) {
+            $msg .= ' (' . $e->getMessage() . ')';
+        }
+        Json::fail($code, $msg, $status);
+    }
+}

backend-web/src/Services/AlipayClient.php

@@ -23,7 +23,7 @@ final class AlipayClient
             'version' => '1.0',
             'notify_url' => (string)Config::get('site.base_url', '') . '/api/v1/pay/alipay/notify',
             'return_url' => (string)Config::get('site.front_base_url', Config::get('site.base_url', ''))
-                . '/pages/member.web.html?paid=' . rawurlencode($orderNo),
+                . '/pages/index.web.html?paid=' . rawurlencode($orderNo),
             'biz_content' => json_encode([
                 'out_trade_no' => $orderNo,
                 'product_code' => 'FAST_INSTANT_TRADE_PAY',

backend-web/src/Services/FileService.php

@@ -6,12 +6,16 @@ namespace Soon\Api\Services;
 use Soon\Api\Core\Config;
 use Soon\Api\Core\Db;
 use Soon\Api\Core\Json;
+use PDOException;
+use Throwable;
 
 /**
  * .soon 文件服务：JSON 数据流模型，乐观锁、配额、软删除。
  */
 final class FileService
 {
+    private const MAX_JSON_BYTES = 33554432;
+
     public static function usersRoot(): string
     {
         $dir = (string)Config::get('storage.users_dir', SOON_SERVER_ROOT . '/storage/users');
@@ -55,7 +59,8 @@ final class FileService
     public static function list(int $userId, int $limit, int $offset): array
     {
         $stmt = Db::pdo()->prepare(
-            'SELECT id, name, size, version, updated_at, created_at '
+            'SELECT id, name, size, version, updated_at, created_at, '
+            . '(CASE WHEN thumb IS NOT NULL AND thumb <> "" THEN 1 ELSE 0 END) AS has_thumb '
             . 'FROM soon_files WHERE user_id = :u AND deleted_at IS NULL '
             . 'ORDER BY updated_at DESC LIMIT :lim OFFSET :off'
         );
@@ -63,11 +68,19 @@ final class FileService
         $stmt->bindValue('lim', $limit, \PDO::PARAM_INT);
         $stmt->bindValue('off', $offset, \PDO::PARAM_INT);
         $stmt->execute();
-        return $stmt->fetchAll();
+        $rows = $stmt->fetchAll();
+        foreach ($rows as &$row) {
+            $row['has_thumb'] = (int)($row['has_thumb'] ?? 0) === 1;
+        }
+        unset($row);
+        return $rows;
     }
 
     public static function create(int $userId, string $name, string $json): array
     {
+        $name = self::normalizeName($name);
+        self::assertJsonPayload($json);
+        try {
             $maxFiles = MembershipService::maxFilesLimit($userId);
             if (self::fileCount($userId) >= $maxFiles) {
                 Json::fail('file_limit_exceeded', '已达文件数量上限（' . $maxFiles . ' 个），请清理文件或续订', 413);
@@ -79,17 +92,26 @@ final class FileService
                 Json::fail('quota_exceeded', '存储空间已满，请清理文件或续订', 413);
             }
             $now = date('Y-m-d H:i:s');
+            $thumb = self::extractThumb($json);
             $stmt = Db::pdo()->prepare(
-            'INSERT INTO soon_files (user_id, name, json, size, version, created_at, updated_at) '
-            . 'VALUES (:u, :n, :j, :s, 1, :created_at, :updated_at)'
+                'INSERT INTO soon_files (user_id, name, json, size, version, thumb, created_at, updated_at) '
+                . 'VALUES (:u, :n, :j, :s, 1, :th, :created_at, :updated_at)'
             );
-        $stmt->execute(['u' => $userId, 'n' => $name, 'j' => $json, 's' => $size, 'created_at' => $now, 'updated_at' => $now]);
+            $stmt->execute([
+                'u' => $userId, 'n' => $name, 'j' => $json, 's' => $size, 'th' => $thumb !== '' ? $thumb : null,
+                'created_at' => $now, 'updated_at' => $now,
+            ]);
             $id = (int)Db::pdo()->lastInsertId();
             return ['id' => $id, 'name' => $name, 'size' => $size, 'version' => 1, 'updated_at' => $now];
+        } catch (PDOException $e) {
+            self::failDb($e);
+        }
     }
 
     public static function update(int $userId, int $id, string $name, string $json, ?int $expectedVersion): array
     {
+        $name = self::normalizeName($name);
+        self::assertJsonPayload($json);
         $newSize = strlen($json);
         $quota = self::quotaBytes($userId);
         $used = self::usedBytes($userId);
@@ -111,12 +133,14 @@ final class FileService
             }
             $now = date('Y-m-d H:i:s');
             $newVersion = (int)$row['version'] + 1;
+            $thumb = self::extractThumb($json);
             $upd = $pdo->prepare(
-                'UPDATE soon_files SET name = :n, json = :j, size = :s, version = :v, updated_at = :ts '
+                'UPDATE soon_files SET name = :n, json = :j, size = :s, version = :v, thumb = :th, updated_at = :ts '
                 . 'WHERE id = :id AND version = :cv'
             );
             $upd->execute([
                 'n' => $name, 'j' => $json, 's' => $newSize, 'v' => $newVersion,
+                'th' => $thumb !== '' ? $thumb : null,
                 'ts' => $now, 'id' => $id, 'cv' => (int)$row['version'],
             ]);
             if ($upd->rowCount() === 0) {
@@ -125,17 +149,77 @@ final class FileService
             $pdo->commit();
             return ['id' => $id, 'name' => $name, 'size' => $newSize, 'version' => $newVersion, 'updated_at' => $now];
         } catch (\RuntimeException $e) {
-            if ($pdo->inTransaction()) $pdo->rollBack();
-            if ($e->getMessage() === 'not_found') Json::fail('not_found', '文件不存在', 404);
-            if ($e->getMessage() === 'version_conflict') Json::fail('conflict', '版本冲突，请刷新后重试', 409);
-            if ($e->getMessage() === 'quota_exceeded') Json::fail('quota_exceeded', '存储空间已满', 413);
+            if ($pdo->inTransaction()) {
+                $pdo->rollBack();
+            }
+            if ($e->getMessage() === 'not_found') {
+                Json::fail('not_found', '文件不存在', 404);
+            }
+            if ($e->getMessage() === 'version_conflict') {
+                Json::fail('conflict', '版本冲突，请刷新后重试', 409);
+            }
+            if ($e->getMessage() === 'quota_exceeded') {
+                Json::fail('quota_exceeded', '存储空间已满', 413);
+            }
             throw $e;
-        } catch (\Throwable $e) {
-            if ($pdo->inTransaction()) $pdo->rollBack();
+        } catch (PDOException $e) {
+            if ($pdo->inTransaction()) {
+                $pdo->rollBack();
+            }
+            self::failDb($e);
+        } catch (Throwable $e) {
+            if ($pdo->inTransaction()) {
+                $pdo->rollBack();
+            }
             throw $e;
         }
     }
 
+    private static function normalizeName(string $name): string
+    {
+        $name = trim($name);
+        if ($name === '') {
+            return 'untitled.soon';
+        }
+        if (mb_strlen($name) > 190) {
+            Json::fail('bad_request', '文件名过长', 400);
+        }
+        return $name;
+    }
+
+    private static function assertJsonPayload(string $json): void
+    {
+        if ($json === '') {
+            Json::fail('bad_request', '文件内容为空', 400);
+        }
+        $size = strlen($json);
+        if ($size > self::MAX_JSON_BYTES) {
+            Json::fail('payload_too_large', '文件内容过大（最大 32MB）', 413);
+        }
+    }
+
+    private static function extractThumb(string $json): string
+    {
+        try {
+            return TemplateService::thumbFromSoonJson($json);
+        } catch (Throwable) {
+            return '';
+        }
+    }
+
+    /** @return never */
+    private static function failDb(PDOException $e): void
+    {
+        $detail = $e->getMessage();
+        if (str_contains($detail, 'max_allowed_packet') || str_contains($detail, 'Packet too large')) {
+            Json::fail('payload_too_large', '文件过大，超出服务器数据库限制', 413);
+        }
+        if (str_contains($detail, 'Unknown column') || str_contains($detail, "doesn't exist")) {
+            Json::fail('server_error', '数据库结构不完整，请导入 database/schema.sql 或执行 php scripts/migrate-schema.php', 500);
+        }
+        throw $e;
+    }
+
     public static function softDelete(int $userId, int $id): void
     {
         $stmt = Db::pdo()->prepare('UPDATE soon_files SET deleted_at = :ts WHERE id = :id AND user_id = :u');
@@ -152,4 +236,22 @@ final class FileService
         }
         return $row;
     }
+
+    public static function outputThumb(int $userId, int $id): void
+    {
+        $row = self::fetch($userId, $id);
+        $thumb = trim((string)($row['thumb'] ?? ''));
+        if ($thumb === '' || !str_starts_with($thumb, 'data:image/')) {
+            $thumb = TemplateService::thumbFromSoonJson((string)$row['json']);
+            if ($thumb !== '') {
+                Db::pdo()->prepare('UPDATE soon_files SET thumb = :th WHERE id = :id AND user_id = :u')
+                    ->execute(['th' => $thumb, 'id' => $id, 'u' => $userId]);
+            }
+        }
+        if ($thumb === '') {
+            http_response_code(404);
+            exit;
+        }
+        TemplateService::outputThumbDataUrl($thumb, (string)$row['updated_at']);
+    }
 }

backend-web/src/Services/MembershipService.php

@@ -5,7 +5,6 @@ namespace Soon\Api\Services;
 
 use Soon\Api\Core\Config;
 use Soon\Api\Core\Db;
-use Soon\Api\Core\Json;
 
 /**
  * 会员与配额服务。
@@ -16,7 +15,8 @@ final class MembershipService
     {
         $stmt = Db::pdo()->query(
             'SELECT id, code, name, description, price_cents, quota_mb, max_files, duration_days, '
-            . 'features, sort_order, is_recommended, is_active FROM plans WHERE is_active = 1 '
+            . 'features, sort_order, is_recommended, is_active FROM plans '
+            . 'WHERE is_active = 1 AND code = \'member_lifetime\' AND price_cents > 0 '
             . 'ORDER BY sort_order ASC, price_cents ASC'
         );
         $items = [];
@@ -34,7 +34,7 @@ final class MembershipService
         $stmt = $pdo->prepare(
             'SELECT p.*, s.id AS subscription_id, s.expires_at AS subscription_expires_at, s.started_at AS subscription_started_at '
             . 'FROM subscriptions s JOIN plans p ON p.id = s.plan_id '
-            . 'WHERE s.user_id = :u AND s.status = "active" AND s.expires_at > NOW() '
+            . 'WHERE s.user_id = :u AND s.status = \'active\' AND s.expires_at > NOW() '
             . 'ORDER BY s.expires_at DESC LIMIT 1'
         );
         $stmt->execute(['u' => $userId]);
@@ -42,15 +42,25 @@ final class MembershipService
 
         if ($row) {
             $plan = self::enrichPlan($row);
+            $durationDays = (int)($row['duration_days'] ?? 0);
+            $startedAt = $row['subscription_started_at'] ?? null;
+            if ($durationDays <= 0 || (string)($row['code'] ?? '') === 'member_lifetime') {
+                $plan['subscription'] = [
+                    'type' => 'lifetime',
+                    'activated_at' => $startedAt,
+                    'status' => 'active',
+                ];
+            } else {
                 $expiresAt = (string)($row['subscription_expires_at'] ?? '');
                 $daysRemaining = self::daysUntil($expiresAt);
                 $plan['subscription'] = [
                     'id' => (int)$row['subscription_id'],
-                'started_at' => $row['subscription_started_at'] ?? null,
+                    'started_at' => $startedAt,
                     'expires_at' => $expiresAt,
                     'days_remaining' => $daysRemaining,
                     'status' => $daysRemaining <= 7 ? 'expiring' : 'active',
                 ];
+            }
             $plan['usage'] = $usage;
             $plan['tier'] = 'member';
             $plan['is_member'] = true;
@@ -60,7 +70,7 @@ final class MembershipService
         $memberQuota = (int)Config::get('limits.member_quota_mb', 2048);
         $memberFiles = (int)Config::get('limits.member_max_files', 200);
         $freeQuota = (int)Config::get('limits.free_quota_mb', $memberQuota);
-        $freeStmt = $pdo->prepare('SELECT * FROM plans WHERE code = "free" AND is_active = 1 LIMIT 1');
+        $freeStmt = $pdo->prepare('SELECT * FROM plans WHERE code = \'free\' AND is_active = 1 LIMIT 1');
         $freeStmt->execute();
         $freeRow = $freeStmt->fetch();
         if ($freeRow) {
@@ -69,7 +79,7 @@ final class MembershipService
             $plan = self::enrichPlan([
                 'id' => 0,
                 'code' => 'free',
-                'name' => '免费版',
+                'name' => '普通用户',
                 'description' => '适合个人体验与轻量设计',
                 'price_cents' => 0,
                 'quota_mb' => $freeQuota,
@@ -98,18 +108,30 @@ final class MembershipService
     {
         $stmt = Db::pdo()->prepare(
             'SELECT 1 FROM subscriptions s JOIN plans p ON p.id = s.plan_id '
-            . 'WHERE s.user_id = :u AND s.status = "active" AND s.expires_at > NOW() '
-            . 'AND p.code <> "free" AND p.price_cents > 0 LIMIT 1'
+            . 'WHERE s.user_id = :u AND s.status = \'active\' AND s.expires_at > NOW() '
+            . 'AND p.code <> \'free\' AND p.price_cents > 0 LIMIT 1'
         );
         $stmt->execute(['u' => $userId]);
         return (bool)$stmt->fetchColumn();
     }
 
-    public static function requireActiveMember(int $userId): void
+    /** @return array{is_member:bool,tier:string,name:string,subscription:array<string,mixed>} */
+    public static function membershipSummary(int $userId): array
     {
-        if (!self::isActiveMember($userId)) {
-            Json::fail('membership_required', '此功能需要订阅后使用', 403);
+        if (self::isActiveMember($userId)) {
+            return [
+                'is_member' => true,
+                'tier' => 'member',
+                'name' => '会员',
+                'subscription' => ['status' => 'active'],
+            ];
         }
+        return [
+            'is_member' => false,
+            'tier' => 'free',
+            'name' => '普通用户',
+            'subscription' => ['status' => 'free'],
+        ];
     }
 
     /** @return array<int, array<string, mixed>> */
@@ -158,9 +180,15 @@ final class MembershipService
         return ['items' => $items, 'total' => $total, 'page' => $page, 'size' => $size];
     }
 
-    public static function previewAllowed(int $userId): bool
+    private const LIFETIME_EXPIRES = '9999-12-31 23:59:59';
+
+    public static function subscriptionExpiresAt(int $durationDays, ?int $baseTs = null): string
     {
-        return self::isActiveMember($userId);
+        if ($durationDays <= 0) {
+            return self::LIFETIME_EXPIRES;
+        }
+        $baseTs = $baseTs ?? time();
+        return date('Y-m-d H:i:s', $baseTs + $durationDays * 86400);
     }
 
     public static function settings(): array
@@ -255,6 +283,8 @@ final class MembershipService
         }
         if ($durationDays > 0) {
             $core[] = '订阅周期：' . self::periodLabel($durationDays);
+        } elseif ($code === 'member_lifetime' || $durationDays <= 0) {
+            $core[] = '永久有效';
         }
         return $core;
     }
@@ -342,12 +372,12 @@ final class MembershipService
         $fileStmt->execute(['u' => $userId]);
         $row = $fileStmt->fetch() ?: ['files_count' => 0, 'storage_bytes' => 0];
         $bytes = (int)$row['storage_bytes'];
-        $usedMb = $bytes > 0 ? round($bytes / 1024 / 1024, 2) : 0;
+        $usedMb = $bytes > 0 ? round($bytes / 1024 / 1024, 2) : 0.0;
         return [
             'files_count' => (int)$row['files_count'],
             'storage_bytes' => $bytes,
             'used_mb' => $usedMb,
-            'used_display' => self::formatQuota(max(1, $usedMb)) !== '0 MB' ? self::formatBytes($bytes) : '0 MB',
+            'used_display' => $bytes > 0 ? self::formatBytes($bytes) : '0 MB',
         ];
     }
 

backend-web/src/Services/PayService.php

@@ -19,6 +19,9 @@ final class PayService
 
     public static function createOrder(int $userId, int $planId, string $channel, string $clientIp): array
     {
+        if (MembershipService::isActiveMember($userId)) {
+            Json::fail('already_member', '您已是会员，无需重复激活', 409);
+        }
         $plan = self::loadActivePlan($planId);
         self::expireStalePendingOrders($userId);
         $existing = self::findReusablePendingOrder($userId, $planId, $channel);
@@ -70,6 +73,7 @@ final class PayService
             if (!in_array($channel, ['alipay', 'wechat'], true)) {
                 Json::fail('bad_request', '不支持的支付方式', 400);
             }
+            PaymentConfig::assertChannelAllowed($channel);
             Db::pdo()->prepare('UPDATE pay_orders SET channel = :c WHERE id = :id')
                 ->execute(['c' => $channel, 'id' => $order['id']]);
             $order['channel'] = $channel;
@@ -238,7 +242,12 @@ final class PayService
             if ($activeExpires) {
                 $baseTs = max($baseTs, strtotime((string)$activeExpires));
             }
-            $expires = date('Y-m-d H:i:s', $baseTs + (int)$plan['duration_days'] * 86400);
+            $durationDays = (int)$plan['duration_days'];
+            if ($durationDays <= 0) {
+                $expires = '9999-12-31 23:59:59';
+            } else {
+                $expires = date('Y-m-d H:i:s', $baseTs + $durationDays * 86400);
+            }
             $pdo->prepare('UPDATE subscriptions SET status = "expired" WHERE user_id = :u AND status = "active"')
                 ->execute(['u' => $order['user_id']]);
             $pdo->prepare(

backend-web/src/Services/PaymentConfig.php

@@ -0,0 +1,255 @@
+<?php
+declare(strict_types=1);
+
+namespace Soon\Api\Services;
+
+use Soon\Api\Core\Config;
+use Soon\Api\Core\Db;
+use Soon\Api\Core\Json;
+
+/**
+ * 支付参数、密钥就绪检查与 Admin 读写。
+ */
+final class PaymentConfig
+{
+    /** @var array<string, list<string>> */
+    private const REQUIRED = [
+        'alipay' => ['site.base_url', 'alipay.app_id', 'alipay.private_key', 'alipay.public_key'],
+        'wechat' => [
+            'site.base_url',
+            'wechat.app_id',
+            'wechat.mch_id',
+            'wechat.mch_serial_no',
+            'wechat.mch_private_key',
+            'wechat.api_v3_key',
+            'wechat.platform_cert',
+        ],
+    ];
+
+    /** @var array<string, array{label: string, hint: string}> */
+    public const PARAM_FIELDS = [
+        'site.base_url' => [
+            'label' => 'API 外网地址',
+            'hint' => '须 HTTPS 外网可达，用于支付 notify 回调',
+        ],
+        'site.front_base_url' => [
+            'label' => '前端站点地址',
+            'hint' => '支付宝支付完成后的 return_url 跳转',
+        ],
+        'alipay.app_id' => [
+            'label' => '支付宝 APPID',
+            'hint' => '开放平台应用 ID',
+        ],
+        'alipay.sandbox' => [
+            'label' => '支付宝环境',
+            'hint' => '沙箱仅联调使用',
+        ],
+        'wechat.app_id' => [
+            'label' => '微信 AppID',
+            'hint' => '关联支付的公众号/小程序/移动应用 AppID',
+        ],
+        'wechat.mch_id' => [
+            'label' => '微信商户号',
+            'hint' => '微信支付商户号 mch_id',
+        ],
+        'wechat.mch_serial_no' => [
+            'label' => '商户证书序列号',
+            'hint' => '商户 API 证书序列号，用于 V3 签名',
+        ],
+        'wechat.sandbox' => [
+            'label' => '微信环境',
+            'hint' => '当前实现共用正式网关，仅作标记',
+        ],
+        'payment.display_channels' => [
+            'label' => '前端展示渠道',
+            'hint' => '用户端可选的支付方式，默认仅支付宝',
+        ],
+    ];
+
+    /** @return list<string> */
+    public static function displayChannels(): array
+    {
+        $raw = Config::get('payment.display_channels');
+        if ($raw === null || $raw === '') {
+            return ['alipay'];
+        }
+        $parts = is_array($raw)
+            ? $raw
+            : (preg_split('/[\s,]+/', (string)$raw, -1, PREG_SPLIT_NO_EMPTY) ?: []);
+        $allowed = ['alipay', 'wechat'];
+        $out = [];
+        foreach ($parts as $p) {
+            $p = strtolower(trim((string)$p));
+            if ($p !== '' && in_array($p, $allowed, true) && !in_array($p, $out, true)) {
+                $out[] = $p;
+            }
+        }
+        return $out !== [] ? $out : ['alipay'];
+    }
+
+    public static function assertChannelAllowed(string $channel): void
+    {
+        if (!in_array($channel, self::displayChannels(), true)) {
+            Json::fail('bad_request', '该支付方式暂未开放', 400);
+        }
+    }
+
+    public static function reloadRuntime(): void
+    {
+        $config = Config::all();
+        PaymentConfigLoader::merge($config);
+        SettingsConfigLoader::merge($config);
+        Config::init($config);
+    }
+
+    /** @return array<string, string> */
+    public static function paramValues(): array
+    {
+        $out = [];
+        foreach (SettingsConfigLoader::PAYMENT_KEYS as $key) {
+            $out[$key] = self::stringValue($key, Config::get($key));
+        }
+        return $out;
+    }
+
+    /** @param list<array{key: string, value: string}> $items */
+    public static function saveParams(int $adminId, array $items): array
+    {
+        $allowed = array_flip(SettingsConfigLoader::PAYMENT_KEYS);
+        $pdo = Db::pdo();
+        $stmt = $pdo->prepare(
+            'INSERT INTO settings (`key`, `value`, updated_at) VALUES (:k, :v, :ts) '
+            . 'ON DUPLICATE KEY UPDATE `value`=VALUES(`value`), updated_at=VALUES(updated_at)'
+        );
+        $saved = [];
+        $now = date('Y-m-d H:i:s');
+        foreach ($items as $item) {
+            if (!is_array($item)) {
+                continue;
+            }
+            $key = trim((string)($item['key'] ?? ''));
+            if ($key === '' || !isset($allowed[$key])) {
+                continue;
+            }
+            $value = trim((string)($item['value'] ?? ''));
+            if ($key === 'site.base_url' && $value !== '' && !str_starts_with(strtolower($value), 'https://')) {
+                Json::fail('bad_request', 'API 外网地址须以 https:// 开头', 400);
+            }
+            if (str_ends_with($key, '.sandbox')) {
+                $value = in_array(strtolower($value), ['1', 'true', 'yes', 'on'], true) ? '1' : '0';
+            }
+            if ($key === 'payment.display_channels') {
+                $parsed = self::parseDisplayChannelsValue($value);
+                if ($parsed === []) {
+                    Json::fail('bad_request', '至少选择一种前端展示支付方式', 400);
+                }
+                $value = implode(',', $parsed);
+            }
+            $stmt->execute(['k' => $key, 'v' => $value, 'ts' => $now]);
+            $saved[] = $key;
+        }
+        if ($saved === []) {
+            Json::fail('bad_request', '无有效配置项', 400);
+        }
+        AuditService::log($adminId, 'payment.config.save', 'payment', ['keys' => $saved]);
+        self::reloadRuntime();
+        return ['keys' => $saved];
+    }
+
+    /** @return array<string, mixed> */
+    public static function adminSnapshot(): array
+    {
+        $baseUrl = rtrim((string)Config::get('site.base_url', ''), '/');
+        return [
+            'params' => self::paramValues(),
+            'display_channels' => self::displayChannels(),
+            'readiness' => self::readiness(),
+            'notify_urls' => [
+                'alipay' => $baseUrl !== '' ? $baseUrl . '/api/v1/pay/alipay/notify' : '',
+                'wechat' => $baseUrl !== '' ? $baseUrl . '/api/v1/pay/wechat/notify' : '',
+            ],
+            'return_url_hint' => rtrim((string)Config::get('site.front_base_url', Config::get('site.base_url', '')), '/')
+                . '/pages/index.web.html?paid={order_no}',
+        ];
+    }
+
+    /** @return array<string, array{ready: bool, missing: list<string>}> */
+    public static function readiness(): array
+    {
+        $out = [];
+        foreach (self::REQUIRED as $channel => $keys) {
+            $missing = [];
+            foreach ($keys as $key) {
+                if (!self::isPresent($key)) {
+                    $missing[] = self::missingLabel($key);
+                }
+            }
+            $out[$channel] = ['ready' => $missing === [], 'missing' => $missing];
+        }
+        return $out;
+    }
+
+    private static function isPresent(string $key): bool
+    {
+        $val = Config::get($key);
+        if (is_bool($val)) {
+            return true;
+        }
+        if (is_string($val)) {
+            return trim($val) !== '';
+        }
+        return $val !== null && $val !== '';
+    }
+
+    private static function missingLabel(string $key): string
+    {
+        if (isset(self::PARAM_FIELDS[$key])) {
+            return self::PARAM_FIELDS[$key]['label'];
+        }
+        $map = [
+            'alipay.private_key' => '应用私钥',
+            'alipay.public_key' => '支付宝公钥',
+            'wechat.mch_private_key' => '商户私钥',
+            'wechat.api_v3_key' => 'APIv3 密钥',
+            'wechat.platform_cert' => '平台证书',
+        ];
+        return $map[$key] ?? $key;
+    }
+
+    private static function stringValue(string $key, mixed $value): string
+    {
+        if (str_ends_with($key, '.sandbox')) {
+            return $value ? '1' : '0';
+        }
+        if ($key === 'payment.display_channels') {
+            if (is_array($value)) {
+                return implode(',', self::parseDisplayChannelsList($value));
+            }
+            $parsed = self::parseDisplayChannelsValue((string)($value ?? ''));
+            return $parsed !== [] ? implode(',', $parsed) : 'alipay';
+        }
+        return is_string($value) ? $value : (string)($value ?? '');
+    }
+
+    /** @return list<string> */
+    private static function parseDisplayChannelsValue(string $value): array
+    {
+        return self::parseDisplayChannelsList(
+            preg_split('/[\s,]+/', trim($value), -1, PREG_SPLIT_NO_EMPTY) ?: []
+        );
+    }
+
+    /** @param list<string> $parts @return list<string> */
+    private static function parseDisplayChannelsList(array $parts): array
+    {
+        $allowed = ['alipay', 'wechat'];
+        $out = [];
+        foreach ($parts as $p) {
+            $p = strtolower(trim((string)$p));
+            if ($p !== '' && in_array($p, $allowed, true) && !in_array($p, $out, true)) {
+                $out[] = $p;
+            }
+        }
+        return $out;
+    }
+}

backend-web/src/Services/PaymentConfigLoader.php

@@ -38,4 +38,10 @@ final class PaymentConfigLoader
             $config[$section][$key] = $content;
         }
     }
+
+    public static function reload(array &$config): void
+    {
+        self::merge($config);
+        SettingsConfigLoader::merge($config);
+    }
 }

backend-web/src/Services/SettingsConfigLoader.php

@@ -0,0 +1,69 @@
+<?php
+declare(strict_types=1);
+
+namespace Soon\Api\Services;
+
+use Soon\Api\Core\Db;
+use Throwable;
+
+/**
+ * 将 settings 表中白名单键覆盖到 Config（点号路径）。
+ */
+final class SettingsConfigLoader
+{
+    /** @var list<string> */
+    public const PAYMENT_KEYS = [
+        'site.base_url',
+        'site.front_base_url',
+        'payment.display_channels',
+        'alipay.app_id',
+        'alipay.sandbox',
+        'wechat.app_id',
+        'wechat.mch_id',
+        'wechat.mch_serial_no',
+        'wechat.sandbox',
+    ];
+
+    public static function merge(array &$config): void
+    {
+        try {
+            $stmt = Db::pdo()->query('SELECT `key`, `value` FROM settings');
+            $rows = $stmt->fetchAll();
+        } catch (Throwable) {
+            return;
+        }
+        $allowed = array_flip(self::PAYMENT_KEYS);
+        foreach ($rows as $row) {
+            $key = (string)($row['key'] ?? '');
+            if ($key === '' || !isset($allowed[$key])) {
+                continue;
+            }
+            $value = (string)($row['value'] ?? '');
+            self::setNested($config, $key, self::castValue($key, $value));
+        }
+    }
+
+    private static function castValue(string $key, string $value): mixed
+    {
+        if (str_ends_with($key, '.sandbox')) {
+            return in_array(strtolower($value), ['1', 'true', 'yes', 'on'], true);
+        }
+        return $value;
+    }
+
+    private static function setNested(array &$config, string $dotKey, mixed $value): void
+    {
+        $segments = explode('.', $dotKey);
+        $ref = &$config;
+        foreach ($segments as $i => $seg) {
+            if ($i === count($segments) - 1) {
+                $ref[$seg] = $value;
+                return;
+            }
+            if (!isset($ref[$seg]) || !is_array($ref[$seg])) {
+                $ref[$seg] = [];
+            }
+            $ref = &$ref[$seg];
+        }
+    }
+}

backend-web/src/Services/SoonModelService.php

@@ -0,0 +1,179 @@
+<?php
+declare(strict_types=1);
+
+namespace Soon\Api\Services;
+
+use Soon\Api\Core\Config;
+
+/**
+ * 扫描 models_dir 下 .soon 文件，解析名称、类型与缩略图。
+ */
+final class SoonModelService
+{
+    private const META_HEAD_BYTES = 16384;
+    private const META_TAIL_BYTES = 32768;
+
+    /** @return list<string> */
+    public static function roots(): array
+    {
+        $candidates = [
+            (string)Config::get('storage.models_dir', ''),
+            SOON_SERVER_ROOT . '/soonModels',
+        ];
+        $out = [];
+        foreach ($candidates as $path) {
+            $path = rtrim($path, '/\\');
+            if ($path === '' || isset($out[$path])) {
+                continue;
+            }
+            if (@is_dir($path) && @is_readable($path)) {
+                $out[$path] = true;
+            }
+        }
+        return array_keys($out);
+    }
+
+    /** @return list<array<string, mixed>> */
+    public static function list(): array
+    {
+        $apiBase = rtrim((string)Config::get('site.base_url', ''), '/');
+        $items = [];
+        $seen = [];
+        foreach (self::roots() as $root) {
+            foreach (self::scanSoonNames($root) as $base) {
+                if (isset($seen[$base])) {
+                    continue;
+                }
+                $path = $root . DIRECTORY_SEPARATOR . $base;
+                $item = self::buildItem($path, $base, $apiBase);
+                if ($item !== null) {
+                    $seen[$base] = true;
+                    $items[] = $item;
+                }
+            }
+        }
+        usort($items, static fn(array $a, array $b): int => strnatcasecmp((string)$a['name'], (string)$b['name']));
+        return $items;
+    }
+
+    public static function resolvePath(string $filename): ?string
+    {
+        $base = basename(urldecode($filename));
+        if ($base === '' || $base[0] === '.' || !self::isSoonName($base)) {
+            return null;
+        }
+        foreach (self::roots() as $root) {
+            $path = $root . DIRECTORY_SEPARATOR . $base;
+            if (@is_file($path) && @is_readable($path)) {
+                return $path;
+            }
+        }
+        return null;
+    }
+
+    /** @return list<string> */
+    private static function scanSoonNames(string $root): array
+    {
+        $entries = @scandir($root);
+        if ($entries === false) {
+            return [];
+        }
+        $names = [];
+        foreach ($entries as $entry) {
+            if ($entry === '.' || $entry === '..' || $entry === '' || $entry[0] === '.') {
+                continue;
+            }
+            if (!self::isSoonName($entry)) {
+                continue;
+            }
+            $path = $root . DIRECTORY_SEPARATOR . $entry;
+            if (@is_file($path)) {
+                $names[] = $entry;
+            }
+        }
+        return $names;
+    }
+
+    private static function isSoonName(string $name): bool
+    {
+        return str_ends_with(strtolower($name), '.soon');
+    }
+
+    /** @return array<string, mixed>|null */
+    private static function buildItem(string $path, string $base, string $apiBase): ?array
+    {
+        $size = @filesize($path);
+        if ($size === false || $size <= 0) {
+            return null;
+        }
+
+        $meta = self::readMetadata((int)$size, $path);
+        $name = pathinfo($base, PATHINFO_FILENAME);
+        if ($meta['title'] !== '') {
+            $name = $meta['title'];
+        } elseif ($meta['name'] !== '') {
+            $name = $meta['name'];
+        }
+
+        $fileUrl = ($apiBase !== '' ? $apiBase : '') . '/api/v1/soon-models/files/' . rawurlencode($base);
+
+        return [
+            'name' => $name,
+            'type' => $meta['type'],
+            'file' => $base,
+            'file_url' => $fileUrl,
+            'size' => (int)$size,
+        ];
+    }
+
+    /**
+     * @return array{title:string,name:string,type:int}
+     */
+    private static function readMetadata(int $size, string $path): array
+    {
+        $head = self::readBytes($path, 0, min(self::META_HEAD_BYTES, $size));
+        $tail = $size > self::META_HEAD_BYTES
+            ? self::readBytes($path, max(0, $size - self::META_TAIL_BYTES), min(self::META_TAIL_BYTES, $size))
+            : '';
+        $raw = $head . $tail;
+
+        $type = 1;
+        if (preg_match('/"soonType"\s*:\s*(\d+)/', $raw, $m)) {
+            $type = (int)$m[1] === 2 ? 2 : 1;
+        } elseif (preg_match('/"backBlackPic"\s*:\s*"(?!")/', $raw)) {
+            $type = 2;
+        }
+
+        return [
+            'title' => self::matchJsonString($raw, 'title'),
+            'name' => self::matchJsonString($raw, 'name'),
+            'type' => $type,
+        ];
+    }
+
+    private static function readBytes(string $path, int $offset, int $length): string
+    {
+        if ($length <= 0) {
+            return '';
+        }
+        $fh = @fopen($path, 'rb');
+        if ($fh === false) {
+            return '';
+        }
+        if ($offset > 0) {
+            fseek($fh, $offset);
+        }
+        $data = fread($fh, $length);
+        fclose($fh);
+        return is_string($data) ? $data : '';
+    }
+
+    private static function matchJsonString(string $raw, string $key): string
+    {
+        if (!preg_match('/"' . preg_quote($key, '/') . '"\s*:\s*"((?:\\\\.|[^"\\\\])*)"/u', $raw, $m)) {
+            return '';
+        }
+        $decoded = json_decode('"' . $m[1] . '"');
+        return is_string($decoded) ? trim($decoded) : '';
+    }
+}

backend-web/src/Services/TemplateService.php

@@ -0,0 +1,461 @@
+<?php
+declare(strict_types=1);
+
+namespace Soon\Api\Services;
+
+use Soon\Api\Core\Config;
+use Soon\Api\Core\Db;
+use Soon\Api\Core\Json;
+
+final class TemplateService
+{
+    private const THUMB_MAX_BYTES = 524288;
+
+    public static function storageDir(): string
+    {
+        $dir = (string)Config::get('storage.templates_dir', '');
+        if ($dir === '') {
+            $dir = SOON_SERVER_ROOT . '/storage/templates';
+        }
+        $dir = rtrim($dir, '/\\');
+        if (!is_dir($dir)) {
+            @mkdir($dir, 0755, true);
+        }
+        return $dir;
+    }
+
+    /** @return list<array<string, mixed>> */
+    public static function listPublic(): array
+    {
+        $stmt = Db::pdo()->query(
+            'SELECT id, name, type, updated_at FROM soon_templates WHERE is_active = 1 '
+            . 'ORDER BY sort_order ASC, id ASC'
+        );
+        $items = [];
+        foreach ($stmt->fetchAll() as $row) {
+            $items[] = [
+                'id' => (int)$row['id'],
+                'name' => (string)$row['name'],
+                'type' => (int)$row['type'],
+                'updated_at' => (string)$row['updated_at'],
+            ];
+        }
+        return $items;
+    }
+
+    /** @return list<array<string, mixed>> */
+    public static function listAdmin(): array
+    {
+        $stmt = Db::pdo()->query(
+            'SELECT id, name, type, file_size, sort_order, is_active, created_at, updated_at, '
+            . '(CASE WHEN thumb IS NOT NULL AND thumb <> "" THEN 1 ELSE 0 END) AS has_thumb '
+            . 'FROM soon_templates ORDER BY sort_order ASC, id ASC'
+        );
+        $items = [];
+        foreach ($stmt->fetchAll() as $row) {
+            $items[] = [
+                'id' => (int)$row['id'],
+                'name' => (string)$row['name'],
+                'type' => (int)$row['type'],
+                'file_size' => (int)$row['file_size'],
+                'sort_order' => (int)$row['sort_order'],
+                'is_active' => (int)$row['is_active'] === 1,
+                'has_thumb' => (int)$row['has_thumb'] === 1,
+                'created_at' => $row['created_at'],
+                'updated_at' => $row['updated_at'],
+            ];
+        }
+        return $items;
+    }
+
+    /** @return array<string, mixed>|null */
+    public static function find(int $id): ?array
+    {
+        $stmt = Db::pdo()->prepare('SELECT * FROM soon_templates WHERE id = :id LIMIT 1');
+        $stmt->execute(['id' => $id]);
+        $row = $stmt->fetch();
+        return $row ?: null;
+    }
+
+    public static function filePath(int $id): ?string
+    {
+        $path = self::storageDir() . DIRECTORY_SEPARATOR . $id . '.soon';
+        return is_file($path) && is_readable($path) ? $path : null;
+    }
+
+    /** @return array{type:int, thumb:string} */
+    public static function parseSoonContent(string $json): array
+    {
+        $json = trim($json);
+        if ($json === '') {
+            Json::fail('bad_request', '模板内容为空', 400);
+        }
+        $data = json_decode($json, true);
+        if (!is_array($data)) {
+            Json::fail('bad_request', '模板须为有效的 JSON（.soon）', 400);
+        }
+        return self::metaFromSoonData($data);
+    }
+
+    /** @param array<string, mixed> $data @return array{type:int, thumb:string} */
+    private static function metaFromSoonData(array $data): array
+    {
+        $type = 1;
+        if (!empty($data['soonType']) && (int)$data['soonType'] === 2) {
+            $type = 2;
+        } elseif (!empty($data['backBlackPic'])) {
+            $type = 2;
+        }
+        return ['type' => $type, 'thumb' => self::extractThumb($data)];
+    }
+
+    /** @return array{type:int, thumb:string} */
+    private static function parseSoonMeta(string $json): array
+    {
+        $json = trim($json);
+        if ($json === '') {
+            return ['type' => 1, 'thumb' => ''];
+        }
+        $data = json_decode($json, true);
+        if (!is_array($data)) {
+            return ['type' => 1, 'thumb' => ''];
+        }
+        return self::metaFromSoonData($data);
+    }
+
+    public static function ensureThumbStored(int $id): string
+    {
+        $row = self::find($id);
+        if (!$row) {
+            return '';
+        }
+        $thumb = trim((string)($row['thumb'] ?? ''));
+        if ($thumb !== '' && str_starts_with($thumb, 'data:image/')) {
+            return $thumb;
+        }
+        $path = self::filePath($id);
+        if ($path === null) {
+            return '';
+        }
+        $json = @file_get_contents($path);
+        if ($json === false || $json === '') {
+            return '';
+        }
+        $meta = self::parseSoonMeta($json);
+        $thumb = $meta['thumb'];
+        if ($thumb === '') {
+            return '';
+        }
+        Db::pdo()->prepare('UPDATE soon_templates SET thumb = :th, updated_at = :ua WHERE id = :id')
+            ->execute(['th' => $thumb, 'ua' => date('Y-m-d H:i:s'), 'id' => $id]);
+        return $thumb;
+    }
+
+    /** @param array<string, mixed> $data */
+    private static function extractThumb(array $data): string
+    {
+        if (empty($data['frontDisplayPic']) || !is_string($data['frontDisplayPic'])) {
+            return '';
+        }
+        $candidate = trim($data['frontDisplayPic']);
+        if (!str_starts_with($candidate, 'data:image/')) {
+            return '';
+        }
+        if (strlen($candidate) <= self::THUMB_MAX_BYTES) {
+            return $candidate;
+        }
+        return self::compressDataUrl($candidate);
+    }
+
+    private static function compressDataUrl(string $dataUrl): string
+    {
+        if (!preg_match('#^data:(image/[a-zA-Z0-9.+-]+);base64,(.+)$#s', $dataUrl, $m)) {
+            return '';
+        }
+        $bin = base64_decode($m[2], true);
+        if ($bin === false || $bin === '') {
+            return '';
+        }
+        if (!function_exists('imagecreatefromstring')) {
+            return '';
+        }
+        $img = @imagecreatefromstring($bin);
+        if ($img === false) {
+            return '';
+        }
+        $w = imagesx($img);
+        $h = imagesy($img);
+        if ($w < 1 || $h < 1) {
+            imagedestroy($img);
+            return '';
+        }
+        $maxW = 360;
+        if ($w > $maxW) {
+            $newH = max(1, (int)round($h * ($maxW / $w)));
+            $scaled = imagescale($img, $maxW, $newH);
+            if ($scaled !== false) {
+                imagedestroy($img);
+                $img = $scaled;
+            }
+        }
+        ob_start();
+        imagejpeg($img, null, 82);
+        imagedestroy($img);
+        $jpeg = ob_get_clean();
+        if ($jpeg === false || $jpeg === '') {
+            return '';
+        }
+        $out = 'data:image/jpeg;base64,' . base64_encode($jpeg);
+        if (strlen($out) > self::THUMB_MAX_BYTES) {
+            return '';
+        }
+        return $out;
+    }
+
+    private static function emitThumbBinary(string $thumb, string $rev): void
+    {
+        if (!preg_match('#^data:(image/[a-zA-Z0-9.+-]+);base64,(.+)$#s', $thumb, $m)) {
+            http_response_code(404);
+            exit;
+        }
+        $bin = base64_decode($m[2], true);
+        if ($bin === false) {
+            http_response_code(404);
+            exit;
+        }
+        header('Content-Type: ' . $m[1]);
+        header('Cache-Control: public, max-age=300, must-revalidate');
+        header('ETag: "' . md5($rev . ':' . strlen($bin)) . '"');
+        header('Content-Length: ' . strlen($bin));
+        echo $bin;
+        exit;
+    }
+
+    public static function create(
+        string $name,
+        string $json,
+        int $sortOrder = 0,
+        int $isActive = 1
+    ): array {
+        $name = trim($name);
+        if ($name === '') {
+            Json::fail('bad_request', '名称必填', 400);
+        }
+        if (mb_strlen($name) > 120) {
+            Json::fail('bad_request', '名称过长', 400);
+        }
+
+        $meta = self::parseSoonContent($json);
+        $now = date('Y-m-d H:i:s');
+        $pdo = Db::pdo();
+        $pdo->prepare(
+            'INSERT INTO soon_templates (name, type, thumb, file_size, sort_order, is_active, created_at, updated_at) '
+            . 'VALUES (:n, :t, :th, :sz, :so, :a, :ca, :ua)'
+        )->execute([
+            'n' => $name,
+            't' => $meta['type'],
+            'th' => $meta['thumb'],
+            'sz' => strlen($json),
+            'so' => $sortOrder,
+            'a' => $isActive ? 1 : 0,
+            'ca' => $now,
+            'ua' => $now,
+        ]);
+        $id = (int)$pdo->lastInsertId();
+        self::writeFile($id, $json);
+        $item = self::find($id);
+        if (!$item) {
+            Json::fail('server_error', '模板创建失败', 500);
+        }
+        return [
+            'id' => $id,
+            'name' => (string)$item['name'],
+            'type' => (int)$item['type'],
+            'file_size' => (int)$item['file_size'],
+            'sort_order' => (int)$item['sort_order'],
+            'is_active' => (int)$item['is_active'] === 1,
+            'has_thumb' => trim((string)($item['thumb'] ?? '')) !== '',
+            'created_at' => $item['created_at'],
+            'updated_at' => $item['updated_at'],
+        ];
+    }
+
+    public static function update(
+        int $id,
+        string $name,
+        int $sortOrder,
+        int $isActive,
+        ?string $json = null
+    ): array {
+        $row = self::find($id);
+        if (!$row) {
+            Json::fail('not_found', '模板不存在', 404);
+        }
+        $name = trim($name);
+        if ($name === '') {
+            Json::fail('bad_request', '名称必填', 400);
+        }
+
+        $type = (int)$row['type'];
+        $thumb = (string)($row['thumb'] ?? '');
+        $size = (int)$row['file_size'];
+        if ($json !== null && trim($json) !== '') {
+            $meta = self::parseSoonContent($json);
+            $type = $meta['type'];
+            $thumb = $meta['thumb'];
+            $size = strlen($json);
+            self::writeFile($id, $json);
+        } elseif ($thumb === '') {
+            $thumb = self::ensureThumbStored($id);
+        }
+
+        Db::pdo()->prepare(
+            'UPDATE soon_templates SET name = :n, type = :t, thumb = :th, file_size = :sz, '
+            . 'sort_order = :so, is_active = :a, updated_at = :ua WHERE id = :id'
+        )->execute([
+            'n' => $name,
+            't' => $type,
+            'th' => $thumb,
+            'sz' => $size,
+            'so' => $sortOrder,
+            'a' => $isActive ? 1 : 0,
+            'ua' => date('Y-m-d H:i:s'),
+            'id' => $id,
+        ]);
+
+        $item = self::find($id);
+        if (!$item) {
+            Json::fail('server_error', '模板更新失败', 500);
+        }
+        return [
+            'id' => $id,
+            'name' => (string)$item['name'],
+            'type' => (int)$item['type'],
+            'file_size' => (int)$item['file_size'],
+            'sort_order' => (int)$item['sort_order'],
+            'is_active' => (int)$item['is_active'] === 1,
+            'has_thumb' => trim((string)($item['thumb'] ?? '')) !== '',
+            'created_at' => $item['created_at'],
+            'updated_at' => $item['updated_at'],
+        ];
+    }
+
+    public static function delete(int $id): void
+    {
+        $row = self::find($id);
+        if (!$row) {
+            Json::fail('not_found', '模板不存在', 404);
+        }
+        Db::pdo()->prepare('DELETE FROM soon_templates WHERE id = :id')->execute(['id' => $id]);
+        $path = self::storageDir() . DIRECTORY_SEPARATOR . $id . '.soon';
+        if (is_file($path)) {
+            @unlink($path);
+        }
+    }
+
+    /** @return array<string, mixed> */
+    public static function fetchPublicJson(int $id): array
+    {
+        $row = self::find($id);
+        if (!$row || (int)$row['is_active'] !== 1) {
+            Json::fail('not_found', '模板不存在', 404);
+        }
+        $path = self::filePath($id);
+        if ($path === null) {
+            Json::fail('not_found', '模板文件缺失', 404);
+        }
+        $json = @file_get_contents($path);
+        if ($json === false || trim($json) === '') {
+            Json::fail('server_error', '模板内容读取失败', 500);
+        }
+        if (json_decode($json, true) === null && json_last_error() !== JSON_ERROR_NONE) {
+            Json::fail('server_error', '模板 JSON 无效', 500);
+        }
+        return [
+            'id' => $id,
+            'name' => (string)$row['name'],
+            'type' => (int)$row['type'],
+            'updated_at' => (string)$row['updated_at'],
+            'json' => $json,
+        ];
+    }
+
+    public static function outputThumb(int $id): void
+    {
+        $row = self::find($id);
+        if (!$row || (int)$row['is_active'] !== 1) {
+            http_response_code(404);
+            exit;
+        }
+        $thumb = trim((string)($row['thumb'] ?? ''));
+        if ($thumb === '' || !str_starts_with($thumb, 'data:image/')) {
+            $thumb = self::ensureThumbStored($id);
+        }
+        if ($thumb === '') {
+            http_response_code(404);
+            exit;
+        }
+        $rev = (string)$row['updated_at'];
+        self::emitThumbBinary($thumb, $rev);
+    }
+
+    public static function outputThumbAdmin(int $id): void
+    {
+        $row = self::find($id);
+        if (!$row) {
+            http_response_code(404);
+            exit;
+        }
+        $thumb = trim((string)($row['thumb'] ?? ''));
+        if ($thumb === '' || !str_starts_with($thumb, 'data:image/')) {
+            $thumb = self::ensureThumbStored($id);
+            $row = self::find($id) ?: $row;
+        }
+        if ($thumb === '') {
+            http_response_code(404);
+            exit;
+        }
+        self::emitThumbBinary($thumb, (string)$row['updated_at']);
+    }
+
+    public static function outputFile(int $id): void
+    {
+        $row = self::find($id);
+        if (!$row || (int)$row['is_active'] !== 1) {
+            Json::fail('not_found', '模板不存在', 404);
+        }
+        $path = self::filePath($id);
+        if ($path === null) {
+            Json::fail('not_found', '模板文件缺失', 404);
+        }
+        $name = preg_replace('/[^\w\x{4e00}-\x{9fff}\-.]+/u', '_', (string)$row['name']);
+        if ($name === '') {
+            $name = 'template';
+        }
+        header('Content-Type: application/json; charset=utf-8');
+        header('Content-Disposition: inline; filename="' . str_replace('"', '', $name) . '.soon"');
+        header('Cache-Control: public, max-age=86400, must-revalidate');
+        header('ETag: "' . md5((string)$row['updated_at'] . ':' . (int)$row['file_size']) . '"');
+        readfile($path);
+        exit;
+    }
+
+    public static function thumbFromSoonJson(string $json): string
+    {
+        return self::parseSoonMeta($json)['thumb'];
+    }
+
+    public static function outputThumbDataUrl(string $thumb, string $rev): void
+    {
+        self::emitThumbBinary($thumb, $rev);
+    }
+
+    private static function writeFile(int $id, string $json): void
+    {
+        $path = self::storageDir() . DIRECTORY_SEPARATOR . $id . '.soon';
+        if (@file_put_contents($path, $json, LOCK_EX) === false) {
+            Db::pdo()->prepare('DELETE FROM soon_templates WHERE id = :id')->execute(['id' => $id]);
+            Json::fail('server_error', '模板文件写入失败', 500);
+        }
+    }
+}

backend-web/src/bootstrap.php

@@ -93,5 +93,8 @@ spl_autoload_register(static function (string $class): void {
 require SOON_API_ROOT . '/Core/Config.php';
 \Soon\Api\Core\Config::init($config);
 require SOON_API_ROOT . '/Services/PaymentConfigLoader.php';
-\Soon\Api\Services\PaymentConfigLoader::merge($config);
+require SOON_API_ROOT . '/Services/SettingsConfigLoader.php';
+\Soon\Api\Services\PaymentConfigLoader::reload($config);
 \Soon\Api\Core\Config::init($config);
+require SOON_API_ROOT . '/Core/ErrorHandler.php';
+\Soon\Api\Core\ErrorHandler::register();

backend-web/storage/cache/rate/3907ccd67c518764ef7b8ef069439ddf.json

@@ -1 +0,0 @@
-{"start":1780902406,"count":11}

backend-web/storage/cache/rate/3e8125a127ab317983e07c575f6fa30d.json

@@ -1 +0,0 @@
-{"start":1780911074,"count":3}

backend-web/storage/cache/rate/7e272c43563d8aa7be34d576076409a6.json

@@ -1 +0,0 @@
-{"start":1780907292,"count":2}

backend-web/storage/cache/rate/c493174a678067c61131069dbaadd56d.json

@@ -1 +0,0 @@
-{"start":1780908575,"count":1}

backend-web/storage/cache/rate/e830ce08b1005f32f93287d5e3332c11.json

@@ -1 +0,0 @@
-{"start":1780893461,"count":1}

docker/docker-compose.yml

@@ -15,7 +15,7 @@ services:
       - --collation-server=utf8mb4_unicode_ci
     volumes:
       - soondesign_mysql_data:/var/lib/mysql
-      - ../backend-web/schema.sql:/docker-entrypoint-initdb.d/01-schema.sql:ro
+      - ../backend-web/database/schema.sql:/docker-entrypoint-initdb.d/01-schema.sql:ro
     healthcheck:
       test: ["CMD", "mysqladmin", "ping", "-h", "127.0.0.1", "-uroot", "-p${MYSQL_ROOT_PASSWORD:-rootlocal}"]
       interval: 5s
@@ -24,7 +24,10 @@ services:
       start_period: 30s
 
   api:
-    image: php:8.2-cli-bookworm
+    build:
+      context: ./php
+      dockerfile: Dockerfile.dev
+    image: soondesign-api:dev
     container_name: soondesign-api
     restart: unless-stopped
     ports:
@@ -57,7 +60,7 @@ services:
     volumes:
       - ../frontend-web:/var/www/web:ro
       - ../frontend-electron:/var/www/electron:ro
-      - ./config/deploy-config.js:/var/www/web/assets/deploy-config.js:ro
+      - ./config/local.js:/var/www/web/config/local.js:ro
       - ./nginx/frontend.conf:/etc/nginx/conf.d/default.conf:ro
     depends_on:
       - api

docker/nginx/frontend.conf

@@ -9,8 +9,18 @@ server {
     location = / { return 302 /pages/index.web.html; }
     location = /pages { return 302 /pages/index.web.html; }
     location = /pages/ { return 302 /pages/index.web.html; }
+    location ~* \.(html|web\.html)$ {
+        add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
+        add_header Pragma "no-cache" always;
+        add_header Expires "0" always;
+        try_files $uri =404;
+    }
+    location = /config/version.js {
+        add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
+        try_files $uri =404;
+    }
     location ~* \.(js|css)$ {
-        add_header Cache-Control "no-store, no-cache, must-revalidate";
+        add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
         try_files $uri =404;
     }
     location / { try_files $uri $uri/ =404; }

docker/php/Dockerfile.dev

@@ -0,0 +1,8 @@
+FROM php:8.2-cli-bookworm
+
+RUN apt-get update -qq \
+    && DEBIAN_FRONTEND=noninteractive apt-get install -y -qq --no-install-recommends \
+        libmariadb-dev-compat $PHPIZE_DEPS \
+    && docker-php-ext-install -j"$(nproc)" pdo_mysql \
+    && apt-get purge -y --auto-remove $PHPIZE_DEPS \
+    && rm -rf /var/lib/apt/lists/*

docker/php/entrypoint-dev.sh

@@ -1,22 +1,13 @@
 #!/bin/sh
 set -e
 
-if ! php -m 2>/dev/null | grep -q pdo_mysql; then
-  echo "[api] installing pdo_mysql..."
-  apt-get update -qq
-  DEBIAN_FRONTEND=noninteractive apt-get install -y -qq --no-install-recommends \
-    libmariadb-dev-compat $PHPIZE_DEPS
-  docker-php-ext-install -j"$(nproc)" pdo_mysql
-  apt-get purge -y --auto-remove $PHPIZE_DEPS
-  rm -rf /var/lib/apt/lists/*
-fi
-
 host="${SOON_DB_HOST:-mysql}"
 port="${SOON_DB_PORT:-3306}"
 user="${SOON_DB_USER:-soondesign}"
 pass="${SOON_DB_PASS:-soondesign}"
 db="${SOON_DB_NAME:-soondesign}"
 
+echo "[api] waiting for mysql..."
 i=0
 while [ "$i" -lt 60 ]; do
   if php -r "
@@ -41,4 +32,5 @@ done
 php /docker/php/migrate-dev-schema.php || true
 php /docker/php/seed-dev-admin.php || true
 
+echo "[api] listening on :8080"
 exec php -S 0.0.0.0:8080 -t /var/www/public /docker/php/router-dev.php

docker/php/migrate-dev-schema.php

@@ -1,6 +1,8 @@
 <?php
 declare(strict_types=1);
 
+require dirname(__DIR__, 2) . '/backend-web/scripts/schema-migrate-lib.php';
+
 $host = getenv('SOON_DB_HOST') ?: 'mysql';
 $port = (int)(getenv('SOON_DB_PORT') ?: 3306);
 $user = getenv('SOON_DB_USER') ?: 'soondesign';
@@ -14,128 +16,8 @@ try {
         $pass,
         [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
     );
+    soon_schema_migrate($pdo, 'migrate-dev-schema');
 } catch (Throwable $e) {
     fwrite(STDERR, 'migrate-dev-schema: ' . $e->getMessage() . PHP_EOL);
     exit(1);
 }
-
-function columnExists(PDO $pdo, string $table, string $column): bool
-{
-    $stmt = $pdo->prepare(
-        'SELECT COUNT(*) FROM information_schema.COLUMNS '
-        . 'WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = :t AND COLUMN_NAME = :c'
-    );
-    $stmt->execute(['t' => $table, 'c' => $column]);
-    return (int)$stmt->fetchColumn() > 0;
-}
-
-$alters = [];
-if (!columnExists($pdo, 'subscriptions', 'source_order_id')) {
-    $alters[] = 'ALTER TABLE subscriptions ADD COLUMN source_order_id BIGINT UNSIGNED DEFAULT NULL AFTER plan_id';
-    $alters[] = 'ALTER TABLE subscriptions ADD KEY source_order (source_order_id)';
-}
-if (!columnExists($pdo, 'pay_orders', 'refund_status')) {
-    $alters[] = "ALTER TABLE pay_orders ADD COLUMN refund_status ENUM('none','pending','approved','rejected') NOT NULL DEFAULT 'none' AFTER status";
-    $alters[] = 'ALTER TABLE pay_orders ADD COLUMN refund_reason TEXT DEFAULT NULL AFTER refund_status';
-    $alters[] = 'ALTER TABLE pay_orders ADD COLUMN refund_note TEXT DEFAULT NULL AFTER refund_reason';
-    $alters[] = 'ALTER TABLE pay_orders ADD COLUMN cancelled_at DATETIME DEFAULT NULL AFTER paid_at';
-    $alters[] = 'ALTER TABLE pay_orders ADD COLUMN refunded_at DATETIME DEFAULT NULL AFTER cancelled_at';
-    $alters[] = 'ALTER TABLE pay_orders ADD KEY refund_status (refund_status)';
-}
-
-if (!columnExists($pdo, 'plans', 'description')) {
-    $alters[] = 'ALTER TABLE plans ADD COLUMN description VARCHAR(255) DEFAULT NULL AFTER name';
-    $alters[] = 'ALTER TABLE plans ADD COLUMN max_files INT UNSIGNED NOT NULL DEFAULT 0 AFTER quota_mb';
-    $alters[] = 'ALTER TABLE plans ADD COLUMN features TEXT DEFAULT NULL AFTER duration_days';
-    $alters[] = 'ALTER TABLE plans ADD COLUMN sort_order INT NOT NULL DEFAULT 0 AFTER features';
-    $alters[] = 'ALTER TABLE plans ADD COLUMN is_recommended TINYINT(1) NOT NULL DEFAULT 0 AFTER sort_order';
-}
-
-if (!columnExists($pdo, 'users', 'admin_level')) {
-    $alters[] = "ALTER TABLE users ADD COLUMN admin_level ENUM('full','ops') DEFAULT NULL AFTER role";
-}
-
-foreach ($alters as $sql) {
-    $pdo->exec($sql);
-    fwrite(STDOUT, "migrate-dev-schema: {$sql}" . PHP_EOL);
-}
-
-if (columnExists($pdo, 'users', 'admin_level')) {
-    $pdo->exec(
-        "UPDATE users SET admin_level = 'full' WHERE role = 'admin' AND (admin_level IS NULL OR admin_level = '')"
-    );
-    fwrite(STDOUT, 'migrate-dev-schema: admin_level backfill for existing admins' . PHP_EOL);
-}
-
-if (columnExists($pdo, 'plans', 'description')) {
-    $legacyCodes = ['pro_monthly' => 'member_monthly', 'pro_yearly' => 'member_yearly'];
-    foreach ($legacyCodes as $oldCode => $newCode) {
-        $stmt = $pdo->prepare('SELECT id FROM plans WHERE code = :c LIMIT 1');
-        $stmt->execute(['c' => $oldCode]);
-        if ($stmt->fetch()) {
-            $conflict = $pdo->prepare('SELECT id FROM plans WHERE code = :c LIMIT 1');
-            $conflict->execute(['c' => $newCode]);
-            if ($conflict->fetch()) {
-                $pdo->prepare('UPDATE plans SET is_active = 0 WHERE code = :c')->execute(['c' => $oldCode]);
-            } else {
-                $pdo->prepare('UPDATE plans SET code = :new WHERE code = :old')->execute(['new' => $newCode, 'old' => $oldCode]);
-            }
-        }
-    }
-
-    $quota = 2048;
-    $maxFiles = 200;
-    $seed = [
-        ['free', '免费版', '免费体验设计与编辑', 0, $quota, $maxFiles, 0,
-            '["设计与编辑工具免费使用"]', 0, 0, 1],
-        ['member_monthly', '月度订阅', '按月灵活使用，随时续订', 1999, $quota, $maxFiles, 30,
-            '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 个月"]', 10, 1, 1],
-        ['member_quarterly', '季度订阅', '连续三个月，更省心', 5299, $quota, $maxFiles, 90,
-            '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 季"]', 15, 0, 1],
-        ['member_yearly', '年度订阅', '全年畅享，性价比更高', 19999, $quota, $maxFiles, 365,
-            '["高清预览","成品打印","云端保存","导出设计文件","订阅周期：1 年"]', 20, 0, 1],
-    ];
-    $upsert = $pdo->prepare(
-        'INSERT INTO plans (code, name, description, price_cents, quota_mb, max_files, duration_days, features, sort_order, is_recommended, is_active) '
-        . 'VALUES (:c, :n, :d, :p, :q, :mf, :dd, :f, :so, :ir, :a) '
-        . 'ON DUPLICATE KEY UPDATE name=VALUES(name), description=VALUES(description), price_cents=VALUES(price_cents), '
-        . 'quota_mb=VALUES(quota_mb), max_files=VALUES(max_files), duration_days=VALUES(duration_days), '
-        . 'sort_order=VALUES(sort_order), is_recommended=VALUES(is_recommended), is_active=VALUES(is_active)'
-    );
-    foreach ($seed as $row) {
-        $upsert->execute([
-            'c' => $row[0], 'n' => $row[1], 'd' => $row[2], 'p' => $row[3], 'q' => $row[4],
-            'mf' => $row[5], 'dd' => $row[6], 'f' => $row[7], 'so' => $row[8], 'ir' => $row[9], 'a' => $row[10],
-        ]);
-    }
-    fwrite(STDOUT, 'migrate-dev-schema: membership plans catalog synced' . PHP_EOL);
-
-    $legacyFeatStmt = $pdo->query(
-        'SELECT code, duration_days FROM plans WHERE features LIKE \'%预览成品效果%\' '
-        . 'OR features LIKE \'%到期后恢复为非会员%\' OR features LIKE \'%会员权益一致%\' '
-        . 'OR name LIKE \'%会员 ·%\''
-    );
-    $featUpd = $pdo->prepare('UPDATE plans SET features = :f WHERE code = :c');
-    $coreFeatures = ['高清预览', '成品打印', '云端保存', '导出设计文件'];
-    foreach ($legacyFeatStmt->fetchAll() as $legacyRow) {
-        $code = (string)$legacyRow['code'];
-        $days = (int)$legacyRow['duration_days'];
-        if ($code === 'free') {
-            $featUpd->execute([
-                'f' => '["设计与编辑工具免费使用"]',
-                'c' => $code,
-            ]);
-            continue;
-        }
-        $lines = $coreFeatures;
-        if ($days > 0) {
-            $period = $days >= 365 ? '1 年' : ($days === 90 ? '1 季' : ($days >= 30 && $days % 30 === 0 ? ((int)($days / 30)) . ' 个月' : $days . ' 天'));
-            $lines[] = '订阅周期：' . $period;
-        }
-        $featUpd->execute([
-            'f' => json_encode($lines, JSON_UNESCAPED_UNICODE),
-            'c' => $code,
-        ]);
-    }
-    fwrite(STDOUT, 'migrate-dev-schema: legacy plan copy refreshed' . PHP_EOL);
-}

docker/sync-config.ps1

@@ -8,7 +8,7 @@ Get-Content $EnvFile -Encoding UTF8 | ForEach-Object {
 }
 $w, $e, $b = $ports.WEB_PORT, $ports.ELECTRON_PORT, $ports.BACKEND_PORT
 
-$deployJs = @"
+$localJs = @"
 window.SOON_DEPLOY_CONFIG = {
   api_v1_base: 'http://localhost:$b/api/v1',
   api_admin_base: 'http://localhost:$b/api/admin',
@@ -44,6 +44,7 @@ return [
     'storage' => [
         'users_dir' => '/var/www/storage/users',
         'models_dir' => '/var/soonModels',
+        'templates_dir' => '/var/www/storage/templates',
     ],
     'limits' => ['free_quota_mb' => 20, 'preview_require_membership' => false],
     'rate_limits' => [
@@ -63,8 +64,11 @@ return [
 $dir = Join-Path $PSScriptRoot 'config'
 New-Item -ItemType Directory -Force -Path $dir | Out-Null
 $enc = [Text.UTF8Encoding]::new($false)
-[IO.File]::WriteAllText((Join-Path $dir 'deploy-config.js'), $deployJs.Trim() + "`n", $enc)
+[IO.File]::WriteAllText((Join-Path $dir 'local.js'), $localJs.Trim() + "`n", $enc)
 [IO.File]::WriteAllText((Join-Path $dir 'local.php'), $localPhp.Trim() + "`n", $enc)
 
-$webDeploy = Join-Path $Root 'frontend-web\assets\deploy-config.js'
-[IO.File]::WriteAllText($webDeploy, $deployJs.Trim() + "`n", $enc)
+$webLocal = Join-Path $Root 'frontend-web\config\local.js'
+New-Item -ItemType Directory -Force -Path (Split-Path $webLocal -Parent) | Out-Null
+[IO.File]::WriteAllText($webLocal, $localJs.Trim() + "`n", $enc)
+
+& (Join-Path $Root 'scripts\write-web-version.ps1') | Out-Null

docs/API-PAGINATION.md

@@ -81,6 +81,7 @@ Authorization: Bearer <admin_token>
 | 路径 | 说明 |
 |------|------|
 | `GET /api/admin/plans` | 套餐配置 |
+| `GET/POST /api/admin/templates`、`PUT/DELETE /api/admin/templates/{id}` | 模板库 CRUD |
 | `GET /api/admin/settings` | 系统键值 |
 | `GET /api/admin/payment/status` | PEM 文件元数据 |
 
@@ -161,9 +162,46 @@ GET /api/v1/pay/orders?page=1&size=8
 | 路径 | 形态 |
 |------|------|
 | `GET /api/v1/plans` | `{ items: [...] }` 全量活跃套餐 |
-| `GET /api/v1/plans/me` | 会员信息 + `recent_orders`（默认 8 条，非翻页） |
+| `GET /api/v1/auth/me` | 当前用户 + 会员摘要（`is_member` / `tier` / `name`） |
+| `GET /api/v1/plans/me` | 完整会员配额信息（云端用量等，按需调用） |
 | `GET /api/v1/settings` | 扁平 key-value 对象，非 `items` 数组 |
-| `GET /api/v1/soon-models` | manifest 内容 |
+| `GET /api/v1/templates` | 首页模板列表（仅 `id/name/type/updated_at`；缩略图按需拉取） |
+| `GET /api/v1/templates/{id}` | 模板 JSON 数据（门户标准读取端点，见下） |
+| `GET /api/v1/templates/{id}/thumb` | 模板缩略图（从 `.soon` 内 `frontDisplayPic` 提取） |
+| `GET /api/v1/templates/{id}/file` | 裸 `.soon` 流（`Cache-Control: max-age=86400`）；门户读缓存首选 |
+| `GET /api/v1/files/{id}/thumb` | 云文件缩略图（需登录；从 `.soon` 内 `frontDisplayPic` 提取） |
+| `GET /api/v1/soon-models` | 兼容别名，同 `GET /api/v1/templates` |
+
+#### `GET /api/v1/templates/{id}`（门户读取模板数据）
+
+与 `GET /api/v1/files/{id}` 对齐，返回 JSON 包装，**非**裸文件流：
+
+```json
+{
+  "ok": true,
+  "data": {
+    "id": 1,
+    "name": "示例模版",
+    "type": 1,
+    "updated_at": "2026-06-09 00:23:29",
+    "json": "{...}"
+  }
+}
+```
+
+- `data.json` 为 **字符串**（与 `files/{id}` 一致），前端 `JSON.parse(data.json)` 后加载画布
+- 公开接口，无需登录
+
+### Web 虚拟 key 前缀（门户设计页）
+
+| 前缀 | 含义 | readJsonFile | 保存 writeFile |
+|------|------|--------------|----------------|
+| `soondesign_file:{id}:v{ver}` | 云端已登记文件 | `GET /files/{id}` | `PUT /files/{id}` |
+| `soondesign_template:{id}` | 云端模板（只读源） | `GET /templates/{id}/file` | `POST /files`（首次保存新建） |
+| `soondesign_session:...` | 本地/临时会话 | sessionStorage | 已登录 `POST /files`；未登录写 session |
+
+- **保存/打开**走 JSON API；**仅**首页「下载」走 `GET /files/{id}/download` 落盘 `.soon`
+- 门户**读缓存**与最近文件本地优先策略见 [`WEB-LOCAL-CACHE.md`](WEB-LOCAL-CACHE.md)；模板首次加载推荐 `GET /templates/{id}/file`（流式 `.soon`，避免 `GET /templates/{id}` 二次包装）
 
 ---
 
@@ -199,3 +237,5 @@ GET /api/v1/pay/orders?page=1&size=8
 | 日期 | 说明 |
 |------|------|
 | 2026-06-08 | 初版：统一 page/size/total；files 兼容 limit/offset；pay/orders 分页 |
+| 2026-06-08 | 新增 GET /templates/{id} JSON 契约；Web 虚拟 key 前缀；/file 标 legacy |
+| 2026-06-08 | 新增 GET /files/{id}/thumb；files list 增 `has_thumb`；模板 /file 长缓存 |

docs/PAYMENT.md

@@ -1,6 +1,19 @@
 # 支付联调
 
-## 密钥文件（Admin → 支付密钥 或 `backend-web/storage/payment/`）
+## Admin 支付配置（推荐）
+
+管理后台 **支付配置** 页可一次性维护：
+
+| 类别 | 项 |
+|------|-----|
+| 站点 | `site.base_url`（HTTPS 外网）、`site.front_base_url` |
+| 前端展示 | `payment.display_channels`（默认 `alipay`；可 `alipay,wechat`） |
+| 支付宝 | `app_id`、沙箱开关、`private_key`、`public_key` |
+| 微信 | `app_id`、`mch_id`、`mch_serial_no`、沙箱标记、`mch_private_key`、`api_v3_key`、`platform_cert` |
+
+保存参数写入 `settings` 表并热加载；密钥上传至 `backend-web/storage/payment/*.pem`。页顶就绪状态可查看缺项。
+
+## 密钥文件（亦可直接放入 `storage/payment/`）
 
 | 文件 | 用途 |
 |------|------|
@@ -10,9 +23,9 @@
 | wechat_api_v3_key.pem | APIv3 密钥（32 字节） |
 | wechat_platform_cert.pem | 微信平台证书 |
 
-## local.php 必填项
+## local.php 默认值
 
-`site.base_url`（HTTPS 外网）、`alipay.app_id`、`wechat.mch_id`、`wechat.mch_serial_no`
+`local.php` / `local.php.example` 可预填上述项；Admin 中保存的值会覆盖同键配置。
 
 ## notify 路径
 

docs/WEB-LOCAL-CACHE.md

@@ -0,0 +1,400 @@
+# Web 端本地缓存与最近文件优化（开发计划 · 细化版）
+
+> 状态：P0～P7 已实施。与 [API-PAGINATION.md](API-PAGINATION.md)「Web 虚拟 key」交叉引用。
+
+---
+
+## 0. 背景与约束
+
+### 0.1 问题（已核实代码）
+
+| 现象 | 根因 | 代码位置 |
+|------|------|----------|
+| `GET /templates/{id}` 20～30s | PHP 二次 `json_encode` + 大响应 + 客户端双次 parse | `TemplateService::fetchPublicJson`；`web.js` ~268 行 |
+| 重复打开仍打源站 | 无 IndexedDB | 全库无 `indexedDB` |
+| 首页最近文件慢 | 每卡 `readJsonFile` 全量 | `index.js` ~381 行 |
+| 保存后不显示 | Web `onCloudWriteDone` 未写 history | `design1/output.js` ~1266；仅 fs 分支 `saveHistory` |
+| session 易超配额 | 大 JSON 写 session/localStorage | `cloud-files.js` `soonPutSoonSession` |
+
+### 0.2 硬约束
+
+- **不改** `.soon` 格式；**保留** base64。
+- **不上 CDN**；靠本机 IDB + 传输路径精简 + L1 元数据。
+- 保存仍 `POST/PUT /files` 传完整 `json`；**仅读**本地优先。
+- 配置：`frontend-web/config/local.js`、`backend-web/config/local.php`。
+
+### 0.3 三层架构
+
+| 层 | 存储 | 内容 | 体积 |
+|----|------|------|------|
+| L1 | `localStorage` `soondesign_recent` | key/name/type/kind/fileId/thumbRef/time | <50KB |
+| L2 | IndexedDB `soondesign_local` | 完整 `.soon` 对象 + thumbs | ≤20 条 blob |
+| L3 | HTTP API | miss / 保存 / 可选元数据对账 | 按需 |
+
+### 0.4 脚本加载顺序（三页统一）
+
+`index.web.html` / `design1.web.html` / `design2.web.html`：
+
+```
+config/local.js → auth → cloud-files.js → soon-local-store.js → soon-recent.js → web.js → 页面逻辑
+```
+
+---
+
+## 1. 数据契约
+
+### 1.1 L1：`soondesign_recent`
+
+```json
+{
+  "version": 1,
+  "items": [
+    {
+      "key": "soondesign_file:12:v3",
+      "name": "我的卡片.soon",
+      "type": 1,
+      "kind": "cloud",
+      "fileId": 12,
+      "thumbRef": "soondesign_file:12:v3",
+      "time": "2026-06-08 14:30:00"
+    }
+  ]
+}
+```
+
+- `thumbRef`：与 L2 `thumbs` 的 cacheKey 相同（非独立字符串前缀）。
+- 上限 **20**；`soonRecentUpsert` 去重后 unshift，截断尾部。
+- **首页以 L1 为展示主数据源**；`GET /files` 仅后台补 `name`/`version`，不默认注入未打开过的云端文件。
+
+### 1.2 L2：IndexedDB `soondesign_local` v1
+
+| Store | keyPath | value |
+|-------|---------|--------|
+| `blobs` | `cacheKey` | `{ json, name, type, source, updatedAt, savedAt, bytes }` |
+| `thumbs` | `cacheKey` | `{ dataUrl, savedAt }` |
+
+**cacheKey**
+
+| 来源 | cacheKey | 失效 |
+|------|----------|------|
+| 云文件 | `soondesign_file:{id}:v{ver}` | PUT 后 version+1 → 新 key；旧 blob 可 `soonLocalRemove` |
+| 模板 | `soondesign_template:{id}` | 见 §1.4 |
+| 会话 | `soondesign_session:...` | 迁入云 key 后 `soonLocalRenameKey` |
+
+**LRU**：`soonLocalEvictLRU(20)` 在每次 `put` 后执行；仅删 blob+thumb，**不删 L1**。
+
+### 1.3 L3：读取端点
+
+| 场景 | 端点 | 禁止 |
+|------|------|------|
+| 模板首次 | `GET /api/v1/templates/{id}/file` | 门户默认不用 `GET /templates/{id}` 包装 |
+| 云文件 miss | `GET /api/v1/files/{id}` | — |
+| thumb 兜底 | `GET /templates/{id}/thumb`；P6 `GET /files/{id}/thumb` | 禁止为 thumb 拉全量 json |
+| 保存 | `POST`/`PUT /files` | 不变 |
+
+### 1.4 模板缓存失效策略（细化）
+
+1. 首页点模板前，`index.js` `openTemplateItem` 写入 `window._soonTemplateMeta = { id, name, type, updated_at }`（列表已有 `updated_at`）。
+2. IDB `blobs` 的 `meta.updatedAt` 存该 `updated_at`。
+3. `readJsonFile` IDB hit 时：若 `_soonTemplateMeta.updated_at` 存在且与 blob.meta.updatedAt 不一致 → 删 blob，`miss` 走网络。
+4. 网络：`/templates/{id}/file` + parse；`soonLocalPut` 带最新 `updatedAt`。
+5. 未经过首页的深链打开：无 meta 比较，信任 IDB（可接受；刷新列表后校正）。
+
+### 1.5 共享工具 `soonExtractThumbFromJson(json)`
+
+- 位置：`soon-local-store.js` 或 `soon-recent.js`。
+- 取 `json.frontDisplayPic`；须 `data:image/` 开头。
+- 超过 **102400** 字节则返回 `''`（不写 thumbs，首页用 type 默认图）。
+- 打开/保存/导入成功后统一调用。
+
+---
+
+## 2. 核心流程
+
+### 2.1 打开（readJsonFile）
+
+```mermaid
+sequenceDiagram
+  participant UI as design_page
+  participant IDB as L2_IDB
+  participant L1 as L1_recent
+  participant API as L3_server
+
+  UI->>IDB: soonLocalGet(cacheKey)
+  alt hit_and_valid
+    IDB-->>UI: json
+  else miss_or_stale
+    UI->>API: GET file_or_files
+    API-->>UI: soon_bytes
+    UI->>IDB: soonLocalPut + PutThumb
+    UI->>L1: soonRecentUpsert
+  end
+  UI->>UI: openFile_loadFromJSON
+```
+
+**补充接入点**（P3）：`doOpenWithJson` 完成画布加载后 `soonRecentUpsert`（模板/云文件/会话均记录，kind 由 key 推断）。
+
+### 2.2 保存（writeFile + onCloudWriteDone）
+
+**模板首次保存**：`soondesign_template:*` 或空 key 时弹窗，默认文件名 `design` + `yyMMddHHmmss` + `.soon`（如 `design260610103010.soon`）；保存成功后 L1 用 cloud/local 条目替换原 template 项（`soonRecentOnCloudSave` + `prevOpenKey`）。
+
+```mermaid
+sequenceDiagram
+  participant UI as save
+  participant IDB as L2
+  participant L1 as L1
+  participant API as server
+
+  UI->>IDB: soonLocalPut当前json
+  UI->>L1: soonRecentUpsert
+  alt cloud_key
+    UI->>API: PUT
+    API-->>UI: new_version
+    UI->>IDB: RenameKey_or_new_put
+    UI->>L1: upsert新key
+  else new_or_template
+    UI->>API: POST
+  end
+```
+
+### 2.3 首页最近文件
+
+```mermaid
+sequenceDiagram
+  participant Index as index
+  participant L1 as L1
+  participant IDB as thumbs
+  participant API as metadata_optional
+
+  Index->>L1: soonRecentList
+  loop each_card
+    Index->>IDB: soonLocalGetThumb(key)
+    alt no_thumb
+      Index->>Index: soonAsset默认图或thumb_URL
+    end
+  end
+  opt logged_in
+    Index->>API: listCloudFiles元数据
+    Index->>L1: 仅补name/version不增项
+  end
+```
+
+### 2.4 删除卡片
+
+| 操作 | L1 | L2 | 服务器 |
+|------|----|----|--------|
+| 删本地项 | `soonRecentRemove` | `soonLocalRemove` | — |
+| 删云文件 | `soonRecentRemove` | `soonLocalRemove` | `DELETE /files/{id}` |
+| 旧 `removeLocalHistoryPath` | 改为调上述 API | 同上 | — |
+
+---
+
+## 3. 分阶段任务（可独立验收）
+
+### Phase 0：契约文档 — 已完成
+
+- [x] 本文档
+- [x] `API-PAGINATION.md` 链接与 `/file` 推荐说明
+
+---
+
+### Phase 1：IndexedDB 模块（1.5h）
+
+**新建** [`frontend-web/js/common/soon-local-store.js`](frontend-web/js/common/soon-local-store.js)
+
+| 任务 ID | 任务 | 细节 |
+|---------|------|------|
+| P1.1 | `soonLocalOpen` | `indexedDB.open('soondesign_local', 1)`；`onupgradeneeded` 建 `blobs`/`thumbs` |
+| P1.2 | `soonLocalGet/Put` | `json` 存对象；`bytes` 估算 `JSON.stringify` 长度 |
+| P1.3 | `soonLocalPutThumb/GetThumb` | thumbs store |
+| P1.4 | `soonLocalRemove` | 同时删 blobs+thumbs |
+| P1.5 | `soonLocalRenameKey` | 读旧→写新→删旧（session→cloud） |
+| P1.6 | `soonLocalEvictLRU` | 按 `savedAt` 升序删至 ≤20 |
+| P1.7 | `soonExtractThumbFromJson` | §1.5 |
+| P1.8 | 降级 | `indexedDB` 不可用 → 所有 get 返回 null，put 静默失败 |
+| P1.9 | HTML 引入 | 三页在 `web.js` 前引入 |
+
+**验收**
+
+- [ ] DevTools Application → IDB 可见 stores
+- [ ] put/get 往返；第 21 条触发 evict
+- [ ] 隐私模式不抛未捕获异常
+
+---
+
+### Phase 2：web.js 读写穿透（2h）
+
+**改** [`frontend-web/js/platform/web.js`](frontend-web/js/platform/web.js)
+
+| 任务 ID | 任务 | 细节 |
+|---------|------|------|
+| P2.1 | `resolveCacheKey(key)` | 模板/云/ session 统一；云用完整 `soondesign_file:id:vN` |
+| P2.2 | read 模板 stale | §1.4；miss 走 `GET .../templates/{id}/file` + `text()` + `JSON.parse` |
+| P2.3 | read 云文件 | IDB miss → 现有 `authedFetch files/{id}`；成功后 put |
+| P2.4 | read session | IDB → sessionStorage 兜底（过渡期） |
+| P2.5 | read 后写 thumb | `soonExtractThumbFromJson` + `soonLocalPutThumb` |
+| P2.6 | writeFile 成功 | `soonLocalPut`；云 POST/PUT 成功后若 key 变化 `soonLocalRenameKey` |
+| P2.7 | write 未登录 | session key + IDB 双写；**停止** `localStorage.setItem(sessionKey, 大JSON)` |
+
+**验收**
+
+- [ ] 模板首次：Network 仅 `/templates/{id}/file`；二次 0 请求
+- [ ] 云文件二次打开无 `GET /files/{id}`
+- [ ] PUT 后 `openAs.name` 与新 version key 一致且 IDB 可命中
+
+---
+
+### Phase 3：L1 最近列表 + 保存/打开写 L1（2h）
+
+**新建** [`frontend-web/js/common/soon-recent.js`](frontend-web/js/common/soon-recent.js)
+
+| 任务 ID | 任务 | 细节 |
+|---------|------|------|
+| P3.1 | `soonRecentUpsert` | 按 `key` 去重；字段 §1.1；`getDate()` 时间格式与现 `saveHistory` 一致 |
+| P3.2 | `soonRecentList/Remove` | — |
+| P3.3 | `soonRecentKindFromKey` | `cloud`/`template`/`local` |
+| P3.4 | `soonRecentMigrateFromHistory` | 读 `soondesign_history`；`path`→`key`；无 thumb；**仅执行一次**（`soondesign_recent_migrated` 标记） |
+| P3.5 | `onCloudWriteDone` | design1/2 `output.js`：upsert（`res.fileKey`,`res.name`, soonType） |
+| P3.6 | `saveHistory` | Web：`soonRecentUpsert`；Electron fs 路径保留 |
+| P3.7 | `cloud-files` | `soonOpenSoonJsonLocally`、import 成功 upsert |
+| P3.8 | `openFile` 加载成功 | design1 `doOpenWithJson` 末尾；design2 `saveInitialState` 末尾 upsert |
+| P3.9 | `index` 开模板 | `openTemplateItem` 设置 `_soonTemplateMeta`（§1.4） |
+
+**验收**
+
+- [ ] 云端 Ctrl+S 后回首页立即见卡片
+- [ ] 打开模板/云文件后 L1 有对应项
+- [ ] 旧 history 用户升级后 L1 有条目（可无 thumb）
+
+---
+
+### Phase 4：首页 loadHistory 改造（1.5h）
+
+**改** [`frontend-web/js/index.js`](frontend-web/js/index.js)
+
+| 任务 ID | 任务 | 细节 |
+|---------|------|------|
+| P4.1 | 数据源 | `soonRecentList()` 为主；启动时 `soonRecentMigrateFromHistory` |
+| P4.2 | 删除 merge 云端追加 | 移除 `mergeRecentItems` 中「云端未见过则 push」逻辑；改为 `enrichFromCloud(items, cloudMeta)` 只补 name/version |
+| P4.3 | 渲染 thumb | `soonLocalGetThumb(item.key)` → fallback `soonAsset(bg_1/2)`；模板项可用 `/thumb` URL（`updated_at` 作 `?v=`） |
+| P4.4 | 删除 readJsonFile 循环 | 移除 ~381 行；**删除** `fileExists` 灰显逻辑（改为始终可点；打开时 miss 再拉+toast） |
+| P4.5 | 删除 | `removeLocalHistoryPath` → `soonRecentRemove` + `soonLocalRemove` |
+| P4.6 | 刷新 | `pageshow`/`visibilitychange` 调 `loadHistory`（60s 节流 `_recentLoadedAt`） |
+| P4.7 | 分页 | 保留 `fileListState` 对 L1 items 分页 |
+
+**验收**
+
+- [ ] 首页 Network：0× 全量 `files/{id}` / `templates/{id}`
+- [ ] 12 卡仅 thumb 图或 0 额外请求（IDB 命中）
+- [ ] 从设计页返回可见新保存项
+
+---
+
+### Phase 5：session 迁移与清理（1h）
+
+| 任务 ID | 任务 | 细节 |
+|---------|------|------|
+| P5.1 | `soonPutSoonSession` | 正文 IDB；sessionStorage 仅存 `{key}` 标记或短指针 |
+| P5.2 | `readJsonFile` session | 优先 IDB |
+| P5.3 | `soonTryConsumeCloudImport` | 成功：`soonLocalRenameKey` + `soonRecentUpsert` + 删 session |
+| P5.4 | 清理 | 移除 `cloud-files`/`index` 对大 JSON 的 localStorage 写入 |
+| P5.5 | `index` 删卡 | 清 sessionStorage 旧 key（保留现有 769 行逻辑并接 IDB） |
+
+**验收**
+
+- [ ] 本地 .soon → 编辑 → 保存 → key 为 `soondesign_file:*`
+- [ ] sessionStorage 无 >1MB 字符串
+
+---
+
+### Phase 6：后端轻量增强（可选，1h）
+
+| 任务 ID | 文件 | 细节 |
+|---------|------|------|
+| P6.1 | `TemplateService::outputFile` | `Cache-Control: public, max-age=86400, must-revalidate` |
+| P6.2 | `FileController` + 路由 | `GET /api/v1/files/{id}/thumb` |
+| P6.3 | `FileService` | 上传/更新时 `extractThumb` 入 DB（可复用 `TemplateService` 逻辑）；`list` 增 `has_thumb` |
+| P6.4 | `docs/API-PAGINATION.md` | 登记 thumb 端点 |
+
+**验收**
+
+- [ ] `curl -I .../templates/1/file` 含 `max-age=86400`
+- [ ] 云 thumb 返回 `image/jpeg`
+
+---
+
+### Phase 7：全链路验收（0.5h）
+
+| # | 场景 | Network | UI |
+|---|------|---------|-----|
+| 1 | 首次开模板 | 1× `/templates/{id}/file` | 画布 OK |
+| 2 | 再次开同模板 | 0 全量 | <1s |
+| 3 | 模板改 updated_at 后再开 | 1× `/file` | 新内容 |
+| 4 | 保存新文件（登录） | POST | 回首页有卡 |
+| 5 | 再次开云文件 | 0 全量 | PUT 可保存 |
+| 6 | 首页 12 最近 | 0 全量 json | thumb OK |
+| 7 | 未登录保存 | 无 API | L1+IDB |
+| 8 | 删云文件卡 | DELETE | L1+IDB 清除 |
+| 9 | IDB 满 20 再开第 21 | 1× 网络 | 最旧 blob 淘汰 |
+| 10 | 模板列表 | 1× `/templates` 元数据 | 不变 |
+
+**部署**：前端 P1～P5 同批；强刷 `soon-local-store.js`/`soon-recent.js`/`web.js`/`index.js`；P6 可稍后。
+
+---
+
+## 4. 改动文件清单
+
+| 阶段 | 文件 |
+|------|------|
+| P1 | `soon-local-store.js`；`pages/index|design1|design2.web.html` |
+| P2 | `platform/web.js` |
+| P3 | `soon-recent.js`；`design1/2/output.js`；`cloud-files.js`；`index.js`（meta） |
+| P4 | `index.js` |
+| P5 | `cloud-files.js`；`web.js` |
+| P6 | `TemplateService.php`；`FileController.php`；`FileService.php`；`public/index.php`；`API-PAGINATION.md` |
+
+**不改动**：`.soon` schema；`design*-back.js`；Electron（后续可选对齐）。
+
+---
+
+## 5. 依赖关系
+
+```mermaid
+flowchart TD
+  P0[P0_done]
+  P1[P1_IDB]
+  P2[P2_web_bridge]
+  P3[P3_recent_L1]
+  P4[P4_index]
+  P5[P5_session]
+  P6[P6_backend_opt]
+  P7[P7_QA]
+
+  P0 --> P1 --> P2 --> P3 --> P4 --> P5 --> P7
+  P2 --> P6 --> P7
+```
+
+**顺序**：P1 → P2 → P3 → P4 → P5 → P7；P6 与 P3/P4 并行。
+
+---
+
+## 6. 风险与缓解
+
+| 风险 | 缓解 |
+|------|------|
+| IDB 配额 | LRU 20；thumb ≤100KB；evict 失败 toast |
+| 多设备 | 云 version 为准；409 提示刷新 |
+| 模板 stale 漏检 | 首页列表带 `updated_at`；§1.4 |
+| PUT 后双 version 缓存 | `onCloudWriteDone` rename + 删旧 key |
+| 隐私模式 | 降级 session+网络，与现网一致 |
+| 旧用户无 recent | `soonRecentMigrateFromHistory` 一次 |
+
+---
+
+## 7. 不在 scope
+
+- CDN；`.soon` 剥离 base64；Electron IDB；CRDT 离线合并。
+
+---
+
+**确认后**按 P1→P7 实施；每阶段勾选任务 ID 验收后再进入下一阶段。

docs/nginx-baota-design.cardsoon.com.conf

@@ -0,0 +1,91 @@
+server
+{
+    listen 80;
+    listen 443 ssl;
+    listen 443 quic;
+    http2 on;
+    server_name design.cardsoon.com;
+    index pages/index.web.html index.php index.html index.htm default.php default.htm default.html;
+    root /www/wwwroot/design.cardsoon.com;
+
+    #CERT-APPLY-CHECK--START
+    # 用于SSL证书申请时的文件验证相关配置 -- 请勿删除
+    include /www/server/panel/vhost/nginx/well-known/design.cardsoon.com.conf;
+    #CERT-APPLY-CHECK--END
+    include /www/server/panel/vhost/nginx/extension/design.cardsoon.com/*.conf;
+
+    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
+    #error_page 404/404.html;
+    ssl_certificate    /www/server/panel/vhost/cert/design.cardsoon.com/fullchain.pem;
+    ssl_certificate_key    /www/server/panel/vhost/cert/design.cardsoon.com/privkey.pem;
+    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
+    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
+    ssl_prefer_server_ciphers on;
+    ssl_session_tickets on;
+    ssl_session_cache shared:SSL:10m;
+    ssl_session_timeout 10m;
+    add_header Strict-Transport-Security "max-age=31536000";
+    add_header Alt-Svc 'quic=":443"; h3=":443"; h3-29=":443"; h3-27=":443";h3-25=":443"; h3-T050=":443"; h3-Q050=":443";h3-Q049=":443";h3-Q048=":443"; h3-Q046=":443"; h3-Q043=":443"';
+    error_page 497  https://$host$request_uri;
+    #SSL-END
+
+    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
+    error_page 404 /404.html;
+    #error_page 502 /502.html;
+    #ERROR-PAGE-END
+
+    #PHP-INFO-START  PHP引用配置，可以注释或修改
+    include enable-php-00.conf;
+    #PHP-INFO-END
+
+    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
+    include /www/server/panel/vhost/rewrite/design.cardsoon.com.conf;
+    #REWRITE-END
+
+    rewrite ^/$ /pages/index.web.html redirect;
+    rewrite ^/pages/?$ /pages/index.web.html redirect;
+
+    location = /config/version.js {
+        add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
+        add_header Pragma "no-cache" always;
+        add_header Expires "0" always;
+    }
+
+    location ~* \.html$ {
+        add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
+        add_header Pragma "no-cache" always;
+        add_header Expires "0" always;
+    }
+
+    location ~* \.(js|css)$ {
+        add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
+        add_header Pragma "no-cache" always;
+        add_header Expires "0" always;
+    }
+
+    #禁止访问的文件或目录
+    location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)
+    {
+        return 404;
+    }
+
+    #一键申请SSL证书验证目录相关设置
+    location ~ \.well-known{
+        allow all;
+    }
+
+    #禁止在证书验证目录放入敏感文件
+    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
+        return 403;
+    }
+
+    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|webp|ico|svg)$
+    {
+        expires      30d;
+        error_log /dev/null;
+        access_log /dev/null;
+    }
+
+    access_log  /www/wwwlogs/design.cardsoon.com.log;
+    error_log  /www/wwwlogs/design.cardsoon.com.error.log;
+}

frontend-electron/assets/css/design.css

@@ -325,12 +325,19 @@ textarea:hover{
 }
 
 .transparent-button{
-    display: inline-block;
-    height: 19px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 40px;
+    height: 24px;
+    padding: 0 6px;
     border: #646E76 solid 1px;
-    position: relative;
-    bottom: 2px;
-    padding: 3px;
+    font-size: 12px;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    vertical-align: middle;
 }
 .transparent-button:hover{
     background-color: #646E76;

frontend-electron/js/design1/core.js

@@ -1751,7 +1751,7 @@ function initCanvasEvents() {
             const ctx = currentCanvas.getContext();
             let bgObj = (currentCanvas === canvas1) ? background_image1 : background_image2;
 
-            if (bgObj) {
+            if (bgObj && !window._soonSkipDesign1CdMask) {
                 const width = currentCanvas.width;
                 const height = currentCanvas.height;
 
@@ -1795,7 +1795,7 @@ function initCanvasEvents() {
                 ctx.arc(cx, cy, r_inner, 0, Math.PI * 2, false);
 
                 ctx.closePath();
-                ctx.fillStyle = "rgba(0, 0, 0, 0.9)"; // 90% 遮罩
+                ctx.fillStyle = '#31373D';
                 ctx.fill();
                 ctx.restore();
             }

frontend-electron/js/design1/output.js

@@ -51,6 +51,118 @@ async function saveImageAsPNG(buffer) {
     }
 }
 
+function soonDesign1GetHoleDiameterMm(canvas) {
+    var hole = 24;
+    if (canvas === window.canvas1 && typeof window.bg_version !== 'undefined' && window.bg_version === 2) {
+        hole = 42;
+    }
+    return hole;
+}
+
+function soonDesign1ApplyDiscAlpha(tctx, w, h, holeDiameterMm) {
+    var cx = w / 2;
+    var cy = h / 2;
+    var rOuter = w / 2;
+    var rInner = rOuter * (holeDiameterMm / 120);
+    tctx.save();
+    tctx.globalCompositeOperation = 'destination-in';
+    tctx.fillStyle = '#fff';
+    tctx.beginPath();
+    tctx.arc(cx, cy, rOuter, 0, Math.PI * 2);
+    tctx.moveTo(cx + rInner, cy);
+    tctx.arc(cx, cy, rInner, 0, Math.PI * 2, true);
+    tctx.fill('evenodd');
+    tctx.restore();
+}
+
+function soonDesign1CaptureCanvasRect(canvas, outW, outH, format, quality, clipDisc) {
+    var bg = window.background_image1 || window.background_image;
+    if (!canvas || !bg) return '';
+    var srcEl = canvas.lowerCanvasEl;
+    if (!srcEl || !srcEl.getContext) return '';
+    var sx = bg.scaleX == null ? 1 : bg.scaleX;
+    var sy = bg.scaleY == null ? 1 : bg.scaleY;
+    var sw = bg.width * sx;
+    var sh = bg.height * sy;
+    var retina = (typeof canvas.getRetinaScaling === 'function') ? canvas.getRetinaScaling() : 1;
+    outW = outW || Math.round(sw);
+    outH = outH || Math.round(sh);
+    var tmp = document.createElement('canvas');
+    tmp.width = outW;
+    tmp.height = outH;
+    var tctx = tmp.getContext('2d');
+    tctx.drawImage(
+        srcEl,
+        bg.left * retina, bg.top * retina, sw * retina, sh * retina,
+        0, 0, outW, outH
+    );
+    if (clipDisc && format !== 'jpeg') {
+        soonDesign1ApplyDiscAlpha(tctx, outW, outH, soonDesign1GetHoleDiameterMm(canvas));
+    }
+    if (format === 'jpeg') return tmp.toDataURL('image/jpeg', quality == null ? 0.75 : quality);
+    return tmp.toDataURL('image/png');
+}
+
+function soonDesign1CaptureDiscPng(canvas, outW, outH) {
+    window._soonSkipDesign1CdMask = true;
+    try {
+        if (canvas.discardActiveObject) canvas.discardActiveObject();
+        canvas.renderAll();
+        return soonDesign1CaptureCanvasRect(canvas, outW, outH, 'png', null, true);
+    } finally {
+        window._soonSkipDesign1CdMask = false;
+        canvas.renderAll();
+    }
+}
+
+function soonNormalizeSoonJson(j) {
+    if (!j || typeof j !== 'object') return null;
+    if (!j.f || !j.f.objects || !Array.isArray(j.f.objects)) {
+        if (j.objects && Array.isArray(j.objects) && j.objects.length > 0) {
+            j.f = { version: j.version || '4.6.0', objects: j.objects, hoverCursor: j.hoverCursor || 'move' };
+        } else {
+            return null;
+        }
+    }
+    if (j.f.objects.length === 0) return null;
+    if (!j.b || !j.b.objects || !Array.isArray(j.b.objects)) {
+        j.b = { version: '4.6.0', objects: [], hoverCursor: 'move' };
+    }
+    if (!j.fo) j.fo = [];
+    if (!j.bo) j.bo = [];
+    var o0 = j.f.objects[0];
+    if (o0) {
+        if (o0.left == null || isNaN(o0.left)) o0.left = 0;
+        if (o0.top == null || isNaN(o0.top)) o0.top = 0;
+    }
+    return j;
+}
+window.soonNormalizeSoonJson = soonNormalizeSoonJson;
+
+function soonRunWhenDesignBgReady(fn, onTimeout) {
+    if (typeof fn !== 'function') return;
+    function ready() {
+        return !!(window.background_image1 || window.background_image);
+    }
+    if (ready()) {
+        fn();
+        return;
+    }
+    var n = 0;
+    (function tick() {
+        if (ready()) {
+            fn();
+            return;
+        }
+        if (++n > 120) {
+            if (typeof onTimeout === 'function') onTimeout();
+            return;
+        }
+        setTimeout(tick, 50);
+    })();
+}
+window.soonRunWhenDesignBgReady = soonRunWhenDesignBgReady;
+
 // 将 display_func 附加到 window 对象，确保全局可访问
 window.display_func = function display_func(img1, img2, img3) {
     $("#base_control").hide();
@@ -217,13 +329,16 @@ window.display_func = function display_func(img1, img2, img3) {
         left: all_left
     });
 
-    g3.push(img1);
-    let url3 = new fabric.Group(g3).toDataURL({
-        height: 2787,
-        width: 2787,
-        top: all_top,
-        left: all_left
+    var hiddenForPreview = [];
+    canvas1.getObjects().forEach(function (o) {
+        if (o.isGuideLine) {
+            hiddenForPreview.push(o);
+            o.visible = false;
+        }
     });
+    let url3 = soonDesign1CaptureDiscPng(canvas1, 2787, 2787);
+    hiddenForPreview.forEach(function (o) { o.visible = true; });
+    canvas1.renderAll();
     let url5 = new fabric.Group(g5).toDataURL({
         height: 2787,
         width: 2787,
@@ -596,12 +711,16 @@ window.output = function output(callback = null, _save = save) {
                 left: all_left
             });
             g3.push(img1);
-            let url3 = new fabric.Group(g3).toDataURL({
-                height: 2787,
-                width: 2787,
-                top: all_top,
-                left: all_left
+            var hiddenForSave = [];
+            canvas1.getObjects().forEach(function (o) {
+                if (o.isGuideLine) {
+                    hiddenForSave.push(o);
+                    o.visible = false;
+                }
             });
+            let url3 = soonDesign1CaptureDiscPng(canvas1, 2787, 2787);
+            hiddenForSave.forEach(function (o) { o.visible = true; });
+            canvas1.renderAll();
             let url5 = new fabric.Group(g5).toDataURL({
                 height: 2787,
                 width: 2787,
@@ -1079,14 +1198,20 @@ window.regenerateQrCodesAndBarcodes = function regenerateQrCodesAndBarcodes(canv
 window.openFile = function open(file, jAlready) {
     if (!file) return;
     function doOpenWithJson(j) {
-        if (!j || !background_image) return;
-        if (!j.f || !j.f.objects || !Array.isArray(j.f.objects) || j.f.objects.length === 0) return;
-        if (!j.b || !j.b.objects || !Array.isArray(j.b.objects) || j.b.objects.length === 0) {
-            j.b = { version: '4.6.0', objects: [], hoverCursor: 'move' };
+        j = soonNormalizeSoonJson(j);
+        if (!j) {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            return;
+        }
+        function runOpen() {
+        var bgRef = window.background_image1 || window.background_image;
+        if (!bgRef) {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            return;
         }
         openAs.name = file;
-        var left = background_image.left;
-        var top = background_image.top;
+        var left = bgRef.left;
+        var top = bgRef.top;
         var new_left = j.f.objects[0].left;
         var new_top = j.f.objects[0].top;
         for (var i = 0; i < j.f.objects.length; i++) {
@@ -1158,6 +1283,10 @@ window.openFile = function open(file, jAlready) {
             }
         });
         }
+        soonRunWhenDesignBgReady(runOpen, function () {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+        });
+    }
     if (arguments.length >= 2 && jAlready) {
         doOpenWithJson(jAlready);
         openAs.name = file;
@@ -1165,12 +1294,22 @@ window.openFile = function open(file, jAlready) {
     }
     file = resolveDiskPath(file);
     if (window.platformBridge && window.platformBridge.readJsonFile) {
+        if (typeof window.soonShowOpenFileLoading === 'function') window.soonShowOpenFileLoading();
         return window.platformBridge.readJsonFile(file).then(function(j) {
+            if (typeof window.soonHideOpenFileLoading === 'function') window.soonHideOpenFileLoading();
             if (j) {
                 doOpenWithJson(j);
                 openAs.name = file;
+            } else if (typeof window.soonReportOpenLoadError === 'function') {
+                window.soonReportOpenLoadError('模板/文件加载失败');
             }
-        }).catch(function() {});
+        }).catch(function () {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            else if (typeof window.soonHideOpenFileLoading === 'function') window.soonHideOpenFileLoading();
+        }).finally(function () {
+            if (typeof window.soonHideOpenFileLoading === 'function') window.soonHideOpenFileLoading();
+            if (typeof window.soonCleanupLayerMask === 'function') window.soonCleanupLayerMask();
+        });
     }
     try {
         var fs = typeof require !== 'undefined' ? require('fs') : null;
@@ -1260,6 +1399,8 @@ function saveAs(op1, callback) {
 
     let o = { f: j, b: {}, fo: objs1, bo: objs2 };
     let con_o = Object.assign(o, op1);
+    con_o.soonType = 1;
+    if (typeof window.soonApplySavePreview === 'function') window.soonApplySavePreview(con_o, canvas1);
     var dialogApi = (typeof dialog !== 'undefined' && dialog) ? dialog : (window.platformBridge && window.platformBridge.showSaveDialog ? { showSaveDialog: function(opts) { return window.platformBridge.showSaveDialog(opts); } } : null);
     if (!dialogApi) return;
     dialogApi.showSaveDialog({
@@ -1272,7 +1413,6 @@ function saveAs(op1, callback) {
         var pathExt = (typeof window !== 'undefined' && window.path && window.path.extname) ? window.path.extname(fp) : (fp.indexOf('.') >= 0 ? fp.slice(fp.lastIndexOf('.')) : '');
         if (pathExt !== '.soon') fp = (fp || 'design').replace(/\.soon$/i, '') + '.soon';
         var content = JSON.stringify(con_o);
-        con_o.soonType = 1;
         if (window.platformBridge && window.platformBridge.writeFile) {
             await window.platformBridge.writeFile(result.fileHandle || fp, content);
             openAs.name = isWebPortal() ? ('soondesign_session:' + fp) : (result.filePath || fp);
@@ -1326,8 +1466,9 @@ function save(op1, callback) {
 
     let o = { f: j, b: {}, fo: objs1, bo: objs2 };
     let con_o = Object.assign(o, op1);
-    if (openAs.name != "") {
     con_o.soonType = 1;
+    if (typeof window.soonApplySavePreview === 'function') window.soonApplySavePreview(con_o, canvas1);
+    if (openAs.name != "") {
         var content = JSON.stringify(con_o);
         if (isWebPortal() && openAs.name.indexOf('soondesign_session:') === 0) {
             webSessionStore(content, openAs.name);
@@ -1371,7 +1512,6 @@ function save(op1, callback) {
         var pathExt = (typeof window !== 'undefined' && window.path && window.path.extname) ? window.path.extname(fp) : (fp.indexOf('.') >= 0 ? fp.slice(fp.lastIndexOf('.')) : '');
         if (pathExt !== '.soon') fp = (fp || 'design').replace(/\.soon$/i, '') + '.soon';
         var content = JSON.stringify(con_o);
-        con_o.soonType = 1;
         if (window.platformBridge && window.platformBridge.writeFile) {
             await window.platformBridge.writeFile(result.fileHandle || fp, content);
             openAs.name = isWebPortal() ? ('soondesign_session:' + fp) : (result.filePath || fp);

frontend-electron/js/design2/ui.js

@@ -781,17 +781,22 @@ $('#down_obj').click(function () {
 $('#set_bg').click(function () {
     //设置为背景
     let obj = canvas.getActiveObject()
-    let idx = getIndex(canvas.getActiveObject())
+    if (!obj) return;
+    let idx = getIndex(obj)
+    if (idx <= 0) return;
     const scaleX = 1012 / obj.width
     const scaleY = 648 / obj.height
     // 使用缩放后的实际尺寸计算位置，确保与初始背景图片位置一致
+    // 修正：使用当前活动画布的容器宽度，背面应取 canvas2 的容器宽度
+    const containerW = canvas.width || 1012;
+    const containerH = canvas.height || 648;
     const scaledWidth = obj.width * scaleX;
     const scaledHeight = obj.height * scaleY;
     obj.set({
         scaleX: scaleX,
         scaleY: scaleY,
-        left: ($('#canvas1').width() - scaledWidth) / 2,
-        top: ($('#canvas1').height() - scaledHeight) / 2
+        left: (containerW - scaledWidth) / 2,
+        top: (containerH - scaledHeight) / 2
     })
     $('#text_w').val(1012)
     $('#text_h').val(648)
@@ -810,12 +815,31 @@ $('#set_bg').click(function () {
         evented: false
     });
     $("#lock_img").attr("src", soonAsset("lock20.png"))
-    canvas.sendToBack(canvas.getActiveObject())
-    canvas.bringForward(canvas.getActiveObject())
+
+    // 修正：先 remove 当前画布上的旧背景占位图（正面 background_image1 / 背面 background_image2），
+    // 否则 sendToBack 后用户图被压到最底层，仍会被占位图覆盖，肉眼看不到。
+    var oldBg = (canvas === canvas2) ? background_image2 : background_image1;
+    if (oldBg && oldBg !== obj) {
+        canvas.remove(oldBg);
+    }
+
+    canvas.sendToBack(obj);
+    canvas.bringForward(obj);
     canvas.renderAll()
     let objItem = objs.splice(idx - 1, 1)[0]
     objs.unshift(objItem)
 
+    // 同步 background_image 引用：背面时更新 background_image2，正面更新 background_image1
+    if (canvas === canvas2) {
+        background_image2 = obj;
+        window.background_image2 = obj;
+    } else {
+        background_image1 = obj;
+        window.background_image1 = obj;
+    }
+    background_image = obj;
+    window.background_image = obj;
+
     // 确保背景图（索引0）的锁定属性被正确设置
     setTimeout(() => {
         let bgObj = canvas.getObjects()[0];

frontend-web/assets/css/design.css

@@ -13,10 +13,10 @@ img {
     padding: 0 !important;
     height: 100%;
 }
-.col-left{
+body:not(.soon-design-page) .col-left{
     margin-right: 320px;
 }
-.col-right{
+body:not(.soon-design-page) .col-right{
     float: right;
     height: 100%;
     width: 320px;
@@ -250,6 +250,17 @@ textarea:hover{
     border: #646E76 solid 1px;
     color: #ffffff;
     font-size: 16px;
+    min-width: 160px;
+    max-width: 100%;
+    height: 32px;
+    line-height: 32px;
+    padding: 0 28px 0 8px;
+    box-sizing: border-box;
+    vertical-align: middle;
+}
+
+.component-line .ui-select{
+    width: calc(100% - 72px);
 }
 
 
@@ -344,12 +355,19 @@ textarea:hover{
 }
 
 .transparent-button{
-    display: inline-block;
-    height: 19px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 40px;
+    height: 24px;
+    padding: 0 6px;
     border: #646E76 solid 1px;
-    position: relative;
-    bottom: 2px;
-    padding: 3px;
+    font-size: 12px;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    vertical-align: middle;
 }
 .transparent-button:hover{
     background-color: #646E76;
@@ -419,28 +437,58 @@ textarea:hover{
 }
 
 /* ── Web 设计页：design1 / design2 统一视口布局（无页面滚动） ── */
+html:has(body.soon-design-page),
+body.soon-design-page,
+body.soon-design-page .layui-fluid.main,
+body.soon-design-page .layui-row {
+    width: 100%;
+    max-width: 100%;
+}
+
 html:has(body.soon-design-page) {
     height: 100%;
     overflow: hidden;
 }
 
+body.soon-design-page,
+body.soon-design-page *,
+body.soon-design-page *::before,
+body.soon-design-page *::after {
+    box-sizing: border-box;
+}
+
 body.soon-design-page {
     height: 100vh;
     max-height: 100vh;
+    max-width: 100vw;
     overflow: hidden;
     margin: 0;
     padding: 0 !important;
     display: flex;
     flex-direction: column;
-    box-sizing: border-box;
     background-color: #1e1e1e;
     -webkit-font-smoothing: antialiased;
 }
 
+body.soon-design-page .soon-design-portal-bar,
 body.soon-design-page .soon-portal-topbar {
-    position: static;
+    position: static !important;
     width: 100%;
+    max-width: 100%;
+    min-width: 0;
     flex-shrink: 0;
+    overflow: hidden;
+}
+
+body.soon-design-page .soon-portal-topbar__brand {
+    flex-shrink: 0;
+}
+
+body.soon-design-page .soon-portal-topbar__actions {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    justify-content: flex-end;
 }
 
 body.soon-design-page #portal-topbar {
@@ -449,16 +497,18 @@ body.soon-design-page #portal-topbar {
 
 body.soon-design-page .layui-fluid.main {
     flex: 1;
+    min-width: 0;
     min-height: 0;
     height: auto !important;
     overflow: hidden;
     padding: 0 !important;
-    display: flex;
+    display: flex !important;
     flex-direction: column;
 }
 
 body.soon-design-page .layui-row {
     flex: 1;
+    min-width: 0;
     min-height: 0;
     display: flex;
     flex-direction: row-reverse;
@@ -469,7 +519,7 @@ body.soon-design-page .layui-row {
 }
 
 body.soon-design-page .col-left {
-    flex: 1;
+    flex: 1 1 0;
     min-width: 0;
     margin-right: 0;
     float: none;
@@ -501,15 +551,116 @@ body.soon-design-page .tools-bar {
     background-color: #31373d;
 }
 
+body.soon-design-page .tools-bar.left-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+}
+
+body.soon-design-page .tools-bar.left-bar .mode-left {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+}
+
+body.soon-design-page .tools-bar.left-bar .mode-warp {
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-wrap: nowrap;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+body.soon-design-page .tools-bar.left-bar .mode-warp::-webkit-scrollbar {
+    display: none;
+}
+
+body.soon-design-page .tools-bar.left-bar .mode3 {
+    float: none;
+    flex-shrink: 0;
+    line-height: normal;
+    margin-right: 12px;
+    display: flex;
+    align-items: center;
+}
+
 body.soon-design-page #version_change {
     white-space: nowrap;
     flex-shrink: 0;
     min-width: 60px;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
 }
 
+body.soon-design-page .soon-side-tabs {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: stretch;
+    margin-left: 10px;
+    height: 32px;
+    border: 1px solid #646E76;
+    border-radius: 6px;
+    overflow: hidden;
+    background-color: #2a2f35;
+    box-sizing: border-box;
+}
+
+body.soon-design-page .soon-side-tabs .ui-button {
+    margin-left: 0;
+    border: none;
+    border-radius: 0;
+    min-width: 48px;
+    height: 100%;
+    width: auto;
+    padding: 0 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    white-space: nowrap;
+    line-height: 1;
+    box-sizing: border-box;
+    background-color: transparent;
+    color: #e8eaed;
+}
+
+body.soon-design-page .soon-side-tabs .ui-button + .ui-button {
+    border-left: 1px solid #646E76;
+}
+
+body.soon-design-page .soon-side-tabs .ui-button.ui-button-active {
+    background-color: #646E76;
+    color: #fff;
+}
+
+body.soon-design-page .soon-side-tabs .ui-button:not(.ui-button-active):hover {
+    background-color: #4a535c;
+}
+
+body.soon-design-page .soon-side-tabs .ui-button.ui-button-active:hover {
+    background-color: #74808a;
+}
+
+body.soon-design-page .soon-tool-text-btn {
+    flex-shrink: 0;
+    height: 32px;
+    min-width: 52px;
+    margin-left: 10px;
+    padding: 0 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    white-space: nowrap;
+    line-height: 1;
+    box-sizing: border-box;
+}
+
 body.soon-design-page .img-warp {
     flex-shrink: 0;
 }
@@ -559,15 +710,18 @@ body.soon-design-page .container .right {
 
 body.soon-design-page #canvas-div {
     flex: 1;
+    min-width: 0;
     min-height: 0;
     position: relative;
     overflow: hidden;
     width: 100%;
+    max-width: 100%;
     display: flex;
 }
 
 body.soon-design-page .canvas-wrapper {
     width: 100%;
+    max-width: 100%;
     height: 100%;
     overflow: auto;
     position: relative;
@@ -706,10 +860,19 @@ body.soon-design-page .guide-line-drag {
     opacity: 0.9;
 }
 
-body.soon-design-page #source_front,
-body.soon-design-page #source_front2,
-body.soon-design-page #source_back {
+body.soon-design-page.soon-design--type1 #source_front,
+body.soon-design-page.soon-design--type1 #source_front2,
+body.soon-design-page.soon-design--type1 #source_back {
     width: 2787px;
     height: 2787px;
     border-radius: 50%;
 }
+
+body.soon-design-page.soon-design--type2 #source_front,
+body.soon-design-page.soon-design--type2 #source_front2,
+body.soon-design-page.soon-design--type2 #source_back {
+    width: auto;
+    height: auto;
+    max-width: none;
+    border-radius: 0;
+}

frontend-web/assets/css/layer-soon.css

@@ -20,15 +20,48 @@
   color: var(--soon-text) !important;
 }
 
-.layui-layer.soon-layer.soon-layer--pay .layui-layer-content,
-.layui-layer-soon-layer.soon-layer--pay .layui-layer-content {
-  overflow: visible !important;
-  max-height: none !important;
+/* layui 关闭/状态图标为深色 sprite，深底上需反色 */
+.layui-layer.soon-layer .layui-layer-setwin .layui-layer-ico,
+.layui-layer-soon-layer .layui-layer-setwin .layui-layer-ico,
+.layui-layer.soon-layer .layui-layer-ico.layui-layer-close,
+.layui-layer-soon-layer .layui-layer-ico.layui-layer-close {
+  filter: brightness(0) invert(1);
+  opacity: 0.88;
+}
+
+.layui-layer.soon-layer .layui-layer-setwin .layui-layer-ico:hover,
+.layui-layer-soon-layer .layui-layer-setwin .layui-layer-ico:hover {
+  opacity: 1;
+}
+
+.layui-layer.soon-layer.layui-layer-dialog .layui-layer-content .layui-layer-ico,
+.layui-layer-soon-layer.layui-layer-dialog .layui-layer-content .layui-layer-ico {
+  filter: brightness(0) invert(1);
+  opacity: 0.85;
+}
+
+.layui-layer.soon-layer .layui-layer-content font,
+.layui-layer-soon-layer .layui-layer-content font {
+  color: inherit !important;
 }
 
 .layui-layer.soon-layer.soon-layer--pay,
 .layui-layer-soon-layer.soon-layer--pay {
-  max-height: calc(100vh - 32px);
+  width: min(480px, calc(100vw - 32px)) !important;
+  max-width: min(480px, calc(100vw - 32px)) !important;
+  max-height: calc(100vh - 32px) !important;
+  border-radius: var(--soon-radius-lg) !important;
+  overflow: hidden;
+}
+
+.layui-layer.soon-layer.soon-layer--pay .layui-layer-content,
+.layui-layer-soon-layer.soon-layer--pay .layui-layer-content {
+  overflow: visible !important;
+  height: auto !important;
+  max-height: calc(100vh - 32px) !important;
+  padding: 0 !important;
+  box-sizing: border-box !important;
+  background: transparent !important;
 }
 
 .layui-layer.soon-layer.soon-layer--subscribe,
@@ -52,6 +85,145 @@
   right: 14px;
 }
 
+.layui-layer.soon-layer.soon-layer--activate,
+.layui-layer-soon-layer.soon-layer--activate {
+  width: min(480px, calc(100vw - 32px)) !important;
+  max-width: min(480px, calc(100vw - 32px)) !important;
+  max-height: calc(100vh - 32px) !important;
+  border-radius: var(--soon-radius-lg) !important;
+  overflow: hidden;
+}
+
+.layui-layer.soon-layer.soon-layer--activate .layui-layer-content,
+.layui-layer-soon-layer.soon-layer--activate .layui-layer-content {
+  overflow: visible !important;
+  height: auto !important;
+  max-height: calc(100vh - 32px) !important;
+  padding: 0 !important;
+  box-sizing: border-box !important;
+  background: transparent !important;
+}
+
+.layui-layer.soon-layer.soon-layer--activate .layui-layer-setwin,
+.layui-layer-soon-layer.soon-layer--activate .layui-layer-setwin,
+.layui-layer.soon-layer.soon-layer--pay .layui-layer-setwin,
+.layui-layer-soon-layer.soon-layer--pay .layui-layer-setwin,
+.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-setwin,
+.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-setwin {
+  top: 10px;
+  right: 10px;
+  z-index: 20;
+}
+
+/* title:false 时 layui 用 close2，默认 top/right:-28px 会裁到弹窗外；此处统一自定义关闭钮 */
+.layui-layer.soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico,
+.layui-layer-soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico,
+.layui-layer.soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico,
+.layui-layer-soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico,
+.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico,
+.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico,
+body.soon-design-page .layui-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico,
+body.soon-design-page .layui-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico,
+body.soon-design-page .layui-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico {
+  position: relative !important;
+  top: auto !important;
+  right: auto !important;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 30px !important;
+  height: 30px !important;
+  margin: 0 !important;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.94) !important;
+  background-image: none !important;
+  filter: none !important;
+  opacity: 1 !important;
+  font-size: 0 !important;
+  line-height: 1 !important;
+  text-indent: 0 !important;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
+  transition: background 0.15s, box-shadow 0.15s;
+  cursor: pointer;
+}
+
+.layui-layer.soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico:hover,
+.layui-layer-soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico:hover,
+.layui-layer.soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico:hover,
+.layui-layer-soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico:hover,
+.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico:hover,
+.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico:hover,
+body.soon-design-page .layui-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico:hover,
+body.soon-design-page .layui-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico:hover,
+body.soon-design-page .layui-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico:hover {
+  background: #fff !important;
+  opacity: 1 !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
+}
+
+.layui-layer.soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico::before,
+.layui-layer-soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico::before,
+.layui-layer.soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico::before,
+.layui-layer-soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico::before,
+.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico::before,
+.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico::before,
+body.soon-design-page .layui-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico::before,
+body.soon-design-page .layui-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico::before,
+body.soon-design-page .layui-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico::before {
+  content: '×';
+  display: block;
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  background: none !important;
+  transform: none;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1;
+  color: #1a1f24;
+  pointer-events: none;
+}
+
+.layui-layer.soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico::after,
+.layui-layer-soon-layer.soon-layer--activate .layui-layer-setwin a.layui-layer-ico::after,
+.layui-layer.soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico::after,
+.layui-layer-soon-layer.soon-layer--pay .layui-layer-setwin a.layui-layer-ico::after,
+.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico::after,
+.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-setwin a.layui-layer-ico::after {
+  display: none !important;
+  content: none !important;
+}
+
+.layui-layer.soon-layer.soon-layer--login-gate,
+.layui-layer-soon-layer.soon-layer--login-gate {
+  width: min(400px, calc(100vw - 32px)) !important;
+  max-height: calc(100vh - 32px) !important;
+  border-radius: var(--soon-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--soon-shadow);
+}
+
+.layui-layer.soon-layer.soon-layer--login-gate .layui-layer-content,
+.layui-layer-soon-layer.soon-layer--login-gate .layui-layer-content {
+  overflow: visible !important;
+  height: auto !important;
+  max-height: none !important;
+  padding: 0 !important;
+  background: transparent !important;
+}
+
+.layui-layer.soon-layer .layui-layer-content.soon-layer-content--form,
+.layui-layer-soon-layer .layui-layer-content.soon-layer-content--form {
+  display: flex !important;
+  flex-direction: column !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+}
+
 .layui-layer.soon-layer .layui-layer-content.soon-layer-content--scroll,
 .layui-layer-soon-layer .layui-layer-content.soon-layer-content--scroll {
   overflow-x: hidden !important;
@@ -104,13 +276,33 @@
 }
 
 .layui-layer-dialog .layui-layer-content {
-  background-color: var(--soon-bg-panel);
-  color: var(--soon-text);
+  background-color: var(--soon-bg-panel) !important;
+  color: var(--soon-text) !important;
 }
+
 .layui-layer-dialog .layui-layer-title {
-  background-color: var(--soon-bg-elevated);
-  color: var(--soon-text-strong);
-  border-bottom: 1px solid var(--soon-border-subtle);
+  background-color: var(--soon-bg-elevated) !important;
+  color: var(--soon-text-strong) !important;
+  border-bottom: 1px solid var(--soon-border-subtle) !important;
+}
+
+body.soon-design-page .layui-layer .layui-layer-title {
+  background-color: var(--soon-bg-elevated) !important;
+  color: var(--soon-text-strong) !important;
+  border-bottom: 1px solid var(--soon-border-subtle) !important;
+}
+
+body.soon-design-page .layui-layer .layui-layer-content {
+  color: var(--soon-text) !important;
+}
+
+body.soon-design-page .layui-layer:not(.soon-layer--activate):not(.soon-layer--pay):not(.soon-layer--login-gate) .layui-layer-setwin .layui-layer-ico {
+  filter: brightness(0) invert(1);
+  opacity: 0.88;
+}
+
+body.soon-design-page .layui-layer:not(.soon-layer--activate):not(.soon-layer--pay):not(.soon-layer--login-gate) .layui-layer-setwin .layui-layer-ico:hover {
+  opacity: 1;
 }
 
 .layui-layer.soon-toast,
@@ -188,22 +380,3 @@
   color: var(--soon-text-strong) !important;
   border-radius: var(--soon-radius-sm) !important;
 }
-
-.soon-design-portal-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 60px;
-  z-index: 10000;
-  flex-shrink: 0;
-}
-
-body.soon-design-page {
-  padding-top: 60px !important;
-  box-sizing: border-box;
-}
-
-body.soon-design-page .layui-fluid {
-  height: calc(100% - 60px) !important;
-}

frontend-web/assets/css/member.css

@@ -803,433 +803,7 @@
   opacity: 0.85;
 }
 
-/* ── 支付弹窗 ── */
-.soon-pay-sheet {
-  padding: 0;
-  text-align: left;
-  overflow: hidden;
-  border-radius: 14px;
-}
-
-.soon-pay-sheet__head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 22px 26px 20px;
-  background: linear-gradient(160deg, rgba(0, 150, 136, 0.12) 0%, rgba(30, 36, 42, 0.95) 55%);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
-}
-
-.soon-pay-sheet__eyebrow {
-  display: block;
-  margin-bottom: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--soon-accent);
-}
-
-.soon-pay-sheet__title {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--soon-text-strong);
-  line-height: 1.3;
-}
-
-.soon-pay-sheet__order {
-  margin: 8px 0 0;
-  font-size: 11px;
-  font-family: ui-monospace, Consolas, monospace;
-  color: var(--soon-text-muted);
-}
-
-.soon-pay-sheet__head-price {
-  flex-shrink: 0;
-  text-align: right;
-  line-height: 1;
-}
-
-.soon-pay-sheet__currency {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--soon-text-muted);
-  vertical-align: top;
-  margin-right: 2px;
-}
-
-.soon-pay-sheet__amount {
-  font-size: 34px;
-  font-weight: 800;
-  color: var(--soon-text-strong);
-  letter-spacing: -0.03em;
-}
-
-.soon-pay-sheet__body {
-  padding: 22px 26px 0;
-}
-
-.soon-pay-stepper {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  list-style: none;
-  margin: 0 0 24px;
-  padding: 0;
-}
-
-.soon-pay-stepper__item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  width: 72px;
-  flex-shrink: 0;
-}
-
-.soon-pay-stepper__bridge {
-  flex: 1;
-  min-width: 24px;
-  max-width: 56px;
-  height: 2px;
-  margin-top: 15px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 1px;
-  list-style: none;
-}
-
-.soon-pay-stepper__bridge.is-done {
-  background: linear-gradient(90deg, var(--soon-accent), rgba(77, 182, 172, 0.6));
-}
-
-.soon-pay-stepper__dot {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--soon-text-muted);
-  background: rgba(0, 0, 0, 0.35);
-  border: 2px solid rgba(255, 255, 255, 0.12);
-  transition: background 0.2s, border-color 0.2s, color 0.2s;
-}
-
-.soon-pay-stepper__label {
-  font-size: 11px;
-  color: var(--soon-text-muted);
-  text-align: center;
-  white-space: nowrap;
-}
-
-.soon-pay-stepper__item.is-active .soon-pay-stepper__dot {
-  color: #fff;
-  background: var(--soon-accent);
-  border-color: var(--soon-accent);
-  box-shadow: 0 0 0 4px rgba(0, 150, 136, 0.18);
-}
-
-.soon-pay-stepper__item.is-active .soon-pay-stepper__label {
-  color: var(--soon-text-strong);
-  font-weight: 600;
-}
-
-.soon-pay-stepper__item.is-done .soon-pay-stepper__dot {
-  color: #fff;
-  background: rgba(77, 182, 172, 0.35);
-  border-color: var(--soon-accent);
-}
-
-.soon-pay-stepper__item.is-done .soon-pay-stepper__label {
-  color: var(--soon-text);
-}
-
-.soon-pay-section {
-  margin-bottom: 18px;
-}
-
-.soon-pay-section__title {
-  margin: 0 0 12px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--soon-text-muted);
-  letter-spacing: 0.06em;
-}
-
-.soon-pay-channels {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-}
-
-.soon-pay-channel {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 12px 14px;
-  border: 1.5px solid rgba(255, 255, 255, 0.08);
-  border-radius: 12px;
-  cursor: pointer;
-  background: rgba(0, 0, 0, 0.18);
-  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
-  text-align: left;
-  font: inherit;
-  color: inherit;
-}
-
-.soon-pay-channel:hover {
-  border-color: rgba(255, 255, 255, 0.16);
-  background: rgba(0, 0, 0, 0.24);
-}
-
-.soon-pay-channel.is-active {
-  border-color: var(--soon-accent);
-  background: rgba(0, 150, 136, 0.07);
-  box-shadow: inset 0 0 0 1px rgba(0, 150, 136, 0.15);
-}
-
-.soon-pay-channel[data-ch="wechat"].is-active {
-  border-color: #07c160;
-  background: rgba(7, 193, 96, 0.08);
-  box-shadow: inset 0 0 0 1px rgba(7, 193, 96, 0.2);
-}
-
-.soon-pay-channel[data-ch="alipay"].is-active {
-  border-color: #1677ff;
-  background: rgba(22, 119, 255, 0.08);
-  box-shadow: inset 0 0 0 1px rgba(22, 119, 255, 0.2);
-}
-
-.soon-pay-channel__radio {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  flex-shrink: 0;
-  position: relative;
-}
-
-.soon-pay-channel.is-active .soon-pay-channel__radio {
-  border-color: currentColor;
-}
-
-.soon-pay-channel.is-active .soon-pay-channel__radio::after {
-  content: '';
-  position: absolute;
-  inset: 3px;
-  border-radius: 50%;
-  background: currentColor;
-}
-
-.soon-pay-channel[data-ch="wechat"].is-active .soon-pay-channel__radio { color: #07c160; }
-.soon-pay-channel[data-ch="alipay"].is-active .soon-pay-channel__radio { color: #1677ff; }
-
-.soon-pay-channel__icon {
-  width: 34px;
-  height: 34px;
-  border-radius: 9px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  font-weight: 800;
-  color: #fff;
-  flex-shrink: 0;
-}
-
-.soon-pay-channel__icon--wechat { background: linear-gradient(135deg, #06ae56, #07c160); }
-.soon-pay-channel__icon--alipay { background: linear-gradient(135deg, #0958d9, #1677ff); }
-
-.soon-pay-channel__text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.soon-pay-channel__name {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--soon-text-strong);
-}
-
-.soon-pay-channel__hint {
-  font-size: 11px;
-  color: var(--soon-text-muted);
-}
-
-.soon-pay-qr-panel {
-  min-height: 168px;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: center;
-  padding: 4px 0;
-}
-
-.soon-pay-sheet--checkout .soon-pay-qr-panel {
-  min-height: 0;
-}
-
-.soon-pay-sheet--checkout .soon-pay-stepper {
-  margin-bottom: 16px;
-}
-
-.soon-pay-checkout-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 28px 20px;
-  border-radius: 12px;
-  background: rgba(0, 0, 0, 0.22);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  text-align: center;
-}
-
-.soon-pay-checkout-empty__icon {
-  width: 48px;
-  height: 48px;
-  color: rgba(255, 255, 255, 0.22);
-  margin-bottom: 4px;
-}
-
-.soon-pay-checkout-empty__icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.soon-pay-checkout-empty__title {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--soon-text);
-}
-
-.soon-pay-checkout-empty__desc {
-  margin: 0;
-  font-size: 12px;
-  color: var(--soon-text-muted);
-  line-height: 1.55;
-  max-width: 260px;
-}
-
-.soon-pay-checkout-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 24px;
-  border-radius: 12px;
-  background: rgba(0, 0, 0, 0.22);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.soon-pay-checkout-loading p {
-  margin: 0;
-  font-size: 12px;
-  color: var(--soon-text-muted);
-}
-
-.soon-pay-checkout-ready {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  padding: 22px 20px 18px;
-  border-radius: 12px;
-  background: rgba(0, 0, 0, 0.22);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  text-align: center;
-}
-
-.soon-pay-checkout-ready--alipay {
-  padding: 18px 16px 14px;
-  gap: 8px;
-}
-
-.soon-pay-checkout-ready__brand {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 15px;
-  font-weight: 800;
-  color: #fff;
-}
-
-.soon-pay-checkout-ready__brand--wechat { background: linear-gradient(135deg, #06ae56, #07c160); }
-.soon-pay-checkout-ready__brand--alipay { background: linear-gradient(135deg, #0958d9, #1677ff); }
-
-.soon-pay-checkout-ready__title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--soon-text-strong);
-}
-
-.soon-pay-checkout-ready__desc {
-  margin: 0;
-  font-size: 12px;
-  color: var(--soon-text-muted);
-  line-height: 1.5;
-}
-
-.soon-pay-checkout-ready__qr {
-  padding: 10px;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
-  line-height: 0;
-}
-
-.soon-pay-checkout-ready__qr canvas,
-.soon-pay-checkout-ready__qr img {
-  display: block;
-  border-radius: 4px;
-}
-
-.soon-pay-checkout-ready__btn {
-  min-width: 180px;
-  margin-top: 4px;
-}
-
-.soon-pay-sheet__foot {
-  padding: 12px 26px 18px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  margin-top: 4px;
-}
-
-.soon-pay-sheet--checkout .soon-pay-sheet__foot {
-  padding-top: 10px;
-  padding-bottom: 16px;
-}
-
-.soon-pay-status {
-  margin: 0 0 12px;
-  text-align: center;
-  font-size: 12px;
-  color: var(--soon-text-muted);
-}
-
-.soon-pay-status--ok { color: #4db6ac; }
-.soon-pay-status--err { color: var(--soon-danger); }
-
-.soon-pay-sheet__cta {
-  width: 100%;
-}
-
-.soon-pay-sheet__cta--secondary {
-  margin-top: 8px;
-}
+@import url('pay-sheet.css');
 
 .soon-member-page ::-webkit-scrollbar { width: 8px; height: 8px; }
 .soon-member-page ::-webkit-scrollbar-thumb {

frontend-web/assets/css/pay-sheet.css

@@ -0,0 +1,540 @@
+/* 支付确认弹窗（设计页 / 会员页共用） */
+.soon-pay-sheet {
+  padding: 0;
+  text-align: left;
+  overflow: hidden;
+  border-radius: 14px;
+  background: var(--soon-bg-panel);
+  color: var(--soon-text);
+}
+
+.soon-pay-sheet__toolbar {
+  padding: 12px 16px 0;
+}
+
+.soon-pay-sheet__back {
+  font-size: 13px;
+}
+
+.soon-pay-sheet__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 22px 52px 20px 26px;
+  background: linear-gradient(160deg, rgba(0, 150, 136, 0.12) 0%, rgba(30, 36, 42, 0.95) 55%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}
+
+.soon-pay-sheet__head-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.soon-pay-sheet__eyebrow {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--soon-accent);
+}
+
+.soon-pay-sheet__title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--soon-text-strong);
+  line-height: 1.3;
+}
+
+.soon-pay-sheet__order {
+  margin: 8px 0 0;
+  font-size: 11px;
+  font-family: ui-monospace, Consolas, monospace;
+  color: var(--soon-text-muted);
+}
+
+.soon-pay-sheet__head-price {
+  flex-shrink: 0;
+  text-align: right;
+  line-height: 1;
+}
+
+.soon-pay-sheet__currency {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--soon-text-muted);
+  vertical-align: top;
+  margin-right: 2px;
+}
+
+.soon-pay-sheet__amount {
+  font-size: 34px;
+  font-weight: 800;
+  color: var(--soon-text-strong);
+  letter-spacing: -0.03em;
+}
+
+.soon-pay-sheet__body {
+  padding: 22px 26px 0;
+}
+
+.soon-pay-stepper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  list-style: none;
+  margin: 0 0 24px;
+  padding: 0;
+}
+
+.soon-pay-stepper__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 72px;
+  flex-shrink: 0;
+}
+
+.soon-pay-stepper__bridge {
+  flex: 1;
+  min-width: 24px;
+  max-width: 56px;
+  height: 2px;
+  margin-top: 15px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 1px;
+  list-style: none;
+}
+
+.soon-pay-stepper__bridge.is-done {
+  background: linear-gradient(90deg, var(--soon-accent), rgba(77, 182, 172, 0.6));
+}
+
+.soon-pay-stepper__dot {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--soon-text-muted);
+  background: rgba(0, 0, 0, 0.35);
+  border: 2px solid rgba(255, 255, 255, 0.12);
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.soon-pay-stepper__label {
+  font-size: 11px;
+  color: var(--soon-text-muted);
+  text-align: center;
+  white-space: nowrap;
+}
+
+.soon-pay-stepper__item.is-active .soon-pay-stepper__dot {
+  color: #fff;
+  background: var(--soon-accent);
+  border-color: var(--soon-accent);
+  box-shadow: 0 0 0 4px rgba(0, 150, 136, 0.18);
+}
+
+.soon-pay-stepper__item.is-active .soon-pay-stepper__label {
+  color: var(--soon-text-strong);
+  font-weight: 600;
+}
+
+.soon-pay-stepper__item.is-done .soon-pay-stepper__dot {
+  color: #fff;
+  background: rgba(77, 182, 172, 0.35);
+  border-color: var(--soon-accent);
+}
+
+.soon-pay-stepper__item.is-done .soon-pay-stepper__label {
+  color: var(--soon-text);
+}
+
+.soon-pay-section {
+  margin-bottom: 18px;
+}
+
+.soon-pay-section__title {
+  margin: 0 0 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--soon-text-muted);
+  letter-spacing: 0.06em;
+}
+
+.soon-pay-channels {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.soon-pay-channels--single {
+  grid-template-columns: 1fr;
+}
+
+.soon-pay-channel.is-fixed {
+  cursor: default;
+}
+
+.soon-pay-channel.is-fixed:hover {
+  border-color: rgba(255, 255, 255, 0.08);
+  background: rgba(0, 0, 0, 0.18);
+}
+
+.soon-pay-channel.is-fixed.is-active:hover {
+  border-color: var(--soon-accent);
+  background: rgba(0, 150, 136, 0.07);
+}
+
+.soon-pay-channel.is-fixed .soon-pay-channel__radio {
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.85;
+}
+
+.soon-pay-channel.is-fixed.is-active .soon-pay-channel__radio::after {
+  display: none;
+}
+
+.soon-pay-channel {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 14px;
+  border: 1.5px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.18);
+  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  box-sizing: border-box;
+}
+
+.soon-pay-channel:hover {
+  border-color: rgba(255, 255, 255, 0.16);
+  background: rgba(0, 0, 0, 0.24);
+}
+
+.soon-pay-channel.is-active {
+  border-color: var(--soon-accent);
+  background: rgba(0, 150, 136, 0.07);
+  box-shadow: inset 0 0 0 1px rgba(0, 150, 136, 0.15);
+}
+
+.soon-pay-channel[data-ch="wechat"].is-active {
+  border-color: #07c160;
+  background: rgba(7, 193, 96, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(7, 193, 96, 0.2);
+}
+
+.soon-pay-channel[data-ch="alipay"].is-active {
+  border-color: #1677ff;
+  background: rgba(22, 119, 255, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(22, 119, 255, 0.2);
+}
+
+.soon-pay-channel__radio {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  flex-shrink: 0;
+  position: relative;
+}
+
+.soon-pay-channel.is-active .soon-pay-channel__radio {
+  border-color: currentColor;
+}
+
+.soon-pay-channel.is-active .soon-pay-channel__radio::after {
+  content: '';
+  position: absolute;
+  inset: 3px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.soon-pay-channel[data-ch="wechat"].is-active .soon-pay-channel__radio { color: #07c160; }
+.soon-pay-channel[data-ch="alipay"].is-active .soon-pay-channel__radio { color: #1677ff; }
+
+.soon-pay-channel__icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 800;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.soon-pay-channel__icon--wechat { background: linear-gradient(135deg, #06ae56, #07c160); }
+.soon-pay-channel__icon--alipay { background: linear-gradient(135deg, #0958d9, #1677ff); }
+
+.soon-pay-channel__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.soon-pay-channel__name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--soon-text-strong);
+}
+
+.soon-pay-channel__hint {
+  font-size: 11px;
+  color: var(--soon-text-muted);
+}
+
+.soon-pay-qr-panel {
+  min-height: 168px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  padding: 4px 0;
+}
+
+.soon-pay-sheet--checkout .soon-pay-qr-panel {
+  min-height: 0;
+}
+
+.soon-pay-sheet--checkout .soon-pay-stepper {
+  margin-bottom: 16px;
+}
+
+.soon-pay-checkout-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 28px 20px;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.22);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  text-align: center;
+}
+
+.soon-pay-checkout-empty__icon {
+  width: 48px;
+  height: 48px;
+  color: rgba(255, 255, 255, 0.22);
+  margin-bottom: 4px;
+}
+
+.soon-pay-checkout-empty__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.soon-pay-checkout-empty__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--soon-text);
+}
+
+.soon-pay-checkout-empty__desc {
+  margin: 0;
+  font-size: 12px;
+  color: var(--soon-text-muted);
+  line-height: 1.55;
+  max-width: 280px;
+}
+
+.soon-pay-checkout-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 24px;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.22);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.soon-pay-checkout-loading p {
+  margin: 0;
+  font-size: 12px;
+  color: var(--soon-text-muted);
+}
+
+.soon-pay-checkout-ready {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 22px 20px 18px;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.22);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  text-align: center;
+}
+
+.soon-pay-checkout-ready--alipay {
+  padding: 18px 16px 14px;
+  gap: 8px;
+}
+
+.soon-pay-checkout-ready__brand {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  font-weight: 800;
+  color: #fff;
+}
+
+.soon-pay-checkout-ready__brand--wechat { background: linear-gradient(135deg, #06ae56, #07c160); }
+.soon-pay-checkout-ready__brand--alipay { background: linear-gradient(135deg, #0958d9, #1677ff); }
+
+.soon-pay-checkout-ready__title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--soon-text-strong);
+}
+
+.soon-pay-checkout-ready__desc {
+  margin: 0;
+  font-size: 12px;
+  color: var(--soon-text-muted);
+  line-height: 1.5;
+}
+
+.soon-pay-checkout-ready__qr {
+  padding: 10px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
+  line-height: 0;
+}
+
+.soon-pay-checkout-ready__qr canvas,
+.soon-pay-checkout-ready__qr img {
+  display: block;
+  border-radius: 4px;
+}
+
+.soon-pay-checkout-ready__btn {
+  min-width: 180px;
+  margin-top: 4px;
+}
+
+.soon-pay-sheet__foot {
+  padding: 12px 26px 18px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  margin-top: 16px;
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.soon-pay-sheet--checkout .soon-pay-sheet__foot {
+  padding-top: 10px;
+  padding-bottom: 16px;
+}
+
+.soon-pay-status {
+  margin: 0 0 8px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--soon-text-muted);
+  transition: color 0.2s ease, opacity 0.2s ease;
+}
+
+.soon-pay-status--ok { color: #4db6ac; }
+.soon-pay-status--err { color: var(--soon-danger); }
+.soon-pay-status--warn { color: #ffb74d; }
+
+.soon-pay-status.is-checking {
+  color: #4db6ac;
+  opacity: 0.85;
+}
+
+.soon-pay-poll {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: 0 0 10px;
+  font-size: 11px;
+  color: var(--soon-text-muted);
+}
+
+.soon-pay-sheet--polling .soon-pay-poll {
+  display: flex;
+}
+
+.soon-pay-poll__spin {
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.12);
+  border-top-color: #4db6ac;
+  border-radius: 50%;
+  animation: soon-pay-spin 0.75s linear infinite;
+  flex-shrink: 0;
+}
+
+.soon-pay-poll.is-tick .soon-pay-poll__spin {
+  animation-duration: 0.45s;
+}
+
+.soon-pay-sheet--polling .soon-pay-checkout-ready {
+  border-color: rgba(77, 182, 172, 0.28);
+  animation: soon-pay-wait-pulse 2.4s ease-in-out infinite;
+}
+
+.soon-pay-sheet__cta {
+  width: 100%;
+  transition: opacity 0.2s ease;
+}
+
+.soon-pay-sheet__cta--secondary {
+  margin-top: 8px;
+}
+
+.soon-pay-sheet__cta.is-loading {
+  opacity: 0.72;
+  pointer-events: none;
+}
+
+.soon-pay-sheet__cta.is-loading::before {
+  content: '';
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-right: 6px;
+  vertical-align: -2px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: soon-pay-spin 0.75s linear infinite;
+}
+
+@keyframes soon-pay-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes soon-pay-wait-pulse {
+  0%, 100% { box-shadow: inset 0 0 0 0 rgba(77, 182, 172, 0); }
+  50% { box-shadow: inset 0 0 0 1px rgba(77, 182, 172, 0.22); }
+}

frontend-web/assets/css/portal.css

@@ -271,44 +271,12 @@
   animation: soon-fadeInUp 0.4s;
 }
 .soon-member-wrap { max-width: 960px; margin: 0 auto; }
-.soon-template-card {
-  flex: 1 1 0;
-  min-width: 0;
-  max-width: 148px;
-  background: var(--soon-bg-panel);
-  border: 1px solid var(--soon-border-subtle);
-  border-radius: var(--soon-radius-sm);
-  overflow: hidden;
-  cursor: pointer;
-  transition: transform 0.2s var(--soon-ease), border-color 0.2s, box-shadow 0.2s;
-  animation: soon-fadeInUp 0.4s var(--soon-ease) backwards;
-}
 
 .soon-templates-strip .soon-empty--inline {
   flex: 1 1 100%;
   width: 100%;
   min-width: 100%;
 }
-.soon-template-card:hover {
-  border-color: var(--soon-accent);
-  background: var(--soon-bg-elevated);
-}
-.soon-template-card img {
-  width: 100%;
-  height: 100px;
-  object-fit: cover;
-  background: var(--soon-bg-deep);
-}
-.soon-template-card span {
-  display: block;
-  padding: var(--soon-space-sm);
-  font-size: 12px;
-  color: var(--soon-text);
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 
 
 .soon-member-header {
@@ -506,9 +474,12 @@
 }
 
 .soon-home .card-list > .card,
-.soon-home-recent-grid > .card {
+.soon-home-recent-grid > .card,
+.soon-home .soon-templates-strip > .card {
   width: 168px;
   max-width: 168px;
+  flex-shrink: 0;
+  margin: 0;
 }
 
 .soon-section--recent #filePager {
@@ -518,7 +489,8 @@
   border-top: 1px solid var(--soon-border-subtle);
 }
 
-.soon-home .card-list .rect {
+.soon-home .card-list .rect,
+.soon-home .soon-templates-strip .rect {
   width: 168px;
   height: 160px;
   background: var(--soon-bg-panel);
@@ -535,11 +507,13 @@
   overflow: hidden;
   box-sizing: border-box;
 }
-.soon-home .card-list .rect:hover {
+.soon-home .card-list .rect:hover,
+.soon-home .soon-templates-strip .rect:hover {
   border-color: var(--soon-accent);
   background: var(--soon-bg-elevated);
 }
-.soon-home .card-list .rect img {
+.soon-home .card-list .rect img,
+.soon-home .soon-templates-strip .rect img {
   display: block;
   width: 100%;
   height: 135px;
@@ -553,9 +527,12 @@
   border-radius: 4px;
   transition: transform 0.3s;
 }
-.soon-home .card-list .rect1 img { transform: scale(0.8); }
-.soon-home .card-list .rect1:hover img { transform: scale(0.85); }
-.soon-home .card-list .tip {
+.soon-home .card-list .rect1 img,
+.soon-home .soon-templates-strip .rect1 img { transform: scale(0.8); }
+.soon-home .card-list .rect1:hover img,
+.soon-home .soon-templates-strip .rect1:hover img { transform: scale(0.85); }
+.soon-home .card-list .tip,
+.soon-home .soon-templates-strip .tip {
   flex-shrink: 0;
   width: 100%;
   height: 25px;
@@ -571,7 +548,8 @@
   border-top: 1px solid var(--soon-border-subtle);
   background: rgba(0, 0, 0, 0.15);
 }
-.soon-home .card-list .rect:hover .tip { color: var(--soon-text-strong); }
+.soon-home .card-list .rect:hover .tip,
+.soon-home .soon-templates-strip .rect:hover .tip { color: var(--soon-text-strong); }
 .soon-home .card-list .soon-file-card__actions {
   position: absolute;
   top: 6px;
@@ -636,7 +614,8 @@
   max-width: none;
 }
 
-.soon-home .card-list .rect:not(.rect1)::after {
+.soon-home .card-list .rect:not(.rect1)::after,
+.soon-home .soon-templates-strip .rect:not(.rect1)::after {
   content: '';
   position: absolute;
   left: 50%;
@@ -736,18 +715,22 @@
     min-height: 300px;
   }
   .soon-home .card-list > .card,
-  .soon-home-recent-grid > .card {
+  .soon-home-recent-grid > .card,
+  .soon-home .soon-templates-strip > .card {
     width: 148px;
     max-width: 148px;
   }
-  .soon-home .card-list .rect {
+  .soon-home .card-list .rect,
+  .soon-home .soon-templates-strip .rect {
     width: 148px;
     height: 150px;
   }
-  .soon-home .card-list .rect img {
+  .soon-home .card-list .rect img,
+  .soon-home .soon-templates-strip .rect img {
     height: 125px;
   }
-  .soon-home .card-list .rect:not(.rect1)::after {
+  .soon-home .card-list .rect:not(.rect1)::after,
+  .soon-home .soon-templates-strip .rect:not(.rect1)::after {
     transform: translate(-50%, calc(-50% - 12px));
     width: 20px;
     height: 20px;

frontend-web/assets/css/subscribe-gate.css

@@ -1,3 +1,5 @@
+@import url('pay-sheet.css');
+
 .soon-subscribe-modal {
   text-align: left;
   background: var(--soon-bg-panel);
@@ -222,3 +224,242 @@
   opacity: 0.45;
   cursor: not-allowed;
 }
+
+.soon-login-gate {
+  text-align: left;
+  background: var(--soon-bg-panel);
+  color: var(--soon-text);
+  border-radius: var(--soon-radius-lg);
+  overflow: hidden;
+}
+
+.soon-login-gate__head {
+  padding: 22px 48px 16px 22px;
+  border-bottom: 1px solid var(--soon-border-subtle);
+  background: linear-gradient(160deg, rgba(0, 150, 136, 0.12) 0%, transparent 100%);
+}
+
+.soon-login-gate__eyebrow {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: var(--soon-accent);
+}
+
+.soon-login-gate__title {
+  margin: 0;
+  font-size: 19px;
+  font-weight: 700;
+  color: var(--soon-text-strong);
+  line-height: 1.35;
+}
+
+.soon-login-gate__desc {
+  margin: 6px 0 0;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--soon-text-muted);
+}
+
+.soon-login-gate__form {
+  padding: 18px 22px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.soon-login-gate__field.soon-input-wrap {
+  margin-bottom: 0;
+}
+
+.soon-login-gate__input.soon-input {
+  height: 42px;
+  padding: 0 14px 0 40px;
+  background: var(--soon-bg-deep);
+  border: 1px solid var(--soon-border-subtle);
+  border-radius: var(--soon-radius-sm);
+  color: var(--soon-text-strong);
+  font-size: 14px;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.soon-login-gate__input.soon-input::placeholder {
+  color: var(--soon-text-muted);
+}
+
+.soon-login-gate__input.soon-input:focus {
+  border-color: var(--soon-accent);
+  box-shadow: var(--soon-focus-ring);
+}
+
+.soon-login-gate__input.soon-input:-webkit-autofill,
+.soon-login-gate__input.soon-input:-webkit-autofill:hover,
+.soon-login-gate__input.soon-input:-webkit-autofill:focus {
+  -webkit-text-fill-color: var(--soon-text-strong);
+  caret-color: var(--soon-text-strong);
+  transition: background-color 99999s ease-out 0s;
+  -webkit-box-shadow: 0 0 0 1000px var(--soon-bg-deep) inset;
+  box-shadow: 0 0 0 1000px var(--soon-bg-deep) inset;
+  border: 1px solid var(--soon-border-subtle);
+}
+
+.soon-login-gate__error {
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: var(--soon-radius-sm);
+  background: rgba(229, 115, 115, 0.12);
+  border: 1px solid rgba(229, 115, 115, 0.28);
+  color: #fca5a5;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.soon-login-gate__error[hidden] {
+  display: none !important;
+}
+
+.soon-login-gate__submit {
+  margin-top: 2px;
+  height: 42px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.soon-login-gate__links {
+  margin: 0;
+  padding: 0 0 4px;
+  font-size: 13px;
+  text-align: center;
+  color: var(--soon-text-muted);
+}
+
+.soon-login-gate__links a {
+  color: var(--soon-accent-hover);
+  text-decoration: none;
+}
+
+.soon-login-gate__links a:hover {
+  text-decoration: underline;
+}
+
+.soon-login-gate__foot {
+  padding: 12px 22px 18px;
+  border-top: 1px solid var(--soon-border-subtle);
+  background: rgba(0, 0, 0, 0.12);
+}
+
+.soon-login-gate__stay {
+  display: block;
+  width: 100%;
+  padding: 9px 16px;
+  border: 1px solid var(--soon-border-subtle);
+  border-radius: var(--soon-radius-sm);
+  background: transparent;
+  color: var(--soon-text-muted);
+  font-size: 13px;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.soon-login-gate__stay:hover {
+  color: var(--soon-text);
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.soon-activate-price {
+  padding: 16px 20px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.soon-activate-price__label {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.soon-activate-price__hint {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.soon-activate-channels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.soon-activate-load {
+  margin: 12px 0 0;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.55);
+  min-height: 18px;
+}
+
+.soon-activate-modal {
+  border-radius: var(--soon-radius-lg);
+  overflow: hidden;
+}
+
+.soon-activate-modal .soon-subscribe-modal__head {
+  padding: 22px 52px 18px 24px;
+}
+
+.soon-activate-modal .soon-subscribe-modal__body {
+  padding: 18px 24px 20px;
+}
+
+.soon-activate-modal .soon-subscribe-modal__foot {
+  padding: 16px 24px 20px;
+}
+
+.soon-activate-price__value {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--soon-text-strong);
+  letter-spacing: -0.02em;
+}
+
+.soon-activate-channel {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: 10px;
+  border: 1.5px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.18);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--soon-text);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+}
+
+.soon-activate-channel input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.soon-activate-channel.is-active {
+  border-color: #1677ff;
+  background: rgba(22, 119, 255, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(22, 119, 255, 0.18);
+}
+
+.soon-activate-channel.is-active::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #1677ff;
+  flex-shrink: 0;
+}

frontend-web/assets/deploy-config.js

@@ -1,7 +0,0 @@
-window.SOON_DEPLOY_CONFIG = {
-  api_v1_base: 'http://localhost:8102/api/v1',
-  api_admin_base: 'http://localhost:8102/api/admin',
-  front_base_url: 'http://localhost:8100',
-  web_base: 'http://localhost:8100',
-  version: 'local-dev'
-};

frontend-web/assets/deploy-config.json

@@ -1,7 +0,0 @@
-{
-  "api_v1_base": "https://designadmin.cardsoon.com/api/v1",
-  "api_admin_base": "https://designadmin.cardsoon.com/api/admin",
-  "front_base_url": "https://design.cardsoon.com",
-  "web_base": "https://design.cardsoon.com",
-  "version": "1.0.0"
-}

frontend-web/config/local.js.example

@@ -0,0 +1,9 @@
+// 复制为同目录 local.js（全量更新 frontend 时不要覆盖 local.js）
+window.SOON_DEPLOY_CONFIG = {
+  api_v1_base: 'https://designadmin.cardsoon.com/api/v1',
+  api_admin_base: 'https://designadmin.cardsoon.com/api/admin',
+  front_base_url: 'https://design.cardsoon.com',
+  web_base: 'https://design.cardsoon.com',
+  version: '1.0.0'
+};
+

frontend-web/config/version.js

@@ -0,0 +1,4 @@
+(function () {
+  'use strict';
+  window.SOON_APP_VERSION = '0f26163';
+})();

frontend-web/js/common/asset-base.js

@@ -36,6 +36,125 @@
 
   window.soonJs = function (rel) {
     var n = String(rel || '').replace(/^\/+/, '');
-    return window.SOON_JS_BASE + n;
+    var url = window.SOON_JS_BASE + n;
+    return (typeof window.soonWithVersion === 'function') ? window.soonWithVersion(url) : url;
+  };
+
+  /** 等 HTMLImage 解码完成后再 toDataURL / setSrc，避免间歇性空白背景 */
+  window.soonFabricImageWhenReady = function (image, cb, skipEmbed) {
+    if (!image) {
+      if (typeof cb === 'function') cb(null);
+      return;
+    }
+    function finalize() {
+      if (skipEmbed) {
+        if (typeof cb === 'function') cb(image);
+        return;
+      }
+      try {
+        var dataUrl = image.toDataURL();
+        if (dataUrl && dataUrl.length > 500) {
+          image.setSrc(dataUrl, function (img) {
+            if (typeof cb === 'function') cb(img || image);
+          });
+          return;
+        }
+      } catch (e) { /* ignore */ }
+      if (typeof cb === 'function') cb(image);
+    }
+    var el = image.getElement ? image.getElement() : null;
+    if (!el) {
+      finalize();
+      return;
+    }
+    if (el.complete && el.naturalWidth > 0) {
+      finalize();
+      return;
+    }
+    el.onload = function () { finalize(); };
+    el.onerror = function () {
+      if (typeof cb === 'function') cb(null);
+    };
+  };
+
+  window.soonFabricImageFromAsset = function (assetName, onReady, onFail, retryLeft, skipEmbed) {
+    if (typeof fabric === 'undefined' || !fabric.Image) {
+      if (typeof onFail === 'function') onFail();
+      return;
+    }
+    var retries = retryLeft == null ? 2 : retryLeft;
+    var url = window.soonAsset(assetName);
+    fabric.Image.fromURL(url, function (image) {
+      if (!image || !image.width) {
+        if (retries > 0) {
+          setTimeout(function () {
+            window.soonFabricImageFromAsset(assetName, onReady, onFail, retries - 1, skipEmbed);
+          }, 150);
+          return;
+        }
+        if (typeof onFail === 'function') onFail();
+        return;
+      }
+      function deliver(img) {
+        if (img && typeof onReady === 'function') onReady(img);
+        else if (retries > 0) {
+          setTimeout(function () {
+            window.soonFabricImageFromAsset(assetName, onReady, onFail, retries - 1, skipEmbed);
+          }, 150);
+        } else if (typeof onFail === 'function') onFail();
+      }
+      if (skipEmbed) {
+        window.soonFabricImageWhenReady(image, deliver, true);
+        return;
+      }
+      window.soonFabricImageWhenReady(image, deliver);
+    }, null, { crossOrigin: 'anonymous' });
+  };
+
+  window.soonRunWhenCanvasReady = function (selector, fn) {
+    function tryRun() {
+      var el = typeof selector === 'string' ? document.querySelector(selector) : selector;
+      var w = el ? (el.clientWidth || el.width || 0) : 0;
+      if ((!w || w < 50) && window.SOON_DEPLOY_CONFIG) {
+        requestAnimationFrame(function () {
+          requestAnimationFrame(tryRun);
+        });
+        return;
+      }
+      if (typeof fn === 'function') fn(w || 800);
+    }
+    tryRun();
+  };
+
+  var SOON_LOCALE_CODES = { zh: 1, ozh: 1, en: 1 };
+
+  window.soonNormalizeLocaleCode = function (loc) {
+    if (!loc) return 'zh';
+    if (SOON_LOCALE_CODES[loc]) return loc;
+    var s = String(loc);
+    if (s.indexOf('zh') === 0) return s.indexOf('TW') >= 0 ? 'ozh' : 'zh';
+    return 'en';
+  };
+
+  window.soonResolveLocale = function (cb) {
+    if (typeof cb !== 'function') return;
+    var stored;
+    try { stored = localStorage.getItem('lang'); } catch (e) { stored = null; }
+    if (stored && SOON_LOCALE_CODES[stored]) {
+      cb(stored);
+      return;
+    }
+    var bridge = window.platformBridge;
+    if (!bridge || typeof bridge.getLocale !== 'function') {
+      cb('zh');
+      return;
+    }
+    var ret;
+    try { ret = bridge.getLocale(); } catch (e) { cb('zh'); return; }
+    if (ret && typeof ret.then === 'function') {
+      ret.then(function (loc) { cb(window.soonNormalizeLocaleCode(loc)); }).catch(function () { cb('zh'); });
+      return;
+    }
+    cb(window.soonNormalizeLocaleCode(ret));
   };
 })();

frontend-web/js/common/auth-session.js

@@ -85,16 +85,21 @@
       fullUrl = getApiBase() + '/' + String(url).replace(/^\/+/, '');
     }
 
+    var hadSession = !!(token || getRefreshToken());
+
     return fetch(fullUrl, opts).then(function (response) {
       if (response.status !== 401) return response;
+      if (!getRefreshToken()) return response;
       return refreshAccessToken().then(function (newToken) {
         var retryHeaders = Object.assign({}, opts.headers || {});
         retryHeaders['Authorization'] = 'Bearer ' + newToken;
         var retryOpts = Object.assign({}, opts, { headers: retryHeaders });
         return fetch(fullUrl, retryOpts);
       }).catch(function () {
+        if (hadSession) {
           clearSession();
           redirectToLogin();
+        }
         return response;
       });
     });

frontend-web/js/common/member-activate.js

@@ -0,0 +1,265 @@
+(function () {
+  'use strict';
+
+  var GATE_FEATURES = ['预览内导出成品', '预览内打印'];
+  var _gate = { index: null, payIndex: null, plan: null, gateOpts: null };
+
+  var pay = window.SoonMemberPay;
+
+  function esc(s) {
+    if (pay && pay.esc) return pay.esc(s);
+    if (s == null) return '';
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  function toast(msg, type) {
+    if (typeof window.soonToast === 'function') window.soonToast(msg, type);
+  }
+
+  function ensureLayer(cb) {
+    if (typeof layer !== 'undefined' && layer.open) {
+      if (layer.config) layer.config({ skin: 'soon-layer' });
+      cb();
+      return;
+    }
+    if (typeof layui !== 'undefined') {
+      layui.use(['layer'], function () {
+        window.layer = layui.layer;
+        layer.config({ skin: 'soon-layer' });
+        cb();
+      });
+      return;
+    }
+    toast('激活功能暂不可用，请刷新页面后重试', 'warn');
+  }
+
+  function planPriceDisplay(plan) {
+    if (!plan) return '';
+    return plan.price_display || (plan.price_cents / 100).toFixed(2);
+  }
+
+  function shellHtml(actionLabel, plan) {
+    var feat = GATE_FEATURES.map(function (t) {
+      return '<li>' + esc(t) + '</li>';
+    }).join('');
+    var price = plan ? planPriceDisplay(plan) : '—';
+    var channels = (pay && pay.displayChannels) ? pay.displayChannels() : ['alipay'];
+    var chHtml = channels.map(function (ch, i) {
+      var label = ch === 'wechat' ? '微信支付' : '支付宝';
+      return '<label class="soon-activate-channel' + (i === 0 ? ' is-active' : '') + '">' +
+        '<input type="radio" name="activate_channel" value="' + esc(ch) + '"' + (i === 0 ? ' checked' : '') + '>' +
+        esc(label) + '</label>';
+    }).join('');
+    return '<div class="soon-subscribe-modal soon-activate-modal">' +
+      '<header class="soon-subscribe-modal__head">' +
+      '<span class="soon-subscribe-modal__eyebrow">会员激活</span>' +
+      '<h3 class="soon-subscribe-modal__title">激活会员</h3>' +
+      '<p class="soon-subscribe-modal__desc">普通用户可使用全部设计工具；预览内' + esc(actionLabel || '导出或打印') + '需激活会员。</p>' +
+      '<ul class="soon-subscribe-modal__features">' + feat + '</ul>' +
+      '</header>' +
+      '<div class="soon-subscribe-modal__body">' +
+      '<div class="soon-activate-price"><span class="soon-activate-price__label">激活价格</span>' +
+      '<span class="soon-activate-price__value">¥' + esc(price) + '</span>' +
+      '<span class="soon-activate-price__hint">一次激活，永久有效</span></div>' +
+      '<div class="soon-activate-channels" data-role="channels">' + chHtml + '</div>' +
+      '<p class="soon-activate-load" data-role="plan-status"></p>' +
+      '</div>' +
+      '<footer class="soon-subscribe-modal__foot">' +
+      '<button type="button" class="soon-subscribe-modal__stay" data-action="stay">继续设计</button>' +
+      '<button type="button" class="soon-btn soon-subscribe-modal__pay" data-action="go-pay" disabled>立即激活</button>' +
+      '</footer></div>';
+  }
+
+  function closeGate(fireStay) {
+    var idx = _gate.index;
+    var payIdx = _gate.payIndex;
+    var opts = _gate.gateOpts;
+    _gate = { index: null, payIndex: null, plan: null, gateOpts: null };
+    if (typeof layer !== 'undefined') {
+      if (idx != null) layer.close(idx);
+      if (payIdx != null) layer.close(payIdx);
+    }
+    if (typeof window.soonCleanupLayerMask === 'function') window.soonCleanupLayerMask();
+    if (fireStay && opts && typeof opts.onStay === 'function') opts.onStay();
+  }
+
+  function selectedChannel(modal) {
+    var checked = modal.querySelector('input[name="activate_channel"]:checked');
+    return checked ? checked.value : 'alipay';
+  }
+
+  function onPaySuccess() {
+    var gateIdx = _gate.index;
+    var opts = _gate.gateOpts;
+    _gate.payIndex = null;
+    if (typeof layer !== 'undefined' && gateIdx != null) layer.close(gateIdx);
+    _gate = { index: null, payIndex: null, plan: null, gateOpts: null };
+    if (typeof window.soonCleanupLayerMask === 'function') window.soonCleanupLayerMask();
+    toast('恭喜您，会员已激活！', 'success');
+    if (typeof window.soonLoadMembership === 'function') {
+      window.soonLoadMembership(true).then(function () {
+        if (typeof window.soonRefreshPortalIdentity === 'function') window.soonRefreshPortalIdentity();
+        if (opts && typeof opts.onSuccess === 'function') opts.onSuccess();
+      });
+      return;
+    }
+    if (opts && typeof opts.onSuccess === 'function') opts.onSuccess();
+  }
+
+  function updatePayButton(modal) {
+    var btn = modal.querySelector('[data-action="go-pay"]');
+    var plan = _gate.plan;
+    if (!btn) return;
+    if (!plan) {
+      btn.disabled = true;
+      btn.textContent = '立即激活';
+      return;
+    }
+    btn.disabled = false;
+    btn.textContent = '立即激活 ¥' + planPriceDisplay(plan);
+  }
+
+  function loadPlan(modal) {
+    var statusEl = modal.querySelector('[data-role="plan-status"]');
+    if (!pay || !pay.apiGet) {
+      if (statusEl) statusEl.textContent = '激活模块未加载，请刷新页面';
+      updatePayButton(modal);
+      return;
+    }
+    if (statusEl) statusEl.textContent = '正在加载激活方案…';
+    updatePayButton(modal);
+    pay.apiGet('/plans').then(function (ps) {
+      if (!ps.ok) {
+        if (statusEl) statusEl.textContent = ps.message || '方案加载失败';
+        updatePayButton(modal);
+        return;
+      }
+      var items = (ps.data && ps.data.items) || [];
+      var plan = items[0] || null;
+      if (!plan) {
+        if (statusEl) statusEl.textContent = '暂无可用激活方案';
+        updatePayButton(modal);
+        return;
+      }
+      _gate.plan = plan;
+      if (statusEl) statusEl.textContent = '';
+      var priceEl = modal.querySelector('.soon-activate-price__value');
+      if (priceEl) priceEl.textContent = '¥' + planPriceDisplay(plan);
+      updatePayButton(modal);
+    }).catch(function () {
+      if (statusEl) statusEl.textContent = '网络错误，请稍后重试';
+      updatePayButton(modal);
+    });
+  }
+
+  function bindModal(modal) {
+    modal.addEventListener('click', function (e) {
+      var stay = e.target.closest('[data-action="stay"]');
+      if (stay) {
+        e.preventDefault();
+        closeGate(true);
+        return;
+      }
+      var goPay = e.target.closest('[data-action="go-pay"]');
+      if (goPay) {
+        e.preventDefault();
+        if (goPay.disabled || !_gate.plan || !pay || !pay.openPayModal) return;
+        if (_gate.payIndex != null) {
+          try { layer.close(_gate.payIndex); } catch (err) { /* ignore */ }
+          _gate.payIndex = null;
+        }
+        _gate.payIndex = pay.openPayModal({
+          planId: _gate.plan.id,
+          planName: _gate.plan.name,
+          priceDisplay: planPriceDisplay(_gate.plan),
+          channel: selectedChannel(modal),
+          shadeClose: true,
+          onPaid: onPaySuccess,
+          onClose: function () {
+            _gate.payIndex = null;
+            updatePayButton(modal);
+          },
+        });
+      }
+      var ch = e.target.closest('.soon-activate-channel');
+      if (ch) {
+        modal.querySelectorAll('.soon-activate-channel').forEach(function (el) {
+          el.classList.remove('is-active');
+        });
+        ch.classList.add('is-active');
+        var input = ch.querySelector('input[type="radio"]');
+        if (input) input.checked = true;
+      }
+    });
+    loadPlan(modal);
+  }
+
+  function soonShowActivateGate(opts) {
+    opts = opts || {};
+    if (!pay) {
+      toast('激活功能暂不可用，请刷新页面后重试', 'warn');
+      return;
+    }
+    if (pay.loadDisplayChannels) pay.loadDisplayChannels();
+    ensureLayer(function () {
+      if (_gate.index != null) {
+        try { layer.close(_gate.index); } catch (e) { /* ignore */ }
+      }
+      if (_gate.payIndex != null) {
+        try { layer.close(_gate.payIndex); } catch (e) { /* ignore */ }
+      }
+      _gate = { index: null, payIndex: null, plan: null, gateOpts: opts };
+      var width = Math.min(480, window.innerWidth - 32);
+      layer.open({
+        type: 1,
+        skin: 'soon-layer',
+        title: false,
+        closeBtn: 1,
+        fixed: true,
+        offset: 'auto',
+        shade: [0.68, '#000'],
+        shadeClose: true,
+        maxWidth: width,
+        area: [width + 'px', 'auto'],
+        content: shellHtml(opts.reason, null),
+        success: function (layero, index) {
+          var layerEl = layero && layero[0] ? layero[0] : layero;
+          if (layerEl && layerEl.classList) {
+            layerEl.classList.add('soon-layer--activate');
+          }
+          var content = layerEl && layerEl.querySelector ? layerEl.querySelector('.layui-layer-content') : null;
+          if (content) {
+            content.style.padding = '0';
+            content.style.overflow = 'visible';
+          }
+          var modal = layerEl.querySelector('.soon-activate-modal');
+          _gate.index = index;
+          _gate.gateOpts = opts;
+          if (modal) bindModal(modal);
+          requestAnimationFrame(function () {
+            if (typeof layer.style === 'function') layer.style(index);
+          });
+        },
+        end: function () {
+          var payIdx = _gate.payIndex;
+          if (payIdx != null) {
+            try { layer.close(payIdx); } catch (e) { /* ignore */ }
+          }
+          _gate = { index: null, payIndex: null, plan: null, gateOpts: null };
+        },
+      });
+    });
+  }
+
+  window.soonShowActivateGate = soonShowActivateGate;
+
+  if (!window._soonActivateFocusBound) {
+    window._soonActivateFocusBound = true;
+    window.addEventListener('focus', function () {
+      if (typeof window.soonLoadMembership !== 'function') return;
+      window.soonLoadMembership(true).then(function () {
+        if (typeof window.soonRefreshPortalIdentity === 'function') window.soonRefreshPortalIdentity();
+      });
+    });
+  }
+})();

frontend-web/js/common/member-login-gate.js

@@ -0,0 +1,208 @@
+(function () {
+  'use strict';
+
+  var _gate = { index: null, opts: null };
+  var MAIL_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16v12H4z"/><path d="M4 8l8 5 8-5"/></svg>';
+  var LOCK_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="10" rx="1"/><path d="M8 11V8a4 4 0 118 0v3"/></svg>';
+
+  function esc(s) {
+    if (s == null) return '';
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  function toast(msg, type) {
+    if (typeof window.soonToast === 'function') window.soonToast(msg, type);
+  }
+
+  function apiBase() {
+    var cfg = window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base;
+    if (cfg) return String(cfg).replace(/\/+$/, '');
+    if (window.location) return window.location.origin + '/api/v1';
+    return '/api/v1';
+  }
+
+  function ensureLayer(cb) {
+    if (typeof layer !== 'undefined' && layer.open) {
+      if (layer.config) layer.config({ skin: 'soon-layer' });
+      cb();
+      return;
+    }
+    if (typeof layui !== 'undefined') {
+      layui.use(['layer'], function () {
+        window.layer = layui.layer;
+        layer.config({ skin: 'soon-layer' });
+        cb();
+      });
+      return;
+    }
+    toast('登录功能暂不可用，请刷新页面后重试', 'warn');
+  }
+
+  function shellHtml(panel, reason) {
+    var isReg = panel === 'register';
+    var action = esc(reason || '导出或打印');
+    return '<div class="soon-login-gate">' +
+      '<header class="soon-login-gate__head">' +
+      '<span class="soon-login-gate__eyebrow">' + (isReg ? '注册' : '登录') + '</span>' +
+      '<h3 class="soon-login-gate__title">' + (isReg ? '注册后继续' : '登录后继续') + '</h3>' +
+      '<p class="soon-login-gate__desc">' +
+      (isReg ? '注册并登录后即可' + action + '成品。' : '预览内' + action + '成品需先登录账号。') +
+      '</p></header>' +
+      '<form class="soon-login-gate__form" data-role="' + (isReg ? 'register' : 'login') + '-form">' +
+      '<div class="soon-input-wrap soon-login-gate__field">' +
+      '<span class="soon-input-icon" aria-hidden="true">' + MAIL_ICON + '</span>' +
+      '<input type="email" name="email" required class="soon-input soon-login-gate__input" placeholder="邮箱" autocomplete="email">' +
+      '</div>' +
+      '<div class="soon-input-wrap soon-login-gate__field">' +
+      '<span class="soon-input-icon" aria-hidden="true">' + LOCK_ICON + '</span>' +
+      '<input type="password" name="password" required' +
+      (isReg ? ' minlength="8"' : '') +
+      ' class="soon-input soon-login-gate__input" placeholder="' +
+      (isReg ? '密码（至少 8 位）' : '密码') +
+      '" autocomplete="' + (isReg ? 'new-password' : 'current-password') + '">' +
+      '</div>' +
+      '<p class="soon-login-gate__error" data-role="' + (isReg ? 'register' : 'login') + '-error" hidden></p>' +
+      '<button type="submit" class="soon-btn soon-btn--block soon-login-gate__submit">' +
+      (isReg ? '注册并登录' : '登录') +
+      '</button>' +
+      '<p class="soon-login-gate__links">' +
+      (isReg ? '已有账号？<a href="#" data-action="show-login">去登录</a>' : '还没有账号？<a href="#" data-action="show-register">立即注册</a>') +
+      '</p></form>' +
+      '<footer class="soon-login-gate__foot">' +
+      '<button type="button" class="soon-login-gate__stay" data-action="stay">继续设计</button>' +
+      '</footer></div>';
+  }
+
+  function closeGate() {
+    var idx = _gate.index;
+    _gate = { index: null, opts: null };
+    if (idx != null && typeof layer !== 'undefined') {
+      try { layer.close(idx); } catch (e) { /* ignore */ }
+    }
+    if (typeof window.soonCleanupLayerMask === 'function') window.soonCleanupLayerMask();
+  }
+
+  function finishAuthSuccess() {
+    var opts = _gate.opts;
+    closeGate();
+    var chain = typeof window.soonRefreshPortalAuthUi === 'function'
+      ? Promise.resolve(window.soonRefreshPortalAuthUi())
+      : Promise.resolve();
+    return chain.then(function () {
+      if (typeof window.soonReloadRecentFiles === 'function') window.soonReloadRecentFiles();
+      if (opts && typeof opts.onSuccess === 'function') opts.onSuccess();
+    });
+  }
+
+  function storeTokens(data) {
+    if (!data || !data.access_token) return false;
+    localStorage.setItem('soon_access', data.access_token);
+    if (data.refresh_token) localStorage.setItem('soon_refresh', data.refresh_token);
+    return true;
+  }
+
+  function swapPanel(modal, panel) {
+    if (!modal || !modal.parentNode) return;
+    var parent = modal.parentNode;
+    var reason = _gate.opts && _gate.opts.reason;
+    modal.outerHTML = shellHtml(panel, reason);
+    var root = parent.querySelector('.soon-login-gate');
+    if (root) bindModal(root);
+  }
+
+  function bindAuthForm(modal, role, path, failMsg) {
+    var form = modal.querySelector('[data-role="' + role + '-form"]');
+    if (!form) return;
+    form.addEventListener('submit', function (e) {
+      e.preventDefault();
+      var errEl = modal.querySelector('[data-role="' + role + '-error"]');
+      if (errEl) {
+        errEl.hidden = true;
+        errEl.textContent = '';
+      }
+      var email = (form.email && form.email.value || '').trim();
+      var password = form.password ? form.password.value : '';
+      fetch(apiBase() + path, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: email, password: password }),
+      }).then(function (r) { return r.json(); }).then(function (j) {
+        if (!j.ok || !storeTokens(j.data)) {
+          if (errEl) {
+            errEl.textContent = (j && j.message) || failMsg;
+            errEl.hidden = false;
+          }
+          return;
+        }
+        finishAuthSuccess();
+      }).catch(function () {
+        if (errEl) {
+          errEl.textContent = '网络错误，请稍后重试';
+          errEl.hidden = false;
+        }
+      });
+    });
+  }
+
+  function bindModal(modal) {
+    modal.addEventListener('click', function (e) {
+      if (e.target.closest('[data-action="stay"]')) {
+        e.preventDefault();
+        closeGate();
+        return;
+      }
+      if (e.target.closest('[data-action="show-register"]')) {
+        e.preventDefault();
+        swapPanel(modal, 'register');
+        return;
+      }
+      if (e.target.closest('[data-action="show-login"]')) {
+        e.preventDefault();
+        swapPanel(modal, 'login');
+      }
+    });
+    bindAuthForm(modal, 'login', '/auth/login', '登录失败');
+    bindAuthForm(modal, 'register', '/auth/register', '注册失败');
+  }
+
+  function openGate(opts, panel) {
+    opts = opts || {};
+    ensureLayer(function () {
+      if (_gate.index != null) {
+        try { layer.close(_gate.index); } catch (e) { /* ignore */ }
+      }
+      _gate.opts = opts;
+      var width = Math.min(400, window.innerWidth - 32);
+      layer.open({
+        type: 1,
+        skin: 'soon-layer',
+        title: false,
+        closeBtn: 1,
+        shade: [0.62, '#000'],
+        shadeClose: true,
+        area: [width + 'px', 'auto'],
+        offset: 'auto',
+        content: shellHtml(panel, opts.reason),
+        success: function (layero, index) {
+          var layerEl = layero && layero[0] ? layero[0] : layero;
+          if (layerEl && layerEl.classList) layerEl.classList.add('soon-layer--login-gate');
+          var content = layerEl && layerEl.querySelector ? layerEl.querySelector('.layui-layer-content') : null;
+          if (content) {
+            content.style.padding = '0';
+            content.style.overflow = 'visible';
+            content.style.background = 'transparent';
+          }
+          var modal = layerEl.querySelector('.soon-login-gate');
+          _gate.index = index;
+          if (modal) bindModal(modal);
+        },
+        end: function () {
+          _gate = { index: null, opts: null };
+        },
+      });
+    });
+  }
+
+  window.soonShowLoginGate = function (opts) { openGate(opts, 'login'); };
+  window.soonShowRegisterGate = function (opts) { openGate(opts, 'register'); };
+})();

frontend-web/js/common/member-pay-core.js

@@ -2,7 +2,14 @@
   'use strict';
 
   var POLL_TIMEOUT_MS = 5 * 60 * 1000;
-  var PAY_STEP_LABELS = ['选择支付', '扫码付款', '订阅生效'];
+  var PAY_STEP_LABELS = ['选择支付', '扫码付款', '激活生效'];
+  var _displayChannels = ['alipay'];
+  var _settingsPromise = null;
+
+  var CHANNEL_UI = {
+    alipay: { name: '支付宝', hint: '网页支付', icon: '支', iconCls: 'alipay' },
+    wechat: { name: '微信支付', hint: '扫码付款', icon: '微', iconCls: 'wechat' },
+  };
 
   function esc(s) {
     if (s == null) return '';
@@ -70,12 +77,34 @@
     }
   }
 
-  function submitAlipayForm(payForm) {
+  var ALIPAY_WINDOW_NAME = 'soon_alipay_pay';
+
+  function openAlipayPayWindow() {
+    try {
+      var w = window.open('about:blank', ALIPAY_WINDOW_NAME);
+      if (w) {
+        w.document.title = '支付宝收银台';
+        w.document.body.innerHTML =
+          '<p style="font-family:sans-serif;text-align:center;padding:48px 24px;color:#333">正在跳转支付宝…</p>';
+      }
+      return w;
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function submitAlipayForm(payForm, payWindow) {
     if (!payForm || !payForm.gateway || !payForm.params) return false;
     if (!isSafeAlipayGateway(payForm.gateway)) return false;
+    var win = payWindow;
+    if (!win || win.closed) {
+      win = openAlipayPayWindow();
+    }
+    if (!win) return false;
     var form = document.createElement('form');
     form.method = 'POST';
     form.action = payForm.gateway;
+    form.target = ALIPAY_WINDOW_NAME;
     form.acceptCharset = 'UTF-8';
     form.style.display = 'none';
     Object.keys(payForm.params).forEach(function (key) {
@@ -89,9 +118,91 @@
     });
     document.body.appendChild(form);
     form.submit();
+    setTimeout(function () {
+      try {
+        document.body.removeChild(form);
+      } catch (e) { /* ignore */ }
+    }, 0);
     return true;
   }
 
+  function parseDisplayChannels(raw) {
+    if (Array.isArray(raw)) {
+      var list = raw.filter(function (ch) { return ch === 'alipay' || ch === 'wechat'; });
+      return list.length ? list : ['alipay'];
+    }
+    var parts = String(raw || 'alipay').split(/[\s,]+/).filter(Boolean);
+    var out = [];
+    parts.forEach(function (ch) {
+      if ((ch === 'alipay' || ch === 'wechat') && out.indexOf(ch) < 0) out.push(ch);
+    });
+    return out.length ? out : ['alipay'];
+  }
+
+  function loadDisplayChannels() {
+    if (_settingsPromise) return _settingsPromise;
+    _settingsPromise = apiGet('/settings').then(function (j) {
+      if (j.ok && j.data) {
+        if (j.data.payment_display_channels) {
+          _displayChannels = parseDisplayChannels(j.data.payment_display_channels);
+        } else if (j.data['payment.display_channels'] != null) {
+          _displayChannels = parseDisplayChannels(j.data['payment.display_channels']);
+        }
+      }
+      return _displayChannels;
+    }).catch(function () {
+      _displayChannels = ['alipay'];
+      return _displayChannels;
+    });
+    return _settingsPromise;
+  }
+
+  function displayChannels() {
+    return _displayChannels.slice();
+  }
+
+  function defaultChannel(channels) {
+    var list = channels || _displayChannels;
+    return list[0] || 'alipay';
+  }
+
+  function resolveChannel(requested, channels) {
+    var list = channels || _displayChannels;
+    if (requested && list.indexOf(requested) >= 0) return requested;
+    return defaultChannel(list);
+  }
+
+  function channelCardHtml(ch, active, selectable) {
+    var ui = CHANNEL_UI[ch];
+    if (!ui) return '';
+    var cls = 'soon-pay-channel' + (active ? ' is-active' : '') + (selectable ? '' : ' is-fixed');
+    var inner = '<span class="soon-pay-channel__radio" aria-hidden="true"></span>' +
+      '<span class="soon-pay-channel__icon soon-pay-channel__icon--' + ui.iconCls + '">' + ui.icon + '</span>' +
+      '<span class="soon-pay-channel__text"><span class="soon-pay-channel__name">' + ui.name + '</span>' +
+      '<span class="soon-pay-channel__hint">' + ui.hint + '</span></span>';
+    if (selectable) {
+      return '<button type="button" class="' + cls + '" data-ch="' + ch + '">' + inner + '</button>';
+    }
+    return '<div class="' + cls + '" data-ch="' + ch + '">' + inner + '</div>';
+  }
+
+  function payChannelsHtml(activeChannel, channels, opts) {
+    opts = opts || {};
+    channels = channels || _displayChannels;
+    var showChannel = activeChannel || defaultChannel(channels);
+    var selectable = opts.selectable !== false && channels.length > 1;
+    var list = selectable ? channels : [showChannel];
+    var cards = list.map(function (ch) {
+      return channelCardHtml(ch, ch === showChannel, selectable);
+    }).join('');
+    if (!cards) return '';
+    return '<section class="soon-pay-section soon-pay-section--channels' +
+      (selectable ? '' : ' soon-pay-section--channels-fixed') + '" id="payChannels">' +
+      '<h4 class="soon-pay-section__title">支付方式</h4>' +
+      '<div class="soon-pay-channels' + (list.length === 1 ? ' soon-pay-channels--single' : '') + '">' +
+      cards + '</div></section>';
+  }
+
   function payStepLabel(step, channel) {
     if (step === 2 && channel === 'alipay') return '网页支付';
     if (step === 2 && channel === 'wechat') return '扫码付款';
@@ -118,42 +229,50 @@
 
   function updatePayStep(root, step, channel) {
     if (!root) return;
-    var html = payStepperHtml(step, channel || 'wechat');
+    var html = payStepperHtml(step, channel || defaultChannel());
     var old = root.querySelector('#payStepper');
     if (old) old.outerHTML = html;
   }
 
-  function payEmptyStateHtml() {
+  function payEmptyStateHtml(channel) {
+    var ui = CHANNEL_UI[channel] || CHANNEL_UI[defaultChannel()];
     return '<div class="soon-pay-checkout-empty">' +
       '<div class="soon-pay-checkout-empty__icon" aria-hidden="true">' +
       '<svg viewBox="0 0 48 48" fill="none"><rect x="8" y="12" width="32" height="24" rx="4" stroke="currentColor" stroke-width="1.5"/>' +
       '<path d="M8 20h32" stroke="currentColor" stroke-width="1.5"/>' +
       '<circle cx="32" cy="30" r="3" fill="currentColor" opacity="0.5"/></svg></div>' +
-      '<p class="soon-pay-checkout-empty__title">等待生成付款码</p>' +
-      '<p class="soon-pay-checkout-empty__desc">确认支付方式后，将在此显示二维码或跳转链接</p></div>';
+      '<p class="soon-pay-checkout-empty__title">等待生成付款信息</p>' +
+      '<p class="soon-pay-checkout-empty__desc">点击下方按钮，将使用' + esc(ui.name) + '（' + esc(ui.hint) + '）</p></div>';
   }
 
-  function renderPayPayload(data, qrEl, orderNoEl) {
+  function renderPayPayload(data, qrEl, orderNoEl, launchOpts) {
+    launchOpts = launchOpts || {};
     if (orderNoEl && data.order_no) {
       orderNoEl.textContent = '订单号 ' + data.order_no;
       orderNoEl.style.display = '';
     }
     if (data.pay_form && data.pay_form.gateway) {
       if (!isSafeAlipayGateway(data.pay_form.gateway)) return '支付网关无效';
-      sessionStorage.setItem('soon_pay_return', '1');
       var payForm = data.pay_form;
+      var launched = launchOpts.launched === true;
       qrEl.innerHTML =
         '<div class="soon-pay-checkout-ready soon-pay-checkout-ready--alipay">' +
         '<div class="soon-pay-checkout-ready__brand soon-pay-checkout-ready__brand--alipay">支</div>' +
         '<p class="soon-pay-checkout-ready__title">支付宝电脑网站支付</p>' +
-        '<p class="soon-pay-checkout-ready__desc">点击下方按钮跳转至支付宝收银台，支付完成后将自动返回</p>' +
-        '<button type="button" class="soon-btn soon-pay-checkout-ready__btn" id="goAlipay">前往支付宝付款</button></div>';
+        '<p class="soon-pay-checkout-ready__desc">' +
+        (launched
+          ? '支付窗口已打开，请在新窗口完成付款；本页将自动检测支付结果'
+          : '未能自动打开支付窗口，请允许弹窗后点击下方按钮') +
+        '</p>' +
+        '<button type="button" class="soon-btn soon-pay-checkout-ready__btn" id="goAlipay">' +
+        (launched ? '重新打开支付页面' : '打开支付宝付款') +
+        '</button></div>';
       var alipayBtn = qrEl.querySelector('#goAlipay');
       if (alipayBtn) {
         alipayBtn.onclick = function () {
           if (!submitAlipayForm(payForm)) {
             if (typeof window.soonToast === 'function') {
-              window.soonToast('无法跳转支付宝，请检查支付配置', 'warn');
+              window.soonToast('无法打开支付窗口，请允许浏览器弹窗', 'warn');
             }
           }
         };
@@ -175,27 +294,13 @@
     return '未获取到支付信息';
   }
 
-  function monthlyPlan(items) {
-    var found = null;
-    (items || []).forEach(function (p) {
-      if (p.code === 'member_monthly' || p.code === 'pro_monthly') found = p;
-    });
-    return found;
-  }
-
-  function billingSavePercent(items, plan) {
-    var monthly = monthlyPlan(items);
-    if (!monthly || monthly.price_cents <= 0 || !plan || plan.duration_days <= 30) return null;
-    var months = plan.duration_days / 30;
-    var full = monthly.price_cents * months;
-    if (full <= plan.price_cents) return null;
-    return Math.round((1 - plan.price_cents / full) * 100);
-  }
-
   function paySheetHtml(opts) {
     opts = opts || {};
     var resumeOrderNo = opts.orderNo || null;
-    var channel = opts.channel || 'wechat';
+    var channels = opts.displayChannels || _displayChannels;
+    var channel = (resumeOrderNo && opts.channel)
+      ? opts.channel
+      : resolveChannel(opts.channel, channels);
     var embedded = opts.variant === 'embedded';
     var backBtn = !embedded && opts.showBack
       ? '<button type="button" class="soon-btn soon-btn--ghost soon-btn--sm soon-pay-sheet__back" id="payBack">返回选择方案</button>'
@@ -203,7 +308,7 @@
     var headBlock = embedded ? '' :
       '<header class="soon-pay-sheet__head">' +
       '<div class="soon-pay-sheet__head-main">' +
-      '<span class="soon-pay-sheet__eyebrow">' + (resumeOrderNo ? '继续支付' : '确认订阅') + '</span>' +
+      '<span class="soon-pay-sheet__eyebrow">' + (resumeOrderNo ? '继续支付' : '确认激活') + '</span>' +
       '<h3 class="soon-pay-sheet__title">' + esc(opts.planName || '') + '</h3>' +
       '<p class="soon-pay-sheet__order" id="payOrderNo"' +
       (resumeOrderNo ? '' : ' style="display:none"') + '>' +
@@ -222,23 +327,14 @@
       '<div class="soon-pay-sheet__body">' +
       orderInBody +
       payStepperHtml(1, channel) +
-      '<section class="soon-pay-section soon-pay-section--channels" id="payChannels">' +
-      '<h4 class="soon-pay-section__title">支付方式</h4>' +
-      '<div class="soon-pay-channels">' +
-      '<button type="button" class="soon-pay-channel' + (channel === 'wechat' ? ' is-active' : '') + '" data-ch="wechat">' +
-      '<span class="soon-pay-channel__radio" aria-hidden="true"></span>' +
-      '<span class="soon-pay-channel__icon soon-pay-channel__icon--wechat">微</span>' +
-      '<span class="soon-pay-channel__text"><span class="soon-pay-channel__name">微信支付</span>' +
-      '<span class="soon-pay-channel__hint">扫码付款</span></span></button>' +
-      '<button type="button" class="soon-pay-channel' + (channel === 'alipay' ? ' is-active' : '') + '" data-ch="alipay">' +
-      '<span class="soon-pay-channel__radio" aria-hidden="true"></span>' +
-      '<span class="soon-pay-channel__icon soon-pay-channel__icon--alipay">支</span>' +
-      '<span class="soon-pay-channel__text"><span class="soon-pay-channel__name">支付宝</span>' +
-      '<span class="soon-pay-channel__hint">网页支付</span></span></button></div></section>' +
+      payChannelsHtml(channel, channels, { selectable: !resumeOrderNo && channels.length > 1 }) +
       '<section class="soon-pay-section soon-pay-section--checkout">' +
-      '<div class="soon-pay-qr-panel" id="payQr">' + payEmptyStateHtml() + '</div></section>' +
+      '<div class="soon-pay-qr-panel" id="payQr">' + payEmptyStateHtml(channel) + '</div></section>' +
       '<div class="soon-pay-sheet__foot">' +
       '<p class="soon-pay-status" id="payStatus"></p>' +
+      '<div class="soon-pay-poll" id="payPollHint" aria-live="polite">' +
+      '<span class="soon-pay-poll__spin" aria-hidden="true"></span>' +
+      '<span class="soon-pay-poll__text">正在检测支付结果</span></div>' +
       '<button type="button" class="soon-btn soon-pay-sheet__cta" id="payConfirm">' +
       (resumeOrderNo ? '继续支付' : '确认并支付') + '</button>' +
       '<button type="button" class="soon-btn soon-btn--ghost soon-btn--sm soon-pay-sheet__cta soon-pay-sheet__cta--secondary" id="payManualRefresh" style="display:none">已完成支付，刷新状态</button>' +
@@ -249,7 +345,10 @@
     opts = opts || {};
     var planId = opts.planId;
     var resumeOrderNo = opts.orderNo || null;
-    var channel = opts.channel || 'wechat';
+    var channels = opts.displayChannels || _displayChannels;
+    var channel = (resumeOrderNo && opts.channel)
+      ? opts.channel
+      : resolveChannel(opts.channel, channels);
     var onPaid = typeof opts.onPaid === 'function' ? opts.onPaid : function () {};
     var pollTimer = null;
     var pollStartedAt = 0;
@@ -260,10 +359,14 @@
 
     var manualBtn = sheetRoot.querySelector('#payManualRefresh');
     var statusEl = sheetRoot.querySelector('#payStatus');
+    var pollHint = sheetRoot.querySelector('#payPollHint');
     var confirmBtn = sheetRoot.querySelector('#payConfirm');
     var qrEl = sheetRoot.querySelector('#payQr');
     var orderNoEl = sheetRoot.querySelector('#payOrderNo');
     var backBtn = sheetRoot.querySelector('#payBack');
+    var checking = false;
+    var pollTickTimer = null;
+    var MANUAL_REFRESH_LABEL = '已完成支付，刷新状态';
 
     function setStatus(text, type) {
       if (!statusEl) return;
@@ -272,6 +375,20 @@
       statusEl.style.display = text ? 'block' : 'none';
     }
 
+    function setPolling(active) {
+      sheetRoot.classList.toggle('soon-pay-sheet--polling', !!active);
+      if (!active && pollHint) pollHint.classList.remove('is-tick');
+    }
+
+    function flashPollTick() {
+      if (!pollHint) return;
+      pollHint.classList.add('is-tick');
+      if (pollTickTimer) clearTimeout(pollTickTimer);
+      pollTickTimer = setTimeout(function () {
+        pollHint.classList.remove('is-tick');
+      }, 450);
+    }
+
     function setStep(step) {
       updatePayStep(sheetRoot, step, channel);
       sheetRoot.classList.toggle('soon-pay-sheet--checkout', step >= 2);
@@ -284,36 +401,62 @@
         clearInterval(pollTimer);
         pollTimer = null;
       }
+      setPolling(false);
     }
 
     function startPoll() {
       stopPoll();
+      setPolling(true);
       pollStartedAt = Date.now();
+      checkOrderStatus(false);
       pollTimer = setInterval(function () {
         if (Date.now() - pollStartedAt > POLL_TIMEOUT_MS) {
           stopPoll();
           setStatus('自动检测超时，如已支付请点击下方按钮', 'err');
           return;
         }
-        checkOrderStatus();
+        checkOrderStatus(false);
       }, 3000);
     }
 
     function handlePaid() {
       stopPoll();
       setStep(3);
-      setStatus('支付成功，正在更新订阅…', 'ok');
+      setStatus('支付成功，正在更新会员状态…', 'ok');
       setTimeout(onPaid, 600);
     }
 
-    function checkOrderStatus() {
-      if (!orderNo) return;
+    function checkOrderStatus(manual) {
+      if (!orderNo || checking) return;
+      checking = true;
+      if (statusEl) statusEl.classList.add('is-checking');
+      if (manual && manualBtn) {
+        manualBtn.disabled = true;
+        manualBtn.classList.add('is-loading');
+        manualBtn.textContent = '查询中…';
+      } else {
+        flashPollTick();
+      }
       apiGet('/pay/orders/' + encodeURIComponent(orderNo)).then(function (st) {
-        if (st.ok && st.data && st.data.status === 'paid') handlePaid();
+        if (st.ok && st.data && st.data.status === 'paid') {
+          handlePaid();
+          return;
+        }
+        if (manual) {
+          setStatus('暂未收到支付结果，请完成付款后再试', 'warn');
+        }
+      }).finally(function () {
+        checking = false;
+        if (statusEl) statusEl.classList.remove('is-checking');
+        if (manual && manualBtn) {
+          manualBtn.disabled = false;
+          manualBtn.classList.remove('is-loading');
+          manualBtn.textContent = MANUAL_REFRESH_LABEL;
+        }
       });
     }
 
-    if (manualBtn) manualBtn.onclick = checkOrderStatus;
+    if (manualBtn) manualBtn.onclick = function () { checkOrderStatus(true); };
 
     function resetPaymentView() {
       paymentReady = false;
@@ -321,7 +464,7 @@
       setStep(1);
       if (manualBtn) manualBtn.style.display = 'none';
       if (confirmBtn) confirmBtn.style.display = '';
-      qrEl.innerHTML = payEmptyStateHtml();
+      qrEl.innerHTML = payEmptyStateHtml(channel);
       if (orderNoEl && !resumeOrderNo) {
         orderNoEl.textContent = '';
         orderNoEl.style.display = 'none';
@@ -329,9 +472,13 @@
       setStatus('');
     }
 
-    function applyCheckout(data) {
+    function applyCheckout(data, payWindow) {
       orderNo = data.order_no;
-      var err = renderPayPayload(data, qrEl, orderNoEl);
+      var launched = false;
+      if (channel === 'alipay' && data.pay_form && data.pay_form.gateway) {
+        launched = submitAlipayForm(data.pay_form, payWindow);
+      }
+      var err = renderPayPayload(data, qrEl, orderNoEl, { launched: launched });
       if (err) {
         setStatus(err, 'err');
         return;
@@ -340,7 +487,14 @@
       setStep(2);
       if (confirmBtn) confirmBtn.style.display = 'none';
       if (manualBtn) manualBtn.style.display = '';
-      setStatus('等待支付结果，完成后将自动刷新', 'ok');
+      if (channel === 'alipay') {
+        setStatus(
+          launched ? '支付窗口已打开，请在新窗口完成付款' : '未能自动打开支付窗口，请允许弹窗或点击下方按钮',
+          launched ? 'ok' : 'err'
+        );
+      } else {
+        setStatus('请扫码完成支付，本页将自动检测支付结果', 'ok');
+      }
       startPoll();
     }
 
@@ -349,6 +503,7 @@
       setStatus('正在生成付款信息…');
       qrEl.innerHTML = '<div class="soon-pay-checkout-loading"><div class="soon-skeleton soon-skeleton--h200"></div>' +
         '<p>正在连接支付渠道…</p></div>';
+      var payWindow = channel === 'alipay' ? openAlipayPayWindow() : null;
       var req;
       if (resumeOrderNo || orderNo) {
         var existingNo = orderNo || resumeOrderNo;
@@ -359,19 +514,21 @@
       req.then(function (j) {
         if (confirmBtn) confirmBtn.disabled = false;
         if (!j.ok) {
+          if (payWindow && !payWindow.closed) payWindow.close();
           setStatus(j.message || '下单失败', 'err');
-          qrEl.innerHTML = payEmptyStateHtml();
+          qrEl.innerHTML = payEmptyStateHtml(channel);
           return;
         }
-        applyCheckout(j.data);
+        applyCheckout(j.data, payWindow);
       }).catch(function () {
         if (confirmBtn) confirmBtn.disabled = false;
+        if (payWindow && !payWindow.closed) payWindow.close();
         setStatus('网络错误，请重试', 'err');
-        qrEl.innerHTML = payEmptyStateHtml();
+        qrEl.innerHTML = payEmptyStateHtml(channel);
       });
     }
 
-    sheetRoot.querySelectorAll('.soon-pay-channel').forEach(function (el) {
+    sheetRoot.querySelectorAll('.soon-pay-channel:not(.is-fixed)').forEach(function (el) {
       el.onclick = function () {
         if (el.classList.contains('is-active')) return;
         sheetRoot.querySelectorAll('.soon-pay-channel').forEach(function (x) { x.classList.remove('is-active'); });
@@ -386,6 +543,10 @@
 
     function destroy() {
       stopPoll();
+      if (pollTickTimer) {
+        clearTimeout(pollTickTimer);
+        pollTickTimer = null;
+      }
       paymentReady = false;
       orderNo = resumeOrderNo;
     }
@@ -399,29 +560,41 @@
   function openPayModal(opts) {
     opts = opts || {};
     if (typeof layer === 'undefined' || !layer.open) return null;
+    var channels = _displayChannels;
+    var channel = (opts.orderNo && opts.channel)
+      ? opts.channel
+      : resolveChannel(opts.channel, channels);
     var html = paySheetHtml({
       planName: opts.planName,
       priceDisplay: opts.priceDisplay,
       orderNo: opts.orderNo,
-      channel: opts.channel || 'wechat',
+      channel: channel,
+      displayChannels: channels,
     });
     var payCtrl = null;
+    var width = Math.min(480, window.innerWidth - 32);
     var idx = layer.open({
       type: 1,
       skin: 'soon-layer',
       title: false,
       closeBtn: 1,
+      fixed: true,
+      offset: 'auto',
+      shade: [0.72, '#000'],
       shadeClose: !!opts.shadeClose,
-      area: ['480px'],
+      maxWidth: width,
+      area: [width + 'px', 'auto'],
       content: html,
-      success: function (layero) {
+      success: function (layero, index) {
         var layerEl = layero && layero[0] ? layero[0] : layero;
         if (layerEl && layerEl.classList) {
           layerEl.classList.add('soon-layer--pay');
           var layerContent = layerEl.querySelector('.layui-layer-content');
           if (layerContent) {
+            layerContent.style.padding = '0';
             layerContent.style.overflow = 'visible';
             layerContent.style.maxHeight = 'none';
+            layerContent.style.background = 'transparent';
           }
         }
         var sheet = layerEl.querySelector('.soon-pay-sheet');
@@ -430,35 +603,46 @@
           planName: opts.planName,
           priceDisplay: opts.priceDisplay,
           orderNo: opts.orderNo,
-          channel: opts.channel || 'wechat',
+          channel: channel,
+          displayChannels: channels,
           onPaid: function () {
             layer.close(idx);
+            if (typeof window.soonCleanupLayerMask === 'function') window.soonCleanupLayerMask();
             if (typeof opts.onPaid === 'function') opts.onPaid();
           },
           onBack: opts.onBack,
         });
+        requestAnimationFrame(function () {
+          if (typeof layer.style === 'function') layer.style(index);
+        });
       },
       end: function () {
         if (payCtrl) payCtrl.destroy();
+        if (typeof window.soonCleanupLayerMask === 'function') window.soonCleanupLayerMask();
         if (typeof opts.onClose === 'function') opts.onClose();
       },
     });
     return idx;
   }
 
+  loadDisplayChannels();
+
   window.SoonMemberPay = {
     apiBase: apiBase,
     apiGet: apiGet,
     apiPost: apiPost,
     esc: esc,
-    monthlyPlan: monthlyPlan,
-    billingSavePercent: billingSavePercent,
     paySheetHtml: paySheetHtml,
     bindPaySheet: bindPaySheet,
     openPayModal: openPayModal,
     payEmptyStateHtml: payEmptyStateHtml,
     renderPayPayload: renderPayPayload,
     submitAlipayForm: submitAlipayForm,
+    openAlipayPayWindow: openAlipayPayWindow,
+    loadDisplayChannels: loadDisplayChannels,
+    displayChannels: displayChannels,
+    defaultChannel: defaultChannel,
+    resolveChannel: resolveChannel,
     POLL_TIMEOUT_MS: POLL_TIMEOUT_MS,
   };
 })();

frontend-web/js/common/member-plan-core.js

@@ -1,104 +0,0 @@
-(function () {
-  'use strict';
-
-  var CHECK_SVG = '<svg viewBox="0 0 12 12" fill="none" stroke-width="2" stroke="currentColor">' +
-    '<path d="M2 6l3 3 5-6"/></svg>';
-
-  function esc(s) {
-    if (window.SoonMemberPay && window.SoonMemberPay.esc) return window.SoonMemberPay.esc(s);
-    if (s == null) return '';
-    return String(s)
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;');
-  }
-
-  function isPlanFeatureLine(line) {
-    if (!line) return false;
-    return line.indexOf('到期') < 0
-      && line.indexOf('订阅有效期') < 0
-      && line.indexOf('订阅周期') < 0
-      && line.indexOf('权益一致') < 0;
-  }
-
-  function featureItem(text) {
-    return '<li><span class="soon-plan-card__check">' + CHECK_SVG + '</span><span>' + esc(text) + '</span></li>';
-  }
-
-  function billingSavePercent(items, plan) {
-    if (window.SoonMemberPay && window.SoonMemberPay.billingSavePercent) {
-      return window.SoonMemberPay.billingSavePercent(items, plan);
-    }
-    return null;
-  }
-
-  function planCardHtml(plan, ctx) {
-    ctx = ctx || {};
-    var items = ctx.allPlans || [];
-    var mode = ctx.mode || 'page';
-    var isMember = !!ctx.isMember;
-    var currentCode = ctx.currentCode || '';
-    var selectedId = ctx.selectedId;
-
-    var feat = plan.is_recommended ? ' soon-plan-card--featured' : '';
-    var cur = plan.code === currentCode ? ' soon-plan-card--current' : '';
-    var isGate = mode === 'gate';
-    var isPicker = mode === 'picker' || isGate;
-    var picker = isPicker ? ' soon-plan-card--picker' : '';
-    if (isGate) picker += ' soon-plan-card--gate';
-    var selected = isPicker && plan.id === selectedId ? ' soon-plan-card--selected' : '';
-
-    var ribbon = plan.is_recommended
-      ? '<span class="soon-plan-card__ribbon soon-plan-card__ribbon--rec">推荐</span>'
-      : (plan.code === currentCode ? '<span class="soon-plan-card__ribbon soon-plan-card__ribbon--current">当前</span>' : '');
-    var savePct = billingSavePercent(items, plan);
-    if (savePct) ribbon += '<span class="soon-plan-card__save">省 ' + savePct + '%</span>';
-    var badgeCls = ribbon ? ' soon-plan-card--badged' : '';
-    if (savePct) badgeCls += ' soon-plan-card--save';
-
-    var period = plan.duration_days > 0
-      ? '<span class="soon-plan-card__period">/' + esc(plan.period_label || plan.duration_days + '天') + '</span>'
-      : '';
-    var features = (plan.features || []).filter(isPlanFeatureLine).map(featureItem).join('');
-    var desc = plan.description || '';
-    var price = esc(plan.price_display || (plan.price_cents / 100).toFixed(2));
-
-    var inner =
-      ribbon +
-      '<div class="soon-plan-card__head">' +
-      '<div class="soon-plan-card__name">' + esc(plan.name) + '</div>' +
-      (desc ? '<p class="soon-plan-card__desc">' + esc(desc) + '</p>' : '') +
-      '<div class="soon-plan-card__price-row">' +
-      '<span class="soon-plan-card__currency">¥</span>' +
-      '<span class="soon-plan-card__price">' + price + '</span>' + period + '</div></div>';
-    if (!isGate) {
-      inner += '<div class="soon-plan-card__body">' +
-        '<ul class="soon-plan-card__features">' + features + '</ul></div>';
-    }
-
-    if (isPicker) {
-      return '<button type="button" class="soon-plan-card' + feat + cur + badgeCls + picker + selected + '" ' +
-        'data-action="pick-plan" data-id="' + plan.id + '" aria-pressed="' + (plan.id === selectedId ? 'true' : 'false') + '">' +
-        inner + '</button>';
-    }
-
-    var cta = '<button type="button" class="soon-btn soon-plan-card__cta" data-id="' + plan.id +
-      '" data-name="' + esc(plan.name) + '" data-price="' + price + '">' +
-      (isMember ? '续订' : '立即订阅') + '</button>';
-    return '<article class="soon-plan-card' + feat + cur + badgeCls + '">' + inner +
-      '<div class="soon-plan-card__foot">' + cta + '</div></article>';
-  }
-
-  function plansGridHtml(plans, ctx) {
-    return (plans || []).map(function (p) {
-      return planCardHtml(p, ctx);
-    }).join('');
-  }
-
-  window.SoonMemberPlan = {
-    isPlanFeatureLine: isPlanFeatureLine,
-    planCardHtml: planCardHtml,
-    plansGridHtml: plansGridHtml,
-  };
-})();

frontend-web/js/common/member-subscribe.js

@@ -1,306 +0,0 @@
-(function () {
-  'use strict';
-
-  var GATE_FEATURES = ['高清预览', '成品打印', '云端保存', '导出设计文件'];
-  var _gate = { index: null, payIndex: null, plans: [], selectedId: null, gateOpts: null };
-
-  var pay = window.SoonMemberPay;
-  var plansUi = window.SoonMemberPlan;
-
-  function esc(s) {
-    if (pay && pay.esc) return pay.esc(s);
-    if (s == null) return '';
-    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-  }
-
-  function toast(msg, type) {
-    if (typeof window.soonToast === 'function') window.soonToast(msg, type);
-  }
-
-  function emptyGate() {
-    return { index: null, payIndex: null, plans: [], selectedId: null, gateOpts: null };
-  }
-
-  function ensureLayer(cb) {
-    if (typeof layer !== 'undefined' && layer.open) {
-      if (layer.config) layer.config({ skin: 'soon-layer' });
-      cb();
-      return;
-    }
-    if (typeof layui !== 'undefined') {
-      layui.use(['layer'], function () {
-        window.layer = layui.layer;
-        layer.config({ skin: 'soon-layer' });
-        cb();
-      });
-      return;
-    }
-    toast('订阅功能暂不可用，请刷新页面后重试', 'warn');
-  }
-
-  function actionCopy(actionLabel) {
-    var label = (actionLabel || '使用').trim();
-    if (label.indexOf('预览') >= 0 || label.indexOf('导出') >= 0) return '预览、打印与导出成品';
-    if (label.indexOf('保存') >= 0 || label.indexOf('另存') >= 0) return '保存或另存到云端';
-    if (label.indexOf('下载') >= 0) return '下载设计文件';
-    return label;
-  }
-
-  function shellHtml(actionLabel) {
-    var feat = GATE_FEATURES.map(function (t) {
-      return '<li>' + esc(t) + '</li>';
-    }).join('');
-    return '<div class="soon-subscribe-modal">' +
-      '<header class="soon-subscribe-modal__head">' +
-      '<span class="soon-subscribe-modal__eyebrow">订阅功能</span>' +
-      '<h3 class="soon-subscribe-modal__title">开通订阅，解锁完整能力</h3>' +
-      '<p class="soon-subscribe-modal__desc">免费版可使用设计工具；订阅后可' + esc(actionCopy(actionLabel)) + '。</p>' +
-      '<ul class="soon-subscribe-modal__features">' + feat + '</ul>' +
-      '</header>' +
-      '<div class="soon-subscribe-modal__body">' +
-      '<div class="soon-subscribe-modal__section-head">' +
-      '<h4 class="soon-subscribe-modal__section-title"><span class="soon-subscribe-modal__section-mark"></span>订阅方案</h4>' +
-      '<p class="soon-subscribe-modal__section-sub">选择订阅周期，功能相同，随时续订</p></div>' +
-      '<section class="soon-plans-grid soon-subscribe-plans-grid" data-role="plan-picker">' +
-      '<p class="soon-subscribe-plans__loading">正在加载订阅方案…</p></section>' +
-      '</div>' +
-      '<footer class="soon-subscribe-modal__foot">' +
-      '<button type="button" class="soon-subscribe-modal__stay" data-action="stay">继续设计</button>' +
-      '<button type="button" class="soon-btn soon-subscribe-modal__pay" data-action="go-pay" disabled>立即支付</button>' +
-      '</footer></div>';
-  }
-
-  function findPlan(id) {
-    var pid = Number(id);
-    for (var i = 0; i < _gate.plans.length; i++) {
-      if (_gate.plans[i].id === pid) return _gate.plans[i];
-    }
-    return null;
-  }
-
-  function planPriceDisplay(plan) {
-    if (!plan) return '';
-    return plan.price_display || (plan.price_cents / 100).toFixed(2);
-  }
-
-  function renderPlanPicker(modal) {
-    var picker = modal.querySelector('[data-role="plan-picker"]');
-    if (!picker || !plansUi) return;
-    if (!_gate.plans.length) {
-      picker.innerHTML = '<p class="soon-subscribe-plans__empty">暂无可用订阅方案</p>';
-      return;
-    }
-    picker.innerHTML = plansUi.plansGridHtml(_gate.plans, {
-      allPlans: _gate.plans,
-      selectedId: _gate.selectedId,
-      mode: 'gate',
-    });
-  }
-
-  function updatePayButton(modal) {
-    var btn = modal.querySelector('[data-action="go-pay"]');
-    var plan = findPlan(_gate.selectedId);
-    if (!btn) return;
-    if (!plan) {
-      btn.disabled = true;
-      btn.textContent = '立即支付';
-      return;
-    }
-    btn.disabled = false;
-    btn.textContent = '立即支付 ¥' + planPriceDisplay(plan);
-  }
-
-  function selectPlan(modal, planId) {
-    var plan = findPlan(planId);
-    if (!plan) return;
-    _gate.selectedId = plan.id;
-    renderPlanPicker(modal);
-    updatePayButton(modal);
-  }
-
-  function closeGate(fireStay) {
-    var idx = _gate.index;
-    var payIdx = _gate.payIndex;
-    var opts = _gate.gateOpts;
-    _gate = emptyGate();
-    if (typeof layer !== 'undefined') {
-      if (idx != null) layer.close(idx);
-      if (payIdx != null) layer.close(payIdx);
-    }
-    if (fireStay && opts && typeof opts.onStay === 'function') opts.onStay();
-  }
-
-  function onPaySuccess() {
-    var gateIdx = _gate.index;
-    var opts = _gate.gateOpts;
-    _gate = emptyGate();
-    if (typeof layer !== 'undefined') {
-      if (gateIdx != null) layer.close(gateIdx);
-    }
-    toast('恭喜您，订阅已成功生效！', 'success');
-    if (typeof window.soonLoadMembership === 'function') {
-      window.soonLoadMembership(true).then(function () {
-        if (typeof window.soonRefreshPortalIdentity === 'function') window.soonRefreshPortalIdentity();
-      });
-    }
-    if (opts && typeof opts.onSuccess === 'function') opts.onSuccess();
-  }
-
-  function openPayStep(modal) {
-    var plan = findPlan(_gate.selectedId);
-    if (!plan || !pay || !pay.openPayModal) {
-      toast('请先选择订阅方案', 'warn');
-      return;
-    }
-    if (_gate.payIndex != null) {
-      try { layer.close(_gate.payIndex); } catch (e) { /* ignore */ }
-      _gate.payIndex = null;
-    }
-    var priceDisplay = planPriceDisplay(plan);
-    _gate.payIndex = pay.openPayModal({
-      planId: plan.id,
-      planName: plan.name,
-      priceDisplay: priceDisplay,
-      shadeClose: true,
-      onPaid: onPaySuccess,
-      onClose: function () {
-        _gate.payIndex = null;
-        updatePayButton(modal);
-      },
-    });
-  }
-
-  function renderPlansError(modal, message) {
-    var picker = modal.querySelector('[data-role="plan-picker"]');
-    if (!picker) return;
-    picker.innerHTML = '<p class="soon-subscribe-plans__empty">' + esc(message) +
-      '<br><button type="button" class="soon-btn soon-btn--sm" data-action="retry-plans">重试</button></p>';
-    updatePayButton(modal);
-  }
-
-  function loadPlans(modal) {
-    var picker = modal.querySelector('[data-role="plan-picker"]');
-    if (!picker) return;
-    if (!pay || !plansUi) {
-      renderPlansError(modal, '订阅模块未加载，请刷新页面');
-      return;
-    }
-    picker.innerHTML = '<p class="soon-subscribe-plans__loading">正在加载订阅方案…</p>';
-    updatePayButton(modal);
-    pay.apiGet('/plans').then(function (ps) {
-      if (!ps.ok) {
-        renderPlansError(modal, ps.message || '方案加载失败');
-        return;
-      }
-      var paid = ((ps.data && ps.data.items) || []).filter(function (p) {
-        return p.code !== 'free' && p.price_cents > 0;
-      });
-      if (!paid.length) {
-        renderPlansError(modal, '暂无可用订阅方案');
-        return;
-      }
-      _gate.plans = paid;
-      var def = paid[0];
-      for (var i = 0; i < paid.length; i++) {
-        if (paid[i].is_recommended) { def = paid[i]; break; }
-      }
-      selectPlan(modal, def.id);
-    }).catch(function () {
-      renderPlansError(modal, '网络错误，请稍后重试');
-    });
-  }
-
-  function bindModal(modal) {
-    modal.addEventListener('click', function (e) {
-      var stay = e.target.closest('[data-action="stay"]');
-      if (stay) {
-        e.preventDefault();
-        closeGate(true);
-        return;
-      }
-      var retry = e.target.closest('[data-action="retry-plans"]');
-      if (retry) {
-        e.preventDefault();
-        loadPlans(modal);
-        return;
-      }
-      var goPay = e.target.closest('[data-action="go-pay"]');
-      if (goPay) {
-        e.preventDefault();
-        if (!goPay.disabled) openPayStep(modal);
-        return;
-      }
-      var pick = e.target.closest('[data-action="pick-plan"]');
-      if (pick) {
-        e.preventDefault();
-        var id = Number(pick.dataset.id);
-        if (id) selectPlan(modal, id);
-      }
-    });
-    loadPlans(modal);
-  }
-
-  function openGate(opts) {
-    opts = opts || {};
-    if (_gate.index != null) {
-      try { layer.close(_gate.index); } catch (e) { /* ignore */ }
-    }
-    if (_gate.payIndex != null) {
-      try { layer.close(_gate.payIndex); } catch (e) { /* ignore */ }
-    }
-    _gate = emptyGate();
-    _gate.gateOpts = opts;
-
-    var width = Math.min(1000, window.innerWidth - 24);
-    layer.open({
-      type: 1,
-      skin: 'soon-layer',
-      title: false,
-      closeBtn: 1,
-      shadeClose: true,
-      area: [width + 'px', 'auto'],
-      content: shellHtml(opts.action),
-      success: function (layero, index) {
-        var layerEl = layero && layero[0] ? layero[0] : layero;
-        if (layerEl && layerEl.classList) layerEl.classList.add('soon-layer--subscribe');
-        var content = layerEl && layerEl.querySelector ? layerEl.querySelector('.layui-layer-content') : null;
-        if (content) content.style.padding = '0';
-        var modal = layerEl.querySelector('.soon-subscribe-modal');
-        if (!modal) return;
-        _gate.index = index;
-        _gate.gateOpts = opts;
-        bindModal(modal);
-      },
-      end: function () {
-        var payIdx = _gate.payIndex;
-        var closedOpts = _gate.gateOpts;
-        if (payIdx != null) {
-          try { layer.close(payIdx); } catch (e) { /* ignore */ }
-        }
-        _gate = emptyGate();
-        if (closedOpts && closedOpts.onClose) closedOpts.onClose();
-      },
-    });
-  }
-
-  function soonShowSubscribeGate(opts) {
-    if (!pay || !plansUi) {
-      toast('订阅功能暂不可用，请刷新页面后重试', 'warn');
-      return false;
-    }
-    ensureLayer(function () { openGate(opts || {}); });
-    return false;
-  }
-
-  window.soonShowSubscribeGate = soonShowSubscribeGate;
-
-  if (!window._soonSubscribeFocusBound) {
-    window._soonSubscribeFocusBound = true;
-    window.addEventListener('focus', function () {
-      if (typeof window.soonLoadMembership !== 'function') return;
-      window.soonLoadMembership(true).then(function () {
-        if (typeof window.soonRefreshPortalIdentity === 'function') window.soonRefreshPortalIdentity();
-      });
-    });
-  }
-})();

frontend-web/js/common/portal-auth.js

@@ -1,81 +1,195 @@
 (function () {
   'use strict';
 
+  var _opts = {};
+  var _logoutBound = false;
+
   function showAuthedNav() {
     var guest = document.getElementById('auth_guest');
     var account = document.getElementById('auth_account');
     var session = document.getElementById('auth_session');
+    var logout = document.getElementById('auth_logout');
     if (guest) guest.style.display = 'none';
     if (account) account.style.display = 'inline-flex';
     if (session) session.style.display = 'inline-flex';
+    if (logout) logout.style.display = 'inline-flex';
+  }
+
+  function showGuestNav() {
+    var guest = document.getElementById('auth_guest');
+    var account = document.getElementById('auth_account');
+    var session = document.getElementById('auth_session');
+    var admin = document.getElementById('auth_admin');
+    var avatar = document.getElementById('auth_avatar');
+    var identity = document.getElementById('auth_identity');
+    var logout = document.getElementById('auth_logout');
+    if (guest) guest.style.display = '';
+    if (account) account.style.display = 'none';
+    if (session) session.style.display = 'none';
+    if (admin) admin.style.display = 'none';
+    if (logout) logout.style.display = 'none';
+    if (avatar) {
+      avatar.style.display = 'none';
+      avatar.textContent = '';
+      avatar.title = '';
+    }
+    if (identity) {
+      identity.style.display = 'none';
+      identity.textContent = '';
+    }
   }
 
   function clearSession() {
-    if (typeof window.soonClearAuthSession === 'function') {
-      window.soonClearAuthSession();
-    } else {
+    if (typeof window.soonClearAuthSession === 'function') window.soonClearAuthSession();
+    else {
       localStorage.removeItem('soon_access');
       localStorage.removeItem('soon_refresh');
     }
+    if (typeof window.soonApplyMembership === 'function') window.soonApplyMembership(null);
   }
 
-  function initTopbar(options) {
-    options = options || {};
-    var tok = localStorage.getItem('soon_access') || '';
-    var login = document.getElementById('auth_login');
-    var reg = document.getElementById('auth_register');
-    var member = document.getElementById('auth_member');
+  function applyUserUi(data) {
+    if (typeof window.soonApplyMembership === 'function') window.soonApplyMembership(data);
     var admin = document.getElementById('auth_admin');
-    var logout = document.getElementById('auth_logout');
     var avatar = document.getElementById('auth_avatar');
-
-    if (!tok) return;
-
-    showAuthedNav();
-    if (login) login.style.display = 'none';
-    if (reg) reg.style.display = 'none';
-    if (member) member.style.display = 'inline-flex';
-    if (logout) logout.style.display = 'inline-flex';
-
-    var base = (window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base) || '';
-    if (!base) return;
-
-    var meFetch = typeof window.soonAuthedFetch === 'function'
-      ? window.soonAuthedFetch(base + '/auth/me', { headers: { Authorization: 'Bearer ' + tok } })
-      : fetch(base + '/auth/me', { headers: { Authorization: 'Bearer ' + tok } });
-    meFetch
-      .then(function (r) { return r.json(); })
-      .then(function (j) {
-        if (!j.ok || !j.data) {
-          clearSession();
-          location.reload();
-          return;
-        }
-        if (j.data.role === 'admin' && admin) admin.style.display = 'inline-flex';
-        if (avatar && j.data.email) {
+    if (data.role === 'admin' && admin) admin.style.display = 'inline-flex';
+    if (avatar && data.email) {
       avatar.style.display = 'inline-flex';
-          avatar.textContent = j.data.email.charAt(0).toUpperCase();
-          avatar.title = j.data.email;
+      avatar.textContent = data.email.charAt(0).toUpperCase();
+      avatar.title = data.email;
     }
-        if (typeof window.soonLoadMembership === 'function') {
-          window.soonLoadMembership().then(function () {
-            if (typeof window.soonRefreshPortalIdentity === 'function') {
-              window.soonRefreshPortalIdentity();
+    if (typeof window.soonRefreshPortalIdentity === 'function') window.soonRefreshPortalIdentity();
   }
+
+  function initClearCache() {
+    var btn = document.getElementById('auth_clear_cache');
+    if (!btn || btn.getAttribute('data-soon-bound') === '1') return;
+    btn.setAttribute('data-soon-bound', '1');
+    btn.addEventListener('click', function (e) {
+      e.preventDefault();
+      if (typeof layui === 'undefined' || typeof window.soonClearLocalDesignCache !== 'function') return;
+      layui.use('layer', function () {
+        var layer = layui.layer;
+        layer.open({
+          type: 1,
+          skin: 'soon-layer',
+          title: '清除本地缓存',
+          content: '<div class="soon-dialog-body">将清除最近文件与本地缓存，不会退出登录。未上传的本地编辑将丢失。</div>',
+          btn: ['确定清除', '取消'],
+          btnAlign: 'r',
+          area: ['320px', 'auto'],
+          shadeClose: true,
+          yes: function (index) {
+            layer.close(index);
+            window.soonClearLocalDesignCache().then(function () {
+              if (typeof window.soonToast === 'function') window.soonToast('已清除本地缓存', 'success');
+              else layer.msg('已清除本地缓存', { icon: 1, time: 1200 });
+              setTimeout(function () {
+                if (/design[12]\.web\.html/i.test(location.pathname || '')) location.href = 'index.web.html';
+                else location.reload();
+              }, 400);
+            });
+          },
+        });
+      });
     });
   }
-      })
-      .catch(function () { /* keep authed shell */ });
 
-    if (logout) {
+  function bindLogoutOnce(options) {
+    if (_logoutBound) return;
+    var logout = document.getElementById('auth_logout');
+    if (!logout) return;
+    _logoutBound = true;
     logout.addEventListener('click', function (e) {
       e.preventDefault();
       clearSession();
+      showGuestNav();
       if (options.logoutReload !== false) location.reload();
       else location.href = 'index.web.html';
     });
   }
+
+  function bindPopupLink(id, fn) {
+    var el = document.getElementById(id);
+    if (!el || el.getAttribute('data-soon-popup-bound') === '1') return;
+    el.setAttribute('data-soon-popup-bound', '1');
+    el.addEventListener('click', function (e) {
+      e.preventDefault();
+      fn();
+    });
   }
 
-  window.soonPortalAuth = { init: initTopbar };
+  function bindPopupAuthLinks() {
+    if (typeof window.soonShowLoginGate !== 'function') return;
+    bindPopupLink('auth_login', function () {
+      window.soonShowLoginGate({ reason: '登录账号' });
+    });
+    if (typeof window.soonShowRegisterGate === 'function') {
+      bindPopupLink('auth_register', function () {
+        window.soonShowRegisterGate({ reason: '注册账号' });
+      });
+    }
+  }
+
+  function refreshAuthUi(options) {
+    options = options || _opts || {};
+    initClearCache();
+    bindLogoutOnce(options);
+    bindPopupAuthLinks();
+
+    var tok = localStorage.getItem('soon_access') || '';
+    if (!tok) {
+      showGuestNav();
+      return Promise.resolve();
+    }
+
+    showAuthedNav();
+
+    var base = (window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base) || '';
+    if (!base) {
+      if (typeof window.soonRefreshPortalIdentity === 'function') window.soonRefreshPortalIdentity();
+      return Promise.resolve();
+    }
+
+    var meFetch = typeof window.soonAuthedFetch === 'function'
+      ? window.soonAuthedFetch(base + '/auth/me', { headers: { Authorization: 'Bearer ' + tok } })
+      : fetch(base + '/auth/me', { headers: { Authorization: 'Bearer ' + tok } });
+
+    return meFetch
+      .then(function (r) {
+        if (r.status === 401) {
+          clearSession();
+          showGuestNav();
+          return null;
+        }
+        if (!r.ok) {
+          if (typeof window.soonToast === 'function') window.soonToast('网络异常，部分功能可能不可用', 'warn');
+          if (typeof window.soonRefreshPortalIdentity === 'function') window.soonRefreshPortalIdentity();
+          return null;
+        }
+        return r.json();
+      })
+      .then(function (j) {
+        if (!j) return;
+        if (!j.ok || !j.data) {
+          clearSession();
+          showGuestNav();
+          return;
+        }
+        applyUserUi(j.data);
+        if (typeof options.onAuthed === 'function') options.onAuthed(j.data);
+      })
+      .catch(function () {
+        if (typeof window.soonToast === 'function') window.soonToast('网络异常，部分功能可能不可用', 'warn');
+        if (typeof window.soonRefreshPortalIdentity === 'function') window.soonRefreshPortalIdentity();
+      });
+  }
+
+  function initTopbar(options) {
+    _opts = options || {};
+    return refreshAuthUi(_opts);
+  }
+
+  window.soonRefreshPortalAuthUi = refreshAuthUi;
+  window.soonPortalAuth = { init: initTopbar, refresh: refreshAuthUi };
 })();

frontend-web/js/common/portal-topbar.js

@@ -3,7 +3,6 @@
 
   var STANDARD_LINKS = [
     { id: 'home', href: 'index.web.html', label: '设计首页', show: 'always' },
-    { id: 'member', href: 'member.web.html', label: '订阅', show: 'authed', elId: 'auth_member' },
     { id: 'admin', href: 'admin/index.html', label: '管理', show: 'admin', elId: 'auth_admin' },
   ];
 
@@ -22,7 +21,6 @@
       '<span id="auth_identity" class="soon-portal-identity" style="display:none"></span>' +
       '</div>' +
       '<nav class="soon-portal-topbar__session" id="auth_session" style="display:none" aria-label="账户">' +
-      '<a href="member.web.html" id="auth_member" class="soon-portal-topbar__link" style="display:none">订阅</a>' +
       '<a href="admin/index.html" id="auth_admin" class="soon-portal-topbar__link" style="display:none">管理</a>' +
       '<a href="#" id="auth_logout" class="soon-portal-topbar__link" style="display:none">退出</a>' +
       '</nav>';
@@ -30,7 +28,7 @@
 
   function renderLinks(links, active) {
     return links.map(function (lnk) {
-      if (lnk.id === 'member' || lnk.id === 'admin') return '';
+      if (lnk.id === 'admin') return '';
       var cls = 'soon-portal-topbar__link' + (active === lnk.id ? ' is-active' : '');
       return '<a href="' + esc(lnk.href) + '" class="' + cls + '">' + esc(lnk.label) + '</a>';
     }).join('');
@@ -39,14 +37,15 @@
   function toolsBlock(lang, linksHtml) {
     return '<div class="soon-portal-topbar__tools">' +
       lang +
-      (linksHtml ? '<nav class="soon-portal-topbar__links" aria-label="导航">' + linksHtml + '</nav>' : '') +
+      (linksHtml ? '<nav class="soon-portal-topbar__links" aria-label="导航">' + linksHtml +
+        '<a href="#" id="auth_clear_cache" class="soon-portal-topbar__link">清除缓存</a></nav>' : '') +
       '</div>';
   }
 
   /**
    * @param {object} opts
    * @param {string} [opts.variant] standard | auth | design
-   * @param {string} [opts.active] home | member
+   * @param {string} [opts.active] home
    * @param {string} [opts.extraClass]
    */
   function html(opts) {

frontend-web/js/common/soon-cache.js

@@ -0,0 +1,53 @@
+(function () {
+  'use strict';
+  var v = window.SOON_APP_VERSION || '';
+
+  window.soonWithVersion = function (url) {
+    if (!url || /^https?:\/\//i.test(url) || /^data:/i.test(url)) return url;
+    if (!v) return url;
+    var s = String(url);
+    var hashIdx = s.indexOf('#');
+    var hash = hashIdx >= 0 ? s.slice(hashIdx) : '';
+    var noHash = hashIdx >= 0 ? s.slice(0, hashIdx) : s;
+    return noHash.split('?')[0] + '?v=' + encodeURIComponent(v) + hash;
+  };
+
+  window.soonPatchForward = function (fromEl) {
+    var fn = window.soonWithVersion;
+    if (typeof fn !== 'function') return;
+    var el = fromEl && fromEl.nextElementSibling;
+    while (el) {
+      if (el.tagName === 'SCRIPT') {
+        var src = el.getAttribute('src');
+        if (src && src.indexOf('version.js') < 0 && src.indexOf('soon-cache.js') < 0) {
+          el.src = fn(src);
+        }
+      } else if (el.tagName === 'LINK' && el.rel === 'stylesheet') {
+        var href = el.getAttribute('href');
+        if (href) el.href = fn(href);
+      }
+      el = el.nextElementSibling;
+    }
+  };
+
+  if (v) {
+    var KEY = 'soondesign_app_version';
+    try {
+      var prev = localStorage.getItem(KEY);
+      if (prev && prev !== v) {
+        localStorage.setItem(KEY, v);
+        var url = new URL(window.location.href);
+        if (url.searchParams.get('_sv') !== v) {
+          url.searchParams.set('_sv', v);
+          window.location.replace(url.toString());
+          return;
+        }
+      }
+      localStorage.setItem(KEY, v);
+    } catch (e) { /* ignore */ }
+  }
+
+  if (document.currentScript) {
+    window.soonPatchForward(document.currentScript);
+  }
+})();

frontend-web/js/common/soon-local-store.js

@@ -0,0 +1,244 @@
+(function () {
+  'use strict';
+
+  var DB_NAME = 'soondesign_local';
+  var DB_VERSION = 1;
+  var MAX_BLOBS = 20;
+  var THUMB_MAX_BYTES = 102400;
+  var dbPromise = null;
+  var idbAvailable = typeof indexedDB !== 'undefined';
+
+  function soonExtractThumbFromJson(json) {
+    if (!json || !json.frontDisplayPic || typeof json.frontDisplayPic !== 'string') return '';
+    var candidate = json.frontDisplayPic.trim();
+    if (candidate.indexOf('data:image/') !== 0) return '';
+    if (candidate.length > THUMB_MAX_BYTES) return '';
+    return candidate;
+  }
+
+  function txDone(tx) {
+    return new Promise(function (resolve, reject) {
+      tx.oncomplete = function () { resolve(); };
+      tx.onerror = function () { reject(tx.error || new Error('idb_tx_error')); };
+      tx.onabort = function () { reject(tx.error || new Error('idb_tx_abort')); };
+    });
+  }
+
+  function reqPromise(req) {
+    return new Promise(function (resolve, reject) {
+      req.onsuccess = function () { resolve(req.result); };
+      req.onerror = function () { reject(req.error || new Error('idb_req_error')); };
+    });
+  }
+
+  function soonLocalOpen() {
+    if (!idbAvailable) return Promise.resolve(null);
+    if (dbPromise) return dbPromise;
+    dbPromise = new Promise(function (resolve, reject) {
+      var req = indexedDB.open(DB_NAME, DB_VERSION);
+      req.onupgradeneeded = function (e) {
+        var db = e.target.result;
+        if (!db.objectStoreNames.contains('blobs')) {
+          db.createObjectStore('blobs', { keyPath: 'cacheKey' });
+        }
+        if (!db.objectStoreNames.contains('thumbs')) {
+          db.createObjectStore('thumbs', { keyPath: 'cacheKey' });
+        }
+      };
+      req.onsuccess = function () { resolve(req.result); };
+      req.onerror = function () {
+        idbAvailable = false;
+        dbPromise = null;
+        reject(req.error || new Error('idb_open_failed'));
+      };
+    }).catch(function () {
+      idbAvailable = false;
+      dbPromise = null;
+      return null;
+    });
+    return dbPromise;
+  }
+
+  function soonLocalGet(cacheKey) {
+    if (!cacheKey || !idbAvailable) return Promise.resolve(null);
+    return soonLocalOpen().then(function (db) {
+      if (!db) return null;
+      var tx = db.transaction('blobs', 'readonly');
+      return reqPromise(tx.objectStore('blobs').get(cacheKey)).then(function (row) {
+        if (!row || row.json == null) return null;
+        return {
+          json: row.json,
+          meta: {
+            name: row.name,
+            type: row.type,
+            source: row.source,
+            updatedAt: row.updatedAt,
+            savedAt: row.savedAt,
+            bytes: row.bytes
+          }
+        };
+      });
+    }).catch(function () { return null; });
+  }
+
+  function soonLocalEvictLRU(max) {
+    max = max || MAX_BLOBS;
+    return soonLocalOpen().then(function (db) {
+      if (!db) return;
+      var tx = db.transaction(['blobs', 'thumbs'], 'readwrite');
+      var blobStore = tx.objectStore('blobs');
+      return reqPromise(blobStore.getAll()).then(function (rows) {
+        if (!rows || rows.length <= max) return txDone(tx);
+        rows.sort(function (a, b) { return (a.savedAt || 0) - (b.savedAt || 0); });
+        var toRemove = rows.length - max;
+        for (var i = 0; i < toRemove; i++) {
+          var k = rows[i].cacheKey;
+          blobStore.delete(k);
+          tx.objectStore('thumbs').delete(k);
+        }
+        return txDone(tx);
+      });
+    }).catch(function () { /* ignore */ });
+  }
+
+  function soonLocalPut(cacheKey, json, meta) {
+    if (!cacheKey || json == null || !idbAvailable) return Promise.resolve(false);
+    meta = meta || {};
+    var jsonObj = typeof json === 'string' ? (function () {
+      try { return JSON.parse(json); } catch (e) { return null; }
+    })() : json;
+    if (!jsonObj) return Promise.resolve(false);
+    var bytes = 0;
+    try { bytes = JSON.stringify(jsonObj).length; } catch (e) { bytes = 0; }
+    var row = {
+      cacheKey: cacheKey,
+      json: jsonObj,
+      name: meta.name || '',
+      type: meta.type != null ? meta.type : (jsonObj.soonType || 1),
+      source: meta.source || '',
+      updatedAt: meta.updatedAt || '',
+      savedAt: Date.now(),
+      bytes: bytes
+    };
+    return soonLocalOpen().then(function (db) {
+      if (!db) return false;
+      var tx = db.transaction('blobs', 'readwrite');
+      tx.objectStore('blobs').put(row);
+      return txDone(tx).then(function () {
+        return soonLocalEvictLRU(MAX_BLOBS).then(function () { return true; });
+      });
+    }).catch(function () { return false; });
+  }
+
+  function soonLocalPutThumb(cacheKey, dataUrl) {
+    if (!cacheKey || !dataUrl || !idbAvailable) return Promise.resolve(false);
+    if (String(dataUrl).length > THUMB_MAX_BYTES) return Promise.resolve(false);
+    return soonLocalOpen().then(function (db) {
+      if (!db) return false;
+      var tx = db.transaction('thumbs', 'readwrite');
+      tx.objectStore('thumbs').put({ cacheKey: cacheKey, dataUrl: dataUrl, savedAt: Date.now() });
+      return txDone(tx).then(function () { return true; });
+    }).catch(function () { return false; });
+  }
+
+  function soonLocalGetThumb(cacheKey) {
+    if (!cacheKey || !idbAvailable) return Promise.resolve('');
+    return soonLocalOpen().then(function (db) {
+      if (!db) return '';
+      var tx = db.transaction('thumbs', 'readonly');
+      return reqPromise(tx.objectStore('thumbs').get(cacheKey)).then(function (row) {
+        return (row && row.dataUrl) ? row.dataUrl : '';
+      });
+    }).catch(function () { return ''; });
+  }
+
+  function soonLocalRemove(cacheKey) {
+    if (!cacheKey || !idbAvailable) return Promise.resolve();
+    return soonLocalOpen().then(function (db) {
+      if (!db) return;
+      var tx = db.transaction(['blobs', 'thumbs'], 'readwrite');
+      tx.objectStore('blobs').delete(cacheKey);
+      tx.objectStore('thumbs').delete(cacheKey);
+      return txDone(tx);
+    }).catch(function () { /* ignore */ });
+  }
+
+  function soonLocalRenameKey(oldKey, newKey, meta) {
+    if (!oldKey || !newKey || oldKey === newKey) return Promise.resolve(false);
+    return soonLocalGet(oldKey).then(function (hit) {
+      if (!hit) return false;
+      return soonLocalPut(newKey, hit.json, Object.assign({}, hit.meta, meta || {})).then(function (ok) {
+        if (!ok) return false;
+        return soonLocalGetThumb(oldKey).then(function (thumb) {
+          var chain = Promise.resolve();
+          if (thumb) chain = soonLocalPutThumb(newKey, thumb);
+          return chain.then(function () { return soonLocalRemove(oldKey); }).then(function () { return true; });
+        });
+      });
+    }).catch(function () { return false; });
+  }
+
+  function soonLocalCacheAndThumb(cacheKey, json, meta) {
+    var thumb = soonExtractThumbFromJson(json);
+    return soonLocalPut(cacheKey, json, meta).then(function (ok) {
+      if (!ok) return false;
+      if (thumb) return soonLocalPutThumb(cacheKey, thumb).then(function () { return true; });
+      return true;
+    });
+  }
+
+  function soonLocalIsTemplateStale(cacheKey, blobMeta) {
+    if (!cacheKey || cacheKey.indexOf('soondesign_template:') !== 0) return false;
+    var tplMeta = window._soonTemplateMeta;
+    if (!tplMeta || !tplMeta.updated_at) return false;
+    if (!blobMeta || !blobMeta.updatedAt) return false;
+    return String(tplMeta.updated_at) !== String(blobMeta.updatedAt);
+  }
+
+  window.soonLocalOpen = soonLocalOpen;
+  window.soonLocalGet = soonLocalGet;
+  window.soonLocalPut = soonLocalPut;
+  window.soonLocalPutThumb = soonLocalPutThumb;
+  window.soonLocalGetThumb = soonLocalGetThumb;
+  window.soonLocalRemove = soonLocalRemove;
+  window.soonLocalRenameKey = soonLocalRenameKey;
+  window.soonLocalEvictLRU = soonLocalEvictLRU;
+  window.soonLocalCacheAndThumb = soonLocalCacheAndThumb;
+  window.soonLocalIsTemplateStale = soonLocalIsTemplateStale;
+  window.soonExtractThumbFromJson = soonExtractThumbFromJson;
+
+  var LS_DROP = ['soondesign_recent', 'soondesign_history', 'soondesign_recent_migrated'];
+  var SS_DROP = ['soondesign_open_file', 'soondesign_open_type', 'soondesign_open_meta', 'soondesign_pending_import'];
+
+  function dropStorageKeys(storage, prefix) {
+    if (!storage) return;
+    try {
+      var rm = [];
+      for (var i = 0; i < storage.length; i++) {
+        var k = storage.key(i);
+        if (k && k.indexOf(prefix) === 0) rm.push(k);
+      }
+      rm.forEach(function (k) { storage.removeItem(k); });
+    } catch (e) { /* ignore */ }
+  }
+
+  function soonClearLocalDesignCache() {
+    try {
+      LS_DROP.forEach(function (k) { localStorage.removeItem(k); });
+      dropStorageKeys(localStorage, 'soondesign_session:');
+      SS_DROP.forEach(function (k) { sessionStorage.removeItem(k); });
+      dropStorageKeys(sessionStorage, 'soondesign_session:');
+    } catch (e) { /* ignore */ }
+    dbPromise = null;
+    if (typeof indexedDB === 'undefined') return Promise.resolve();
+    return new Promise(function (resolve) {
+      var done = function () { resolve(); };
+      try {
+        var req = indexedDB.deleteDatabase(DB_NAME);
+        req.onsuccess = req.onerror = req.onblocked = done;
+      } catch (e2) { done(); }
+    });
+  }
+
+  window.soonClearLocalDesignCache = soonClearLocalDesignCache;
+})();

frontend-web/js/common/soon-recent.js

@@ -0,0 +1,217 @@
+(function () {
+  'use strict';
+
+  var RECENT_KEY = 'soondesign_recent';
+  var MIGRATED_KEY = 'soondesign_recent_migrated';
+  var HISTORY_KEY = 'soondesign_history';
+  var MAX_ITEMS = 20;
+
+  function nowTimeStr() {
+    var d = new Date();
+    function pad(n) { return n < 10 ? '0' + n : String(n); }
+    return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' +
+      pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
+  }
+
+  function readRaw() {
+    try {
+      var raw = localStorage.getItem(RECENT_KEY);
+      if (!raw) return { version: 1, items: [] };
+      var j = JSON.parse(raw);
+      if (!j || !Array.isArray(j.items)) return { version: 1, items: [] };
+      return j;
+    } catch (e) {
+      return { version: 1, items: [] };
+    }
+  }
+
+  function writeRaw(data) {
+    try {
+      localStorage.setItem(RECENT_KEY, JSON.stringify(data));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function soonRecentKindFromKey(key) {
+    if (!key) return 'local';
+    if (key.indexOf('soondesign_file:') === 0) return 'cloud';
+    if (key.indexOf('soondesign_template:') === 0) return 'template';
+    return 'local';
+  }
+
+  function parseFileId(key) {
+    var m = String(key).match(/^soondesign_file:(\d+)/);
+    return m ? parseInt(m[1], 10) : null;
+  }
+
+  function soonRecentList() {
+    return readRaw().items.slice();
+  }
+
+  function soonRecentRemove(key) {
+    if (!key) return;
+    var data = readRaw();
+    data.items = data.items.filter(function (it) { return it.key !== key; });
+    writeRaw(data);
+  }
+
+  function soonRecentUpsert(item) {
+    if (!item || !item.key) return;
+    var key = item.key;
+    var kind = item.kind || soonRecentKindFromKey(key);
+    var type = item.type != null ? item.type : 1;
+    var name = item.name || '';
+    if (!name && typeof window.soonDisplayFileName === 'function') {
+      name = window.soonDisplayFileName(key);
+    }
+    var entry = {
+      key: key,
+      name: name || 'design.soon',
+      type: type,
+      kind: kind,
+      fileId: item.fileId != null ? item.fileId : parseFileId(key),
+      thumbRef: item.thumbRef || key,
+      time: item.time || nowTimeStr()
+    };
+    var data = readRaw();
+    data.items = data.items.filter(function (it) { return it.key !== key; });
+    data.items.unshift(entry);
+    if (data.items.length > MAX_ITEMS) data.items = data.items.slice(0, MAX_ITEMS);
+    writeRaw(data);
+  }
+
+  function soonRecentUpsertFromOpen(fileKey, json) {
+    if (!fileKey) return;
+    var type = 1;
+    if (json) {
+      type = json.soonType ? json.soonType : (json.backBlackPic ? 2 : 1);
+    }
+    var name = '';
+    if (typeof window.soonDisplayFileName === 'function') name = window.soonDisplayFileName(fileKey);
+    var tplMeta = window._soonTemplateMeta;
+    if (tplMeta && tplMeta.name && fileKey.indexOf('soondesign_template:') === 0) {
+      name = tplMeta.name;
+      if (tplMeta.type) type = tplMeta.type;
+    }
+    var fileMeta = window._soonFileMeta;
+    if (fileMeta && fileMeta.name && fileKey.indexOf('soondesign_file:') === 0) {
+      name = fileMeta.name;
+    }
+    soonRecentUpsert({
+      key: fileKey,
+      name: name,
+      type: type,
+      kind: soonRecentKindFromKey(fileKey),
+      fileId: parseFileId(fileKey),
+      thumbRef: fileKey,
+      time: nowTimeStr(),
+      updated_at: (tplMeta && tplMeta.updated_at) ? tplMeta.updated_at : undefined
+    });
+  }
+
+  function soonRecentMigrateFromHistory() {
+    try {
+      if (localStorage.getItem(MIGRATED_KEY) === '1') return;
+    } catch (e) { return; }
+    var histRaw;
+    try {
+      histRaw = localStorage.getItem(HISTORY_KEY);
+    } catch (e) { return; }
+    if (!histRaw) {
+      try { localStorage.setItem(MIGRATED_KEY, '1'); } catch (e2) { /* ignore */ }
+      return;
+    }
+    var hist;
+    try {
+      hist = JSON.parse(histRaw);
+    } catch (e) {
+      try { localStorage.setItem(MIGRATED_KEY, '1'); } catch (e2) { /* ignore */ }
+      return;
+    }
+    var list = (hist && Array.isArray(hist.history)) ? hist.history : [];
+    list.forEach(function (h) {
+      if (!h || !h.path) return;
+      soonRecentUpsert({
+        key: h.path,
+        name: typeof window.soonDisplayFileName === 'function' ? window.soonDisplayFileName(h.path) : h.path,
+        type: h.type || 1,
+        kind: soonRecentKindFromKey(h.path),
+        fileId: parseFileId(h.path),
+        thumbRef: h.path,
+        time: h.time || nowTimeStr()
+      });
+    });
+    try { localStorage.setItem(MIGRATED_KEY, '1'); } catch (e) { /* ignore */ }
+  }
+
+  function soonRecentEnrichFromCloud(items, cloudItems) {
+    if (!items || !items.length || !cloudItems || !cloudItems.length) return items;
+    var byId = {};
+    cloudItems.forEach(function (c) {
+      if (c && c.id != null) byId[c.id] = c;
+    });
+    return items.map(function (it) {
+      if (!it.fileId || !byId[it.fileId]) return it;
+      var c = byId[it.fileId];
+      var copy = Object.assign({}, it);
+      if (c.name) copy.name = c.name;
+      var curKey = it.filePath || it.key;
+      if (c.version != null && typeof window.soonMakeFileKey === 'function') {
+        var newKey = window.soonMakeFileKey(c.id, c.version);
+        if (newKey !== curKey) {
+          soonRecentRemove(curKey);
+          copy.filePath = newKey;
+          copy.key = newKey;
+          copy.thumbRef = newKey;
+          soonRecentUpsert({
+            key: newKey,
+            name: copy.name,
+            type: copy.type,
+            kind: soonRecentKindFromKey(newKey),
+            fileId: c.id,
+            thumbRef: newKey
+          });
+        }
+      }
+      return copy;
+    });
+  }
+
+  function soonRecentOnCloudSave(res, prevKey, type) {
+    if (!res || !res.fileKey) return;
+    var dropKeys = {};
+    if (prevKey && prevKey !== res.fileKey) dropKeys[prevKey] = 1;
+    if (res.fileId != null) {
+      readRaw().items.forEach(function (it) {
+        if (it.fileId === res.fileId && it.key !== res.fileKey) dropKeys[it.key] = 1;
+      });
+    }
+    Object.keys(dropKeys).forEach(function (k) {
+      soonRecentRemove(k);
+      if (typeof window.soonLocalRemove === 'function') window.soonLocalRemove(k);
+    });
+    var name = res.name || '';
+    if (!name && typeof window.soonDisplayFileName === 'function') {
+      name = window.soonDisplayFileName(res.fileKey);
+    }
+    soonRecentUpsert({
+      key: res.fileKey,
+      name: name || 'design.soon',
+      type: type != null ? type : 1,
+      kind: soonRecentKindFromKey(res.fileKey),
+      fileId: res.fileId,
+      thumbRef: res.fileKey
+    });
+  }
+
+  window.soonRecentList = soonRecentList;
+  window.soonRecentRemove = soonRecentRemove;
+  window.soonRecentUpsert = soonRecentUpsert;
+  window.soonRecentUpsertFromOpen = soonRecentUpsertFromOpen;
+  window.soonRecentMigrateFromHistory = soonRecentMigrateFromHistory;
+  window.soonRecentKindFromKey = soonRecentKindFromKey;
+  window.soonRecentEnrichFromCloud = soonRecentEnrichFromCloud;
+  window.soonRecentOnCloudSave = soonRecentOnCloudSave;
+})();

frontend-web/js/common/soon-toast.js

@@ -1,14 +1,81 @@
 (function () {
   'use strict';
 
+  function soonCleanupLayerMask() {
+    if (typeof layer !== 'undefined' && layer.closeAll) {
+      layer.closeAll('loading');
+    }
+    if (window._soonOpenLoadIdx != null && typeof layer !== 'undefined' && layer.close) {
+      try { layer.close(window._soonOpenLoadIdx); } catch (e) { /* ignore */ }
+      window._soonOpenLoadIdx = null;
+    }
+    if (typeof document === 'undefined') return;
+    var layers = document.querySelectorAll('.layui-layer');
+    for (var j = 0; j < layers.length; j++) {
+      if (layers[j].getAttribute('type') !== 'loading') continue;
+      var loadTimes = layers[j].getAttribute('times');
+      if (loadTimes && typeof layer !== 'undefined' && layer.close) {
+        try { layer.close(loadTimes); } catch (e2) { /* ignore */ }
+      }
+    }
+    var shades = document.querySelectorAll('.layui-layer-shade');
+    for (var i = shades.length - 1; i >= 0; i--) {
+      var shade = shades[i];
+      var times = shade.getAttribute('times');
+      var layerEl = times ? document.getElementById('layui-layer' + times) : null;
+      if (!layerEl || layerEl.getAttribute('type') === 'loading') {
+        if (shade.parentNode) shade.parentNode.removeChild(shade);
+      }
+    }
+  }
+
+  function soonLayerDismiss(type) {
+    if (typeof layer !== 'undefined' && layer.closeAll) {
+      layer.closeAll(type);
+    }
+    soonCleanupLayerMask();
+  }
+
+  function soonClearFabricOverlay(canvas) {
+    if (!canvas || !canvas.contextTop) return;
+    if (typeof canvas.clearContext === 'function') {
+      canvas.clearContext(canvas.contextTop);
+    }
+  }
+
+  function soonRefreshDesignCanvases() {
+    var names = ['canvas1', 'canvas2', 'canvas'];
+    for (var n = 0; n < names.length; n++) {
+      var c = window[names[n]];
+      if (!c || typeof c.renderAll !== 'function') continue;
+      if (c.discardActiveObject) c.discardActiveObject();
+      soonClearFabricOverlay(c);
+      if (c.requestRenderAll) c.requestRenderAll();
+      else c.renderAll();
+    }
+  }
+
+  function soonFinishSaveUi() {
+    if (typeof window.soonHideOpenFileLoading === 'function') window.soonHideOpenFileLoading();
+    else soonCleanupLayerMask();
+    soonRefreshDesignCanvases();
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(function () {
+        soonCleanupLayerMask();
+        soonRefreshDesignCanvases();
+      });
+    }
+  }
+
   function soonToast(message, type) {
     if (typeof layer === 'undefined' || !layer.msg) return;
     var skin = 'soon-toast';
     if (type === 'success') skin += ' soon-toast--success';
     else if (type === 'error') skin += ' soon-toast--error';
     else if (type === 'warn') skin += ' soon-toast--warn';
+    var time = type === 'success' ? 2500 : (type === 'error' ? 4200 : 3600);
     layer.msg(message, {
-      time: 2400,
+      time: time,
       shade: 0,
       offset: '72px',
       icon: -1,
@@ -16,5 +83,10 @@
     });
   }
 
+  window.soonCleanupLayerMask = soonCleanupLayerMask;
+  window.soonLayerDismiss = soonLayerDismiss;
+  window.soonClearFabricOverlay = soonClearFabricOverlay;
+  window.soonRefreshDesignCanvases = soonRefreshDesignCanvases;
+  window.soonFinishSaveUi = soonFinishSaveUi;
   window.soonToast = soonToast;
 })();

frontend-web/js/design1.js

@@ -502,7 +502,7 @@ if (ipcRenderer) {
         // 网页端：按顺序动态插入 script，确保 core/ui 执行时 window.$ 已存在
         function loadScript(src, next) {
             var s = document.createElement('script');
-            s.src = src;
+            s.src = (typeof window.soonWithVersion === 'function') ? window.soonWithVersion(src) : src;
             s.onload = s.onerror = function () { if (typeof next === 'function') next(); };
             document.body.appendChild(s);
         }

frontend-web/js/design1/core.js

@@ -6,7 +6,9 @@ $("#object_attribute").css("height", "470px");
 $("#obj_list").css("height", document.body.clientHeight - 520);
 $(".obj_list").css("height", $("#obj_list").height() - 32);
 
-$(".main").show();
+var mainEl = document.querySelector('.layui-fluid.main');
+if (mainEl) mainEl.style.display = 'flex';
+else $(".main").show();
 $(".canvas_box").css("height", document.body.clientHeight - 100);
 zoom = $(".canvas_bg_img").width() / 2787
 $("#canvas1").attr("width", $(".canvas_box").width() / zoom);
@@ -100,10 +102,10 @@ function applyFontList(data) {
         $("#count_font_family").append("<option value='" + item + "'>" + item + "</option>");
     }
 }
-if (typeof ipcRenderer !== 'undefined' && ipcRenderer) {
-    ipcRenderer.on('font-list', function(event, data) { applyFontList(data); });
-} else if (typeof window !== 'undefined' && window.platformBridge && window.platformBridge.getSystemFonts) {
+if (typeof window !== 'undefined' && window.platformBridge && window.platformBridge.getSystemFonts) {
     window.platformBridge.getSystemFonts().then(applyFontList);
+} else if (typeof ipcRenderer !== 'undefined' && ipcRenderer) {
+    ipcRenderer.on('font-list', function(event, data) { applyFontList(data); });
 }
 function applySysLan(data) {
     let lang = localStorage.getItem("lang");
@@ -148,6 +150,7 @@ function applySysLan(data) {
             localStorage.setItem("lang", "zh");
             break;
         case 'zh-TW':
+        case 'ozh':
             s_lan = "ozh";
             // 同步到全局作用域（用于 .jsc 文件加载）
             if (typeof window !== 'undefined') {
@@ -259,7 +262,14 @@ if (typeof ipcRenderer !== 'undefined' && ipcRenderer) {
     applySysLan(window.platformBridge.getLocale());
 }
 function onCloseConfirm() {
-    layer.confirm('<font style="color:black">' + language_str("whetherSave") + '</font>', {
+    if (typeof window.soonConfirmLeaveThen === 'function') {
+        window.soonConfirmLeaveThen(function () {
+            if (ipcRenderer) ipcRenderer.send('run-close');
+            else if (window.platformBridge && window.platformBridge.runClose) window.platformBridge.runClose();
+        });
+        return;
+    }
+    layer.confirm(language_str("whetherSave"), {
         btn: [language_str("save"), language_str("noSave"), language_str("cancel")]
         , btn3: function (index, layero) {}
     }, function (index, layero) {
@@ -373,96 +383,119 @@ window.rotate = function (id) {
     $(`#${id}`).attr("angle", angle);
 }
 
+function soonPlaceBgOnCanvas(image, canvasSelector) {
+    var cw = $(canvasSelector).width() || (document.querySelector(canvasSelector) && document.querySelector(canvasSelector).clientWidth) || 800;
+    var ch = $(canvasSelector).height() || (document.querySelector(canvasSelector) && document.querySelector(canvasSelector).clientHeight) || 600;
+    image.left = (cw - image.width * image.get("scaleX")) / 2;
+    image.top = (ch - image.height * image.get("scaleY")) / 2;
+    image.selectable = false;
+    image.hoverable = false;
+    image.hoverCursor = "default";
+}
+
+function soonOpenPendingDesignFile() {
+    var file = typeof window.soonResolveOpenFileKey === 'function'
+        ? window.soonResolveOpenFileKey(GetFile)
+        : (GetFile().get('file') || '');
+    if (file && file != 'empty') {
+        if (typeof window.soonConsumeOpenMeta === 'function') {
+            window.soonConsumeOpenMeta(file);
+        }
+        window.openFile(file);
+    }
+}
+
 function addBackground() {
-    // 类型改变
-    fabric.Image.fromURL(soonAsset('bg_front_1.png'), function (image) {
-        let width = $("#canvas1").width()
+    if (is_bgi_add || window.is_bgi_add) return;
+    var loadBg = typeof window.soonFabricImageFromAsset === 'function'
+        ? window.soonFabricImageFromAsset
+        : null;
+    var whenReady = typeof window.soonRunWhenCanvasReady === 'function'
+        ? window.soonRunWhenCanvasReady
+        : function (_sel, fn) { fn(); };
 
-        image.left = ($("#canvas1").width() - image.width * image.get("scaleX")) / 2;
-        image.top = ($("#canvas1").height() - image.height * image.get("scaleY")) / 2;
-
-        image.selectable = false;
-        image.hoverable = false;
-        image.hoverCursor = "default"
-        image.setSrc(image.toDataURL(), function (image) {
-            image.scale(1, 1);
-            background_image1 = image;
-            background_image = background_image1;
-            window.background_image1 = background_image1;
-            window.background_image = background_image;
-            canvas.add(image);
-            canvas.renderAll();
-            //pre_objs1.push(JSON.stringify(objs1));
-            //pre_json1.push(canvas1.toJSON(["selectable","hoverable","hoverCursor"]));
-
-            recordObjs1.push(JSON.stringify(objs1));
-            recordJson1.push(canvas1.toJSON(TO_JSON_PROPERTIES));
-        });
-        // 类型改变
-        fabric.Image.fromURL(soonAsset('bg_back.png'), function (image) {
-            image.left = ($("#canvas2").width() - image.width) / 2;
-            image.top = ($("#canvas2").height() - image.height) / 2;
-
-            image.selectable = false;
-            image.hoverable = false;
-            image.hoverCursor = "default"
-
-            image.setSrc(image.toDataURL(), function (image) {
-                background_image2 = image;
-                window.background_image2 = background_image2;
-                canvas2.add(image);
+    function finishBack(backImg) {
+        if (backImg) {
+            backImg.objectCaching = true;
+            soonPlaceBgOnCanvas(backImg, '#canvas2');
+            background_image2 = backImg;
+            window.background_image2 = backImg;
+            canvas2.add(backImg);
             canvas2.renderAll();
-                //pre_objs2.push(JSON.stringify(objs2));
-                //pre_json2.push(canvas2.toJSON(["selectable","hoverable","hoverCursor"]));
-
             recordObjs2.push(JSON.stringify(objs2));
             recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES));
-
-                let file = GetFile().get('file');
-                if (!file && typeof sessionStorage !== 'undefined') {
-                    try {
-                        file = sessionStorage.getItem('soondesign_open_file');
-                        if (file) {
-                            sessionStorage.removeItem('soondesign_open_file');
-                            sessionStorage.removeItem('soondesign_open_type');
         }
-                    } catch (e) {}
-                }
-                if (file && file != 'empty') {
-                    if (file.indexOf('soondesign_file:') === 0 && typeof sessionStorage !== 'undefined') {
-                        try {
-                            var metaRaw = sessionStorage.getItem('soondesign_open_meta');
-                            if (metaRaw) {
-                                window._soonFileMeta = JSON.parse(metaRaw);
-                                sessionStorage.removeItem('soondesign_open_meta');
-                            }
-                        } catch (e) {}
-                    }
-                    var p = window.openFile(file)
-                    if (p && p.then) p.then(function() {}, function() {})
-                }
-            });
-        });
         is_bgi_add = true;
-    });
+        window.is_bgi_add = true;
+        soonOpenPendingDesignFile();
+    }
+
+    function startLoad() {
+        if (!loadBg) return;
+        loadBg('bg_front_1.png', function (frontImg) {
+            if (!frontImg) return;
+            frontImg.objectCaching = true;
+            frontImg.scale(1, 1);
+            soonPlaceBgOnCanvas(frontImg, '#canvas1');
+            background_image1 = frontImg;
+            background_image = frontImg;
+            window.background_image1 = frontImg;
+            window.background_image = frontImg;
+            canvas.add(frontImg);
+            canvas.renderAll();
+            recordObjs1.push(JSON.stringify(objs1));
+            recordJson1.push(canvas1.toJSON(TO_JSON_PROPERTIES));
+            loadBg('bg_back.png', finishBack, function () { loadBg('bg_back.png', finishBack, null, 2, true); }, 2, true);
+        }, function () {
+            setTimeout(startLoad, 200);
+        }, 2, true);
+    }
+
+    whenReady('#canvas1', startLoad);
 }
 
 // 将 updateControls 附加到 window 对象，确保在 eval() 加载 .jsc 文件时也能访问
-window.updateControls = function updateControls() {
-    // 使用 window.canvas 和 window.background_image 作为后备，确保在 eval() 执行时也能访问
+window._soonSyncingFontControls = false;
+
+function soonFontSizeUiVal(fontSizePx) {
+    var d = window.dpi || 600;
+    var uiVal = parseFloat(fontSizePx) * 72 / d;
+    if (uiVal % 0.5 !== 0) uiVal = Math.round(uiVal * 2) / 2;
+    return uiVal;
+}
+
+function soonSyncActiveFontSizeInput(activeObj, currentCanvas) {
+    if (!activeObj) return;
+    var idx = getIndex(activeObj, currentCanvas);
+    if (idx <= 0) return;
+    var objData = (window.objs || objs)[idx - 1];
+    if (!objData) return;
+    var uiVal = soonFontSizeUiVal(activeObj.get('fontSize'));
+    if (objData.type === 3) $("#text_size").val(uiVal);
+    else if (objData.type === 4) $("#out_text_size").val(uiVal);
+    else if (objData.type === 10) $("#count_size").val(uiVal);
+}
+
+window.updateControls = function () {
     const currentCanvas = window.canvas || canvas;
     const currentBackgroundImage = window.background_image || background_image;
     if (!currentCanvas || !currentCanvas.getActiveObject()) return;
-    $("#text_r").val(currentCanvas.getActiveObject().get("angle").toFixed(0));
-    $("#text_x").val((currentCanvas.getActiveObject().get("left") - currentBackgroundImage.left).toFixed(0));
-    $("#text_y").val((currentCanvas.getActiveObject().get("top") - currentBackgroundImage.top).toFixed(0));
-    $("#text_h").val((currentCanvas.getActiveObject().get("scaleY") * currentCanvas.getActiveObject().get("height")).toFixed(0));
-    $("#text_w").val((currentCanvas.getActiveObject().get("scaleX") * currentCanvas.getActiveObject().get("width")).toFixed(0));
-    // 根据锁定状态显示图标（使用lockMovementX判断，因为锁定时会设置所有lock属性）
-    if (currentCanvas.getActiveObject().get("lockMovementX")) {
-        $("#lock_img").attr("src", soonAsset("lock20.png"))//已锁定
+    const activeObj = currentCanvas.getActiveObject();
+    window._soonSyncingFontControls = true;
+    try {
+        $("#text_r").val(activeObj.get("angle").toFixed(0));
+        $("#text_x").val((activeObj.get("left") - currentBackgroundImage.left).toFixed(0));
+        $("#text_y").val((activeObj.get("top") - currentBackgroundImage.top).toFixed(0));
+        $("#text_h").val((activeObj.get("scaleY") * activeObj.get("height")).toFixed(0));
+        $("#text_w").val((activeObj.get("scaleX") * activeObj.get("width")).toFixed(0));
+        soonSyncActiveFontSizeInput(activeObj, currentCanvas);
+        if (activeObj.get("lockMovementX")) {
+            $("#lock_img").attr("src", soonAsset("lock20.png"));
         } else {
-        $("#lock_img").attr("src", soonAsset("unlock20.png"))//未锁定
+            $("#lock_img").attr("src", soonAsset("unlock20.png"));
+        }
+    } finally {
+        window._soonSyncingFontControls = false;
     }
 };
 // 向后兼容
@@ -1517,7 +1550,20 @@ function handleObjectMoving(e) {
         obj.set("angle", angleDeg);
         obj.set("flipped", flipped);
     }
-    updateControls();
+    soonScheduleUpdateControls();
+}
+
+var _soonUpdateControlsRaf = 0;
+function soonScheduleUpdateControls() {
+    if (_soonUpdateControlsRaf) return;
+    _soonUpdateControlsRaf = requestAnimationFrame(function () {
+        _soonUpdateControlsRaf = 0;
+        window.updateControls();
+    });
+}
+
+function soonDesign1SetInteracting(on) {
+    window._soonDesign1Interacting = !!on;
 }
 
 // 辅助函数：检查对象是否被锁定
@@ -1625,17 +1671,28 @@ function initCanvasEvents() {
     _canvasEventsInitialized = true;
 
     [canvas1, canvas2].forEach(currentCanvas => {
+        var _mouseMoveRaf = 0;
+        var _mouseMovePending = null;
         // 1. 鼠标移动
         currentCanvas.on("mouse:move", (e) => {
+            _mouseMovePending = { e: e, canvas: currentCanvas };
+            if (_mouseMoveRaf) return;
+            _mouseMoveRaf = requestAnimationFrame(function () {
+                _mouseMoveRaf = 0;
+                var payload = _mouseMovePending;
+                if (!payload) return;
+                var moveEvent = payload.e;
+                var moveCanvas = payload.canvas;
                 let offsetX = 0, offsetY = 0;
-            if (currentCanvas === canvas2 && typeof background_image !== 'undefined') {
+                if (moveCanvas === canvas2 && typeof background_image !== 'undefined') {
                     offsetX = background_image.left;
                     offsetY = background_image.top;
                 }
-            if (e.pointer) {
-                $("#posText").text("X: " + (e.pointer.x - offsetX).toFixed(0) + " Y: " + (e.pointer.y - offsetY).toFixed(0));
+                if (moveEvent.pointer) {
+                    $("#posText").text("X: " + (moveEvent.pointer.x - offsetX).toFixed(0) + " Y: " + (moveEvent.pointer.y - offsetY).toFixed(0));
                 }
-            updateRulerGuides(e.e);
+                updateRulerGuides(moveEvent.e);
+            });
         });
 
         // 2. 鼠标移出
@@ -1728,12 +1785,19 @@ function initCanvasEvents() {
                     return false;
                 }
             }
+            soonDesign1SetInteracting(true);
             handleObjectMoving(e);
         });
 
         // 6. 变换事件
-        currentCanvas.on("object:rotating", updateControls);
-        currentCanvas.on("object:scaling", updateControls);
+        currentCanvas.on("object:rotating", function () {
+            soonDesign1SetInteracting(true);
+            soonScheduleUpdateControls();
+        });
+        currentCanvas.on("object:scaling", function () {
+            soonDesign1SetInteracting(true);
+            soonScheduleUpdateControls();
+        });
         currentCanvas.on("object:rotated", () => { window.recordState(); });
         currentCanvas.on('text:editing:entered', () => { _textEdit = true; });
         currentCanvas.on('text:editing:exited', () => { _textEdit = false; });
@@ -1741,6 +1805,7 @@ function initCanvasEvents() {
 
         // 7. 对象修改后
         currentCanvas.on('object:modified', function (event) {
+            try {
                 if (currentCanvas.getActiveObjects().length > 1) return;
                 let idx = getIndex(event.target);
                 if (idx <= 0) return;
@@ -1754,26 +1819,31 @@ function initCanvasEvents() {
                     return;
                 }
                 let target = event.target;
+                var modAction = event.action || (event.transform && event.transform.action);
 
-            if ([3, 4, 10].includes(objData.type)) {
-                target.fontSize = (target.fontSize * target.scaleX).toFixed(0);
-                target.scaleX = 1; target.scaleY = 1;
+                if ([3, 4, 10].includes(objData.type) && modAction === 'scale') {
+                    target.set({
+                        fontSize: Math.round(target.fontSize * (target.scaleX || 1)),
+                        scaleX: 1,
+                        scaleY: 1,
+                    });
                     target._clearCache();
-                if (objData.type == 3) $("#text_size").val(target.fontSize);
-                if (objData.type == 4) $("#out_text_size").val(target.fontSize);
-                if (objData.type == 10) $("#count_size").val(target.fontSize);
                     currentCanvas.renderAll();
-                updateControls();
-            } else if (objData.type == 5) {
-                target.width *= target.scaleX; target.height *= target.scaleY;
-                target.scaleX = 1; target.scaleY = 1;
-                updateControls();
+                } else if (objData.type == 5 && modAction === 'scale') {
+                    target.width *= target.scaleX || 1;
+                    target.height *= target.scaleY || 1;
+                    target.scaleX = 1;
+                    target.scaleY = 1;
                 }
                 window.recordState();
                 // 更新对象列表以同步锁状态
                 if (typeof window.updateList === 'function') {
                     window.updateList();
                 }
+            } finally {
+                soonDesign1SetInteracting(false);
+                updateControls();
+            }
         });
         // ==================================================
         // 8. 【完美修复版】渲染后绘制：外部蒙版 + 中心圆孔 (修复三角形Bug)
@@ -1782,7 +1852,7 @@ function initCanvasEvents() {
             const ctx = currentCanvas.getContext();
             let bgObj = (currentCanvas === canvas1) ? background_image1 : background_image2;
 
-            if (bgObj) {
+            if (bgObj && !window._soonSkipDesign1CdMask) {
                 const width = currentCanvas.width;
                 const height = currentCanvas.height;
 
@@ -1826,11 +1896,13 @@ function initCanvasEvents() {
                 ctx.arc(cx, cy, r_inner, 0, Math.PI * 2, false);
 
                 ctx.closePath();
-                ctx.fillStyle = "rgba(0, 0, 0, 0.9)"; // 90% 遮罩
+                ctx.fillStyle = '#31373D';
                 ctx.fill();
                 ctx.restore();
             }
 
+            if (window._soonDesign1Interacting) return;
+            
             // 在遮罩之后重新绘制辅助线，确保辅助线在最上层
             const objects = currentCanvas.getObjects();
             objects.forEach(obj => {
@@ -2044,6 +2116,7 @@ function initRulers() {
 
     // --- 3. 绘制标尺 (核心绘制循环) ---
     function updateAndDraw() {
+        if (window._soonDesign1Interacting) return;
         // 每次重新获取尺寸，确保使用最新值
         // 使用多种方法尝试获取实际尺寸，确保准确
         let currentCanvasWidth = canvasWrapper.width() || canvasWrapper.outerWidth() || canvasWrapper[0].getBoundingClientRect().width || 800;

frontend-web/js/design1/output.js

@@ -52,9 +52,105 @@ async function saveImageAsPNG(buffer) {
     }
 }
 
-// 将 display_func 附加到 window 对象，确保全局可访问
+/** 孔径规则与 core.js after:render 一致 */
+function soonDesign1GetHoleDiameterMm(canvas) {
+    var hole = 24;
+    if (canvas === window.canvas1 && typeof window.bg_version !== 'undefined' && window.bg_version === 2) {
+        hole = 42;
+    }
+    return hole;
+}
+
+/** 圆外四角与中心孔 alpha 置 0，保留环形可打印区 */
+function soonDesign1ApplyDiscAlpha(tctx, w, h, holeDiameterMm) {
+    var cx = w / 2;
+    var cy = h / 2;
+    var rOuter = w / 2;
+    var rInner = rOuter * (holeDiameterMm / 120);
+    tctx.save();
+    tctx.globalCompositeOperation = 'destination-in';
+    tctx.fillStyle = '#fff';
+    tctx.beginPath();
+    tctx.arc(cx, cy, rOuter, 0, Math.PI * 2);
+    tctx.moveTo(cx + rInner, cy);
+    tctx.arc(cx, cy, rInner, 0, Math.PI * 2, true);
+    tctx.fill('evenodd');
+    tctx.restore();
+}
+
+function soonDesign1CaptureCanvasRect(canvas, outW, outH, format, quality, clipDisc) {
+    var bg = window.background_image1 || window.background_image;
+    if (!canvas || !bg) return '';
+    var srcEl = canvas.lowerCanvasEl;
+    if (!srcEl || !srcEl.getContext) return '';
+    var sx = bg.scaleX == null ? 1 : bg.scaleX;
+    var sy = bg.scaleY == null ? 1 : bg.scaleY;
+    var sw = bg.width * sx;
+    var sh = bg.height * sy;
+    var retina = (typeof canvas.getRetinaScaling === 'function') ? canvas.getRetinaScaling() : 1;
+    outW = outW || Math.round(sw);
+    outH = outH || Math.round(sh);
+    var tmp = document.createElement('canvas');
+    tmp.width = outW;
+    tmp.height = outH;
+    var tctx = tmp.getContext('2d');
+    tctx.drawImage(
+        srcEl,
+        bg.left * retina, bg.top * retina, sw * retina, sh * retina,
+        0, 0, outW, outH
+    );
+    if (clipDisc && format !== 'jpeg') {
+        soonDesign1ApplyDiscAlpha(tctx, outW, outH, soonDesign1GetHoleDiameterMm(canvas));
+    }
+    if (format === 'jpeg') return tmp.toDataURL('image/jpeg', quality == null ? 0.75 : quality);
+    return tmp.toDataURL('image/png');
+}
+
+/** 导出/打印：跳过编辑器暗蒙版，按光盘环形裁剪 */
+function soonDesign1CaptureDiscPng(canvas, outW, outH) {
+    window._soonSkipDesign1CdMask = true;
+    try {
+        if (canvas.discardActiveObject) canvas.discardActiveObject();
+        canvas.renderAll();
+        return soonDesign1CaptureCanvasRect(canvas, outW, outH, 'png', null, true);
+    } finally {
+        window._soonSkipDesign1CdMask = false;
+        canvas.renderAll();
+    }
+}
+
+function soonBuildDesign1SavePreviewPic(canvas) {
+    var THUMB_MAX = 102400;
+    var c1 = window.canvas1;
+    if (!canvas || (c1 && canvas !== c1)) return '';
+    var hidden = [];
+    canvas.getObjects().forEach(function (obj) {
+        if (obj.isGuideLine) {
+            hidden.push(obj);
+            obj.visible = false;
+        }
+    });
+    if (canvas.discardActiveObject) canvas.discardActiveObject();
+    window._soonSkipDesign1CdMask = true;
+    canvas.renderAll();
+
+    var url = '';
+    var sizes = [280, 240, 200, 180, 160];
+    for (var i = 0; i < sizes.length; i++) {
+        url = soonDesign1CaptureCanvasRect(canvas, sizes[i], sizes[i], 'png', null, true);
+        if (url && url.indexOf('data:image/') === 0 && url.length <= THUMB_MAX) break;
+        url = '';
+    }
+
+    window._soonSkipDesign1CdMask = false;
+    hidden.forEach(function (obj) { obj.visible = true; });
+    canvas.renderAll();
+    if (canvas.requestRenderAll) canvas.requestRenderAll();
+    return url;
+}
+window.soonBuildDesign1SavePreviewPic = soonBuildDesign1SavePreviewPic;
+
 window.display_func = function display_func(img1, img2, img3) {
-    if (typeof window.soonGuardMemberPreview === 'function' && !window.soonGuardMemberPreview()) return;
     $("#base_control").hide();
     $("#line_control").hide();
     $("#pic_control").hide();
@@ -219,13 +315,16 @@ window.display_func = function display_func(img1, img2, img3) {
         left: all_left
     });
 
-    g3.push(img1);
-    let url3 = new fabric.Group(g3).toDataURL({
-        height: 2787,
-        width: 2787,
-        top: all_top,
-        left: all_left
+    var hiddenForPreview = [];
+    canvas1.getObjects().forEach(function (o) {
+        if (o.isGuideLine) {
+            hiddenForPreview.push(o);
+            o.visible = false;
+        }
     });
+    let url3 = soonDesign1CaptureDiscPng(canvas1, 2787, 2787);
+    hiddenForPreview.forEach(function (o) { o.visible = true; });
+    canvas1.renderAll();
     let url5 = new fabric.Group(g5).toDataURL({
         height: 2787,
         width: 2787,
@@ -403,6 +502,7 @@ window.display_func = function display_func(img1, img2, img3) {
 
     layer.open({
         type: 1,
+        skin: 'soon-layer',
         area: [w, h],
         title: language_str("display"), //不显示标题栏"预览"
         shadeClose: true, //点击遮罩关闭
@@ -418,16 +518,33 @@ window.display_func = function display_func(img1, img2, img3) {
                 </div>
             </div>`,
         btn: [language_str("output"), "打印"],//'导出'
-        btn1: function (index, layero) {
+        btn1: function () {
+            if (typeof window.soonGuardPreviewDeliver === 'function') {
+                window.soonGuardPreviewDeliver(language_str('output') || '导出', function () {
                     saveImageAsPNG(buffer);
+                });
+            } else {
+                saveImageAsPNG(buffer);
+            }
+            return false;
         },
         btn2: function () {
+            if (typeof window.soonGuardPreviewDeliver === 'function') {
+                window.soonGuardPreviewDeliver('打印', function () {
                     if (window.platformBridge && window.platformBridge.printPdf) {
                         var blob = buffer instanceof Uint8Array ? new Blob([buffer], { type: 'image/png' }) : new Blob([buffer], { type: 'image/png' });
                         window.platformBridge.printPdf(blob);
                     } else if (typeof printJS === 'function') {
                         printJS({ printable: url3, type: 'image', style: 'img { width: 100%; height: auto; }' });
                     }
+                });
+            } else if (window.platformBridge && window.platformBridge.printPdf) {
+                var blob = buffer instanceof Uint8Array ? new Blob([buffer], { type: 'image/png' }) : new Blob([buffer], { type: 'image/png' });
+                window.platformBridge.printPdf(blob);
+            } else if (typeof printJS === 'function') {
+                printJS({ printable: url3, type: 'image', style: 'img { width: 100%; height: auto; }' });
+            }
+            return false;
         },
         end: function () {
             if (printBlobUrl) try { URL.revokeObjectURL(printBlobUrl); } catch (e) {}
@@ -456,7 +573,6 @@ window.display_func = function display_func(img1, img2, img3) {
 
 // 将 output 附加到 window 对象，确保全局可访问
 window.output = function output(callback = null, _save = save) {
-    if (typeof window.soonGuardMemberExport === 'function' && !window.soonGuardMemberExport()) return;
     // 类型改变
     fabric.Image.fromURL(soonAsset('op_1.png'), function (i1) {
         i1.left = background_image.left;
@@ -599,12 +715,16 @@ window.output = function output(callback = null, _save = save) {
                 left: all_left
             });
             g3.push(img1);
-            let url3 = new fabric.Group(g3).toDataURL({
-                height: 2787,
-                width: 2787,
-                top: all_top,
-                left: all_left
+            var hiddenForSave = [];
+            canvas1.getObjects().forEach(function (o) {
+                if (o.isGuideLine) {
+                    hiddenForSave.push(o);
+                    o.visible = false;
+                }
             });
+            let url3 = soonDesign1CaptureDiscPng(canvas1, 2787, 2787);
+            hiddenForSave.forEach(function (o) { o.visible = true; });
+            canvas1.renderAll();
             let url5 = new fabric.Group(g5).toDataURL({
                 height: 2787,
                 width: 2787,
@@ -1081,16 +1201,25 @@ window.regenerateQrCodesAndBarcodes = function regenerateQrCodesAndBarcodes(canv
 // 使用 window.openFile 避免与浏览器原生的 window.open 冲突
 window.openFile = function open(file, jAlready) {
     if (!file) return;
+    if (typeof window.soonOnOpenDesignFile === 'function') window.soonOnOpenDesignFile(file);
     if (typeof window.soonBindFileMeta === 'function') window.soonBindFileMeta(file);
     function doOpenWithJson(j) {
-        if (!j || !background_image) return;
-        if (!j.f || !j.f.objects || !Array.isArray(j.f.objects) || j.f.objects.length === 0) return;
-        if (!j.b || !j.b.objects || !Array.isArray(j.b.objects) || j.b.objects.length === 0) {
-            j.b = { version: '4.6.0', objects: [], hoverCursor: 'move' };
+        if (typeof window.soonNormalizeSoonJson === 'function') {
+            j = window.soonNormalizeSoonJson(j);
+        }
+        if (!j) {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            return;
+        }
+        function runOpen() {
+        var bgRef = window.background_image1 || window.background_image;
+        if (!bgRef) {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            return;
         }
         openAs.name = file;
-        var left = background_image.left;
-        var top = background_image.top;
+        var left = bgRef.left;
+        var top = bgRef.top;
         var new_left = j.f.objects[0].left;
         var new_top = j.f.objects[0].top;
         for (var i = 0; i < j.f.objects.length; i++) {
@@ -1159,21 +1288,42 @@ window.openFile = function open(file, jAlready) {
                     var j2 = canvas2.toJSON(props);
                     recordJson2.push(j2);
                 }, 0);
+                if (typeof window.soonTryConsumeCloudImport === 'function') window.soonTryConsumeCloudImport(file);
+                if (typeof window.soonRecentUpsertFromOpen === 'function') window.soonRecentUpsertFromOpen(file, j);
             }
         });
         }
+        if (typeof window.soonRunWhenDesignBgReady === 'function') {
+            window.soonRunWhenDesignBgReady(runOpen, function () {
+                if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            });
+        } else {
+            runOpen();
+        }
+    }
     if (arguments.length >= 2 && jAlready) {
         doOpenWithJson(jAlready);
         openAs.name = file;
+        if (typeof window.soonTryConsumeCloudImport === 'function') window.soonTryConsumeCloudImport(file);
         return;
     }
     if (window.platformBridge && window.platformBridge.readJsonFile) {
+        if (typeof window.soonShowOpenFileLoading === 'function') window.soonShowOpenFileLoading();
         return window.platformBridge.readJsonFile(file).then(function(j) {
+            if (typeof window.soonHideOpenFileLoading === 'function') window.soonHideOpenFileLoading();
             if (j) {
                 doOpenWithJson(j);
                 openAs.name = file;
+            } else if (typeof window.soonReportOpenLoadError === 'function') {
+                window.soonReportOpenLoadError('模板/文件加载失败');
             }
-        }).catch(function() {});
+        }).catch(function () {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            else if (typeof window.soonHideOpenFileLoading === 'function') window.soonHideOpenFileLoading();
+        }).finally(function () {
+            if (typeof window.soonHideOpenFileLoading === 'function') window.soonHideOpenFileLoading();
+            if (typeof window.soonCleanupLayerMask === 'function') window.soonCleanupLayerMask();
+        });
     }
     try {
         var fs = typeof require !== 'undefined' ? require('fs') : null;
@@ -1223,6 +1373,7 @@ function cleanupSrcFields(jsonObjects, objsArray) {
 function applyCloudWriteResult(result, fallbackName) {
   if (result && result.fileKey) {
     openAs.name = result.fileKey;
+    if (typeof window.soonMarkSaveInPlace === 'function') window.soonMarkSaveInPlace(result.fileKey);
     return result.fileKey;
   }
   return fallbackName;
@@ -1236,9 +1387,31 @@ function cloudSaveSuccessLabel(res, fallback) {
   return fallback || '';
 }
 
+function soonPageDesignType() {
+  try {
+    var p = new URLSearchParams(location.search);
+    return Number(p.get('type')) || 1;
+  } catch (e) {
+    return 1;
+  }
+}
+
 function onCloudWriteDone(res, fallback, callback) {
+  if (typeof window.soonFinishSaveUi === 'function') window.soonFinishSaveUi();
+  else if (typeof window.soonCleanupLayerMask === 'function') window.soonCleanupLayerMask();
   applyCloudWriteResult(res, fallback);
-  layer.msg(language_str("saveSucc") + cloudSaveSuccessLabel(res, fallback));
+  if (res && res.fileKey && typeof window.soonClearPendingImport === 'function') {
+    window.soonClearPendingImport();
+  }
+  if (typeof window.soonRecentOnCloudSave === 'function') {
+    window.soonRecentOnCloudSave(res, fallback, soonPageDesignType());
+  }
+  var msg = language_str("saveSucc") + cloudSaveSuccessLabel(res, fallback);
+  if (res && res.syncFailed) {
+    msg = '已保存到本地，云端同步失败';
+  }
+  if (typeof window.soonToast === 'function') window.soonToast(msg, res && res.syncFailed ? 'warn' : 'success');
+  else layer.msg(msg, { shade: 0, time: 2500 });
   if (callback && typeof callback === 'function') callback();
 }
 
@@ -1280,35 +1453,39 @@ function saveAs(op1, callback) {
     let o = { f: j, b: {}, fo: objs1, bo: objs2 };
     let con_o = Object.assign(o, op1);
     if (!guardWebSave()) return;
+    var prevOpenKey = openAs.name || '';
+    if (typeof window.soonApplySavePreview === 'function') window.soonApplySavePreview(con_o, canvas1);
+    if (typeof window.soonRefreshDesignCanvases === 'function') window.soonRefreshDesignCanvases();
+    con_o.soonType = 1;
     var dialogApi = (typeof dialog !== 'undefined' && dialog) ? dialog : (window.platformBridge && window.platformBridge.showSaveDialog ? { showSaveDialog: function(opts) { return window.platformBridge.showSaveDialog(opts); } } : null);
     if (!dialogApi) return;
     dialogApi.showSaveDialog({
         title: language_str("saveFile"),
         filters: [{ name: 'Soon File Type', extensions: ['soon'] }],
-        defaultPath: openAs.name || undefined
+        defaultPath: typeof window.soonSaveDialogDefaultPath === 'function' ? window.soonSaveDialogDefaultPath(openAs.name) : openAs.name
     }).then(function(result) {
         if (result.canceled) return;
-        var fp = result.filePath || (result.fileHandle && result.fileHandle.name);
+        var fp = typeof window.soonEnsureSaveFileName === 'function'
+            ? window.soonEnsureSaveFileName(result.filePath || (result.fileHandle && result.fileHandle.name))
+            : (result.filePath || (result.fileHandle && result.fileHandle.name));
         if (!fp) return;
-        var pathExt = (typeof window !== 'undefined' && window.path && window.path.extname) ? window.path.extname(fp) : (fp.indexOf('.') >= 0 ? fp.slice(fp.lastIndexOf('.')) : '');
-        if (pathExt !== '.soon') fp = (fp || 'design').replace(/\.soon$/i, '') + '.soon';
         var content = JSON.stringify(con_o);
-        con_o.soonType = 1;
-        if (window.platformBridge && window.platformBridge.writeFile) {
-            window.platformBridge.writeFile(fp, content).then(function (res) {
-                onCloudWriteDone(res, fp, callback);
-            }).catch(function () {});
-            return;
-        }
+        if (typeof window.soonWriteSoonContentWeb === 'function' &&
+            window.soonWriteSoonContentWeb(fp, content, prevOpenKey, function (res, pk) {
+              onCloudWriteDone(res, pk, callback);
+            })) return;
         var fs = typeof require !== 'undefined' ? require('fs') : null;
         if (fs) {
             fs.writeFileSync(result.filePath || fp, content, 'utf8');
             openAs.name = result.filePath || fp;
+            if (typeof window.soonMarkSaveInPlace === 'function') window.soonMarkSaveInPlace(openAs.name);
             layer.msg(language_str("saveSucc") + openAs.name);
             saveHistory();
             if (callback && typeof callback === 'function') callback();
         }
-    }).catch(function(err) {});
+    }).catch(function (err) {
+        if (typeof window.soonReportSaveError === 'function') window.soonReportSaveError(err);
+    });
 }
 
 function save(op1, callback) {
@@ -1345,15 +1522,19 @@ function save(op1, callback) {
     let o = { f: j, b: {}, fo: objs1, bo: objs2 };
     let con_o = Object.assign(o, op1);
     if (!guardWebSave()) return;
-    if (openAs.name != "") {
+    var prevOpenKey = openAs.name || '';
+    if (typeof window.soonApplySavePreview === 'function') window.soonApplySavePreview(con_o, canvas1);
+    if (typeof window.soonRefreshDesignCanvases === 'function') window.soonRefreshDesignCanvases();
     con_o.soonType = 1;
     var content = JSON.stringify(con_o);
-        if (window.platformBridge && window.platformBridge.writeFile) {
-            window.platformBridge.writeFile(openAs.name, content).then(function (res) {
-                onCloudWriteDone(res, openAs.name, callback);
-            }).catch(function () {});
-            return;
-        }
+    var needsDialog = typeof window.soonNeedsSaveDialog === 'function'
+      ? window.soonNeedsSaveDialog(openAs.name)
+      : !openAs.name;
+    if (openAs.name && !needsDialog) {
+        if (typeof window.soonWriteSoonContentWeb === 'function' &&
+            window.soonWriteSoonContentWeb(openAs.name, content, prevOpenKey, function (res, pk) {
+              onCloudWriteDone(res, pk, callback);
+            })) return;
         var fs = typeof require !== 'undefined' ? require('fs') : null;
         if (fs) {
             fs.writeFileSync(openAs.name, content, 'utf8');
@@ -1368,36 +1549,47 @@ function save(op1, callback) {
     dialogApi.showSaveDialog({
         title: language_str("saveFile"),
         filters: [{ name: 'Soon File Type', extensions: ['soon'] }],
-        defaultPath: openAs.name || undefined
-    }).then(async function(result) {
+        defaultPath: typeof window.soonSaveDialogDefaultPath === 'function' ? window.soonSaveDialogDefaultPath(openAs.name) : openAs.name
+    }).then(function(result) {
         if (result.canceled) return;
-        var fp = result.filePath || (result.fileHandle && result.fileHandle.name);
+        var fp = typeof window.soonEnsureSaveFileName === 'function'
+            ? window.soonEnsureSaveFileName(result.filePath || (result.fileHandle && result.fileHandle.name))
+            : (result.filePath || (result.fileHandle && result.fileHandle.name));
         if (!fp) return;
-        var pathExt = (typeof window !== 'undefined' && window.path && window.path.extname) ? window.path.extname(fp) : (fp.indexOf('.') >= 0 ? fp.slice(fp.lastIndexOf('.')) : '');
-        if (pathExt !== '.soon') fp = (fp || 'design').replace(/\.soon$/i, '') + '.soon';
-        var content = JSON.stringify(con_o);
-        con_o.soonType = 1;
-        if (window.platformBridge && window.platformBridge.writeFile) {
-            window.platformBridge.writeFile(fp, content).then(function (res) {
-                onCloudWriteDone(res, fp, callback);
-            }).catch(function () {});
-            return;
-        }
+        if (typeof window.soonWriteSoonContentWeb === 'function' &&
+            window.soonWriteSoonContentWeb(fp, content, prevOpenKey, function (res, pk) {
+              onCloudWriteDone(res, pk, callback);
+            })) return;
         var fs = typeof require !== 'undefined' ? require('fs') : null;
         if (fs) {
             fs.writeFileSync(result.filePath || fp, content, 'utf8');
             openAs.name = result.filePath || fp;
+            if (typeof window.soonMarkSaveInPlace === 'function') window.soonMarkSaveInPlace(openAs.name);
             layer.msg(language_str("saveSucc") + openAs.name);
             saveHistory();
             if (callback && typeof callback === 'function') callback();
         }
-    }).catch(function(err) {});
+    }).catch(function (err) {
+        if (typeof window.soonReportSaveError === 'function') window.soonReportSaveError(err);
+    });
 }
 
 window.saveHistory = function saveHistory() {
-    if (typeof window.soonIsWebPortal === 'function' && window.soonIsWebPortal()) return;
-    function doWrite(j) {
     var currentPath = openAs.name;
+    if (!currentPath) return;
+    if (window.platformBridge && window.fs == null) {
+        if (typeof window.soonRecentUpsert === 'function') {
+            window.soonRecentUpsert({
+                key: currentPath,
+                name: typeof window.soonDisplayFileName === 'function' ? window.soonDisplayFileName(currentPath) : currentPath,
+                type: soonPageDesignType(),
+                kind: typeof window.soonRecentKindFromKey === 'function' ? window.soonRecentKindFromKey(currentPath) : 'local',
+                thumbRef: currentPath
+            });
+        }
+        return;
+    }
+    function doWrite(j) {
         if (!currentPath) return;
         var pathForHistory = currentPath;
         if (window.platformBridge && currentPath.indexOf('soondesign_session:') !== 0 && currentPath.indexOf('soondesign_file:') !== 0) {

frontend-web/js/design2.js

@@ -495,7 +495,7 @@ if (ipcRenderer) {
     if (typeof require === 'undefined') {
         function loadScript(src, next) {
             var s = document.createElement('script');
-            s.src = src;
+            s.src = (typeof window.soonWithVersion === 'function') ? window.soonWithVersion(src) : src;
             s.onload = s.onerror = function () { if (typeof next === 'function') next(); };
             document.body.appendChild(s);
         }

frontend-web/js/design2/core.js

@@ -2,15 +2,55 @@
 // 注意：此代码在layui.use回调函数内部执行
 // 全局变量已在主入口文件中定义，这里只需要初始化
 
-$('#canvas1').attr('height', document.body.clientHeight - 100)
-$('#canvas2').attr('height', document.body.clientHeight - 100)
-$('#object_attribute').css('height', '470px')
-$('#obj_list').css('height', document.body.clientHeight - 520)
-$('.obj_list').css('height', $('#obj_list').height() - 32)
+function soonDesign2MainHeight() {
+    var main = document.querySelector('.layui-fluid.main');
+    if (main && main.clientHeight > 40) return main.clientHeight;
+    var tb = document.getElementById('portal-topbar');
+    return Math.max(480, window.innerHeight - (tb ? tb.offsetHeight : 0));
+}
 
-$('.main').show()
-$('#canvas1').attr('width', $('#canvas-div').width())
-$('#canvas2').attr('width', $('#canvas-div').width())
+function soonDesign2SidebarWidth() {
+    var colRight = document.querySelector('body.soon-design-page .col-right');
+    if (colRight && colRight.offsetWidth > 0) return colRight.offsetWidth;
+    return 320;
+}
+
+function soonDesign2ToolboxWidth() {
+    var toolbox = document.querySelector('body.soon-design-page .container .left');
+    if (toolbox && toolbox.offsetWidth > 0) return toolbox.offsetWidth;
+    return 50;
+}
+
+function soonDesign2CanvasWidth() {
+    var canvasDiv = document.getElementById('canvas-div');
+    if (canvasDiv && canvasDiv.clientWidth > 0) return canvasDiv.clientWidth;
+    var colLeft = document.querySelector('body.soon-design-page .col-left');
+    if (colLeft && colLeft.clientWidth > 0) {
+        return Math.max(320, colLeft.clientWidth - soonDesign2ToolboxWidth());
+    }
+    var docW = document.documentElement.clientWidth || window.innerWidth;
+    return Math.max(320, docW - soonDesign2SidebarWidth() - soonDesign2ToolboxWidth());
+}
+
+function layoutDesign2Shell() {
+    var isWeb = !!(window.SOON_DEPLOY_CONFIG);
+    var mainH = soonDesign2MainHeight();
+    var canvasW = soonDesign2CanvasWidth();
+    var canvasH = isWeb ? Math.max(400, mainH - 130) : (document.body.clientHeight - 100);
+    $('#canvas1').attr('width', canvasW).attr('height', canvasH);
+    $('#canvas2').attr('width', canvasW).attr('height', canvasH);
+    if (!isWeb) {
+        $('#object_attribute').css('height', '470px');
+        $('#obj_list').css('height', Math.max(120, mainH - 520));
+        $('.obj_list').css('height', Math.max(80, $('#obj_list').height() - 32));
+    }
+    return { canvasW: canvasW, canvasH: canvasH };
+}
+
+var mainEl = document.querySelector('.layui-fluid.main');
+if (mainEl) mainEl.style.display = 'flex';
+else $('.main').show();
+var _design2Layout = layoutDesign2Shell();
 
 // 初始化Canvas对象
 // 优化性能：在创建 Fabric Canvas 之前，先设置 canvas context 的 willReadFrequently
@@ -42,11 +82,20 @@ is_bgi_add = false
 window.ctx1 = ctx1;
 window.ctx2 = ctx2;
 window.is_bgi_add = is_bgi_add;
-canvas1.zoomToPoint(new fabric.Point(canvas1.width / 2, canvas1.height / 2), $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200)
-//console.log(canvas1.width / 2, canvas1.height / 2);
-//console.log($("#canvas-div").width() / 1200 > 1 ? 1 : $("#canvas-div").width() / 1200);
-canvas2.zoomToPoint(new fabric.Point(canvas2.width / 2, canvas2.height / 2), $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200)
-zoom = $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200
+canvas1.zoomToPoint(new fabric.Point(canvas1.width / 2, canvas1.height / 2), (function () {
+    var divW = $('#canvas-div').width() || _design2Layout.canvasW || 800;
+    return divW / 1200 > 1 ? 1 : divW / 1200;
+})())
+canvas2.zoomToPoint(new fabric.Point(canvas2.width / 2, canvas2.height / 2), (function () {
+    var divW = $('#canvas-div').width() || _design2Layout.canvasW || 800;
+    return divW / 1200 > 1 ? 1 : divW / 1200;
+})())
+zoom = (function () {
+    var divW = $('#canvas-div').width() || _design2Layout.canvasW || 800;
+    var z = divW / 1200 > 1 ? 1 : divW / 1200;
+    return z > 0 ? z : 0.5;
+})()
+window.zoom = zoom;
 
 // 初始化标尺
 function initRulers() {
@@ -116,7 +165,13 @@ function initRulers() {
         // background_image在画布坐标系中的left值，需要转换到标尺坐标系
         // 画布从标尺的marginOffset位置开始，所以：标尺0点 = marginOffset + background_image.left (如果存在)
         let originX = marginOffset;
-        if (typeof background_image !== 'undefined' && background_image) {
+        var rulerSide = ($('#back_side').hasClass('ui-button-active')) ? canvas2 : canvas1;
+        var anchorX = typeof soonDesign2GetFrameAnchor === 'function'
+            ? soonDesign2GetFrameAnchor(rulerSide)
+            : null;
+        if (anchorX) {
+            originX = marginOffset + anchorX.left;
+        } else if (typeof background_image !== 'undefined' && background_image) {
             originX = marginOffset + background_image.left;
         }
         const startX = 0;
@@ -208,7 +263,13 @@ function initRulers() {
         // background_image在画布坐标系中的top值，需要转换到标尺坐标系
         // 画布从标尺的marginOffset + rulerHeightOffset位置开始，所以：标尺0点 = marginOffset + rulerHeightOffset + background_image.top (如果存在)
         let originY = marginOffset + rulerHeightOffset;
-        if (typeof background_image !== 'undefined' && background_image) {
+        var rulerSideY = ($('#back_side').hasClass('ui-button-active')) ? canvas2 : canvas1;
+        var anchorY = typeof soonDesign2GetFrameAnchor === 'function'
+            ? soonDesign2GetFrameAnchor(rulerSideY)
+            : null;
+        if (anchorY) {
+            originY = marginOffset + rulerHeightOffset + anchorY.top;
+        } else if (typeof background_image !== 'undefined' && background_image) {
             originY = marginOffset + rulerHeightOffset + background_image.top;
         }
         const startY = 0;
@@ -306,15 +367,19 @@ function initRulers() {
         }, 100);
     });
 
-    // 监听画布缩放/渲染变化，仅用于重绘标尺
-    // 辅助线交给 Fabric 自己渲染，否则会出现“重影 / 变两三根”的现象
+    canvas1.off('after:render');
+    canvas2.off('after:render');
     canvas1.on('after:render', function () {
         drawHorizontalRuler();
         drawVerticalRuler();
+        soonDesign2DrawCardMask(canvas1, ctx1, document.getElementById('source_front'));
+        soonDesign2DrawTemplateOverlay(canvas1, ctx1, document.getElementById('source_front'));
     });
     canvas2.on('after:render', function () {
         drawHorizontalRuler();
         drawVerticalRuler();
+        soonDesign2DrawCardMask(canvas2, ctx2, document.getElementById('source_back'));
+        soonDesign2DrawTemplateOverlay(canvas2, ctx2, document.getElementById('source_back'));
     });
 
     // --- 辅助线功能 (参考 design1) ---
@@ -485,9 +550,310 @@ function initRulers() {
     }
 
 }
+function relayoutDesign2Canvas() {
+    var layout = layoutDesign2Shell();
+    var divW = layout.canvasW;
+    zoom = divW / 1200 > 1 ? 1 : divW / 1200;
+    if (zoom <= 0) zoom = 0.5;
+    window.zoom = zoom;
+    canvas1.setWidth(layout.canvasW);
+    canvas1.setHeight(layout.canvasH);
+    canvas2.setWidth(layout.canvasW);
+    canvas2.setHeight(layout.canvasH);
+    canvas1.zoomToPoint(new fabric.Point(canvas1.width / 2, canvas1.height / 2), zoom);
+    canvas2.zoomToPoint(new fabric.Point(canvas2.width / 2, canvas2.height / 2), zoom);
+    canvas1.renderAll();
+    canvas2.renderAll();
+    initRulers();
+    if (typeof window.soonDesign2ScaleBgSources === 'function') {
+        window.soonDesign2ScaleBgSources();
+    }
+}
+
+function soonDesign2ScaleBgSources() {
+    var z = zoom || window.zoom || 0.5;
+    var sf = document.getElementById('source_front');
+    var sb = document.getElementById('source_back');
+    if (sf && sf.naturalWidth > 0) {
+        sf.style.width = (sf.naturalWidth * z) + 'px';
+        sf.style.height = (sf.naturalHeight * z) + 'px';
+    }
+    if (sb && sb.naturalWidth > 0) {
+        sb.style.width = (sb.naturalWidth * z) + 'px';
+        sb.style.height = (sb.naturalHeight * z) + 'px';
+    }
+}
+
+function soonDesign2BgOverlayMetrics(imgEl) {
+    if (!imgEl || !imgEl.complete || imgEl.naturalWidth <= 0) return null;
+    var z = zoom || window.zoom || 0.5;
+    var w = parseFloat(imgEl.style.width);
+    if (!w || w <= 0) w = imgEl.naturalWidth * z;
+    var h = parseFloat(imgEl.style.height);
+    if (!h || h <= 0) h = imgEl.naturalHeight * z;
+    return { w: w, h: h };
+}
+
+/** 卡面区域：与 background_image 对齐（1012×648），fallback 模板线框 */
+function soonDesign2ResolveCardFrame(fabricCanvas, imgEl) {
+    if (!fabricCanvas) return null;
+    var metaList = (fabricCanvas === canvas2) ? (window.objs2 || objs2) : (window.objs1 || objs1);
+    if (soonDesign2IsUserBgMeta(metaList)) {
+        var anchor = soonDesign2GetFrameAnchor(fabricCanvas);
+        var card = soonDesign2CardSize();
+        if (anchor) {
+            return { left: anchor.left, top: anchor.top, width: card.w, height: card.h };
+        }
+    }
+    var bg = (fabricCanvas === canvas1) ? background_image1 : background_image2;
+    if (bg && bg.width) {
+        var sx = bg.scaleX == null ? 1 : bg.scaleX;
+        var sy = bg.scaleY == null ? 1 : bg.scaleY;
+        return {
+            left: bg.left,
+            top: bg.top,
+            width: bg.width * sx,
+            height: bg.height * sy
+        };
+    }
+    var cw = fabricCanvas.width || 1012;
+    var ch = fabricCanvas.height || 648;
+    if (imgEl) {
+        var metrics = soonDesign2BgOverlayMetrics(imgEl);
+        if (metrics) {
+            return {
+                left: (cw - metrics.w) / 2,
+                top: (ch - metrics.h) / 2,
+                width: metrics.w,
+                height: metrics.h
+            };
+        }
+    }
+    return { left: 0, top: 0, width: cw, height: ch };
+}
+
+function soonDesign2CardSize() {
+    return { w: 1012, h: 648 };
+}
+
+function soonDesign2IsUserBgMeta(metaList) {
+    return !!(metaList && metaList.length > 0 && metaList[0] && metaList[0].type === 1);
+}
+
+function soonDesign2SyncFrameAnchor(fabricCanvas, frame) {
+    if (!frame) return;
+    var pt = { left: frame.left, top: frame.top };
+    if (fabricCanvas === canvas2) {
+        window.soonDesign2FrameAnchor2 = pt;
+    } else {
+        window.soonDesign2FrameAnchor1 = pt;
+    }
+    var active = window.canvas || canvas;
+    if (!active || fabricCanvas === active) {
+        window.soonDesign2FrameAnchor = pt;
+    }
+}
+
+function soonDesign2GetFrameAnchor(fabricCanvas) {
+    if (fabricCanvas === canvas2 && window.soonDesign2FrameAnchor2) {
+        return window.soonDesign2FrameAnchor2;
+    }
+    if (window.soonDesign2FrameAnchor1) {
+        return window.soonDesign2FrameAnchor1;
+    }
+    return window.soonDesign2FrameAnchor || null;
+}
+
+/** 用户设为背景的对象：坐标系锚点，属性面板不应再移动它 */
+function soonDesign2ActiveIsAnchorBg() {
+    var c = window.canvas || canvas;
+    if (!c) return false;
+    var ao = c.getActiveObject();
+    if (!ao) return false;
+    var meta = (c === canvas2) ? (window.objs2 || objs2) : (window.objs1 || objs1);
+    if (c === (window.canvas || canvas)) {
+        meta = window.objs || objs || meta;
+    }
+    if (!soonDesign2IsUserBgMeta(meta)) return false;
+    var bg = (c === canvas2) ? (window.background_image2 || background_image2) : (window.background_image1 || background_image1);
+    return ao === bg;
+}
+
+function soonDesign2FrameOrigin(fabricCanvas) {
+    var frame = soonDesign2ResolveCardFrame(fabricCanvas, null);
+    if (frame) return frame;
+    var card = soonDesign2CardSize();
+    var cw = (fabricCanvas && fabricCanvas.width) || card.w;
+    var ch = (fabricCanvas && fabricCanvas.height) || card.h;
+    return { left: (cw - card.w) / 2, top: (ch - card.h) / 2, width: card.w, height: card.h };
+}
+
+/** 用户图铺满卡面框（1012×648），与蒙版/线框同源坐标 */
+function soonDesign2SnapImageToCardFrame(img, fabricCanvas, frame) {
+    if (!img || !img.width) return frame || soonDesign2FrameOrigin(fabricCanvas);
+    frame = frame || soonDesign2FrameOrigin(fabricCanvas);
+    var card = soonDesign2CardSize();
+    img.set({
+        originX: 'left',
+        originY: 'top',
+        scaleX: card.w / img.width,
+        scaleY: card.h / img.height,
+        left: frame.left,
+        top: frame.top
+    });
+    img.setCoords();
+    soonDesign2SyncFrameAnchor(fabricCanvas, frame);
+    return frame;
+}
+
+function soonDesign2ApplyUserBgAsCanvas0(userImg, fabricCanvas, oldBg) {
+    if (!userImg || !fabricCanvas) return;
+    if (oldBg && oldBg !== userImg) {
+        fabricCanvas.remove(oldBg);
+    }
+    fabricCanvas.sendToBack(userImg);
+    if (fabricCanvas === canvas2) {
+        background_image2 = userImg;
+        window.background_image2 = userImg;
+    } else {
+        background_image1 = userImg;
+        window.background_image1 = userImg;
+    }
+    var activeCanvas = window.canvas || canvas;
+    if (fabricCanvas === activeCanvas) {
+        background_image = userImg;
+        window.background_image = userImg;
+    }
+}
+
+function soonDesign2LockBgObject(bgObj) {
+    if (!bgObj) return;
+    bgObj.set({
+        lockMovementX: true,
+        lockMovementY: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+        lockSkewingX: true,
+        lockSkewingY: true,
+        selectable: false,
+        evented: false,
+        hoverCursor: 'default'
+    });
+}
+
+/** 打开旧文件：把 canvas[0] 的用户背景图贴齐卡框并锁定。
+ *  设计前提：保存 .soon 时 canvas[0] == 用户背景图（set_bg 已把它放到 0 位）。
+ *  之前的实现会 fabricCanvas.remove(all[0]) 并把 all[1]（前景）当成新 userBg，导致重打开后
+ *  用户背景图丢失、前景元素被错误地缩放并锁定到卡框大小。本版本不再删除 all[0]，
+ *  改为直接把已有的 all[0] 当成用户背景图处理。 */
+function soonDesign2NormalizeUserBg(fabricCanvas, metaList) {
+    if (!soonDesign2IsUserBgMeta(metaList) || !fabricCanvas) return null;
+    var all = fabricCanvas.getObjects().filter(function (o) { return !o.isGuideLine; });
+    if (!all.length) return null;
+    var userBg = all[0];
+    if (!userBg) return null;
+    var frame = soonDesign2FrameOrigin(fabricCanvas);
+    soonDesign2SnapImageToCardFrame(userBg, fabricCanvas, frame);
+    soonDesign2ApplyUserBgAsCanvas0(userBg, fabricCanvas, null);
+    soonDesign2LockBgObject(userBg);
+    return userBg;
+}
+
+window.soonDesign2CardSize = soonDesign2CardSize;
+window.soonDesign2IsUserBgMeta = soonDesign2IsUserBgMeta;
+window.soonDesign2SyncFrameAnchor = soonDesign2SyncFrameAnchor;
+window.soonDesign2GetFrameAnchor = soonDesign2GetFrameAnchor;
+window.soonDesign2ActiveIsAnchorBg = soonDesign2ActiveIsAnchorBg;
+window.soonDesign2FrameOrigin = soonDesign2FrameOrigin;
+window.soonDesign2SnapImageToCardFrame = soonDesign2SnapImageToCardFrame;
+window.soonDesign2ApplyUserBgAsCanvas0 = soonDesign2ApplyUserBgAsCanvas0;
+window.soonDesign2LockBgObject = soonDesign2LockBgObject;
+window.soonDesign2NormalizeUserBg = soonDesign2NormalizeUserBg;
+
+function soonDesign2DrawCardMask(fabricCanvas, ctx, imgEl) {
+    if (window._soonSkipDesign2CardMask || !fabricCanvas || !ctx) return;
+    var frame = soonDesign2ResolveCardFrame(fabricCanvas, imgEl);
+    if (!frame) return;
+    var left = frame.left;
+    var top = frame.top;
+    var cardW = frame.width;
+    var cardH = frame.height;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, 0, fabricCanvas.width, fabricCanvas.height);
+    ctx.moveTo(left + cardW, top);
+    ctx.lineTo(left, top);
+    ctx.lineTo(left, top + cardH);
+    ctx.lineTo(left + cardW, top + cardH);
+    ctx.closePath();
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.9)';
+    ctx.fill('evenodd');
+    ctx.restore();
+}
+
+function soonDesign2DrawTemplateOverlay(fabricCanvas, ctx, imgEl) {
+    if (!window.is_bgi_add || !fabricCanvas || !ctx || !imgEl) return;
+    var frame = soonDesign2ResolveCardFrame(fabricCanvas, imgEl);
+    if (!frame) return;
+    ctx.drawImage(imgEl, frame.left, frame.top, frame.width, frame.height);
+}
+
+function soonDesign2PrepareBgSources(done) {
+    var sf = document.getElementById('source_front');
+    var sb = document.getElementById('source_back');
+    if (!sf || !sb) {
+        is_bgi_add = true;
+        window.is_bgi_add = true;
+        if (typeof done === 'function') done();
+        return;
+    }
+    var ver = typeof bg_version !== 'undefined' ? bg_version : 1;
+    var frontName = 'front_bg' + ver + '_2.png';
+    if (!(sf.complete && sf.naturalWidth > 0 && (sf.src || '').indexOf(frontName) !== -1)) {
+        sf.src = soonAsset(frontName);
+    }
+    var pending = 2;
+    function finishOne() {
+        pending--;
+        if (pending > 0) return;
+        soonDesign2ScaleBgSources();
+        is_bgi_add = true;
+        window.is_bgi_add = true;
+        canvas1.requestRenderAll();
+        canvas2.requestRenderAll();
+        if (typeof done === 'function') done();
+    }
+    function watch(img) {
+        if (img.complete && img.naturalWidth > 0) {
+            finishOne();
+            return;
+        }
+        img.onload = finishOne;
+        img.onerror = finishOne;
+    }
+    watch(sf);
+    watch(sb);
+}
+
+function soonDesign2StartBackground() {
+    soonDesign2PrepareBgSources(addBackground);
+}
+
+function soonDesign2Kickoff() {
+    if (window._soonDesign2KickoffDone) return;
+    window._soonDesign2KickoffDone = true;
+    if (window.SOON_DEPLOY_CONFIG && ($('#canvas-div').width() || 0) < 100) {
+        relayoutDesign2Canvas();
+    }
+    soonDesign2StartBackground();
+}
+
+window.soonDesign2ScaleBgSources = soonDesign2ScaleBgSources;
+window.soonDesign2PrepareBgSources = soonDesign2PrepareBgSources;
+window.soonDesign2Kickoff = soonDesign2Kickoff;
+
 initRulers();
-$('#source_front').width(zoom * $('#source_front').width())
-$('#source_back').width(zoom * $('#source_back').width())
 $('.canvas-container:eq(1)').hide()
 canvas = canvas1
 window.canvas = canvas
@@ -512,21 +878,47 @@ canvas2.preserveObjectStacking = true
 // 对象选择和属性更新函数
 // ==========================================
 // 将 updateControls 附加到 window 对象，确保在 eval() 加载 .jsc 文件时也能访问
-window.updateControls = function updateControls() {
-    // 使用 window.canvas 和 window.background_image 作为后备，确保在 eval() 执行时也能访问
+window._soonSyncingFontControls = false;
+
+function soonFontSizeUiVal(fontSizePx) {
+    var d = window.dpi || 300;
+    var uiVal = parseFloat(fontSizePx) * 72 / d;
+    if (uiVal % 0.5 !== 0) uiVal = Math.round(uiVal * 2) / 2;
+    return uiVal;
+}
+
+function soonSyncActiveFontSizeInput(activeObj, currentCanvas) {
+    if (!activeObj || !currentCanvas) return;
+    var idx = getIndex(activeObj, currentCanvas);
+    if (idx <= 0) return;
+    var objData = (currentCanvas === canvas1 ? objs1 : objs2)[idx - 1];
+    if (!objData) return;
+    var uiVal = soonFontSizeUiVal(activeObj.get('fontSize'));
+    if (objData.type === 3) $("#text_size").val(uiVal);
+    else if (objData.type === 4) $("#out_text_size").val(uiVal);
+    else if (objData.type === 10) $("#count_size").val(uiVal);
+}
+
+window.updateControls = function () {
     const currentCanvas = window.canvas || canvas;
     const currentBackgroundImage = window.background_image || background_image;
     if (!currentCanvas || !currentCanvas.getActiveObject()) return;
-    $("#text_r").val(currentCanvas.getActiveObject().get("angle").toFixed(0));
-    $("#text_x").val((currentCanvas.getActiveObject().get("left") - currentBackgroundImage.left).toFixed(0));
-    $("#text_y").val((currentCanvas.getActiveObject().get("top") - currentBackgroundImage.top).toFixed(0));
-    $("#text_h").val((currentCanvas.getActiveObject().get("scaleY") * currentCanvas.getActiveObject().get("height")).toFixed(0));
-    $("#text_w").val((currentCanvas.getActiveObject().get("scaleX") * currentCanvas.getActiveObject().get("width")).toFixed(0));
-    // 根据锁定状态显示图标（使用lockMovementX判断，因为锁定时会设置所有lock属性）
-    if (currentCanvas.getActiveObject().get("lockMovementX")) {
-        $("#lock_img").attr("src", soonAsset("lock20.png"))//已锁定
+    const activeObj = currentCanvas.getActiveObject();
+    window._soonSyncingFontControls = true;
+    try {
+        $("#text_r").val(activeObj.get("angle").toFixed(0));
+        $("#text_x").val((activeObj.get("left") - currentBackgroundImage.left).toFixed(0));
+        $("#text_y").val((activeObj.get("top") - currentBackgroundImage.top).toFixed(0));
+        $("#text_h").val((activeObj.get("scaleY") * activeObj.get("height")).toFixed(0));
+        $("#text_w").val((activeObj.get("scaleX") * activeObj.get("width")).toFixed(0));
+        soonSyncActiveFontSizeInput(activeObj, currentCanvas);
+        if (activeObj.get("lockMovementX")) {
+            $("#lock_img").attr("src", soonAsset("lock20.png"));
         } else {
-        $("#lock_img").attr("src", soonAsset("unlock20.png"))//未锁定
+            $("#lock_img").attr("src", soonAsset("unlock20.png"));
+        }
+    } finally {
+        window._soonSyncingFontControls = false;
     }
 };
 // 向后兼容
@@ -917,8 +1309,10 @@ function handleObjectSelected(e) {
         return;
     }
 
-    // 3. 获取索引
-    let i = getIndex(select_obj, canvas);
+    // 3. 解析 objs 下标（用户设为背景时在 canvas[0]，不能仅用 getIndex）
+    let metaIdx = typeof soonDesign2ResolveObjMetaIndex === 'function'
+        ? soonDesign2ResolveObjMetaIndex(select_obj, canvas)
+        : (getIndex(select_obj, canvas) > 0 ? getIndex(select_obj, canvas) - 1 : -1);
 
     // 如果不是通过对象列表选中的，且对象被锁定，则取消选中
     if (!window._selectingFromList && isObjectLocked(select_obj)) {
@@ -930,58 +1324,52 @@ function handleObjectSelected(e) {
         return;
     }
 
-    if (i != 0) {
-        // --- 选中了普通对象 ---
-        --i; // 转换为 objs 数组下标
-
-        // 安全检查：确保 objs[i] 存在且有 type 属性
-        if (objs[i] && typeof objs[i].type !== 'undefined') {
-            switch (objs[i].type) {
+    if (metaIdx >= 0) {
+        if (objs[metaIdx] && typeof objs[metaIdx].type !== 'undefined') {
+            switch (objs[metaIdx].type) {
                 case 1: // 图片
                     $("#component_type").text(language_str("img"));
-                    selectObject(select_obj, i); selectPic(select_obj, i); break;
+                    selectObject(select_obj, metaIdx); selectPic(select_obj, metaIdx); break;
                 case 2: // 合成图片
                     $("#component_type").text(language_str("simg"));
-                    selectObject(select_obj, i); selectOutPic(select_obj, i); break;
+                    selectObject(select_obj, metaIdx); selectOutPic(select_obj, metaIdx); break;
                 case 3: // 文本
                     $("#component_type").text(language_str("text"));
-                    selectObject(select_obj, i); selectText(select_obj, i); break;
+                    selectObject(select_obj, metaIdx); selectText(select_obj, metaIdx); break;
                 case 4: // 合成文本
                     $("#component_type").text(language_str("stext"));
-                    selectObject(select_obj, i); selectOutText(select_obj, i); break;
+                    selectObject(select_obj, metaIdx); selectOutText(select_obj, metaIdx); break;
                 case 5: // 矩形
                     $("#component_type").text(language_str("rect"));
-                    selectObject(select_obj, i); selectRect(select_obj, i); break;
+                    selectObject(select_obj, metaIdx); selectRect(select_obj, metaIdx); break;
                 case 6: // 圆形
                     $("#component_type").text(language_str("circ"));
-                    selectObject(select_obj, i); selectCircle(select_obj, i); break;
+                    selectObject(select_obj, metaIdx); selectCircle(select_obj, metaIdx); break;
                 case 7: // 直线
                     $("#component_type").text(language_str("line"));
-                    selectObject(select_obj, i); selectLine(select_obj, i); break;
+                    selectObject(select_obj, metaIdx); selectLine(select_obj, metaIdx); break;
                 case 8: // 二维码
                     $("#component_type").text(language_str("qrc"));
-                    selectObject(select_obj, i); selectQrCode(select_obj, i); break;
+                    selectObject(select_obj, metaIdx); selectQrCode(select_obj, metaIdx); break;
                 case 9: // 条形码
                     $("#component_type").text(language_str("barc"));
-                    selectObject(select_obj, i); selectBarCode(select_obj, i); break;
+                    selectObject(select_obj, metaIdx); selectBarCode(select_obj, metaIdx); break;
                 case 10: // 计数器
                     $("#component_type").text(language_str("counter"));
-                    selectObject(select_obj, i); selectCounter(select_obj, i); break;
+                    selectObject(select_obj, metaIdx); selectCounter(select_obj, metaIdx); break;
                 case 11: // 圆形文本
                     $("#component_type").text(language_str("ctext"));
-                    selectObject(select_obj, i); selectCircleText(select_obj, i); break;
+                    selectObject(select_obj, metaIdx); selectCircleText(select_obj, metaIdx); break;
             }
         }
 
-        // 【关键】这里传入 true！
-        // 意思是：因为我已经是在画布上选中它了，selectObj 函数只负责把左边的条目变灰，不要再回头去 setActiveObject 了
-        selectObj(i, true);
+        selectObj(metaIdx, true);
 
     } else {
-        // --- 选中了背景 ---
+        // --- 模板背景（canvas[0] 且不在 objs 中）---
         $("#base_control, #line_control, #pic_control, #out_pic_control, #text_control, #circle_text_control, #out_text_control, #rect_control, #circle_control, #counter_control, #qrcode_Controll, #barcode_controll").hide();
-        selectObj(-1, true);
         $("#component_type").text(language_str("bg"));
+        selectObj(-1, true);
     }
 }
 
@@ -1228,22 +1616,24 @@ function initCanvasEvents() {
                 return;
             }
             let target = event.target;
+            var modAction = event.action || (event.transform && event.transform.action);
 
-            if ([3, 4, 10].includes(objData.type)) {
-                target.fontSize = (target.fontSize * target.scaleX).toFixed(0);
-                target.scaleX = 1; target.scaleY = 1;
+            if ([3, 4, 10].includes(objData.type) && modAction === 'scale') {
+                target.set({
+                    fontSize: Math.round(target.fontSize * (target.scaleX || 1)),
+                    scaleX: 1,
+                    scaleY: 1,
+                });
                 target._clearCache();
-                if (objData.type == 3) $("#text_size").val(target.fontSize);
-                if (objData.type == 4) $("#out_text_size").val(target.fontSize);
-                if (objData.type == 10) $("#count_size").val(target.fontSize);
                 currentCanvas.renderAll();
-                updateControls();
-            } else if (objData.type == 5) {
-                target.width *= target.scaleX; target.height *= target.scaleY;
-                target.scaleX = 1; target.scaleY = 1;
-                updateControls();
+            } else if (objData.type == 5 && modAction === 'scale') {
+                target.width *= target.scaleX || 1;
+                target.height *= target.scaleY || 1;
+                target.scaleX = 1;
+                target.scaleY = 1;
             }
             recordState();
+            updateControls();
             // 更新对象列表以同步锁状态
             if (typeof window.updateList === 'function') {
                 window.updateList();
@@ -1295,8 +1685,10 @@ window.updateList = function updateList() {
         // 检查锁定状态（通过lockMovementX判断，因为锁定时会设置所有lock属性）
         // 注意：索引0是背景图，objs数组是从下标0开始存第1个对象的，所以是 i+1
         let isLocked = false;
-        if (currentCanvas.getObjects()[i + 1]) {
-            let canvasObj = currentCanvas.getObjects()[i + 1];
+        var canvasObj = typeof window.soonCanvasObjForListIndex === 'function'
+            ? window.soonCanvasObjForListIndex(i)
+            : currentCanvas.getObjects()[i + 1];
+        if (canvasObj) {
             isLocked = canvasObj.get('lockMovementX') === true;
         }
 
@@ -1319,9 +1711,9 @@ window.updateList = function updateList() {
 
     // 重新绑定点击事件（防止 updateList 后点击失效）
     $(".obj_list > div").on("click", function () {
-        let imgId = $(this).find("img").attr("id");
+        let imgId = $(this).find("img[id^='obj']").attr("id");
         if (imgId) {
-            let idx = parseInt(imgId.replace("obj", ""));
+            let idx = parseInt(imgId.replace("obj", ""), 10);
             selectObj(idx);
         }
     });
@@ -1330,6 +1722,40 @@ window.updateList = function updateList() {
 // 标记是否通过对象列表选中（用于区分鼠标点击和列表点击）
 window._selectingFromList = false;
 
+// 对象列表下标 → 画布对象（设为背景后 objs 与 canvas 一一对应）
+function soonCanvasObjForListIndex(listIdx) {
+    var c = window.canvas || canvas;
+    var metaList = window.objs || objs;
+    if (!c || listIdx < 0 || listIdx >= metaList.length) return null;
+    var all = c.getObjects().filter(function (o) { return !o.isGuideLine; });
+    var bgListedInObjs = metaList.length >= all.length;
+    if (bgListedInObjs) {
+        return all[listIdx] || null;
+    }
+    for (var j = 0; j < all.length; j++) {
+        var o = all[j];
+        var ci = getIndex(o, c);
+        if (ci > 0 && ci - 1 === listIdx) return o;
+    }
+    return null;
+}
+window.soonCanvasObjForListIndex = soonCanvasObjForListIndex;
+
+/** 画布选中对象 → objs 下标；-1 表示模板背景（不在 objs 中） */
+function soonDesign2ResolveObjMetaIndex(select_obj, fabricCanvas) {
+    if (!select_obj || !fabricCanvas) return -1;
+    var metaList = fabricCanvas === canvas2 ? (window.objs2 || objs2) : (window.objs1 || objs1);
+    if (fabricCanvas === (window.canvas || canvas)) {
+        metaList = window.objs || objs || metaList;
+    }
+    if (!metaList || !metaList.length) return -1;
+    for (var li = 0; li < metaList.length; li++) {
+        if (soonCanvasObjForListIndex(li) === select_obj) return li;
+    }
+    return -1;
+}
+window.soonDesign2ResolveObjMetaIndex = soonDesign2ResolveObjMetaIndex;
+
 // 将 selectObj 附加到 window 对象，确保全局可访问
 window.selectObj = function selectObj(objIndices, isFromCanvas = false) {
     let indicesArray = (Array.isArray(objIndices)) ? objIndices : ((typeof objIndices === 'number' && objIndices >= 0) ? [objIndices] : []);
@@ -1339,10 +1765,10 @@ window.selectObj = function selectObj(objIndices, isFromCanvas = false) {
 
     // 遍历列表查找并高亮
     $('.obj_list > div').each(function () {
-        let $img = $(this).find("img");
+        let $img = $(this).find("img[id^='obj']");
         if ($img.length === 0) return;
 
-        let idIndex = parseInt($img.attr("id").replace("obj", ""));
+        let idIndex = parseInt($img.attr("id").replace("obj", ""), 10);
 
         if (indicesArray.includes(idIndex)) {
             $(this).css("background-color", "#6F7A84");
@@ -1356,7 +1782,7 @@ window.selectObj = function selectObj(objIndices, isFromCanvas = false) {
 
     // 如果是点击列表，触发画布选中
     if (!isFromCanvas && indicesArray.length === 1) {
-        let target = canvas.getObjects()[indicesArray[0] + 1];
+        let target = soonCanvasObjForListIndex(indicesArray[0]);
         if (target) {
             // 检查对象是否被锁定
             let isLocked = isObjectLocked(target);
@@ -1590,72 +2016,80 @@ function getCoordsMaxY(acoords) {
     return y;
 }
 
-function addBackground() {
-    // 类型改变
-    fabric.Image.fromURL(soonAsset('bg_front_2.png'), function (image) {
-        image.left = ($('#canvas1').width() - image.width * image.get('scaleX')) / 2
-        image.top = ($('#canvas1').height() - image.height * image.get('scaleY')) / 2
-
+function soonPlaceBgOnCanvas(image, canvasSelector) {
+    var cw = $(canvasSelector).width() || (document.querySelector(canvasSelector) && document.querySelector(canvasSelector).clientWidth) || 800
+    var ch = $(canvasSelector).height() || (document.querySelector(canvasSelector) && document.querySelector(canvasSelector).clientHeight) || 600
+    image.left = (cw - image.width * image.get('scaleX')) / 2
+    image.top = (ch - image.height * image.get('scaleY')) / 2
     image.selectable = false
     image.hoverable = false
     image.hoverCursor = 'default'
-        image.setSrc(image.toDataURL(), function (image) {
-            background_image1 = image
-            background_image = background_image1
-            window.background_image1 = background_image1;
-            window.background_image = background_image;
-            canvas1.add(image)
-            canvas1.renderAll()
-
-            recordObjs1.push(JSON.stringify(objs1))
-            const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
-            recordJson1.push(canvas1.toJSON(props))
-        })
-        // 类型改变
-        fabric.Image.fromURL(soonAsset('bg_back_2.png'), function (image) {
-            image.left = ($('#canvas2').width() - image.width) / 2
-            image.top = ($('#canvas2').height() - image.height) / 2
-
-            image.selectable = false
-            image.hoverable = false
-            image.hoverCursor = 'default'
-
-            image.setSrc(image.toDataURL(), function (image) {
-                background_image2 = image
-                window.background_image2 = background_image2;
-                canvas2.add(image)
-                canvas2.renderAll()
-
-                recordObjs2.push(JSON.stringify(objs2))
-                recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES))
-
-                let file = GetFile().get('file');
-                if (!file && typeof sessionStorage !== 'undefined') {
-                    try {
-                        file = sessionStorage.getItem('soondesign_open_file');
-                        if (file) {
-                            sessionStorage.removeItem('soondesign_open_file');
-                            sessionStorage.removeItem('soondesign_open_type');
+    var fc = (canvasSelector === '#canvas2') ? canvas2 : canvas1;
+    if (fc && typeof soonDesign2SyncFrameAnchor === 'function') {
+        soonDesign2SyncFrameAnchor(fc, {
+            left: image.left,
+            top: image.top,
+            width: image.width * (image.get('scaleX') || 1),
+            height: image.height * (image.get('scaleY') || 1)
+        });
     }
-                    } catch (e) {}
 }
+
+function soonOpenPendingDesignFile() {
+    var file = typeof window.soonResolveOpenFileKey === 'function'
+        ? window.soonResolveOpenFileKey(GetFile)
+        : (GetFile().get('file') || '');
     if (file && file != 'empty') {
-                    if (file.indexOf('soondesign_file:') === 0 && typeof sessionStorage !== 'undefined') {
-                        try {
-                            var metaRaw = sessionStorage.getItem('soondesign_open_meta');
-                            if (metaRaw) {
-                                window._soonFileMeta = JSON.parse(metaRaw);
-                                sessionStorage.removeItem('soondesign_open_meta');
+        if (typeof window.soonConsumeOpenMeta === 'function') {
+            window.soonConsumeOpenMeta(file);
         }
-                        } catch (e) {}
+        window.openFile(file);
     }
-                    var p = window.openFile(file);
-                    if (p && p.then) p.then(function() {}, function() {});
 }
-            })
-        })
-        is_bgi_add = true
-    })
+
+function addBackground() {
+    if (background_image1 && background_image2) return;
+    var loadBg = typeof window.soonFabricImageFromAsset === 'function'
+        ? window.soonFabricImageFromAsset
+        : null;
+    var whenReady = typeof window.soonRunWhenCanvasReady === 'function'
+        ? window.soonRunWhenCanvasReady
+        : function (_sel, fn) { fn(); };
+    var props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
+
+    function finishBack(backImg) {
+        if (backImg) {
+            soonPlaceBgOnCanvas(backImg, '#canvas2');
+            background_image2 = backImg;
+            window.background_image2 = backImg;
+            canvas2.add(backImg);
+            canvas2.renderAll();
+            recordObjs2.push(JSON.stringify(objs2));
+            recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES));
+        }
+        soonOpenPendingDesignFile();
+    }
+
+    function startLoad() {
+        if (!loadBg) return;
+        loadBg('bg_front_2.png', function (frontImg) {
+            if (!frontImg) return;
+            soonPlaceBgOnCanvas(frontImg, '#canvas1');
+            background_image1 = frontImg;
+            background_image = frontImg;
+            window.background_image1 = frontImg;
+            window.background_image = frontImg;
+            canvas1.add(frontImg);
+            canvas1.renderAll();
+            recordObjs1.push(JSON.stringify(objs1));
+            recordJson1.push(canvas1.toJSON(props));
+            loadBg('bg_back_2.png', finishBack, function () { loadBg('bg_back_2.png', finishBack, null, true); }, true);
+        }, function () {
+            setTimeout(startLoad, 200);
+        }, null, true);
+    }
+
+    whenReady('#canvas1', startLoad);
 }
 
 function addPic(pointer) {
@@ -1888,10 +2322,10 @@ function applyFontList(data) {
         $('#count_font_family').append("<option value='" + item + "'>" + item + '</option>')
     }
 }
-if (typeof ipcRenderer !== 'undefined' && ipcRenderer) {
-    ipcRenderer.on('font-list', function(event, data) { applyFontList(data); })
-} else if (typeof window !== 'undefined' && window.platformBridge && window.platformBridge.getSystemFonts) {
+if (typeof window !== 'undefined' && window.platformBridge && window.platformBridge.getSystemFonts) {
     window.platformBridge.getSystemFonts().then(applyFontList)
+} else if (typeof ipcRenderer !== 'undefined' && ipcRenderer) {
+    ipcRenderer.on('font-list', function(event, data) { applyFontList(data); })
 }
 function applySysLan(data) {
     let lang = localStorage.getItem('lang')
@@ -1936,6 +2370,7 @@ function applySysLan(data) {
             localStorage.setItem('lang', 'zh')
             break
         case 'zh-TW':
+        case 'ozh':
             s_lan = 'ozh'
             // 同步到全局作用域（用于 .jsc 文件加载）
             if (typeof window !== 'undefined') {
@@ -2048,7 +2483,7 @@ if (typeof ipcRenderer !== 'undefined' && ipcRenderer) {
 }
 function onCloseConfirm() {
     layer.confirm(
-        '<font style="color:black">' + language_str('whetherSave') + '</font>',
+        language_str('whetherSave'),
         {
             btn: [language_str('save'), language_str('noSave'), language_str('cancel')],
             btn3: function (index, layero) { }
@@ -2073,8 +2508,6 @@ if (typeof ipcRenderer !== 'undefined' && ipcRenderer) {
     window.platformBridge.onClose(onCloseConfirm)
 }
 
-addBackground() //添加背景 白色卡片
-
 initAligningGuidelines(canvas1)
 initAligningGuidelines(canvas2)
 
@@ -2131,7 +2564,12 @@ var out_pic_op = slider.render({
         if (canvas.getActiveObject()) {
             canvas.getActiveObject().set('opacity', 1 - value / 100);
             canvas.renderAll();
+            window._soonSyncingFontControls = true;
+            try {
                 updateControls();
+            } finally {
+                window._soonSyncingFontControls = false;
+            }
             recordState();
         }
     }
@@ -2146,7 +2584,12 @@ var pic_op = slider.render({
         if (canvas.getActiveObject()) {
             canvas.getActiveObject().set('opacity', 1 - value / 100);
             canvas.renderAll();
+            window._soonSyncingFontControls = true;
+            try {
                 updateControls();
+            } finally {
+                window._soonSyncingFontControls = false;
+            }
             recordState();
         }
     }

frontend-web/js/design2/output.js

@@ -1,6 +1,100 @@
-// 将 display_func 附加到 window 对象，确保全局可访问
+/** design2 正面预览/缩略图：1012×648 视口，与 display_func 中 url3 一致 */
+function soonCollectDesign2FrontPreview(canvas, bgImage, objMetaList) {
+    if (!canvas || !bgImage || typeof canvas.getObjects !== 'function') return null;
+    var list = canvas.getObjects().filter(function (obj) { return !obj.isGuideLine; });
+    var g3 = [];
+    var all_left = 0;
+    var all_top = 0;
+    for (var i = 0; i < list.length; i++) {
+        var item = list[i];
+        var idx = getIndex(item, canvas);
+        var metaIdx = typeof window.soonDesign2ResolveObjMetaIndex === 'function'
+            ? window.soonDesign2ResolveObjMetaIndex(item, canvas)
+            : (idx > 0 ? idx - 1 : -1);
+        if (metaIdx < 0 && idx !== 0) continue;
+        if (metaIdx >= 0 && (!objMetaList[metaIdx] || typeof objMetaList[metaIdx].type === 'undefined')) continue;
+        if (getCoordsMinX(bgImage.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
+            all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(bgImage.getCoords()));
+        }
+        if (getCoordsMinY(bgImage.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
+            all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(bgImage.getCoords()));
+        }
+        g3.push(fabric.util.object.clone(item));
+    }
+    return { g3: g3, all_left: all_left, all_top: all_top };
+}
+
+function soonExportDesign2PreviewDataUrl(g3, all_left, all_top, quality, multiplier) {
+    var z = (typeof zoom !== 'undefined' ? zoom : null) || window.zoom || 1;
+    var opts = {
+        height: 648,
+        width: 1012,
+        top: all_top / z,
+        left: all_left / z,
+        format: 'jpeg',
+        quality: quality == null ? 0.72 : quality
+    };
+    if (multiplier != null && multiplier > 0) opts.multiplier = multiplier;
+    return new fabric.Group(g3).toDataURL(opts);
+}
+
+/** 缩略图/预览：叠加系统卡面模板 front_bg（与编辑区 source_front 一致） */
+function soonDesign2AppendTemplateOverlayToGroup(g3, canvas, bgImage) {
+    if (!g3 || !canvas) return false;
+    var sf = document.getElementById('source_front');
+    if (!sf || !(sf.complete && sf.naturalWidth > 0)) return false;
+    var frame = typeof window.soonDesign2FrameOrigin === 'function'
+        ? window.soonDesign2FrameOrigin(canvas)
+        : null;
+    if (!frame && bgImage && bgImage.width) {
+        var sx = bgImage.scaleX == null ? 1 : bgImage.scaleX;
+        var sy = bgImage.scaleY == null ? 1 : bgImage.scaleY;
+        frame = { left: bgImage.left, top: bgImage.top, width: bgImage.width * sx, height: bgImage.height * sy };
+    }
+    if (!frame || !(frame.width > 0 && frame.height > 0)) return false;
+    g3.push(new fabric.Image(sf, {
+        left: frame.left,
+        top: frame.top,
+        originX: 'left',
+        originY: 'top',
+        scaleX: frame.width / sf.naturalWidth,
+        scaleY: frame.height / sf.naturalHeight
+    }));
+    return true;
+}
+
+function soonBuildDesign2SavePreviewPic(canvas) {
+    var THUMB_MAX = 102400;
+    var c1 = window.canvas1;
+    if (!canvas || (c1 && canvas !== c1)) return '';
+    var bg = window.background_image1 || window.background_image;
+    var meta = window.objs1;
+    if (!bg || !Array.isArray(meta)) return '';
+    if (typeof canvas.renderAll === 'function') canvas.renderAll();
+    var pack = soonCollectDesign2FrontPreview(canvas, bg, meta);
+    if (!pack || !pack.g3.length) return '';
+    soonDesign2AppendTemplateOverlayToGroup(pack.g3, canvas, bg);
+    var quality = 0.72;
+    var mult = 0.55;
+    var url = '';
+    for (var i = 0; i < 4; i++) {
+        try {
+            url = soonExportDesign2PreviewDataUrl(pack.g3, pack.all_left, pack.all_top, quality, mult);
+            if (url && url.indexOf('data:image/') === 0 && url.length <= THUMB_MAX) return url;
+        } catch (e) { /* ignore */ }
+        quality -= 0.16;
+        mult -= 0.08;
+        if (mult < 0.28) mult = 0.28;
+    }
+    try {
+        url = soonExportDesign2PreviewDataUrl(pack.g3, pack.all_left, pack.all_top, 0.32, 0.28);
+        if (url && url.indexOf('data:image/') === 0) return url;
+    } catch (e2) { /* ignore */ }
+    return '';
+}
+window.soonBuildDesign2SavePreviewPic = soonBuildDesign2SavePreviewPic;
+
 window.display_func = function display_func(img1, img2, img3) {
-    if (typeof window.soonGuardMemberPreview === 'function' && !window.soonGuardMemberPreview()) return;
     $('#base_control').hide()
     $('#line_control').hide()
     $('#pic_control').hide()
@@ -335,6 +429,7 @@ window.display_func = function display_func(img1, img2, img3) {
 
     layer.open({
         type: 1,
+        skin: 'soon-layer',
         area: [w, h],
         title: language_str('display'), //不显示标题栏"预览"
         shadeClose: true, //点击遮罩关闭
@@ -356,12 +451,19 @@ window.display_func = function display_func(img1, img2, img3) {
                     </div>
                 </div>`,
         btn: btns, //'导出'
-        btn1: function (index, layero) {
-            if (typeof window.savePdf === 'function') {
+        btn1: function () {
+            if (typeof window.soonGuardPreviewDeliver === 'function') {
+                window.soonGuardPreviewDeliver('导出', function () {
+                    if (typeof window.savePdf === 'function') window.savePdf(pdfBlob);
+                });
+            } else if (typeof window.savePdf === 'function') {
                 window.savePdf(pdfBlob);
             }
+            return false;
         },
         btn2: function () {
+            if (typeof window.soonGuardPreviewDeliver === 'function') {
+                window.soonGuardPreviewDeliver('打印', function () {
                     if (window.platformBridge && window.platformBridge.printPdf && (printPath3.indexOf('data:') === 0 || printPath4.indexOf('data:') === 0)) {
                         if (btns[1] === '打印正面') window.platformBridge.printPdf(pdfBlob);
                         else if (btns[1] === '打印背面') window.platformBridge.printPdf(pdfBlob);
@@ -372,13 +474,32 @@ window.display_func = function display_func(img1, img2, img3) {
                     } else if (btns[1] === '打印背面') {
                         printJS({ printable: printPath4, type: 'image', style: 'img { width: 100%; height: auto; }' });
                     }
+                });
+            } else if (window.platformBridge && window.platformBridge.printPdf && (printPath3.indexOf('data:') === 0 || printPath4.indexOf('data:') === 0)) {
+                if (btns[1] === '打印正面') window.platformBridge.printPdf(pdfBlob);
+                else if (btns[1] === '打印背面') window.platformBridge.printPdf(pdfBlob);
+            } else if (btns[1] === '打印正面') {
+                printJS({ printable: printPath3, type: 'image', style: 'img { width: 100%; height: auto; }' });
+            } else if (btns[1] === '打印背面') {
+                printJS({ printable: printPath4, type: 'image', style: 'img { width: 100%; height: auto; }' });
+            }
+            return false;
         },
         btn3: function () {
+            if (typeof window.soonGuardPreviewDeliver === 'function') {
+                window.soonGuardPreviewDeliver('打印', function () {
                     if (window.platformBridge && window.platformBridge.printPdf) {
                         window.platformBridge.printPdf(pdfBlob);
                         return;
                     }
                     printJS({ printable: printPath4, type: 'image', style: 'img { width: 100%; height: auto; }' });
+                });
+            } else if (window.platformBridge && window.platformBridge.printPdf) {
+                window.platformBridge.printPdf(pdfBlob);
+            } else {
+                printJS({ printable: printPath4, type: 'image', style: 'img { width: 100%; height: auto; }' });
+            }
+            return false;
         },
         end: function () {
             // 预览窗口关闭后，恢复所有对象的 selectable 和 evented 状态
@@ -406,7 +527,6 @@ window.display_func = function display_func(img1, img2, img3) {
 
 // 将 output 附加到 window 对象，确保全局可访问
 window.output = function output(callback = null, _save = save) {
-    if (typeof window.soonGuardMemberExport === 'function' && !window.soonGuardMemberExport()) return;
     // 类型改变
     fabric.Image.fromURL(soonAsset('op_2.png'), function (i1) {
         i1.left = background_image.left
@@ -1022,10 +1142,12 @@ window.cleanupSrcFields = function cleanupSrcFields(jsonObjects, objsArray) {
         let obj = jsonObjects[i];
         // 只处理 fabric.Image 对象且有 src 字段的
         if (obj && obj.type === 'image' && obj.src) {
-            // 背景图片（索引 0）- 删除 src
+            // 模板背景（索引 0）删 src；用户设为背景时 fo[0] 为 type 1，须保留
             if (i === 0) {
+                if (!(objsArray[0] && objsArray[0].type === 1)) {
                     delete obj.src;
                 }
+            }
             // 其他对象，通过 objs 数组判断类型
             else if (i - 1 < objsArray.length) {
                 let objMeta = objsArray[i - 1];
@@ -1049,6 +1171,7 @@ function cleanupSrcFields(jsonObjects, objsArray) {
 function applyCloudWriteResult(result, fallbackName) {
   if (result && result.fileKey) {
     openAs.name = result.fileKey;
+    if (typeof window.soonMarkSaveInPlace === 'function') window.soonMarkSaveInPlace(result.fileKey);
     return result.fileKey;
   }
   return fallbackName;
@@ -1062,9 +1185,31 @@ function cloudSaveSuccessLabel(res, fallback) {
   return fallback || '';
 }
 
+function soonPageDesignType() {
+  try {
+    var p = new URLSearchParams(location.search);
+    return Number(p.get('type')) || 2;
+  } catch (e) {
+    return 2;
+  }
+}
+
 function onCloudWriteDone(res, fallback, callback) {
+  if (typeof window.soonFinishSaveUi === 'function') window.soonFinishSaveUi();
+  else if (typeof window.soonCleanupLayerMask === 'function') window.soonCleanupLayerMask();
   applyCloudWriteResult(res, fallback);
-  layer.msg(language_str('saveSucc') + cloudSaveSuccessLabel(res, fallback));
+  if (res && res.fileKey && typeof window.soonClearPendingImport === 'function') {
+    window.soonClearPendingImport();
+  }
+  if (typeof window.soonRecentOnCloudSave === 'function') {
+    window.soonRecentOnCloudSave(res, fallback, soonPageDesignType());
+  }
+  var msg = language_str('saveSucc') + cloudSaveSuccessLabel(res, fallback);
+  if (res && res.syncFailed) {
+    msg = '已保存到本地，云端同步失败';
+  }
+  if (typeof window.soonToast === 'function') window.soonToast(msg, res && res.syncFailed ? 'warn' : 'success');
+  else layer.msg(msg, { shade: 0, time: 2500 });
   if (callback && typeof callback === 'function') callback();
 }
 
@@ -1106,33 +1251,38 @@ function saveAs(op1, callback) {
     let o = { f: j, b: b, fo: objs1, bo: objs2 }
     let con_o = Object.assign(o, op1)
     if (!guardWebSave()) return;
+    var prevOpenKey = openAs.name || '';
+    if (typeof window.soonApplySavePreview === 'function') window.soonApplySavePreview(con_o, canvas1);
+    if (typeof window.soonRefreshDesignCanvases === 'function') window.soonRefreshDesignCanvases();
+    con_o.soonType = 2;
     var dialogApi = (typeof dialog !== 'undefined' && dialog) ? dialog : (window.platformBridge && window.platformBridge.showSaveDialog ? { showSaveDialog: function(opts) { return window.platformBridge.showSaveDialog(opts); } } : null);
     if (!dialogApi) return;
-    dialogApi.showSaveDialog({ title: language_str('saveFile'), filters: [{ name: 'Soon File Type', extensions: ['soon'] }], defaultPath: openAs.name || undefined })
+    dialogApi.showSaveDialog({ title: language_str('saveFile'), filters: [{ name: 'Soon File Type', extensions: ['soon'] }], defaultPath: typeof window.soonSaveDialogDefaultPath === 'function' ? window.soonSaveDialogDefaultPath(openAs.name) : openAs.name })
         .then(function(result) {
             if (result.canceled) return;
-            var fp = result.filePath || (result.fileHandle && result.fileHandle.name);
+            var fp = typeof window.soonEnsureSaveFileName === 'function'
+                ? window.soonEnsureSaveFileName(result.filePath || (result.fileHandle && result.fileHandle.name))
+                : (result.filePath || (result.fileHandle && result.fileHandle.name));
             if (!fp) return;
-            var ext = (typeof path !== 'undefined' && path && path.extname) ? path.extname(fp) : (fp.indexOf('.') >= 0 ? fp.slice(fp.lastIndexOf('.')) : '');
-            if (ext !== '.soon') fp = (fp || 'design').replace(/\.soon$/i, '') + '.soon';
-            con_o.soonType = 2;
             var content = JSON.stringify(con_o);
-            if (window.platformBridge && window.platformBridge.writeFile) {
-                window.platformBridge.writeFile(fp, content).then(function (res) {
-                    onCloudWriteDone(res, fp, callback);
-                }).catch(function () {});
-                return;
-            }
+            if (typeof window.soonWriteSoonContentWeb === 'function' &&
+                window.soonWriteSoonContentWeb(fp, content, prevOpenKey, function (res, pk) {
+                  onCloudWriteDone(res, pk, callback);
+                })) return;
             var fs = typeof require !== 'undefined' ? require('fs') : null;
             if (fs) {
                 fs.writeFileSync(fp, content, 'utf8');
                 openAs.name = fp;
-                layer.msg(language_str('saveSucc') + openAs.name);
+                if (typeof window.soonMarkSaveInPlace === 'function') window.soonMarkSaveInPlace(openAs.name);
+                if (typeof window.soonToast === 'function') window.soonToast(language_str('saveSucc') + openAs.name, 'success');
+                else layer.msg(language_str('saveSucc') + openAs.name, { shade: 0 });
                 saveHistory();
                 if (callback && typeof callback === 'function') callback();
             }
         })
-        .catch(function(err) {});
+        .catch(function (err) {
+            if (typeof window.soonReportSaveError === 'function') window.soonReportSaveError(err);
+        });
 }
 
 function save(op1, callback) {
@@ -1168,20 +1318,25 @@ function save(op1, callback) {
 
     let o = { f: j, b: b, fo: objs1, bo: objs2 }
     let con_o = Object.assign(o, op1)
-    con_o.soonType = 2
-    var content = JSON.stringify(con_o)
     if (!guardWebSave()) return;
-    if (openAs.name != '') {
-        if (window.platformBridge && window.platformBridge.writeFile) {
-            window.platformBridge.writeFile(openAs.name, content).then(function (res) {
-                onCloudWriteDone(res, openAs.name, callback);
-            }).catch(function () {});
-            return;
-        }
+    var prevOpenKey = openAs.name || '';
+    if (typeof window.soonApplySavePreview === 'function') window.soonApplySavePreview(con_o, canvas1);
+    if (typeof window.soonRefreshDesignCanvases === 'function') window.soonRefreshDesignCanvases();
+    con_o.soonType = 2;
+    var content = JSON.stringify(con_o);
+    var needsDialog = typeof window.soonNeedsSaveDialog === 'function'
+      ? window.soonNeedsSaveDialog(openAs.name)
+      : !openAs.name;
+    if (openAs.name && !needsDialog) {
+        if (typeof window.soonWriteSoonContentWeb === 'function' &&
+            window.soonWriteSoonContentWeb(openAs.name, content, prevOpenKey, function (res, pk) {
+              onCloudWriteDone(res, pk, callback);
+            })) return;
         var fs = typeof require !== 'undefined' ? require('fs') : null;
         if (fs) {
             fs.writeFileSync(openAs.name, content, 'utf8');
-            layer.msg(language_str('saveSucc') + openAs.name);
+            if (typeof window.soonToast === 'function') window.soonToast(language_str('saveSucc') + openAs.name, 'success');
+            else layer.msg(language_str('saveSucc') + openAs.name, { shade: 0 });
             saveHistory();
             if (callback && typeof callback === 'function') callback();
         }
@@ -1189,35 +1344,49 @@ function save(op1, callback) {
     }
     var dialogApi = (typeof dialog !== 'undefined' && dialog) ? dialog : (window.platformBridge && window.platformBridge.showSaveDialog ? { showSaveDialog: function(opts) { return window.platformBridge.showSaveDialog(opts); } } : null);
     if (!dialogApi) return;
-    dialogApi.showSaveDialog({ title: language_str('saveFile'), filters: [{ name: 'Soon File Type', extensions: ['soon'] }], defaultPath: openAs.name || undefined })
+    dialogApi.showSaveDialog({ title: language_str('saveFile'), filters: [{ name: 'Soon File Type', extensions: ['soon'] }], defaultPath: typeof window.soonSaveDialogDefaultPath === 'function' ? window.soonSaveDialogDefaultPath(openAs.name) : openAs.name })
         .then(function(result) {
             if (result.canceled) return;
-            var fp = result.filePath || (result.fileHandle && result.fileHandle.name);
+            var fp = typeof window.soonEnsureSaveFileName === 'function'
+                ? window.soonEnsureSaveFileName(result.filePath || (result.fileHandle && result.fileHandle.name))
+                : (result.filePath || (result.fileHandle && result.fileHandle.name));
             if (!fp) return;
-            var ext = (typeof path !== 'undefined' && path && path.extname) ? path.extname(fp) : (fp.indexOf('.') >= 0 ? fp.slice(fp.lastIndexOf('.')) : '');
-            if (ext !== '.soon') fp = (fp || 'design').replace(/\.soon$/i, '') + '.soon';
-            if (window.platformBridge && window.platformBridge.writeFile) {
-                window.platformBridge.writeFile(fp, content).then(function (res) {
-                    onCloudWriteDone(res, fp, callback);
-                }).catch(function () {});
-                return;
-            }
+            if (typeof window.soonWriteSoonContentWeb === 'function' &&
+                window.soonWriteSoonContentWeb(fp, content, prevOpenKey, function (res, pk) {
+                  onCloudWriteDone(res, pk, callback);
+                })) return;
             var fs = typeof require !== 'undefined' ? require('fs') : null;
             if (fs) {
                 fs.writeFileSync(fp, content, 'utf8');
                 openAs.name = fp;
-                layer.msg(language_str('saveSucc') + openAs.name);
+                if (typeof window.soonMarkSaveInPlace === 'function') window.soonMarkSaveInPlace(openAs.name);
+                if (typeof window.soonToast === 'function') window.soonToast(language_str('saveSucc') + openAs.name, 'success');
+                else layer.msg(language_str('saveSucc') + openAs.name, { shade: 0 });
                 saveHistory();
                 if (callback && typeof callback === 'function') callback();
             }
         })
-        .catch(function(err) {});
+        .catch(function (err) {
+            if (typeof window.soonReportSaveError === 'function') window.soonReportSaveError(err);
+        });
 }
 
 window.saveHistory = function saveHistory() {
-    if (typeof window.soonIsWebPortal === 'function' && window.soonIsWebPortal()) return;
-    function doWrite(j) {
     var currentPath = openAs.name;
+    if (!currentPath) return;
+    if (window.platformBridge && window.fs == null) {
+        if (typeof window.soonRecentUpsert === 'function') {
+            window.soonRecentUpsert({
+                key: currentPath,
+                name: typeof window.soonDisplayFileName === 'function' ? window.soonDisplayFileName(currentPath) : currentPath,
+                type: soonPageDesignType(),
+                kind: typeof window.soonRecentKindFromKey === 'function' ? window.soonRecentKindFromKey(currentPath) : 'local',
+                thumbRef: currentPath
+            });
+        }
+        return;
+    }
+    function doWrite(j) {
         if (!currentPath) return;
         var pathForHistory = currentPath;
         if (window.platformBridge && currentPath.indexOf('soondesign_session:') !== 0 && currentPath.indexOf('soondesign_file:') !== 0) {
@@ -1263,10 +1432,31 @@ function saveHistory() {
 // 使用 window.openFile 避免与浏览器原生的 window.open 冲突
 window.openFile = function open(file, jAlready) {
     if (!file) return;
+    if (typeof window.soonOnOpenDesignFile === 'function') window.soonOnOpenDesignFile(file);
     if (typeof window.soonBindFileMeta === 'function') window.soonBindFileMeta(file);
     function doOpenWithJson(j) {
-        if (!j || !background_image) return;
+        if (typeof window.soonNormalizeSoonJson === 'function') {
+            j = window.soonNormalizeSoonJson(j);
+        }
+        if (!j) {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            return;
+        }
+        // 防御性：j.b 缺失时给一个空画布占位（避免 canvas2.loadFromJSON 报 undefined）
+        if (!j.b || typeof j.b !== 'object' || !Array.isArray(j.b.objects)) {
+            if (typeof console !== 'undefined' && console.warn) {
+                console.warn('[design2.openFile] j.b 缺失，自动以空背面回退。文件:', file);
+            }
+            j.b = { version: '4.6.0', objects: [], hoverCursor: 'move' };
+        }
+        function runOpen() {
+        if (!background_image) {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            return;
+        }
         openAs.name = file;
+        const fo = j.fo || []
+        const bo = j.bo || []
         var left = background_image.left
     let top = background_image.top
     let new_left = j.f.objects[0].left
@@ -1279,18 +1469,25 @@ window.openFile = function open(file, jAlready) {
         o.left = o.left - new_left + left
         o.top = o.top - new_top + top
     }
-    // 如果背景图片没有src，从路径恢复（因为保存时删除了src以减小文件大小）
-    if (j.f.objects[0] && !j.f.objects[0].src) {
+    var isUserBgFront = typeof window.soonDesign2IsUserBgMeta === 'function'
+        ? window.soonDesign2IsUserBgMeta(fo)
+        : (fo[0] && fo[0].type === 1)
+    var isUserBgBack = typeof window.soonDesign2IsUserBgMeta === 'function'
+        ? window.soonDesign2IsUserBgMeta(bo)
+        : (bo[0] && bo[0].type === 1)
+    if (j.f.objects[0] && !j.f.objects[0].src && !isUserBgFront) {
+        j.f.objects[0].src = soonAsset('bg_front_2.png')
+    } else if (j.f.objects[0] && !j.f.objects[0].src && isUserBgFront && j.f.objects.length > 1) {
         j.f.objects[0].src = soonAsset('bg_front_2.png')
     }
-    if (j.b.objects[0] && !j.b.objects[0].src) {
+    if (j.b.objects[0] && !j.b.objects[0].src && !isUserBgBack) {
+        j.b.objects[0].src = soonAsset('bg_back_2.png')
+    } else if (j.b.objects[0] && !j.b.objects[0].src && isUserBgBack && j.b.objects.length > 1) {
         j.b.objects[0].src = soonAsset('bg_back_2.png')
     }
 
     // 为二维码和条形码对象创建临时的 src（Fabric.js 需要 src 来创建 Image 对象）
     // 加载完成后会重新生成，所以这里只需要一个占位符
-    const fo = j.fo || []
-    const bo = j.bo || []
     const placeholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='
 
     // 为正面二维码、条形码和合成图片创建临时 src
@@ -1416,9 +1613,14 @@ window.openFile = function open(file, jAlready) {
             recordJson = recordJson2
             step = step2
         }
+        if (typeof window.soonTryConsumeCloudImport === 'function') window.soonTryConsumeCloudImport(file);
+        if (typeof window.soonRecentUpsertFromOpen === 'function') window.soonRecentUpsertFromOpen(file, j);
     }
 
     canvas1.loadFromJSON(j.f, function () {
+        if (typeof window.soonDesign2NormalizeUserBg === 'function') {
+            window.soonDesign2NormalizeUserBg(canvas1, fo);
+        }
         // 加载后解锁所有对象（背景除外）
         if (typeof window.unlockAllObjects === 'function') {
             window.unlockAllObjects(canvas1);
@@ -1435,6 +1637,9 @@ window.openFile = function open(file, jAlready) {
         saveInitialState()
     })
     canvas2.loadFromJSON(j.b, function () {
+        if (typeof window.soonDesign2NormalizeUserBg === 'function') {
+            window.soonDesign2NormalizeUserBg(canvas2, bo);
+        }
         // 加载后解锁所有对象（背景除外）
         if (typeof window.unlockAllObjects === 'function') {
             window.unlockAllObjects(canvas2);
@@ -1450,17 +1655,35 @@ window.openFile = function open(file, jAlready) {
         canvas2Loaded = true
         saveInitialState()
     })
+    }
+        if (typeof window.soonRunWhenDesignBgReady === 'function') {
+            window.soonRunWhenDesignBgReady(runOpen, function () {
+                if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            });
+        } else {
+            runOpen();
+        }
     }
     if (arguments.length >= 2 && jAlready) {
         doOpenWithJson(jAlready);
         return;
     }
     if (window.platformBridge && window.platformBridge.readJsonFile) {
+        if (typeof window.soonShowOpenFileLoading === 'function') window.soonShowOpenFileLoading();
         return window.platformBridge.readJsonFile(file).then(function(j) {
+            if (typeof window.soonHideOpenFileLoading === 'function') window.soonHideOpenFileLoading();
             if (j) {
                 doOpenWithJson(j);
                 openAs.name = file;
+            } else if (typeof window.soonReportOpenLoadError === 'function') {
+                window.soonReportOpenLoadError('模板/文件加载失败');
             }
+        }).catch(function () {
+            if (typeof window.soonReportOpenLoadError === 'function') window.soonReportOpenLoadError('模板/文件加载失败');
+            else if (typeof window.soonHideOpenFileLoading === 'function') window.soonHideOpenFileLoading();
+        }).finally(function () {
+            if (typeof window.soonHideOpenFileLoading === 'function') window.soonHideOpenFileLoading();
+            if (typeof window.soonCleanupLayerMask === 'function') window.soonCleanupLayerMask();
         });
     }
     try {

frontend-web/js/design2/ui.js

@@ -359,9 +359,17 @@ $('#version_change').click(function () {
     } else {
         bg_version = 1
     }
-    // 类型改变
-    $('#source_front').attr('src', soonAsset('front_bg') + bg_version + '_2.png')
-    canvas.renderAll()
+    var sf = document.getElementById('source_front')
+    if (!sf) return
+    sf.onload = function () {
+        if (typeof window.soonDesign2ScaleBgSources === 'function') {
+            window.soonDesign2ScaleBgSources()
+        }
+        canvas1.requestRenderAll()
+        canvas2.requestRenderAll()
+    }
+    sf.onerror = sf.onload
+    sf.src = soonAsset('front_bg' + bg_version + '_2.png')
 })
 $('#front_side').click(function () {
     $(this).addClass('ui-button-active')
@@ -779,62 +787,41 @@ $('#down_obj').click(function () {
     }
 })
 $('#set_bg').click(function () {
-    //设置为背景
     let obj = canvas.getActiveObject()
-    let idx = getIndex(canvas.getActiveObject())
-    const scaleX = 1012 / obj.width
-    const scaleY = 648 / obj.height
-    // 使用缩放后的实际尺寸计算位置，确保与初始背景图片位置一致
-    const scaledWidth = obj.width * scaleX;
-    const scaledHeight = obj.height * scaleY;
-    obj.set({
-        scaleX: scaleX,
-        scaleY: scaleY,
-        left: ($('#canvas1').width() - scaledWidth) / 2,
-        top: ($('#canvas1').height() - scaledHeight) / 2
-    })
-    $('#text_w').val(1012)
-    $('#text_h').val(648)
+    let idx = getIndex(obj)
+    // 旧背景：取当前画布对应的占位背景图（正面->background_image1，背面->background_image2），
+    // 背面场景下 background_image 已被 #back_side 切换为 background_image2。
+    var oldBg = (canvas === canvas2) ? background_image2 : background_image1
+    if (!oldBg) oldBg = background_image
+    var frame = typeof window.soonDesign2FrameOrigin === 'function'
+        ? window.soonDesign2FrameOrigin(canvas)
+        : { left: oldBg.left, top: oldBg.top }
+    if (typeof window.soonDesign2SnapImageToCardFrame === 'function') {
+        window.soonDesign2SnapImageToCardFrame(obj, canvas, frame)
+    }
+    var card = typeof window.soonDesign2CardSize === 'function'
+        ? window.soonDesign2CardSize()
+        : { w: 1012, h: 648 }
+    window._soonSyncingFontControls = true;
+    try {
+        $('#text_w').val(card.w)
+        $('#text_h').val(card.h)
         $('#text_x').val(0)
         $('#text_y').val(0)
-    // 设为背景时，锁定所有编辑操作，并设置为不可选中
-    obj.set({
-        lockMovementX: true,
-        lockMovementY: true,
-        lockRotation: true,
-        lockScalingX: true,
-        lockScalingY: true,
-        lockSkewingX: true,
-        lockSkewingY: true,
-        selectable: false,
-        evented: false
-    });
+    } finally {
+        window._soonSyncingFontControls = false;
+    }
+    if (typeof window.soonDesign2LockBgObject === 'function') {
+        window.soonDesign2LockBgObject(obj)
+    }
     $("#lock_img").attr("src", soonAsset("lock20.png"))
-    canvas.sendToBack(canvas.getActiveObject())
-    canvas.bringForward(canvas.getActiveObject())
+    if (typeof window.soonDesign2ApplyUserBgAsCanvas0 === 'function') {
+        window.soonDesign2ApplyUserBgAsCanvas0(obj, canvas, oldBg)
+    }
     canvas.renderAll()
     let objItem = objs.splice(idx - 1, 1)[0]
     objs.unshift(objItem)
 
-    // 确保背景图（索引0）的锁定属性被正确设置
-    setTimeout(() => {
-        let bgObj = canvas.getObjects()[0];
-        if (bgObj) {
-            bgObj.set({
-                lockMovementX: true,
-                lockMovementY: true,
-                lockRotation: true,
-                lockScalingX: true,
-                lockScalingY: true,
-                lockSkewingX: true,
-                lockSkewingY: true,
-                selectable: false,
-                evented: false
-            });
-            canvas.renderAll();
-        }
-    }, 100);
-
     recordState()
     if (typeof window.updateList === 'function') {
         window.updateList();
@@ -1294,24 +1281,7 @@ function getAbsoluteXY(_obj) {
     return [_obj.get('left'), _obj.get('top')]
 }
 $('#open').click(function () {
-    if (step.val == 0) {
-        OpenDialog();
-        return;
-    }
-    layer.confirm(
-        '<font style="color:black">' + language_str('whetherSave') + '</font>',
-        function (index) {
-            if (typeof window.output === 'function') {
-                window.output(OpenDialog);
-            }
-            layer.close(index);
-        },
-        function (index) {
-            OpenDialog();
-        }
-    )
     function OpenDialog() {
-        if (typeof window.soonRequireLogin === 'function' && !window.soonRequireLogin('打开文件')) return;
         var dialogApi = (typeof dialog !== 'undefined' && dialog) ? dialog : (window.platformBridge && window.platformBridge.showOpenDialog ? { showOpenDialog: function(opts) { return window.platformBridge.showOpenDialog(opts); } } : null);
         if (!dialogApi) return;
         dialogApi.showOpenDialog({ title: '请选择文件', buttonLabel: language_str('comf'), filters: [{ name: 'Soon File Type', extensions: ['soon'] }] })
@@ -1327,10 +1297,14 @@ $('#open').click(function () {
                     if (typeof window.openFile === 'function') window.openFile(fileKey, j);
                 }
                 function importAndOpen(j, fileName) {
-                    if (!window.platformBridge || !window.platformBridge.importSoonFile) return;
-                    window.platformBridge.importSoonFile(fileName || 'design.soon', j).then(function(res) {
-                        if (res && res.fileKey) openWithKey(res.fileKey, j);
-                    }).catch(function () {});
+                    if (typeof window.soonPutSoonSession === 'function') {
+                        var localKey = window.soonPutSoonSession(j, fileName || 'design.soon');
+                        if (!localKey) return;
+                        if (typeof window.soonScheduleCloudImport === 'function') {
+                            window.soonScheduleCloudImport(localKey, fileName || 'design.soon');
+                        }
+                        openWithKey(localKey, j);
+                    }
                 }
                 if (file && file.text) {
                     file.text().then(function(t) {
@@ -1346,18 +1320,27 @@ $('#open').click(function () {
             })
             .catch(function(err) {});
     }
+    if (typeof window.soonConfirmLeaveThen === 'function') {
+        window.soonConfirmLeaveThen(OpenDialog);
+    } else {
+        OpenDialog();
+    }
 })
 function goFirstPage() {
     if (window.platformBridge && window.platformBridge.openFirstPage) window.platformBridge.openFirstPage();
     else if (ipcRenderer && ipcRenderer.send) ipcRenderer.send('open-first-page');
 }
 $('#new').click(function () {
+    if (typeof window.soonConfirmLeaveThen === 'function') {
+        window.soonConfirmLeaveThen(goFirstPage);
+        return;
+    }
     if (step.val == 0) {
         goFirstPage();
         return;
     }
     layer.confirm(
-        '<font style="color:black">' + language_str('whetherSave') + '</font>',
+        language_str('whetherSave'),
         function (index) {
             if (typeof window.output === 'function') {
                 window.output(goFirstPage);
@@ -1370,81 +1353,12 @@ $('#new').click(function () {
     )
 })
 function chagneTitle() { }
-function addBackground() {
-    // 类型改变
-    fabric.Image.fromURL(soonAsset('bg_front_2.png'), function (image) {
-        //image.set("scaleX",$("#canvas-div").width() / 1200 < 1 ? $("#canvas-div").width() / 1200 : 1)
-
-        image.left = ($('#canvas1').width() - image.width * image.get('scaleX')) / 2
-        image.top = ($('#canvas1').height() - image.height * image.get('scaleY')) / 2
-
-        image.selectable = false
-        image.hoverable = false
-        image.hoverCursor = 'default'
-        image.setSrc(image.toDataURL(), function (image) {
-            background_image1 = image
-            background_image = background_image1
-            canvas.add(image)
-            canvas.renderAll()
-            //pre_objs1.push(JSON.stringify(objs1));
-
-            recordObjs1.push(JSON.stringify(objs1))
-            const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
-            recordJson1.push(canvas1.toJSON(props))
-        })
-        // 类型改变
-        fabric.Image.fromURL(soonAsset('bg_back_2.png'), function (image) {
-            image.left = ($('#canvas2').width() - image.width) / 2
-            image.top = ($('#canvas2').height() - image.height) / 2
-
-            image.selectable = false
-            image.hoverable = false
-            image.hoverCursor = 'default'
-
-            image.setSrc(image.toDataURL(), function (image) {
-                background_image2 = image
-                canvas2.add(image)
-                canvas2.renderAll()
-                //pre_objs2.push(JSON.stringify(objs2));
-
-                recordObjs2.push(JSON.stringify(objs2))
-                const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
-                recordJson2.push(canvas2.toJSON(props))
-
-                let file = GetFile().get('file')
-                if (file && file != 'empty') {
-                    if (typeof window.openFile === 'function') {
-                        window.openFile(file);
-                    }
-                }
-            })
-        })
-        is_bgi_add = true
-    })
-}
 function selectObject(target, index) {
     updateControls()
 
     $('#base_control').show()
     //$("#text_x").val((target.left - background_image.left).toFixed(1));
 }
-function updateControls() {
-    // 检查是否有选中对象，如果没有则直接返回
-    if (!canvas || !canvas.getActiveObject()) return;
-
-    const activeObj = canvas.getActiveObject();
-    $('#text_r').val(activeObj.get('angle').toFixed(0))
-    $('#text_x').val((activeObj.get('left') - background_image.left).toFixed(0))
-    $('#text_y').val((activeObj.get('top') - background_image.top).toFixed(0))
-    $('#text_h').val((activeObj.get('scaleY') * activeObj.get('height')).toFixed(0))
-    $('#text_w').val((activeObj.get('scaleX') * activeObj.get('width')).toFixed(0))
-    // 根据锁定状态显示图标（使用lockMovementX判断，因为锁定时会设置所有lock属性）
-    if (activeObj.get('lockMovementX')) {
-        $('#lock_img').attr('src', soonAsset('lock20.png')) //已锁定
-    } else {
-        $('#lock_img').attr('src', soonAsset('unlock20.png')) //未锁定
-    }
-}
 function checkName(name) {
     //检查字段名是否重复了
     for (let item of objs1) {
@@ -1487,8 +1401,8 @@ function selectPic(target, index) {
 
     let activeObj = canvas.getActiveObject();
 
-    // 检查对象是否被锁定
-    if (isObjectLocked(activeObj)) {
+    // 列表选中时允许锁定对象保持选中；画布点击仍不可选
+    if (!window._selectingFromList && isObjectLocked(activeObj)) {
         canvas.discardActiveObject();
         canvas.renderAll();
         return;
@@ -2135,6 +2049,8 @@ function getCoordsMaxY(acoords) {
 }
 
 $('#text_y').bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
+    if (typeof window.soonDesign2ActiveIsAnchorBg === 'function' && window.soonDesign2ActiveIsAnchorBg()) return;
     if ($('#text_y').val() == '') {
         $('#text_y').val(0)
     }
@@ -2147,6 +2063,8 @@ $('#text_y').bind('input propertychange', function () {
     recordState()
 })
 $('#text_x').bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
+    if (typeof window.soonDesign2ActiveIsAnchorBg === 'function' && window.soonDesign2ActiveIsAnchorBg()) return;
     if ($('#text_x').val() == '') {
         $('#text_x').val(0)
     }
@@ -2159,11 +2077,17 @@ $('#text_x').bind('input propertychange', function () {
     recordState()
 })
 $('#text_w').bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
+    if (typeof window.soonDesign2ActiveIsAnchorBg === 'function' && window.soonDesign2ActiveIsAnchorBg()) return;
     let val = '0'
     if ($('#text_w').val() != '') {
         val = $('#text_w').val()
     }
-    let type = objs[getIndex(canvas.getActiveObject()) - 1].type
+    var metaIdx = typeof window.soonDesign2ResolveObjMetaIndex === 'function'
+        ? window.soonDesign2ResolveObjMetaIndex(canvas.getActiveObject(), canvas)
+        : getIndex(canvas.getActiveObject()) - 1;
+    if (metaIdx < 0 || !objs[metaIdx]) return;
+    let type = objs[metaIdx].type
     if (type == 3 || type == 4) {
         canvas.getActiveObject().set('width', parseInt(val))
     } else {
@@ -2174,8 +2098,13 @@ $('#text_w').bind('input propertychange', function () {
     recordState()
 })
 $('#text_h').bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
+    if (typeof window.soonDesign2ActiveIsAnchorBg === 'function' && window.soonDesign2ActiveIsAnchorBg()) return;
     let idx = getIndex(canvas.getActiveObject())
-    if (objs[idx - 1].type == 7) {
+    var metaIdx = typeof window.soonDesign2ResolveObjMetaIndex === 'function'
+        ? window.soonDesign2ResolveObjMetaIndex(canvas.getActiveObject(), canvas)
+        : idx - 1;
+    if (metaIdx >= 0 && objs[metaIdx] && objs[metaIdx].type == 7) {
         if ($('#text_h').val() == '') {
             $('#text_h').val(canvas.getActiveObject().get('strokeWidth'))
         }
@@ -2187,7 +2116,8 @@ $('#text_h').bind('input propertychange', function () {
     if ($('#text_h').val() != '') {
         val = $('#text_h').val()
     }
-    let type = objs[getIndex(canvas.getActiveObject()) - 1].type
+    if (metaIdx < 0 || !objs[metaIdx]) return;
+    let type = objs[metaIdx].type
     if (type == 3 || type == 4) {
         canvas.getActiveObject().set('height', parseInt(val))
     } else {
@@ -2198,6 +2128,7 @@ $('#text_h').bind('input propertychange', function () {
     recordState()
 })
 $('#text_r').bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
     if ($('#text_r').val() == '') {
         $('#text_r').val('0')
     }
@@ -2300,6 +2231,7 @@ $('#out_text_back_color').bind('input propertychange', function () {
     recordState()
 })
 $("#text_size").bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
     let val = 1
     if (parseFloat($("#text_size").val())) {
         val = parseFloat($("#text_size").val())
@@ -2355,6 +2287,7 @@ $('#out_text_color').bind('input propertychange', function () {
     recordState()
 })
 $("#out_text_size").bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
     let val = 1
     if (parseFloat($("#out_text_size").val())) {
         val = parseFloat($("#out_text_size").val())
@@ -2460,6 +2393,7 @@ $('#counter_color').bind('input propertychange', function () {
     recordState()
 })
 $("#count_size").bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
     let val = 1
     if (parseFloat($("#count_size").val())) {
         val = parseFloat($("#count_size").val())
@@ -2694,7 +2628,6 @@ $("#help").click(function() {
 
 // ===========================================================
 $('#display').off('click').on('click', function () {
-    if (typeof window.soonGuardMemberPreview === 'function' && !window.soonGuardMemberPreview()) return;
     // 类型改变
     fabric.Image.fromURL(soonAsset('front_bg') + bg_version + '_2.png', function (i1) {
         i1.left = background_image.left
@@ -2745,24 +2678,17 @@ if (typeof window._design2CanvasEventsInitialized === 'undefined') {
     // - mouse:up (已在 core.js 中处理)
     // 如果需要 canvas1 特定的处理逻辑，请修改 core.js 中的相应函数
 
-    // 保留 canvas1 特定的 after:render 处理
-    canvas1.on('after:render', function () {
-        if (is_bgi_add) {
-            var image = document.getElementById('source_front')
-            ctx1.drawImage(image, (canvas.width - $('#source_front').width()) / 2, (canvas.height - $('#source_front').height()) / 2, $('#source_front').width(), $('#source_front').height())
-        }
-    })
     // 保留 canvas1 特定的 text:changed 处理
     canvas1.on('text:changed', (e) => {
         $('#text_text').val(e.target.get('text'))
     })
-    // 保留 canvas2 特定的 after:render 处理
-    canvas2.on('after:render', function () {
-        if (is_bgi_add) {
-            var image = document.getElementById('source_back')
-            ctx2.drawImage(image, (canvas.width - $('#source_back').width()) / 2, (canvas1.height - $('#source_back').height()) / 2, $('#source_back').width(), $('#source_back').height())
+    requestAnimationFrame(function () {
+        requestAnimationFrame(function () {
+            if (typeof window.soonDesign2Kickoff === 'function') {
+                window.soonDesign2Kickoff();
             }
-    })
+        });
+    });
     // 注意：以下事件已在 core.js 的 initCanvasEvents() 中统一处理，移除重复监听以避免冲突：
     // - mouse:down (通过 handleObjectSelected 处理)
     // - mouse:up (已在 core.js 中处理)

frontend-web/js/index.js

@@ -144,40 +144,18 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
 
 
-  var lang = localStorage.getItem("lang");
+  window.soonResolveLocale(function (code) {
 
-  if (lang) {
-
-    s_lan = lang;
+    s_lan = code;
 
     langua_ge(s_lan);
 
     $("#language_select").val(s_lan);
 
-  } else if (window.platformBridge && window.platformBridge.getLocale) {
-
-    window.platformBridge.getLocale().then(function (loc) {
-
-      if (loc && loc.indexOf('zh') === 0) {
-
-        s_lan = loc.indexOf('TW') >= 0 ? 'ozh' : 'zh';
-
-      } else {
-
-        s_lan = 'en';
-
-      }
-
-      langua_ge(s_lan);
-
-      $("#language_select").val(s_lan);
-
-      localStorage.setItem("lang", s_lan);
+    try { localStorage.setItem("lang", s_lan); } catch (e) {}
 
   });
 
-  }
-
 
 
   $('#language_select').on('change', function () {
@@ -199,14 +177,94 @@ layui.use(['layer', 'form', 'jquery'], function () {
     try { return !!localStorage.getItem('soon_access'); } catch (e) { return false; }
   }
 
-  function makeFileKey(id, version) {
-    return typeof window.soonMakeFileKey === 'function'
-      ? window.soonMakeFileKey(id, version)
-      : ('soondesign_file:' + id + ':v' + version);
+  var fileListState = { page: 1, size: 12, total: 0, items: [] };
+  var templateListState = { page: 1, size: 8, total: 0, items: [] };
+
+  function displayNameFromPath(path) {
+    if (!path) return 'design.soon';
+    if (typeof window.soonDisplayFileName === 'function') {
+      var fromHelper = window.soonDisplayFileName(path);
+      if (fromHelper) return fromHelper;
+    }
+    var sessionPrefix = 'soondesign_session:';
+    if (path.indexOf(sessionPrefix) === 0) {
+      var slug = path.substring(sessionPrefix.length).replace(/-\d{10,}$/, '');
+      return /\.soon$/i.test(slug) ? slug : (slug + '.soon');
+    }
+    if (path.indexOf('soondesign_file:') === 0) {
+      var meta = window._soonFileMeta;
+      if (meta && meta.name) return meta.name;
+      return path.replace(/^soondesign_file:(\d+).*/, '文件 #$1');
+    }
+    return get_filename(path) || 'design.soon';
   }
 
-  var fileListState = { page: 1, size: 12, total: 0 };
-  var templateListState = { page: 1, size: 8, total: 0, items: [] };
+  async function fetchCloudItems() {
+    if (!hasCloudAuth() || !window.platformBridge || !window.platformBridge.listCloudFiles) return [];
+    try {
+      var data = await window.platformBridge.listCloudFiles({ page: 1, size: 50 });
+      return (data && data.items) ? data.items : [];
+    } catch (e) {
+      return [];
+    }
+  }
+
+  function removeLocalHistoryPath(path) {
+    if (!path) return Promise.resolve();
+    if (typeof window.soonRecentRemove === 'function') window.soonRecentRemove(path);
+    if (typeof window.soonLocalRemove === 'function') {
+      return window.soonLocalRemove(path);
+    }
+    return Promise.resolve();
+  }
+
+  function recentFallbackThumb(type) {
+    var t = Number(type) || 1;
+    return soonAsset(t === 2 ? 'bg_2.png' : 'bg_1.png');
+  }
+
+  async function resolveRecentThumb(item) {
+    var realType = item.type || 1;
+    var fallback = recentFallbackThumb(realType);
+    var thumbKey = item.thumbRef || item.filePath || item.key;
+    if (typeof window.soonLocalGetThumb === 'function' && thumbKey) {
+      var localThumb = await window.soonLocalGetThumb(thumbKey);
+      if (localThumb) {
+        return typeof soonSafeImageUrl === 'function'
+          ? soonSafeImageUrl(localThumb, fallback)
+          : localThumb;
+      }
+    }
+    if (item.kind === 'template' && item.filePath) {
+      var tplMatch = String(item.filePath).match(/^soondesign_template:(\d+)/);
+      if (tplMatch) {
+        var base = (window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base) || '';
+        if (base) {
+          var v = item.updated_at ? ('?v=' + encodeURIComponent(item.updated_at)) : '';
+          return base + '/templates/' + tplMatch[1] + '/thumb' + v;
+        }
+      }
+    }
+    if (item.kind === 'cloud' && item.fileId && hasCloudAuth()) {
+      var apiBase = (window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base) || '';
+      if (apiBase) return apiBase + '/files/' + item.fileId + '/thumb';
+    }
+    return fallback;
+  }
+
+  function recentDownloadBtnHtml() {
+    return '<button type="button" class="soon-file-card__action soon-file-card__download" title="下载 .soon" aria-label="下载">'
+      + '<svg class="soon-file-card__icon" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">'
+      + '<path d="M12 4v10m0 0l3.5-3.5M12 14l-3.5-3.5M5 20h14"/></svg></button>';
+  }
+
+  function recentDeleteBtnHtml() {
+    return '<button type="button" class="soon-file-card__action soon-file-card__delete" title="' + escapeAttr(language_str('deleteBtn')) + '" aria-label="' + escapeAttr(language_str('deleteBtn')) + '">'
+      + '<svg class="soon-file-card__icon" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">'
+      + '<path d="M4 7h16"/><path d="M7 7l1.1 11.1a.9.9 0 00.9.9h6a.9.9 0 00.9-.9L17 7"/>'
+      + '<path d="M9.5 7V5.6A1.6 1.6 0 0111.1 4h1.8a1.6 1.6 0 011.6 1.6V7"/>'
+      + '<path d="M10 11v5.5"/><path d="M14 11v5.5"/></svg></button>';
+  }
 
   function renderFilePager() {
     var el = document.getElementById('filePager');
@@ -242,46 +300,48 @@ layui.use(['layer', 'form', 'jquery'], function () {
     }
   }
 
-  async function loadHistory() {
+  var _recentLoadedAt = 0;
+
+  async function loadHistory(force) {
 
     try {
 
+      if (!force && _recentLoadedAt && (Date.now() - _recentLoadedAt) < 60000) {
+        return;
+      }
+
+      if (typeof window.soonRecentMigrateFromHistory === 'function') {
+        window.soonRecentMigrateFromHistory();
+      }
+
       var recentCountEl = document.getElementById('recentCount');
-      var filePagerEl = document.getElementById('filePager');
-
-      if (!hasCloudAuth()) {
-
-        if (recentCountEl) recentCountEl.textContent = '0';
-        if (filePagerEl) filePagerEl.innerHTML = '';
-
-        $(".card-list").html(soonEmptyBlock('登录后查看文件', '请先登录以管理云端设计文件',
-
-          '<a href="login.web.html" class="soon-btn soon-btn--sm soon-empty__action">去登录</a>'));
-
-        return;
-
-      }
-
-      if (!window.platformBridge || !window.platformBridge.listCloudFiles) {
-
-        $(".card-list").html("");
-
-        return;
-
-      }
-
-      var data = await window.platformBridge.listCloudFiles({
-        page: fileListState.page,
-        size: fileListState.size,
+      var items = typeof window.soonRecentList === 'function' ? window.soonRecentList() : [];
+      var mapped = items.map(function (it) {
+        return {
+          kind: it.kind || (typeof window.soonRecentKindFromKey === 'function' ? window.soonRecentKindFromKey(it.key) : 'local'),
+          filePath: it.key,
+          fileId: it.fileId,
+          name: it.name,
+          type: it.type,
+          thumbRef: it.thumbRef || it.key,
+          updated_at: it.updated_at || ''
+        };
       });
 
-      var items = (data && data.items) ? data.items : [];
-      fileListState.total = (data && data.total != null) ? data.total : items.length;
-      if (data && data.page) fileListState.page = data.page;
+      if (hasCloudAuth() && typeof window.soonRecentEnrichFromCloud === 'function') {
+        var cloudItems = await fetchCloudItems();
+        mapped = window.soonRecentEnrichFromCloud(mapped, cloudItems);
+      }
+
+      fileListState.items = mapped;
+      fileListState.total = mapped.length;
+      var pages = Math.max(1, Math.ceil(fileListState.total / fileListState.size));
+      if (fileListState.page > pages) fileListState.page = pages;
+      _recentLoadedAt = Date.now();
 
       if (recentCountEl) recentCountEl.textContent = String(fileListState.total);
 
-      if (!items.length) {
+      if (!mapped.length) {
 
         $(".card-list").html(soonEmptyBlock('暂无文件', '点击「打开文件」导入，或新建模板开始设计'));
         renderFilePager();
@@ -289,91 +349,39 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
       }
 
+      var start = (fileListState.page - 1) * fileListState.size;
+      var slice = mapped.slice(start, start + fileListState.size);
+      var thumbRows = await Promise.all(slice.map(async function (item) {
+        var realType = item.type || 1;
+        return {
+          item: item,
+          src: await resolveRecentThumb(item),
+          fallbackSrc: recentFallbackThumb(realType)
+        };
+      }));
       let h = "";
 
-      for (let item of items) {
-
-        let filePath = makeFileKey(item.id, item.version);
-
-        let src = "";
-
-        let fileExists = true;
-
-        let imgStyle = "";
-
-        let realType = 1;
-
-        const soonData = await window.sysAPI.readJsonFile(filePath);
-
-        if (soonData) {
-
-          realType = soonData.soonType ? soonData.soonType : (soonData.backBlackPic ? 2 : 1);
-
-          var fallbackThumb = (realType == 2 || realType == "2") ? soonAsset('bg_2.png') : soonAsset('bg_1.png');
-
-          src = typeof soonSafeImageUrl === 'function'
-
-            ? soonSafeImageUrl(soonData.frontDisplayPic, fallbackThumb)
-
-            : (soonData.frontDisplayPic || fallbackThumb);
-
-          if (!src) src = fallbackThumb;
-
-        } else {
-
-          fileExists = false;
-
-          src = soonAsset('bg_1.png');
-
-          imgStyle = "opacity: 0.6; filter: grayscale(100%);";
-
-        }
-
-        let displayName = item.name || ('文件 #' + item.id);
-
+      for (let row of thumbRows) {
+        let item = row.item;
+        let filePath = item.filePath;
+        let realType = item.type || 1;
+        let src = row.src;
+        let fallbackSrc = row.fallbackSrc;
+        let displayName = item.name || displayNameFromPath(filePath);
         let cardTitle = displayName;
-
         var cardClass = 'card';
 
-        if (!fileExists) {
+        var actions = recentDownloadBtnHtml() + recentDeleteBtnHtml();
 
-          cardTitle = language_str("clickToDelete");
-
-          cardClass += ' soon-card--lost';
-
-        }
-
-        var lostBadge = !fileExists
-
-          ? ' <span class="soon-badge soon-badge--disabled">' + language_str("lost") + '</span>'
-
-          : '';
-
-        var dlBtn = '<button type="button" class="soon-file-card__action soon-file-card__download" title="下载 .soon" aria-label="下载">'
-
-          + '<svg class="soon-file-card__icon" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">'
-
-          + '<path d="M12 4v10m0 0l3.5-3.5M12 14l-3.5-3.5M5 20h14"/></svg></button>';
-
-        var delBtn = '<button type="button" class="soon-file-card__action soon-file-card__delete" title="' + escapeAttr(language_str('deleteBtn')) + '" aria-label="' + escapeAttr(language_str('deleteBtn')) + '">'
-
-          + '<svg class="soon-file-card__icon" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">'
-
-          + '<path d="M4 7h16"/><path d="M7 7l1.1 11.1a.9.9 0 00.9.9h6a.9.9 0 00.9-.9L17 7"/>'
-
-          + '<path d="M9.5 7V5.6A1.6 1.6 0 0111.1 4h1.8a1.6 1.6 0 011.6 1.6V7"/>'
-
-          + '<path d="M10 11v5.5"/><path d="M14 11v5.5"/></svg></button>';
-
-        h += `<div class="${cardClass}" data-file="${escapeAttr(filePath)}" data-id="${item.id}" data-name="${escapeAttr(displayName)}" title="${escapeAttr(cardTitle)}">
+        h += `<div class="${cardClass}" data-file="${escapeAttr(filePath)}" data-kind="${item.kind}" data-type="${realType}"${item.fileId ? (' data-id="' + item.fileId + '"') : ''} data-name="${escapeAttr(displayName)}" title="${escapeAttr(cardTitle)}">
 
             <div class="rect ${realType == 2 ? 'rect1' : ''}">
 
-              <div class="soon-file-card__actions">${dlBtn}${delBtn}</div>
+              <div class="soon-file-card__actions">${actions}</div>
 
-              <img src="${escapeAttr(src)}" style="${imgStyle}" alt="">
+              <img src="${escapeAttr(src)}" alt="" onerror="this.onerror=null;this.src='${escapeAttr(fallbackSrc)}'">
 
-              <div class="tip">${escapeAttr(displayName)}${lostBadge}</div>
+              <div class="tip">${escapeAttr(displayName)}</div>
 
             </div>
 
@@ -391,15 +399,13 @@ layui.use(['layer', 'form', 'jquery'], function () {
       $(".card-list").html(soonEmptyBlock('加载失败', '请刷新页面重试',
         '<button type="button" class="soon-btn soon-btn--sm soon-empty__action" id="fileListRetry">重试</button>'));
       var retry = document.getElementById('fileListRetry');
-      if (retry) retry.onclick = function () { loadHistory(); };
+      if (retry) retry.onclick = function () { loadHistory(true); };
       if (document.getElementById('filePager')) document.getElementById('filePager').innerHTML = '';
 
     }
 
   }
 
-
-
   function renderTemplatesError(message) {
 
     var grid = document.getElementById('templatesGrid');
@@ -425,24 +431,64 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
   }
 
-  function templateCardHtml(m, i) {
-    var defaultThumb = soonAsset('bg_1.png');
-    var thumbSrc = typeof soonSafeImageUrl === 'function'
-      ? soonSafeImageUrl(m.thumbnail_url, defaultThumb)
-      : (m.thumbnail_url || defaultThumb);
-    if (!thumbSrc) thumbSrc = defaultThumb;
+  function templateFallbackThumb(type) {
+    var t = Number(type) || 1;
+    return soonAsset(t === 2 ? 'bg_2.png' : 'bg_1.png');
+  }
+
+  function resolveTemplateItem(m, base) {
+    var type = Number(m.type) || 1;
+    var id = m.id;
+    var v = m.updated_at ? ('?v=' + encodeURIComponent(m.updated_at)) : '';
+    return {
+      id: id,
+      name: m.name || m.title || '模板',
+      type: type,
+      updated_at: m.updated_at || '',
+      thumbSrc: id ? (base + '/templates/' + id + '/thumb' + v) : templateFallbackThumb(type)
+    };
+  }
+
+  function openTemplateItem(m) {
+    var type = Number(m.type) || 1;
+    var id = m && m.id;
+    if (!id) {
+      if (typeof window.soonToast === 'function') window.soonToast('模板不可用', 'error');
+      return;
+    }
+    window._soonTemplateMeta = {
+      id: id,
+      name: m.name || m.title || '模板',
+      type: type,
+      updated_at: m.updated_at || ''
+    };
+    var templateKey = typeof window.soonMakeTemplateKey === 'function'
+      ? window.soonMakeTemplateKey(id)
+      : ('soondesign_template:' + id);
+    openDesign(type, templateKey);
+  }
+
+  function templateCardHtml(m, itemIndex) {
+    var type = Number(m.type) || 1;
+    var fallback = templateFallbackThumb(type);
+    var thumbSrc = m.thumbSrc || fallback;
     var esc = typeof soonEscapeHtml === 'function' ? soonEscapeHtml : escapeAttr;
     var name = esc(m.name || m.title || '模板');
-    return '<div class="soon-template-card" style="animation-delay:' + (i * 0.05) + 's" data-type="' + (m.type || 1) + '">' +
-      '<img src="' + esc(thumbSrc) + '" alt="">' +
-      '<span>' + name + '</span></div>';
+    var rectClass = 'rect' + (type == 2 ? ' rect1' : '');
+    return '<div class="card" data-type="' + type + '" data-index="' + itemIndex + '" title="' + name + '">' +
+      '<div class="' + rectClass + '">' +
+      '<img src="' + esc(thumbSrc) + '" alt="" loading="lazy" onerror="this.onerror=null;this.src=\'' + esc(fallback) + '\'">' +
+      '<div class="tip">' + name + '</div>' +
+      '</div></div>';
   }
 
   function bindTemplateCards(grid) {
     if (!grid) return;
-    grid.querySelectorAll('.soon-template-card').forEach(function (card) {
+    grid.querySelectorAll('.card[data-index]').forEach(function (card) {
       card.onclick = function () {
-        openDesign(Number(card.dataset.type) || 1, '');
+        var idx = Number(card.dataset.index);
+        var m = templateListState.items[idx];
+        if (m) openTemplateItem(m);
       };
     });
   }
@@ -482,12 +528,14 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
     var start = (templateListState.page - 1) * templateListState.size;
     var slice = items.slice(start, start + templateListState.size);
-    grid.innerHTML = slice.map(function (m, i) { return templateCardHtml(m, i); }).join('');
+    grid.innerHTML = slice.map(function (m, i) { return templateCardHtml(m, start + i); }).join('');
     bindTemplateCards(grid);
     renderTemplatePager();
   }
 
-  async function loadTemplates() {
+  var _templatesLoadedAt = 0;
+
+  async function loadTemplates(force) {
 
     var grid = document.getElementById('templatesGrid');
 
@@ -495,6 +543,10 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
     if (!grid) return;
 
+    if (!force && _templatesLoadedAt && (Date.now() - _templatesLoadedAt) < 60000) {
+      return;
+    }
+
     var base = (window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base) || '';
 
     if (!base) {
@@ -511,7 +563,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
     try {
 
-      var r = await fetch(base + '/soon-models');
+      var r = await fetch(base + '/templates');
 
       var j = await r.json();
 
@@ -524,10 +576,11 @@ layui.use(['layer', 'form', 'jquery'], function () {
       }
 
       var items = (j.data && j.data.items) ? j.data.items : [];
-      templateListState.items = items;
-      templateListState.total = items.length;
+      templateListState.items = items.map(function (it) { return resolveTemplateItem(it, base); });
+      templateListState.total = templateListState.items.length;
       templateListState.page = 1;
       renderTemplatesPage();
+      _templatesLoadedAt = Date.now();
 
     } catch (e) {
 
@@ -539,10 +592,25 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
 
 
-  loadHistory();
+  loadHistory(true);
 
   loadTemplates();
 
+  window.soonReloadRecentFiles = function () { loadHistory(true); };
+  window.soonReloadTemplates = function () { loadTemplates(true); };
+  document.addEventListener('visibilitychange', function () {
+    if (document.visibilityState === 'visible') {
+      loadTemplates(false);
+      loadHistory(false);
+    }
+  });
+  window.addEventListener('pageshow', function (e) {
+    if (e.persisted) {
+      loadTemplates(false);
+      loadHistory(false);
+    }
+  });
+
   var templatePrevNav = document.getElementById('templatePrev');
   var templateNextNav = document.getElementById('templateNext');
   if (templatePrevNav) {
@@ -559,19 +627,11 @@ layui.use(['layer', 'form', 'jquery'], function () {
   $("#openfile").click(function () { OpenDialog(); });
 
   $("#new1").click(function () {
-
-    if (typeof window.soonRequireLogin === 'function' && !window.soonRequireLogin('新建')) return;
-
     openDesign(1, '');
-
   });
 
   $("#new2").click(function () {
-
-    if (typeof window.soonRequireLogin === 'function' && !window.soonRequireLogin('新建')) return;
-
     openDesign(2, '');
-
   });
 
 
@@ -594,6 +654,14 @@ layui.use(['layer', 'form', 'jquery'], function () {
             await window.platformBridge.deleteCloudFile(fileId);
           } catch (e) { /* ignore */ }
         }
+        if (typeof window.soonRecentList === 'function') {
+          window.soonRecentList().forEach(function (it) {
+            if (it.fileId === fileId) {
+              if (typeof window.soonRecentRemove === 'function') window.soonRecentRemove(it.key);
+              if (typeof window.soonLocalRemove === 'function') window.soonLocalRemove(it.key);
+            }
+          });
+        }
         layer.msg(language_str("deleted"), { icon: 1, time: 1000 });
         if (typeof onDone === 'function') onDone();
         layer.close(index);
@@ -607,16 +675,27 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
     var card = $(this).closest('.card');
 
-    var id = parseInt(card.attr('data-id'), 10);
+    var filePath = card.attr('data-file') || '';
+
+    var kind = card.attr('data-kind') || 'local';
+
+    var fileId = parseInt(card.attr('data-id'), 10);
 
     var name = card.attr('data-name') || 'design.soon';
 
-    if (typeof window.soonRequireMember === 'function' && !window.soonRequireMember('下载')) return;
+    var type = parseInt(card.attr('data-type'), 10) || 1;
 
-    if (id && window.platformBridge && window.platformBridge.downloadCloudFile) {
-
-      window.platformBridge.downloadCloudFile(id, name).catch(function () {});
+    var item = {
+      kind: kind,
+      filePath: filePath,
+      key: filePath,
+      fileId: fileId || undefined,
+      name: name,
+      type: type
+    };
 
+    if (typeof window.soonDownloadRecentItem === 'function') {
+      window.soonDownloadRecentItem(item);
     }
 
   });
@@ -627,23 +706,51 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
     var card = $(this).closest('.card');
 
+    var kind = card.attr('data-kind') || 'cloud';
+
     var fileId = parseInt(card.attr('data-id'), 10);
 
-    if (!fileId) return;
+    var filePath = card.attr('data-file') || '';
 
-    confirmDeleteCloudFile(fileId, language_str('deleteFileConfirm'), loadHistory);
+    if (kind === 'local' || !fileId) {
+
+      layer.open({
+        type: 1,
+        skin: 'soon-layer',
+        title: language_str("delTitle"),
+        content: '<div class="soon-dialog-body">' + language_str('deleteFileConfirm') + '</div>',
+        btn: [language_str("comfirm"), language_str("cancel")],
+        btnAlign: 'r',
+        area: ['320px', 'auto'],
+        resize: false,
+        shadeClose: true,
+        yes: function (index) {
+          removeLocalHistoryPath(filePath).then(function () {
+            if (filePath.indexOf('soondesign_session:') === 0) {
+              try {
+                sessionStorage.removeItem(filePath);
+                localStorage.removeItem(filePath);
+              } catch (err) { /* ignore */ }
+            }
+            layer.msg(language_str("deleted"), { icon: 1, time: 1000 });
+            loadHistory(true);
+            layer.close(index);
+          });
+        }
+      });
+
+      return;
+
+    }
+
+    confirmDeleteCloudFile(fileId, language_str('deleteFileConfirm'), function () { loadHistory(true); });
 
   });
 
-  $(".card-list").on("click", '.card', async function () {
+  $(".card-list").on("click", '.card', function () {
 
     let filePath = $(this).attr("data-file") || $(this).attr("data");
-
-    const soonData = await window.sysAPI.readJsonFile(filePath);
-
-    if (soonData) {
-
-      let type = soonData.soonType ? soonData.soonType : (soonData.backBlackPic ? 2 : 1);
+    let type = Number($(this).attr("data-type")) || 1;
 
     if (typeof window.soonBindFileMeta === 'function') {
       window.soonBindFileMeta(filePath, { name: $(this).attr('data-name') || '' });
@@ -651,22 +758,12 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
     openDesign(type, filePath);
 
-    } else {
-
-      var fileId = parseInt($(this).attr('data-id'), 10);
-
-      confirmDeleteCloudFile(fileId, language_str("delContent"), loadHistory);
-
-    }
-
   });
 
 
 
   function OpenDialog() {
 
-    if (typeof window.soonRequireLogin === 'function' && !window.soonRequireLogin('打开文件')) return;
-
     var dialogApi = window.platformBridge && window.platformBridge.showOpenDialog
 
       ? { showOpenDialog: function (opts) { return window.platformBridge.showOpenDialog(opts); } }
@@ -713,21 +810,10 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
       }
 
-      if (!window.platformBridge || !window.platformBridge.importSoonFile) return;
-
-      try {
-
-        var res = await window.platformBridge.importSoonFile(fileName, soonData);
-
-        if (!res || !res.fileKey) return;
-
-        var type = soonData.soonType ? soonData.soonType : (soonData.backBlackPic ? 2 : 1);
-
-        openDesign(type, res.fileKey);
-
-        loadHistory();
-
-      } catch (err) { /* errors shown by bridge */ }
+      var openP = window.soonOpenSoonJsonLocally(soonData, fileName);
+      if (openP && typeof openP.then === 'function') {
+        openP.catch(function () {});
+      }
 
     }).catch(function (err) { console.log(err); });
 

frontend-web/js/member.js

@@ -1,471 +0,0 @@
-(function () {
-  'use strict';
-
-  var base = (window.SOON_DEPLOY_CONFIG && window.SOON_DEPLOY_CONFIG.api_v1_base) || '/api/v1';
-  var currentMembership = null;
-  var orderState = { page: 1, size: 8, total: 0 };
-
-  var esc = typeof soonEscapeHtml === 'function' ? soonEscapeHtml : function (s) {
-    if (s == null) return '';
-    return String(s);
-  };
-
-  var STATUS_LABEL = {
-    pending: '待支付',
-    paid: '已支付',
-    cancelled: '已取消',
-    refunded: '已退款',
-  };
-
-  var CHANNEL_LABEL = { alipay: '支付宝', wechat: '微信' };
-
-  function apiFetch(url, opts) {
-    if (typeof soonAuthedFetch === 'function') return soonAuthedFetch(url, opts || {});
-    opts = opts || {};
-    var token = localStorage.getItem('soon_access') || '';
-    opts.headers = Object.assign({}, opts.headers || {});
-    if (token) opts.headers.Authorization = 'Bearer ' + token;
-    return fetch(url, opts);
-  }
-
-  function parseApiJson(r) {
-    return r.text().then(function (text) {
-      try {
-        return JSON.parse(text);
-      } catch (e) {
-        return { ok: false, message: '服务暂时不可用，请稍后重试' };
-      }
-    });
-  }
-
-  function apiGet(p) {
-    return apiFetch(base + p).then(function (r) {
-      if (!r.ok && r.status === 401) return { ok: false, message: '未登录或会话已过期' };
-      return parseApiJson(r);
-    });
-  }
-
-  function apiPost(p, body) {
-    return apiFetch(base + p, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(body || {}),
-    }).then(function (r) {
-      if (!r.ok && r.status === 401) return { ok: false, message: '未登录或会话已过期' };
-      return parseApiJson(r);
-    });
-  }
-
-  function usageMetrics(usage, quotaMb) {
-    var bytes = (usage && usage.storage_bytes) || 0;
-    var totalBytes = (quotaMb || 0) * 1024 * 1024;
-    var pctNum = totalBytes > 0 ? (bytes / totalBytes) * 100 : 0;
-    var pctLabel = pctNum > 0 && pctNum < 1 ? '<1' : String(Math.min(100, Math.round(pctNum)));
-    var barWidth = bytes > 0 ? Math.max(pctNum < 1 ? 0.8 : pctNum, 0.8) : 0;
-    return {
-      pctNum: pctNum,
-      pctLabel: pctLabel,
-      barWidth: Math.min(100, barWidth),
-      usedDisplay: (usage && usage.used_display) || '0 MB',
-    };
-  }
-
-  function showPayBanner() {
-    var b = document.getElementById('payBanner');
-    if (!b) return;
-    b.classList.add('is-visible');
-    setTimeout(function () { b.classList.remove('is-visible'); }, 5000);
-  }
-
-  function initLanguageSelect() {
-    var sel = document.getElementById('language_select');
-    if (!sel) return;
-    sel.value = localStorage.getItem('lang') || 'zh';
-    sel.onchange = function () { localStorage.setItem('lang', sel.value); };
-  }
-
-  function isPaidMember(m) {
-    if (!m) return false;
-    if (m.is_member === true) return true;
-    return m.tier === 'member' || m.tier === 'pro';
-  }
-
-  function statusPill(sub, isMember) {
-    if (!isMember) {
-      return '<span class="soon-member-status-pill soon-member-status-pill--free">免费版</span>';
-    }
-    var st = (sub && sub.status) || 'active';
-    var cls = 'soon-member-status-pill--active';
-    var text = '生效中';
-    if (st === 'expiring') { cls = 'soon-member-status-pill--expiring'; text = '即将到期'; }
-    return '<span class="soon-member-status-pill ' + cls + '">' + text + '</span>';
-  }
-
-  function storageRing(metrics, warn) {
-    var r = 52;
-    var c = 2 * Math.PI * r;
-    var offset = c - (c * Math.min(metrics.pctNum, 100) / 100);
-    var fillCls = warn ? ' soon-member-storage-ring__fill--warn' : '';
-    return '<div class="soon-member-storage-ring">' +
-      '<svg viewBox="0 0 120 120" aria-hidden="true">' +
-      '<defs>' +
-      '<linearGradient id="memberRingGrad" x1="0%" y1="0%" x2="100%" y2="0%">' +
-      '<stop offset="0%" stop-color="#00897b"/><stop offset="100%" stop-color="#4db6ac"/>' +
-      '</linearGradient>' +
-      '<linearGradient id="memberRingWarn" x1="0%" y1="0%" x2="100%" y2="0%">' +
-      '<stop offset="0%" stop-color="#f57c00"/><stop offset="100%" stop-color="#ffb74d"/>' +
-      '</linearGradient></defs>' +
-      '<circle class="soon-member-storage-ring__track" cx="60" cy="60" r="' + r + '"/>' +
-      '<circle class="soon-member-storage-ring__fill' + fillCls + '" cx="60" cy="60" r="' + r + '" ' +
-      'stroke-dasharray="' + c + '" stroke-dashoffset="' + offset + '"/></svg>' +
-      '<div class="soon-member-storage-ring__center">' +
-      '<span class="soon-member-storage-ring__pct">' + metrics.pctLabel + '%</span>' +
-      '<span class="soon-member-storage-ring__label">已使用</span></div></div>';
-  }
-
-  function renderMyPlan(m) {
-    var el = document.getElementById('myPlan');
-    if (!el) return;
-    if (!m) {
-      el.innerHTML = '<div class="soon-member-dash"><div class="soon-member-dash__body">' +
-        '<p class="soon-member-dash__desc">加载失败，请重试</p>' +
-        '<button type="button" class="soon-btn soon-btn--sm" id="myPlanRetry">重试</button></div></div>';
-      var retry = document.getElementById('myPlanRetry');
-      if (retry) retry.onclick = loadMembership;
-      return;
-    }
-    currentMembership = m;
-    var isMember = isPaidMember(m);
-    if (typeof window.soonApplyMembership === 'function') {
-      window.soonApplyMembership(m);
-    } else if (typeof window.soonLoadMembership === 'function') {
-      window.soonLoadMembership(true);
-    }
-    var usage = m.usage || {};
-    var sub = m.subscription || {};
-
-    if (!isMember) {
-      el.innerHTML =
-        '<div class="soon-member-dash">' +
-        '<div class="soon-member-dash__body soon-member-dash__body--guest">' +
-        '<div class="soon-member-dash__badge-row">' +
-        '<span class="soon-member-tier soon-member-tier--free">免费版</span>' + statusPill(sub, false) + '</div>' +
-        '<h2 class="soon-member-dash__title">' + esc(m.name || '免费版') + '</h2>' +
-        '<p class="soon-member-dash__desc">' + esc(m.description || '免费体验设计与编辑') + '</p>' +
-        '<p class="soon-member-dash__hint">订阅后可预览、打印、保存并导出作品</p>' +
-        '<div class="soon-member-dash__actions">' +
-        '<button type="button" class="soon-btn soon-btn--sm" id="myPlanGoPlans">查看订阅方案</button>' +
-        '</div></div></div>';
-      var goPlans = document.getElementById('myPlanGoPlans');
-      if (goPlans) {
-        goPlans.onclick = function () {
-          var sec = document.getElementById('plans');
-          if (sec) sec.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        };
-      }
-      return;
-    }
-
-    var quota = m.quota_mb || 2048;
-    var metrics = usageMetrics(usage, quota);
-    var warn = metrics.pctNum >= 90;
-    var barCls = warn ? 'soon-member-progress__bar soon-member-progress__bar--warn' : 'soon-member-progress__bar';
-    var expires = sub.expires_at
-      ? esc(String(sub.expires_at).slice(0, 16).replace('T', ' '))
-      : '—';
-    var days = sub.days_remaining != null ? sub.days_remaining + ' 天' : '—';
-
-    el.innerHTML =
-      '<div class="soon-member-dash">' +
-      '<div class="soon-member-dash__body">' +
-      '<div class="soon-member-dash__top">' +
-      '<div><div class="soon-member-dash__badge-row">' +
-      '<span class="soon-member-tier">订阅版</span>' + statusPill(sub, true) + '</div>' +
-      '<h2 class="soon-member-dash__title">' + esc(m.name) + '</h2>' +
-      '<p class="soon-member-dash__desc">' + esc(m.description || '已解锁完整交付能力') + '</p>' +
-      '<p class="soon-member-dash__expire">有效期至 <strong>' + expires + '</strong> · 剩余 ' + esc(days) + '</p></div>' +
-      storageRing(metrics, warn) + '</div>' +
-      '<div class="soon-member-dash__usage">' +
-      '<div class="soon-member-dash__usage-head"><span>云端存储占用</span><strong>' +
-      esc(metrics.usedDisplay) + ' / ' + esc(m.quota_display || quota + ' MB') +
-      '（' + metrics.pctLabel + '%）</strong></div>' +
-      '<div class="soon-member-progress"><div class="' + barCls + '" style="width:' + metrics.barWidth + '%"></div></div>' +
-      '</div></div>' +
-      '<div class="soon-member-dash__stats">' +
-      '<div class="soon-member-dash__stat"><div class="soon-member-dash__stat-value">' + (usage.files_count || 0) +
-      '</div><div class="soon-member-dash__stat-label">云端文件</div></div>' +
-      '<div class="soon-member-dash__stat"><div class="soon-member-dash__stat-value">' + esc(days) +
-      '</div><div class="soon-member-dash__stat-label">剩余天数</div></div>' +
-      '</div></div>';
-  }
-
-  function orderBadge(status, refundStatus) {
-    if (refundStatus === 'pending') {
-      return '<span class="soon-member-order-badge soon-member-order-badge--pending">退款审核</span>';
-    }
-    var cls = 'soon-member-order-badge--' + (status || 'pending');
-    return '<span class="soon-member-order-badge ' + cls + '">' + esc(STATUS_LABEL[status] || status) + '</span>';
-  }
-
-  function orderPagerHtml() {
-    var page = orderState.page;
-    var size = orderState.size;
-    var total = orderState.total;
-    var pages = Math.max(1, Math.ceil(total / size));
-    if (total === 0) return '';
-    return '<div class="soon-member-pager">' +
-      '<button type="button" class="soon-btn soon-btn--sm soon-btn--ghost" id="orderPrev"' +
-      (page <= 1 ? ' disabled' : '') + '>上一页</button>' +
-      '<span>第 ' + page + ' / ' + pages + ' 页（共 ' + total + ' 条）</span>' +
-      '<button type="button" class="soon-btn soon-btn--sm soon-btn--ghost" id="orderNext"' +
-      (page >= pages ? ' disabled' : '') + '>下一页</button></div>';
-  }
-
-  function bindOrderPager() {
-    var prev = document.getElementById('orderPrev');
-    var next = document.getElementById('orderNext');
-    if (prev && !prev.disabled) {
-      prev.onclick = function () {
-        orderState.page = Math.max(1, orderState.page - 1);
-        loadOrders();
-      };
-    }
-    if (next && !next.disabled) {
-      next.onclick = function () {
-        var pages = Math.max(1, Math.ceil(orderState.total / orderState.size));
-        orderState.page = Math.min(pages, orderState.page + 1);
-        loadOrders();
-      };
-    }
-  }
-
-  function orderActionCell(o) {
-    var actions = [];
-    if (o.status === 'pending') {
-      actions.push('<button type="button" class="soon-btn soon-btn--xs soon-btn--ghost soon-member-order-act" ' +
-        'data-act="pay" data-no="' + esc(o.order_no) + '" data-plan="' + esc(o.plan_name) + '" data-price="' +
-        (o.amount_cents / 100).toFixed(2) + '" data-channel="' + esc(o.channel) + '">继续支付</button>');
-      actions.push('<button type="button" class="soon-btn soon-btn--xs soon-btn--ghost soon-member-order-act soon-member-order-act--muted" ' +
-        'data-act="cancel" data-no="' + esc(o.order_no) + '">取消</button>');
-    } else if (o.status === 'paid' && (!o.refund_status || o.refund_status === 'none')) {
-      actions.push('<button type="button" class="soon-btn soon-btn--xs soon-btn--ghost soon-member-order-act" ' +
-        'data-act="refund" data-no="' + esc(o.order_no) + '">申请退款</button>');
-    }
-    if (!actions.length) return '<span class="soon-member-order-act--empty">—</span>';
-    return '<div class="soon-member-order-actions">' + actions.join('') + '</div>';
-  }
-
-  function bindOrderActions() {
-    document.querySelectorAll('.soon-member-order-act[data-act]').forEach(function (btn) {
-      btn.onclick = function () {
-        var act = btn.dataset.act;
-        var no = btn.dataset.no;
-        if (act === 'pay') {
-          openPayModal(null, btn.dataset.plan, btn.dataset.price, {
-            orderNo: no,
-            channel: btn.dataset.channel || 'wechat',
-          });
-          return;
-        }
-        if (act === 'cancel') {
-          layer.confirm('确定取消该待支付订单？', { skin: 'soon-layer', title: '取消订单' }, function (idx) {
-            apiPost('/pay/orders/' + encodeURIComponent(no) + '/cancel', {}).then(function (r) {
-              layer.close(idx);
-              if (r.ok) {
-                soonToast('订单已取消', 'success');
-                loadOrders();
-              } else {
-                soonToast(r.message || '取消失败', 'warn');
-              }
-            });
-          });
-          return;
-        }
-        if (act === 'refund') {
-          layer.prompt({
-            skin: 'soon-layer',
-            title: '申请退款',
-            formType: 2,
-            value: '',
-            maxlength: 200,
-          }, function (reason, idx) {
-            reason = (reason || '').trim();
-            if (!reason) {
-              soonToast('请填写退款原因', 'warn');
-              return;
-            }
-            apiPost('/pay/orders/' + encodeURIComponent(no) + '/refund-request', { reason: reason }).then(function (r) {
-              layer.close(idx);
-              if (r.ok) {
-                soonToast('退款申请已提交', 'success');
-                loadOrders();
-              } else {
-                soonToast(r.message || '提交失败', 'warn');
-              }
-            });
-          });
-        }
-      };
-    });
-  }
-
-  function renderOrders(orders) {
-    var el = document.getElementById('orderHistory');
-    if (!el) return;
-    if (!orders || !orders.length) {
-      el.innerHTML = '<div class="soon-member-orders-empty">暂无订单，订阅后将显示在这里</div>' +
-        orderPagerHtml();
-      bindOrderPager();
-      return;
-    }
-    var rows = orders.map(function (o) {
-      return '<tr><td>' + esc(o.order_no) + '</td><td>' + esc(o.plan_name) + '</td><td class="soon-member-orders__amount">¥' +
-        (o.amount_cents / 100).toFixed(2) + '</td><td>' + esc(CHANNEL_LABEL[o.channel] || o.channel) +
-        '</td><td>' + orderBadge(o.status, o.refund_status) + '</td><td>' +
-        esc(String(o.paid_at || o.created_at || '').slice(0, 16).replace('T', ' ')) + '</td><td>' +
-        orderActionCell(o) + '</td></tr>';
-    }).join('');
-    el.innerHTML = '<table><thead><tr><th>订单号</th><th>方案</th><th>金额</th><th>渠道</th><th>状态</th><th>时间</th><th>操作</th></tr></thead><tbody>' +
-      rows + '</tbody></table>' + orderPagerHtml();
-    bindOrderPager();
-    bindOrderActions();
-  }
-
-  function loadOrders() {
-    apiGet('/pay/orders?page=' + orderState.page + '&size=' + orderState.size).then(function (res) {
-      if (!res.ok) {
-        renderOrders([]);
-        return;
-      }
-      var data = res.data || {};
-      orderState.total = data.total || 0;
-      orderState.page = data.page || orderState.page;
-      orderState.size = data.size || orderState.size;
-      renderOrders(data.items || []);
-    }).catch(function () {
-      renderOrders([]);
-    });
-  }
-
-  function renderPlans(items) {
-    var grid = document.getElementById('plans');
-    if (!grid || !window.SoonMemberPlan) return;
-    var paid = items.filter(function (p) { return p.code !== 'free' && p.price_cents > 0; });
-    var currentCode = currentMembership && isPaidMember(currentMembership) ? currentMembership.code : '';
-    if (!paid.length) {
-      grid.innerHTML = '<div class="soon-member-orders-empty" style="grid-column:1/-1">暂无可用订阅方案</div>';
-      return;
-    }
-    grid.innerHTML = window.SoonMemberPlan.plansGridHtml(paid, {
-      allPlans: paid,
-      currentCode: currentCode,
-      isMember: isPaidMember(currentMembership),
-      mode: 'page',
-    });
-    grid.querySelectorAll('.soon-plan-card__cta[data-id]').forEach(function (btn) {
-      btn.onclick = function () {
-        openPayModal(Number(btn.dataset.id), btn.dataset.name, btn.dataset.price);
-      };
-    });
-  }
-
-  function renderPlansError(message, onRetry) {
-    var grid = document.getElementById('plans');
-    if (!grid) return;
-    grid.innerHTML = '<div class="soon-member-orders-empty" style="grid-column:1/-1">' +
-      esc(message || '方案加载失败') +
-      '<br><button type="button" class="soon-btn soon-btn--sm" style="margin-top:14px" id="plansRetry">重试</button></div>';
-    var btn = document.getElementById('plansRetry');
-    if (btn && onRetry) btn.onclick = onRetry;
-  }
-
-  function loadPlans() {
-    apiGet('/plans').then(function (ps) {
-      if (!ps.ok) {
-        renderPlansError(ps.message || '方案加载失败', loadPlans);
-        return;
-      }
-      renderPlans((ps.data && ps.data.items) || []);
-    }).catch(function () {
-      renderPlansError('网络错误，请稍后重试', loadPlans);
-    });
-  }
-
-  function openPayModal(planId, planName, priceDisplay, opts) {
-    opts = opts || {};
-    var payCore = window.SoonMemberPay;
-    if (!payCore || !payCore.openPayModal) {
-      soonToast('支付模块未加载，请刷新页面', 'warn');
-      return;
-    }
-    payCore.openPayModal({
-      planId: planId,
-      planName: planName,
-      priceDisplay: priceDisplay,
-      orderNo: opts.orderNo,
-      channel: opts.channel || 'wechat',
-      onPaid: function () {
-        showPayBanner();
-        loadMembership();
-      },
-    });
-  }
-
-  function loadMembership() {
-    apiGet('/plans/me').then(function (my) {
-      if (!my.ok || !my.data) {
-        renderMyPlan(null);
-        return;
-      }
-      renderMyPlan(my.data.membership || my.data);
-      loadOrders();
-      loadPlans();
-    }).catch(function () {
-      renderMyPlan(null);
-    });
-  }
-
-  function init() {
-    if (!localStorage.getItem('soon_access')) {
-      location.href = 'login.web.html?redirect=' + encodeURIComponent('member.web.html');
-      return;
-    }
-    if (window.SoonPortalTopbar) {
-      SoonPortalTopbar.mount('#portal-topbar', { active: 'member' });
-    } else {
-      initLanguageSelect();
-    }
-    soonPortalAuth.init({ logoutReload: false });
-    apiGet('/auth/me').then(function (me) {
-      if (!me.ok) {
-        location.href = 'login.web.html?redirect=' + encodeURIComponent('member.web.html');
-        return;
-      }
-      if (me.data && me.data.role === 'admin') {
-        var adminEl = document.getElementById('auth_admin');
-        if (adminEl) adminEl.style.display = 'inline-flex';
-      }
-      loadMembership();
-      if (new URLSearchParams(location.search).get('paid') || sessionStorage.getItem('soon_pay_return')) {
-        sessionStorage.removeItem('soon_pay_return');
-        showPayBanner();
-        loadMembership();
-      }
-    }).catch(function () {
-      renderMyPlan(null);
-      renderPlansError('网络错误，请稍后重试', function () { location.reload(); });
-      var ordersEl = document.getElementById('orderHistory');
-      if (ordersEl) {
-        ordersEl.innerHTML = '<div class="soon-member-orders-empty">加载失败，<button type="button" class="soon-btn soon-btn--sm" id="ordersRetry">重试</button></div>';
-        var ordersRetry = document.getElementById('ordersRetry');
-        if (ordersRetry) ordersRetry.onclick = function () { location.reload(); };
-      }
-    });
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
-  }
-})();