fix

app/static/app.js

@@ -1,6 +1,25 @@
 const $ = (id) => document.getElementById(id);
 
 const statusEl = $("status");
+const rewriteBtn = $("rewriteBtn");
+const wechatBtn = $("wechatBtn");
+const imBtn = $("imBtn");
+
+function countText(v) {
+  return (v || "").trim().length;
+}
+
+function updateCounters() {
+  $("sourceCount").textContent = `${countText($("sourceText").value)} 字`;
+  $("summaryCount").textContent = `${countText($("summary").value)} 字`;
+  $("bodyCount").textContent = `${countText($("body").value)} 字`;
+}
+
+function setLoading(button, loading, idleText, loadingText) {
+  if (!button) return;
+  button.disabled = loading;
+  button.textContent = loading ? loadingText : idleText;
+}
 
 function setStatus(msg, danger = false) {
   statusEl.style.color = danger ? "#b42318" : "#0f5f3d";
@@ -26,6 +45,7 @@ $("rewriteBtn").addEventListener("click", async () => {
   }
 
   setStatus("AI 改写中...");
+  setLoading(rewriteBtn, true, "AI 改写并排版", "AI 改写中...");
   try {
     const data = await postJSON("/api/rewrite", {
       source_text: sourceText,
@@ -38,14 +58,23 @@ $("rewriteBtn").addEventListener("click", async () => {
     $("title").value = data.title || "";
     $("summary").value = data.summary || "";
     $("body").value = data.body_markdown || "";
-    setStatus("改写完成，可直接发布。");
+    updateCounters();
+    if (data.mode === "fallback") {
+      const note = (data.quality_notes || [])[0] || "当前为保底改写稿";
+      setStatus(`改写完成（保底模式）：${note}`, true);
+    } else {
+      setStatus("改写完成，可直接发布。");
+    }
   } catch (e) {
     setStatus(`改写失败: ${e.message}`, true);
+  } finally {
+    setLoading(rewriteBtn, false, "AI 改写并排版", "AI 改写中...");
   }
 });
 
 $("wechatBtn").addEventListener("click", async () => {
   setStatus("正在发布到公众号草稿箱...");
+  setLoading(wechatBtn, true, "发布到公众号草稿箱", "发布中...");
   try {
     const data = await postJSON("/api/publish/wechat", {
       title: $("title").value,
@@ -56,11 +85,14 @@ $("wechatBtn").addEventListener("click", async () => {
     setStatus("公众号草稿发布成功");
   } catch (e) {
     setStatus(`公众号发布失败: ${e.message}`, true);
+  } finally {
+    setLoading(wechatBtn, false, "发布到公众号草稿箱", "发布中...");
   }
 });
 
 $("imBtn").addEventListener("click", async () => {
   setStatus("正在发送到 IM...");
+  setLoading(imBtn, true, "发送到 IM", "发送中...");
   try {
     const data = await postJSON("/api/publish/im", {
       title: $("title").value,
@@ -70,5 +102,13 @@ $("imBtn").addEventListener("click", async () => {
     setStatus("IM 发送成功");
   } catch (e) {
     setStatus(`IM 发送失败: ${e.message}`, true);
+  } finally {
+    setLoading(imBtn, false, "发送到 IM", "发送中...");
   }
 });
+
+["sourceText", "summary", "body"].forEach((id) => {
+  $(id).addEventListener("input", updateCounters);
+});
+
+updateCounters();

app/static/style.css

@@ -21,9 +21,36 @@ body {
   font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
 }
 
+.topbar {
+  max-width: 1280px;
+  margin: 20px auto 0;
+  padding: 0 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.brand h1 {
+  margin: 0;
+}
+
+.brand .muted {
+  margin: 6px 0 0;
+}
+
+.badge {
+  font-size: 12px;
+  font-weight: 700;
+  color: #0f5f3d;
+  background: #eaf7f0;
+  border: 1px solid #cde6d7;
+  padding: 5px 10px;
+  border-radius: 999px;
+}
+
 .layout {
   max-width: 1280px;
-  margin: 24px auto;
+  margin: 14px auto 24px;
   padding: 0 16px;
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -56,6 +83,17 @@ label {
   font-weight: 600;
 }
 
+.field-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.meta {
+  color: var(--muted);
+  font-size: 12px;
+}
+
 input,
 textarea,
 button {
@@ -64,6 +102,7 @@ button {
   border: 1px solid var(--line);
   padding: 10px 12px;
   font-size: 14px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
 }
 
 textarea {
@@ -71,6 +110,13 @@ textarea {
   line-height: 1.5;
 }
 
+input:focus,
+textarea:focus {
+  outline: none;
+  border-color: #8ec6aa;
+  box-shadow: 0 0 0 3px rgba(24, 121, 78, 0.12);
+}
+
 button {
   cursor: pointer;
   margin-top: 12px;
@@ -91,6 +137,11 @@ button.primary:hover {
   background: var(--accent-2);
 }
 
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
 .actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -114,4 +165,10 @@ button.primary:hover {
   .layout {
     grid-template-columns: 1fr;
   }
+
+  .topbar {
+    align-items: flex-start;
+    gap: 8px;
+    flex-direction: column;
+  }
 }