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:
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user