AI投递助手

src/components/JobGoalDialog.vue

@@ -1,94 +1,82 @@
 <template>
-  <!-- 求职目标设置弹窗 -->
-  <el-dialog
-    v-model="visible"
-    width="480px"
-    :show-close="false"
-    :close-on-click-modal="false"
-    :close-on-press-escape="true"
-    :align-center="false"
-    :style="{ marginLeft: 'auto', marginRight: '0.2rem' }"
-    class="job-goal-dialog"
-    @close="handleClose"
-  >
-    <!-- 头部区域 -->
-    <div class="job-goal-dialog__header">
-      <!-- 关闭按钮 -->
-      <button class="job-goal-dialog__close-btn" @click="handleClose">
-        <el-icon><Close /></el-icon>
-      </button>
-      <!-- 弹窗标题 -->
-      <span class="job-goal-dialog__title">求职目标设置</span>
-    </div>
-
-    <!-- 岗位选择模块 -->
-    <div class="job-goal-dialog__section">
-      <div class="job-goal-dialog__label">*岗位</div>
-      <JobCategorySelector
-        :categoryIds="selectedCategoryIds"
-        :maxSelect="3"
-        :level="3"
-        :allowParentSelect="false"
-        :triggerStyle="selectorTriggerStyle"
-        :displayStyle="selectorDisplayStyle"
-        @update:categoryIds="onCategoryChange"
-      />
-    </div>
-
-    <!-- 行业选择模块 -->
-    <div class="job-goal-dialog__section">
-      <div class="job-goal-dialog__label">*行业</div>
-      <IndustrySelector
-        :industryIds="selectedIndustryIds"
-        :maxSelect="3"
-        :level="2"
-        :allowParentSelect="false"
-        :triggerStyle="selectorTriggerStyle"
-        :displayStyle="selectorDisplayStyle"
-        @update:industryIds="onIndustryChange"
-      />
-    </div>
-
-    <!-- 城市选择模块 -->
-    <div class="job-goal-dialog__section">
-      <div class="job-goal-dialog__label">*城市</div>
-      <RegionSelector
-        :regionCodes="selectedRegionCodes"
-        :level="2"
-        :maxSelect="3"
-        :triggerStyle="selectorTriggerStyle"
-        :displayStyle="selectorDisplayStyle"
-        @update:regionCodes="onRegionChange"
-      />
-    </div>
-
-    <!-- 招聘分类选择模块 -->
-    <div class="job-goal-dialog__section ">
-      <div class="job-goal-dialog__label">*招聘分类</div>
-      <!-- 招聘分类按钮组 -->
-      <div class="job-goal-dialog__type-group">
-        <button
-          v-for="t in jobTypes"
-          :key="t"
-          class="job-goal-dialog__type-btn"
-          :class="{ 'job-goal-dialog__type-btn--active': selectedJobType === t }"
-          @click="selectedJobType = t"
-        >
-          {{ t }}
-        </button>
+  <!-- 求职偏好设置弹窗 -->
+  <div v-if="visible" class="job-goal-dialog__overlay" @click.self="handleClose">
+    <div class="job-goal-dialog">
+      <!-- 头部区域 -->
+      <div class="job-goal-dialog__header">
+        <span class="job-goal-dialog__title">求职偏好</span>
+        <!-- 关闭按钮 -->
+        <svg class="job-goal-dialog__close-btn" @click="handleClose" width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path d="M6 6L18 18M18 6L6 18" stroke="#6A7282" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
       </div>
-    </div>
 
