eafonyang
93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
/* ============================================================
|
|
CHANGELOG PAGE — Release notes / 更新说明
|
|
Content is loaded from /changelog.md (public dir) at runtime,
|
|
so updating the notes only requires editing that markdown file.
|
|
============================================================ */
|
|
import BottomNav from "@/components/BottomNav";
|
|
import { useDevice } from "@/contexts/DeviceContext";
|
|
import { usePageTitleWithConnection } from "@/hooks/usePageTitleWithConnection";
|
|
import { resolveLocalePack } from "@/locales/resolveLocale";
|
|
import localeZh from "@/locales/data-zh.json";
|
|
import { ChevronLeft } from "lucide-react";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { useLocation } from "wouter";
|
|
import { Streamdown } from "streamdown";
|
|
|
|
type HomeLocale = NonNullable<(typeof localeZh)["home"]>;
|
|
|
|
export default function ChangelogPage() {
|
|
const [, setLocation] = useLocation();
|
|
const { deviceState } = useDevice();
|
|
|
|
const homeText = useMemo((): HomeLocale => {
|
|
const pack = resolveLocalePack(deviceState?.language);
|
|
return (pack.home ?? {}) as HomeLocale;
|
|
}, [deviceState?.language]);
|
|
|
|
const pageTitle = usePageTitleWithConnection(homeText.changelog ?? "更新说明");
|
|
|
|
const [content, setContent] = useState<string | null>(null);
|
|
const [failed, setFailed] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
fetch(`${import.meta.env.BASE_URL}changelog.md`)
|
|
.then((res) => {
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
return res.text();
|
|
})
|
|
.then((text) => {
|
|
if (!cancelled) setContent(text);
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) setFailed(true);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-[100dvh] bg-black flex flex-col pb-[calc(env(safe-area-inset-bottom,0px)+56px)]">
|
|
<div className="page-header">
|
|
<button
|
|
type="button"
|
|
onClick={() => setLocation("/")}
|
|
className="mr-4 text-white/60 active:text-white transition-colors"
|
|
aria-label="Back"
|
|
>
|
|
<ChevronLeft size={24} />
|
|
</button>
|
|
<h1 className="flex-1 text-center text-[17px] font-semibold text-white">{pageTitle}</h1>
|
|
<div className="w-8" />
|
|
</div>
|
|
|
|
<div className="flex-1 px-4 pt-4 overflow-y-auto">
|
|
<div
|
|
className="ios-list-group p-4"
|
|
style={{
|
|
background: "linear-gradient(180deg, rgba(34,36,40,0.95) 0%, rgba(24,26,30,0.95) 100%)",
|
|
border: "1px solid rgba(255,255,255,0.1)",
|
|
borderRadius: 14,
|
|
boxShadow: "0 8px 32px rgba(0,0,0,0.35)",
|
|
}}
|
|
>
|
|
{failed ? (
|
|
<p className="text-[14px] text-white/45 text-center py-10">{homeText.changelogLoadFailed ?? "加载失败，请稍后重试"}</p>
|
|
) : content ? (
|
|
<div className="markdown-body text-[14px] leading-relaxed text-white/85 [&_h1]:text-[18px] [&_h1]:font-bold [&_h1]:text-white [&_h1]:mb-3 [&_h2]:text-[16px] [&_h2]:font-semibold [&_h2]:text-[#00FFF6] [&_h2]:mt-5 [&_h2]:mb-2 [&_h3]:text-[14px] [&_h3]:font-semibold [&_h3]:text-white/90 [&_h3]:mt-3 [&_h3]:mb-1.5 [&_li]:mb-1 [&_blockquote]:border-l-2 [&_blockquote]:border-white/20 [&_blockquote]:pl-3 [&_blockquote]:text-white/55 [&_hr]:border-white/10 [&_hr]:my-4 [&_code]:bg-white/10 [&_code]:rounded [&_code]:px-1 [&_code]:text-[13px]">
|
|
<Streamdown>{content}</Streamdown>
|
|
</div>
|
|
) : (
|
|
<div className="flex justify-center py-10">
|
|
<div className="w-6 h-6 rounded-full border-2 border-white/20 border-t-[#00FFF6] animate-spin" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<BottomNav />
|
|
</div>
|
|
);
|
|
}
|