个人资料和岗位列表联调，简历优化部分页面

src/components/JobGoalDialog.vue

@@ -22,99 +22,44 @@
     </div>
 
     <!-- 岗位选择模块 -->
-    <div class="job-goal-dialog__section ">
+    <div class="job-goal-dialog__section">
       <div class="job-goal-dialog__label">*岗位</div>
-      <!-- 已选岗位标签列表 -->
-      <div class="job-goal-dialog__tags">
-        <span
-          v-for="(item, index) in form.positions"
-          :key="index"
-          class="job-goal-dialog__tag"
-        >
-          {{ item }}
-          <!-- 删除岗位标签 -->
-          <el-icon class="job-goal-dialog__tag-close" @click="removePosition(index)"><Close /></el-icon>
-        </span>
-      </div>
-      <!-- 岗位下拉选择器 -->
-      <el-select
-        v-model="newPosition"
-        placeholder="新增岗位"
-        filterable
-        class="job-goal-dialog__select"
-        @change="addPosition"
-      >
-        <el-option
-          v-for="opt in positionOptions"
-          :key="opt"
-          :label="opt"
-          :value="opt"
-        />
-      </el-select>
+      <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__section">
       <div class="job-goal-dialog__label">*行业</div>
-      <!-- 已选行业标签列表 -->
-      <div class="job-goal-dialog__tags">
-        <span
-          v-for="(item, index) in form.industries"
-          :key="index"
-          class="job-goal-dialog__tag"
-        >
-          {{ item }}
-          <!-- 删除行业标签 -->
-          <el-icon class="job-goal-dialog__tag-close" @click="removeIndustry(index)"><Close /></el-icon>
-        </span>
-      </div>
-      <!-- 行业下拉选择器 -->
-      <el-select
-        v-model="newIndustry"
-        placeholder="新增行业"
-        filterable
-        class="job-goal-dialog__select"
-        @change="addIndustry"
-      >
-        <el-option
-          v-for="opt in industryOptions"
-          :key="opt"
-          :label="opt"
-          :value="opt"
-        />
-      </el-select>
+      <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__section">
       <div class="job-goal-dialog__label">*城市</div>
-      <!-- 已选城市标签列表 -->
-      <div class="job-goal-dialog__tags">
-        <span
-          v-for="(item, index) in form.cities"
-          :key="index"
-          class="job-goal-dialog__tag"
-        >
-          {{ item }}
-          <!-- 删除城市标签 -->
-          <el-icon class="job-goal-dialog__tag-close" @click="removeCity(index)"><Close /></el-icon>
-        </span>
-      </div>
-      <!-- 城市下拉选择器 -->
-      <el-select
-        v-model="newCity"
-        placeholder="新增城市"
-        filterable
-        class="job-goal-dialog__select"
-        @change="addCity"
-      >
-        <el-option
-          v-for="opt in cityOptions"
-          :key="opt"
-          :label="opt"
-          :value="opt"
-        />
-      </el-select>
+      <RegionSelector
+        :regionCodes="selectedRegionCodes"
+        :level="2"
+        :maxSelect="3"
+        :triggerStyle="selectorTriggerStyle"
+        :displayStyle="selectorDisplayStyle"
+        @update:regionCodes="onRegionChange"
+      />
     </div>
 
     <!-- 工作类型选择模块 -->
@@ -126,8 +71,8 @@
           v-for="t in jobTypes"
           :key="t"
           class="job-goal-dialog__type-btn"
-          :class="{ 'job-goal-dialog__type-btn--active': form.jobType === t }"
-          @click="form.jobType = t"
+          :class="{ 'job-goal-dialog__type-btn--active': selectedJobType === t }"
+          @click="selectedJobType = t"
         >
           {{ t }}
         </button>
@@ -142,18 +87,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { Close } from '@element-plus/icons-vue'
+import { useStore } from 'vuex'
+import RegionSelector from './tools/RegionSelector.vue'
+import IndustrySelector from './tools/IndustrySelector.vue'
+import JobCategorySelector from './tools/JobCategorySelector.vue'
 
 /** 组件属性：控制弹窗显示/隐藏 */
 const props = defineProps<{ modelValue: boolean }>()
 
-/** 组件事件：更新弹窗状态、保存表单数据 */
+/** 组件事件：更新弹窗状态 */
 const emit = defineEmits<{
   (e: 'update:modelValue', val: boolean): void
-  (e: 'save', data: { positions: string[]; industries: string[]; cities: string[]; jobType: string }): void
 }>()
 
+const store = useStore()
+
 /** 弹窗可见状态 */
 const visible = ref(props.modelValue)
 /** 监听外部传入的 modelValue 同步弹窗状态 */
@@ -161,102 +111,75 @@ watch(() => props.modelValue, (v) => { visible.value = v })
 /** 监听弹窗状态变化并通知父组件 */
 watch(visible, (v) => { emit('update:modelValue', v) })
 
