新版交互调整

2026-06-24 19:03:41 +08:00
parent 065553f53e
commit 8143a89dab
37 changed files with 4929 additions and 4409 deletions
@@ -0,0 +1,228 @@
+<template>
+  <!-- 单条经历内联编辑组件 -->
+  <div class="profile-edit-inline">
+    <div class="profile-edit-inline__body">
+      <!-- 教育经历 -->
+      <template v-if="moduleType === 'education'">
+        <div class="profile-edit-inline__fields-row">
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">学校</label><input class="profile-edit-inline__input" placeholder="请输入学校名称" v-model="form.school" /></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">专业</label><input class="profile-edit-inline__input" placeholder="请输入专业名称" v-model="form.major" /></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">学历</label><select class="profile-edit-inline__input" v-model="form.degree"><option value="大专">大专</option><option value="本科">本科</option><option value="硕士">硕士</option><option value="博士">博士</option></select></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">学历类型</label><select class="profile-edit-inline__input" v-model="form.studyType"><option value="全日制">全日制</option><option value="非全日制">非全日制</option></select></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">就读时间</label>
+            <div class="profile-edit-inline__date-range">
+              <el-date-picker v-model="form.startDate" type="month" placeholder="开始" format="YYYY-MM" value-format="YYYY-MM" class="profile-edit-inline__date-picker" :teleported="true" popper-class="profile-drawer-date-popper" />
+              <span class="profile-edit-inline__date-sep">-</span>
+              <el-date-picker v-model="form.endDate" type="month" placeholder="结束" format="YYYY-MM" value-format="YYYY-MM" class="profile-edit-inline__date-picker" :teleported="true" popper-class="profile-drawer-date-popper" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- 工作经历 -->
+      <template v-else-if="moduleType === 'work'">
+        <div class="profile-edit-inline__fields-row">
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">公司名称</label><input class="profile-edit-inline__input" placeholder="请输入公司名称" v-model="form.companyName" /></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">职位</label><input class="profile-edit-inline__input" placeholder="请输入职位" v-model="form.position" /></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">时间</label>
+            <div class="profile-edit-inline__date-range">
+              <el-date-picker v-model="form.startDate" type="month" placeholder="开始" format="YYYY-MM" value-format="YYYY-MM" class="profile-edit-inline__date-picker" :teleported="true" popper-class="profile-drawer-date-popper" />
+              <span class="profile-edit-inline__date-sep">-</span>
+              <el-date-picker v-model="form.endDate" type="month" placeholder="结束" format="YYYY-MM" value-format="YYYY-MM" class="profile-edit-inline__date-picker" :teleported="true" popper-class="profile-drawer-date-popper" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- 实习经历 -->
+      <template v-else-if="moduleType === 'internship'">
+        <div class="profile-edit-inline__fields-row">
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">公司名称</label><input class="profile-edit-inline__input" placeholder="请输入公司名称" v-model="form.companyName" /></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">职位</label><input class="profile-edit-inline__input" placeholder="请输入职位" v-model="form.position" /></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">时间</label>
+            <div class="profile-edit-inline__date-range">
+              <el-date-picker v-model="form.startDate" type="month" placeholder="开始" format="YYYY-MM" value-format="YYYY-MM" class="profile-edit-inline__date-picker" :teleported="true" popper-class="profile-drawer-date-popper" />
+              <span class="profile-edit-inline__date-sep">-</span>
+              <el-date-picker v-model="form.endDate" type="month" placeholder="结束" format="YYYY-MM" value-format="YYYY-MM" class="profile-edit-inline__date-picker" :teleported="true" popper-class="profile-drawer-date-popper" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- 项目经历 -->
+      <template v-else-if="moduleType === 'project'">
+        <div class="profile-edit-inline__fields-row">
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">项目名称</label><input class="profile-edit-inline__input" placeholder="请输入项目名称" v-model="form.projectName" /></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">项目角色</label><input class="profile-edit-inline__input" placeholder="请输入项目角色" v-model="form.role" /></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">时间</label>
+            <div class="profile-edit-inline__date-range">
+              <el-date-picker v-model="form.startDate" type="month" placeholder="开始" format="YYYY-MM" value-format="YYYY-MM" class="profile-edit-inline__date-picker" :teleported="true" popper-class="profile-drawer-date-popper" />
+              <span class="profile-edit-inline__date-sep">-</span>
+              <el-date-picker v-model="form.endDate" type="month" placeholder="结束" format="YYYY-MM" value-format="YYYY-MM" class="profile-edit-inline__date-picker" :teleported="true" popper-class="profile-drawer-date-popper" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- 竞赛经历 -->
+      <template v-else-if="moduleType === 'competition'">
+        <div class="profile-edit-inline__fields-row">
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">竞赛名称</label><input class="profile-edit-inline__input" placeholder="请输入竞赛名称" v-model="form.competitionName" /></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">获奖名次</label><input class="profile-edit-inline__input" placeholder="请输入获奖名次" v-model="form.award" /></div>
+          <div class="profile-edit-inline__field-item"><label class="profile-edit-inline__label">获奖时间</label><el-date-picker v-model="form.awardDate" type="month" placeholder="请选择" format="YYYY-MM" value-format="YYYY-MM" class="profile-edit-inline__date-picker" :teleported="true" popper-class="profile-drawer-date-popper" /></div>
+        </div>
+      </template>
+
+      <!-- 经历描述 + AI润色 -->
+      <div class="profile-edit-inline__summary-header">
+        <label class="profile-edit-inline__label">经历描述</label>
+        <button class="profile-edit-inline__ai-polish-btn" @click="handleAiPolish" :disabled="aiPolishing">
+          <span>✦ AI润色</span>
+        </button>
+      </div>
+      <div class="profile-edit-inline__field">
+        <textarea class="profile-edit-inline__textarea" placeholder="请输入经历描述" v-model="descriptionText" rows="4"></textarea>
+      </div>
+    </div>
+
+    <!-- 底部操作按钮 -->
+    <div class="profile-edit-inline__footer">
+      <button class="profile-edit-inline__save-btn" @click="handleSave">保存</button>
+      <button class="profile-edit-inline__cancel-btn" @click="handleCancel">取消</button>
+    </div>
+
+    <!-- AI润色结果（保存取消下方） -->
+    <div v-if="aiPolishResult" class="profile-edit-inline__ai-result">
+      <p class="profile-edit-inline__ai-result-label">✦ AI润色结果</p>
+      <div class="profile-edit-inline__ai-result-card">
+        <p class="profile-edit-inline__ai-result-text">{{ aiPolishResult }}</p>
+      </div>
+      <div class="profile-edit-inline__ai-result-actions">
+        <button class="profile-edit-inline__ai-replace-btn" @click="handleReplaceWithAi">+ 替换为此内容</button>
+        <button class="profile-edit-inline__ai-regenerate-btn" @click="handleAiPolish" :disabled="aiPolishing">↻ 重新生成</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { ElMessage, ElLoading } from 'element-plus'
+import { polishDiagnosisIssue } from '@/api/resume'
+
+/** 描述段落结构 */
+interface DescriptionParagraph {
+  id: string
+  text: string
+}
+
+/** Props */
+const props = defineProps<{
+  /** 经历模块类型 */
+  moduleType: string
+  /** 初始数据（编辑已有经历时传入，新增时为空） */
+  initialData?: Record<string, any>
+}>()
+
+/** Emits */
+const emit = defineEmits<{
+  (e: 'save', data: Record<string, any>): void
+  (e: 'cancel'): void
+}>()
+
+/** 表单数据 */
+const form = ref<Record<string, any>>({})
+
+/** 经历描述文本（多段用换行拼接） */
+const descriptionText = ref('')
+
+/** AI润色结果 */
+const aiPolishResult = ref('')
+
+/** AI润色中 */
+const aiPolishing = ref(false)
+
+/** 生成短ID */
+const generateId = (): string => Math.random().toString(36).substring(2, 8)
+
+/** 初始化表单 */
+function initForm() {
+  aiPolishResult.value = ''
+  if (props.initialData) {
+    form.value = { ...props.initialData }
+    // 将 description 数组拼接为文本
+    if (props.initialData.description?.length) {
+      descriptionText.value = props.initialData.description.map((d: DescriptionParagraph) => d.text).join('\n')
+    } else {
+      descriptionText.value = ''
+    }
+  } else {
+    // 新增模式 — 空表单
+    form.value = {}
+    descriptionText.value = ''
+  }
+}
+
+// 立即初始化
+initForm()
+
+// 监听 initialData 变化
+watch(() => props.initialData, () => { initForm() }, { deep: true })
+
+/** AI润色 */
+async function handleAiPolish() {
+  const text = descriptionText.value.trim()
+  if (!text) {
+    ElMessage.warning('请先输入经历描述')
+    return
+  }
+  aiPolishing.value = true
+  const loading = ElLoading.service({ lock: true, text: 'AI润色中…', background: 'rgba(0,0,0,0.5)' })
+  try {
+    const content = text.split('\n').filter(s => s.trim())
+    const res = await polishDiagnosisIssue(content)
+    if (res.code === 0 && res.data?.content) {
+      aiPolishResult.value = res.data.content.join('\n')
+      ElMessage.success('AI润色完成')
+    } else {
+      ElMessage.error(res.msg || '润色失败')
+    }
+  } catch {
+    ElMessage.error('请求失败')
+  } finally {
+    aiPolishing.value = false
+    loading.close()
+  }
+}
+
+/** 替换为AI润色内容 */
+function handleReplaceWithAi() {
+  if (aiPolishResult.value) {
+    descriptionText.value = aiPolishResult.value
+  }
+}
+
+/** 保存 */
+function handleSave() {
+  // 将描述文本按换行拆分为 description 数组
+  const lines = descriptionText.value.split('\n').filter(s => s.trim())
+  const description: DescriptionParagraph[] = lines.map(text => ({
+    id: generateId(),
+    text,
+  }))
+  // 如果有原始 description，保留原有的 id
+  if (props.initialData?.description?.length) {
+    props.initialData.description.forEach((d: DescriptionParagraph, i: number) => {
+      if (i < description.length) {
+        description[i].id = d.id
+      }
+    })
+  }
+  emit('save', { ...form.value, description })
+}
+
+/** 取消 */
+function handleCancel() {
+  emit('cancel')
+}
+</script>