卡片式用户个人主页设计与实现

应用场景介绍

在现代社交网络和社区平台中，用户个人主页是展示个人信息、发布动态、互动交流的重要载体。为了提升用户体验，设计一个美观、功能丰富的卡片式用户个人主页至关重要。

代码基本功能介绍

该代码段实现了基于 Vue 3 的卡片式用户个人主页，包含以下主要功能：

• 个人信息展示：头像、姓名、ID 等基本信息。
• 关注按钮：用户可以关注或取消关注。
• 标签页导航：切换动态、文章、问答、收藏等内容。
• 最新动态卡片：展示用户发布的动态，包括标题、时间和封面图片。
• 发布按钮：用户可以发布新动态。

功能实现步骤及关键代码分析

1. 搭建基本布局

<template>
  <div class="bg-gray-100 h-screen">
    <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      ...
    </div>
    <van-button
      round
      type="primary"
      size="large"
      class="fixed bottom-0 right-0 mr-4 mb-4"
      >发布</van-button
    >
  </div>
</template>

这段代码定义了页面整体布局，包括一个白色卡片作为个人主页主体，以及一个固定在右下角的发布按钮。

2. 个人信息展示

<div class="flex justify-between">
  <div class="flex items-center">
    <img
      class="w-10 h-10 rounded-full mr-4"
      src="https://source.unsplash.com/random/100x100"
      alt="avatar"
    />
    <div class="text-gray-600">
      <p class="text-sm font-bold">Kathy Loon</p>
      <p class="text-xs">ID: 1234567890</p>
    </div>
  </div>
  <div>
    <van-button round type="primary" size="small">关注</van-button>
  </div>
</div>

这段代码在卡片头部展示了用户的头像、姓名、ID 和关注按钮。

3. 标签页导航

<div class="mt-4">
  <van-tabs>
    <van-tab>动态</van-tab>
    <van-tab>文章</van-tab>
    <van-tab>问答</van-tab>
    <van-tab>收藏</van-tab>
  </van-tabs>
</div>

这段代码使用 Vuetify 的 van-tabs 组件实现了标签页导航，用户可以切换不同内容。

4. 最新动态卡片

<van-card>
  <template #title>
    <div class="flex justify-between items-center">
      <span>最新动态</span>
      <van-icon name="more-o" />
    </div>
  </template>
  <div class="flex flex-col gap-4">
    <van-cell
      title="标题一"
      label="2023-03-08"
      icon="https://source.unsplash.com/random/100x100"
    />
    <van-cell
      title="标题二"
      label="2023-03-07"
      icon="https://source.unsplash.com/random/100x100"
    />
    <van-cell
      title="标题三"
      label="2023-03-06"
      icon="https://source.unsplash.com/random/100x100"
    />
  </div>
</van-card>

这段代码使用 Vuetify 的 van-card 组件创建了最新动态卡片，其中包括动态标题、时间和封面图片。

5. 发布按钮

<van-button
  round
  type="primary"
  size="large"
  class="fixed bottom-0 right-0 mr-4 mb-4"
  >发布</van-button
>

这段代码使用 Vuetify 的 van-button 组件创建了一个固定在右下角的发布按钮，用户点击后可以发布新动态。

总结与展望

开发经验与收获

• 掌握了 Vue 3、Vuetify 等框架的应用。
• 理解了卡片式个人主页的设计原则和实现方法。
• 提升了代码复用性和可维护性。

未来拓展与优化

• 集成富文本编辑器，支持动态发布。
• 引入数据持久化，实现动态的增删改查。
• 添加社交互动功能，如评论、点赞、分享。
• 优化页面布局，适应不同屏幕尺寸。