评论详情：评论基础组件
概述
本节设计评论基础组件，需覆盖两种场景：私信（一对一聊天）和论坛式评论（上下结构的列表）。组件结构包括用户信息区、回复内容区和操作区。
组件结构设计
区域划分
┌─────────────────────────────────────────┐
│ CommentItem │
│ ┌─────────────────────────────────────┐ │
│ │ 用户信息区域 │ │
│ │ ┌──────┐ 用户昵称 │ │
│ │ │ 头像 │ 2小时前 │ │
│ │ └──────┘ │ │
│ ├─────────────────────────────────────┤ │
│ │ 回复内容区域 │ │
│ │ 这是一段评论内容... │ │
│ ├─────────────────────────────────────┤ │
│ │ 操作区域 │ │
│ │ [回复] [点赞] │ │
│ └─────────────────────────────────────┘
└─────────────────────────────────────────┘
text
模板实现
<template>
<div class="comment-item">
<!-- 用户信息区域 -->
<div class="flex items-start gap-3">
<!-- 头像 -->
<el-avatar :size="36" :src="avatar" />
<!-- 用户昵称 + 回复时间 -->
<div class="flex flex-col justify-start items-start">
<span class="text-sm font-medium text-gray-800 dark:text-gray-200">
{{ nickname }}
</span>
<span class="text-xs text-gray-400">
2小时前
</span>
</div>
</div>
<!-- 回复内容 -->
<div class="mt-2 text-sm text-gray-600 dark:text-gray-300">
回复内容区域
</div>
<!-- 操作区域 -->
<div class="flex gap-4 mt-2">
<span class="text-xs text-gray-400 cursor-pointer hover:text-blue-500">
<i class="i-carbon-reply mr-1" />回复
</span>
<span class="text-xs text-gray-400 cursor-pointer hover:text-red-500">
<i class="i-carbon-thumbs-up mr-1" />点赞
</span>
</div>
</div>
</template>
vue
样式设计要点
用户信息区
| 元素 | 样式 | Tailwind 类名 |
|---|---|---|
| 头像 | 与昵称左对齐，垂直居中 | items-start + el-avatar |
| 昵称 | 加粗、小号字体 | font-medium text-sm |
| 回复时间 | 淡色显示 | text-xs text-gray-400 |
| 整体布局 | Flex 水平排列 | flex items-start gap-3 |
两种场景适配
| 特征 | 论坛评论 | 私信消息 |
|---|---|---|
| 布局方向 | 上下结构（列表） | 左右结构（聊天） |
| 内容区域 | 宽度自适应 | 最大宽度限制 |
| 操作按钮 | 回复 + 点赞 | 可能无操作按钮 |
| 时间显示 | 相对时间（2小时前） | 绝对时间（14:30） |
响应式注意事项
- 头部固定时内容区域被压缩在屏幕内，需支持内部滚动
- 用户输入内容后，列表应自动滚动到最新消息位置
- 头像尺寸在不同屏幕宽度下保持一致
关键要点
- 评论组件需同时支持论坛式和私信式两种场景
- 用户信息区使用 Flex 布局，头像与文字信息水平排列
- 昵称使用
font-medium加粗，时间使用淡色text-gray-400区分层级 - 操作区域包含回复和点赞两个基本交互
↑