Comment 评论 ​

<template>
  <el-dropdown trigger="click" @command="onCommand">
    <div class="operation-warp">
        <u-icon>
          <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M586.624 234.624a74.624 74.624 0 1 1-149.184 0 74.624 74.624 0 0 1 149.12 0z m0 554.624a74.624 74.624 0 1 1-149.248 0 74.624 74.624 0 0 1 149.248 0zM512 586.624a74.624 74.624 0 1 0 0-149.248 74.624 74.624 0 0 0 0 149.248z"
              fill="currentColor"
            ></path>
          </svg>
        </u-icon>
      </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="report">举报</el-dropdown-item>
        <el-dropdown-item command="remove">删除</el-dropdown-item>
        <el-dropdown-item divided command="copy">复制</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
import { CommentApi, UToast } from 'undraw-ui'

interface Props {
  comment: CommentApi
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'remove', comment: CommentApi): void
}>()

const { copy } = useClipboard()

const onCommand = (command: any) => {
  switch(command) {
    case 'remove':
      emit('remove', props.comment)
      break
    case 'report':
      UToast({type: 'info', message: '举报成功: ' + props.comment.id})
      break
    case 'copy':
      copy(props.comment.content)
      UToast({type: 'info', message: '复制成功'})
  }
}

</script>

<style lang="scss" scoped>
.el-dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.operation-warp {
  font-size: 16px;
  color: #9499a0;
  cursor: pointer;
  position: relative;
}
.operation-warp:hover {
  color: #00aeec;
}
</style>

// 评论对象
export interface CommentApi {
  id: string | number // 评论id
  parentId: string | number | null // 回复的父id, 一级评论为null
  uid: string | number // 用户id
  content: string  // 评论内容
  address?: string  // 用户地址
  likes?: number  // 点赞数量
  createTime: string  // 创建时间
  user: UserApi  // 用户对象
  reply?: ReplyApi | null // 回复数据
}

// 回复对象
export interface ReplyApi {
  total: number  // 回复总数
  list: CommentApi[]  // 回复列表
}

// 用户对象
export interface UserApi {
  id: string | number  // 用户id
  username: string  // 用户名
  avatar: string  // 用户头像
  level?: number  // 用户等级
  homeLink?: string  // 用户个人主页链接
  likeIds?: string[] | number[]  // 点赞的评论数组id
}

// 评论配置参数
export interface ConfigApi {
  user: UserApi  // 当前用户
  emoji: EmojiApi // 表情包数据
  comments: CommentApi[]  // 评论数据
  replyShowSize?: number // 回复页大小
  show?: ShowApi  // 显示对象
  aTarget?: '_blank' | '_parent' | '_self' | '_top' // 个人主页跳转方式
  mention?: MentionApi  // @提及
  upload?: (files: File[], finish: (val: string[]) => void) => void // 图片上传事件
  page?: boolean // 是否分页
  relativeTime?: boolean // 是否开启人性化时间
}

interface ShowApi {
  form?: boolean  // 是否显示评论表单
  content?: boolean  // 是否显示评论内容
  level?: boolean // 是否显示等级
  likes?: boolean  // 是否点赞
  address?: boolean  // 是否显示地址
  homeLink?: boolean // 是否跳转个人主页地址
  reply?: boolean // 是否显示回复按钮
}

// 回复分页事件
export interface CommentReplyPageApi {
  parentId: string // 父id
  pageNum: any // 页数
  pageSize: number // 页大小
  finish: (reply: ReplyApi) => void // 回调完成覆盖回复数据
}

// 提及评论事件
export interface CommentSubmitApi {
  content: string // 评论内容
  parentId: string | null // 父id
  finish: (comment?: CommentApi) => void // 回调完成添加评论数据
  reply?: CommentApi // 回复数据
  mentionList?: any[] // 提及数据
}