zwz/minimap1.1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:修复项目结构

Browse Source
This commit is contained in:
ZhangYonghao
2026-03-21 19:16:31 +08:00
parent 33a23bcc03
commit f2c371b87d
30 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/app/globals.css Normal file
View File

@@ -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;
}

36
frontend/app/layout.tsx Normal file
View File

@@ -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>
);
}

88
frontend/app/page.tsx Normal file
View File

@@ -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>
);
}

250
frontend/index.html Normal file
View File

@@ -0,0 +1,250 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Generator</title>
<style>
:root {
--primary-color: #4f46e5;
--primary-hover: #4338ca;
--success-color: #065f46;
--success-bg: #d1fae5;
--error-color: #b91c1c;
--error-bg: #fee2e2;
--border-color: #e2e8f0;
--text-color: #1e293b;
--bg-color: #f8fafc;
--card-bg: #ffffff;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
header {
background-color: var(--primary-color);
color: white;
padding: 1.5rem 0;
margin-bottom: 2rem;
box-shadow: var(--shadow);
}
header h1 {
margin: 0;
text-align: center;
font-size: 1.875rem;
font-weight: 700;
}
.card {
background-color: var(--card-bg);
border-radius: 0.5rem;
box-shadow: var(--shadow);
padding: 2rem;
margin-bottom: 2rem;
}
h2 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--text-color);
}
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--text-color);
}
textarea {
width: 100%;
padding: 1rem;
border: 1px solid var(--border-color);
border-radius: 0.375rem;
resize: vertical;
min-height: 200px;
font-family: inherit;
font-size: 0.875rem;
transition: border-color 0.2s;
}
textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
button {
background-color: var(--primary-color);
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 0.375rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
font-size: 0.875rem;
}
button:hover {
background-color: var(--primary-hover);
}
button:disabled {
background-color: #a5b4fc;
cursor: not-allowed;
}
.result {
margin-top: 2rem;
padding: 1rem;
border-radius: 0.375rem;
}
.success {
background-color: var(--success-bg);
color: var(--success-color);
border-left: 4px solid var(--success-color);
}
.error {
background-color: var(--error-bg);
color: var(--error-color);
border-left: 4px solid var(--error-color);
}
a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
text-decoration: underline;
color: var(--primary-hover);
}
.loading {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
margin-right: 0.5rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
footer {
text-align: center;
margin-top: 4rem;
padding: 1rem 0;
color: #64748b;
font-size: 0.875rem;
}
</style>
</head>
<body>
<header>
<h1>HTML Generator</h1>
</header>
<div class="container">
<div class="card">
<h2>HTML 文件生成器</h2>
<form id="htmlForm">
<div class="form-group">
<label for="htmlContent">HTML 内容</label>
<textarea id="htmlContent" placeholder="请输入 HTML 内容..."></textarea>
</div>
<button type="submit" id="submitBtn">
<span id="loadingSpinner" class="loading" style="display: none;"></span>
<span id="buttonText">生成 HTML 文件</span>
</button>
</form>
<div id="result" class="result" style="display: none;"></div>
</div>
</div>
<footer>
<p>© 2026 HTML Generator</p>
</footer>
<script>
document.getElementById('htmlForm').addEventListener('submit', async (e) => {
e.preventDefault();
const htmlContent = document.getElementById('htmlContent').value;
const submitBtn = document.getElementById('submitBtn');
const resultDiv = document.getElementById('result');
const loadingSpinner = document.getElementById('loadingSpinner');
const buttonText = document.getElementById('buttonText');
if (!htmlContent.trim()) {
resultDiv.className = 'result error';
resultDiv.innerHTML = 'HTML 内容不能为空';
resultDiv.style.display = 'block';
return;
}
// 显示加载状态
submitBtn.disabled = true;
loadingSpinner.style.display = 'inline-block';
buttonText.textContent = '生成中...';
resultDiv.style.display = 'none';
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();
resultDiv.className = 'result success';
resultDiv.innerHTML = `
<h3>生成成功！</h3>
<p>您的 HTML 文件已生成，可通过以下链接访问：</p>
<a href="${data.url}" target="_blank">${data.url}</a>
`;
} catch (error) {
resultDiv.className = 'result error';
resultDiv.innerHTML = '生成 HTML 文件失败，请稍后重试';
console.error(error);
} finally {
// 恢复按钮状态
submitBtn.disabled = false;
loadingSpinner.style.display = 'none';
buttonText.textContent = '生成 HTML 文件';
resultDiv.style.display = 'block';
}
});
</script>
</body>
</html>

5
frontend/next-env.d.ts vendored Normal file
View File

@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

7
frontend/next.config.mjs Normal file
View File

@@ -0,0 +1,7 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
output: 'standalone',
};
export default nextConfig;

27
frontend/package.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "html-generator-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "14.2.26",
"react": "18.3.1",
"react-dom": "18.3.1"
},
"devDependencies": {
"@types/node": "22.10.1",
"@types/react": "18.3.18",
"@types/react-dom": "18.3.5",
"autoprefixer": "10.4.20",
"eslint": "8.57.1",
"eslint-config-next": "14.2.26",
"postcss": "8.4.49",
"tailwindcss": "3.4.16",
"typescript": "5.7.2"
}
}

6
frontend/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

1
frontend/public/static/bp0BBNk0q1dMFL5W.html Normal file
View File

@@ -0,0 +1 @@
<html><body><h1>Hello World</h1></body></html>

1
frontend/public/static/kuzC5dNWmPp5g3tc.html Normal file
View File

@@ -0,0 +1 @@
<html><body><h1>Hello World</h1></body></html>

38
frontend/tailwind.config.ts Normal file
View File

@@ -0,0 +1,38 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
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)',
},
fontFamily: {
sans: ['var(--font-sans)', 'sans-serif'],
mono: ['var(--font-mono)', 'monospace'],
},
},
},
plugins: [],
};

26
frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,26 @@
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}