fix: 更新健康监测模块页面与文档，新增静态服务配置
This commit is contained in:
liuyunqin
+118
-6
@@ -149,10 +149,40 @@ body { background: var(--background); font-family: -apple-system, BlinkMacSystem
|
||||
.prd-item__status { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; flex-shrink: 0; }
|
||||
.prd-item__status--ready { background: var(--green-light); color: #389e0d; border: 1px solid var(--green-border); }
|
||||
.prd-item__status--empty { background: #fffbe6; color: #d48806; border: 1px solid #ffe58f; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
|
||||
/* ===== file:// 协议 - 全屏启动遮罩 ===== */
|
||||
.launch-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(15,23,42,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); flex-direction: column; align-items: center; justify-content: center; font-family: -apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue','Segoe UI',sans-serif; }
|
||||
.launch-overlay--show { display: flex; }
|
||||
.launch-card { background: #fff; border-radius: 20px; padding: 40px 48px; text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,0.4); max-width: 480px; width: 90%; animation: popIn .35s ease; }
|
||||
.launch-card__icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #1677FF, #4facfe); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 32px; color: #fff; }
|
||||
.launch-card__icon--ok { background: linear-gradient(135deg, #52c41a, #95de64); }
|
||||
.launch-card__title { font-size: 20px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
|
||||
.launch-card__sub { font-size: 14px; color: #5a607f; margin-bottom: 24px; line-height: 1.6; }
|
||||
.launch-card__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #1677FF, #4facfe); border: none; border-radius: 12px; cursor: pointer; text-decoration: none; transition: all .2s; box-shadow: 0 4px 16px rgba(22,119,255,0.35); }
|
||||
.launch-card__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(22,119,255,0.45); }
|
||||
.launch-card__btn--outline { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); box-shadow: none; }
|
||||
.launch-card__btn--outline:hover { background: var(--primary-light); box-shadow: 0 4px 12px rgba(22,119,255,0.15); }
|
||||
.launch-card__status { margin-top: 16px; font-size: 13px; color: var(--text-placeholder); }
|
||||
.launch-card__spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #e8ecf1; border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: 6px; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.launch-card__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 本地服务器启动遮罩 -->
|
||||
<div class="launch-overlay" id="launch-overlay">
|
||||
<div class="launch-card">
|
||||
<div class="launch-card__icon" id="launch-icon">🚀</div>
|
||||
<div class="launch-card__title" id="launch-title">需要启动本地服务器</div>
|
||||
<div class="launch-card__sub" id="launch-sub">PRD文档预览等功能需要本地HTTP服务器</div>
|
||||
<div class="launch-card__actions" id="launch-actions">
|
||||
<a class="launch-card__btn" href="启动服务器.bat">⚡ 一键启动</a>
|
||||
<a class="launch-card__btn launch-card__btn--outline" href="http://localhost:8080/index.html">📖 直接打开原型</a>
|
||||
</div>
|
||||
<div class="launch-card__status" id="launch-status"><span class="launch-card__spinner"></span>等待服务器就绪...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="header__inner">
|
||||
<div class="header__title">健康CQ升级项目 · 高保真交互原型</div>
|
||||
<div class="header__sub">点击模块卡片跳转至对应模块主页，点击页数徽章查看全部页面，点击PRD文档在线预览详细功能说明</div>
|
||||
@@ -162,8 +192,90 @@ body { background: var(--background); font-family: -apple-system, BlinkMacSystem
|
||||
<div class="main-content">
|
||||
<div id="tab-contents"></div>
|
||||
</div>
|
||||
<script>
|
||||
/* ===== SVG 图标 ===== */
|
||||
<script>
|
||||
/* ===== file:// 协议检测 & 服务器自动启动 ===== */
|
||||
(function() {
|
||||
if (location.protocol !== 'file:') return; /* 非 file:// 协议，无需处理 */
|
||||
|
||||
var overlay = document.getElementById('launch-overlay');
|
||||
var launchIcon = document.getElementById('launch-icon');
|
||||
var launchTitle = document.getElementById('launch-title');
|
||||
var launchSub = document.getElementById('launch-sub');
|
||||
var launchStatus = document.getElementById('launch-status');
|
||||
var launchActions = document.getElementById('launch-actions');
|
||||
|
||||
/* 步骤1: 先静默检测服务器是否已在运行（不显示遮罩） */
|
||||
function checkServer(callback) {
|
||||
var iframe = document.createElement('iframe');
|
||||
iframe.style.display = 'none';
|
||||
iframe.src = 'http://localhost:8080/index.html';
|
||||
var done = false;
|
||||
var t = setTimeout(function() {
|
||||
if (!done) { done = true; callback(false); }
|
||||
}, 2000);
|
||||
iframe.onload = function() {
|
||||
if (!done) { done = true; clearTimeout(t); callback(true); }
|
||||
};
|
||||
iframe.onerror = function() {
|
||||
if (!done) { done = true; clearTimeout(t); callback(false); }
|
||||
};
|
||||
document.body.appendChild(iframe);
|
||||
}
|
||||
|
||||
/* 步骤2: 服务器已运行 → 无感跳转 */
|
||||
function redirectToServer() {
|
||||
location.replace('http://localhost:8080/index.html');
|
||||
}
|
||||
|
||||
/* 步骤3: 显示遮罩 + 轮询 */
|
||||
function showOverlay() {
|
||||
overlay.classList.add('launch-overlay--show');
|
||||
launchIcon.textContent = '🚀';
|
||||
launchIcon.className = 'launch-card__icon';
|
||||
launchTitle.textContent = '需要启动本地服务器';
|
||||
launchSub.textContent = 'PRD文档预览等功能需要本地HTTP服务器，请双击项目根目录下的 启动服务器.bat';
|
||||
launchStatus.innerHTML = '<span class="launch-card__spinner"></span>等待服务器就绪...';
|
||||
launchActions.innerHTML = '<a class="launch-card__btn" href="启动服务器.bat">⚡ 一键启动</a> <a class="launch-card__btn launch-card__btn--outline" href="http://localhost:8080/index.html">📖 直接打开原型</a>';
|
||||
|
||||
/* 轮询：每2秒检测一次，最多30次（60秒） */
|
||||
var attempts = 0;
|
||||
var pollTimer = setInterval(function() {
|
||||
attempts++;
|
||||
checkServer(function(ok) {
|
||||
if (ok) {
|
||||
clearInterval(pollTimer);
|
||||
launchIcon.textContent = '✅';
|
||||
launchIcon.className = 'launch-card__icon launch-card__icon--ok';
|
||||
launchTitle.textContent = '服务器已就绪';
|
||||
launchSub.textContent = '即将自动跳转...';
|
||||
launchStatus.innerHTML = '<a href="http://localhost:8080/index.html" style="color:var(--primary)">立即跳转</a>';
|
||||
launchActions.innerHTML = '<a class="launch-card__btn launch-card__btn--outline" href="http://localhost:8080/index.html">📖 打开原型导航</a>';
|
||||
setTimeout(redirectToServer, 500);
|
||||
}
|
||||
});
|
||||
if (attempts >= 30) {
|
||||
clearInterval(pollTimer);
|
||||
launchTitle.textContent = '未检测到服务器';
|
||||
launchSub.textContent = '请确认 启动服务器.bat 已运行，然后刷新页面';
|
||||
launchStatus.innerHTML = '⏱ 等待超时（60秒）';
|
||||
launchActions.innerHTML = '<button class="launch-card__btn" onclick="location.reload()">🔄 刷新重试</button>';
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
/* === 主流程：先静默检测 === */
|
||||
checkServer(function(running) {
|
||||
if (running) {
|
||||
/* 服务器已在运行 → 直接跳转，用户全程无感 */
|
||||
redirectToServer();
|
||||
} else {
|
||||
/* 服务器未运行 → 显示遮罩引导手动启动 */
|
||||
showOverlay();
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
/* ===== SVG 图标 ===== */
|
||||
const ICONS = {
|
||||
web: '<svg class="tab-nav__icon" viewBox="0 0 18 18" fill="none"><rect x="1" y="2" width="16" height="12" rx="2" stroke="currentColor" stroke-width="1.5"/><line x1="5" y1="16" x2="13" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="9" y1="14" x2="9" y2="16" stroke="currentColor" stroke-width="1.5"/></svg>',
|
||||
app: '<svg class="tab-nav__icon" viewBox="0 0 18 18" fill="none"><rect x="4" y="1" width="10" height="16" rx="2" stroke="currentColor" stroke-width="1.5"/><line x1="7.5" y1="14" x2="10.5" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
|
||||
|
||||
Reference in New Issue
Block a user