offerpai_web/src/views/Resume.vue

<template>
  <div class="resume-page dflex">
    <SideNav />
    <div class="resume-page__content">
      <!-- 页面标题 + 上传按钮 -->
      <div class="resume-page__header">
        <h2 class="resume-page__title">我的简历</h2>
        <button class="resume-page__upload-btn" @click="handleUpload">
          <svg viewBox="0 0 16 16" fill="none" class="resume-page__upload-icon">
            <path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
          上传简历
        </button>
      </div>

      <!-- 简历表格 -->
      <div class="resume-page__table-wrap">
        <table class="resume-page__table">
          <thead>
            <tr>
              <th class="resume-page__th">简历</th>
              <th class="resume-page__th">目标岗位</th>
              <th class="resume-page__th">最近修改</th>
              <th class="resume-page__th">创建时间</th>
              <th class="resume-page__th resume-page__th--action"></th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="item in resumeList"
              :key="item.id"
              class="resume-page__row"
              @click="goDetail(item.id)"
            >
              <td class="resume-page__td">
                <div class="resume-page__name-cell">
                  <span class="resume-page__avatar" :style="{ background: item.avatarColor }">
                    {{ item.avatarLetter }}
                  </span>
                  <span class="resume-page__name">{{ item.name }}</span>
                  <span v-if="item.isDefault" class="resume-page__default-tag">默认</span>
                </div>
              </td>
              <td class="resume-page__td">{{ item.targetJob }}</td>
              <td class="resume-page__td">{{ item.updatedAt }}</td>
              <td class="resume-page__td">{{ item.createdAt }}</td>
              <td class="resume-page__td resume-page__td--action">
                <button
                  class="resume-page__more-btn"
                  aria-label="更多操作"
                  @click.stop="toggleMenu(item.id)"
                >
                  <svg viewBox="0 0 16 16" fill="currentColor" class="resume-page__more-svg">
                    <circle cx="3" cy="8" r="1.5"/>
                    <circle cx="8" cy="8" r="1.5"/>
                    <circle cx="13" cy="8" r="1.5"/>
                  </svg>
                </button>
                <!-- 弹出菜单 -->
                <div v-if="activeMenuId === item.id" class="resume-page__popup" @click.stop>
                  <div
                    v-for="action in popupActions"
                    :key="action"
                    class="resume-page__popup-item"
                    @click="handleAction(action, item.id)"
                  >
                    {{ action }}
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import SideNav from '@/components/SideNav.vue'

const router = useRouter()

// ==================== 类型定义 ====================

/** 简历列表项类型 */
interface ResumeItem {
  id: string
  name: string
  avatarLetter: string
  avatarColor: string
  isDefault: boolean
  targetJob: string
  updatedAt: string
  createdAt: string
}

// ==================== 数据（模拟数据，后续对接接口） ====================

/** 简历列表 */
const resumeList = ref<ResumeItem[]>([
  {
    id: '1',
    name: '李华_产品经理',
    avatarLetter: 'D',
    avatarColor: '#1A1A2E',
    isDefault: true,
    targetJob: '产品经理',
    updatedAt: '1个月前',
    createdAt: '1个月前',
  },
  {
    id: '2',
    name: '李华_产品运营',
    avatarLetter: 'C',
    avatarColor: '#4FC2C9',
    isDefault: false,
    targetJob: '产品运营',
    updatedAt: '1个月前',
    createdAt: '1个月前',
  },
  {
    id: '3',
    name: '李华_产品经理',
    avatarLetter: '?',
    avatarColor: '#BFBFBF',
    isDefault: false,
    targetJob: '',
    updatedAt: '1个月前',
    createdAt: '1个月前',
  },
])

// ==================== 页面状态 ====================

/** 当前打开弹出菜单的简历 ID */
const activeMenuId = ref<string | null>(null)

/** 弹出菜单操作项 */
const popupActions = ['设为默认简历', '编辑', '导出简历', '删除']

// ==================== 事件处理 ====================

/** 切换弹出菜单的显示/隐藏 */
function toggleMenu(id: string) {
  activeMenuId.value = activeMenuId.value === id ? null : id
}

/** 弹出菜单操作点击 */
function handleAction(action: string, id: string) {
  activeMenuId.value = null
  console.log(action, id)
}

/** 上传简历 */
function handleUpload() {
  console.log('上传简历')
}

/** 跳转到简历详情页 */
function goDetail(id: string) {
  router.push(`/resume/${id}`)
}
</script>