freefire/jiang13-forum
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

feat: Vike 骨架（pages feed+spa / renderer 双端入口 / AppShell 拆分 / serverClient）

Browse Source 
vite.config 接入 vike 插件并改产出 dist/client+dist/server；feed 白名单 route 匹配 /、/board/:id、/post/:id(.html)；spa catch-all ssr:false；onRenderHtml renderToReadableStream 等 allReady 输出完整 HTML 并带主题/缩放脚本；onRenderClient 沿用样式表等待+冷启动预热+hydrate 回退；getHomeStoreState 作用域 + hydrating 变体入 RequestScope；删除 index.html 与 main.tsx
This commit is contained in:
姜十三
2026-09-09 01:21:58 +08:00
parent 27132e89c2
commit e71c77b5ca
20 changed files with 407 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/index.html
View File

@@ -1,48 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="拾三一隅，自在交流" />
<title>姜十三论坛 - 拾三一隅，自在交流</title>
<!-- 样式由 Vite 构建注入外链 CSS，不在此内联 style -->
<script>
(function () {
var theme = localStorage.getItem('j13-theme') || 'light';
document.documentElement.classList.toggle('dark', theme === 'dark');
document.documentElement.style.colorScheme = theme;
})();
</script>
<script>
/* 锁死手机/平板双指与手势缩放；头像裁剪 / 图片灯箱放行 pinch */
(function () {
function inZoomAllowArea(target) {
return !!(
target &&
target.closest &&
target.closest('.avatar-crop-stage, .image-lightbox')
);
}
function blockGesture(e) {
if (inZoomAllowArea(e.target)) return;
if (e.cancelable) e.preventDefault();
}
function blockMultiTouch(e) {
if (e.touches && e.touches.length > 1) {
if (inZoomAllowArea(e.target)) return;
if (e.cancelable) e.preventDefault();
}
}
document.addEventListener('gesturestart', blockGesture, { passive: false });
document.addEventListener('gesturechange', blockGesture, { passive: false });
document.addEventListener('gestureend', blockGesture, { passive: false });
document.addEventListener('touchstart', blockMultiTouch, { passive: false });
document.addEventListener('touchmove', blockMultiTouch, { passive: false });
})();
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

6
frontend/package.json
View File

