新版交互调整

src/components/AgentChatJobList.vue

@@ -1,31 +1,41 @@
 <template>
-  <!-- Agent会话岗位列表组件 — 聊天区域中显示推荐岗位卡片 -->
+  <!-- Agent推荐岗位列表组件 — 展示推荐岗位卡片 -->
   <div class="agent-chat-job-list">
+    <!-- 标题 -->
+    <div class="agent-chat-job-list__header">为你推荐的岗位</div>
     <!-- 推荐说明文字 -->
-    <div class="agent-chat-job-list__summary">{{ summary }}</div>
+    <div class="agent-chat-job-list__summary">{{ summary || '根据求职目标和简历信息智能推荐' }}</div>
 
-    <!-- 岗位列表（只显示前3个） -->
+    <!-- 岗位列表（显示前3个） -->
     <div
       v-for="job in displayJobs"
       :key="job.id"
       class="agent-chat-job-list__item"
-      v-if="displayJobs.length>0"
-      @click="handleClickJob(job)"
     >
-      <!-- 左侧：公司图标 + 岗位信息 -->
-      <div class="agent-chat-job-list__info">
-        <!-- 公司 Logo -->
-        <div class="agent-chat-job-list__logo">
-          <img v-if="job.companyLogoUrl" :src="job.companyLogoUrl" :alt="job.companyShortName" />
-          <svg v-else viewBox="0 0 24 24" fill="none">
-            <path d="M3 21V7l9-4 9 4v14H3z" stroke="currentColor" stroke-width="1.5" />
-            <path d="M9 21v-6h6v6" stroke="currentColor" stroke-width="1.5" />
+      <!-- 左侧：匹配度环形 + 岗位信息 -->
+      <div class="agent-chat-job-list__info" @click="handleClickJob(job)">
+        <!-- 匹配度环形 -->
+        <div class="agent-chat-job-list__score">
+          <svg class="agent-chat-job-list__ring" viewBox="0 0 44 44">
+            <circle cx="22" cy="22" r="18" fill="none" stroke="#E8E8E8" stroke-width="3" />
+            <circle
+              cx="22" cy="22" r="18" fill="none"
+              stroke="#4FC2C9" stroke-width="3"
+              stroke-linecap="round"
+              :stroke-dasharray="2 * Math.PI * 18"
+              :stroke-dashoffset="2 * Math.PI * 18 * (1 - (job.matchScore || 0) / 100)"
+              transform="rotate(-90 22 22)"
+            />
           </svg>
+          <span class="agent-chat-job-list__score-text">{{ job.matchScore || 0 }}%</span>
         </div>
         <!-- 岗位详情 -->
         <div class="agent-chat-job-list__detail">
-          <div class="agent-chat-job-list__company">{{ job.companyShortName || job.companyName }}</div>
-          <div class="agent-chat-job-list__title">{{ job.title }}</div>
+          <div class="agent-chat-job-list__title-row">
+            <span class="agent-chat-job-list__title">{{ job.title }}</span>
+            <span v-if="job.companyShortName || job.companyName" class="agent-chat-job-list__company-dot">●</span>
+            <span class="agent-chat-job-list__company">{{ job.companyShortName || job.companyName }}</span>
+          </div>
           <!-- 标签 -->
           <div class="agent-chat-job-list__tags">
             <span v-if="job.regionName" class="agent-chat-job-list__tag">{{ job.regionName }}</span>
@@ -35,31 +45,38 @@
         </div>
       </div>
 
