@tianyio/quality-helper
Version:
A comprehensive quality helper tool for project scaffolding and management
153 lines (133 loc) • 5.45 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<!-- 基础 Meta 标签 -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="description" content="基于 Vite + Vue3 + TypeScript 构建的现代化 Web 应用" />
<meta name="keywords" content="Vue3, Vite, TypeScript, 前端开发" />
<meta name="author" content="Fast Web" />
<meta name="robots" content="index, follow" />
<!-- 安全性 Meta 标签 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data: https://gw.alipayobjects.com; connect-src 'self' https:;"
/>
<meta name="referrer" content="strict-origin-when-cross-origin" />
<!-- PWA 支持 -->
<meta name="theme-color" content="#646cff" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Fast Web App" />
<meta name="msapplication-TileColor" content="#646cff" />
<!-- 图标配置 -->
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<!-- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> -->
<!-- <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> -->
<!-- <link rel="manifest" href="/manifest.json" /> -->
<!-- 预加载关键资源 -->
<!-- 移除了不必要的预加载，避免警告 -->
<!-- <link rel="preload" href="/src/main.ts" as="script" crossorigin /> -->
<!-- <link rel="preconnect" href="https://fonts.googleapis.com" /> -->
<!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> -->
<!-- DNS 预解析 -->
<!-- <link rel="dns-prefetch" href="//cdn.jsdelivr.net" /> -->
<!-- <link rel="dns-prefetch" href="//unpkg.com" /> -->
<!-- Open Graph 标签 -->
<!-- <meta property="og:type" content="website" />
<meta property="og:title" content="Fast Web App" />
<meta property="og:description" content="基于 Vite + Vue3 + TypeScript 构建的现代化 Web 应用" />
<meta property="og:image" content="/og-image.png" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="Fast Web" /> -->
<!-- Twitter Card 标签 -->
<!-- <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Fast Web App" />
<meta name="twitter:description" content="基于 Vite + Vue3 + TypeScript 构建的现代化 Web 应用" />
<meta name="twitter:image" content="/twitter-image.png" /> -->
<!-- 页面标题 -->
<title>Fast Web App</title>
<!-- 内联关键 CSS（可选） -->
<style>
/* 防止 FOUC (Flash of Unstyled Content) */
#root {
min-height: 100vh;
display: flex;
flex-direction: column;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
sans-serif;
}
/* 加载动画 */
.loading {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #646cff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 无障碍支持 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
</head>
<body>
<!-- 无障碍跳转链接 -->
<a href="#main-content" class="sr-only">跳转到主要内容</a>
<!-- 应用容器 -->
<div id="root" role="application" aria-label="Fast Web 应用">
<!-- 加载状态 -->
<div class="loading" aria-label="应用加载中" role="status">
<span class="sr-only">加载中...</span>
</div>
</div>
<!-- 主要内容区域 -->
<main id="main-content" style="display: none">
<!-- Vue 应用将在此渲染 -->
</main>
<!-- 不支持 JavaScript 的提示 -->
<noscript>
<div style="text-align: center; padding: 50px; font-family: sans-serif">
<h1>需要启用 JavaScript</h1>
<p>此应用需要 JavaScript 才能正常运行，请在浏览器中启用 JavaScript。</p>
</div>
</noscript>
<!-- 应用脚本 -->
<script type="module" src="/src/main.ts"></script>
<!-- 环境变量注入点（构建时替换） -->
<!-- __VITE_ENV_VARS__ -->
<!-- 性能监控（可选） -->
<script>
// 页面加载性能监控
window.addEventListener('load', function () {
if ('performance' in window) {
const perfData = performance.getEntriesByType('navigation')[0]
console.log('页面加载时间:', perfData.loadEventEnd - perfData.fetchStart, 'ms')
}
})
</script>
</body>
</html>