简历详情样式微调

This commit is contained in:
2026-07-09 15:27:31 +08:00
parent b25f2dde3a
commit 72339f332d
8 changed files with 155 additions and 44 deletions
+5
View File
@@ -700,6 +700,11 @@ body:not(#_) {
background: $bg-white;
}
.bg-linear-1{
background: linear-gradient(to right, #52CAD1, #9FD051)
}
/*文字超出隐藏*/
.text-over-h{
white-space: nowrap; /* 保持文本在一行内显示 */
@@ -9,7 +9,7 @@
line-height: 1.5;
background: #F7F7F7;
border-radius: 0.12rem;
padding: 0.1rem;
padding: 0.16rem;
box-sizing: border-box;
// 表单内容区
@@ -305,7 +305,7 @@
// AI润色结果区域
&__ai-result {
margin-top: 0.16rem;
margin-top: 0.04rem;
}
&__ai-result-label {
@@ -317,7 +317,7 @@
&__ai-result-card {
padding: 0.1rem 0.12rem;
background: linear-gradient(to bottom,#F5FFFD,#ffffff);
background: linear-gradient(to bottom, #EDF9FA 0, #fff 0.5rem);
border-radius: 0.06rem;
}
@@ -438,13 +438,13 @@
}
&__save-btn {
padding: 0.06rem 0.2rem;
padding: 0.06rem 0.24rem;
font-size: 0.13rem;
font-weight: 600;
color: $bg-white;
background: $btn-dark;
border: none;
border-radius: 0.2rem;
border-radius: 0.08rem;
cursor: pointer;
transition: all 0.2s;
@@ -454,13 +454,13 @@
}
&__cancel-btn {
padding: 0.06rem 0.2rem;
padding: 0.06rem 0.24rem;
font-size: 0.13rem;
font-weight: 600;
color: $accent;
background: transparent;
border: 1px solid $accent;
border-radius: 0.2rem;
border-radius: 0.08rem;
cursor: pointer;
transition: all 0.2s;
@@ -112,29 +112,30 @@
// ---- 卡片容器 ----
&__card {
background: transparent;
background: #fff;
border-radius: 0.1rem;
padding: 0.16rem;
border: 1px solid $border-color;
position: relative;
overflow: hidden;
&--ai {
border: 1px solid rgba($accent, 0.3);
/* 顶部渐变背景层,不遮挡内容 */
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.1rem;
background: linear-gradient(to bottom, #EDF9FA 0, #fff 0.5rem);
z-index: 0;
}
}
/* 顶部渐变背景层,不遮挡内容 */
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.1rem;
background: linear-gradient(to bottom, #EDF9FA 0, #fff 0.8rem);
z-index: 0;
}
/* 让卡片内所有内容在渐变之上 */
> * {
@@ -692,6 +692,19 @@
padding: 0.16rem;
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 38.18%);
border-radius: 0.08rem 0.08rem 0 0;
/* 正式会员背景 */
&--formal {
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 38.18%);
}
/* 试用会员背景 */
&--trial {
background: linear-gradient(180deg, #FEF5E7 0%, #FFFFFF 38.18%);
}
/* 免费用户背景 */
&--free {
background: linear-gradient(180deg, #F1F2F4 0%, #FFFFFF 38.18%);
}
}
.side-nav__account-popup-header-row {
+15 -4
View File
@@ -2,7 +2,7 @@
<!-- 个人资料编辑组件 内联模式直接嵌入页面通过 modelValue 控制显示/隐藏 -->
<div v-if="modelValue" class="profile-edit-inline">
<!-- 表单内容区 根据模块名动态渲染不同字段 -->
<div class="profile-edit-inline__body">
<div class="profile-edit-inline__body pb0">
<!-- ========== 基本信息模块 ========== -->
<template v-if="module === 'info'">
<!-- 基本信息字段横排布局 -->
@@ -204,9 +204,20 @@
<!-- 标题 + 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><span></span> AI润色</span>
</button>
<!-- AI润色按钮 -->
<div class="dib dflex-center w66 h24 lh24 border-ra4 color-f aliite-c bg-linear-1 cursor-po mb4" @click="handleAiPolish" :disabled="aiPolishing">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_589_1500)">
<path d="M4.55306 2.724C4.85206 1.849 6.06106 1.8225 6.41556 2.6445L6.44556 2.7245L6.84906 3.9045C6.94154 4.17512 7.09097 4.42276 7.28728 4.63071C7.48359 4.83867 7.72222 5.00211 7.98706 5.11L8.09556 5.1505L9.27556 5.5535C10.1506 5.8525 10.1771 7.0615 9.35556 7.416L9.27556 7.446L8.09556 7.8495C7.82485 7.94191 7.57712 8.09131 7.36907 8.28763C7.16103 8.48394 6.99751 8.7226 6.88956 8.9875L6.84906 9.0955L6.44606 10.276C6.14706 11.151 4.93806 11.1775 4.58406 10.356L4.55306 10.276L4.15006 9.096C4.05765 8.82529 3.90825 8.57755 3.71193 8.36951C3.51562 8.16146 3.27696 7.99795 3.01206 7.89L2.90406 7.8495L1.72406 7.4465C0.848564 7.1475 0.822064 5.9385 1.64406 5.5845L1.72406 5.5535L2.90406 5.1505C3.17468 5.05803 3.42232 4.9086 3.63028 4.71229C3.83823 4.51597 4.00167 4.27735 4.10956 4.0125L4.15006 3.9045L4.55306 2.724ZM5.49956 3.047L5.09656 4.227C4.95576 4.63965 4.7267 5.01665 4.42533 5.33175C4.12397 5.64684 3.75754 5.89246 3.35156 6.0515L3.22656 6.097L2.04656 6.5L3.22656 6.903C3.63922 7.0438 4.01622 7.27287 4.33131 7.57423C4.64641 7.8756 4.89203 8.24203 5.05106 8.648L5.09656 8.773L5.49956 9.953L5.90256 8.773C6.04337 8.36035 6.27243 7.98335 6.5738 7.66825C6.87516 7.35316 7.24159 7.10754 7.64756 6.9485L7.77256 6.9035L8.95256 6.5L7.77256 6.097C7.35991 5.9562 6.98291 5.72713 6.66782 5.42577C6.35272 5.1244 6.1071 4.75797 5.94806 4.352L5.90306 4.227L5.49956 3.047ZM9.49956 1C9.5931 1 9.68477 1.02624 9.76414 1.07574C9.84351 1.12523 9.90741 1.196 9.94856 1.28L9.97256 1.3385L10.1476 1.8515L10.6611 2.0265C10.7548 2.05835 10.837 2.11731 10.8972 2.19591C10.9574 2.27451 10.9929 2.36921 10.9992 2.46801C11.0055 2.56681 10.9824 2.66527 10.9327 2.75089C10.883 2.83652 10.809 2.90547 10.7201 2.949L10.6611 2.973L10.1481 3.148L9.97306 3.6615C9.94116 3.75521 9.88216 3.83735 9.80353 3.8975C9.7249 3.95764 9.63018 3.9931 9.53138 3.99936C9.43259 4.00563 9.33415 3.98242 9.24856 3.93269C9.16296 3.88296 9.09405 3.80893 9.05056 3.72L9.02656 3.6615L8.85156 3.1485L8.33806 2.9735C8.24432 2.94165 8.16215 2.88269 8.10195 2.80409C8.04175 2.72549 8.00624 2.63079 7.99993 2.53199C7.99361 2.43319 8.01676 2.33473 8.06645 2.24911C8.11615 2.16348 8.19014 2.09453 8.27906 2.051L8.33806 2.027L8.85106 1.852L9.02606 1.3385C9.05978 1.23971 9.12357 1.15395 9.20848 1.09325C9.2934 1.03254 9.39518 0.999937 9.49956 1Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_589_1500">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="ml2 fs12 fw600">AI润色</span>
</div>
</div>
<div class="profile-edit-inline__field">
<textarea class="profile-edit-inline__textarea" placeholder="请输入个人概述" v-model="summaryText" rows="6"></textarea>
+25 -15
View File
@@ -1,7 +1,7 @@
<template>
<!-- 单条经历内联编辑组件 -->
<div class="profile-edit-inline">
<div class="profile-edit-inline__body">
<div class="profile-edit-inline__body pb0">
<!-- 教育经历 -->
<template v-if="moduleType === 'education'">
<div class="profile-edit-inline__fields-row">
@@ -76,31 +76,41 @@
<!-- 经历描述 + 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 class="dib dflex-center w66 h24 lh24 border-ra4 color-f aliite-c bg-linear-1 cursor-po mb4" @click="handleAiPolish" :disabled="aiPolishing">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_589_1500)">
<path d="M4.55306 2.724C4.85206 1.849 6.06106 1.8225 6.41556 2.6445L6.44556 2.7245L6.84906 3.9045C6.94154 4.17512 7.09097 4.42276 7.28728 4.63071C7.48359 4.83867 7.72222 5.00211 7.98706 5.11L8.09556 5.1505L9.27556 5.5535C10.1506 5.8525 10.1771 7.0615 9.35556 7.416L9.27556 7.446L8.09556 7.8495C7.82485 7.94191 7.57712 8.09131 7.36907 8.28763C7.16103 8.48394 6.99751 8.7226 6.88956 8.9875L6.84906 9.0955L6.44606 10.276C6.14706 11.151 4.93806 11.1775 4.58406 10.356L4.55306 10.276L4.15006 9.096C4.05765 8.82529 3.90825 8.57755 3.71193 8.36951C3.51562 8.16146 3.27696 7.99795 3.01206 7.89L2.90406 7.8495L1.72406 7.4465C0.848564 7.1475 0.822064 5.9385 1.64406 5.5845L1.72406 5.5535L2.90406 5.1505C3.17468 5.05803 3.42232 4.9086 3.63028 4.71229C3.83823 4.51597 4.00167 4.27735 4.10956 4.0125L4.15006 3.9045L4.55306 2.724ZM5.49956 3.047L5.09656 4.227C4.95576 4.63965 4.7267 5.01665 4.42533 5.33175C4.12397 5.64684 3.75754 5.89246 3.35156 6.0515L3.22656 6.097L2.04656 6.5L3.22656 6.903C3.63922 7.0438 4.01622 7.27287 4.33131 7.57423C4.64641 7.8756 4.89203 8.24203 5.05106 8.648L5.09656 8.773L5.49956 9.953L5.90256 8.773C6.04337 8.36035 6.27243 7.98335 6.5738 7.66825C6.87516 7.35316 7.24159 7.10754 7.64756 6.9485L7.77256 6.9035L8.95256 6.5L7.77256 6.097C7.35991 5.9562 6.98291 5.72713 6.66782 5.42577C6.35272 5.1244 6.1071 4.75797 5.94806 4.352L5.90306 4.227L5.49956 3.047ZM9.49956 1C9.5931 1 9.68477 1.02624 9.76414 1.07574C9.84351 1.12523 9.90741 1.196 9.94856 1.28L9.97256 1.3385L10.1476 1.8515L10.6611 2.0265C10.7548 2.05835 10.837 2.11731 10.8972 2.19591C10.9574 2.27451 10.9929 2.36921 10.9992 2.46801C11.0055 2.56681 10.9824 2.66527 10.9327 2.75089C10.883 2.83652 10.809 2.90547 10.7201 2.949L10.6611 2.973L10.1481 3.148L9.97306 3.6615C9.94116 3.75521 9.88216 3.83735 9.80353 3.8975C9.7249 3.95764 9.63018 3.9931 9.53138 3.99936C9.43259 4.00563 9.33415 3.98242 9.24856 3.93269C9.16296 3.88296 9.09405 3.80893 9.05056 3.72L9.02656 3.6615L8.85156 3.1485L8.33806 2.9735C8.24432 2.94165 8.16215 2.88269 8.10195 2.80409C8.04175 2.72549 8.00624 2.63079 7.99993 2.53199C7.99361 2.43319 8.01676 2.33473 8.06645 2.24911C8.11615 2.16348 8.19014 2.09453 8.27906 2.051L8.33806 2.027L8.85106 1.852L9.02606 1.3385C9.05978 1.23971 9.12357 1.15395 9.20848 1.09325C9.2934 1.03254 9.39518 0.999937 9.49956 1Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_589_1500">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="ml2 fs12 fw600">AI润色</span>
</div>
</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.stop="handleSave">保存</button>
<button class="profile-edit-inline__cancel-btn" @click.stop="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-label"> AI润色结果</p>
<p class="profile-edit-inline__ai-result-text">{{ aiPolishResult }}</p>
<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 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 class="profile-edit-inline__footer mt16">
<button class="profile-edit-inline__save-btn" @click.stop="handleSave">保存</button>
<button class="profile-edit-inline__cancel-btn" @click.stop="handleCancel">取消</button>
</div>
</div>
<!-- 全屏加载遮罩 -->
+51 -1
View File
@@ -44,7 +44,24 @@
class="fix-all-drawer__record"
>
<!-- 经历标识经历类模块显示标题summary不显示 -->
<p v-if="record.recordLabel" class="fix-all-drawer__record-label">{{ record.recordLabel }}</p>
<div v-if="record.recordLabel" class="fix-all-drawer__record-label dflex-start">
<span class="mr10">{{ record.recordLabel }}</span>
<!-- AI润色按钮 -->
<div class="dib dflex-center w66 h24 lh24 border-ra4 color-f aliite-c bg-linear-1 cursor-po" @click="handleAiPolishRecord(record)">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_589_1500)">
<path d="M4.55306 2.724C4.85206 1.849 6.06106 1.8225 6.41556 2.6445L6.44556 2.7245L6.84906 3.9045C6.94154 4.17512 7.09097 4.42276 7.28728 4.63071C7.48359 4.83867 7.72222 5.00211 7.98706 5.11L8.09556 5.1505L9.27556 5.5535C10.1506 5.8525 10.1771 7.0615 9.35556 7.416L9.27556 7.446L8.09556 7.8495C7.82485 7.94191 7.57712 8.09131 7.36907 8.28763C7.16103 8.48394 6.99751 8.7226 6.88956 8.9875L6.84906 9.0955L6.44606 10.276C6.14706 11.151 4.93806 11.1775 4.58406 10.356L4.55306 10.276L4.15006 9.096C4.05765 8.82529 3.90825 8.57755 3.71193 8.36951C3.51562 8.16146 3.27696 7.99795 3.01206 7.89L2.90406 7.8495L1.72406 7.4465C0.848564 7.1475 0.822064 5.9385 1.64406 5.5845L1.72406 5.5535L2.90406 5.1505C3.17468 5.05803 3.42232 4.9086 3.63028 4.71229C3.83823 4.51597 4.00167 4.27735 4.10956 4.0125L4.15006 3.9045L4.55306 2.724ZM5.49956 3.047L5.09656 4.227C4.95576 4.63965 4.7267 5.01665 4.42533 5.33175C4.12397 5.64684 3.75754 5.89246 3.35156 6.0515L3.22656 6.097L2.04656 6.5L3.22656 6.903C3.63922 7.0438 4.01622 7.27287 4.33131 7.57423C4.64641 7.8756 4.89203 8.24203 5.05106 8.648L5.09656 8.773L5.49956 9.953L5.90256 8.773C6.04337 8.36035 6.27243 7.98335 6.5738 7.66825C6.87516 7.35316 7.24159 7.10754 7.64756 6.9485L7.77256 6.9035L8.95256 6.5L7.77256 6.097C7.35991 5.9562 6.98291 5.72713 6.66782 5.42577C6.35272 5.1244 6.1071 4.75797 5.94806 4.352L5.90306 4.227L5.49956 3.047ZM9.49956 1C9.5931 1 9.68477 1.02624 9.76414 1.07574C9.84351 1.12523 9.90741 1.196 9.94856 1.28L9.97256 1.3385L10.1476 1.8515L10.6611 2.0265C10.7548 2.05835 10.837 2.11731 10.8972 2.19591C10.9574 2.27451 10.9929 2.36921 10.9992 2.46801C11.0055 2.56681 10.9824 2.66527 10.9327 2.75089C10.883 2.83652 10.809 2.90547 10.7201 2.949L10.6611 2.973L10.1481 3.148L9.97306 3.6615C9.94116 3.75521 9.88216 3.83735 9.80353 3.8975C9.7249 3.95764 9.63018 3.9931 9.53138 3.99936C9.43259 4.00563 9.33415 3.98242 9.24856 3.93269C9.16296 3.88296 9.09405 3.80893 9.05056 3.72L9.02656 3.6615L8.85156 3.1485L8.33806 2.9735C8.24432 2.94165 8.16215 2.88269 8.10195 2.80409C8.04175 2.72549 8.00624 2.63079 7.99993 2.53199C7.99361 2.43319 8.01676 2.33473 8.06645 2.24911C8.11615 2.16348 8.19014 2.09453 8.27906 2.051L8.33806 2.027L8.85106 1.852L9.02606 1.3385C9.05978 1.23971 9.12357 1.15395 9.20848 1.09325C9.2934 1.03254 9.39518 0.999937 9.49956 1Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_589_1500">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="ml2 fw600">AI润色</span>
</div>
</div>
<!-- 原文编辑区 -->
<div class="fix-all-drawer__card">
@@ -385,6 +402,39 @@ async function handleRegenerate(record: RecordState) {
}
}
/** AI润色按钮 — 调用润色接口,将结果直接替换到 polishText */
async function handleAiPolishRecord(record: RecordState) {
// 收集当前原文编辑框内容作为输入
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('AI润色完成')
} else {
ElMessage.error(res.msg || '润色失败,请稍后重试')
}
} catch {
ElMessage.error('请求失败,请稍后重试')
} finally {
fullLoading.value = false
}
}
/** 一键使用AI润色结果 — 所有模块强制使用 AI 润色结果更新 */
function handleUseAllAi() {
const items: FixAllSubmitItem[] = []
+24 -3
View File
@@ -64,8 +64,8 @@
<div class="side-nav__user-info-wrapper" v-if="store.state.isAuthenticated && store.state.userInfo">
<!-- 账户弹窗 -->
<div v-if="showAccountPopup" class="side-nav__account-popup">
<!-- 顶部渐变区域会员信息 -->
<div class="side-nav__account-popup-header">
<!-- 顶部渐变区域会员信息根据会员类型显示不同渐变背景 -->
<div class="side-nav__account-popup-header" :class="accountHeaderBgClass">
<div class="side-nav__account-popup-header-row">
<div class="side-nav__account-popup-header-left">
<div class="side-nav__account-popup-member-type" :class="accountMemberColorClass">{{ memberTagText }}</div>
@@ -660,6 +660,18 @@ const accountMemberColorClass = computed(() => {
return 'side-nav__account-popup-member-type--free'
})
/**
* 账户弹窗顶部渐变背景 class
* 正式会员:#EDF9FA → #FFF;试用会员:#FEF5E7 → #FFF;免费用户:#F1F2F4 → #FFF
*/
const accountHeaderBgClass = computed(() => {
const status = store.state.memberStatus
if (!status || !status.isMember) return 'side-nav__account-popup-header--free'
if (status.memberType === 1) return 'side-nav__account-popup-header--formal'
if (status.memberType === 2) return 'side-nav__account-popup-header--trial'
return 'side-nav__account-popup-header--free'
})
/**
* 会员到期时间显示文字 — 使用项目时间工具 timestampToLocalDateTime
*/
@@ -673,9 +685,18 @@ const memberExpireText = computed(() => {
})
/** 账户弹窗 — 点击"详情>"跳转会员页 */
/** 账户弹窗 — 点击"详情>":正式会员打开设置弹窗并切换到会员tab,试用/免费用户打开会员购买弹窗 */
function handleAccountDetail() {
showAccountPopup.value = false
showMemberDialog.value = true
const status = store.state.memberStatus
if (status && status.isMember && status.memberType === 1) {
// 正式会员:打开设置弹窗,切换到会员页
store.state.settingsTab = 'member'
showSettingsDialog.value = true
} else {
// 试用会员 / 免费用户:打开会员购买弹窗
showMemberDialog.value = true
}
}
/** 账户弹窗 — 点击"设置"打开设置弹窗 */