@@ -4,9 +4,9 @@
"version": "1.0.0", "version": "1.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vike dev",
"build": "vite build", "build": "vike build",
"preview": "vite preview" "preview": "vike preview"
}, },
"dependencies": { "dependencies": {
"@dnd-kit/core": "^6.3.1", "@dnd-kit/core": "^6.3.1",

6
frontend/pages/+config.ts Normal file
View File

@@ -0,0 +1,6 @@
import type { Config } from 'vike/types';
export default {
// pageProps 透传给客户端（boot 数据经 +data 的 pageContext.data 自动序列化）
passToClient: ['pageProps'],
} satisfies Config;

10
frontend/pages/feed/+Page.tsx Normal file
View File

@@ -0,0 +1,10 @@
import App from '../../src/App';
import type { PageContext } from 'vike/types';
export { Page };
/** SSR feed 页：服务端渲染整棵 react-router 树，客户端 hydrate 后接管导航 */
function Page(pageContext: PageContext) {
const { pathname, searchOriginal } = pageContext.urlParsed;
return <App url={pathname + (searchOriginal ?? '')} />;
}

11
frontend/pages/feed/+route.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { PageContext } from 'vike/types';
import { matchFeedSsrPath } from '../../src/ssr/feedPaths';
export { route };
/** SSR 白名单：`/`、`/board/:id`、`/post/:id`（含 `.html` 伪静态） */
function route(pageContext: PageContext) {
const match = matchFeedSsrPath(pageContext.urlPathname);
if (!match) return false;
return { routeParams: { kind: match.kind, id: match.id } };
}

8
frontend/pages/spa/+Page.tsx Normal file
View File

@@ -0,0 +1,8 @@
import App from '../../src/App';
export { Page };
/** SPA 壳页：客户端整树挂载 react-router（服务端不执行本组件） */
function Page() {
return <App />;
}

10
frontend/pages/spa/+route.ts Normal file
View File

@@ -0,0 +1,10 @@
import type { PageContext } from 'vike/types';
import { matchFeedSsrPath } from '../../src/ssr/feedPaths';
export { route };
/** catch-all：SSR feed 白名单之外的一切 URL */
function route(pageContext: PageContext) {
if (matchFeedSsrPath(pageContext.urlPathname)) return false;
return { routeParams: {} };
}

4
frontend/pages/spa/+ssr.ts Normal file
View File

@@ -0,0 +1,4 @@
export { ssr };
/** SPA 壳：服务端只出空壳 HTML，客户端整树挂载 react-router */
const ssr = false;

90
frontend/renderer/+onRenderClient.tsx Normal file
View File

@@ -0,0 +1,90 @@
import { StrictMode } from 'react';
import type { ComponentType } from 'react';
import { hydrateRoot, createRoot } from 'react-dom/client';
import type { PageContextClient } from 'vike/types';
import { applyTheme, getStoredTheme } from '../src/utils/theme';
import { beginHomeHydrate } from '../src/utils/homeHydrate';
import { reloadForStaleChunk } from '../src/utils/chunkLoad';
import { consumeHomeBoot } from '../src/utils/homeBoot';
import { ensureColdBootReady, isMainLayoutPath } from '../src/utils/prefetchRoute';
export { onRenderClient };
type PageComponent = ComponentType<{ url?: string }>;
let root: ReturnType<typeof createRoot> | null = null;
function waitForStylesheets(): Promise<void> {
const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
if (links.length === 0) return Promise.resolve();
return Promise.all(
links.map(
(node) =>
new Promise<void>((resolve) => {
const link = node as HTMLLinkElement;
try {
if (link.sheet) {
resolve();
return;
}
} catch {
/* cross-origin */
}
const finish = () => resolve();
link.addEventListener('load', finish, { once: true });
link.addEventListener('error', finish, { once: true });
}),
),
).then(() => undefined);
}
async function onRenderClient(pageContext: PageContextClient) {
applyTheme(getStoredTheme());
consumeHomeBoot();
// Vite modulepreload / 动态 import 失败（发版后旧 hashed URL 404）
window.addEventListener('vite:preloadError', (event) => {
event.preventDefault();
reloadForStaleChunk();
});
const el = document.getElementById('root');
if (!el) return;
await waitForStylesheets();
try {
if (document.fonts?.ready) await document.fonts.ready;
} catch {
/* ignore */
}
const path = `${window.location.pathname}${window.location.search}`;
if (isMainLayoutPath(window.location.pathname)) {
await ensureColdBootReady(path);
}
// 有 SSR 正文 → hydrate 接管同一 DOM（首帧 hydrate 同构变体）；SPA 壳 → 整树挂载
const hydrating = pageContext.isHydration && el.innerHTML.trim() !== '';
if (hydrating) beginHomeHydrate();
const Page = pageContext.Page as PageComponent;
const app = (
<StrictMode>
<Page />
</StrictMode>
);
if (hydrating) {
try {
hydrateRoot(el, app);
} catch (err) {
console.warn('[j13] hydrateRoot 失败，回退 createRoot', err);
el.innerHTML = '';
if (!root) root = createRoot(el);
root.render(app);
}
} else {
if (!root) root = createRoot(el);
root.render(app);
}
}

65
frontend/renderer/+onRenderHtml.tsx Normal file
View File

@@ -0,0 +1,65 @@
import type { ComponentType, ReactElement } from 'react';
import { renderToReadableStream } from 'react-dom/server';
import { escapeInject, dangerouslySkipEscape } from 'vike/server';
import type { PageContextServer } from 'vike/types';
import App from '../src/App';
import { createHomeStore } from '../src/store/homeStore';
import { createRequestScope } from '../src/ssr/scopeTypes';
import { runWithScope } from '../src/ssr/scope';
export { onRenderHtml };
type PageComponent = ComponentType<{ url?: string }>;
/** 首帧主题脚本（localStorage j13-theme），与旧 index.html 保持一致 */
const THEME_INIT_SCRIPT
= "(function(){var t=localStorage.getItem('j13-theme')||'light';document.documentElement.classList.toggle('dark',t==='dark');document.documentElement.style.colorScheme=t;})();";
/** 锁死手机/平板双指与手势缩放；头像裁剪 / 图片灯箱放行 pinch */
const ZOOM_BLOCK_SCRIPT
= "(function(){function inZoomAllowArea(target){return !!(target&&target.closest&&target.closest('.avatar-crop-stage, .image-lightbox'));}function blockGesture(e){if(inZoomAllowArea(e.target))return;if(e.cancelable)e.preventDefault();}function blockMultiTouch(e){if(e.touches&&e.touches.length>1){if(inZoomAllowArea(e.target))return;if(e.cancelable)e.preventDefault();}}document.addEventListener('gesturestart',blockGesture,{passive:false});document.addEventListener('gesturechange',blockGesture,{passive:false});document.addEventListener('gestureend',blockGesture,{passive:false});document.addEventListener('touchstart',blockMultiTouch,{passive:false});document.addEventListener('touchmove',blockMultiTouch,{passive:false});})();";
/** 等 lazy 页面全部渲染完成（allReady）后缓冲为完整 HTML，首字节语义与旧 Go 文档级 SSR 一致 */
async function renderPageToString(element: ReactElement): Promise<string> {
const stream = await renderToReadableStream(element, {
onError(err) {
console.error('[j13] SSR 渲染错误:', err);
},
});
await stream.allReady;
return new Response(stream).text();
}
async function onRenderHtml(pageContext: PageContextServer) {
const Page = pageContext.Page as PageComponent | undefined;
let pageHtml = '';
if (Page) {
// SSR feed 页：per-request 作用域 + hydrate 同构变体；渲染失败降级空壳（客户端自行接管），不 500
const scope = createRequestScope(createHomeStore());
scope.hydrating = true;
const { pathname, searchOriginal } = pageContext.urlParsed;
const url = pathname + (searchOriginal ?? '');
try {
pageHtml = await runWithScope(scope, () => renderPageToString(<Page url={url} />));
} catch (err) {
console.error('[j13] SSR 渲染失败，降级 SPA 壳:', err);
pageHtml = '';
}
}
return escapeInject`<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="拾三一隅，自在交流" />
<title>姜十三论坛 - 拾三一隅，自在交流</title>
<script>${dangerouslySkipEscape(THEME_INIT_SCRIPT)}</script>
<script>${dangerouslySkipEscape(ZOOM_BLOCK_SCRIPT)}</script>
</head>
<body>
<div id="root">${dangerouslySkipEscape(pageHtml)}</div>
</body>
</html>`;
}

131
frontend/src/App.tsx
View File

@@ -1,114 +1,29 @@
import { Suspense } from 'react'; import { RouterProvider, createBrowserRouter, createMemoryRouter } from 'react-router';
import { import AppShell from './AppShell';
createBrowserRouter, import { appRoutes } from './AppRoutes';
createRoutesFromElements,
RouterProvider,
Route,
Navigate,
} from 'react-router';
import './styles/global.css';
import { AuthProvider } from './hooks/useAuth';
import { ThemeProvider } from './hooks/useTheme';
import MainLayout from './layouts/MainLayout';
import AdminLayout from './layouts/AdminLayout';
import ErrorBoundary from './components/ErrorBoundary';
import AppRouteError from './components/AppRouteError';
import PageLoader from './components/PageLoader';
import AuthPageFallback from './components/AuthPageFallback';
import { Toaster } from './components/ui/sonner';
import PullToRefresh from './components/PullToRefresh';
import TopProgressBar from './components/TopProgressBar';
import { lazyWithRetry } from './utils/lazyWithRetry';
const HomePage = lazyWithRetry(() => import('./pages/HomePage')); type AppRouter = ReturnType<typeof createMemoryRouter>;
const PostDetailPage = lazyWithRetry(() => import('./pages/PostDetailPage'));
const LoginPage = lazyWithRetry(() => import('./pages/LoginPage'));
const RegisterPage = lazyWithRetry(() => import('./pages/RegisterPage'));
const ForgotPasswordPage = lazyWithRetry(() => import('./pages/ForgotPasswordPage'));
const ComposePage = lazyWithRetry(() => import('./pages/ComposePage'));
const BoardsManagePage = lazyWithRetry(() => import('./pages/BoardsManagePage'));
const ProfilePage = lazyWithRetry(() => import('./pages/ProfilePage'));
const UserProfilePage = lazyWithRetry(() => import('./pages/UserProfilePage'));
const FavoritesPage = lazyWithRetry(() => import('./pages/FavoritesPage'));
const MessagesPage = lazyWithRetry(() => import('./pages/MessagesPage'));
const ProjectsPage = lazyWithRetry(() => import('./pages/ProjectsPage'));
const LinksPage = lazyWithRetry(() => import('./pages/LinksPage'));
const ShowcasePage = lazyWithRetry(() => import('./pages/ShowcasePage'));
const AdminDashboardPage = lazyWithRetry(() => import('./pages/admin/AdminDashboardPage'));
const AdminPostsPage = lazyWithRetry(() => import('./pages/admin/AdminPostsPage'));
const AdminCommentsPage = lazyWithRetry(() => import('./pages/admin/AdminCommentsPage'));
const AdminReportsPage = lazyWithRetry(() => import('./pages/admin/AdminReportsPage'));
const AdminUsersPage = lazyWithRetry(() => import('./pages/admin/AdminUsersPage'));
const AdminBadgesPage = lazyWithRetry(() => import('./pages/admin/AdminBadgesPage'));
const AdminMediaPage = lazyWithRetry(() => import('./pages/admin/AdminMediaPage'));
const AdminMonitorPage = lazyWithRetry(() => import('./pages/admin/AdminMonitorPage'));
const AdminPagesPage = lazyWithRetry(() => import('./pages/admin/AdminPagesPage'));
const AdminSitePageEditPage = lazyWithRetry(() => import('./pages/admin/AdminSitePageEditPage'));
const AdminLinksPage = lazyWithRetry(() => import('./pages/admin/AdminLinksPage'));
const SitePageView = lazyWithRetry(() => import('./pages/SitePageView'));
const AdminSettingsPage = lazyWithRetry(() => import('./pages/admin/AdminSettingsPage'));
const AdminCommunityPage = lazyWithRetry(() => import('./pages/admin/AdminCommunityPage'));
const NotFoundPage = lazyWithRetry(() => import('./pages/NotFoundPage'));
const router = createBrowserRouter( /** 浏览器路由单例：整页加载创建一次，此后站内导航全部由 react-router 接管 */
createRoutesFromElements( let browserRouter: AppRouter | null = null;
<Route errorElement={<AppRouteError />}>
<Route path="/login" element={<Suspense fallback={<AuthPageFallback />}><LoginPage /></Suspense>} />
<Route path="/register" element={<Suspense fallback={<AuthPageFallback />}><RegisterPage /></Suspense>} />
<Route path="/forgot-password" element={<Suspense fallback={<AuthPageFallback />}><ForgotPasswordPage /></Suspense>} />
<Route path="/boards" element={<Navigate to="/admin/boards" replace />} />
<Route path="/admin" element={<AdminLayout />}>
<Route index element={<Navigate to="/admin/dashboard" replace />} />
<Route path="dashboard" element={<Suspense fallback={<PageLoader />}><AdminDashboardPage /></Suspense>} />
<Route path="boards" element={<Suspense fallback={<PageLoader />}><BoardsManagePage /></Suspense>} />
<Route path="pages/new" element={<Suspense fallback={<PageLoader />}><AdminSitePageEditPage /></Suspense>} />
<Route path="pages/:id/edit" element={<Suspense fallback={<PageLoader />}><AdminSitePageEditPage /></Suspense>} />
<Route path="pages" element={<Suspense fallback={<PageLoader />}><AdminPagesPage /></Suspense>} />
<Route path="links" element={<Suspense fallback={<PageLoader />}><AdminLinksPage /></Suspense>} />
<Route path="community" element={<Suspense fallback={<PageLoader />}><AdminCommunityPage /></Suspense>} />
<Route path="posts" element={<Suspense fallback={<PageLoader />}><AdminPostsPage /></Suspense>} />
<Route path="comments" element={<Suspense fallback={<PageLoader />}><AdminCommentsPage /></Suspense>} />
<Route path="reports" element={<Suspense fallback={<PageLoader />}><AdminReportsPage /></Suspense>} />
<Route path="users" element={<Suspense fallback={<PageLoader />}><AdminUsersPage /></Suspense>} />
<Route path="badges" element={<Suspense fallback={<PageLoader />}><AdminBadgesPage /></Suspense>} />
<Route path="media" element={<Suspense fallback={<PageLoader />}><AdminMediaPage /></Suspense>} />
<Route path="monitor" element={<Suspense fallback={<PageLoader />}><AdminMonitorPage /></Suspense>} />
<Route path="settings" element={<Suspense fallback={<PageLoader />}><AdminSettingsPage /></Suspense>} />
<Route path="*" element={<Suspense fallback={<PageLoader />}><NotFoundPage title="后台页面不存在" /></Suspense>} />
</Route>
<Route element={<MainLayout />}>
<Route path="/" element={<HomePage />} />
<Route path="/board/:id" element={<HomePage />} />
{/* :id 可为 123 或 123.html（伪静态后缀由后台配置） */}
<Route path="/post/:id" element={<PostDetailPage />} />
<Route path="/compose" element={<ComposePage />} />
<Route path="/post/:id/edit" element={<ComposePage />} />
<Route path="/profile" element={<ProfilePage />} />
<Route path="/user/:id" element={<UserProfilePage />} />
<Route path="/favorites" element={<FavoritesPage />} />
<Route path="/projects" element={<ProjectsPage />} />
<Route path="/links" element={<LinksPage />} />
<Route path="/showcase" element={<Suspense fallback={null}><ShowcasePage /></Suspense>} />
<Route path="/messages" element={<MessagesPage />} />
<Route path="/page/:slug" element={<Suspense fallback={null}><SitePageView /></Suspense>} />
<Route path="*" element={<Suspense fallback={null}><NotFoundPage /></Suspense>} />
</Route>
<Route path="*" element={<Suspense fallback={<PageLoader fullScreen />}><NotFoundPage standalone /></Suspense>} />
</Route>,
),
);
export default function App() { function getAppRouter(url?: string): AppRouter {
if (import.meta.env.SSR) {
// 服务端：每请求新建 memory router（与浏览器同一棵路由树，保证 DOM 同构）
return createMemoryRouter(appRoutes, { initialEntries: [url ?? '/'] });
}
browserRouter ??= createBrowserRouter(appRoutes);
return browserRouter;
}
/**
* 应用根组件：Vike +Page 与客户端入口共用。
* SSR 时传入 `url`（pathname + search），客户端忽略。
*/
export default function App({ url }: { url?: string }) {
return ( return (
<ThemeProvider> <AppShell>
<AuthProvider> <RouterProvider router={getAppRouter(url)} />
<ErrorBoundary> </AppShell>
<RouterProvider router={router} />
<TopProgressBar />
<PullToRefresh />
<Toaster />
</ErrorBoundary>
</AuthProvider>
</ThemeProvider>
); );
} }

85
frontend/src/AppRoutes.tsx Normal file
View File

@@ -0,0 +1,85 @@
import { Suspense } from 'react';
import { createRoutesFromElements, Route, Navigate } from 'react-router';
import MainLayout from './layouts/MainLayout';
import AdminLayout from './layouts/AdminLayout';
import AppRouteError from './components/AppRouteError';
import PageLoader from './components/PageLoader';
import AuthPageFallback from './components/AuthPageFallback';
import { lazyWithRetry } from './utils/lazyWithRetry';
const HomePage = lazyWithRetry(() => import('./pages/HomePage'));
const PostDetailPage = lazyWithRetry(() => import('./pages/PostDetailPage'));
const LoginPage = lazyWithRetry(() => import('./pages/LoginPage'));
const RegisterPage = lazyWithRetry(() => import('./pages/RegisterPage'));
const ForgotPasswordPage = lazyWithRetry(() => import('./pages/ForgotPasswordPage'));
const ComposePage = lazyWithRetry(() => import('./pages/ComposePage'));
const BoardsManagePage = lazyWithRetry(() => import('./pages/BoardsManagePage'));
const ProfilePage = lazyWithRetry(() => import('./pages/ProfilePage'));
const UserProfilePage = lazyWithRetry(() => import('./pages/UserProfilePage'));
const FavoritesPage = lazyWithRetry(() => import('./pages/FavoritesPage'));
const MessagesPage = lazyWithRetry(() => import('./pages/MessagesPage'));
const ProjectsPage = lazyWithRetry(() => import('./pages/ProjectsPage'));
const LinksPage = lazyWithRetry(() => import('./pages/LinksPage'));
const ShowcasePage = lazyWithRetry(() => import('./pages/ShowcasePage'));
const AdminDashboardPage = lazyWithRetry(() => import('./pages/admin/AdminDashboardPage'));
const AdminPostsPage = lazyWithRetry(() => import('./pages/admin/AdminPostsPage'));
const AdminCommentsPage = lazyWithRetry(() => import('./pages/admin/AdminCommentsPage'));
const AdminReportsPage = lazyWithRetry(() => import('./pages/admin/AdminReportsPage'));
const AdminUsersPage = lazyWithRetry(() => import('./pages/admin/AdminUsersPage'));
const AdminBadgesPage = lazyWithRetry(() => import('./pages/admin/AdminBadgesPage'));
const AdminMediaPage = lazyWithRetry(() => import('./pages/admin/AdminMediaPage'));
const AdminMonitorPage = lazyWithRetry(() => import('./pages/admin/AdminMonitorPage'));
const AdminPagesPage = lazyWithRetry(() => import('./pages/admin/AdminPagesPage'));
const AdminSitePageEditPage = lazyWithRetry(() => import('./pages/admin/AdminSitePageEditPage'));
const AdminLinksPage = lazyWithRetry(() => import('./pages/admin/AdminLinksPage'));
const SitePageView = lazyWithRetry(() => import('./pages/SitePageView'));
const AdminSettingsPage = lazyWithRetry(() => import('./pages/admin/AdminSettingsPage'));
const AdminCommunityPage = lazyWithRetry(() => import('./pages/admin/AdminCommunityPage'));
const NotFoundPage = lazyWithRetry(() => import('./pages/NotFoundPage'));
/** 全量 react-router 路由树（Vike 页面壳与浏览器共用同一棵树） */
export const appRoutes = createRoutesFromElements(
<Route errorElement={<AppRouteError />}>
<Route path="/login" element={<Suspense fallback={<AuthPageFallback />}><LoginPage /></Suspense>} />
<Route path="/register" element={<Suspense fallback={<AuthPageFallback />}><RegisterPage /></Suspense>} />
<Route path="/forgot-password" element={<Suspense fallback={<AuthPageFallback />}><ForgotPasswordPage /></Suspense>} />
<Route path="/boards" element={<Navigate to="/admin/boards" replace />} />
<Route path="/admin" element={<AdminLayout />}>
<Route index element={<Navigate to="/admin/dashboard" replace />} />
<Route path="dashboard" element={<Suspense fallback={<PageLoader />}><AdminDashboardPage /></Suspense>} />
<Route path="boards" element={<Suspense fallback={<PageLoader />}><BoardsManagePage /></Suspense>} />
<Route path="pages/new" element={<Suspense fallback={<PageLoader />}><AdminSitePageEditPage /></Suspense>} />
<Route path="pages/:id/edit" element={<Suspense fallback={<PageLoader />}><AdminSitePageEditPage /></Suspense>} />
<Route path="pages" element={<Suspense fallback={<PageLoader />}><AdminPagesPage /></Suspense>} />
<Route path="links" element={<Suspense fallback={<PageLoader />}><AdminLinksPage /></Suspense>} />
<Route path="community" element={<Suspense fallback={<PageLoader />}><AdminCommunityPage /></Suspense>} />
<Route path="posts" element={<Suspense fallback={<PageLoader />}><AdminPostsPage /></Suspense>} />
<Route path="comments" element={<Suspense fallback={<PageLoader />}><AdminCommentsPage /></Suspense>} />
<Route path="reports" element={<Suspense fallback={<PageLoader />}><AdminReportsPage /></Suspense>} />
<Route path="users" element={<Suspense fallback={<PageLoader />}><AdminUsersPage /></Suspense>} />
<Route path="badges" element={<Suspense fallback={<PageLoader />}><AdminBadgesPage /></Suspense>} />
<Route path="media" element={<Suspense fallback={<PageLoader />}><AdminMediaPage /></Suspense>} />
<Route path="monitor" element={<Suspense fallback={<PageLoader />}><AdminMonitorPage /></Suspense>} />
<Route path="settings" element={<Suspense fallback={<PageLoader />}><AdminSettingsPage /></Suspense>} />
<Route path="*" element={<Suspense fallback={<PageLoader />}><NotFoundPage title="后台页面不存在" /></Suspense>} />
</Route>
<Route element={<MainLayout />}>
<Route path="/" element={<HomePage />} />
<Route path="/board/:id" element={<HomePage />} />
{/* :id 可为 123 或 123.html（伪静态后缀由后台配置） */}
<Route path="/post/:id" element={<PostDetailPage />} />
<Route path="/compose" element={<ComposePage />} />
<Route path="/post/:id/edit" element={<ComposePage />} />
<Route path="/profile" element={<ProfilePage />} />
<Route path="/user/:id" element={<UserProfilePage />} />
<Route path="/favorites" element={<FavoritesPage />} />
<Route path="/projects" element={<ProjectsPage />} />
<Route path="/links" element={<LinksPage />} />
<Route path="/showcase" element={<Suspense fallback={null}><ShowcasePage /></Suspense>} />
<Route path="/messages" element={<MessagesPage />} />
<Route path="/page/:slug" element={<Suspense fallback={null}><SitePageView /></Suspense>} />
<Route path="*" element={<Suspense fallback={null}><NotFoundPage /></Suspense>} />
</Route>
<Route path="*" element={<Suspense fallback={<PageLoader fullScreen />}><NotFoundPage standalone /></Suspense>} />
</Route>,
);

24
frontend/src/AppShell.tsx Normal file
View File

@@ -0,0 +1,24 @@
import type { ReactNode } from 'react';
import './styles/global.css';
import { AuthProvider } from './hooks/useAuth';
import { ThemeProvider } from './hooks/useTheme';
import ErrorBoundary from './components/ErrorBoundary';
import { Toaster } from './components/ui/sonner';
import PullToRefresh from './components/PullToRefresh';
import TopProgressBar from './components/TopProgressBar';
/** 与路由无关的应用壳：Provider + 全局挂件（SSR 服务端 / 客户端共用） */
export default function AppShell({ children }: { children: ReactNode }) {
return (
<ThemeProvider>
<AuthProvider>
<ErrorBoundary>
{children}
<TopProgressBar />
<PullToRefresh />
<Toaster />
</ErrorBoundary>
</AuthProvider>
</ThemeProvider>
);
}

28
frontend/src/api/serverClient.ts Normal file
View File

@@ -0,0 +1,28 @@
/**
* 服务端 API 客户端：Vike +data 在 Node 侧调用 Go API 用（仅 SSR 打包引用）。
*
* - GO_API_URL 指向 Go 服务（dev 默认与 Vite proxy 一致；生产由环境变量给 :3001）
* - 转发浏览器 cookie 以透传登录态
* - 5s 超时；任何失败返回 null，调用方降级为 SPA 壳，不阻断渲染
*/
const GO_API_URL = process.env.GO_API_URL || `http://127.0.0.1:${process.env.VITE_API_PORT || '3000'}`;
export async function serverApi<T>(
path: string,
opts?: { cookie?: string; timeoutMs?: number },
): Promise<T | null> {
try {
const res = await fetch(`${GO_API_URL}${path}`, {
headers: {
...(opts?.cookie ? { cookie: opts.cookie } : {}),
},
signal: AbortSignal.timeout(opts?.timeoutMs ?? 5000),
cache: 'no-store',
});
if (!res.ok) return null;
return (await res.json()) as T;
} catch {
return null;
}
}

96
frontend/src/main.tsx
View File

@@ -1,96 +0,0 @@
import React from 'react';
import { hydrateRoot, createRoot } from 'react-dom/client';
import { applyTheme, getStoredTheme } from './utils/theme';
import App from './App';
import { consumeHomeBoot } from './utils/homeBoot';
import { beginHomeHydrate } from './utils/homeHydrate';
import { reloadForStaleChunk } from './utils/chunkLoad';
import { ensureColdBootReady, isMainLayoutPath } from './utils/prefetchRoute';
applyTheme(getStoredTheme());
consumeHomeBoot();
// Vite modulepreload / 动态 import 失败（发版后旧 hashed URL 404）
window.addEventListener('vite:preloadError', (event) => {
event.preventDefault();
reloadForStaleChunk();
});
function hasSSRHome(): boolean {
return !!document.querySelector('#root .ssr-home');
}
function waitForStylesheets(): Promise<void> {
const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
if (links.length === 0) return Promise.resolve();
return Promise.all(
links.map(
(node) =>
new Promise<void>((resolve) => {
const link = node as HTMLLinkElement;
try {
if (link.sheet) {
resolve();
return;
}
} catch {
/* cross-origin */
}
const finish = () => resolve();
link.addEventListener('load', finish, { once: true });
link.addEventListener('error', finish, { once: true });
}),
),
).then(() => undefined);
}
function renderApp() {
return (
<React.StrictMode>
<App />
</React.StrictMode>
);
}
function mountCreateRoot(el: HTMLElement) {
createRoot(el).render(renderApp());
}
/** 有 SSR 正文：hydrate 接管同一 DOM；失败则回退 createRoot */
function mountHydrateHome(el: HTMLElement) {
beginHomeHydrate();
try {
hydrateRoot(el, renderApp());
} catch (err) {
console.warn('[j13] hydrateRoot 失败，回退 createRoot', err);
el.innerHTML = '';
mountCreateRoot(el);
}
}
async function boot() {
const path = `${window.location.pathname}${window.location.search}`;
const ssr = hasSSRHome();
await waitForStylesheets();
try {
if (document.fonts?.ready) await document.fonts.ready;
} catch {
/* ignore */
}
if (isMainLayoutPath(window.location.pathname)) {
await ensureColdBootReady(path);
}
const root = document.getElementById('root');
if (!root) return;
if (ssr) {
mountHydrateHome(root);
} else {
mountCreateRoot(root);
}
}
void boot();

26
frontend/src/ssr/feedPaths.ts Normal file
View File

@@ -0,0 +1,26 @@
/**
* SSR feed 页路由匹配（Vike +route.ts 用）。
*
* 真渲染白名单：首页 `/`、板块页 `/board/:id`、帖子详情 `/post/:id`
* （兼容 `123.html` 伪静态）。其余 URL 一律走 SPA 壳，后续扩展 SEO 页只改这里。
*/
export type FeedSsrMatch =
| { kind: 'home'; id: '' }
| { kind: 'board'; id: string }
| { kind: 'post'; id: string };
const FEED_PATTERNS: Array<{ re: RegExp; pick: (m: RegExpMatchArray) => FeedSsrMatch }> = [
{ re: /^\/$/, pick: () => ({ kind: 'home', id: '' }) },
{ re: /^\/board\/([^/]+)$/, pick: (m) => ({ kind: 'board', id: m[1] }) },
// 123 与 123.html（伪静态后缀由后台配置，两种形态都接住）
{ re: /^\/post\/([^/]+?)(?:\.html?)?$/, pick: (m) => ({ kind: 'post', id: m[1] }) },
];
export function matchFeedSsrPath(urlPathname: string): FeedSsrMatch | null {
for (const { re, pick } of FEED_PATTERNS) {
const m = urlPathname.match(re);
if (m) return pick(m);
}
return null;
}

3
frontend/src/ssr/scopeTypes.ts
View File

@@ -25,6 +25,8 @@ export type RequestScope = {
checkIns: Map<number, CheckInStatus>; checkIns: Map<number, CheckInStatus>;
/** 主题（由 +data 从 cookie 解析） */ /** 主题（由 +data 从 cookie 解析） */
theme: 'light' | 'dark'; theme: 'light' | 'dark';
/** 本请求渲染是否采用「hydrate 首帧同构变体」（feed SSR 页恒为 true） */
hydrating: boolean;
}; };
export function createRequestScope(homeStore: HomeStoreState, theme: 'light' | 'dark' = 'light'): RequestScope { export function createRequestScope(homeStore: HomeStoreState, theme: 'light' | 'dark' = 'light'): RequestScope {
@@ -37,5 +39,6 @@ export function createRequestScope(homeStore: HomeStoreState, theme: 'light' | '
pages: null, pages: null,
checkIns: new Map(), checkIns: new Map(),
theme, theme,
hydrating: false,
}; };
} }

