feat: migrate to Cloudflare Workers with icon and version upload
Replace Express/SQLite and web/ with frontend/, worker/, and wrangler deploy. Add optional app icon upload, date-based app_version, and build-app workflow input. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
12
frontend/index.html
Normal file
12
frontend/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Web2App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
23
frontend/package.json
Normal file
23
frontend/package.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "web2app-frontend",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.0.2",
|
||||
"@types/react-dom": "^19.0.2",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.3"
|
||||
}
|
||||
}
|
||||
17
frontend/src/App.tsx
Normal file
17
frontend/src/App.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { Route, Routes } from "react-router-dom";
|
||||
import Layout from "./components/Layout";
|
||||
import BuildList from "./pages/BuildList";
|
||||
import JobStatus from "./pages/JobStatus";
|
||||
import Upload from "./pages/Upload";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route element={<Layout />}>
|
||||
<Route path="/" element={<Upload />} />
|
||||
<Route path="/jobs" element={<BuildList />} />
|
||||
<Route path="/jobs/:id" element={<JobStatus />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
104
frontend/src/api/client.ts
Normal file
104
frontend/src/api/client.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
const API_BASE = import.meta.env.VITE_API_BASE ?? "";
|
||||
|
||||
export type BuildStatus =
|
||||
| "pending"
|
||||
| "queued"
|
||||
| "in_progress"
|
||||
| "completed"
|
||||
| "failed";
|
||||
|
||||
export interface Build {
|
||||
id: string;
|
||||
appName: string;
|
||||
appNameEn: string;
|
||||
appIdentifier: string;
|
||||
appVersion: string;
|
||||
status: BuildStatus;
|
||||
workflowRunId: number | null;
|
||||
windowsUrl: string | null;
|
||||
androidUrl: string | null;
|
||||
error: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
actionsUrl?: string | null;
|
||||
}
|
||||
|
||||
interface ApiErrorResponse {
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface CreateBuildResponse {
|
||||
id: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
function apiUrl(path: string): string {
|
||||
return `${API_BASE}${path}`;
|
||||
}
|
||||
|
||||
export async function createBuild(formData: FormData): Promise<{ id: string }> {
|
||||
let response: Response;
|
||||
try {
|
||||
response = await fetch(apiUrl("/api/builds"), {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
} catch {
|
||||
throw new Error(
|
||||
"无法连接后端，请确认已运行 npm run dev 且 wrangler 已启动",
|
||||
);
|
||||
}
|
||||
|
||||
const data = (await readJson(response)) as CreateBuildResponse;
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error ?? "上传失败");
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function fetchBuild(id: string): Promise<Build> {
|
||||
const response = await fetch(apiUrl(`/api/builds/${id}`));
|
||||
const data = (await readJson(response)) as Build;
|
||||
if (!response.ok) {
|
||||
const errorData = data as Build & ApiErrorResponse;
|
||||
throw new Error(errorData.error ?? "Failed to load build");
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function fetchBuilds(): Promise<Build[]> {
|
||||
const response = await fetch(apiUrl("/api/builds"));
|
||||
const data = (await readJson(response)) as { builds: Build[] };
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load builds");
|
||||
}
|
||||
return data.builds;
|
||||
}
|
||||
|
||||
async function readJson(response: Response): Promise<unknown> {
|
||||
const text = await response.text();
|
||||
if (!text) return {};
|
||||
|
||||
try {
|
||||
return JSON.parse(text) as unknown;
|
||||
} catch {
|
||||
throw new Error(`Unexpected response from server: ${text.slice(0, 200)}`);
|
||||
}
|
||||
}
|
||||
|
||||
export function statusLabel(status: BuildStatus): string {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return "准备中";
|
||||
case "queued":
|
||||
return "排队中";
|
||||
case "in_progress":
|
||||
return "构建中";
|
||||
case "completed":
|
||||
return "已完成";
|
||||
case "failed":
|
||||
return "失败";
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
}
|
||||
27
frontend/src/components/Layout.tsx
Normal file
27
frontend/src/components/Layout.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { Link, Outlet } from "react-router-dom";
|
||||
|
||||
export default function Layout() {
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<header className="site-header">
|
||||
<div className="site-header-inner">
|
||||
<Link to="/" className="site-brand">
|
||||
Web2App
|
||||
</Link>
|
||||
<nav className="site-nav">
|
||||
<Link to="/">新建构建</Link>
|
||||
<Link to="/jobs">构建记录</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main className="site-main">
|
||||
<div className="content">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
<footer className="site-footer">
|
||||
静态网页 zip → Windows / Android 原生应用
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
4
frontend/src/lib/version.ts
Normal file
4
frontend/src/lib/version.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
/** 默认版本号：当前日期，格式如 2026.5.29 */
|
||||
export function getDefaultAppVersion(date = new Date()): string {
|
||||
return `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`;
|
||||
}
|
||||
13
frontend/src/main.tsx
Normal file
13
frontend/src/main.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import App from "./App";
|
||||
import "./styles/doc.css";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>,
|
||||
);
|
||||
45
frontend/src/pages/BuildList.tsx
Normal file
45
frontend/src/pages/BuildList.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { fetchBuilds, statusLabel, type Build } from "../api/client";
|
||||
|
||||
export default function BuildList() {
|
||||
const [builds, setBuilds] = useState<Build[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchBuilds()
|
||||
.then(setBuilds)
|
||||
.catch((err) =>
|
||||
setError(err instanceof Error ? err.message : "加载失败"),
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="page-title">构建记录</h1>
|
||||
<p className="page-lead">最近 20 条构建任务。</p>
|
||||
|
||||
<section className="doc-section">
|
||||
{error ? <p className="error-text">{error}</p> : null}
|
||||
{!error && builds.length === 0 ? (
|
||||
<p className="prose">暂无构建记录。</p>
|
||||
) : null}
|
||||
{builds.length > 0 ? (
|
||||
<ul className="build-list">
|
||||
{builds.map((build) => (
|
||||
<li key={build.id}>
|
||||
<Link to={`/jobs/${build.id}`}>
|
||||
{build.appName} ({build.appNameEn})
|
||||
</Link>
|
||||
<div className="meta-line">
|
||||
v{build.appVersion} · {build.id} · {statusLabel(build.status)}{" "}
|
||||
· {new Date(build.createdAt).toLocaleString()}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
150
frontend/src/pages/JobStatus.tsx
Normal file
150
frontend/src/pages/JobStatus.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { fetchBuild, statusLabel, type Build } from "../api/client";
|
||||
|
||||
export default function JobStatus() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [build, setBuild] = useState<Build | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
async function poll() {
|
||||
try {
|
||||
const data = await fetchBuild(id!);
|
||||
if (cancelled) return;
|
||||
setBuild(data);
|
||||
setError(null);
|
||||
|
||||
if (data.status === "completed" || data.status === "failed") {
|
||||
return;
|
||||
}
|
||||
|
||||
window.setTimeout(poll, 5000);
|
||||
} catch (err) {
|
||||
if (cancelled) return;
|
||||
setError(err instanceof Error ? err.message : "加载失败");
|
||||
window.setTimeout(poll, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
poll();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [id]);
|
||||
|
||||
if (!id) {
|
||||
return <p className="error-text">缺少任务 ID</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="status-toolbar">
|
||||
<h1 className="page-title" style={{ margin: 0 }}>
|
||||
构建任务
|
||||
</h1>
|
||||
<Link to="/">返回上传</Link>
|
||||
</div>
|
||||
|
||||
{error ? <p className="error-text">{error}</p> : null}
|
||||
|
||||
<section className="doc-section">
|
||||
{build ? (
|
||||
<>
|
||||
<dl className="meta-list">
|
||||
<div>
|
||||
<dt>任务 ID</dt>
|
||||
<dd>
|
||||
<code>{build.id}</code>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>应用中文名</dt>
|
||||
<dd>{build.appName}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>应用英文名</dt>
|
||||
<dd>{build.appNameEn}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Bundle ID</dt>
|
||||
<dd>
|
||||
<code>{build.appIdentifier}</code>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>版本号</dt>
|
||||
<dd>
|
||||
<code>{build.appVersion}</code>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>状态</dt>
|
||||
<dd>
|
||||
<span className={`badge badge-${build.status}`}>
|
||||
{statusLabel(build.status)}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
{build.status === "completed" ? (
|
||||
<>
|
||||
<h3>下载安装包</h3>
|
||||
<div className="download-row">
|
||||
{build.windowsUrl ? (
|
||||
<a
|
||||
className="btn btn-primary"
|
||||
href={build.windowsUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
下载 Windows 版
|
||||
</a>
|
||||
) : (
|
||||
<span className="muted">Windows 安装包尚未就绪</span>
|
||||
)}
|
||||
{build.androidUrl ? (
|
||||
<a
|
||||
className="btn btn-secondary"
|
||||
href={build.androidUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
下载 Android 版
|
||||
</a>
|
||||
) : (
|
||||
<span className="muted">Android 安装包尚未就绪</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{build.status === "failed" ? (
|
||||
<div className="error-box">
|
||||
<p>{build.error ?? "构建失败，请查看 GitHub Actions 日志。"}</p>
|
||||
{build.actionsUrl ? (
|
||||
<a href={build.actionsUrl} target="_blank" rel="noreferrer">
|
||||
查看 Actions 日志
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{build.status !== "completed" && build.status !== "failed" ? (
|
||||
<p className="prose" style={{ marginTop: "1rem" }}>
|
||||
正在轮询 GitHub Actions 状态，请稍候…
|
||||
</p>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<p className="prose">加载任务信息…</p>
|
||||
)}
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
153
frontend/src/pages/Upload.tsx
Normal file
153
frontend/src/pages/Upload.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import { FormEvent, useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { createBuild } from "../api/client";
|
||||
import { getDefaultAppVersion } from "../lib/version";
|
||||
|
||||
export default function Upload() {
|
||||
const navigate = useNavigate();
|
||||
const [appNameZh, setAppNameZh] = useState("");
|
||||
const [appNameEn, setAppNameEn] = useState("");
|
||||
const [appVersion, setAppVersion] = useState(() => getDefaultAppVersion());
|
||||
const [identifier, setIdentifier] = useState("");
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [icon, setIcon] = useState<File | null>(null);
|
||||
const [iconPreview, setIconPreview] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!icon) {
|
||||
setIconPreview(null);
|
||||
return;
|
||||
}
|
||||
const url = URL.createObjectURL(icon);
|
||||
setIconPreview(url);
|
||||
return () => URL.revokeObjectURL(url);
|
||||
}, [icon]);
|
||||
|
||||
async function onSubmit(event: FormEvent) {
|
||||
event.preventDefault();
|
||||
if (!file) {
|
||||
setError("请选择 zip 文件");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
formData.append("appNameZh", appNameZh);
|
||||
formData.append("appNameEn", appNameEn);
|
||||
formData.append("appVersion", appVersion.trim());
|
||||
if (identifier.trim()) {
|
||||
formData.append("identifier", identifier.trim());
|
||||
}
|
||||
if (icon) {
|
||||
formData.append("icon", icon);
|
||||
}
|
||||
|
||||
const result = await createBuild(formData);
|
||||
navigate(`/jobs/${result.id}`);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "上传失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="page-title">上传静态站点</h1>
|
||||
<p className="page-lead">
|
||||
将包含 index.html 的 zip 打包为 Windows 与 Android 安装包。
|
||||
</p>
|
||||
|
||||
<section className="doc-section">
|
||||
<h2>使用说明</h2>
|
||||
<p className="prose">
|
||||
压缩包需包含 index.html（根目录或单层文件夹内），默认不超过 50MB。
|
||||
可单独上传应用图标（PNG / JPG / ICO，优先于 zip 内图标），版本号默认取当天日期（如
|
||||
2026.5.29）。中文名用于展示，英文名用于安装包与 Bundle ID。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="doc-section">
|
||||
<h2>构建参数</h2>
|
||||
<form className="form" onSubmit={onSubmit}>
|
||||
<label>
|
||||
应用中文名
|
||||
<input
|
||||
type="text"
|
||||
value={appNameZh}
|
||||
onChange={(e) => setAppNameZh(e.target.value)}
|
||||
placeholder="我的应用"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
应用英文名
|
||||
<input
|
||||
type="text"
|
||||
value={appNameEn}
|
||||
onChange={(e) => setAppNameEn(e.target.value)}
|
||||
placeholder="My App"
|
||||
required
|
||||
pattern="[a-zA-Z][a-zA-Z0-9 _.-]*"
|
||||
title="以字母开头，仅含英文字母、数字、空格、下划线和连字符"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
应用版本号
|
||||
<input
|
||||
type="text"
|
||||
value={appVersion}
|
||||
onChange={(e) => setAppVersion(e.target.value)}
|
||||
placeholder={getDefaultAppVersion()}
|
||||
required
|
||||
pattern="\d{4}\.\d{1,2}\.\d{1,2}"
|
||||
title="格式：YYYY.M.D，例如 2026.5.29"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Bundle ID（可选）
|
||||
<input
|
||||
type="text"
|
||||
value={identifier}
|
||||
onChange={(e) => setIdentifier(e.target.value)}
|
||||
placeholder="com.example.myapp"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
应用图标（可选）
|
||||
<input
|
||||
type="file"
|
||||
accept=".png,.jpg,.jpeg,.ico,image/png,image/jpeg,image/x-icon"
|
||||
onChange={(e) => setIcon(e.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</label>
|
||||
{iconPreview ? (
|
||||
<div className="icon-preview">
|
||||
<img src={iconPreview} alt="图标预览" width={64} height={64} />
|
||||
<span className="muted">{icon?.name}</span>
|
||||
</div>
|
||||
) : null}
|
||||
<label>
|
||||
静态网页 zip
|
||||
<input
|
||||
type="file"
|
||||
accept=".zip,application/zip"
|
||||
onChange={(e) => setFile(e.target.files?.[0] ?? null)}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
{error ? <p className="error-text">{error}</p> : null}
|
||||
<button type="submit" className="btn btn-primary" disabled={loading}>
|
||||
{loading ? "上传并触发构建…" : "开始构建"}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
375
frontend/src/styles/doc.css
Normal file
375
frontend/src/styles/doc.css
Normal file
@@ -0,0 +1,375 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #fafafa;
|
||||
--surface: #ffffff;
|
||||
--text: #1a1a1a;
|
||||
--muted: #5c5c5c;
|
||||
--border: #e5e5e5;
|
||||
--accent: #2563eb;
|
||||
--accent-hover: #1d4ed8;
|
||||
--danger: #b91c1c;
|
||||
--danger-bg: #fef2f2;
|
||||
--success: #15803d;
|
||||
--warning: #a16207;
|
||||
--radius: 8px;
|
||||
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
|
||||
Arial, "Noto Sans SC", sans-serif;
|
||||
--mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
|
||||
--content-max: 42rem;
|
||||
--page-pad: 1rem;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
padding: 0.75rem var(--page-pad);
|
||||
}
|
||||
|
||||
.site-header-inner {
|
||||
max-width: var(--content-max);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.site-brand {
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-brand:hover {
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.site-main {
|
||||
flex: 1;
|
||||
padding: 1.5rem var(--page-pad) 3rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: var(--content-max);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 0.25rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.page-lead {
|
||||
margin: 0 0 1.5rem;
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.doc-section {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.25rem 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.doc-section h2 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.doc-section h3 {
|
||||
margin: 1.25rem 0 0.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prose {
|
||||
margin: 0 0 1rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.prose:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.form input[type="text"],
|
||||
.form input[type="file"] {
|
||||
font: inherit;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.form input[type="file"] {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
padding: 0.625rem 1.25rem;
|
||||
font: inherit;
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
margin: 0;
|
||||
color: var(--danger);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.error-box {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--danger-bg);
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.error-box p {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.meta-list {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.meta-list > div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(7rem, 9rem) 1fr;
|
||||
gap: 0.5rem 1rem;
|
||||
align-items: baseline;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.meta-list dt {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.meta-list dd {
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
background: #f3f4f6;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.badge-pending,
|
||||
.badge-queued {
|
||||
background: #fef3c7;
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.badge-in_progress {
|
||||
background: #dbeafe;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.badge-completed {
|
||||
background: #dcfce7;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.badge-failed {
|
||||
background: var(--danger-bg);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.download-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.status-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.build-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.build-list li {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.build-list li:first-child {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.build-list a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.build-list .meta-line {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--muted);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.icon-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.icon-preview img {
|
||||
object-fit: contain;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 1rem var(--page-pad);
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
:root {
|
||||
--page-pad: 1.5rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.doc-section {
|
||||
padding: 1.5rem 1.75rem;
|
||||
}
|
||||
|
||||
.download-row {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
9
frontend/src/vite-env.d.ts
vendored
Normal file
9
frontend/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_BASE?: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
17
frontend/tsconfig.app.json
Normal file
17
frontend/tsconfig.app.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
1
frontend/tsconfig.app.tsbuildinfo
Normal file
1
frontend/tsconfig.app.tsbuildinfo
Normal file
@@ -0,0 +1 @@
|
||||
{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/components/layout.tsx","./src/lib/version.ts","./src/pages/buildlist.tsx","./src/pages/jobstatus.tsx","./src/pages/upload.tsx"],"version":"5.6.3"}
|
||||
4
frontend/tsconfig.json
Normal file
4
frontend/tsconfig.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
12
frontend/tsconfig.node.json
Normal file
12
frontend/tsconfig.node.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
1
frontend/tsconfig.node.tsbuildinfo
Normal file
1
frontend/tsconfig.node.tsbuildinfo
Normal file
@@ -0,0 +1 @@
|
||||
{"root":["./vite.config.ts"],"version":"5.6.3"}
|
||||
19
frontend/vite.config.ts
Normal file
19
frontend/vite.config.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://127.0.0.1:8787",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: "dist",
|
||||
emptyOutDir: true,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user