init

2026-03-21 17:16:13 +08:00
commit 6cf78d4c86
31 changed files with 970 additions and 0 deletions
--- a/html-generator/frontend/app/globals.css
+++ b/html-generator/frontend/app/globals.css
@@ -0,0 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: oklch(0.9816 0.0017 247.8577);
+  --foreground: oklch(0.1221 0 0);
+  --card: oklch(0.9911 0 0);
+  --card-foreground: oklch(0.1221 0 0);
+  --popover: oklch(0.9911 0 0);
+  --popover-foreground: oklch(0.1221 0 0);
+  --primary: oklch(0.6264 0.1942 259.2027);
+  --primary-foreground: oklch(0.9911 0 0);
+  --secondary: oklch(0.2795 0.0368 259.8165);
+  --secondary-foreground: oklch(0.9911 0 0);
+  --muted: oklch(0.9700 0 0);
+  --muted-foreground: oklch(0.5560 0 0);
+  --accent: oklch(0.6755 0.1303 40.7093);
+  --accent-foreground: oklch(0.9911 0 0);
+  --destructive: oklch(0.6498 0.1805 9.8598);
+  --destructive-foreground: oklch(0.9911 0 0);
+  --border: oklch(0.9189 0 0);
+  --input: oklch(0.9491 0 0);
+  --ring: oklch(0.6264 0.1942 259.2027);
+}
+
+.dark {
+  --background: oklch(0.1221 0 0);
+  --foreground: oklch(0.9816 0.0017 247.8577);
+  --card: oklch(0.1565 0 0);
+  --card-foreground: oklch(0.9816 0.0017 247.8577);
+  --popover: oklch(0.1565 0 0);
+  --popover-foreground: oklch(0.9816 0.0017 247.8577);
+  --primary: oklch(0.6264 0.1942 259.2027);
+  --primary-foreground: oklch(0.9911 0 0);
+  --secondary: oklch(0.2795 0.0368 259.8165);
+  --secondary-foreground: oklch(0.9911 0 0);
+  --muted: oklch(0.2686 0 0);
+  --muted-foreground: oklch(0.7155 0 0);
+  --accent: oklch(0.6755 0.1303 40.7093);
+  --accent-foreground: oklch(0.9911 0 0);
+  --destructive: oklch(0.6498 0.1805 9.8598);
+  --destructive-foreground: oklch(0.9911 0 0);
+  --border: oklch(0.2750 0 0);
+  --input: oklch(0.3250 0 0);
+  --ring: oklch(0.6264 0.1942 259.2027);
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background-color: var(--background);
+  color: var(--foreground);
+  line-height: 1.6;
+}
--- a/html-generator/frontend/app/layout.tsx
+++ b/html-generator/frontend/app/layout.tsx
@@ -0,0 +1,36 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+
+export const metadata: Metadata = {
+  title: 'HTML Generator',
+  description: '生成HTML文件并返回可访问链接',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="zh-CN">
+      <body>
+        <div className="min-h-screen flex flex-col">
+          <header className="bg-primary text-primary-foreground py-4 px-6 shadow-md">
+            <div className="container mx-auto">
+              <h1 className="text-2xl font-bold">HTML Generator</h1>
+            </div>
+          </header>
+          <main className="flex-1 container mx-auto py-8 px-6">
+            {children}
+          </main>
+          <footer className="bg-muted text-muted-foreground py-4 px-6 border-t">
+            <div className="container mx-auto text-center">
+              <p>© 2026 HTML Generator</p>
+            </div>
+          </footer>
+        </div>
+      </body>
+    </html>
+  );
+}
--- a/html-generator/frontend/app/page.tsx
+++ b/html-generator/frontend/app/page.tsx
@@ -0,0 +1,88 @@
+import { useState } from 'react';
+
+export default function Home() {
+  const [htmlContent, setHtmlContent] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<{ url: string } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const response = await fetch('http://localhost:8000/api/html/generate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ html_content: htmlContent }),
+      });
+
+      if (!response.ok) {
+        throw new Error('生成 HTML 文件失败');
+      }
+
+      const data = await response.json();
+      setResult({ url: data.url });
+    } catch (err) {
+      setError('生成 HTML 文件失败，请稍后重试');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <h2 className="text-2xl font-bold mb-6">HTML 文件生成器</h2>
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div>
+          <label htmlFor="html-content" className="block text-sm font-medium mb-2">
+            HTML 内容
+          </label>
+          <textarea
+            id="html-content"
+            value={htmlContent}
+            onChange={(e) => setHtmlContent(e.target.value)}
+            rows={10}
+            className="w-full p-4 border border-border rounded-md bg-card focus:outline-none focus:ring-2 focus:ring-primary"
+            placeholder="请输入 HTML 内容..."
+          />
+        </div>
+        <div>
+          <button
+            type="submit"
+            disabled={loading || !htmlContent.trim()}
+            className="bg-primary text-primary-foreground px-6 py-2 rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {loading ? '生成中...' : '生成 HTML 文件'}
+          </button>
+        </div>
+      </form>
+
+      {error && (
+        <div className="mt-6 p-4 bg-destructive/10 text-destructive rounded-md">
+          {error}
+        </div>
+      )}
+
+      {result && (
+        <div className="mt-6 p-4 bg-accent/10 text-accent rounded-md">
+          <h3 className="font-medium mb-2">生成成功！</h3>
+          <p className="mb-2">您的 HTML 文件已生成，可通过以下链接访问：</p>
+          <a
+            href={result.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:underline"
+          >
+            {result.url}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}