当前位置：首页 > news >正文

创新项目实训开发日志7

news 来源：原创 2025/6/5 7:44:14

一、开发简介

核心工作内容："AI出题"、408习题训练、错题本的UI重构、界面优化

工作时间：第十四周

二、AI出题

1.取消上移

/*取消上移动画
.question-card:hover {transform: translateY(-5px);
}
*//*
.question-display:hover {transform: translateY(-5px);
}
*/

2.响应式表单数据绑定失败排查

1.
const subject=ref('')
const difficulty=ref('')
2.
const onSubjectChange = (value) => {questionForm.value.subject = value;console.log('Selected subject:', value);console.log('Current questionForm:', questionForm.value);};const onDifficultyChange = (value) => {questionForm.value.difficulty=value;console.log('Selected difficulty:', value);console.log('Current questionForm:', questionForm.value);};
3.
return {subject,difficulty,questionForm,question,error,loading,generateQuestion,onSubjectChange,onDifficultyChange,};

3.UI重构

<style scoped>
.ai-question-container {display: flex;flex-direction: column;align-items: center;padding: 20px;background-color: #f0f2f5;min-height: 77vh;border-radius: 20px;
}.question-card {width: 60vw;margin-bottom: 20px;background-color: #ffffff;border-radius: 16px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease;
}/*取消上移动画
.question-card:hover {transform: translateY(-5px);
}
*/.question-header {text-align: center;margin-bottom: 20px;}.question-title {font-size: 24px;color: #333333;margin: 0;
}.question-subtitle {font-size: 14px;color: #666666;margin: 5px 0 0;
}.question-form {display: flex;flex-direction: column;align-items: center;
}
.select-area{display: flex;justify-content: space-between;
}.select-field {width: 100%;max-width: 400px;min-width: 300px;
}.generate-button {width: 100%;max-width: 400px;display: flex;align-items: center;justify-content: center;background-color: #409eff;border-color: #409eff;color: #ffffff;font-size: 16px;padding: 12px 20px;margin-top: 20px;transition: background-color 0.3s ease;
}.generate-button:hover {background-color: #66b1ff;
}.button-icon {margin-right: 8px;
}.error-message {margin-top: 20px;
}.question-display {width: 100%;max-width: 600px;margin-top: 20px;padding: 20px;background-color: #ffffff;border-radius: 16px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease;
}/*
.question-display:hover {transform: translateY(-5px);
}
*/.question-content {text-align: center;
}.question-subject {font-size: 18px;color: #333333;margin: 0 0 10px;
}.question-difficulty {font-size: 14px;color: #666666;margin: 0 0 10px;
}.question-description {font-size: 16px;color: #333333;margin: 0 0 10px;
}.question-answer {font-size: 16px;color: #333333;margin: 0 0 10px;
}.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s;
}.fade-enter-from,
.fade-leave-to {opacity: 0;
}
.question-content-title{display: flex;justify-content: space-between
}
</style>

三、408习题训练

1.UI重构

.filter-card {margin-bottom: 10px;margin-left: -30px;width: 100%;border-radius: 10px;
}.filter-form {display: flex;justify-content: space-between;flex-wrap: wrap;gap: 10px;margin-bottom: -10px;
}.filter-form-item{width: 50vw;padding-left: 300px;
}

2.统一名称

      <h1 class="title" style="margin-top: -5px">408习题训练</h1>

四、错题本

1.UI重构

.container {max-width: 1000px;margin: 0 auto;padding: 20px;
}.title {font-size: 28px;font-weight: bold;color: #303133;text-align: center;margin-bottom: 20px;
}.loading-container {min-height: 200px;
}.question-list {display: flex;flex-direction: column;gap: 20px;
}.question-card {padding: 0 20px;
}.el-text-id{font-size: 15px;font-weight: bold;margin-left: 88%;
}.question-stem {font-size: 16px;font-weight: 500;color: #303133;margin-bottom: 10px;white-space: pre-wrap;font-family: 'Courier New', Courier, monospace;
}.options {margin-bottom: 10px;
}.option-item {display: block;margin-bottom: 8px;
}.answer-input {width: 100%;max-width: 400px;
}.actions {margin-top: 10px;display: flex;gap: 10px;
}.answer-analysis {margin-top: 10px;padding: 10px;background-color: #f5f7fa;border-radius: 4px;
}.empty-state {margin-top: 20px;
}

<template><div class="container"><h1 class="title">错题本</h1><!-- 加载状态 --><div v-if="loading" class="loading-container"><el-skeleton :rows="5" animated /></div><!-- 错题列表 --><div v-else-if="favorites.length" class="question-list"><el-card v-for="favorite in favorites" :key="favorite.favoriteId" shadow="hover" class="question-card"><div class="question-content"><el-text class="el-text-id">Question ID: {{ favorite.messageId }}</el-text><pre class="question-stem" style="font-size: 20px;font-weight: bold;">{{ getQuestionStem(favorite.content) }}</pre><!-- 选择题选项 --><div v-if="favorite.type === 1" class="options"><el-radio-group v-model="selectedAnswers[favorite.messageId]" disabled><el-radiov-for="(option, optionIndex) in parseOptions(favorite.content)":key="optionIndex":value="option.label":label="`${option.label}. ${option.text}`"class="option-item">{{ option.label }}. {{ option.text }}</el-radio></el-radio-group></div><!-- 填空题答案 --><div v-else><el-inputv-model="selectedAnswers[favorite.messageId]"placeholder="请输入答案"class="answer-input"disabled></el-input></div><!-- 答案与解析 --><div class="answer-analysis"><p><strong>答案：</strong> {{ favorite.answer || '无答案' }}</p><p><strong>解析：</strong> {{ favorite.analysis || '无解析' }}</p></div></div><div class="actions"><el-button type="text" @click="deleteFavorite(favorite.favoriteId)" style="font-size:20px;font-weight: bold;margin-left: 90%">取消收藏</el-button></div></el-card></div><!-- 空状态 --><el-empty v-else description="暂无收藏的题目" class="empty-state"><el-button type="primary" @click="$router.push('/personalized-exercises')">去刷题</el-button></el-empty></div>
</template>