Fix settings loading and use 2-column card layout.

Merge Flask GET/POST routes, refresh prefs on tab revisit after preload, and reorganize system settings into separate cards.

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

lib/common/static/instance_embed.js

@@ -117,6 +117,16 @@
         }
       }
     }
+    if (revisit && (tab === "settings" || tab === "env_config")) {
+      if (global.InstanceSettingsPrefs) {
+        if (tab === "settings" && typeof global.InstanceSettingsPrefs.loadDisplayPrefsForm === "function") {
+          global.InstanceSettingsPrefs.loadDisplayPrefsForm();
+        }
+        if (tab === "env_config" && typeof global.InstanceSettingsPrefs.loadEnvConfig === "function") {
+          global.InstanceSettingsPrefs.loadEnvConfig();
+        }
+      }
+    }
     if (!revisit) {
       if (typeof global.refreshAccountSnapshot === "function") {
         global.refreshAccountSnapshot({ silent: true });
@@ -296,6 +306,7 @@
     }
     if (revisit) {
       document.body.setAttribute("data-page", tab);
+      runPageInit(tab, { revisit: true });
       return;
     }
     runPageInit(tab, { revisit: false });

lib/common/static/instance_settings_prefs.js

@@ -57,8 +57,17 @@
   }
 
   async function loadDisplayPrefsForm() {
-    const root = document.getElementById("display-prefs-form");
-    if (!root) return;
+    const pane = document.querySelector('.embed-tab-pane.is-active-pane') || document;
+    const root = pane.querySelector ? pane.querySelector("#display-prefs-form") : document.getElementById("display-prefs-form");
+    if (!root) {
+      const fallback = document.getElementById("display-prefs-form");
+      if (!fallback) return;
+      return loadDisplayPrefsFormIn(fallback);
+    }
+    return loadDisplayPrefsFormIn(root);
+  }
+
+  async function loadDisplayPrefsFormIn(root) {
     try {
       const data = await fetchJson("/api/settings/display");
       const display = data.display || {};
@@ -157,8 +166,14 @@
   }
 
   async function loadEnvConfig() {
-    const grid = document.getElementById("env-config-grid");
-    if (!grid) return;
+    const pane = document.querySelector('.embed-tab-pane.is-active-pane') || document;
+    const grid = pane.querySelector ? pane.querySelector("#env-config-grid") : document.getElementById("env-config-grid");
+    const target = grid || document.getElementById("env-config-grid");
+    if (!target) return;
+    return loadEnvConfigIn(target);
+  }
+
+  async function loadEnvConfigIn(grid) {
     grid.innerHTML = '<div class="env-config-loading muted">加载配置中…</div>';
     try {
       const data = await fetchJson("/api/settings/env");

lib/common/static/instance_theme.css

@@ -2333,6 +2333,43 @@ html[data-theme="light"] .journal-detail-img-thumb {
   margin-top: 12px;
 }
 
+.settings-page--grid {
+  margin-top: 12px;
+}
+
+.settings-grid-2col {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  align-items: start;
+}
+
+.settings-grid-cell {
+  min-width: 0;
+}
+
+.settings-grid-cell--full {
+  grid-column: 1 / -1;
+}
+
+.settings-card--standalone {
+  padding: 12px 14px;
+  height: 100%;
+}
+
+.settings-card--standalone h2 {
+  margin: 0 0 8px;
+  font-size: 1.05rem;
+}
+
+.settings-card--export .settings-export-links-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  margin-top: 8px;
+}
+
 .settings-page--ops {
   max-width: 720px;
 }
@@ -2501,6 +2538,9 @@ html[data-theme="light"] .journal-detail-img-thumb {
 }
 
 @media (max-width: 900px) {
+  .settings-grid-2col {
+    grid-template-columns: minmax(0, 1fr);
+  }
   .settings-cards-grid {
     grid-template-columns: minmax(0, 1fr);
   }