全项目加载动效重做和简历经历区域的时间和编辑按钮同位置显示切换

2026-06-30 17:09:09 +08:00
parent 0aebde7bd3
commit 8773c65b28
24 changed files with 610 additions and 489 deletions
@@ -160,28 +160,30 @@
                  <rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
                  <path d="M2 5.5l6 4 6-4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
                </svg>
-                {{ resumeMain.email }}
+                <span>{{ resumeMain.email }}</span>
              </span>
              <!-- 手机号 -->
              <span v-if="resumeMain.mobileNumber" class="resume-detail__contact-item">
                <svg viewBox="0 0 16 16" fill="none" class="resume-detail__contact-icon">
                  <path d="M4 2h2.5l1.5 3-1.5 1.5a8 8 0 003 3L11 8l3 1.5V12a2 2 0 01-2 2C6.5 14 2 9.5 2 4a2 2 0 012-2z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
                </svg>
-                {{ resumeMain.mobileNumber }}
+                <span>{{ resumeMain.mobileNumber }}</span>
              </span>

              <!-- 微信号 -->
              <span v-if="resumeMain.wechatNumber" class="resume-detail__contact-item">
                <el-icon class="fs14 color-9"><ChatLineRound /></el-icon>
-                {{ resumeMain.wechatNumber }}
+                <span>{{ resumeMain.wechatNumber }}</span>
              </span>
              <!-- 作品集链接 -->
-              <span v-if="resumeMain.portfolioUrl" class="resume-detail__contact-item">
-                <svg viewBox="0 0 16 16" fill="none" class="resume-detail__contact-icon">
-                  <path d="M3 8a5 5 0 015-5h1a5 5 0 010 10H8a5 5 0 01-5-5z" stroke="currentColor" stroke-width="1.2"/>
-                  <path d="M7 6l2 2-2 2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+              <span v-if="resumeMain.portfolioUrl" class="resume-detail__contact-item dib">
+                <svg xmlns="http://www.w3.org/2000/svg" class=" mr6" width="0.15rem" height="0.15rem" viewBox="0 0 16 16">
+                  <path d="M0 0h16v16H0z" fill="none" />
+                  <path fill="none" stroke="currentColor" d="M14.5 8A6.5 6.5 0 0 1 8 14.5M14.5 8A6.5 6.5 0 0 0 8 1.5M14.5 8c0 1.657-2.91 3-6.5 3S1.5 9.657 1.5 8m13 0c0-1.657-2.91-3-6.5-3S1.5 6.343 1.5 8M8 14.5A6.5 6.5 0 0 1 1.5 8M8 14.5c1.657 0 3-2.91 3-6.5S9.657 1.5 8 1.5m0 13c-1.657 0-3-2.91-3-6.5s1.343-6.5 3-6.5M1.5 8A6.5 6.5 0 0 1 8 1.5" />
                </svg>
-                <a :href="resumeMain.portfolioUrl" target="_blank" rel="noopener noreferrer" class="resume-detail__portfolio-link">{{ resumeMain.portfolioUrl }}</a>
+
+
+                <a :href="resumeMain.portfolioUrl?.startsWith('http') ? resumeMain.portfolioUrl : `http://${resumeMain.portfolioUrl}`" target="_blank" rel="noopener noreferrer" class="resume-detail__portfolio-link">{{ resumeMain.portfolioUrl }}</a>
              </span>
            </div>
          </template>
@@ -253,13 +255,14 @@
              <div class="resume-detail__exp-row">
                <span class="resume-detail__exp-name">{{ edu.school }}</span>
                <span v-if="edu.major || edu.degree" class="resume-detail__exp-role">{{ edu.major }}{{ edu.degree ? '·' + edu.degree : '' }}</span>
