|
@@ -650,57 +650,53 @@
|
|
<!-- 步骤3:系统设置 -->
|
|
<!-- 步骤3:系统设置 -->
|
|
<div v-if="currentStep === 3" class="ai-video-content">
|
|
<div v-if="currentStep === 3" class="ai-video-content">
|
|
<div class="system-settings">
|
|
<div class="system-settings">
|
|
- <!-- 排名区间设置 -->
|
|
|
|
|
|
+ <!-- 面试官形象设置 -->
|
|
<div class="setting-section">
|
|
<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>
|
|
</div>
|
|
-
|
|
|
|
- <div class="score-display">
|
|
|
|
- <span>分数</span>
|
|
|
|
- <div class="score-range">{{ rankSettings.minScore }} - {{ rankSettings.maxScore }} 分</div>
|
|
|
|
- </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>
|
|
- <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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -2590,6 +2586,37 @@ const addDimension = () => {
|
|
continueAdd.value = false;
|
|
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>
|
|
</script>
|
|
|
|
|
|
@@ -3084,31 +3111,73 @@ const addDimension = () => {
|
|
/* 步骤3:系统设置样式 */
|
|
/* 步骤3:系统设置样式 */
|
|
.system-settings {
|
|
.system-settings {
|
|
width: 100%;
|
|
width: 100%;
|
|
|
|
+ .setting-item{
|
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
|
+ border-radius: 30px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.setting-section {
|
|
.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 {
|
|
.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>
|
|
</style>
|