refactor: 讨论区工具条按钮重构

src/components/Basic/IconButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="icon-button" :class="classList" :title="title ? title : ''" @click="$emit('click')" :style="style">
-    <c-icon :theme="theme" :bold="!noBold" :size="size ? size / 1.4 - 4 : 26">
+    <c-icon :theme="theme" :bold="!noBold" :size="size ? size / 1.6 - 6 : 26">
       <slot></slot>
     </c-icon>
     <ripple></ripple>

src/components/Discussion/CComment.vue

@@ -122,8 +122,8 @@ export default {
   box-sizing: border-box;
   position: relative;
   width: 100%;
-  margin: 0 -16px;
-  padding: 12px 16px;
+  padding: 2px 12px 6px 12px;
+  margin: 16px -8px;
 }
 
 .new-comment {

src/components/Discussion/CommentToolBar.vue

@@ -1,31 +1,15 @@
 <template>
   <div class="comment-tool-bar">
-    <div class="actions">
-      <div v-if="isTeacher && !topNumber" class="action-button-wrapper green" @click="handleToTop">
-        <icon-button title="置顶本条消息" theme="green" :size="30" ripple="green">publish</icon-button>
-        <span>置顶</span>
-      </div>
-      <div v-if="isTeacher && topNumber" class="action-button-wrapper green" @click="handleCancelToTop">
-        <icon-button title="置顶本条消息" theme="green" :size="30" ripple="green">close</icon-button>
-        <span>取消置顶</span>
-      </div>
-      <div v-if="isTeacher && !hasReply" class="action-button-wrapper blue"
-           @click="handleShowHideReplyInput">
-        <icon-button title="回复本条讨论" theme="blue" :size="30" ripple="blue">reply</icon-button>
-        <span>回复</span>
-      </div>
-      <div v-if="isTeacher && hasReply" class="action-button-wrapper red" @click="handleDeleteReply">
-        <icon-button title="删除本条讨论" theme="red" :size="30" ripple="red">cancel</icon-button>
-        <span>删除回复</span>
-      </div>
-      <div v-if="canDelete" class="action-button-wrapper red" @click="handleDeleteComment">
-        <icon-button title="删除本条讨论" theme="red" :size="30" ripple="red">delete</icon-button>
-        <span>删除讨论</span>
-      </div>
+    <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="isTeacher && !hasReply" @click="handleShowHideReplyInput" theme="blue" text icon="reply">回复</c-button>
+      <c-button v-if="isTeacher && hasReply" @click="handleDeleteReply" theme="red" text icon="cancel">删除回复</c-button>
+      <c-button v-if="canDelete" @click="handleDeleteComment" theme="red" text icon="delete">删除回复</c-button>
     </div>
     <div v-show="replyInputShow && !hasReply" class="reply-input-wrapper">
       <c-input placeholder="在此输入回复内容" v-model="replyContent"></c-input>
-      <icon-button @click="handleReply" theme="green">send</icon-button>
+      <icon-button :size="44" @click="handleReply" theme="green">send</icon-button>
     </div>
   </div>
 </template>
@@ -34,10 +18,11 @@
 import IconButton from '@/components/Basic/IconButton'
 import { mapState } from 'vuex'
 import CInput from '@/components/Basic/CInput'
+import CButton from '@/components/Basic/CButton'
 
 export default {
   props: ['userId', 'hasReply', 'topNumber'],
-  components: { CInput, IconButton },
+  components: { CButton, CInput, IconButton },
   data () {
     return {
       replyInputShow: false,
@@ -83,42 +68,20 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
-
 .comment-tool-bar {
-  margin: 0 -8px 0 -8px;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-}
-
-.action-button-wrapper {
-  margin-right: 12px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  transition: .2s;
-
-  span {
-    font-size: 14px;
-    color: #7a8a9a;
-  }
-
-  &:hover {
-    opacity: .8;
-  }
+  margin: 0 -16px;
 }
 
 .reply-input-wrapper {
-  padding: 0 12px;
-  box-sizing: border-box;
-  width: 100%;
   display: flex;
-
+  align-items: center;
   .c-input {
-    margin-right: 8px;
-    width: 100%;
+    height: 36px;
+    font-size: 14px ;
+    margin-left: 12px;
+  }
+  .icon-button {
+    margin: 0 12px;
   }
 }
 </style>

src/components/Discussion/DiscussionArea.vue

@@ -117,7 +117,7 @@ export default {
 .discussion-area {
   margin-top: 16px;
   box-sizing: border-box;
-  min-width: 380px;
+  min-width: 400px;
   flex: 1;
   padding: 0 24px;
 }
@@ -135,7 +135,7 @@ export default {
   }
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 800px) {
   .discussion-area {
     margin-top: unset;
     max-width: 500px;

src/components/DiscussionTab/CMessage.vue

@@ -103,7 +103,7 @@ export default {
   min-height: 50px;
   box-sizing: border-box;
   border: 1px solid transparent;
-  background-color: #f8fafd;
+  background-color: $card-background;
 }
 
 .c-editing-message {

src/components/PDF/Pdf.vue

@@ -54,9 +54,9 @@ export default {
       }
     },
     src (value) {
-      if (this.loading && value) {
-        this.load(value)
-      }
+      // if (this.loading && value) {
+      //   this.load(value)
+      // }
     }
   },
   methods: {

src/style/theme.scss

@@ -26,6 +26,6 @@ $icon-hover-color: lighten($theme-blue, 10);
 $input-background-color: rgba(235, 242, 245, 0.5);
 $input-hover-background-color: rgba(230, 237, 240, 0.5);
 
-$card-background: rgba(235, 242, 245, 0.6);
+$card-background: rgba(237, 244, 247, 0.6);
 
 $white-transparent: rgba(255, 255, 255, .5);