feat(aihr): complete uni-app role workflows
This commit is contained in:
@@ -0,0 +1,832 @@
|
||||
<template>
|
||||
<view class="page practice-page">
|
||||
<view class="practice-head">
|
||||
<text class="page-title">场景练</text>
|
||||
<text class="page-subtitle">按当前场景完成三角色对练，结束后自动评分并写入训练记录。</text>
|
||||
</view>
|
||||
|
||||
<view v-if="message" class="status-message">{{ message }}</view>
|
||||
|
||||
<view v-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>
|
||||
|
||||
<view v-if="loggedIn" class="panel assignment-panel">
|
||||
<view class="assignment-head">
|
||||
<text class="panel-title">今日任务</text>
|
||||
<button class="ghost-button refresh-button" :disabled="assignmentLoading" @click="loadAssignments">刷新</button>
|
||||
</view>
|
||||
<view v-if="assignments.length" class="assignment-list">
|
||||
<view v-for="item in assignments" :key="item.id" class="assignment-row">
|
||||
<view class="assignment-copy">
|
||||
<text class="assignment-badge">{{ item.source === 'daily' ? '每日三题' : '主管专项' }}</text>
|
||||
<text class="assignment-title">{{ item.question || item.scenarioName }}</text>
|
||||
<text v-if="assignmentDesc(item)" class="assignment-desc">{{ assignmentDesc(item) }}</text>
|
||||
<text v-if="item.status === '已完成' && item.referenceAnswer" class="assignment-reference">参考：{{ item.referenceAnswer }}</text>
|
||||
</view>
|
||||
<view v-if="item.source === 'daily'" class="daily-answer">
|
||||
<textarea
|
||||
v-model="drillAnswers[item.id]"
|
||||
class="textarea daily-textarea"
|
||||
maxlength="220"
|
||||
:disabled="item.status === '已完成'"
|
||||
placeholder="写一句你的处理话术"
|
||||
/>
|
||||
<button class="primary-button small-button" :disabled="Boolean(answeringId) || item.status === '已完成'" @click="submitDaily(item)">
|
||||
{{ item.status === '已完成' ? '已完成' : '提交' }}
|
||||
</button>
|
||||
</view>
|
||||
<button v-else class="secondary-button small-button" :disabled="!canStartPractice" @click="startAssignment(item)">开始专项</button>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty">暂无今日任务</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loggedIn" class="panel scenario-card">
|
||||
<text class="scenario-badge">今日小训</text>
|
||||
<text class="scenario-title">{{ activeScenarioName }}</text>
|
||||
<text class="scenario-desc">业主投诉服务或设施问题时，练习承接情绪、说明流程、给出反馈节点。</text>
|
||||
<view v-if="prepCard" class="prep-card">
|
||||
<view class="prep-head">
|
||||
<text>训练前预习卡</text>
|
||||
</view>
|
||||
<view class="prep-block">
|
||||
<text class="prep-label">要点</text>
|
||||
<text v-for="item in prepCard.keyPoints" :key="`point-${item}`" class="prep-line">{{ item }}</text>
|
||||
</view>
|
||||
<view class="prep-block">
|
||||
<text class="prep-label">红线</text>
|
||||
<text v-for="item in prepCard.redLines" :key="`red-${item}`" class="prep-line">{{ item }}</text>
|
||||
</view>
|
||||
<view class="prep-block">
|
||||
<text class="prep-label">话术</text>
|
||||
<text v-for="item in prepCard.scripts" :key="`script-${item}`" class="prep-line">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-else-if="prepLoading" class="muted">预习卡加载中</text>
|
||||
<button
|
||||
v-if="status === 'idle' || status === 'finished'"
|
||||
class="primary-button"
|
||||
:disabled="busy"
|
||||
@click="start()"
|
||||
>
|
||||
{{ status === 'finished' ? '再练一次' : '开始练习' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-if="turns.length" class="panel dialogue-card">
|
||||
<view class="dialogue-head">
|
||||
<text class="panel-title">对话</text>
|
||||
<text class="round-label">第 {{ Math.min(roundIndex + 1, 3) }} 轮</text>
|
||||
</view>
|
||||
<view v-if="hasCoachState" class="coach-state">
|
||||
<view class="state-row">
|
||||
<text>情绪 {{ emotionScore }}</text>
|
||||
<view class="state-bar">
|
||||
<view class="state-fill emotion-fill" :style="{ width: `${emotionScore}%` }" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="state-row">
|
||||
<text>信任 {{ trustScore }}</text>
|
||||
<view class="state-bar">
|
||||
<view class="state-fill trust-fill" :style="{ width: `${trustScore}%` }" />
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="redFlagActive" class="red-flag">红线纠偏：先承接诉求，避免推责、绝对承诺或情绪对抗。</text>
|
||||
</view>
|
||||
<view class="turn-list">
|
||||
<view v-for="(turn, index) in turns" :key="index" class="turn-row" :class="turn.role">
|
||||
<text class="turn-role">{{ roleLabel(turn.role) }}</text>
|
||||
<text class="turn-text">{{ turn.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="canAdjustCoach" class="style-actions">
|
||||
<button
|
||||
v-for="item in styleOptions"
|
||||
:key="item.value"
|
||||
class="chip style-chip"
|
||||
:disabled="busy || Boolean(adjustingStyle)"
|
||||
@click="adjustCoachHint(item.value)"
|
||||
>
|
||||
{{ adjustingStyle === item.value ? '调整中' : item.label }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="status === 'active' || status === 'submitting'" class="panel reply-card">
|
||||
<text class="panel-title">你的回应</text>
|
||||
<textarea
|
||||
v-model="draft"
|
||||
class="textarea"
|
||||
maxlength="500"
|
||||
placeholder="先承接业主情绪，再说明处理动作和反馈时间。"
|
||||
/>
|
||||
<view class="reply-actions">
|
||||
<button class="secondary-button" :disabled="busy || helpLoading" @click="loadHelp">
|
||||
{{ helpLoading ? '求助中' : '求助' }}
|
||||
</button>
|
||||
<button class="secondary-button" :disabled="busy || !canFinishPractice" @click="finish()">结束评分</button>
|
||||
<button class="primary-button" :disabled="busy" @click="submit">
|
||||
{{ status === 'submitting' ? '提交中' : '提交回应' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="helpAnswer || helpRefs.length" class="panel help-card">
|
||||
<text class="panel-title">SOP 提示</text>
|
||||
<text v-if="helpAnswer" class="help-answer">{{ helpAnswer }}</text>
|
||||
<view v-if="helpRefs.length" class="help-refs">
|
||||
<text v-for="item in helpRefs" :key="item" class="help-ref">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="result" class="panel result-card">
|
||||
<text class="result-label">本次评分</text>
|
||||
<text class="result-score">{{ result.totalScore }}</text>
|
||||
<text class="result-comment">{{ result.aiComment }}</text>
|
||||
<view v-if="result.mentorRewrite" class="mentor-rewrite">
|
||||
<text>老师傅建议</text>
|
||||
<text>{{ result.mentorRewrite }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import type {
|
||||
PracticeFinishResponse,
|
||||
PracticePrepCard,
|
||||
PracticeAssignment,
|
||||
PracticeRole,
|
||||
PracticeTurn
|
||||
} from '@/types/api';
|
||||
import { answerDailyDrill, finishPractice, getPracticeAssignments, getPracticePrepCard, startPractice, submitPracticeTurn } from '@/services/practice';
|
||||
import { isLoggedIn, rememberLoginRedirect } from '@/services/auth';
|
||||
import { searchKnowledge } from '@/services/knowledge';
|
||||
|
||||
type PracticeStatus = 'idle' | 'starting' | 'active' | 'submitting' | 'finished';
|
||||
|
||||
const defaultScenarioId = 'complaint-water';
|
||||
const defaultScenarioName = '投诉接待';
|
||||
const status = ref<PracticeStatus>('idle');
|
||||
const sessionId = ref('');
|
||||
const roundIndex = ref(0);
|
||||
const draft = ref('');
|
||||
const message = ref('');
|
||||
const turns = ref<PracticeTurn[]>([]);
|
||||
const result = ref<PracticeFinishResponse | null>(null);
|
||||
const selectedScenarioId = ref(defaultScenarioId);
|
||||
const prepCard = ref<PracticePrepCard | null>(null);
|
||||
const prepLoading = ref(false);
|
||||
const activeScenarioName = ref(defaultScenarioName);
|
||||
const helpLoading = ref(false);
|
||||
const helpAnswer = ref('');
|
||||
const helpRefs = ref<string[]>([]);
|
||||
const lastTraineeText = ref('');
|
||||
const lastCoachRoundIndex = ref<number | null>(null);
|
||||
const adjustingStyle = ref('');
|
||||
const emotionScore = ref(0);
|
||||
const trustScore = ref(0);
|
||||
const redFlagActive = ref(false);
|
||||
const assignments = ref<PracticeAssignment[]>([]);
|
||||
const drillAnswers = ref<Record<number, string>>({});
|
||||
const assignmentLoading = ref(false);
|
||||
const answeringId = ref<number | null>(null);
|
||||
const activeAssignmentId = ref<number | undefined>();
|
||||
const loggedIn = ref(false);
|
||||
const busy = computed(() => status.value === 'starting' || status.value === 'submitting');
|
||||
const canStartPractice = computed(() => status.value === 'idle' || status.value === 'finished');
|
||||
const hasTraineeReply = computed(() => turns.value.some((item) => item.role === 'trainee'));
|
||||
const canFinishPractice = computed(() => hasTraineeReply.value && !redFlagActive.value);
|
||||
const hasCoachState = computed(() => emotionScore.value > 0 || trustScore.value > 0 || redFlagActive.value);
|
||||
const canAdjustCoach = computed(() => status.value === 'active' && lastCoachRoundIndex.value !== null && turns.value.some((item) => item.role === 'coach'));
|
||||
const styleOptions = [
|
||||
{ value: 'serious', label: '再严肃' },
|
||||
{ value: 'gentle', label: '再温柔' },
|
||||
{ value: 'detailed', label: '更细致' },
|
||||
{ value: 'professional', label: '更专业' }
|
||||
];
|
||||
|
||||
const roleLabel = (role: PracticeRole) => {
|
||||
if (role === 'customer') return '业主';
|
||||
if (role === 'coach') return '老师傅';
|
||||
return '我';
|
||||
};
|
||||
|
||||
const assignmentDesc = (item: PracticeAssignment) => {
|
||||
if (item.source === 'daily' && item.status !== '已完成') return '提交后显示反馈与参考答案';
|
||||
return item.feedback || item.reason;
|
||||
};
|
||||
|
||||
const goLogin = () => {
|
||||
rememberLoginRedirect('/pages/user/practice/index');
|
||||
uni.navigateTo({ url: '/pages/auth/login/index' });
|
||||
};
|
||||
|
||||
const refreshAuthState = () => {
|
||||
loggedIn.value = isLoggedIn();
|
||||
};
|
||||
|
||||
const clearPracticeData = () => {
|
||||
assignments.value = [];
|
||||
drillAnswers.value = {};
|
||||
prepCard.value = null;
|
||||
prepLoading.value = false;
|
||||
turns.value = [];
|
||||
result.value = null;
|
||||
sessionId.value = '';
|
||||
roundIndex.value = 0;
|
||||
draft.value = '';
|
||||
status.value = 'idle';
|
||||
selectedScenarioId.value = defaultScenarioId;
|
||||
activeScenarioName.value = defaultScenarioName;
|
||||
helpLoading.value = false;
|
||||
helpAnswer.value = '';
|
||||
helpRefs.value = [];
|
||||
lastTraineeText.value = '';
|
||||
lastCoachRoundIndex.value = null;
|
||||
adjustingStyle.value = '';
|
||||
emotionScore.value = 0;
|
||||
trustScore.value = 0;
|
||||
redFlagActive.value = false;
|
||||
answeringId.value = null;
|
||||
activeAssignmentId.value = undefined;
|
||||
};
|
||||
|
||||
const requireLogin = () => {
|
||||
refreshAuthState();
|
||||
if (loggedIn.value) return true;
|
||||
message.value = '请先登录后再开始训练';
|
||||
goLogin();
|
||||
return false;
|
||||
};
|
||||
|
||||
const appendTurn = (role: PracticeRole, text?: string) => {
|
||||
if (!text) return;
|
||||
turns.value.push({ role, text });
|
||||
};
|
||||
|
||||
const handleError = (error: unknown, fallback: string) => {
|
||||
const text = error instanceof Error ? error.message : fallback;
|
||||
refreshAuthState();
|
||||
if (!loggedIn.value) {
|
||||
clearPracticeData();
|
||||
message.value = '登录已过期，请重新登录';
|
||||
goLogin();
|
||||
return;
|
||||
}
|
||||
message.value = text;
|
||||
if (text.includes('认证') || text.includes('登录') || text.includes('401')) {
|
||||
goLogin();
|
||||
}
|
||||
};
|
||||
|
||||
const loadAssignments = async () => {
|
||||
refreshAuthState();
|
||||
if (!loggedIn.value) {
|
||||
clearPracticeData();
|
||||
return;
|
||||
}
|
||||
assignmentLoading.value = true;
|
||||
try {
|
||||
assignments.value = await getPracticeAssignments(true);
|
||||
drillAnswers.value = Object.fromEntries(assignments.value.map((item) => [item.id, item.userAnswer || '']));
|
||||
} catch (error) {
|
||||
handleError(error, '今日任务加载失败');
|
||||
} finally {
|
||||
assignmentLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const submitDaily = async (item: PracticeAssignment) => {
|
||||
if (answeringId.value) return;
|
||||
const answer = (drillAnswers.value[item.id] || '').trim();
|
||||
if (!answer) {
|
||||
message.value = '请先填写处理话术';
|
||||
return;
|
||||
}
|
||||
answeringId.value = item.id;
|
||||
message.value = '';
|
||||
try {
|
||||
const result = await answerDailyDrill(item.id, answer);
|
||||
assignments.value = assignments.value.map((row) =>
|
||||
row.id === item.id
|
||||
? { ...row, status: result.status, userAnswer: answer, feedback: result.feedback, referenceAnswer: result.referenceAnswer, correct: result.correct }
|
||||
: row
|
||||
);
|
||||
message.value = `每日三题得分 ${result.score}`;
|
||||
} catch (error) {
|
||||
handleError(error, '每日三题提交失败');
|
||||
} finally {
|
||||
answeringId.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const startAssignment = (item: PracticeAssignment) => {
|
||||
if (!canStartPractice.value) return;
|
||||
selectedScenarioId.value = item.scenarioId || defaultScenarioId;
|
||||
activeScenarioName.value = item.scenarioName || defaultScenarioName;
|
||||
void loadPrepCard(selectedScenarioId.value);
|
||||
void start(item.scenarioId || defaultScenarioId, item.id);
|
||||
};
|
||||
|
||||
const loadPrepCard = async (scenarioId = selectedScenarioId.value) => {
|
||||
refreshAuthState();
|
||||
if (!loggedIn.value) {
|
||||
prepCard.value = null;
|
||||
return;
|
||||
}
|
||||
prepLoading.value = true;
|
||||
try {
|
||||
prepCard.value = await getPracticePrepCard(scenarioId);
|
||||
} catch (error) {
|
||||
prepCard.value = null;
|
||||
handleError(error, '预习卡加载失败');
|
||||
} finally {
|
||||
prepLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const start = async (scenarioId = defaultScenarioId, assignmentId?: number) => {
|
||||
if (!canStartPractice.value) return;
|
||||
if (!requireLogin()) return;
|
||||
selectedScenarioId.value = scenarioId;
|
||||
status.value = 'starting';
|
||||
message.value = '';
|
||||
result.value = null;
|
||||
turns.value = [];
|
||||
draft.value = '';
|
||||
helpAnswer.value = '';
|
||||
helpRefs.value = [];
|
||||
lastTraineeText.value = '';
|
||||
lastCoachRoundIndex.value = null;
|
||||
adjustingStyle.value = '';
|
||||
emotionScore.value = 0;
|
||||
trustScore.value = 0;
|
||||
redFlagActive.value = false;
|
||||
roundIndex.value = 0;
|
||||
activeAssignmentId.value = assignmentId;
|
||||
try {
|
||||
const data = await startPractice(scenarioId, assignmentId);
|
||||
activeScenarioName.value = data.scenarioName || activeScenarioName.value;
|
||||
emotionScore.value = data.emotion ?? 0;
|
||||
trustScore.value = data.trust ?? 0;
|
||||
sessionId.value = data.sessionId;
|
||||
appendTurn('customer', data.customerText);
|
||||
status.value = 'active';
|
||||
} catch (error) {
|
||||
status.value = 'idle';
|
||||
activeAssignmentId.value = undefined;
|
||||
handleError(error, '训练启动失败');
|
||||
}
|
||||
};
|
||||
|
||||
const loadHelp = async () => {
|
||||
if (helpLoading.value || busy.value) return;
|
||||
if (!requireLogin()) return;
|
||||
helpLoading.value = true;
|
||||
message.value = '';
|
||||
try {
|
||||
const data = await searchKnowledge(`${activeScenarioName.value} SOP 处理要点`);
|
||||
if (!data.answer) {
|
||||
throw new Error('未检索到可用 SOP 提示');
|
||||
}
|
||||
helpAnswer.value = data.answer;
|
||||
helpRefs.value = (data.snippets || []).map((item) => item.docTitle).filter(Boolean).slice(0, 3);
|
||||
} catch (error) {
|
||||
handleError(error, '求助失败');
|
||||
} finally {
|
||||
helpLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const replaceLastCoachHint = (text?: string) => {
|
||||
if (!text) return;
|
||||
for (let index = turns.value.length - 1; index >= 0; index -= 1) {
|
||||
if (turns.value[index].role === 'coach') {
|
||||
turns.value[index] = { role: 'coach', text };
|
||||
return;
|
||||
}
|
||||
}
|
||||
appendTurn('coach', text);
|
||||
};
|
||||
|
||||
const discardLastCoachAttempt = () => {
|
||||
const next = [...turns.value];
|
||||
if (next[next.length - 1]?.role === 'coach') next.pop();
|
||||
if (next[next.length - 1]?.role === 'trainee') next.pop();
|
||||
turns.value = next;
|
||||
};
|
||||
|
||||
const adjustCoachHint = async (style: string) => {
|
||||
if (busy.value || adjustingStyle.value) return;
|
||||
if (!sessionId.value || lastCoachRoundIndex.value === null || !lastTraineeText.value) return;
|
||||
adjustingStyle.value = style;
|
||||
message.value = '';
|
||||
try {
|
||||
const data = await submitPracticeTurn({
|
||||
sessionId: sessionId.value,
|
||||
roundIndex: lastCoachRoundIndex.value,
|
||||
traineeText: lastTraineeText.value,
|
||||
regenerate: true,
|
||||
style
|
||||
});
|
||||
replaceLastCoachHint(data.coachHint);
|
||||
emotionScore.value = data.emotion ?? emotionScore.value;
|
||||
trustScore.value = data.trust ?? trustScore.value;
|
||||
redFlagActive.value = Boolean(data.redFlag);
|
||||
if (data.message) message.value = data.message;
|
||||
} catch (error) {
|
||||
handleError(error, '建议调整失败');
|
||||
} finally {
|
||||
adjustingStyle.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (busy.value) return;
|
||||
const text = draft.value.trim();
|
||||
if (!text) {
|
||||
message.value = '请先输入回应';
|
||||
return;
|
||||
}
|
||||
status.value = 'submitting';
|
||||
message.value = '';
|
||||
draft.value = '';
|
||||
const retryingRedFlag = redFlagActive.value && lastCoachRoundIndex.value === roundIndex.value;
|
||||
if (retryingRedFlag) discardLastCoachAttempt();
|
||||
appendTurn('trainee', text);
|
||||
try {
|
||||
const submittedRound = roundIndex.value;
|
||||
const data = await submitPracticeTurn({
|
||||
sessionId: sessionId.value,
|
||||
roundIndex: submittedRound,
|
||||
traineeText: text
|
||||
});
|
||||
lastTraineeText.value = text;
|
||||
lastCoachRoundIndex.value = submittedRound;
|
||||
emotionScore.value = data.emotion ?? emotionScore.value;
|
||||
trustScore.value = data.trust ?? trustScore.value;
|
||||
redFlagActive.value = Boolean(data.redFlag);
|
||||
appendTurn('coach', data.redFlag ? data.coachHint || '先承接诉求，再给处理节点。' : data.coachHint);
|
||||
if (data.redFlag) {
|
||||
message.value = '命中红线，请按老师傅建议重说本轮';
|
||||
status.value = 'active';
|
||||
return;
|
||||
}
|
||||
if (data.finished) {
|
||||
await finish(true);
|
||||
return;
|
||||
}
|
||||
appendTurn('customer', data.customerText);
|
||||
roundIndex.value = data.roundIndex;
|
||||
status.value = 'active';
|
||||
} catch (error) {
|
||||
status.value = 'active';
|
||||
handleError(error, '提交失败');
|
||||
}
|
||||
};
|
||||
|
||||
const finish = async (force = false) => {
|
||||
if (!force && busy.value) return;
|
||||
if (!sessionId.value) return;
|
||||
if (!canFinishPractice.value) {
|
||||
message.value = redFlagActive.value ? '请先按老师傅建议重说本轮' : '请先完成至少一轮回应';
|
||||
return;
|
||||
}
|
||||
status.value = 'submitting';
|
||||
message.value = '';
|
||||
try {
|
||||
result.value = await finishPractice(sessionId.value, activeAssignmentId.value);
|
||||
status.value = 'finished';
|
||||
message.value = '训练完成，主管端待复盘已更新';
|
||||
activeAssignmentId.value = undefined;
|
||||
await loadAssignments();
|
||||
} catch (error) {
|
||||
status.value = 'active';
|
||||
handleError(error, '评分失败');
|
||||
}
|
||||
};
|
||||
|
||||
onShow(() => {
|
||||
refreshAuthState();
|
||||
void loadAssignments();
|
||||
void loadPrepCard();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.practice-page {
|
||||
padding-bottom: 92px;
|
||||
background: #f4f7fb;
|
||||
}
|
||||
|
||||
.practice-head {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.scenario-card,
|
||||
.reply-card,
|
||||
.help-card,
|
||||
.result-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.assignment-head,
|
||||
.daily-answer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.refresh-button,
|
||||
.small-button {
|
||||
min-width: 82px;
|
||||
}
|
||||
|
||||
.assignment-list {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.assignment-row {
|
||||
margin-top: 10px;
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.assignment-badge {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.assignment-title {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.assignment-desc,
|
||||
.assignment-reference {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.daily-answer {
|
||||
margin-top: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.daily-textarea {
|
||||
min-height: 82px;
|
||||
}
|
||||
|
||||
.scenario-badge {
|
||||
width: fit-content;
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.scenario-title {
|
||||
color: #0f172a;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.scenario-desc {
|
||||
color: #64748b;
|
||||
font-size: 15px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.prep-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.prep-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.prep-head text:first-child,
|
||||
.prep-label {
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.prep-head text:last-child {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.prep-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.prep-line {
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.dialogue-head,
|
||||
.reply-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.round-label {
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.coach-state {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.state-row {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 72px 1fr;
|
||||
gap: 10px;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.state-bar {
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.state-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.emotion-fill {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.trust-fill {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.red-flag {
|
||||
padding: 9px 10px;
|
||||
border-radius: 12px;
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.turn-list {
|
||||
display: flex;
|
||||
margin-top: 14px;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.turn-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.turn-row.trainee {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.turn-row.coach {
|
||||
background: #fff7ed;
|
||||
}
|
||||
|
||||
.turn-role {
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.turn-text {
|
||||
color: #172033;
|
||||
font-size: 15px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.style-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.style-chip {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.reply-actions button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.help-answer {
|
||||
color: #334155;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.help-refs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.help-ref {
|
||||
padding: 5px 8px;
|
||||
border-radius: 999px;
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.result-score {
|
||||
color: #1d4ed8;
|
||||
font-size: 44px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.result-comment,
|
||||
.mentor-rewrite text:last-child {
|
||||
color: #334155;
|
||||
font-size: 15px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.mentor-rewrite {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.mentor-rewrite text:first-child {
|
||||
color: #0f172a;
|
||||
font-weight: 900;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user