feat: build local optimizer interface

2026-06-21 23:42:37 +08:00
parent dd6480a8be
commit 67f19f8550
6 changed files with 745 additions and 22 deletions
@@ -0,0 +1,83 @@
+"use client";
+
+import type { OptimizedArticle } from "../lib/domain/types";
+
+interface OptimizedPreviewProps {
+  article: OptimizedArticle | null;
+  jobId: string | null;
+  exportBlocked: boolean;
+}
+
+const exportFiles = ["optimized.md", "optimized.docx", "qa_report.json"];
+
+export function OptimizedPreview({
+  article,
+  jobId,
+  exportBlocked,
+}: OptimizedPreviewProps) {
+  if (!article) {
+    return (
+      <section className="panel empty-panel">
+        <div className="panel-heading">Optimized Result</div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="panel stack">
+      <div className="panel-heading">Optimized Result</div>
+      <article className="preview">
+        <h2>{article.title}</h2>
+        <p>{article.summary}</p>
+        <pre>{article.body_markdown}</pre>
+      </article>
+      <div>
+        <h3>Image suggestions</h3>
+        <ul>
+          {article.image_suggestions.map((item) => (
+            <li key={item.source}>
+              <strong>{item.source}</strong>: {item.suggestion}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div>
+        <h3>Changed sections</h3>
+        <div className="tag-row">
+          {article.changed_sections.map((section) => (
+            <span className="tag" key={section}>
+              {section}
+            </span>
+          ))}
+        </div>
+      </div>
+      {article.requires_user_confirmation.length > 0 && (
+        <div>
+          <h3>Needs confirmation</h3>
+          <ul>
+            {article.requires_user_confirmation.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <div className="export-row">
+        {exportFiles.map((fileName) =>
+          jobId && !exportBlocked ? (
+            <a
+              className="download-link"
+              href={`/api/jobs/${jobId}/exports/${fileName}`}
+              key={fileName}
+            >
+              {fileName}
+            </a>
+          ) : (
+            <button disabled key={fileName} type="button">
+              {fileName}
+            </button>
+          ),
+        )}
+      </div>
+    </section>
+  );
+}