zhangyan/cmr-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine telemetry-driven HUD and fitness feedback

Browse Source
This commit is contained in:
zhangyan
2026-03-24 11:24:50 +08:00
parent 2c03d1a702
commit a117a25824
12 changed files with 2071 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
miniprogram/pages/map/map.ts
View File

@@ -17,6 +17,7 @@ type MapPageData = MapEngineViewState & {
showDebugPanel: boolean
statusBarHeight: number
topInsetHeight: number
hudPanelIndex: number
panelTimerText: string
panelMileageText: string
panelDistanceValueText: string
@@ -29,7 +30,7 @@ type MapPageData = MapEngineViewState & {
showRightButtonGroups: boolean
showBottomDebugButton: boolean
}
const INTERNAL_BUILD_VERSION = 'map-build-134'
const INTERNAL_BUILD_VERSION = 'map-build-157'
const REMOTE_GAME_CONFIG_URL = 'https://oss-mbh5.colormaprun.com/wxmini/test/game.json'
let mapEngine: MapEngine | null = null
function buildSideButtonVisibility(mode: SideButtonMode) {
@@ -94,12 +95,28 @@ Page({
showDebugPanel: false,
statusBarHeight: 0,
topInsetHeight: 12,
hudPanelIndex: 0,
panelTimerText: '00:00:00',
panelMileageText: '0m',
panelDistanceValueText: '108',
panelDistanceValueText: '--',
panelDistanceUnitText: '',
panelProgressText: '0/0',
gameSessionStatus: 'idle',
panelSpeedValueText: '0',
panelTelemetryTone: 'blue',
panelHeartRateZoneNameText: '--',
panelHeartRateZoneRangeText: '',
heartRateConnected: false,
heartRateStatusText: '心率带未连接',
heartRateDeviceText: '--',
panelHeartRateValueText: '--',
panelHeartRateUnitText: '',
panelCaloriesValueText: '0',
panelCaloriesUnitText: 'kcal',
panelAverageSpeedValueText: '0',
panelAverageSpeedUnitText: 'km/h',
panelAccuracyValueText: '--',
panelAccuracyUnitText: '',
punchButtonText: '打点',
punchButtonEnabled: false,
punchHintText: '等待进入检查点范围',
@@ -140,12 +157,28 @@ Page({
showDebugPanel: false,
statusBarHeight,
topInsetHeight: Math.max(statusBarHeight + 12, menuButtonBottom + 20),
hudPanelIndex: 0,
panelTimerText: '00:00:00',
panelMileageText: '0m',
panelDistanceValueText: '108',
panelDistanceValueText: '--',
panelDistanceUnitText: '',
panelProgressText: '0/0',
gameSessionStatus: 'idle',
panelSpeedValueText: '0',
panelTelemetryTone: 'blue',
panelHeartRateZoneNameText: '--',
panelHeartRateZoneRangeText: '',
heartRateConnected: false,
heartRateStatusText: '心率带未连接',
heartRateDeviceText: '--',
panelHeartRateValueText: '--',
panelHeartRateUnitText: '',
panelCaloriesValueText: '0',
panelCaloriesUnitText: 'kcal',
panelAverageSpeedValueText: '0',
panelAverageSpeedUnitText: 'km/h',
panelAccuracyValueText: '--',
panelAccuracyUnitText: '',
punchButtonText: '打点',
punchButtonEnabled: false,
punchHintText: '等待进入检查点范围',
@@ -201,10 +234,10 @@ Page({
return
}
const errorMessage = error && error.message ? error.message : '鏈煡閿欒'
const errorMessage = error && error.message ? error.message : '未知错误'
this.setData({
configStatusText: `杞藉叆澶辫触: ${errorMessage}`,
statusText: `杩滅▼鍦板浘閰嶇疆杞藉叆澶辫触: ${errorMessage} (${INTERNAL_BUILD_VERSION})`,
configStatusText: `载入失败: ${errorMessage}`,
statusText: `远程地图配置载入失败: ${errorMessage} (${INTERNAL_BUILD_VERSION})`,
})
})
},
@@ -235,7 +268,7 @@ Page({
const labelCanvasRef = canvasRes[1] as any
if (!canvasRef || !canvasRef.node) {
page.setData({
statusText: `WebGL 寮曟搸鍒濆鍖栧け璐?(${INTERNAL_BUILD_VERSION})`,
statusText: `WebGL 引擎初始化失败 (${INTERNAL_BUILD_VERSION})`,
})
return
}
@@ -343,6 +376,60 @@ Page({
}
},
handleConnectHeartRate() {
if (mapEngine) {
mapEngine.handleConnectHeartRate()
}
},
handleDisconnectHeartRate() {
if (mapEngine) {
mapEngine.handleDisconnectHeartRate()
}
},
handleDebugHeartRateBlue() {
if (mapEngine) {
mapEngine.handleDebugHeartRateTone('blue')
}
},
handleDebugHeartRatePurple() {
if (mapEngine) {
mapEngine.handleDebugHeartRateTone('purple')
}
},
handleDebugHeartRateGreen() {
if (mapEngine) {
mapEngine.handleDebugHeartRateTone('green')
}
},
handleDebugHeartRateYellow() {
if (mapEngine) {
mapEngine.handleDebugHeartRateTone('yellow')
}
},
handleDebugHeartRateOrange() {
if (mapEngine) {
mapEngine.handleDebugHeartRateTone('orange')
}
},
handleDebugHeartRateRed() {
if (mapEngine) {
mapEngine.handleDebugHeartRateTone('red')
}
},
handleClearDebugHeartRate() {
if (mapEngine) {
mapEngine.handleClearDebugHeartRate()
}
},
handleToggleOsmReference() {
if (mapEngine) {
mapEngine.handleToggleOsmReference()
@@ -373,6 +460,12 @@ Page({
}
},
handleHudPanelChange(event: WechatMiniprogram.CustomEvent<{ current: number }>) {
this.setData({
hudPanelIndex: event.detail.current || 0,
})
},
handleCycleSideButtons() {
this.setData(buildSideButtonVisibility(getNextSideButtonMode(this.data.sideButtonMode)))
},

476
miniprogram/pages/map/map.wxml
View File

@@ -1,4 +1,8 @@
<view class="page">
<view
class="app-edge-glow app-edge-glow--{{panelTelemetryTone}}"
wx:if="{{panelTelemetryTone === 'orange' || panelTelemetryTone === 'red'}}"
></view>
<view
class="map-stage"
catchtouchstart="handleTouchStart"
@@ -114,185 +118,343 @@
<cover-view class="screen-button-layer__text">调试</cover-view>
</cover-view>
<view class="race-panel">
<view class="race-panel__tag race-panel__tag--top-left">目标</view>
<view class="race-panel__tag race-panel__tag--top-right">里程</view>
<view class="race-panel__tag race-panel__tag--bottom-left">点距</view>
<view class="race-panel__tag race-panel__tag--bottom-right">速度</view>
<swiper class="race-panel-swiper" current="{{hudPanelIndex}}" bindchange="handleHudPanelChange" duration="220" easing-function="easeOutCubic">
<swiper-item>
<view class="race-panel race-panel--tone-{{panelTelemetryTone}}">
<view class="race-panel__tag race-panel__tag--top-left">目标</view>
<view class="race-panel__tag race-panel__tag--top-right">里程</view>
<view class="race-panel__tag race-panel__tag--bottom-left">点距</view>
<view class="race-panel__tag race-panel__tag--bottom-right">速度</view>
<view class="race-panel__line race-panel__line--center"></view>
<view class="race-panel__line race-panel__line--left-mid"></view>
<view class="race-panel__line race-panel__line--right-mid"></view>
<view class="race-panel__line race-panel__line--left-top"></view>
<view class="race-panel__line race-panel__line--left-bottom"></view>
<view class="race-panel__line race-panel__line--right-top"></view>
<view class="race-panel__line race-panel__line--right-bottom"></view>
<view class="race-panel__line race-panel__line--center"></view>
<view class="race-panel__line race-panel__line--left-mid"></view>
<view class="race-panel__line race-panel__line--right-mid"></view>
<view class="race-panel__line race-panel__line--left-top"></view>
<view class="race-panel__line race-panel__line--left-bottom"></view>
<view class="race-panel__line race-panel__line--right-top"></view>
<view class="race-panel__line race-panel__line--right-bottom"></view>
<view class="race-panel__grid">
<view class="race-panel__cell race-panel__cell--action">
<view class="race-panel__action-button"><!-- status only -->
<view class="race-panel__action-button-text">{{punchButtonText}}</view>
</view>
</view>
<view class="race-panel__cell race-panel__cell--timer">
<text class="race-panel__timer">{{panelTimerText}}</text>
</view>
<view class="race-panel__cell race-panel__cell--mileage">
<view class="race-panel__mileage-wrap">
<text class="race-panel__mileage">{{panelMileageText}}</text>
<view class="race-panel__chevrons">
<view class="race-panel__chevron"></view>
<view class="race-panel__chevron race-panel__chevron--offset"></view>
<view class="race-panel__grid">
<view class="race-panel__cell race-panel__cell--action">
<view class="race-panel__action-button"><!-- status only -->
<view class="race-panel__action-button-text">{{punchButtonText}}</view>
</view>
</view>
<view class="race-panel__cell race-panel__cell--timer">
<text class="race-panel__timer">{{panelTimerText}}</text>
</view>
<view class="race-panel__cell race-panel__cell--mileage">
<view class="race-panel__mileage-wrap">
<text class="race-panel__mileage">{{panelMileageText}}</text>
<view class="race-panel__chevrons">
<view class="race-panel__chevron"></view>
<view class="race-panel__chevron race-panel__chevron--offset"></view>
</view>
</view>
</view>
<view class="race-panel__cell race-panel__cell--distance">
<view class="race-panel__metric-group race-panel__metric-group--left">
<text class="race-panel__metric-value race-panel__metric-value--distance">{{panelDistanceValueText}}</text>
<text class="race-panel__metric-unit race-panel__metric-unit--distance">{{panelDistanceUnitText}}</text>
</view>
</view>
<view class="race-panel__cell race-panel__cell--progress">
<text class="race-panel__progress">{{panelProgressText}}</text>
</view>
<view class="race-panel__cell race-panel__cell--speed">
<view class="race-panel__metric-group race-panel__metric-group--right">
<text class="race-panel__metric-value race-panel__metric-value--speed">{{panelSpeedValueText}}</text>
<text class="race-panel__metric-unit race-panel__metric-unit--speed">km/h</text>
</view>
</view>
</view>
</view>
<view class="race-panel__cell race-panel__cell--distance">
<view class="race-panel__metric-group race-panel__metric-group--left">
<text class="race-panel__metric-value race-panel__metric-value--distance">{{panelDistanceValueText}}</text>
<text class="race-panel__metric-unit race-panel__metric-unit--distance">m</text>
</swiper-item>
<swiper-item>
<view class="race-panel race-panel--tone-{{panelTelemetryTone}}">
<view class="race-panel__tag race-panel__tag--top-left">心率</view>
<view class="race-panel__tag race-panel__tag--top-right">卡路里</view>
<view class="race-panel__tag race-panel__tag--bottom-left">均速</view>
<view class="race-panel__tag race-panel__tag--bottom-right">精度</view>
<view class="race-panel__line race-panel__line--center"></view>
<view class="race-panel__line race-panel__line--left-mid"></view>
<view class="race-panel__line race-panel__line--right-mid"></view>
<view class="race-panel__line race-panel__line--left-top"></view>
<view class="race-panel__line race-panel__line--left-bottom"></view>
<view class="race-panel__line race-panel__line--right-top"></view>
<view class="race-panel__line race-panel__line--right-bottom"></view>
<view class="race-panel__grid">
<view class="race-panel__cell race-panel__cell--action">
<view class="race-panel__metric-group race-panel__metric-group--left race-panel__metric-group--panel">
<text class="race-panel__metric-value race-panel__metric-value--telemetry">{{panelHeartRateValueText}}</text>
<text class="race-panel__metric-unit race-panel__metric-unit--telemetry">{{panelHeartRateUnitText}}</text>
</view>
</view>
<view class="race-panel__cell race-panel__cell--timer">
<text class="race-panel__timer">{{panelTimerText}}</text>
</view>
<view class="race-panel__cell race-panel__cell--mileage">
<view class="race-panel__metric-group race-panel__metric-group--right race-panel__metric-group--panel">
<text class="race-panel__metric-value race-panel__metric-value--telemetry">{{panelCaloriesValueText}}</text>
<text class="race-panel__metric-unit race-panel__metric-unit--telemetry">{{panelCaloriesUnitText}}</text>
</view>
</view>
<view class="race-panel__cell race-panel__cell--distance">
<view class="race-panel__metric-group race-panel__metric-group--left race-panel__metric-group--panel">
<text class="race-panel__metric-value race-panel__metric-value--telemetry-secondary">{{panelAverageSpeedValueText}}</text>
<text class="race-panel__metric-unit race-panel__metric-unit--telemetry">{{panelAverageSpeedUnitText}}</text>
</view>
</view>
<view class="race-panel__cell race-panel__cell--progress">
<view class="race-panel__zone">
<text class="race-panel__zone-name">{{panelHeartRateZoneNameText}}</text>
<text class="race-panel__zone-range">{{panelHeartRateZoneRangeText}}</text>
</view>
</view>
<view class="race-panel__cell race-panel__cell--speed">
<view class="race-panel__metric-group race-panel__metric-group--right race-panel__metric-group--panel">
<text class="race-panel__metric-value race-panel__metric-value--telemetry-secondary">{{panelAccuracyValueText}}</text>
<text class="race-panel__metric-unit race-panel__metric-unit--telemetry">{{panelAccuracyUnitText}}</text>
</view>
</view>
</view>
</view>
<view class="race-panel__cell race-panel__cell--progress">
<text class="race-panel__progress">{{panelProgressText}}</text>
</view>
<view class="race-panel__cell race-panel__cell--speed">
<view class="race-panel__metric-group race-panel__metric-group--right">
<text class="race-panel__metric-value race-panel__metric-value--speed">{{panelSpeedValueText}}</text>
<text class="race-panel__metric-unit race-panel__metric-unit--speed">km/h</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="race-panel-pager" wx:if="{{!showDebugPanel}}">
<view class="race-panel-pager__dot {{hudPanelIndex === 0 ? 'race-panel-pager__dot--active' : ''}}"></view>
<view class="race-panel-pager__dot {{hudPanelIndex === 1 ? 'race-panel-pager__dot--active' : ''}}"></view>
</view>
<view class="debug-modal" wx:if="{{showDebugPanel}}" bindtap="handleCloseDebugPanel">
<view class="debug-modal__dialog" catchtap="handleDebugPanelTap">
<view class="debug-modal__header">
<view>
<view class="debug-modal__header-main">
<view class="debug-modal__eyebrow">DEBUG PANEL</view>
<view class="debug-modal__title">地图调试信息</view>
<view class="debug-modal__build">{{buildVersion}}</view>
</view>
<view class="debug-modal__header-actions">
<view class="debug-modal__close" bindtap="handleCloseDebugPanel">关闭</view>
</view>
<view class="debug-modal__close" bindtap="handleCloseDebugPanel">关闭</view>
</view>
<scroll-view class="debug-modal__content" scroll-y enhanced show-scrollbar="true">
<view class="info-panel__row">
<text class="info-panel__label">Build</text>
<text class="info-panel__value">{{buildVersion}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Config</text>
<text class="info-panel__value">{{configStatusText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Heading Mode</text>
<text class="info-panel__value">{{orientationModeText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Sensor Heading</text>
<text class="info-panel__value">{{sensorHeadingText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">North Ref</text>
<text class="info-panel__value">{{northReferenceText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Zoom</text>
<text class="info-panel__value">{{zoom}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Rotation</text>
<text class="info-panel__value">{{rotationText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Status</text>
<text class="info-panel__value">{{statusText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">GPS</text>
<text class="info-panel__value">{{gpsTrackingText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">GPS Coord</text>
<text class="info-panel__value">{{gpsCoordText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Renderer</text>
<text class="info-panel__value">{{renderMode}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Projection</text>
<text class="info-panel__value">{{projectionMode}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Auto Source</text>
<text class="info-panel__value">{{autoRotateSourceText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Calibration</text>
<text class="info-panel__value">{{autoRotateCalibrationText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Tile URL</text>
<text class="info-panel__value">{{tileSource}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Center Tile</text>
<text class="info-panel__value">{{centerText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Tile Size</text>
<text class="info-panel__value">{{tileSizePx}}px</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Visible Tiles</text>
<text class="info-panel__value">{{visibleTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Ready Tiles</text>
<text class="info-panel__value">{{readyTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Memory Tiles</text>
<text class="info-panel__value">{{memoryTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Disk Tiles</text>
<text class="info-panel__value">{{diskTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Cache Hit</text>
<text class="info-panel__value">{{cacheHitRateText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Disk Hits</text>
<text class="info-panel__value">{{diskHitCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Net Fetches</text>
<text class="info-panel__value">{{networkFetchCount}}</text>
<view class="debug-section">
<view class="debug-section__header">
<view class="debug-section__title">Session</view>
<view class="debug-section__desc">当前局状态与主流程控制</view>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Game</text>
<text class="info-panel__value">{{gameSessionStatus}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Progress</text>
<text class="info-panel__value">{{panelProgressText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Timer</text>
<text class="info-panel__value">{{panelTimerText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Punch Hint</text>
<text class="info-panel__value">{{punchHintText}}</text>
</view>
<view class="control-row">
<view class="control-chip control-chip--primary" bindtap="handleRecenter">回到首屏</view>
<view class="control-chip control-chip--secondary" bindtap="handleRotationReset">旋转归零</view>
</view>
</view>
<view class="control-row">
<view class="control-chip control-chip--primary" bindtap="handleRecenter">回到首屏</view>
<view class="control-chip control-chip--secondary" bindtap="handleRotationReset">旋转归零</view>
<view class="debug-section">
<view class="debug-section__header">
<view class="debug-section__title">Sensors</view>
<view class="debug-section__desc">定位、罗盘与心率带连接状态</view>
</view>
<view class="info-panel__row">
<text class="info-panel__label">GPS</text>
<text class="info-panel__value">{{gpsTrackingText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">GPS Coord</text>
<text class="info-panel__value">{{gpsCoordText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Heart Rate</text>
<text class="info-panel__value">{{heartRateStatusText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">HR Device</text>
<text class="info-panel__value">{{heartRateDeviceText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Heading Mode</text>
<text class="info-panel__value">{{orientationModeText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Sensor Heading</text>
<text class="info-panel__value">{{sensorHeadingText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">North Ref</text>
<text class="info-panel__value">{{northReferenceText}}</text>
</view>
<view class="control-row">
<view class="control-chip {{gpsTracking ? 'control-chip--active' : 'control-chip--secondary'}}" bindtap="handleToggleGpsTracking">{{gpsTracking ? '停止定位' : '开启定位'}}</view>
<view class="control-chip {{heartRateConnected ? 'control-chip--active' : 'control-chip--secondary'}}" bindtap="handleConnectHeartRate">{{heartRateConnected ? '心率带已连接' : '连接心率带'}}</view>
</view>
<view class="control-row">
<view class="control-chip control-chip--secondary" bindtap="handleDisconnectHeartRate">断开心率带</view>
<view class="control-chip control-chip--secondary" bindtap="handleCycleNorthReferenceMode">{{northReferenceButtonText}}</view>
</view>
</view>
<view class="control-row">
<view class="control-chip {{gpsTracking ? 'control-chip--active' : 'control-chip--secondary'}}" bindtap="handleToggleGpsTracking">{{gpsTracking ? '停止定位' : '开启定位'}}</view>
<view class="control-chip {{osmReferenceEnabled ? 'control-chip--active' : 'control-chip--secondary'}}" bindtap="handleToggleOsmReference">{{osmReferenceText}}</view>
<view class="debug-section">
<view class="debug-section__header">
<view class="debug-section__title">Telemetry</view>
<view class="debug-section__desc">HUD 派生数据与心率颜色测试</view>
</view>
<view class="info-panel__row">
<text class="info-panel__label">HR</text>
<text class="info-panel__value">{{panelHeartRateValueText}} {{panelHeartRateUnitText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">HR Zone</text>
<text class="info-panel__value">{{panelHeartRateZoneNameText}} {{panelHeartRateZoneRangeText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Calories</text>
<text class="info-panel__value">{{panelCaloriesValueText}} {{panelCaloriesUnitText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Speed</text>
<text class="info-panel__value">{{panelSpeedValueText}} km/h</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Avg Speed</text>
<text class="info-panel__value">{{panelAverageSpeedValueText}} {{panelAverageSpeedUnitText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Target Dist</text>
<text class="info-panel__value">{{panelDistanceValueText}} {{panelDistanceUnitText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Accuracy</text>
<text class="info-panel__value">{{panelAccuracyValueText}} {{panelAccuracyUnitText}}</text>
</view>
<view class="control-row control-row--triple">
<view class="control-chip control-chip--secondary" bindtap="handleDebugHeartRateBlue">蓝</view>
<view class="control-chip control-chip--secondary" bindtap="handleDebugHeartRatePurple">紫</view>
<view class="control-chip control-chip--secondary" bindtap="handleDebugHeartRateGreen">绿</view>
</view>
<view class="control-row control-row--triple">
<view class="control-chip control-chip--secondary" bindtap="handleDebugHeartRateYellow">黄</view>
<view class="control-chip control-chip--secondary" bindtap="handleDebugHeartRateOrange">橙</view>
<view class="control-chip control-chip--secondary" bindtap="handleDebugHeartRateRed">红</view>
</view>
<view class="control-row">
<view class="control-chip control-chip--secondary" bindtap="handleClearDebugHeartRate">清除</view>
</view>
</view>
<view class="control-row control-row--triple">
<view class="control-chip {{orientationMode === 'manual' ? 'control-chip--active' : ''}}" bindtap="handleSetManualMode">手动</view>
<view class="control-chip {{orientationMode === 'north-up' ? 'control-chip--active' : ''}}" bindtap="handleSetNorthUpMode">北朝上</view>
<view class="control-chip {{orientationMode === 'heading-up' ? 'control-chip--active' : ''}}" bindtap="handleSetHeadingUpMode">朝向朝上</view>
<view class="debug-section">
<view class="debug-section__header">
<view class="debug-section__title">Rendering</view>
<view class="debug-section__desc">地图渲染、视角与参考图层</view>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Renderer</text>
<text class="info-panel__value">{{renderMode}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Projection</text>
<text class="info-panel__value">{{projectionMode}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Zoom</text>
<text class="info-panel__value">{{zoom}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Rotation</text>
<text class="info-panel__value">{{rotationText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Auto Source</text>
<text class="info-panel__value">{{autoRotateSourceText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Calibration</text>
<text class="info-panel__value">{{autoRotateCalibrationText}}</text>
</view>
<view class="control-row">
<view class="control-chip {{osmReferenceEnabled ? 'control-chip--active' : 'control-chip--secondary'}}" bindtap="handleToggleOsmReference">{{osmReferenceText}}</view>
<view class="control-chip" wx:if="{{orientationMode === 'manual'}}" bindtap="handleRotateStep">旋转 +15°</view>
</view>
<view class="control-row control-row--triple">
<view class="control-chip {{orientationMode === 'manual' ? 'control-chip--active' : ''}}" bindtap="handleSetManualMode">手动</view>
<view class="control-chip {{orientationMode === 'north-up' ? 'control-chip--active' : ''}}" bindtap="handleSetNorthUpMode">北朝上</view>
<view class="control-chip {{orientationMode === 'heading-up' ? 'control-chip--active' : ''}}" bindtap="handleSetHeadingUpMode">朝向朝上</view>
</view>
<view class="control-row" wx:if="{{orientationMode === 'heading-up'}}">
<view class="control-chip" bindtap="handleAutoRotateCalibrate">按当前方向校准</view>
</view>
</view>
<view class="control-row">
<view class="control-chip control-chip--secondary" bindtap="handleCycleNorthReferenceMode">{{northReferenceButtonText}}</view>
</view>
<view class="control-row" wx:if="{{orientationMode === 'heading-up'}}">
<view class="control-chip" bindtap="handleAutoRotateCalibrate">按当前方向校准</view>
</view>
<view class="control-row" wx:if="{{orientationMode === 'manual'}}">
<view class="control-chip" bindtap="handleRotateStep">旋转 +15°</view>
<view class="debug-section">
<view class="debug-section__header">
<view class="debug-section__title">Diagnostics</view>
<view class="debug-section__desc">配置、瓦片缓存与运行状态</view>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Config</text>
<text class="info-panel__value">{{configStatusText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Status</text>
<text class="info-panel__value">{{statusText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Tile URL</text>
<text class="info-panel__value">{{tileSource}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Center Tile</text>
<text class="info-panel__value">{{centerText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Tile Size</text>
<text class="info-panel__value">{{tileSizePx}}px</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Visible Tiles</text>
<text class="info-panel__value">{{visibleTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Ready Tiles</text>
<text class="info-panel__value">{{readyTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Memory Tiles</text>
<text class="info-panel__value">{{memoryTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Disk Tiles</text>
<text class="info-panel__value">{{diskTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Cache Hit</text>
<text class="info-panel__value">{{cacheHitRateText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Disk Hits</text>
<text class="info-panel__value">{{diskHitCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Net Fetches</text>
<text class="info-panel__value">{{networkFetchCount}}</text>
</view>
</view>
</scroll-view>
</view>

248
miniprogram/pages/map/map.wxss
View File

@@ -6,6 +6,22 @@
color: #163020;
}
.app-edge-glow {
position: absolute;
inset: 0;
border-radius: 0;
pointer-events: none;
z-index: 40;
}
.app-edge-glow--orange {
animation: app-edge-breathe-orange 1.55s ease-in-out infinite;
}
.app-edge-glow--red {
animation: app-edge-breathe-red 1.15s ease-in-out infinite;
}
.map-stage {
position: absolute;
inset: 0;
@@ -534,18 +550,115 @@
font-weight: 700;
text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.24);
}
.race-panel {
.race-panel-swiper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 216rpx;
background: linear-gradient(180deg, #1d97ec 0%, #168ce4 100%);
box-shadow: 0 -10rpx 24rpx rgba(10, 75, 125, 0.2);
z-index: 15;
}
.race-panel {
position: relative;
height: 100%;
background: linear-gradient(180deg, #1d8fd2 0%, #197dba 100%);
box-shadow: 0 -10rpx 24rpx rgba(18, 101, 150, 0.2);
overflow: hidden;
}
.race-panel--tone-blue {
background: linear-gradient(180deg, #1d8fd2 0%, #197dba 100%);
box-shadow: 0 -10rpx 24rpx rgba(18, 101, 150, 0.22);
}
.race-panel--tone-purple {
background: linear-gradient(180deg, #5317d4 0%, #4310b7 100%);
box-shadow: 0 -10rpx 24rpx rgba(58, 16, 145, 0.24);
}
.race-panel--tone-green {
background: linear-gradient(180deg, #08c805 0%, #05ab03 100%);
box-shadow: 0 -10rpx 24rpx rgba(6, 112, 9, 0.24);
}
.race-panel--tone-yellow {
background: linear-gradient(180deg, #ffbf1f 0%, #ffad0f 100%);
box-shadow: 0 -10rpx 24rpx rgba(163, 105, 0, 0.24);
}
.race-panel--tone-yellow .race-panel__cell,
.race-panel--tone-yellow .race-panel__tag,
.race-panel--tone-orange .race-panel__tag,
.race-panel--tone-red .race-panel__tag {
color: #fff;
}
.race-panel--tone-orange {
background: linear-gradient(180deg, #ff7b12 0%, #ff6500 100%);
box-shadow: 0 -10rpx 24rpx rgba(156, 68, 0, 0.26);
}
.race-panel--tone-red {
background: linear-gradient(180deg, #e1122c 0%, #c90e27 100%);
box-shadow: 0 -10rpx 24rpx rgba(141, 16, 38, 0.28);
}
@keyframes app-edge-breathe-orange {
0%,
100% {
box-shadow:
inset 0 0 22rpx 6rpx rgba(255, 123, 18, 0.12),
inset 0 0 54rpx 14rpx rgba(255, 148, 46, 0.06);
}
50% {
box-shadow:
inset 0 0 34rpx 12rpx rgba(255, 133, 36, 0.24),
inset 0 0 78rpx 24rpx rgba(255, 160, 78, 0.12);
}
}
@keyframes app-edge-breathe-red {
0%,
100% {
box-shadow:
inset 0 0 24rpx 7rpx rgba(225, 18, 44, 0.14),
inset 0 0 58rpx 16rpx rgba(233, 44, 67, 0.07);
}
50% {
box-shadow:
inset 0 0 38rpx 14rpx rgba(233, 44, 67, 0.28),
inset 0 0 86rpx 26rpx rgba(241, 82, 104, 0.14);
}
}
.race-panel-pager {
position: absolute;
left: 50%;
bottom: 18rpx;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10rpx;
z-index: 16;
pointer-events: none;
}
.race-panel-pager__dot {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 0 0 2rpx rgba(255, 255, 255, 0.08);
}
.race-panel-pager__dot--active {
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 0 4rpx rgba(255, 255, 255, 0.12);
}
.race-panel__grid {
position: relative;
z-index: 2;
@@ -678,6 +791,16 @@
font-weight: 400;
}
.race-panel__metric-value--telemetry {
font-size: 46rpx;
font-weight: 600;
}
.race-panel__metric-value--telemetry-secondary {
font-size: 42rpx;
font-weight: 500;
}
.race-panel__metric-unit {
line-height: 1;
margin-left: 6rpx;
@@ -694,6 +817,11 @@
font-weight: 500;
}
.race-panel__metric-unit--telemetry {
font-size: 18rpx;
font-weight: 600;
}
.race-panel__progress {
max-width: 100%;
box-sizing: border-box;
@@ -703,6 +831,31 @@
text-shadow: 0 2rpx 0 rgba(255, 255, 255, 0.16);
}
.race-panel__zone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6rpx;
max-width: calc(100% - 12rpx);
text-align: center;
}
.race-panel__zone-name {
font-size: 32rpx;
line-height: 1.08;
font-weight: 700;
color: #ffffff;
text-shadow: 0 2rpx 0 rgba(255, 255, 255, 0.14);
}
.race-panel__zone-range {
font-size: 20rpx;
line-height: 1;
color: rgba(255, 255, 255, 0.86);
letter-spacing: 1rpx;
}
.race-panel__tag {
position: absolute;
z-index: 3;
@@ -890,40 +1043,95 @@
.debug-modal__header {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20rpx;
padding: 28rpx 28rpx 20rpx;
justify-content: space-between;
gap: 24rpx;
padding: 22rpx 28rpx 18rpx;
border-bottom: 1rpx solid rgba(22, 48, 32, 0.08);
}
.debug-modal__eyebrow {
font-size: 20rpx;
letter-spacing: 4rpx;
color: #5f7a65;
.debug-modal__header-main {
flex: 1;
min-width: 0;
}
.debug-modal__title {
margin-top: 8rpx;
font-size: 34rpx;
font-weight: 600;
color: #163020;
.debug-modal__header-actions {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.debug-modal__eyebrow {
font-size: 22rpx;
font-weight: 800;
letter-spacing: 4rpx;
color: #5f7a65;
line-height: 1;
flex-shrink: 0;
}
.debug-modal__build {
margin-top: 10rpx;
display: inline-flex;
padding: 8rpx 14rpx;
border-radius: 999rpx;
background: rgba(22, 48, 32, 0.08);
color: #45624b;
font-size: 20rpx;
line-height: 1;
letter-spacing: 1rpx;
flex-shrink: 0;
}
.debug-modal__close {
flex-shrink: 0;
min-width: 108rpx;
padding: 14rpx 22rpx;
border-radius: 999rpx;
background: #163020;
color: #f7fbf2;
font-size: 24rpx;
text-align: center;
}
.debug-modal__content {
max-height: calc(72vh - 108rpx);
padding: 12rpx 28rpx 30rpx;
padding: 12rpx 24rpx 30rpx;
box-sizing: border-box;
}
.debug-section {
margin-top: 16rpx;
padding: 18rpx 20rpx 22rpx;
border-radius: 24rpx;
background: rgba(242, 247, 239, 0.98);
box-shadow: inset 0 0 0 1rpx rgba(22, 48, 32, 0.05);
}
.debug-section:first-child {
margin-top: 0;
}
.debug-section__header {
margin-bottom: 12rpx;
}
.debug-section__title {
font-size: 24rpx;
line-height: 1.2;
font-weight: 800;
letter-spacing: 2rpx;
color: #163020;
text-transform: uppercase;
}
.debug-section__desc {
margin-top: 6rpx;
font-size: 20rpx;
line-height: 1.45;
color: #6a826f;
}
.info-panel__row {
display: flex;
align-items: flex-start;
@@ -972,6 +1180,10 @@
gap: 14rpx;
margin-top: 18rpx;
}
.debug-section .control-row:last-child {
margin-bottom: 0;
}
.control-row--triple .control-chip {
font-size: 23rpx;
}
@@ -1041,6 +1253,10 @@
box-sizing: border-box;
}
.race-panel__metric-group--panel {
max-width: calc(100% - 8rpx);
}