初始化

.gitignore

@@ -21,3 +21,4 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
+docker规范.md

src/components/UserCard/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="user-card">
+    <div class="card-content">
+      <img :src="avatar" :alt="name" class="avatar">
+      <div class="user-info">
+        <div class="name-row">
+          <span class="name">{{ name }}</span>
+          <el-tag v-if="role" size="small" type="success" class="role-tag">{{ role }}</el-tag>
+        </div>
+        <el-button
+          :type="isFollowed ? 'success' : 'primary'"
+          size="small"
+          class="follow-btn"
+          @click="handleFollow"
+        >
+          {{ isFollowed ? '已关注' : '关注' }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserCard',
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    avatar: {
+      type: String,
+      required: true
+    },
+    role: {
+      type: String,
+      default: ''
+    },
+    onFollow: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      isFollowed: false
+    }
+  },
+  methods: {
+    handleFollow() {
+      this.isFollowed = !this.isFollowed
+      if (this.onFollow && typeof this.onFollow === 'function') {
+        this.onFollow(this.name)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.user-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
+  }
+
+  .card-content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .avatar {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid #e4e7ed;
+    flex-shrink: 0;
+  }
+
+  .user-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .name-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .name {
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .role-tag {
+    flex-shrink: 0;
+  }
+
+  .follow-btn {
+    align-self: flex-start;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .user-card {
+    padding: 16px;
+
+    .card-content {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .avatar {
+      width: 80px;
+      height: 80px;
+    }
+
+    .user-info {
+      width: 100%;
+      align-items: center;
+    }
+
+    .name-row {
+      justify-content: center;
+    }
+
+    .follow-btn {
+      align-self: center;
+      width: 100%;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -372,6 +372,19 @@ export const asyncRoutes = [
     ]
   },
 
+  {
+    path: '/user-card',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/user-card/index'),
+        name: 'UserCardDemo',
+        meta: { title: 'UserCard', icon: 'user' }
+      }
+    ]
+  },
+
   {
     path: 'external-link',
     component: Layout,

src/views/user-card/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="user-card-page">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>用户卡片展示</span>
+      </div>
+      <div class="page-description">
+        <p>这是一个可复用的用户信息卡片组件演示页面，展示了两个不同用户的数据。</p>
+        <p>点击"关注"按钮可以切换状态，并在控制台打印触发信息。</p>
+      </div>
+      <div class="card-grid">
+        <UserCard
+          v-for="user in userList"
+          :key="user.id"
+          :name="user.name"
+          :avatar="user.avatar"
+          :role="user.role"
+          :on-follow="handleFollow"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import UserCard from '@/components/UserCard'
+
+export default {
+  name: 'UserCardDemo',
+  components: { UserCard },
+  data() {
+    return {
+      userList: [
+        {
+          id: 1,
+          name: '张三',
+          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+          role: '管理员'
+        },
+        {
+          id: 2,
+          name: '李四',
+          avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+          role: '编辑'
+        },
+        {
+          id: 3,
+          name: '王五',
+          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+          role: ''
+        }
+      ]
+    }
+  },
+  methods: {
+    handleFollow(name) {
+      console.log(`关注了用户: ${name}`)
+      this.$message({
+        message: `您已${this.isUserFollowed(name) ? '关注' : '取消关注'}: ${name}`,
+        type: 'success'
+      })
+    },
+    isUserFollowed(name) {
+      return true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.user-card-page {
+  padding: 20px;
+
+  .page-description {
+    margin-bottom: 24px;
+    color: #606266;
+    line-height: 1.6;
+
+    p {
+      margin: 8px 0;
+    }
+  }
+
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .user-card-page {
+    padding: 12px;
+
+    .card-grid {
+      grid-template-columns: 1fr;
+      gap: 16px;
+    }
+  }
+}
+</style>