Web 端本地缓存、首页与会员弹窗体验优化

新增 IndexedDB 与最近文件 L1 缓存、云保存/打开链路；首页支持下载与清空本地缓存；修复清空 storage 后语言初始化报错；优化 design2 背景加载与侧栏标签样式；完善会员激活/支付弹层样式；后端补充文件缩略图字段与 thumb 接口。

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

frontend-web/js/index.js

@@ -144,39 +144,17 @@ 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) {
+    try { localStorage.setItem("lang", s_lan); } catch (e) {}
 
-    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);
-
-    });
-
-  }
+  });
 
 
 
@@ -199,19 +177,20 @@ 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) return path.substring(sessionPrefix.length);
+    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;
@@ -220,74 +199,6 @@ layui.use(['layer', 'form', 'jquery'], function () {
     return get_filename(path) || 'design.soon';
   }
 
-  function parseItemTime(value) {
-    if (!value) return 0;
-    var d = new Date(String(value).replace(' ', 'T'));
-    return isNaN(d.getTime()) ? 0 : d.getTime();
-  }
-
-  function mergeRecentItems(localHistory, cloudItems) {
-    var items = [];
-    var cloudById = {};
-    var seenCloudIds = {};
-    (cloudItems || []).forEach(function (c) {
-      if (c && c.id != null) cloudById[c.id] = c;
-    });
-
-    (localHistory || []).forEach(function (h) {
-      if (!h || !h.path) return;
-      var cloudMatch = String(h.path).match(/^soondesign_file:(\d+)/);
-      if (cloudMatch) {
-        var id = parseInt(cloudMatch[1], 10);
-        var cloud = cloudById[id];
-        if (cloud) {
-          seenCloudIds[id] = true;
-          items.push({
-            kind: 'cloud',
-            filePath: makeFileKey(cloud.id, cloud.version),
-            fileId: cloud.id,
-            name: cloud.name || ('文件 #' + cloud.id),
-            type: h.type,
-            sortTime: parseItemTime(cloud.updated_at || cloud.created_at || h.time),
-          });
-          return;
-        }
-      }
-      items.push({
-        kind: 'local',
-        filePath: h.path,
-        name: displayNameFromPath(h.path),
-        type: h.type,
-        sortTime: parseItemTime(h.time),
-      });
-    });
-
-    (cloudItems || []).forEach(function (c) {
-      if (!c || c.id == null || seenCloudIds[c.id]) return;
-      items.push({
-        kind: 'cloud',
-        filePath: makeFileKey(c.id, c.version),
-        fileId: c.id,
-        name: c.name || ('文件 #' + c.id),
-        type: null,
-        sortTime: parseItemTime(c.updated_at || c.created_at),
-      });
-    });
-
-    items.sort(function (a, b) { return (b.sortTime || 0) - (a.sortTime || 0); });
-    return items;
-  }
-
-  async function fetchLocalHistory() {
-    if (!window.sysAPI || typeof window.sysAPI.readHistory !== 'function') return [];
-    try {
-      var j = await window.sysAPI.readHistory();
-      return (j && Array.isArray(j.history)) ? j.history : [];
-    } catch (e) {
-      return [];
-    }
-  }
-
   async function fetchCloudItems() {
     if (!hasCloudAuth() || !window.platformBridge || !window.platformBridge.listCloudFiles) return [];
     try {
@@ -299,15 +210,60 @@ layui.use(['layer', 'form', 'jquery'], function () {
   }
 
   function removeLocalHistoryPath(path) {
-    if (!path || !window.sysAPI || typeof window.sysAPI.readHistory !== 'function') {
-      return Promise.resolve();
+    if (!path) return Promise.resolve();
+    if (typeof window.soonRecentRemove === 'function') window.soonRecentRemove(path);
+    if (typeof window.soonLocalRemove === 'function') {
+      return window.soonLocalRemove(path);
     }
-    return window.sysAPI.readHistory().then(function (j) {
-      var list = (j && Array.isArray(j.history)) ? j.history : [];
-      var next = list.filter(function (item) { return item.path !== path; });
-      if (next.length === list.length) return null;
-      return window.sysAPI.writeHistory({ history: next });
-    }).catch(function () { return null; });
+    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() {
@@ -344,22 +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 localHistory = await fetchLocalHistory();
-      var cloudItems = await fetchCloudItems();
-      var merged = mergeRecentItems(localHistory, cloudItems);
-      fileListState.items = merged;
-      fileListState.total = merged.length;
+      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 || ''
+        };
+      });
+
+      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 (!merged.length) {
+      if (!mapped.length) {
 
         $(".card-list").html(soonEmptyBlock('暂无文件', '点击「打开文件」导入，或新建模板开始设计'));
         renderFilePager();
@@ -368,89 +350,30 @@ layui.use(['layer', 'form', 'jquery'], function () {
       }
 
       var start = (fileListState.page - 1) * fileListState.size;
-      var slice = merged.slice(start, start + fileListState.size);
+      var slice = mapped.slice(start, start + fileListState.size);
       let h = "";
 
       for (let item of slice) {
 
         let filePath = item.filePath;
-        let src = "";
-        let fileExists = true;
-        let imgStyle = "";
         let realType = item.type || 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((realType == 2 || realType == "2") ? 'bg_2.png' : 'bg_1.png');
-
-          imgStyle = "opacity: 0.6; filter: grayscale(100%);";
-
-        }
-
+        let src = await resolveRecentThumb(item);
+        let fallbackSrc = recentFallbackThumb(realType);
         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 actions = '';
-        if (item.kind === 'cloud' && item.fileId) {
-          actions = '<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>'
-            + '<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>';
-        } else {
-          actions = '<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-kind="${item.kind}"${item.fileId ? (' data-id="' + item.fileId + '"') : ''} 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">${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>
 
@@ -468,17 +391,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 = '';
 
     }
 
   }
 
-  window.soonReloadRecentFiles = loadHistory;
-
-
-
   function renderTemplatesError(message) {
 
     var grid = document.getElementById('templatesGrid');
@@ -517,6 +436,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
       id: id,
       name: m.name || m.title || '模板',
       type: type,
+      updated_at: m.updated_at || '',
       thumbSrc: id ? (base + '/templates/' + id + '/thumb' + v) : templateFallbackThumb(type)
     };
   }
@@ -528,6 +448,12 @@ layui.use(['layer', 'form', 'jquery'], function () {
       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);
@@ -658,16 +584,23 @@ 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);
+    if (document.visibilityState === 'visible') {
+      loadTemplates(false);
+      loadHistory(false);
+    }
   });
   window.addEventListener('pageshow', function (e) {
-    if (e.persisted) loadTemplates(false);
+    if (e.persisted) {
+      loadTemplates(false);
+      loadHistory(false);
+    }
   });
 
   var templatePrevNav = document.getElementById('templatePrev');
@@ -713,6 +646,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);
@@ -726,14 +667,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 (id && window.platformBridge && window.platformBridge.downloadCloudFile) {
+    var type = parseInt(card.attr('data-type'), 10) || 1;
 
-      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);
     }
 
   });
