408 lines
13 KiB
Vue
408 lines
13 KiB
Vue
<template>
|
||
<!-- 一键修复抽屉 — 从右侧滑入，展示所有模块的诊断修复 -->
|
||
<Teleport to="body">
|
||
<!-- 遮罩层 -->
|
||
<Transition name="fix-all-drawer-overlay">
|
||
<div
|
||
v-if="modelValue"
|
||
class="fix-all-drawer-overlay"
|
||
@click="handleClose"
|
||
/>
|
||
</Transition>
|
||
|
||
<!-- 抽屉主体 -->
|
||
<Transition name="fix-all-drawer-slide">
|
||
<div v-if="modelValue" class="fix-all-drawer" @click.stop>
|
||
<!-- 顶部栏 -->
|
||
<div class="fix-all-drawer__header">
|
||
<button class="fix-all-drawer__close-btn" @click="handleClose" aria-label="收起">
|
||
<svg viewBox="0 0 16 16" fill="none" class="fix-all-drawer__close-icon">
|
||
<path d="M10 3l-5 5 5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
<h3 class="fix-all-drawer__title">一键修复</h3>
|
||
</div>
|
||
|
||
<!-- 可滚动内容区 -->
|
||
<div class="fix-all-drawer__body">
|
||
<!-- 遍历每个有诊断数据的模块 -->
|
||
<template v-for="module in moduleDataList" :key="module.moduleType">
|
||
<!-- 模块标题 -->
|
||
<h4 class="fix-all-drawer__module-title">{{ moduleTitleMap[module.moduleType] }}</h4>
|
||
|
||
<!-- 遍历该模块下每条经历/记录 -->
|
||
<div
|
||
v-for="record in module.records"
|
||
:key="record.issueId"
|
||
class="fix-all-drawer__record"
|
||
>
|
||
<!-- 经历标识（经历类模块显示标题，summary不显示） -->
|
||
<p v-if="record.recordLabel" class="fix-all-drawer__record-label">{{ record.recordLabel }}</p>
|
||
|
||
<!-- 原文编辑区 -->
|
||
<div class="fix-all-drawer__card">
|
||
<textarea
|
||
v-model="record.editText"
|
||
class="fix-all-drawer__textarea"
|
||
placeholder="原文内容…"
|
||
@input="autoResizeTextarea($event)"
|
||
/>
|
||
</div>
|
||
|
||
<!-- AI 润色结果区 -->
|
||
<div class="fix-all-drawer__ai-section">
|
||
<p class="fix-all-drawer__ai-label">✦ AI润色结果</p>
|
||
<div class="fix-all-drawer__card fix-all-drawer__card--ai">
|
||
<p class="fix-all-drawer__ai-text">{{ record.polishText }}</p>
|
||
</div>
|
||
<!-- 操作按钮 -->
|
||
<div class="fix-all-drawer__ai-actions">
|
||
<button class="fix-all-drawer__action-btn fix-all-drawer__action-btn--replace" @click="handleReplaceToOriginal(record)">+替换为此内容</button>
|
||
<button class="fix-all-drawer__action-btn fix-all-drawer__action-btn--regenerate" @click="handleRegenerate(record)">↻ 重新生成</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- 底部按钮区 -->
|
||
<div class="fix-all-drawer__footer">
|
||
<button class="fix-all-drawer__footer-btn fix-all-drawer__footer-btn--use-ai" @click="handleUseAllAi">一键使用AI润色结果</button>
|
||
<button class="fix-all-drawer__footer-btn fix-all-drawer__footer-btn--save" @click="handleSaveCurrent">保存当前修改</button>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
<!-- 全屏加载遮罩 -->
|
||
<FullscreenLoading :visible="fullLoading" :text="fullLoadingText" title="Nova 正在帮您努力处理~" />
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch, nextTick } from 'vue'
|
||
import type { DiagnosisIssue, DescriptionParagraph } from '@/api/resume'
|
||
import { polishDiagnosisIssue, resolveDiagnosisIssue } from '@/api/resume'
|
||
import FullscreenLoading from '@/components/FullscreenLoading.vue'
|
||
|
||
// ==================== Props ====================
|
||
|
||
/** 单条经历记录的原始数据（父组件传入） */
|
||
export interface OriginalRecordData {
|
||
/** 模块类型 */
|
||
moduleType: string
|
||
/** 经历记录 ID（summary 时为 resumeId） */
|
||
recordId: string
|
||
/** 经历显示标题（如"北京大学-经历描述"） */
|
||
recordLabel: string
|
||
/** 原文内容：summary 为字符串，经历为 DescriptionParagraph[] */
|
||
originalContent: string | DescriptionParagraph[]
|
||
}
|
||
|
||
const props = defineProps<{
|
||
/** 控制抽屉显示/隐藏 */
|
||
modelValue: boolean
|
||
/** 所有诊断问题列表 */
|
||
issues: DiagnosisIssue[]
|
||
/** 所有模块的原始经历数据 */
|
||
originalRecords: OriginalRecordData[]
|
||
}>()
|
||
|
||
|
||
/** 提交结果的单条数据结构 */
|
||
export interface FixAllSubmitItem {
|
||
/** 模块类型 */
|
||
moduleType: string
|
||
/** 经历记录 ID */
|
||
recordId: string
|
||
/** 新的内容：summary 为字符串，经历为 DescriptionParagraph[] */
|
||
newContent: string | DescriptionParagraph[]
|
||
/** 关联的 issue ID */
|
||
issueId: string
|
||
}
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'update:modelValue', val: boolean): void
|
||
/** 保存当前修改：携带有变化的模块数据 */
|
||
(e: 'save', items: FixAllSubmitItem[]): void
|
||
/** 一键使用AI润色结果：携带所有模块数据（强制更新） */
|
||
(e: 'useAllAi', items: FixAllSubmitItem[]): void
|
||
}>()
|
||
|
||
// ==================== 内部数据结构 ====================
|
||
|
||
/** 单条记录的内部状态 */
|
||
interface RecordState {
|
||
/** 关联的 issue ID */
|
||
issueId: string
|
||
/** 模块类型 */
|
||
moduleType: string
|
||
/** 经历记录 ID */
|
||
recordId: string
|
||
/** 经历显示标题 */
|
||
recordLabel: string
|
||
/** 原文编辑框内容（用户可编辑） */
|
||
editText: string
|
||
/** AI 润色结果文本 */
|
||
polishText: string
|
||
/** 原始内容（用于对比是否有变化） */
|
||
originalText: string
|
||
}
|
||
|
||
/** 模块分组数据 */
|
||
interface ModuleGroup {
|
||
/** 模块类型 */
|
||
moduleType: string
|
||
/** 该模块下所有记录 */
|
||
records: RecordState[]
|
||
}
|
||
|
||
// ==================== 模块标题映射 ====================
|
||
|
||
/** 模块类型到中文标题的映射 */
|
||
const moduleTitleMap: Record<string, string> = {
|
||
summary: '个人概述',
|
||
education: '教育背景',
|
||
work: '工作经历',
|
||
internship: '实习经历',
|
||
project: '项目经历',
|
||
competition: '竞赛经历',
|
||
}
|
||
|
||
/** 模块顺序 */
|
||
const moduleOrder = ['summary', 'education', 'work', 'internship', 'project', 'competition']
|
||
|
||
// ==================== 响应式数据 ====================
|
||
|
||
/** 全屏加载是否显示 */
|
||
const fullLoading = ref(false)
|
||
/** 全屏加载文案 */
|
||
const fullLoadingText = ref('')
|
||
|
||
/** 所有模块分组后的数据列表 */
|
||
const moduleDataList = ref<ModuleGroup[]>([])
|
||
|
||
// ==================== 工具方法 ====================
|
||
|
||
/** 生成 8 位随机字母数字 ID */
|
||
function generateId(): string {
|
||
return Math.random().toString(36).substring(2, 10)
|
||
}
|
||
|
||
/** 将 DescriptionParagraph[] 拼接为字符串（每段文字后加换行） */
|
||
function descriptionToText(desc: DescriptionParagraph[]): string {
|
||
return desc.map(d => d.text || '').join('\n')
|
||
}
|
||
|
||
/** 将文本按换行拆分为 DescriptionParagraph[]（每行生成新 id） */
|
||
function textToDescription(text: string): DescriptionParagraph[] {
|
||
const lines = text.split('\n').filter(line => line.trim() !== '')
|
||
return lines.map(line => ({ id: generateId(), text: line }))
|
||
}
|
||
|
||
/** 获取 issue 的 optimizedContent 转为文本 */
|
||
function getOptimizedText(issue: DiagnosisIssue): string {
|
||
const oc = issue.optimizedContent
|
||
if (!oc) return ''
|
||
// summary：optimizedContent 是字符串
|
||
if (typeof oc === 'string') return oc
|
||
// 经历模块：数组对象，取每个子元素的 optimizedContent 或 text 拼接
|
||
if (Array.isArray(oc)) {
|
||
return oc.map((item: any) => item.optimizedContent || item.text || '').join('\n')
|
||
}
|
||
return ''
|
||
}
|
||
|
||
// ==================== 初始化逻辑 ====================
|
||
|
||
/** 抽屉打开时初始化数据 */
|
||
watch(() => props.modelValue, (val) => {
|
||
if (val) {
|
||
initData()
|
||
}
|
||
})
|
||
|
||
/** 根据 props 中的 issues 和 originalRecords 初始化内部数据 */
|
||
function initData() {
|
||
const groupMap: Record<string, RecordState[]> = {}
|
||
|
||
// 遍历每个 issue，找到对应的原始记录数据
|
||
for (const issue of props.issues) {
|
||
if (!issue.id || !issue.moduleType || issue.status !== 0) continue
|
||
|
||
const moduleType = issue.moduleType
|
||
const recordId = issue.moduleRecordId || ''
|
||
|
||
// 找到对应的原始记录
|
||
const originalRecord = props.originalRecords.find(
|
||
r => r.moduleType === moduleType && r.recordId === recordId
|
||
)
|
||
|
||
// 原文转文本
|
||
let originalText = ''
|
||
if (originalRecord) {
|
||
if (typeof originalRecord.originalContent === 'string') {
|
||
originalText = originalRecord.originalContent
|
||
} else if (Array.isArray(originalRecord.originalContent)) {
|
||
originalText = descriptionToText(originalRecord.originalContent)
|
||
}
|
||
}
|
||
|
||
// AI 润色结果：初始用 optimizedContent
|
||
const polishText = getOptimizedText(issue)
|
||
|
||
const state: RecordState = {
|
||
issueId: issue.id,
|
||
moduleType,
|
||
recordId,
|
||
recordLabel: originalRecord?.recordLabel || '',
|
||
editText: originalText,
|
||
polishText,
|
||
originalText,
|
||
}
|
||
|
||
if (!groupMap[moduleType]) {
|
||
groupMap[moduleType] = []
|
||
}
|
||
groupMap[moduleType].push(state)
|
||
}
|
||
|
||
// 按模块顺序排列
|
||
moduleDataList.value = moduleOrder
|
||
.filter(mt => groupMap[mt]?.length)
|
||
.map(mt => ({ moduleType: mt, records: groupMap[mt] }))
|
||
|
||
// 等 DOM 渲染完成后自动调整 textarea 高度
|
||
nextTick(() => {
|
||
const textareas = document.querySelectorAll('.fix-all-drawer__textarea')
|
||
textareas.forEach(el => {
|
||
const ta = el as HTMLTextAreaElement
|
||
ta.style.height = 'auto'
|
||
ta.style.height = ta.scrollHeight + 'px'
|
||
})
|
||
})
|
||
}
|
||
|
||
// ==================== 事件处理 ====================
|
||
|
||
/** textarea 自适应高度 */
|
||
function autoResizeTextarea(event: Event) {
|
||
const el = event.target as HTMLTextAreaElement
|
||
el.style.height = 'auto'
|
||
el.style.height = el.scrollHeight + 'px'
|
||
}
|
||
|
||
/** 替换为此内容 — 将 AI 润色结果替换到原文编辑框 */
|
||
function handleReplaceToOriginal(record: RecordState) {
|
||
record.editText = record.polishText
|
||
// 触发 textarea 重新计算高度
|
||
nextTick(() => {
|
||
const textareas = document.querySelectorAll('.fix-all-drawer__textarea')
|
||
textareas.forEach(el => {
|
||
const ta = el as HTMLTextAreaElement
|
||
ta.style.height = 'auto'
|
||
ta.style.height = ta.scrollHeight + 'px'
|
||
})
|
||
})
|
||
}
|
||
|
||
/** 重新生成 — 调用 AI 润色接口获取新结果 */
|
||
async function handleRegenerate(record: RecordState) {
|
||
if (!record.issueId) return
|
||
|
||
// 收集当前原文编辑框内容作为输入
|
||
let content: string[]
|
||
if (record.moduleType === 'summary') {
|
||
content = [record.editText.trim()]
|
||
} else {
|
||
content = record.editText.split('\n').filter(line => line.trim() !== '')
|
||
}
|
||
|
||
if (!content.length) {
|
||
ElMessage.warning('原文内容为空，无法生成')
|
||
return
|
||
}
|
||
|
||
fullLoadingText.value = 'AI 重新生成中…'
|
||
fullLoading.value = true
|
||
|
||
try {
|
||
const res = await polishDiagnosisIssue(content)
|
||
if (res.code === 0 && res.data?.content) {
|
||
// 将返回的数组内容用换行拼接
|
||
record.polishText = res.data.content.join('\n')
|
||
ElMessage.success('重新生成完成')
|
||
} else {
|
||
ElMessage.error(res.msg || '生成失败，请稍后重试')
|
||
}
|
||
} catch {
|
||
ElMessage.error('请求失败，请稍后重试')
|
||
} finally {
|
||
fullLoading.value = false
|
||
}
|
||
}
|
||
|
||
/** 一键使用AI润色结果 — 所有模块强制使用 AI 润色结果更新 */
|
||
function handleUseAllAi() {
|
||
const items: FixAllSubmitItem[] = []
|
||
|
||
for (const module of moduleDataList.value) {
|
||
for (const record of module.records) {
|
||
let newContent: string | DescriptionParagraph[]
|
||
if (record.moduleType === 'summary') {
|
||
// summary 直接用润色文本
|
||
newContent = record.polishText
|
||
} else {
|
||
// 经历模块：按换行拆分为 DescriptionParagraph[]
|
||
newContent = textToDescription(record.polishText)
|
||
}
|
||
items.push({
|
||
moduleType: record.moduleType,
|
||
recordId: record.recordId,
|
||
newContent,
|
||
issueId: record.issueId,
|
||
})
|
||
}
|
||
}
|
||
|
||
emit('useAllAi', items)
|
||
emit('update:modelValue', false)
|
||
}
|
||
|
||
/** 保存当前修改 — 只提交内容有变化的模块 */
|
||
function handleSaveCurrent() {
|
||
const items: FixAllSubmitItem[] = []
|
||
|
||
for (const module of moduleDataList.value) {
|
||
for (const record of module.records) {
|
||
// 对比当前编辑内容和原始内容是否有变化
|
||
if (record.editText.trim() === record.originalText.trim()) continue
|
||
|
||
let newContent: string | DescriptionParagraph[]
|
||
if (record.moduleType === 'summary') {
|
||
newContent = record.editText
|
||
} else {
|
||
newContent = textToDescription(record.editText)
|
||
}
|
||
items.push({
|
||
moduleType: record.moduleType,
|
||
recordId: record.recordId,
|
||
newContent,
|
||
issueId: record.issueId,
|
||
})
|
||
}
|
||
}
|
||
|
||
if (!items.length) {
|
||
ElMessage.info('没有检测到内容变化')
|
||
return
|
||
}
|
||
|
||
emit('save', items)
|
||
emit('update:modelValue', false)
|
||
}
|
||
|
||
/** 关闭抽屉 */
|
||
function handleClose() {
|
||
emit('update:modelValue', false)
|
||
}
|
||
</script>
|