-                <span v-if="edu.startDate || edu.endDate" class="resume-detail__exp-date">{{ edu.startDate }}<span v-if="edu.startDate && edu.endDate">-</span>{{ edu.endDate }}</span>
                <span v-if="hasDiagnosis && getIssueByRecord('education', edu.id!) && getIssueByRecord('education', edu.id!)!.status === 0" class="resume-detail__fix-tag">
                  <svg viewBox="0 0 16 16" class="resume-detail__fix-tag-icon"><circle cx="8" cy="8" r="7" fill="#FF8D0B"/><text x="8" y="12" text-anchor="middle" font-size="11" fill="#fff" font-weight="bold">!</text></svg>
                  建议使用AI润色修复 &gt;&gt;
                  <span class="resume-detail__fix-tooltip">{{ getIssueByRecord('education', edu.id!)!.finding }}</span>
                </span>
                <div class="mlauto dflex-end">
+                  <!-- 时间（默认显示，hover时隐藏） -->
+                  <span v-if="edu.startDate || edu.endDate" class="resume-detail__exp-date resume-detail__exp-date--toggle">{{ edu.startDate }}<span v-if="edu.startDate && edu.endDate">-</span>{{ edu.endDate }}</span>
                  <!-- 编辑按钮 — hover时显示 -->
                  <button class="resume-detail__edit-btn-inline resume-detail__exp-edit-btn" @click="startEditExp('education', edu)" aria-label="编辑">
                    <el-icon><EditPen /></el-icon>
@@ -302,13 +305,14 @@
              <div class="resume-detail__exp-row">
                <span class="resume-detail__exp-name">{{ exp.companyName }}</span>
                <span v-if="exp.position" class="resume-detail__exp-role">{{ exp.position }}</span>
-                <span v-if="exp.startDate || exp.endDate" class="resume-detail__exp-date">{{ exp.startDate }}<span v-if="exp.startDate && exp.endDate">-</span>{{ exp.endDate }}</span>
                <span v-if="hasDiagnosis && getIssueByRecord('work', exp.id!) && getIssueByRecord('work', exp.id!)!.status === 0" class="resume-detail__fix-tag">
                  <svg viewBox="0 0 16 16" class="resume-detail__fix-tag-icon"><circle cx="8" cy="8" r="7" fill="#FF8D0B"/><text x="8" y="12" text-anchor="middle" font-size="11" fill="#fff" font-weight="bold">!</text></svg>
                  建议使用AI润色修复 &gt;&gt;
                  <span class="resume-detail__fix-tooltip">{{ getIssueByRecord('work', exp.id!)!.finding }}</span>
                </span>
                <div class="mlauto dflex-end">
+                  <!-- 时间（默认显示，hover时隐藏） -->
+                  <span v-if="exp.startDate || exp.endDate" class="resume-detail__exp-date resume-detail__exp-date--toggle">{{ exp.startDate }}<span v-if="exp.startDate && exp.endDate">-</span>{{ exp.endDate }}</span>
                  <button class="resume-detail__edit-btn-inline resume-detail__exp-edit-btn" @click="startEditExp('work', exp)" aria-label="编辑">
                    <el-icon><EditPen /></el-icon><span>编辑</span>
                  </button>
@@ -339,13 +343,14 @@
              <div class="resume-detail__exp-row">
                <span class="resume-detail__exp-name">{{ intern.companyName }}</span>
                <span v-if="intern.position" class="resume-detail__exp-role">{{ intern.position }}</span>
-                <span v-if="intern.startDate || intern.endDate" class="resume-detail__exp-date">{{ intern.startDate }}<span v-if="intern.startDate && intern.endDate">-</span>{{ intern.endDate }}</span>
                <span v-if="hasDiagnosis && getIssueByRecord('internship', intern.id!) && getIssueByRecord('internship', intern.id!)!.status === 0" class="resume-detail__fix-tag">
                  <svg viewBox="0 0 16 16" class="resume-detail__fix-tag-icon"><circle cx="8" cy="8" r="7" fill="#FF8D0B"/><text x="8" y="12" text-anchor="middle" font-size="11" fill="#fff" font-weight="bold">!</text></svg>
                  建议使用AI润色修复 &gt;&gt;
                  <span class="resume-detail__fix-tooltip">{{ getIssueByRecord('internship', intern.id!)!.finding }}</span>
                </span>
                <div class="mlauto dflex-end">