@@ -771,7 +725,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
               } catch (err) { /* ignore */ }
             }
             layer.msg(language_str("deleted"), { icon: 1, time: 1000 });
-            loadHistory();
+            loadHistory(true);
             layer.close(index);
           });
         }
@@ -781,52 +735,21 @@ layui.use(['layer', 'form', 'jquery'], function () {
 
     }
 
-    confirmDeleteCloudFile(fileId, language_str('deleteFileConfirm'), loadHistory);
+    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");
+    let type = Number($(this).attr("data-type")) || 1;
 
-    const soonData = await window.sysAPI.readJsonFile(filePath);
-
-    if (soonData) {
-
-      let type = soonData.soonType ? soonData.soonType : (soonData.backBlackPic ? 2 : 1);
-
-      if (typeof window.soonBindFileMeta === 'function') {
-        window.soonBindFileMeta(filePath, { name: $(this).attr('data-name') || '' });
-      }
-
-      openDesign(type, filePath);
-
-    } else {
-
-      var kind = $(this).attr('data-kind') || 'cloud';
-
-      var fileId = parseInt($(this).attr('data-id'), 10);
-
-      if (kind === 'local' || !fileId) {
-
-        removeLocalHistoryPath(filePath).then(function () {
-          if (filePath.indexOf('soondesign_session:') === 0) {
-            try {
-              sessionStorage.removeItem(filePath);
-              localStorage.removeItem(filePath);
-            } catch (err) { /* ignore */ }
-          }
-          loadHistory();
-        });
-
-        return;
-
-      }
-
-      confirmDeleteCloudFile(fileId, language_str("delContent"), loadHistory);
-
+    if (typeof window.soonBindFileMeta === 'function') {
+      window.soonBindFileMeta(filePath, { name: $(this).attr('data-name') || '' });
     }
 
+    openDesign(type, filePath);
+
   });