6
frontend/src/utils/homeHydrate.ts
View File

@@ -1,5 +1,7 @@
/** 首页 SSR hydrate 首帧同构标志（仅 / 与板块首页） */ /** 首页 SSR hydrate 首帧同构标志（仅 / 与板块首页） */
import { getScope } from '../ssr/scope';
declare global { declare global {
interface Window { interface Window {
__J13_HYDRATING_HOME__?: boolean; __J13_HYDRATING_HOME__?: boolean;
@@ -30,8 +32,10 @@ export function endHomeHydrate() {
} }
} }
/** 首帧是否必须与 Go SSR DOM 同构 */ /** 首帧是否必须与 SSR DOM 同构（SSR 渲染期读请求作用域，客户端读模块/窗口标志） */
export function isHomeHydrating(): boolean { export function isHomeHydrating(): boolean {
const scope = getScope();
if (scope) return scope.hydrating === true;
if (hydrating) return true; if (hydrating) return true;
try { try {
return !!window.__J13_HYDRATING_HOME__; return !!window.__J13_HYDRATING_HOME__;

2
frontend/tsconfig.json
View File

@@ -17,5 +17,5 @@
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"paths": { "@/*": ["./src/*"] } "paths": { "@/*": ["./src/*"] }
}, },
"include": ["src"] "include": ["src", "pages", "renderer", "vite.config.ts"]
} }

35
frontend/vite.config.ts
View File

@@ -1,40 +1,14 @@
import path from 'path'; import path from 'path';
import { defineConfig, type Plugin } from 'vite'; import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
import vike from 'vike/plugin';
// 与 Go 后端默认端口一致，可通过 VITE_API_PORT 覆盖 // 与 Go 后端默认端口一致，可通过 VITE_API_PORT 覆盖
const apiPort = process.env.VITE_API_PORT || '3000'; const apiPort = process.env.VITE_API_PORT || '3000';
const apiTarget = `http://localhost:${apiPort}`; const apiTarget = `http://localhost:${apiPort}`;
/** 把 stylesheet 挪到 head 靠前（先于 module script），接近 Gitea 外链 CSS 顺序 */
function htmlStylesheetsFirst(): Plugin {
return {
name: 'html-stylesheets-first',
enforce: 'post',
transformIndexHtml(html) {
// 只处理真实标签，忽略注释里的示例文字
const linkRe = /<link\b(?![^>]*\/?>)[^>]*\brel=["']stylesheet["'][^>]*>\s*/gi;
// 更稳妥：逐个找 link 标签
const styles: string[] = [];
const out = html.replace(/<link\b[^>]*>/gi, (tag) => {
if (/\brel=["']stylesheet["']/i.test(tag)) {
styles.push(tag);
return '';
}
return tag;
});
if (!styles.length) return html;
const inject = `${styles.join('\n ')}\n `;
if (/<script\b/i.test(out)) {
return out.replace(/<script\b/i, `${inject}<script`);
}
return out.replace(/<\/head>/i, ` ${inject}</head>`);
},
};
}
export default defineConfig({ export default defineConfig({
plugins: [react(), htmlStylesheetsFirst()], plugins: [react(), vike()],
resolve: { resolve: {
alias: { alias: {
'@': path.resolve(__dirname, './src'), '@': path.resolve(__dirname, './src'),
@@ -42,7 +16,8 @@ export default defineConfig({
}, },
base: '/', base: '/',
build: { build: {
outDir: '../embed_static/static/spa', // Vike 双构建：产出 dist/client（静态资源）+ dist/server（SSR 渲染入口）
outDir: 'dist',
emptyOutDir: true, emptyOutDir: true,
rollupOptions: { rollupOptions: {
output: { output: {