+                  <!-- 时间（默认显示，hover时隐藏） -->
+                  <span v-if="intern.startDate || intern.endDate" class="resume-detail__exp-date resume-detail__exp-date--toggle">{{ intern.startDate }}<span v-if="intern.startDate && intern.endDate">-</span>{{ intern.endDate }}</span>
                  <button class="resume-detail__edit-btn-inline resume-detail__exp-edit-btn" @click="startEditExp('internship', intern)" aria-label="编辑">
                    <el-icon><EditPen /></el-icon><span>编辑</span>
                  </button>
@@ -376,13 +381,14 @@
              <div class="resume-detail__exp-row">
                <span class="resume-detail__exp-name">{{ proj.projectName }}</span>
                <span v-if="proj.role" class="resume-detail__exp-role">{{ proj.role }}</span>
-                <span v-if="proj.startDate || proj.endDate" class="resume-detail__exp-date">{{ proj.startDate }}<span v-if="proj.startDate && proj.endDate">-</span>{{ proj.endDate }}</span>
                <span v-if="hasDiagnosis && getIssueByRecord('project', proj.id!) && getIssueByRecord('project', proj.id!)!.status === 0" class="resume-detail__fix-tag">
                  <svg viewBox="0 0 16 16" class="resume-detail__fix-tag-icon"><circle cx="8" cy="8" r="7" fill="#FF8D0B"/><text x="8" y="12" text-anchor="middle" font-size="11" fill="#fff" font-weight="bold">!</text></svg>
                  建议使用AI润色修复 &gt;&gt;
                  <span class="resume-detail__fix-tooltip">{{ getIssueByRecord('project', proj.id!)!.finding }}</span>
                </span>
                <div class="mlauto dflex-end">
+                  <!-- 时间（默认显示，hover时隐藏） -->
+                  <span v-if="proj.startDate || proj.endDate" class="resume-detail__exp-date resume-detail__exp-date--toggle">{{ proj.startDate }}<span v-if="proj.startDate && proj.endDate">-</span>{{ proj.endDate }}</span>
                  <button class="resume-detail__edit-btn-inline resume-detail__exp-edit-btn" @click="startEditExp('project', proj)" aria-label="编辑">
                    <el-icon><EditPen /></el-icon><span>编辑</span>
                  </button>
@@ -413,13 +419,14 @@
              <div class="resume-detail__exp-row">
                <span class="resume-detail__exp-name">{{ comp.competitionName }}</span>
                <span v-if="comp.award" class="resume-detail__exp-role">{{ comp.award }}</span>
-                <span v-if="comp.awardDate" class="resume-detail__exp-date">{{ comp.awardDate }}</span>
                <span v-if="hasDiagnosis && getIssueByRecord('competition', comp.id!) && getIssueByRecord('competition', comp.id!)!.status === 0" class="resume-detail__fix-tag">
                  <svg viewBox="0 0 16 16" class="resume-detail__fix-tag-icon"><circle cx="8" cy="8" r="7" fill="#FF8D0B"/><text x="8" y="12" text-anchor="middle" font-size="11" fill="#fff" font-weight="bold">!</text></svg>
                  建议使用AI润色修复 &gt;&gt;
                  <span class="resume-detail__fix-tooltip">{{ getIssueByRecord('competition', comp.id!)!.finding }}</span>
                </span>
                <div class="mlauto dflex-end">
+                  <!-- 时间（默认显示，hover时隐藏） -->
+                  <span v-if="comp.awardDate" class="resume-detail__exp-date resume-detail__exp-date--toggle">{{ comp.awardDate }}</span>
                  <button class="resume-detail__edit-btn-inline resume-detail__exp-edit-btn" @click="startEditExp('competition', comp)" aria-label="编辑">
                    <el-icon><EditPen /></el-icon><span>编辑</span>
                  </button>
@@ -500,6 +507,8 @@
    <MemberAccessDialog v-model="showMemberAccessDialog" @open-member="showMemberDialog = true" />
    <!-- 会员购买弹窗 -->
    <MemberDialog v-model="showMemberDialog" />
