admin/Toolbox
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 初始提交 - 移除所有硬编码凭据，统一从环境变量读取

Browse Source
This commit is contained in:
yangxiangyuan
2026-06-11 17:10:58 +08:00
commit c223c79b36
1699 changed files with 313940 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/tools/apple_watch/index.html
+565
View File
@@ -0,0 +1,565 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple Watch 数据洞察</title>
<link rel="stylesheet" href="style.css">
<style>
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(4px);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
flex-direction: column;
gap: 16px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.loading-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(56, 189, 248, 0.3);
border-radius: 50%;
border-top-color: #38bdf8;
animation: spin 1s ease-in-out infinite;
}
.loading-text {
color: #e2e8f0;
font-size: 16px;
font-weight: 500;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="loadingOverlay" class="loading-overlay">
<div class="spinner"></div>
<div class="loading-text">正在处理数据...</div>
</div>
<div class="page">
<header class="header">
<div class="title">
<div class="title-main">Apple Watch 数据洞察</div>
<div class="title-sub">Apple Health 导出数据 · 近况与趋势</div>
</div>
<div class="actions">
<select id="daysRange">
<option value="30">近30天</option>
<option value="90" selected>近90天</option>
<option value="180">近180天</option>
<option value="365">近365天</option>
</select>
<button id="btnRefresh" class="primary">刷新</button>
<button id="btnImport" class="ghost">同步导出</button>
</div>
</header>
<div class="tabs-bar">
<button class="tab-btn active" data-tab="default">Default Health</button>
<button class="tab-btn" data-tab="hdd">Health Data Dashboard</button>
<button class="tab-btn" data-tab="aha">Apple Health Analytics</button>
<button class="tab-btn" data-tab="grafana">Grafana Health</button>
<button class="tab-btn" data-tab="dhd">Digital Health Data</button>
</div>
<div class="tab-page active" data-tab-page="default">
<section class="cards" id="summaryCards">
<div class="card">
<div class="card-label">记录总量</div>
<div class="card-value" id="statRecords">0</div>
<div class="card-meta" id="statDateRange">-</div>
</div>
<div class="card">
<div class="card-label">数据类型</div>
<div class="card-value" id="statTypes">0</div>
<div class="card-meta" id="statLastImport">-</div>
</div>
<div class="card">
<div class="card-label">运动路线</div>
<div class="card-value" id="statRoutes">0</div>
<div class="card-meta">GPS 轨迹</div>
</div>
<div class="card">
<div class="card-label">ECG 记录</div>
<div class="card-value" id="statEcg">0</div>
<div class="card-meta">心电采样</div>
</div>
</section>
<section class="cards">
<div class="card accent">
<div class="card-label">近7日平均心率</div>
<div class="card-value" id="statAvgHr">0</div>
<div class="card-meta">bpm</div>
</div>
<div class="card accent">
<div class="card-label">近7日平均呼吸率</div>
<div class="card-value" id="statAvgResp">0</div>
<div class="card-meta">次/分钟</div>
</div>
<div class="card accent">
<div class="card-label">累计步行距离</div>
<div class="card-value" id="statDistance">0</div>
<div class="card-meta">公里</div>
</div>
<div class="card accent">
<div class="card-label">最近体重</div>
<div class="card-value" id="statWeight">-</div>
<div class="card-meta" id="statWeightUnit">kg</div>
</div>
<div class="card accent">
<div class="card-label">最近身高</div>
<div class="card-value" id="statHeight">-</div>
<div class="card-meta" id="statHeightUnit">cm</div>
</div>
<div class="card accent">
<div class="card-label">近7日平均睡眠</div>
<div class="card-value" id="statSleep">-</div>
<div class="card-meta">小时</div>
</div>
<div class="card accent">
<div class="card-label">近7日站立小时</div>
<div class="card-value" id="statStand">-</div>
<div class="card-meta">小时</div>
</div>
<div class="card accent">
<div class="card-label">近7日运动分钟</div>
<div class="card-value" id="statWorkout">-</div>
<div class="card-meta">分钟</div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">心率与呼吸率趋势</div>
<canvas id="chartVitals"></canvas>
<div class="panel-foot" id="chartVitalsMeta"></div>
</div>
<div class="panel">
<div class="panel-title">体重趋势</div>
<canvas id="chartWeight"></canvas>
<div class="panel-foot" id="chartWeightMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">步行距离</div>
<canvas id="chartDistance"></canvas>
<div class="panel-foot" id="chartDistanceMeta"></div>
</div>
<div class="panel">
<div class="panel-title">高频数据类型</div>
<canvas id="chartTypes"></canvas>
<div class="panel-foot" id="chartTypesMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">睡眠与站立</div>
<canvas id="chartSleep"></canvas>
<div class="panel-foot" id="chartSleepMeta"></div>
</div>
<div class="panel">
<div class="panel-title">运动分钟趋势</div>
<canvas id="chartWorkout"></canvas>
<div class="panel-foot" id="chartWorkoutMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">睡眠分期</div>
<canvas id="chartSleepStages"></canvas>
<div class="panel-foot" id="chartSleepStagesMeta"></div>
</div>
<div class="panel">
<div class="panel-title">心脏健康</div>
<canvas id="chartHeartHealth"></canvas>
<div class="panel-foot" id="chartHeartHealthMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">类型榜单</div>
<div class="list" id="typeList"></div>
</div>
<div class="panel">
<div class="panel-title">趋势概览</div>
<div class="list" id="trendList"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">异常提醒</div>
<div class="list" id="anomalyList"></div>
</div>
<div class="panel">
<div class="panel-title">深度数据</div>
<div class="list" id="deepList"></div>
</div>
</section>
</div>
<div class="tab-page" data-tab-page="hdd">
<section class="cards">
<div class="card accent">
<div class="card-label">近7日平均心率</div>
<div class="card-value" id="hddAvgHr">-</div>
<div class="card-meta">bpm</div>
</div>
<div class="card accent">
<div class="card-label">近7日平均呼吸率</div>
<div class="card-value" id="hddAvgResp">-</div>
<div class="card-meta">次/分钟</div>
</div>
<div class="card accent">
<div class="card-label">近7日平均睡眠</div>
<div class="card-value" id="hddAvgSleep">-</div>
<div class="card-meta">小时</div>
</div>
<div class="card accent">
<div class="card-label">近7日站立小时</div>
<div class="card-value" id="hddAvgStand">-</div>
<div class="card-meta">小时</div>
</div>
<div class="card accent">
<div class="card-label">近7日运动分钟</div>
<div class="card-value" id="hddAvgWorkout">-</div>
<div class="card-meta">分钟</div>
</div>
<div class="card accent">
<div class="card-label">近周期步行距离</div>
<div class="card-value" id="hddDistance">-</div>
<div class="card-meta">公里</div>
</div>
<div class="card accent">
<div class="card-label">近周期静息心率</div>
<div class="card-value" id="hddRestingHr">-</div>
<div class="card-meta">bpm</div>
</div>
<div class="card accent">
<div class="card-label">近周期 HRV</div>
<div class="card-value" id="hddHrv">-</div>
<div class="card-meta">ms</div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">心肺趋势</div>
<canvas id="chartHddVitals"></canvas>
<div class="panel-foot" id="chartHddVitalsMeta"></div>
</div>
<div class="panel">
<div class="panel-title">活动趋势</div>
<canvas id="chartHddActivity"></canvas>
<div class="panel-foot" id="chartHddActivityMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">睡眠分期</div>
<canvas id="chartHddSleepStages"></canvas>
<div class="panel-foot" id="chartHddSleepStagesMeta"></div>
</div>
<div class="panel">
<div class="panel-title">步行距离</div>
<canvas id="chartHddDistance"></canvas>
<div class="panel-foot" id="chartHddDistanceMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">类型榜单</div>
<div class="list" id="hddTypeList"></div>
</div>
<div class="panel">
<div class="panel-title">趋势概览</div>
<div class="list" id="hddTrendList"></div>
</div>
</section>
</div>
<div class="tab-page" data-tab-page="aha">
<section class="cards">
<div class="card accent">
<div class="card-label">近周期静息心率</div>
<div class="card-value" id="ahaRestingHr">-</div>
<div class="card-meta">bpm</div>
</div>
<div class="card accent">
<div class="card-label">近周期步行心率</div>
<div class="card-value" id="ahaWalkingHr">-</div>
<div class="card-meta">bpm</div>
</div>
<div class="card accent">
<div class="card-label">近周期 HRV</div>
<div class="card-value" id="ahaHrv">-</div>
<div class="card-meta">ms</div>
</div>
<div class="card accent">
<div class="card-label">REM 占比</div>
<div class="card-value" id="ahaRemPct">-</div>
<div class="card-meta">%</div>
</div>
<div class="card accent">
<div class="card-label">深睡占比</div>
<div class="card-value" id="ahaDeepPct">-</div>
<div class="card-meta">%</div>
</div>
<div class="card accent">
<div class="card-label">体重变化</div>
<div class="card-value" id="ahaWeightDelta">-</div>
<div class="card-meta">kg</div>
</div>
<div class="card accent">
<div class="card-label">运动分钟总量</div>
<div class="card-value" id="ahaWorkoutTotal">-</div>
<div class="card-meta">分钟</div>
</div>
<div class="card accent">
<div class="card-label">异常心率次数</div>
<div class="card-value" id="ahaAnomalyCount">-</div>
<div class="card-meta">次</div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">心脏恢复趋势</div>
<canvas id="chartAhaHeart"></canvas>
<div class="panel-foot" id="chartAhaHeartMeta"></div>
</div>
<div class="panel">
<div class="panel-title">睡眠结构</div>
<canvas id="chartAhaSleepStages"></canvas>
<div class="panel-foot" id="chartAhaSleepStagesMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">体重趋势</div>
<canvas id="chartAhaWeight"></canvas>
<div class="panel-foot" id="chartAhaWeightMeta"></div>
</div>
<div class="panel">
<div class="panel-title">运动分钟</div>
<canvas id="chartAhaWorkout"></canvas>
<div class="panel-foot" id="chartAhaWorkoutMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">异常提醒</div>
<div class="list" id="ahaAnomalyList"></div>
</div>
<div class="panel">
<div class="panel-title">深度数据</div>
<div class="list" id="ahaDeepList"></div>
</div>
</section>
</div>
<div class="tab-page" data-tab-page="grafana">
<section class="cards">
<div class="card accent">
<div class="card-label">近7日平均心率</div>
<div class="card-value" id="grafanaAvgHr">-</div>
<div class="card-meta">bpm</div>
</div>
<div class="card accent">
<div class="card-label">近7日平均呼吸率</div>
<div class="card-value" id="grafanaAvgResp">-</div>
<div class="card-meta">次/分钟</div>
</div>
<div class="card accent">
<div class="card-label">近7日平均睡眠</div>
<div class="card-value" id="grafanaAvgSleep">-</div>
<div class="card-meta">小时</div>
</div>
<div class="card accent">
<div class="card-label">近7日运动分钟</div>
<div class="card-value" id="grafanaAvgWorkout">-</div>
<div class="card-meta">分钟</div>
</div>
<div class="card accent">
<div class="card-label">近7日站立小时</div>
<div class="card-value" id="grafanaAvgStand">-</div>
<div class="card-meta">小时</div>
</div>
<div class="card accent">
<div class="card-label">近周期步行距离</div>
<div class="card-value" id="grafanaDistance">-</div>
<div class="card-meta">公里</div>
</div>
<div class="card accent">
<div class="card-label">运动路线</div>
<div class="card-value" id="grafanaRoutes">-</div>
<div class="card-meta">GPS 轨迹</div>
</div>
<div class="card accent">
<div class="card-label">ECG 记录</div>
<div class="card-value" id="grafanaEcg">-</div>
<div class="card-meta">心电采样</div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">整体活动</div>
<canvas id="chartGrafanaActivity"></canvas>
<div class="panel-foot" id="chartGrafanaActivityMeta"></div>
</div>
<div class="panel">
<div class="panel-title">睡眠分期</div>
<canvas id="chartGrafanaSleepStages"></canvas>
<div class="panel-foot" id="chartGrafanaSleepStagesMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">心脏恢复</div>
<canvas id="chartGrafanaHeart"></canvas>
<div class="panel-foot" id="chartGrafanaHeartMeta"></div>
</div>
<div class="panel">
<div class="panel-title">指标分布</div>
<canvas id="chartGrafanaTypes"></canvas>
<div class="panel-foot" id="chartGrafanaTypesMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">路线地图</div>
<canvas id="chartGrafanaRouteMap"></canvas>
<div class="panel-foot" id="chartGrafanaRouteMapMeta"></div>
</div>
<div class="panel">
<div class="panel-title">睡眠占比</div>
<canvas id="chartGrafanaSleepPct"></canvas>
<div class="panel-foot" id="chartGrafanaSleepPctMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">类型榜单</div>
<div class="list" id="grafanaTypeList"></div>
</div>
<div class="panel">
<div class="panel-title">趋势概览</div>
<div class="list" id="grafanaTrendList"></div>
</div>
</section>
</div>
<div class="tab-page" data-tab-page="dhd">
<section class="cards">
<div class="card accent">
<div class="card-label">近7日平均心率</div>
<div class="card-value" id="dhdAvgHr">-</div>
<div class="card-meta">bpm</div>
</div>
<div class="card accent">
<div class="card-label">近7日平均呼吸率</div>
<div class="card-value" id="dhdAvgResp">-</div>
<div class="card-meta">次/分钟</div>
</div>
<div class="card accent">
<div class="card-label">近周期静息心率</div>
<div class="card-value" id="dhdRestingHr">-</div>
<div class="card-meta">bpm</div>
</div>
<div class="card accent">
<div class="card-label">近周期步行心率</div>
<div class="card-value" id="dhdWalkingHr">-</div>
<div class="card-meta">bpm</div>
</div>
<div class="card accent">
<div class="card-label">近周期 HRV</div>
<div class="card-value" id="dhdHrv">-</div>
<div class="card-meta">ms</div>
</div>
<div class="card accent">
<div class="card-label">累计步行距离</div>
<div class="card-value" id="dhdDistance">-</div>
<div class="card-meta">公里</div>
</div>
<div class="card accent">
<div class="card-label">最近体重</div>
<div class="card-value" id="dhdWeight">-</div>
<div class="card-meta" id="dhdWeightUnit">kg</div>
</div>
<div class="card accent">
<div class="card-label">近7日平均睡眠</div>
<div class="card-value" id="dhdAvgSleep">-</div>
<div class="card-meta">小时</div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">心肺趋势</div>
<canvas id="chartDhdVitals"></canvas>
<div class="panel-foot" id="chartDhdVitalsMeta"></div>
</div>
<div class="panel">
<div class="panel-title">恢复趋势</div>
<canvas id="chartDhdRecovery"></canvas>
<div class="panel-foot" id="chartDhdRecoveryMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">睡眠时长</div>
<canvas id="chartDhdSleep"></canvas>
<div class="panel-foot" id="chartDhdSleepMeta"></div>
</div>
<div class="panel">
<div class="panel-title">步行距离</div>
<canvas id="chartDhdDistance"></canvas>
<div class="panel-foot" id="chartDhdDistanceMeta"></div>
</div>
</section>
<section class="grid">
<div class="panel">
<div class="panel-title">类型榜单</div>
<div class="list" id="dhdTypeList"></div>
</div>
<div class="panel">
<div class="panel-title">异常提醒</div>
<div class="list" id="dhdAnomalyList"></div>
</div>
</section>
</div>
</div>
<script src="app.js"></script>
</body>
</html>