创新项目实训开发日志7

一、开发简介

核心工作内容："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-radio
                v-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-input
              v-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>