From 5275dd211e705ad843d5772697fdf9bfad7174d3 Mon Sep 17 00:00:00 2001
From: TianyangZhang <zty18395607196@163.com>
Date: Wed, 25 Mar 2026 17:13:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(portal):=20=E8=81=8C=E4=BD=8D=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=B7=BB=E5=8A=A0=E5=8F=91=E5=B8=83=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E5=92=8C=E5=88=86=E4=BA=AB=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在职位卡片中显示发布时间（格式：YYYY-MM-DD）
- 添加分享图标按钮，点击复制职位详情页链接
- 分享按钮用 Element Plus 的 ShareDocument 图标代替
---
 offer_frontend/src/components/JobCard.vue | 113 +++++++++++++++++++---
 1 file changed, 97 insertions(+), 16 deletions(-)

diff --git a/offer_frontend/src/components/JobCard.vue b/offer_frontend/src/components/JobCard.vue
index e1453b8..79010fe 100644
--- a/offer_frontend/src/components/JobCard.vue
+++ b/offer_frontend/src/components/JobCard.vue
@@ -1,22 +1,103 @@
 <template>
-  <el-card class="job-card" shadow="hover" @click="$router.push(`/jobs/${job.id}`)">
-    <div class="job-title">{{ job.title }}</div>
-    <div class="job-meta">
-      <span>{{ job.company_name || job.organization_name }}</span>
-      <el-divider direction="vertical" />
-      <span>{{ job.location }}</span>
-      <el-divider direction="vertical" />
-      <span class="salary">{{ job.salary }}</span>
-    </div>
-    <el-tag size="small">{{ job.category }}</el-tag>
-  </el-card>
+  <div class="job-card-wrapper">
+    <el-card class="job-card" shadow="hover" @click="$router.push(`/jobs/${job.id}`)">
+      <div class="job-title">{{ job.title }}</div>
+      <div class="job-meta">
+        <span>{{ job.company_name || job.organization_name }}</span>
+        <el-divider direction="vertical" />
+        <span>{{ job.location }}</span>
+        <el-divider direction="vertical" />
+        <span class="salary">{{ job.salary }}</span>
+      </div>
+      <div class="job-footer">
+        <el-tag size="small">{{ job.category }}</el-tag>
+        <span class="publish-time">{{ formatDate(job.created_at) }}</span>
+      </div>
+    </el-card>
+    <el-button
+      class="share-btn"
+      type="primary"
+      text
+      @click.stop="shareJob"
+      :icon="ShareDocument"
+    />
+  </div>
 </template>
 <script setup>
-defineProps({ job: Object })
+import { ElMessage } from 'element-plus'
+import { ShareDocument } from '@element-plus/icons-vue'
+
+const props = defineProps({ job: Object })
+
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  return dateStr.slice(0, 10)
+}
+
+function shareJob() {
+  // 生成职位详情页链接
+  const jobUrl = `${window.location.origin}/#/jobs/${props.job.id}`
+
+  // 复制到剪贴板
+  navigator.clipboard.writeText(jobUrl).then(() => {
+    ElMessage.success('已复制职位链接')
+  }).catch(() => {
+    // 降级方案
+    const textArea = document.createElement('textarea')
+    textArea.value = jobUrl
+    document.body.appendChild(textArea)
+    textArea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textArea)
+    ElMessage.success('已复制职位链接')
+  })
+}
 </script>
 <style scoped>
-.job-card { cursor: pointer; margin-bottom: 12px; }
-.job-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
-.job-meta { color: #666; font-size: 13px; margin-bottom: 8px; }
-.salary { color: #f56c6c; font-weight: 500; }
+.job-card-wrapper {
+  position: relative;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.job-card {
+  cursor: pointer;
+  flex: 1;
+}
+
+.job-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.job-meta {
+  color: #666;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.job-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+}
+
+.publish-time {
+  color: #999;
+  font-size: 12px;
+}
+
+.salary {
+  color: #f56c6c;
+  font-weight: 500;
+}
+
+.share-btn {
+  margin-top: 8px;
+  flex-shrink: 0;
+}
 </style>