chore: sync local changes (2026-03-12)
28
mengyadriftbottle-frontend/ENV_SETUP.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# 环境变量配置说明
|
||||
|
||||
## 开发环境
|
||||
|
||||
创建 `.env.development` 文件（或使用默认值）：
|
||||
|
||||
```
|
||||
VITE_API_BASE_URL=/api
|
||||
VITE_ADMIN_URL=http://localhost:5002/admin/login
|
||||
```
|
||||
|
||||
## 生产环境
|
||||
|
||||
创建 `.env.production` 文件：
|
||||
|
||||
```
|
||||
VITE_API_BASE_URL=https://bottle.api.shumengya.top/api
|
||||
VITE_ADMIN_URL=https://bottle.api.shumengya.top/admin/login
|
||||
```
|
||||
|
||||
## 说明
|
||||
|
||||
- `VITE_API_BASE_URL`: 后端 API 的基础 URL
|
||||
- `VITE_ADMIN_URL`: 管理员登录页面的 URL
|
||||
|
||||
前端会自动根据 `VITE_API_BASE_URL` 来设置背景图片的路径：
|
||||
- 如果 `VITE_API_BASE_URL` 是完整的 URL（如 `https://bottle.api.shumengya.top/api`），背景图片会从该域名加载
|
||||
- 如果 `VITE_API_BASE_URL` 是相对路径（如 `/api`），背景图片会使用相对路径
|
||||
@@ -8,7 +8,12 @@
|
||||
name="description"
|
||||
content="让心意随海浪飘向远方，邂逅那个懂你的人——萌芽漂流瓶 React 前端"
|
||||
/>
|
||||
<meta name="theme-color" content="#0ea5e9" />
|
||||
<link rel="manifest" href="/manifest.webmanifest" />
|
||||
<link rel="icon" type="image/png" href="/logo.png" />
|
||||
<link rel="apple-touch-icon" href="/logo.png" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
|
Before Width: | Height: | Size: 18 MiB |
|
Before Width: | Height: | Size: 4.3 MiB |
|
Before Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 480 KiB |
|
Before Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 920 KiB |
|
Before Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 3.6 MiB |
|
Before Width: | Height: | Size: 2.4 MiB |
|
Before Width: | Height: | Size: 265 KiB |
|
Before Width: | Height: | Size: 9.0 MiB |
|
Before Width: | Height: | Size: 4.2 MiB |
|
Before Width: | Height: | Size: 8.4 MiB |
|
Before Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 5.5 MiB |
|
Before Width: | Height: | Size: 5.7 MiB |
|
Before Width: | Height: | Size: 2.5 MiB |
|
Before Width: | Height: | Size: 5.2 MiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 2.4 MiB |
|
Before Width: | Height: | Size: 5.1 MiB |
|
Before Width: | Height: | Size: 4.8 MiB |
|
Before Width: | Height: | Size: 9.6 MiB |
|
Before Width: | Height: | Size: 2.9 MiB |
|
Before Width: | Height: | Size: 3.4 MiB |
|
Before Width: | Height: | Size: 3.0 MiB |
25
mengyadriftbottle-frontend/public/manifest.webmanifest
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "萌芽漂流瓶",
|
||||
"short_name": "漂流瓶",
|
||||
"description": "让心意随海浪飘向远方，邂逅那个懂你的人——萌芽漂流瓶",
|
||||
"lang": "zh-CN",
|
||||
"start_url": "/",
|
||||
"scope": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#0b1020",
|
||||
"theme_color": "#0ea5e9",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/logo.png",
|
||||
"sizes": "2048x2048",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/logo3.png",
|
||||
"sizes": "2048x2048",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
97
mengyadriftbottle-frontend/public/offline.html
Normal file
@@ -0,0 +1,97 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#0ea5e9" />
|
||||
<title>离线 - 萌芽漂流瓶</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--bg: #0b1020;
|
||||
--fg: #e5e7eb;
|
||||
--muted: rgba(229, 231, 235, 0.7);
|
||||
--accent: #0ea5e9;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: radial-gradient(
|
||||
1200px 800px at 20% 10%,
|
||||
rgba(14, 165, 233, 0.2),
|
||||
transparent 60%
|
||||
),
|
||||
radial-gradient(
|
||||
900px 700px at 80% 90%,
|
||||
rgba(99, 102, 241, 0.18),
|
||||
transparent 55%
|
||||
),
|
||||
var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
|
||||
Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
}
|
||||
.card {
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
padding: 20px 18px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
.actions {
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
a,
|
||||
button {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: #001018;
|
||||
background: linear-gradient(180deg, #22c3ff, #0ea5e9);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
button.secondary {
|
||||
color: var(--fg);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="card">
|
||||
<h1>当前处于离线状态</h1>
|
||||
<p>网络连接不可用，已为你保留基础页面。恢复网络后可继续使用完整功能。</p>
|
||||
<div class="actions">
|
||||
<a href="/">返回首页</a>
|
||||
<button class="secondary" type="button" onclick="location.reload()">
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
102
mengyadriftbottle-frontend/public/sw.js
Normal file
@@ -0,0 +1,102 @@
|
||||
const CACHE_PREFIX = 'mengyadriftbottle'
|
||||
const CACHE_VERSION = 'v1'
|
||||
const STATIC_CACHE = `${CACHE_PREFIX}-static-${CACHE_VERSION}`
|
||||
const RUNTIME_CACHE = `${CACHE_PREFIX}-runtime-${CACHE_VERSION}`
|
||||
|
||||
const PRECACHE_URLS = [
|
||||
'/',
|
||||
'/index.html',
|
||||
'/offline.html',
|
||||
'/manifest.webmanifest',
|
||||
'/logo.png',
|
||||
'/logo3.png',
|
||||
]
|
||||
|
||||
self.addEventListener('install', (event) => {
|
||||
event.waitUntil(
|
||||
(async () => {
|
||||
const cache = await caches.open(STATIC_CACHE)
|
||||
await cache.addAll(PRECACHE_URLS)
|
||||
self.skipWaiting()
|
||||
})(),
|
||||
)
|
||||
})
|
||||
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(
|
||||
(async () => {
|
||||
const keys = await caches.keys()
|
||||
await Promise.all(
|
||||
keys.map((key) => {
|
||||
if (
|
||||
key.startsWith(`${CACHE_PREFIX}-`) &&
|
||||
key !== STATIC_CACHE &&
|
||||
key !== RUNTIME_CACHE
|
||||
) {
|
||||
return caches.delete(key)
|
||||
}
|
||||
return undefined
|
||||
}),
|
||||
)
|
||||
await self.clients.claim()
|
||||
})(),
|
||||
)
|
||||
})
|
||||
|
||||
self.addEventListener('message', (event) => {
|
||||
if (event?.data?.type === 'SKIP_WAITING') {
|
||||
self.skipWaiting()
|
||||
}
|
||||
})
|
||||
|
||||
function isSameOrigin(url) {
|
||||
return url.origin === self.location.origin
|
||||
}
|
||||
|
||||
self.addEventListener('fetch', (event) => {
|
||||
const { request } = event
|
||||
if (request.method !== 'GET') return
|
||||
|
||||
const url = new URL(request.url)
|
||||
if (!isSameOrigin(url)) return
|
||||
|
||||
if (url.pathname.startsWith('/api')) return
|
||||
|
||||
if (request.mode === 'navigate') {
|
||||
event.respondWith(
|
||||
(async () => {
|
||||
try {
|
||||
const networkResponse = await fetch(request)
|
||||
const cache = await caches.open(RUNTIME_CACHE)
|
||||
cache.put('/index.html', networkResponse.clone())
|
||||
return networkResponse
|
||||
} catch {
|
||||
const cache = await caches.open(RUNTIME_CACHE)
|
||||
const cached =
|
||||
(await cache.match('/index.html')) ||
|
||||
(await caches.match('/index.html')) ||
|
||||
(await caches.match('/offline.html'))
|
||||
return cached || Response.error()
|
||||
}
|
||||
})(),
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
const isAsset = ['script', 'style', 'image', 'font'].includes(request.destination)
|
||||
|
||||
if (isAsset) {
|
||||
event.respondWith(
|
||||
(async () => {
|
||||
const cached = await caches.match(request)
|
||||
if (cached) return cached
|
||||
|
||||
const response = await fetch(request)
|
||||
const cache = await caches.open(RUNTIME_CACHE)
|
||||
cache.put(request, response.clone())
|
||||
return response
|
||||
})(),
|
||||
)
|
||||
return
|
||||
}
|
||||
})
|
||||
@@ -11,7 +11,28 @@ const DEFAULT_FORM = Object.freeze({
|
||||
qq: '',
|
||||
})
|
||||
|
||||
const BACKGROUND_IMAGES = Array.from({ length: 29 }, (_, index) => `/background/image${index + 1}.png`)
|
||||
// 根据环境变量确定背景图片的基础路径
|
||||
// 如果设置了 VITE_API_BASE_URL，则使用该 URL 的基础路径；否则使用相对路径
|
||||
const getBackgroundBaseUrl = () => {
|
||||
const apiUrl = import.meta.env.VITE_API_BASE_URL
|
||||
if (apiUrl && apiUrl.startsWith('http')) {
|
||||
// 生产环境：从完整 API URL 中提取基础 URL
|
||||
try {
|
||||
const url = new URL(apiUrl)
|
||||
return `${url.protocol}//${url.host}`
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
// 开发环境：使用相对路径
|
||||
return ''
|
||||
}
|
||||
|
||||
const BACKGROUND_BASE_URL = getBackgroundBaseUrl()
|
||||
const BACKGROUND_IMAGES = Array.from(
|
||||
{ length: 29 },
|
||||
(_, index) => `${BACKGROUND_BASE_URL}/background/image${index + 1}.png`
|
||||
)
|
||||
|
||||
const formatCount = (value) => {
|
||||
const num = typeof value === 'number' ? value : Number(value || 0)
|
||||
|
||||
@@ -8,3 +8,26 @@ createRoot(document.getElementById('root')).render(
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
if (import.meta.env.PROD && 'serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker
|
||||
.register('/sw.js', { scope: '/', updateViaCache: 'none' })
|
||||
.then((registration) => {
|
||||
registration.update().catch(() => {})
|
||||
registration.addEventListener('updatefound', () => {
|
||||
const worker = registration.installing
|
||||
if (!worker) return
|
||||
worker.addEventListener('statechange', () => {
|
||||
if (worker.state !== 'installed') return
|
||||
if (navigator.serviceWorker.controller) {
|
||||
console.info('发现新版本，请刷新页面以更新。')
|
||||
} else {
|
||||
console.info('PWA 已启用，可离线使用。')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch((err) => console.warn('Service Worker 注册失败：', err))
|
||||
})
|
||||
}
|
||||
|
||||