feat: Vike 骨架(pages feed+spa / renderer 双端入口 / AppShell 拆分 / serverClient)
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:
@@ -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>
|
||||
@@ -4,9 +4,9 @@
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
"dev": "vike dev",
|
||||
"build": "vike build",
|
||||
"preview": "vike preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
|
||||
6
frontend/pages/+config.ts
Normal file
6
frontend/pages/+config.ts
Normal 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
10
frontend/pages/feed/+Page.tsx
Normal 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
11
frontend/pages/feed/+route.ts
Normal 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
8
frontend/pages/spa/+Page.tsx
Normal 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
10
frontend/pages/spa/+route.ts
Normal 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
4
frontend/pages/spa/+ssr.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export { ssr };
|
||||
|
||||
/** SPA 壳:服务端只出空壳 HTML,客户端整树挂载 react-router */
|
||||
const ssr = false;
|
||||
90
frontend/renderer/+onRenderClient.tsx
Normal file
90
frontend/renderer/+onRenderClient.tsx
Normal 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
65
frontend/renderer/+onRenderHtml.tsx
Normal 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>`;
|
||||
}
|
||||
@@ -1,114 +1,29 @@
|
||||
import { Suspense } from 'react';
|
||||
import {
|
||||
createBrowserRouter,
|
||||
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';
|
||||
import { RouterProvider, createBrowserRouter, createMemoryRouter } from 'react-router';
|
||||
import AppShell from './AppShell';
|
||||
import { appRoutes } from './AppRoutes';
|
||||
|
||||
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'));
|
||||
type AppRouter = ReturnType<typeof createMemoryRouter>;
|
||||
|
||||
const router = createBrowserRouter(
|
||||
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>,
|
||||
),
|
||||
);
|
||||
/** 浏览器路由单例:整页加载创建一次,此后站内导航全部由 react-router 接管 */
|
||||
let browserRouter: AppRouter | null = null;
|
||||
|
||||
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 (
|
||||
<ThemeProvider>
|
||||
<AuthProvider>
|
||||
<ErrorBoundary>
|
||||
<RouterProvider router={router} />
|
||||
<TopProgressBar />
|
||||
<PullToRefresh />
|
||||
<Toaster />
|
||||
</ErrorBoundary>
|
||||
</AuthProvider>
|
||||
</ThemeProvider>
|
||||
<AppShell>
|
||||
<RouterProvider router={getAppRouter(url)} />
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
85
frontend/src/AppRoutes.tsx
Normal file
85
frontend/src/AppRoutes.tsx
Normal 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
24
frontend/src/AppShell.tsx
Normal 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
28
frontend/src/api/serverClient.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -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
26
frontend/src/ssr/feedPaths.ts
Normal 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;
|
||||
}
|
||||
@@ -25,6 +25,8 @@ export type RequestScope = {
|
||||
checkIns: Map<number, CheckInStatus>;
|
||||
/** 主题(由 +data 从 cookie 解析) */
|
||||
theme: 'light' | 'dark';
|
||||
/** 本请求渲染是否采用「hydrate 首帧同构变体」(feed SSR 页恒为 true) */
|
||||
hydrating: boolean;
|
||||
};
|
||||
|
||||
export function createRequestScope(homeStore: HomeStoreState, theme: 'light' | 'dark' = 'light'): RequestScope {
|
||||
@@ -37,5 +39,6 @@ export function createRequestScope(homeStore: HomeStoreState, theme: 'light' | '
|
||||
pages: null,
|
||||
checkIns: new Map(),
|
||||
theme,
|
||||
hydrating: false,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
/** 首页 SSR hydrate 首帧同构标志(仅 / 与板块首页) */
|
||||
|
||||
import { getScope } from '../ssr/scope';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
__J13_HYDRATING_HOME__?: boolean;
|
||||
@@ -30,8 +32,10 @@ export function endHomeHydrate() {
|
||||
}
|
||||
}
|
||||
|
||||
/** 首帧是否必须与 Go SSR DOM 同构 */
|
||||
/** 首帧是否必须与 SSR DOM 同构(SSR 渲染期读请求作用域,客户端读模块/窗口标志) */
|
||||
export function isHomeHydrating(): boolean {
|
||||
const scope = getScope();
|
||||
if (scope) return scope.hydrating === true;
|
||||
if (hydrating) return true;
|
||||
try {
|
||||
return !!window.__J13_HYDRATING_HOME__;
|
||||
|
||||
@@ -17,5 +17,5 @@
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"paths": { "@/*": ["./src/*"] }
|
||||
},
|
||||
"include": ["src"]
|
||||
"include": ["src", "pages", "renderer", "vite.config.ts"]
|
||||
}
|
||||
|
||||
@@ -1,40 +1,14 @@
|
||||
import path from 'path';
|
||||
import { defineConfig, type Plugin } from 'vite';
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import vike from 'vike/plugin';
|
||||
|
||||
// 与 Go 后端默认端口一致,可通过 VITE_API_PORT 覆盖
|
||||
const apiPort = process.env.VITE_API_PORT || '3000';
|
||||
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({
|
||||
plugins: [react(), htmlStylesheetsFirst()],
|
||||
plugins: [react(), vike()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
@@ -42,7 +16,8 @@ export default defineConfig({
|
||||
},
|
||||
base: '/',
|
||||
build: {
|
||||
outDir: '../embed_static/static/spa',
|
||||
// Vike 双构建:产出 dist/client(静态资源)+ dist/server(SSR 渲染入口)
|
||||
outDir: 'dist',
|
||||
emptyOutDir: true,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
|
||||
Reference in New Issue
Block a user