feat(aihr): complete phase two pilot readiness
This commit is contained in:
@@ -0,0 +1,639 @@
|
||||
<template>
|
||||
<view class="page review-page">
|
||||
<view class="subpage-header">
|
||||
<button class="subpage-back-button" aria-label="返回待复盘" title="返回待复盘" @click="goBack">←</button>
|
||||
<view class="subpage-heading">
|
||||
<text class="page-title">复盘详情</text>
|
||||
<text class="page-subtitle">{{ detail ? `${detail.trainee} · ${detail.scene}` : '训练记录' }}</text>
|
||||
</view>
|
||||
<button v-if="loggedIn && reviewId && !accessDenied" class="ghost-button refresh-button" :disabled="loading" @click="loadDetail">
|
||||
{{ loading ? '刷新中' : '刷新' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-if="message && !accessDenied" class="status-message">{{ message }}</view>
|
||||
|
||||
<view v-if="accessDenied" class="panel supervisor-access-panel">
|
||||
<text class="panel-title">无主管权限</text>
|
||||
<text class="muted supervisor-access-copy">当前账号不是主管或项目经理，无法查看团队训练数据。</text>
|
||||
<view class="supervisor-access-actions">
|
||||
<button class="secondary-button" @click="goToEmployee">返回员工端</button>
|
||||
<button class="primary-button" @click="switchAccount">切换账号</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!loggedIn" class="panel login-panel">
|
||||
<view>
|
||||
<text class="panel-title">需要登录</text>
|
||||
<text class="muted block">登录后查看并完成复盘。</text>
|
||||
</view>
|
||||
<button class="primary-button login-button" @click="goLogin">去登录</button>
|
||||
</view>
|
||||
|
||||
<template v-else-if="detail">
|
||||
<view class="panel summary-panel">
|
||||
<view class="summary-head">
|
||||
<view class="summary-copy">
|
||||
<text class="detail-title">{{ detail.trainee }} · {{ detail.scene }}</text>
|
||||
<text class="detail-meta">{{ detail.time }} · {{ detail.status }}</text>
|
||||
</view>
|
||||
<text class="score-pill">{{ detail.score }}分</text>
|
||||
</view>
|
||||
<text class="detail-desc">{{ detail.aiComment || detail.summary }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="detail.scoreItems?.length" class="panel">
|
||||
<text class="panel-title">评分明细</text>
|
||||
<view class="score-list">
|
||||
<view v-for="item in detail.scoreItems" :key="item.label" class="score-row">
|
||||
<view class="score-copy">
|
||||
<text class="score-label">{{ item.label }}</text>
|
||||
<text class="score-note">{{ item.note }}</text>
|
||||
</view>
|
||||
<text class="score-value">{{ item.value }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="detail.dialogue?.length" class="panel">
|
||||
<text class="panel-title">对话记录</text>
|
||||
<view class="dialogue-list">
|
||||
<view v-for="(turn, index) in detail.dialogue" :key="`${turn.role}-${index}`" class="dialogue-row">
|
||||
<text class="dialogue-label">{{ turn.label }}</text>
|
||||
<text class="dialogue-text">{{ turn.text }}</text>
|
||||
<view v-if="hasAudio(turn)" class="dialogue-audio-block">
|
||||
<audio v-if="audioSrc(turn, index)" class="dialogue-audio" controls :src="audioSrc(turn, index)"></audio>
|
||||
<button
|
||||
v-else
|
||||
class="secondary-button audio-button"
|
||||
:disabled="audioLoading[audioKey(index)]"
|
||||
@click="loadAudio(turn, index)"
|
||||
>
|
||||
{{ audioLoading[audioKey(index)] ? '加载中' : '加载录音' }}
|
||||
</button>
|
||||
<text v-if="audioErrors[audioKey(index)]" class="audio-error">{{ audioErrors[audioKey(index)] }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="detail.annotations?.length || detail.mentorRewrite" class="panel">
|
||||
<text class="panel-title">标注与建议</text>
|
||||
<view v-if="detail.annotations?.length" class="annotation-list">
|
||||
<view v-for="item in detail.annotations" :key="`${item.turnIndex}-${item.issue}`" class="annotation-row">
|
||||
<text class="annotation-issue">{{ item.issue }}</text>
|
||||
<text class="annotation-rewrite">建议：{{ item.rewrite }}</text>
|
||||
<text class="annotation-sop">依据：{{ item.sopPoint }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="detail.mentorRewrite" class="mentor-block">
|
||||
<text class="subsection-title">推荐话术</text>
|
||||
<text class="mentor-text">{{ detail.mentorRewrite }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="editable" class="panel review-form">
|
||||
<text class="panel-title">主管复盘</text>
|
||||
<text class="field-label">复盘建议</text>
|
||||
<textarea
|
||||
v-model="advice"
|
||||
class="textarea review-textarea"
|
||||
maxlength="300"
|
||||
placeholder="填写复盘建议，可留空直接标记"
|
||||
/>
|
||||
|
||||
<text class="field-label">人工贡献分</text>
|
||||
<input
|
||||
v-model="incentivePoint"
|
||||
class="input point-input"
|
||||
type="number"
|
||||
maxlength="3"
|
||||
placeholder="可留空"
|
||||
/>
|
||||
|
||||
<view class="next-training-section">
|
||||
<text class="field-label">复盘后专项</text>
|
||||
<view class="scenario-row">
|
||||
<button class="chip scenario-chip" :class="{ active: !nextScenarioId }" @click="clearNextScenario">
|
||||
暂不派发
|
||||
</button>
|
||||
<button
|
||||
v-for="item in supervisorScenarioOptions"
|
||||
:key="item.id"
|
||||
class="chip scenario-chip"
|
||||
:class="{ active: nextScenarioId === item.id }"
|
||||
@click="selectNextScenario(item.id)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</button>
|
||||
</view>
|
||||
<textarea
|
||||
v-if="nextScenarioId"
|
||||
v-model="nextReason"
|
||||
class="textarea next-reason-input"
|
||||
maxlength="180"
|
||||
placeholder="填写下一次训练原因"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<button class="primary-button submit-button" :disabled="marking" @click="markReviewed">
|
||||
{{ marking ? '提交中' : '标记已复盘' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-else class="panel review-complete">
|
||||
<text class="complete-title">复盘已完成</text>
|
||||
<text class="complete-desc">{{ detail.reviewAdvice || '该训练记录已完成主管复盘。' }}</text>
|
||||
<text v-if="detail.incentivePoint != null" class="complete-point">
|
||||
人工贡献分 {{ detail.incentivePoint }}
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view v-else-if="loggedIn && !loading" class="panel empty-panel">
|
||||
<view class="empty">{{ reviewId ? '复盘详情暂不可用' : '缺少有效的复盘ID' }}</view>
|
||||
<button class="secondary-button back-list-button" @click="goToReviews">返回待复盘</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, ref } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import type { ReviewDetail, ReviewDialogue } from '@/types/api';
|
||||
import { authenticatedFileUrl, releaseAuthenticatedFileUrl } from '@/services/api';
|
||||
import { clearAuth, isLoggedIn, rememberLoginRedirect } from '@/services/auth';
|
||||
import { resetPageScroll } from '@/services/navigation';
|
||||
import { getPracticeReviewDetail, markPracticeReviewed } from '@/services/practice';
|
||||
import {
|
||||
createAsyncGenerationGuard,
|
||||
isReviewEditable,
|
||||
isSupervisorAccessDenied,
|
||||
reviewCompletionAction,
|
||||
supervisorScenarioOptions,
|
||||
type SupervisorScenarioId
|
||||
} from '@/services/supervisor-view';
|
||||
|
||||
const basePath = '/pages/supervisor/review/index';
|
||||
const reviewId = ref(0);
|
||||
const detail = ref<ReviewDetail | null>(null);
|
||||
const advice = ref('');
|
||||
const incentivePoint = ref('');
|
||||
const nextScenarioId = ref<SupervisorScenarioId | ''>('');
|
||||
const nextReason = ref('');
|
||||
const loggedIn = ref(false);
|
||||
const accessDenied = ref(false);
|
||||
const loading = ref(false);
|
||||
const marking = ref(false);
|
||||
const message = ref('');
|
||||
const audioSources = ref<Record<string, string>>({});
|
||||
const audioLoading = ref<Record<string, boolean>>({});
|
||||
const audioErrors = ref<Record<string, string>>({});
|
||||
const audioRequests = createAsyncGenerationGuard();
|
||||
const editable = computed(() => isReviewEditable(detail.value?.status));
|
||||
|
||||
const audioKey = (index: number) => `${reviewId.value || 'review'}-${index}`;
|
||||
const hasAudio = (turn: ReviewDialogue) => Boolean(turn.audioOssId || turn.audioUrl);
|
||||
const audioSrc = (turn: ReviewDialogue, index: number) =>
|
||||
audioSources.value[audioKey(index)] || (!turn.audioOssId ? turn.audioUrl || '' : '');
|
||||
|
||||
const releaseAudioSources = () => {
|
||||
audioRequests.invalidate();
|
||||
Object.values(audioSources.value).forEach(releaseAuthenticatedFileUrl);
|
||||
audioSources.value = {};
|
||||
audioLoading.value = {};
|
||||
audioErrors.value = {};
|
||||
};
|
||||
|
||||
const clearDetail = () => {
|
||||
releaseAudioSources();
|
||||
detail.value = null;
|
||||
advice.value = '';
|
||||
incentivePoint.value = '';
|
||||
nextScenarioId.value = '';
|
||||
nextReason.value = '';
|
||||
};
|
||||
|
||||
const refreshAuthState = () => {
|
||||
loggedIn.value = isLoggedIn();
|
||||
};
|
||||
|
||||
const handleRequestError = (error: unknown, fallback: string) => {
|
||||
if (isSupervisorAccessDenied(error)) {
|
||||
clearDetail();
|
||||
accessDenied.value = true;
|
||||
message.value = '';
|
||||
return;
|
||||
}
|
||||
refreshAuthState();
|
||||
if (!loggedIn.value) {
|
||||
accessDenied.value = false;
|
||||
clearDetail();
|
||||
message.value = '登录已过期，请重新登录';
|
||||
return;
|
||||
}
|
||||
message.value = error instanceof Error ? error.message : fallback;
|
||||
};
|
||||
|
||||
const loadAudio = async (turn: ReviewDialogue, index: number) => {
|
||||
const key = audioKey(index);
|
||||
if (audioSrc(turn, index) || !turn.audioOssId || audioLoading.value[key]) return;
|
||||
const generation = audioRequests.capture();
|
||||
audioLoading.value = { ...audioLoading.value, [key]: true };
|
||||
audioErrors.value = { ...audioErrors.value, [key]: '' };
|
||||
try {
|
||||
const source = await authenticatedFileUrl(`/api/aihr/mobile/oss/${turn.audioOssId}`);
|
||||
if (!audioRequests.isCurrent(generation)) {
|
||||
releaseAuthenticatedFileUrl(source);
|
||||
return;
|
||||
}
|
||||
audioSources.value = {
|
||||
...audioSources.value,
|
||||
[key]: source
|
||||
};
|
||||
} catch (error) {
|
||||
if (!audioRequests.isCurrent(generation)) return;
|
||||
if (isSupervisorAccessDenied(error)) {
|
||||
handleRequestError(error, '录音加载失败');
|
||||
return;
|
||||
}
|
||||
refreshAuthState();
|
||||
if (!loggedIn.value) {
|
||||
accessDenied.value = false;
|
||||
clearDetail();
|
||||
message.value = '登录已过期，请重新登录';
|
||||
return;
|
||||
}
|
||||
audioErrors.value = { ...audioErrors.value, [key]: '录音加载失败' };
|
||||
if (error instanceof Error && error.message === '网络请求失败') {
|
||||
message.value = '录音加载失败，请检查网络后重试';
|
||||
}
|
||||
} finally {
|
||||
if (audioRequests.isCurrent(generation)) {
|
||||
audioLoading.value = { ...audioLoading.value, [key]: false };
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const loadDetail = async () => {
|
||||
refreshAuthState();
|
||||
message.value = '';
|
||||
if (!loggedIn.value) {
|
||||
accessDenied.value = false;
|
||||
clearDetail();
|
||||
return;
|
||||
}
|
||||
if (!reviewId.value) {
|
||||
clearDetail();
|
||||
message.value = '缺少有效的复盘ID';
|
||||
return;
|
||||
}
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
releaseAudioSources();
|
||||
try {
|
||||
const nextDetail = await getPracticeReviewDetail(reviewId.value);
|
||||
accessDenied.value = false;
|
||||
detail.value = nextDetail;
|
||||
advice.value = detail.value.reviewAdvice || '';
|
||||
incentivePoint.value = detail.value.incentivePoint == null ? '' : String(detail.value.incentivePoint);
|
||||
nextScenarioId.value = '';
|
||||
nextReason.value = '';
|
||||
} catch (error) {
|
||||
clearDetail();
|
||||
handleRequestError(error, '复盘详情加载失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const selectNextScenario = (scenarioId: SupervisorScenarioId) => {
|
||||
nextScenarioId.value = scenarioId;
|
||||
const scenario = supervisorScenarioOptions.find((item) => item.id === scenarioId);
|
||||
nextReason.value = `复盘后建议补练${scenario?.name || '专项训练'}`;
|
||||
};
|
||||
|
||||
const clearNextScenario = () => {
|
||||
nextScenarioId.value = '';
|
||||
nextReason.value = '';
|
||||
};
|
||||
|
||||
const markReviewed = async () => {
|
||||
if (marking.value || !detail.value?.id) return;
|
||||
if (!editable.value) {
|
||||
message.value = '该记录已完成复盘，不能重复提交';
|
||||
return;
|
||||
}
|
||||
const pointText = incentivePoint.value.trim();
|
||||
const point = pointText ? Number(pointText) : undefined;
|
||||
if (point !== undefined && !Number.isFinite(point)) {
|
||||
message.value = '贡献分必须是数字';
|
||||
return;
|
||||
}
|
||||
|
||||
marking.value = true;
|
||||
message.value = '';
|
||||
const assignedNext = Boolean(nextScenarioId.value);
|
||||
try {
|
||||
await markPracticeReviewed(detail.value.id, {
|
||||
reviewer: '主管',
|
||||
advice: advice.value.trim(),
|
||||
incentivePoint: point,
|
||||
nextScenarioId: nextScenarioId.value || undefined,
|
||||
nextReason: nextScenarioId.value ? nextReason.value.trim() : undefined
|
||||
});
|
||||
uni.showToast({ title: assignedNext ? '已复盘并派专项' : '已复盘', icon: 'none' });
|
||||
const pages = getCurrentPages();
|
||||
const previousRoute = pages.length > 1 ? pages[pages.length - 2]?.route : undefined;
|
||||
clearDetail();
|
||||
if (reviewCompletionAction(previousRoute) === 'back') {
|
||||
uni.navigateBack({ delta: 1, fail: goToReviews });
|
||||
} else {
|
||||
goToReviews();
|
||||
}
|
||||
} catch (error) {
|
||||
handleRequestError(error, '标记失败');
|
||||
} finally {
|
||||
marking.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const currentPath = () => reviewId.value ? `${basePath}?id=${reviewId.value}` : basePath;
|
||||
|
||||
const goLogin = () => {
|
||||
rememberLoginRedirect(currentPath());
|
||||
uni.redirectTo({ url: '/pages/auth/login/index' });
|
||||
};
|
||||
|
||||
const goToEmployee = () => {
|
||||
uni.switchTab({ url: '/pages/user/today/index' });
|
||||
};
|
||||
|
||||
const switchAccount = () => {
|
||||
clearAuth();
|
||||
rememberLoginRedirect(currentPath());
|
||||
uni.redirectTo({ url: '/pages/auth/login/index' });
|
||||
};
|
||||
|
||||
const goToReviews = () => {
|
||||
uni.redirectTo({ url: '/pages/supervisor/reviews/index' });
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
if (getCurrentPages().length <= 1) {
|
||||
goToReviews();
|
||||
return;
|
||||
}
|
||||
uni.navigateBack({ delta: 1, fail: goToReviews });
|
||||
};
|
||||
|
||||
onLoad((query) => {
|
||||
const value = Number(query?.id);
|
||||
reviewId.value = Number.isInteger(value) && value > 0 ? value : 0;
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
resetPageScroll();
|
||||
refreshAuthState();
|
||||
if (!loggedIn.value) {
|
||||
accessDenied.value = false;
|
||||
clearDetail();
|
||||
return;
|
||||
}
|
||||
if (!detail.value && !loading.value) void loadDetail();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
audioRequests.dispose();
|
||||
releaseAudioSources();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.review-page {
|
||||
padding-bottom: 42px;
|
||||
background: #f4f7fb;
|
||||
}
|
||||
|
||||
.subpage-header {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-panel,
|
||||
.summary-head,
|
||||
.score-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
min-width: 104px;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
min-width: 78px;
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.review-complete {
|
||||
border-left: 4px solid #16a34a;
|
||||
}
|
||||
|
||||
.complete-title,
|
||||
.complete-desc,
|
||||
.complete-point {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.complete-title {
|
||||
color: #166534;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.complete-desc,
|
||||
.complete-point {
|
||||
margin-top: 8px;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.summary-copy,
|
||||
.score-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.detail-title,
|
||||
.detail-meta,
|
||||
.detail-desc,
|
||||
.score-label,
|
||||
.score-note,
|
||||
.dialogue-label,
|
||||
.dialogue-text,
|
||||
.annotation-issue,
|
||||
.annotation-rewrite,
|
||||
.annotation-sop,
|
||||
.subsection-title,
|
||||
.mentor-text,
|
||||
.field-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
color: #0f172a;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
margin-top: 5px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail-desc {
|
||||
margin-top: 12px;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.score-pill {
|
||||
flex: 0 0 auto;
|
||||
padding: 7px 10px;
|
||||
border-radius: 8px;
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.score-list,
|
||||
.dialogue-list,
|
||||
.annotation-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.score-row,
|
||||
.dialogue-row,
|
||||
.annotation-row {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.score-row:last-child,
|
||||
.dialogue-row:last-child,
|
||||
.annotation-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.score-label,
|
||||
.dialogue-label,
|
||||
.annotation-issue,
|
||||
.subsection-title,
|
||||
.field-label {
|
||||
color: #1e293b;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.score-note,
|
||||
.dialogue-text,
|
||||
.annotation-rewrite,
|
||||
.annotation-sop,
|
||||
.mentor-text {
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.score-value {
|
||||
flex: 0 0 auto;
|
||||
color: #0f172a;
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.dialogue-audio-block {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.dialogue-audio {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.audio-button {
|
||||
width: 104px;
|
||||
min-height: 36px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.audio-error {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
color: #dc2626;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mentor-block {
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.review-textarea,
|
||||
.point-input,
|
||||
.scenario-row,
|
||||
.next-reason-input,
|
||||
.submit-button {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.scenario-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.scenario-chip {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.scenario-chip.active {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.next-training-section {
|
||||
margin-top: 16px;
|
||||
padding-top: 2px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.submit-button,
|
||||
.back-list-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty-panel {
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user