feat:重构模块架构

src/components/Project/ProjectCard.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="timeline-item animate-item">
+    <!-- 时间点标记 -->
+    <div class="timeline-dot">
+      <i class="fa fa-project-diagram"></i>
+    </div>
+
+    <!-- 内容容器 -->
+    <div class="timeline-content">
+      <div class="project-header">
+        <span class="period">{{ item.period }}</span>
+        <h3 class="name">{{ item.name }}</h3>
+        <h4 class="role">{{ item.role }}</h4>
+      </div>
+
+      <p class="description">{{ item.description }}</p>
+
+      <div class="responsibilities" v-if="item.responsibilities && item.responsibilities.length > 0">
+        <h4>主要职责</h4>
+        <ul>
+          <li v-for="(resp, i) in item.responsibilities" :key="i">{{ resp }}</li>
+        </ul>
+      </div>
+
+      <div class="project-tags">
+        <el-tag
+            v-for="(tag, index) in item.tags"
+            :key="index"
+            effect="light"
+        >
+          {{ tag }}
+        </el-tag>
+      </div>
+    </div>
+
+    <!-- 图片 -->
+    <div class="timeline-image" v-if="item.image">
+      <img :src="item.image" :alt="item.name + '项目图片'" class="project-image">
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, PropType } from 'vue'
+import { IProject } from '@/types'
+
+const props = defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<IProject>
+  }
+})
+</script>