yangg пре 2 месеци
родитељ
комит
a8e9fccfee
1 измењених фајлова са 205 додато и 66 уклоњено
  1. 205 66
      src/views/position/detail/index.vue

+ 205 - 66
src/views/position/detail/index.vue

@@ -650,57 +650,53 @@
       <!-- 步骤3:系统设置 -->
       <div v-if="currentStep === 3" class="ai-video-content">
         <div class="system-settings">
-          <!-- 排名区间设置 -->
+          <!-- 面试官形象设置 -->
           <div class="setting-section">
-            <div class="section-header">排名区间设置</div>
-            <div class="rank-settings">
-              <div class="rank-range">
-                <span>排名前</span>
-                <div class="range-inputs">
-                  <el-input v-model="rankSettings.min" size="small" class="percent-input">
-                    <template #suffix>%</template>
-                  </el-input>
-                  <span>-</span>
-                  <el-input v-model="rankSettings.max" size="small" class="percent-input">
-                    <template #suffix>%</template>
-                  </el-input>
+            <div class="section-header">请选择面试官形象</div>
+            <div class="interviewer-avatars">
+              <div
+                v-for="avatar in interviewerAvatars"
+                :key="avatar.id"
+                class="avatar-item"
+                :class="{ active: selectedInterviewer.id === avatar.id }"
+                @click="selectedInterviewer = avatar"
+              >
+                <div class="avatar-wrapper">
+                  <div class="avatar-circle" :class="{ selected: selectedInterviewer.id === avatar.id }">
+                    <img :src="avatar.image" :alt="avatar.name" />
+                  </div>
+                  <div class="avatar-name">{{ avatar.name }}</div>
                 </div>
               </div>
-              
-              <div class="score-display">
-                <span>分数</span>
-                <div class="score-range">{{ rankSettings.minScore }} - {{ rankSettings.maxScore }} 分</div>
-              </div>
             </div>
-            
-            <el-button type="primary" plain class="add-rank-btn">
-              <el-icon><Plus /></el-icon>
-              添加排名区间
-            </el-button>
-          </div>
-          
-          <!-- AI视频有效期 -->
-          <div class="setting-section">
-            <div class="section-header">AI视频有效期</div>
-            <div class="validity-setting">
-              <el-switch v-model="validityEnabled" />
-              <span class="validity-label">开启AI视频有效期</span>
+            <div>追问风格:  <el-select v-model="settings.interruptionMode" placeholder="请选择">
+                <el-option label="从上一问重新作答" value="previous" />
+                <el-option label="从当前问题作答" value="current" />
+              </el-select></div>
+
+            <!-- 面试设置选项 -->
+            <div class="interview-settings">
+              <div class="setting-item">
+                <div class="setting-label">「回答视频保留」</div>
+                <el-switch v-model="settings.keepVideo" />
+                <div class="setting-desc">当候选人不符合中断条件时,保留其回答视频</div>
+              </div>
+
+              <div class="setting-item">
+                <div class="setting-label">「中断后作答限制」</div>
+                <div class="setting-options">
+                  <el-radio v-model="settings.interruptionMode" label="previous">从上一问重新作答</el-radio>
+                  <el-radio v-model="settings.interruptionMode" label="current">从当前问题作答</el-radio>
+                </div>
+                <div class="setting-desc"></div>
+              </div>
+
+              <div class="setting-item">
+                <div class="setting-label">「智慧追问」</div>
+                <el-switch v-model="settings.smartFollowUp" />
+                <div class="setting-desc">当候选人给出特殊关键词时,系统将自动追问</div>
+              </div>
             </div>
-            <div class="validity-tip">暂未设置,设置后候选人超过有效期则不可进入</div>
-          </div>
-          
-          <!-- AI模型版本 -->
-          <div class="setting-section">
-            <div class="section-header">AI模型版本</div>
-            <el-select v-model="aiModelVersion" placeholder="请选择" class="model-select">
-              <el-option label="标准版" value="standard"></el-option>
-            </el-select>
-          </div>
-          
-          <!-- 评分AI -->
-          <div class="setting-section">
-            <div class="section-header">评分AI</div>
-            <!-- 评分AI设置内容 -->
           </div>
         </div>
       </div>
@@ -2590,6 +2586,37 @@ const addDimension = () => {
   continueAdd.value = false;
 };
 
+const settings = reactive({
+  keepVideo: false,
+  interruptionMode: 'previous',
+  smartFollowUp: false
+});
+
+interface InterviewerAvatar {
+  id: number;
+  name: string;
+  image: string;
+}
+
+const interviewerAvatars = ref([
+  {
+    id: 1,
+    name: 'Jessica',
+    image: '/avatars/jessica.png'
+  },
+  {
+    id: 2,
+    name: 'Mike',
+    image: '/avatars/mike.png'
+  },
+  {
+    id: 3,
+    name: 'Sarah',
+    image: '/avatars/sarah.png'
+  }
+]);
+
+const selectedInterviewer = ref(interviewerAvatars.value[0]);
 
 </script>
 
@@ -3084,31 +3111,73 @@ const addDimension = () => {
 /* 步骤3:系统设置样式 */
 .system-settings {
   width: 100%;
+  .setting-item{
+    border: 1px solid #ebeef5;
+    border-radius: 30px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
 }
 
 .setting-section {
-  margin-bottom: 30px;
-  border-bottom: 1px solid #ebeef5;
-  padding-bottom: 20px;
-}
+  padding: 20px;
+  
+  .section-header {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: #333;
+  }
 
-.section-header {
-  font-weight: bold;
-  color: #303133;
-  margin-bottom: 15px;
-  position: relative;
-  padding-left: 10px;
-}
+  .interviewer-avatars {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 30px;
 
-.section-header::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 4px;
-  height: 16px;
-  background-color: #67C23A;
+    .avatar-item {
+      cursor: pointer;
+      text-align: center;
+      
+      .avatar-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .avatar-circle {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        border: 2px solid transparent;
+        overflow: hidden;
+        transition: all 0.3s ease;
+
+        &.selected {
+          border-color: #0052D9;
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .avatar-name {
+        font-size: 14px;
+        color: #666;
+      }
+
+      &:hover {
+        .avatar-circle {
+          border-color: #0052D9;
+          opacity: 0.8;
+        }
+      }
+    }
+  }
 }
 
 .rank-settings {
@@ -4095,4 +4164,74 @@ const addDimension = () => {
     }
   }
 }
+
+.interviewer-avatars {
+  display: flex;
+  gap: 20px;
+  margin: 20px 0;
+}
+
+.avatar-item {
+  text-align: center;
+  cursor: pointer;
+}
+
+.avatar-item.selected {
+  position: relative;
+}
+
+.avatar-item.selected::after {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 6px;
+  height: 6px;
+  background-color: #0066FF;
+  border-radius: 50%;
+}
+
+.avatar-image {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.avatar-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-name {
+  font-size: 14px;
+  color: #333;
+}
+
+.interview-settings {
+  margin-top: 30px;
+}
+
+.setting-item {
+  margin-bottom: 20px;
+}
+
+.setting-label {
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+
+.setting-desc {
+  font-size: 12px;
+  color: #666;
+  margin-top: 5px;
+}
+
+.setting-options {
+  display: flex;
+  gap: 20px;
+}
 </style>