mirror of
https://github.com/Afilmory/afilmory
synced 2026-02-01 22:48:17 +00:00
feat(static-web): enhance static web service with development template and query handling
- Introduced a new HTML template for development mode to improve local testing. - Updated the `ResolvedStaticAsset` interface to limit the `stats` property to `mtime` and `size`. - Made the `transformIndexHtml` method public to allow external access. - Enhanced the `StaticWebController` to serve the development template based on query parameters. Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei
@@ -37,7 +37,7 @@ export interface StaticAssetServiceOptions {
|
||||
export interface ResolvedStaticAsset {
|
||||
absolutePath: string
|
||||
relativePath: string
|
||||
stats: Stats
|
||||
stats: Pick<Stats, 'mtime' | 'size'>
|
||||
}
|
||||
|
||||
export abstract class StaticAssetService {
|
||||
@@ -394,7 +394,7 @@ export abstract class StaticAssetService {
|
||||
return new Response(transformed, { headers, status: 200 })
|
||||
}
|
||||
|
||||
private async transformIndexHtml(html: string, file: ResolvedStaticAsset): Promise<string> {
|
||||
public async transformIndexHtml(html: string, file: ResolvedStaticAsset): Promise<string> {
|
||||
try {
|
||||
const document = DOM_PARSER.parseFromString(html, 'text/html') as unknown as StaticAssetDocument
|
||||
await this.decorateDocument(document, file)
|
||||
|
||||
@@ -0,0 +1,263 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<script type="module">
|
||||
import { inject } from '{{host}}/@vite-plugin-checker-runtime'
|
||||
inject({
|
||||
overlayConfig: {},
|
||||
base: '/',
|
||||
})
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import { injectIntoGlobalHook } from '{{host}}/@react-refresh'
|
||||
injectIntoGlobalHook(window)
|
||||
window.$RefreshReg$ = () => {}
|
||||
window.$RefreshSig$ = () => (type) => type
|
||||
</script>
|
||||
<script type="module"></script>
|
||||
<script type="module" src="{{host}}/@vite/client"></script>
|
||||
|
||||
<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="Capturing beautiful moments in life, documenting daily warmth and emotions through my lens."
|
||||
/>
|
||||
|
||||
<!-- PWA iOS Safari 配置 -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-mobile-web-app-title" content="Innei's Afilmory" />
|
||||
|
||||
<title>Innei's Afilmory</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
html {
|
||||
font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
</style>
|
||||
<script id="config">
|
||||
window.__CONFIG__ = {}
|
||||
window.__SITE_CONFIG__ = {}
|
||||
</script>
|
||||
<script id="config-runtime">
|
||||
window.__SITE_CONFIG__ = {}
|
||||
</script>
|
||||
<script id="manifest"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<!-- Splash Screen - 现代简洁设计 -->
|
||||
<div
|
||||
id="splash-screen"
|
||||
style="
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #0a0a0a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
|
||||
overflow: hidden;
|
||||
"
|
||||
>
|
||||
<!-- 主要内容 -->
|
||||
<div
|
||||
style="
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<div
|
||||
style="
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1),
|
||||
0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
animation: logoFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
backdrop-filter: blur(10px);
|
||||
"
|
||||
>
|
||||
<!-- 相机图标 -->
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#0a0a0a"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M3 9a2 2 0 0 1 2-2h.93a2 2 0 0 0 1.664-.89l.812-1.22A2 2 0 0 1 10.07 4h3.86a2 2 0 0 1 1.664.89l.812 1.22A2 2 0 0 0 18.07 7H19a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z"
|
||||
/>
|
||||
<circle cx="12" cy="13" r="3" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 应用标题 -->
|
||||
<div style="display: flex; flex-direction: column; gap: 0.75rem">
|
||||
<h1
|
||||
style="
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.025em;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin: 0;
|
||||
animation: titleFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
|
||||
"
|
||||
>
|
||||
Innei's Afilmory
|
||||
</h1>
|
||||
<p
|
||||
style="
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.01em;
|
||||
animation: subtitleFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
|
||||
"
|
||||
>
|
||||
Capturing beautiful moments in life, documenting daily warmth and emotions through my lens.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 加载动画 -->
|
||||
<div style="margin-top: 1rem; animation: loaderFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both">
|
||||
<!-- 点状加载器 -->
|
||||
<div style="display: flex; gap: 0.5rem; align-items: center">
|
||||
<div
|
||||
style="
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 50%;
|
||||
animation: dotPulse 1.4s ease-in-out infinite;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 50%;
|
||||
animation: dotPulse 1.4s ease-in-out infinite 0.2s;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 50%;
|
||||
animation: dotPulse 1.4s ease-in-out infinite 0.4s;
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CSS 动画 -->
|
||||
<style>
|
||||
@keyframes logoFade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.9);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes titleFade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes subtitleFade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loaderFade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dotPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
#splash-screen h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#splash-screen p {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#splash-screen h1 {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
#splash-screen [style*='gap: 2rem'] {
|
||||
gap: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="{{host}}/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,12 +1,19 @@
|
||||
import { ContextParam, Controller, Get, Param } from '@afilmory/framework'
|
||||
import { ContextParam, Controller, createZodSchemaDto, Get, Param, Query } from '@afilmory/framework'
|
||||
import { SkipTenantGuard } from 'core/decorators/skip-tenant.decorator'
|
||||
import type { Context } from 'hono'
|
||||
import z from 'zod'
|
||||
|
||||
import { StaticBaseController } from './static-base.controller'
|
||||
import { StaticControllerUtils } from './static-controller.utils'
|
||||
import { StaticDashboardService } from './static-dashboard.service'
|
||||
import { StaticWebService } from './static-web.service'
|
||||
import devTemplate from './static-web-dev.template.html?raw'
|
||||
|
||||
class StaticWebDto extends createZodSchemaDto(
|
||||
z.object({
|
||||
dev: z.url().optional(),
|
||||
}),
|
||||
) {}
|
||||
@Controller({ bypassGlobalPrefix: true })
|
||||
export class StaticWebController extends StaticBaseController {
|
||||
constructor(staticWebService: StaticWebService, staticDashboardService: StaticDashboardService) {
|
||||
@@ -16,7 +23,11 @@ export class StaticWebController extends StaticBaseController {
|
||||
@Get('/')
|
||||
@Get('/explory')
|
||||
@SkipTenantGuard()
|
||||
async getStaticWebIndex(@ContextParam() context: Context) {
|
||||
async getStaticWebIndex(@ContextParam() context: Context, @Query() query: StaticWebDto) {
|
||||
if (query.dev) {
|
||||
return await this.serveDev(context, query.dev.toString())
|
||||
}
|
||||
|
||||
if (StaticControllerUtils.isReservedTenant({ root: true })) {
|
||||
return await StaticControllerUtils.renderTenantRestrictedPage(this.staticDashboardService)
|
||||
}
|
||||
@@ -45,4 +56,24 @@ export class StaticWebController extends StaticBaseController {
|
||||
}
|
||||
return await this.staticWebService.decoratePhotoPageResponse(context, photoId, response)
|
||||
}
|
||||
|
||||
private async serveDev(context: Context, devHost: string) {
|
||||
const template = devTemplate.replaceAll('{{host}}', devHost)
|
||||
const transformed = await this.staticWebService.transformIndexHtml(template, {
|
||||
absolutePath: '/',
|
||||
relativePath: '/',
|
||||
stats: {
|
||||
mtime: new Date(),
|
||||
size: template.length,
|
||||
},
|
||||
})
|
||||
return this.staticWebService.decorateHomepageResponse(
|
||||
context,
|
||||
new Response(transformed, {
|
||||
headers: {
|
||||
'Content-Type': 'text/html',
|
||||
},
|
||||
}),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user