-      <!-- 右侧：匹配度环形 -->
-      <div class="agent-chat-job-list__score">
-        <svg class="agent-chat-job-list__ring" viewBox="0 0 44 44">
-          <!-- 背景圆环 -->
-          <circle cx="22" cy="22" r="18" fill="none" stroke="#E8E8E8" stroke-width="3" />
-          <!-- 进度圆环 -->
-          <circle
-            cx="22" cy="22" r="18" fill="none"
-            stroke="#4FC2C9" stroke-width="3"
-            stroke-linecap="round"
-            :stroke-dasharray="2 * Math.PI * 18"
-            :stroke-dashoffset="2 * Math.PI * 18 * (1 - (job.matchScore || 0) / 100)"
-            transform="rotate(-90 22 22)"
-          />
-        </svg>
-        <span class="agent-chat-job-list__score-text">{{ job.matchScore || 0 }}%</span>
+      <!-- 右侧：操作按钮 -->
+      <div class="agent-chat-job-list__actions">
+        <!-- 不再推荐 -->
+        <span class="agent-chat-job-list__dismiss-btn" @click.stop="handleDismiss(job)">不再推荐</span>
+        <!-- 添加/已加入按钮 -->
+        <button
+          v-if="job.applicationStatus === -1"
+          class="agent-chat-job-list__add-btn agent-chat-job-list__add-btn--added"
+          disabled
+        >✓已加入</button>
+        <button
+          v-else
+          class="agent-chat-job-list__add-btn"
+          :disabled="loadingJobIds.includes(job.id)"
+          @click.stop="handleAdd(job)"
+        >+ 加入投递</button>
       </div>
     </div>
-    <div class="color-9" v-if="displayJobs.length==0">
+
+    <!-- 空状态 -->
+    <div class="color-9" v-if="displayJobs.length === 0">
       暂无相关职位推荐
     </div>
 
-    <!-- 查看全部岗位按钮 -->
-    <div  v-if="displayJobs.length>0" class="agent-chat-job-list__footer">
-      <button class="agent-chat-job-list__view-all-btn" @click="handleViewAll">查看全部岗位</button>
+    <!-- 底部按钮区域 -->
+    <div v-if="displayJobs.length > 0" class="agent-chat-job-list__footer">
+      <!-- 换一批按钮 -->
+      <button class="agent-chat-job-list__refresh-btn" :disabled="refreshing" @click="handleRefresh">
+        {{ refreshing ? '加载中...' : '换一批' }}
+      </button>
+      <!-- 全部添加按钮 -->
+      <button class="agent-chat-job-list__add-all-btn" @click="handleAddAll">全部添加</button>
     </div>
   </div>
 </template>
@@ -72,30 +89,57 @@ import type { AgentRecommendJob } from '@/api/agent'
 const props = defineProps<{
   /** 推荐说明文字 */
   summary: string
-  /** 完整岗位列表数据 */
+  /** 当前展示的岗位列表数据（父组件已随机抽取10个） */
   jobs: AgentRecommendJob[]
+  /** 正在请求中的岗位 ID 列表 */
+  loadingJobIds?: number[]
+  /** 是否正在换一批加载中 */
+  refreshing?: boolean
 }>()
 
 /** 事件 */
 const emit = defineEmits<{
-  /** 点击查看全部岗位 */
+  /** 点击查看全部岗位（打开右侧面板） */
   (e: 'viewAll'): void
   /** 点击岗位查看详情 */
   (e: 'clickJob', job: AgentRecommendJob): void
+  /** 添加单个岗位到待投递 */
+  (e: 'add', job: AgentRecommendJob): void
+  /** 全部添加 */
+  (e: 'addAll'): void
+  /** 换一批 */
+  (e: 'refresh'): void
+  /** 不再推荐 */
+  (e: 'dismiss', job: AgentRecommendJob): void
 }>()
 
 /** 只显示前3个岗位 */
 const displayJobs = computed(() => props.jobs.slice(0, 3))
 
-/** 点击查看全部岗位 */
-function handleViewAll() {
-  emit('viewAll')
-}
-
 /** 点击岗位 — 通知父组件打开岗位预览 */
 function handleClickJob(job: AgentRecommendJob) {
   emit('clickJob', job)
 }
+
+/** 添加岗位到待投递 */
+function handleAdd(job: AgentRecommendJob) {
+  emit('add', job)
+}
+
+/** 全部添加 */
+function handleAddAll() {
+  emit('addAll')
+}
+
+/** 换一批 */
+function handleRefresh() {
+  emit('refresh')
+}
+
+/** 不再推荐 */
+function handleDismiss(job: AgentRecommendJob) {
+  emit('dismiss', job)
+}
 </script>
 
 <style scoped lang="scss">