-/** 表单数据 */
-const form = reactive({
-  /** 已选岗位列表 */
-  positions: ['产品经理'] as string[],
-  /** 已选行业列表 */
-  industries: ['互联网'] as string[],
-  /** 已选城市列表 */
-  cities: ['北京'] as string[],
-  /** 工作类型 */
-  jobType: '全职',
-})
+/** 本地编辑副本 — 打开弹窗时从 store 拷贝，保存时写回 store */
+const selectedCategoryIds = ref<number[]>([])
+const selectedIndustryIds = ref<number[]>([])
+const selectedRegionCodes = ref<string[]>([])
+const selectedJobType = ref('全职')
 
-/** 新增岗位的绑定值 */
-const newPosition = ref('')
-/** 新增行业的绑定值 */
-const newIndustry = ref('')
-/** 新增城市的绑定值 */
-const newCity = ref('')
-
-/** 岗位选项列表 */
-const positionOptions = ['产品经理', '前端工程师', '后端工程师', 'UI设计师', '数据分析师', '运营', '市场营销']
-/** 行业选项列表 */
-const industryOptions = ['互联网', '金融', '教育', '医疗健康', '电子商务', '人工智能', '游戏', '新能源', '房地产', '制造业']
-/** 城市选项列表 */
-const cityOptions = ['北京', '上海', '广州', '深圳', '杭州', '成都', '南京', '武汉']
 /** 工作类型选项列表 */
 const jobTypes = ['实习', '全职']
 
-/**
- * 添加岗位
- * @param val 选中的岗位名称
- */
-function addPosition(val: string) {
-  if (val && !form.positions.includes(val)) {
-    form.positions.push(val)
+/** 弹窗打开时从 store 同步数据到本地编辑副本 */
+watch(() => props.modelValue, (v) => {
+  if (v) {
+    const intention = store.state.jobIntention
+    selectedCategoryIds.value = [...(intention.categoryIds || [])]
+    selectedIndustryIds.value = [...(intention.industryIds || [])]
+    selectedRegionCodes.value = [...(intention.regionCodes || [])]
+    selectedJobType.value = intention.employmentType === 1 ? '实习' : '全职'
   }
-  newPosition.value = ''
+})
+
+/** 选择器触发按钮的自定义样式，适配弹窗内布局（参考 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',
+  'max-width': 'none',
+  'justify-content': 'space-between',
+}
+
+/** 选择器显示文字的自定义样式，覆盖默认 max-width: 1.6rem */
+const selectorDisplayStyle: Record<string, string> = {
+  'max-width': 'none',
+}
+
+/** 岗位选择变更回调 */
+function onCategoryChange(ids: number[]) {
+  selectedCategoryIds.value = ids
+}
+
+/** 行业选择变更回调 */
+function onIndustryChange(ids: number[]) {
+  selectedIndustryIds.value = ids
+}
+
+/** 地区选择变更回调 */
+function onRegionChange(codes: string[]) {
+  selectedRegionCodes.value = codes
 }
 
 /**
- * 移除岗位
- * @param index 要移除的岗位索引
+ * 保存表单数据：调用 store action 保存到后端并同步 store，然后关闭弹窗
  */
-function removePosition(index: number) {
-  form.positions.splice(index, 1)
-}
-
-/**
- * 添加行业
- * @param val 选中的行业名称
- */
-function addIndustry(val: string) {
-  if (val && !form.industries.includes(val)) {
-    form.industries.push(val)
+async function handleSave() {
+  try {
+    await store.dispatch('saveJobIntention', {
+      categoryIds: [...selectedCategoryIds.value],
+      industryIds: [...selectedIndustryIds.value],
+      regionCodes: [...selectedRegionCodes.value],
+      employmentType: selectedJobType.value === '实习' ? 1 : 0,
+    })
+    visible.value = false
+  } catch (e) {
+    console.error('保存求职意向失败', e)
   }
-  newIndustry.value = ''
-}
-
-/**
- * 移除行业
- * @param index 要移除的行业索引
- */
-function removeIndustry(index: number) {
-  form.industries.splice(index, 1)
-}
-
-/**
- * 添加城市
- * @param val 选中的城市名称
- */
-function addCity(val: string) {
-  if (val && !form.cities.includes(val)) {
-    form.cities.push(val)
-  }
-  newCity.value = ''
-}
-
-/**
- * 移除城市
- * @param index 要移除的城市索引
- */
-function removeCity(index: number) {
-  form.cities.splice(index, 1)
-}
-
-/**
- * 保存表单数据并关闭弹窗
- */
-function handleSave() {
-  emit('save', {
-    ...form,
-    positions: [...form.positions],
-    industries: [...form.industries],
-    cities: [...form.cities],
-  })
-  visible.value = false
 }
 
 /**