+    <!-- 全屏加载遮罩 -->
+    <FullscreenLoading :visible="fullLoading" :text="fullLoadingText" title="Nova 正在帮您努力处理~" />
  </div>
 </template>

@@ -557,11 +566,18 @@ import {
  type DescriptionParagraph,
 } from '@/api/resume'
 import {ArrowLeft, EditPen, Plus, DeleteFilled, ChatLineRound} from "@element-plus/icons-vue";
-import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import FullscreenLoading from '@/components/FullscreenLoading.vue'

 // ==================== Store 实例 ====================
 const store = useStore()

+// ==================== 全屏加载状态 ====================
+/** 全屏加载是否显示 */
+const fullLoading = ref(false)
+/** 全屏加载文案 */
+const fullLoadingText = ref('')
+
 // ==================== 诊断数据相关 ====================

 /** 会员权限拦截弹窗 */
@@ -936,12 +952,8 @@ async function handleDiagnose() {
  }

  // 全屏加载提示，AI 接口响应较慢
-  const loading = ElLoading.service({
-    lock: true,
-    text: '简历诊断中，请耐心等待…',
-    background: 'rgba(0, 0, 0, 0.5)',
-    customClass: 'resume-upload-loading',
-  })
+  fullLoadingText.value = '简历诊断中，请耐心等待…'
+  fullLoading.value = true
  try {
    const res = await triggerResumeDiagnosis(resumeId)
    if (res.code === 0) {
@@ -954,7 +966,7 @@ async function handleDiagnose() {
  } catch {
    ElMessage.error('诊断请求失败，请稍后重试')
  } finally {
-    loading.close()
+    fullLoading.value = false
  }
 }

@@ -1098,12 +1110,8 @@ function joinDescriptionText(desc: DescriptionParagraph[]): string {
 async function handleFixAllSave(items: FixAllSubmitItem[]) {
  if (!items.length) return

-  const loading = ElLoading.service({
-    lock: true,
-    text: '正在保存修改…',
-    background: 'rgba(0, 0, 0, 0.5)',
-    customClass: 'resume-upload-loading',
-  })
+  fullLoadingText.value = '正在保存修改…'
+  fullLoading.value = true

  try {
    for (const item of items) {
@@ -1123,7 +1131,7 @@ async function handleFixAllSave(items: FixAllSubmitItem[]) {
  } catch {
    ElMessage.error('保存失败，请稍后重试')
  } finally {
-    loading.close()
+    fullLoading.value = false
  }
 }

@@ -1131,12 +1139,8 @@ async function handleFixAllSave(items: FixAllSubmitItem[]) {
 async function handleFixAllUseAi(items: FixAllSubmitItem[]) {
  if (!items.length) return

-  const loading = ElLoading.service({
-    lock: true,
-    text: '正在应用AI润色结果…',
-    background: 'rgba(0, 0, 0, 0.5)',
-    customClass: 'resume-upload-loading',
-  })
+  fullLoadingText.value = '正在应用AI润色结果…'
+  fullLoading.value = true

  try {
    for (const item of items) {
@@ -1152,7 +1156,7 @@ async function handleFixAllUseAi(items: FixAllSubmitItem[]) {
  } catch {
    ElMessage.error('操作失败，请稍后重试')
  } finally {
-    loading.close()
+    fullLoading.value = false
  }
 }

@@ -1215,12 +1219,8 @@ async function updateModuleContent(item: FixAllSubmitItem) {

 /** 修复抽屉提交新版本 — 更新本地数据、调用保存接口、刷新页面 */
 async function handleFixSubmit(content: string[]) {
-  const loading = ElLoading.service({
-    lock: true,
-    text: '正在保存修改…',
-    background: 'rgba(0, 0, 0, 0.5)',
-    customClass: 'resume-upload-loading',
-  })
+  fullLoadingText.value = '正在保存修改…'
+  fullLoading.value = true

  try {
    const moduleType = fixModuleType.value
@@ -1262,7 +1262,7 @@ async function handleFixSubmit(content: string[]) {
  } catch {
    ElMessage.error('保存失败，请稍后重试')
  } finally {
-    loading.close()
+    fullLoading.value = false
  }
 }