laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update:优化个人训练

Browse Source
This commit is contained in:
zhangyi
2026-07-27 16:38:53 +08:00
parent c5618fb60b
commit e6f11d3684
6 changed files with 221 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Container.vue
+88
View File
@@ -25,6 +25,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
usePageScroll: {
type: Boolean,
default: false,
},
isHome: {
type: Boolean,
default: false,
@@ -53,6 +57,14 @@ const props = defineProps({
type: Boolean,
default: true,
},
loading: {
type: Boolean,
default: false,
},
loadingText: {
type: String,
default: "",
},
});
const isIOS = uni.getDeviceInfo().osName === "ios";
const showHint = ref(false);
@@ -125,9 +137,22 @@ const goCalibration = async () => {
:onBack="onBack"
:whiteBackArrow="whiteBackArrow"
:titleStyle="titleStyle"
:style="
usePageScroll
? {
position: 'sticky',
top: capsuleHeight + 'px',
zIndex: 10,
}
: undefined
"
/>
<BackToGame v-if="showBackToGame" />
<view v-if="usePageScroll">
<slot></slot>
</view>
<scroll-view
v-else
:scroll-y="scroll"
:enhanced="true"
:bounces="false"
@@ -189,6 +214,18 @@ const goCalibration = async () => {
</view>
</view>
</ScreenHint>
<view v-if="loading" class="audio-progress">
<image
src="https://static.shelingxingqiu.com/attachment/2025-11-26/deihtj15xjwcz3c1tx.png"
mode="widthFix"
/>
<view>
<view :style="{ width: '100%' }"></view>
</view>
<view>
<text>{{ loadingText || "加载中..." }}</text>
</view>
</view>
</view>
</template>
@@ -230,4 +267,55 @@ const goCalibration = async () => {
color: #666;
opacity: 0.6;
}
.audio-progress {
z-index: 999;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgb(0 0 0 / 0.8);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.audio-progress > image:nth-child(1) {
width: 140rpx;
height: 150rpx;
margin-bottom: 20rpx;
}
.audio-progress > view:nth-child(2) {
width: 380rpx;
height: 6rpx;
background: #595959;
border-radius: 4rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.audio-progress > view:nth-child(2) > view {
width: 100%;
min-height: 6rpx;
background: #ffe431;
border-radius: 4rpx;
}
.audio-progress > view:nth-child(3) {
display: flex;
align-items: center;
justify-content: center;
}
.audio-progress > view:nth-child(3) > text {
font-size: 22rpx;
color: #a2a2a2;
text-align: center;
line-height: 32rpx;
}
</style>
src/pages/training/components/BowData.vue
+1 -1
View File
@@ -115,7 +115,7 @@ const props = defineProps({
}
.header > view:first-child > view:last-child > text:last-child {
font-size: 10px;
/* background-color: #5f51ff; */
background-color: #5f51ff;
padding: 2px 5px;
border-radius: 10px;
margin-top: 5px;
src/pages/training/components/ScoreResult.vue
+5 -3
View File
@@ -35,6 +35,10 @@ const props = defineProps({
type: Number,
default: 0,
},
hasNextDifficulty: {
type: Boolean,
default: false,
},
result: {
type: Object,
default: () => ({}),
@@ -297,9 +301,7 @@ const resultRows = computed(() => {
});
});
const advancesDifficulty = computed(() =>
["base", "endurance"].includes(resultTrainingType.value)
);
const advancesDifficulty = computed(() => props.hasNextDifficulty);
const primaryText = computed(() =>
advancesDifficulty.value ? "下一难度" : "再来一次"
);
src/pages/training/difficulty.vue
+22 -23
View File
@@ -1,6 +1,6 @@
<script setup>
import { computed, nextTick, ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { onHide, onLoad, onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import TrainingDifficultyBadge from "./components/TrainingDifficultyBadge.vue";
import TrainingDifficultyPreviewCard from "./components/TrainingDifficultyPreviewCard.vue";
@@ -15,7 +15,6 @@ import {
// 1. 接口：GET /training/difficulty/list?type=base/endurance/precision/rhythm
// 2. 当前进度：接口 user_levels / list.completed，路由参数可覆盖选中难度
const trainingDifficultyStorageKey = "training-selection";
const trainingDifficultyRefreshEvent = "training-difficulty-refresh";
const defaultTrainingType = "precision";
const defaultUnlockedDifficultyId = "lv1";
const trainingTypeMetaMap = {
@@ -239,8 +238,9 @@ const selectedDifficultyId = ref(defaultUnlockedDifficultyId);
const nodesScrollTop = ref(0);
const nodesScrollWithAnimation = ref(false);
const routeOptions = ref({});
const needRefreshProgress = ref(false);
const shouldRefreshOnShow = ref(false);
const creatingPractice = ref(false);
let pageStateRequestGeneration = 0;
const difficultyProgressMap = computed(() => {
return pageConfig.value?.progressMap || {};
@@ -533,6 +533,7 @@ const applyPageState = (options = {}, config) => {
};
const initPageState = async (options = {}, refreshOptions = {}) => {
const requestGeneration = ++pageStateRequestGeneration;
const { keepCurrent = false } = refreshOptions;
const trainingType = resolveTrainingType(options.mode);
const fallbackConfig = createEmptyModeConfig(trainingType);
@@ -543,11 +544,19 @@ const initPageState = async (options = {}, refreshOptions = {}) => {
try {
const result = await getTrainingDifficultyListAPI(trainingType);
if (requestGeneration !== pageStateRequestGeneration) {
return;
}
applyPageState(
options,
normalizeTrainingDifficultyConfig(result, trainingType)
);
} catch (error) {
if (requestGeneration !== pageStateRequestGeneration) {
return;
}
console.log("training difficulty load failed", error);
if (!keepCurrent) {
applyPageState(options, fallbackConfig);
@@ -687,10 +696,6 @@ const handleStart = async () => {
let createdPracticeId = "";
creatingPractice.value = true;
uni.showLoading({
title: "训练创建中",
mask: true,
});
try {
// 先由业务接口创建训练和比赛服，再把连接上下文交给目标页。
@@ -731,35 +736,27 @@ const handleStart = async () => {
});
}
} finally {
uni.hideLoading();
creatingPractice.value = false;
}
};
const markProgressRefresh = () => {
needRefreshProgress.value = true;
};
onLoad((options = {}) => {
routeOptions.value = { ...options };
uni.$on(trainingDifficultyRefreshEvent, markProgressRefresh);
initPageState(options);
void initPageState(options);
});
onHide(() => {
shouldRefreshOnShow.value = true;
});
onShow(() => {
if (!needRefreshProgress.value) {
return;
}
if (!shouldRefreshOnShow.value) return;
needRefreshProgress.value = false;
initPageState(routeOptions.value, {
shouldRefreshOnShow.value = false;
void initPageState(routeOptions.value, {
keepCurrent: true,
});
});
onUnload(() => {
uni.$off(trainingDifficultyRefreshEvent, markProgressRefresh);
});
</script>
<template>
@@ -768,6 +765,8 @@ onUnload(() => {
:bgType="8"
bgColor="#1c1c23"
:scroll="false"
:loading="creatingPractice"
loadingText="训练创建中..."
>
<view class="difficulty-page">
<view class="difficulty-page__nodes">
src/pages/training/index.vue
+38 -18
View File
@@ -17,6 +17,7 @@ const trainingModeRouteMap = {
rhythm: "rhythm",
strength: "power",
};
const unavailableTrainingIds = new Set(["rhythm", "strength"]);
// 训练项目卡片右侧主图标。
const trainingModeIconMap = {
base_bow:
@@ -79,7 +80,7 @@ const trainingData = ref(createDefaultTrainingData());
const recommendedTrainingId = ref("");
const visibleTrainingItems = computed(() =>
Array.isArray(trainingData.value.training_items)
? trainingData.value.training_items.filter((item) => item.id !== "strength")
? trainingData.value.training_items
: []
);
const pageMounted = ref(false);
@@ -91,8 +92,17 @@ const radarFigureWidthRpx = 448;
const radarFigureHeightRpx = Math.round(
(radarFigureWidthRpx * radarImageHeight) / radarImageWidth
);
const radarCanvasWidth = Math.round(uni.upx2px(radarFigureWidthRpx));
const radarCanvasHeight = Math.round(uni.upx2px(radarFigureHeightRpx));
const radarCanvasPixelRatio = Math.max(
1,
Number(uni.getDeviceInfo().pixelRatio) || 1
);
const radarTargetWidth = uni.upx2px(radarFigureWidthRpx);
const radarTargetHeight = uni.upx2px(radarFigureHeightRpx);
// 画布按设备像素比直接绘制，并让显示尺寸与物理像素严格对应，避免图片二次缩放。
const radarCanvasWidth = Math.round(radarTargetWidth * radarCanvasPixelRatio);
const radarCanvasHeight = Math.round(radarTargetHeight * radarCanvasPixelRatio);
const radarDisplayWidth = radarCanvasWidth / radarCanvasPixelRatio;
const radarDisplayHeight = radarCanvasHeight / radarCanvasPixelRatio;
const radarScaleX = radarCanvasWidth / radarImageWidth;
const radarScaleY = radarCanvasHeight / radarImageHeight;
const radarScale = Math.min(radarScaleX, radarScaleY);
@@ -103,9 +113,10 @@ const radarPointRadius = Math.max(2.5, 3.5 * radarScale);
const radarOuterRadiusX = 110.7089 * radarScaleX;
const radarOuterRadiusY = 110.7089 * radarScaleY;
const radarFigureStyle = {
width: `${radarFigureWidthRpx}rpx`,
height: `${radarFigureHeightRpx}rpx`,
width: `${radarDisplayWidth}px`,
height: `${radarDisplayHeight}px`,
};
let radarRenderGeneration = 0;
const formatValue = (value, digits = 1) => {
const numberValue = Number(value);
@@ -116,7 +127,7 @@ const formatValue = (value, digits = 1) => {
const getLevelText = (item) => {
if (!item) return "";
const level = Number(item.current_level) || 0;
return item.is_locked ? `Coming! LV${level}` : `当前进度 LV${level} >`;
return `当前进度 LV${level} >`;
};
// 卡路里字段按需求做 K / W 缩写展示。
@@ -156,6 +167,7 @@ const updateRecommendedTraining = () => {
const trainingId = radarDimensionTrainingIdMap[item?.name];
const rawScore = item?.score;
if (
unavailableTrainingIds.has(trainingId) ||
!visibleTrainingIds.includes(trainingId) ||
rawScore === undefined ||
rawScore === null ||
@@ -176,9 +188,10 @@ const updateRecommendedTraining = () => {
const lowestCandidates = candidates.filter(
(item) => item.score === lowestScore
);
const selectedIndex = Math.floor(Math.random() * lowestCandidates.length);
const selectedIndex = Math.floor(Math.random() * lowestCandidates.length); //暂时先不随机，默认使用第一个
console.log(candidates, selectedIndex, lowestCandidates)
recommendedTrainingId.value =
lowestCandidates[selectedIndex]?.trainingId || "";
lowestCandidates[0]?.trainingId || "";
};
const getRadarPoint = (centerX, centerY, radiusX, radiusY, angle) => ({
@@ -251,11 +264,14 @@ const drawRadar = () => {
ctx.draw();
};
// 小程序 canvas 首次渲染时机不稳定，延后一帧再绘制更稳。
// 小程序 Canvas 首次渲染时机不稳定，延后一帧再绘制更稳。
const refreshRadar = async () => {
const generation = ++radarRenderGeneration;
await nextTick();
setTimeout(() => {
if (generation === radarRenderGeneration) {
drawRadar();
}
}, 30);
};
@@ -303,17 +319,17 @@ const openTrainingRecord = () => {
};
const openTrainingItem = (item = {}) => {
const mode = getTrainingMode(item);
if (!mode) return;
if (item.is_locked) {
if (unavailableTrainingIds.has(item.id)) {
uni.showToast({
title: `${item.name || "训练"} 暂未开放`,
title: "功能开发中...",
icon: "none",
});
return;
}
const mode = getTrainingMode(item);
if (!mode) return;
uni.navigateTo({
url: `/pages/training/difficulty?mode=${mode}`,
});
@@ -344,7 +360,12 @@ onShow(async () => {
</script>
<template>
<Container :showBackToGame="true" :bgType="7" bgColor="#050b19">
<Container
:showBackToGame="true"
:bgType="7"
bgColor="#050b19"
:usePageScroll="true"
>
<view class="training-home">
<view class="week-grid">
<view
@@ -818,10 +839,9 @@ onShow(async () => {
}
.radar-figure {
position: absolute;
left: 50%;
position: relative;
top: 54rpx;
transform: translateX(-50%);
margin: 0 auto;
overflow: visible;
}
src/pages/training/practise-one.vue
+66 -2
View File
@@ -18,6 +18,7 @@ import {
startPractiseAPI,
endPractiseAPI,
getPractiseAPI,
getTrainingDifficultyListAPI,
} from "@/apis";
import {
connectMatchWebSocket,
@@ -52,6 +53,7 @@ const defaultTargetType = 1;
const total = ref(defaultTotal);
const practiseResult = ref({});
const practiceEndSnapshot = ref({});
const hasNextDifficulty = ref(false);
const practiseId = ref("");
const showGuide = ref(false);
const tips = ref("");
@@ -64,7 +66,6 @@ const visiblePrecisionTarget = ref({
randomRingArea: 0,
});
const trainingDifficultyStorageKey = "training-selection";
const trainingDifficultyRefreshEvent = "training-difficulty-refresh";
const useHighlightTest = ref(false);
const highlightTestState = ref({
blocks: 8,
@@ -87,6 +88,8 @@ let stopPracticeTask = null;
let practiceSyncTimer = null;
let waitingPracticeSync = false;
let shotPresentationGeneration = 0;
let nextDifficultyRequest = null;
let nextDifficultyRequestGeneration = 0;
const audioWaiters = new Set();
const shotEffectWaiters = new Map();
const PRACTICE_SYNC_TIMEOUT_MS = 5000;
@@ -152,6 +155,63 @@ const currentDifficultyLevel = computed(
getPositiveInteger(trainingParams.value.difficulty)
);
const resetNextDifficultyState = () => {
nextDifficultyRequestGeneration += 1;
nextDifficultyRequest = null;
hasNextDifficulty.value = false;
};
const loadNextDifficultyState = (result = {}) => {
const requestGeneration = ++nextDifficultyRequestGeneration;
const currentLevel =
getPositiveInteger(result.difficultyLevel) ||
getPositiveInteger(result.difficulty_level) ||
currentDifficultyLevel.value;
const currentTrainingType = result.trainingType || trainingType.value;
hasNextDifficulty.value = false;
if (!currentTrainingType || !currentLevel) {
nextDifficultyRequest = Promise.resolve(false);
return nextDifficultyRequest;
}
nextDifficultyRequest = getTrainingDifficultyListAPI(currentTrainingType)
.then((difficultyResult) => {
const levels = Array.isArray(difficultyResult?.list)
? difficultyResult.list
.filter(
(item) => !item?.type || item.type === currentTrainingType
)
.map((item) => getPositiveInteger(item?.difficulty))
.filter(Boolean)
: [];
const maxLevel = Math.max(0, ...levels);
const highestCompletedLevel = getPositiveInteger(
difficultyResult?.user_levels?.[currentTrainingType]
);
const latestUnlockedLevel = Math.min(
highestCompletedLevel + 1,
maxLevel
);
const canAdvance =
currentLevel < maxLevel && latestUnlockedLevel > currentLevel;
if (requestGeneration === nextDifficultyRequestGeneration) {
hasNextDifficulty.value = canAdvance;
}
return canAdvance;
})
.catch((error) => {
console.log("training next difficulty load failed", error);
if (requestGeneration === nextDifficultyRequestGeneration) {
hasNextDifficulty.value = false;
}
return false;
});
return nextDifficultyRequest;
};
// time_limit 缺失或非正数都表示整局不限时。
const timeLimit = computed(() => getPositiveInteger(practiceInfo.value.timeLimit));
const hasTimeLimit = computed(() => timeLimit.value > 0);
@@ -1007,11 +1067,13 @@ const onOver = async () => {
try {
const apiResult = (await getPractiseAPI(practiseId.value)) || {};
await (nextDifficultyRequest || loadNextDifficultyState(apiResult));
if (!enterPracticeResult(mergePracticeResult(apiResult))) {
pageStage.value = pageStages.DISTANCE;
}
} catch (error) {
if (Object.keys(practiceEndSnapshot.value).length > 0) {
await (nextDifficultyRequest || loadNextDifficultyState(practiceEndSnapshot.value));
enterPracticeResult(mergePracticeResult());
return;
}
@@ -1067,6 +1129,7 @@ async function onReceiveMessage(msg) {
}
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
practiceEndSnapshot.value = createPracticeEndSnapshot(msg);
void loadNextDifficultyState(practiceEndSnapshot.value);
if (
trainingType.value === "base" &&
Number(msg.status) === 3 &&
@@ -1093,7 +1156,6 @@ function onComplete() {
invalidateShotPresentations();
clearPracticeRuntimeContext();
closePracticeConnection("training-practice-complete");
uni.$emit(trainingDifficultyRefreshEvent);
uni.navigateBack();
}
@@ -1102,6 +1164,7 @@ async function onRetry() {
setPracticeAppHideResumable(false);
clearHighlightTestTimer();
useHighlightTest.value = false;
resetNextDifficultyState();
practiseId.value = "";
serverAddr.value = "";
practiseResult.value = {};
@@ -1332,6 +1395,7 @@ onBeforeUnmount(() => {
:onRetry="onRetry"
:trainingType="trainingType"
:difficultyLevel="currentDifficultyLevel"
:hasNextDifficulty="hasNextDifficulty"
:result="practiseResult"
/>
<canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>