-    <!-- 保存按钮区域 -->
-    <div class="job-goal-dialog__footer mt10">
+      <!-- 岗位选择模块 -->
+      <div class="job-goal-dialog__section">
+        <div class="job-goal-dialog__label">岗位</div>
+        <JobCategorySelector
+          :categoryIds="selectedCategoryIds"
+          :maxSelect="3"
+          :level="3"
+          :allowParentSelect="false"
+          :triggerStyle="selectorTriggerStyle"
+          :displayStyle="selectorDisplayStyle"
+          @update:categoryIds="onCategoryChange"
+        />
+      </div>
+
+      <!-- 行业选择模块 -->
+      <div class="job-goal-dialog__section">
+        <div class="job-goal-dialog__label">行业</div>
+        <IndustrySelector
+          :industryIds="selectedIndustryIds"
+          :maxSelect="3"
+          :level="2"
+          :allowParentSelect="false"
+          :triggerStyle="selectorTriggerStyle"
+          :displayStyle="selectorDisplayStyle"
+          @update:industryIds="onIndustryChange"
+        />
+      </div>
+
+      <!-- 城市选择模块 -->
+      <div class="job-goal-dialog__section">
+        <div class="job-goal-dialog__label">城市</div>
+        <RegionSelector
+          :regionCodes="selectedRegionCodes"
+          :level="2"
+          :maxSelect="3"
+          :triggerStyle="selectorTriggerStyle"
+          :displayStyle="selectorDisplayStyle"
+          @update:regionCodes="onRegionChange"
+        />
+      </div>
+
+      <!-- 招聘类型选择模块 -->
+      <div class="job-goal-dialog__section">
+        <div class="job-goal-dialog__label">招聘类型</div>
+        <!-- 招聘类型按钮组 -->
+        <div class="job-goal-dialog__type-group">
+          <button
+            v-for="t in jobTypes"
+            :key="t"
+            class="job-goal-dialog__type-btn"
+            :class="{ 'job-goal-dialog__type-btn--active': selectedJobType === t }"
+            @click="selectedJobType = t"
+          >
+            {{ t }}
+          </button>
+        </div>
+      </div>
+
+      <!-- 保存按钮 -->
       <button class="job-goal-dialog__save-btn" @click="handleSave">保存</button>
     </div>
-  </el-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { Close } from '@element-plus/icons-vue'
 import { useStore } from 'vuex'
 import { JOB_TYPE_OPTIONS, formatEmploymentType } from '@/stores/index'
 import RegionSelector from './tools/RegionSelector.vue'
@@ -116,9 +104,9 @@ watch(visible, (v) => { emit('update:modelValue', v) })
 const selectedCategoryIds = ref<number[]>([])
 const selectedIndustryIds = ref<number[]>([])
 const selectedRegionCodes = ref<string[]>([])
-const selectedJobType = ref('全职')
+const selectedJobType = ref('全部')
 
-/** 招聘分类选项列表 — 从全局常量提取 label 生成 */
+/** 招聘类型选项列表 */
 const jobTypes = JOB_TYPE_OPTIONS.map(item => item.label)
 
 /** 弹窗打开时从 store 同步数据到本地编辑副本 */
@@ -128,25 +116,25 @@ watch(() => props.modelValue, (v) => {
     selectedCategoryIds.value = [...(intention.categoryIds || [])]
     selectedIndustryIds.value = [...(intention.industryIds || [])]
     selectedRegionCodes.value = [...(intention.regionCodes || [])]
-    selectedJobType.value = formatEmploymentType(intention.recruitCategory)
+    selectedJobType.value = formatEmploymentType(intention.recruitCategory) || '全部'
   }
 })
 
-/** 选择器触发按钮的自定义样式，适配弹窗内布局（参考 ProfileEditDrawer 中 regionTriggerStyle） */
+/** 选择器触发按钮的自定义样式 */
 const selectorTriggerStyle: Record<string, string> = {
   width: '100%',
   'box-sizing': 'border-box',
-  padding: '0.1rem 0.14rem',
-  'font-size': '0.13rem',
-  color: '#1a1a2e',
-  background: '#f6f6f9',
-  border: '1px solid transparent',
-  'border-radius': '0.06rem',
+  padding: '0.08rem 0.16rem',
+  'font-size': '0.14rem',
+  color: '#1A1A1A',
+  background: '#F3F4F6',
+  border: 'none',
+  'border-radius': '0.08rem',
   'max-width': 'none',
   'justify-content': 'space-between',
 }
 
-/** 选择器显示文字的自定义样式，覆盖默认 max-width: 1.6rem */
+/** 选择器显示文字的自定义样式 */
 const selectorDisplayStyle: Record<string, string> = {
   'max-width': 'none',
 }
@@ -166,9 +154,7 @@ function onRegionChange(codes: string[]) {
   selectedRegionCodes.value = codes
 }
 
-/**
- * 保存表单数据：调用 store action 保存到后端并同步 store，然后关闭弹窗
- */
+/** 保存表单数据 */
 async function handleSave() {
   try {
     await store.dispatch('saveJobIntention', {
@@ -183,9 +169,7 @@ async function handleSave() {
   }
 }
 
-/**
- * 关闭弹窗
- */
+/** 关闭弹窗 */
 function handleClose() {
   visible.value = false
 }