frontend/src/components/Discussion/CommentToolBar.vue

<template>
  <div class="comment-tool-bar">
    <div>
      <c-button v-if="isTeacher && !topNumber" @click="handleToTop" theme="green" text icon="publish">置顶</c-button>
      <c-button v-if="isTeacher && topNumber" @click="handleCancelToTop" theme="green" text icon="close">取消置顶</c-button>
      <c-button v-if="isOwn" @click="handleChangeShow" theme="orange" text :icon="personal ? 'lock_open' : 'lock'">
        {{personal ? '公开' : '设为私有'}}
      </c-button>
      <c-button v-if="isTeacher && !reply" @click="handleShowHideReplyInput" theme="blue" text icon="reply">回复
      </c-button>
      <c-button v-if="isTeacher && reply" @click="handleDeleteReply" theme="blue" text icon="cancel">删除回复</c-button>
      <c-button v-if="isOwn" @click="handleDeleteComment" theme="red" text icon="delete">删除留言</c-button>
    </div>
    <show-transition-small>
      <div v-show="replyInputShow && !reply" class="reply-input-wrapper vertical-center">
        <input ref="reply" placeholder="在此输入回复内容" v-model="replyContent">
        <icon-button :size="32" @click="handleReply" theme="green">send</icon-button>
      </div>
    </show-transition-small>
  </div>
</template>

<script>
import IconButton from '@/components/Basic/IconButton'
import { mapState } from 'vuex'
import CButton from '@/components/Basic/CButton'
import ShowTransitionSmall from '@/animations/ShowTransitionSmall'
import { FOCUS_ON_INPUT, USE_FOCUS } from '@/store/types/pdf-types'

export default {
  props: {
    userId: Number,
    reply: String,
    topNumber: [Number, String],
    personal: Boolean
  },
  components: { ShowTransitionSmall, CButton, IconButton },
  data () {
    return {
      replyInputShow: false,
      replyContent: ''
    }
  },
  watch: {
    replyInputShow () {
      if (this.replyInputShow) {
        this.$store.commit(FOCUS_ON_INPUT)
      } else {
        this.$store.commit(USE_FOCUS)
      }
    },
    focus (newValue) {
      if (this.replyInputShow && !newValue) {
        this.replyInputShow = false
      }
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.main.userInfo,
      focus: state => state.pdf.focus
    }),
    isOwn () {
      return this.userId === this.userInfo.id
    },
    isTeacher () {
      return this.userInfo.role === 'TEACHER'
    }
  },
  methods: {
    handleShowHideReplyInput () {
      setTimeout(() => {
        this.$refs.reply.focus()
      }, 10)
      this.replyInputShow = !this.replyInputShow
    },
    handleReply () {
      if (!this.replyContent) {
        this.$setInfoMessage('无法回复空消息')
      }
      this.$emit('reply', this.replyContent)
    },
    handleDeleteReply () {
      this.$emit('delete-reply')
    },
    handleDeleteComment () {
      this.$emit('delete-comment')
    },
    handleToTop () {
      this.$emit('to-top')
    },
    handleCancelToTop () {
      this.$emit('cancel-to-top')
    },
    handleChangeShow () {
      this.$emit('change-show')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/style/theme.scss';

.comment-tool-bar {
  margin: 0 -16px 2px -16px;
}

.c-button {
  opacity: .5;
  transform: scale(.9);
  margin-right: -12px;

  &:hover {
    opacity: 1;
  }
}

.reply-input-wrapper {
  input {
    background-color: rgba(255, 255, 255, 0.5);
    height: 36px;
    font-size: 14px;
    margin-left: 12px;
  }

  .icon-button {
    margin: 0 12px 0 8px;
  }
}

input, textarea {
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: #3a4a5a;
  background: $input-background-color;
  border-radius: 8px;
  border: none;
  outline: none;
  width: 100%;
  height: 40px;
  line-height: 1.5;
  padding: 0 12px 0 12px;
  transition: .2s;

  &:hover {
    background: $input-hover-background-color;
  }

  &::placeholder {
    color: #8a9aaa;
  }
}
</style>