添加评论界面

src/renderer/assets/styles/variables.less

@@ -23,6 +23,7 @@
 @color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
 // @color-theme_2-line: transparent;
 @color-theme_2-line: lighten(@color-theme, 35%);
+@color-reply-floor: fadeout(@color-theme, 95%);
 @color-theme-sidebar: @color-theme;
 @color-btn: lighten(@color-theme, 5%);
 @color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
@@ -91,6 +92,7 @@
 @color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
 // @color-green-theme_2-line: transparent;
 @color-green-theme_2-line: lighten(@color-green-theme, 45%);
+@color-green-reply-floor: lighten(@color-green-theme, 45%);
 @color-green-theme-sidebar: @color-green-theme;
 @color-green-btn: lighten(@color-green-theme, 5%);
 @color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
@@ -148,6 +150,7 @@
 @color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
 // @color-yellow-theme_2-line: transparent;
 @color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
+@color-yellow-reply-floor: lighten(@color-yellow-theme, 28%);
 @color-yellow-theme-sidebar: @color-yellow-theme;
 @color-yellow-btn: darken(@color-yellow-theme, 5%);
 @color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%);
@@ -204,6 +207,7 @@
 @color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
 // @color-orange-theme_2-line: transparent;
 @color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
+@color-orange-reply-floor: lighten(@color-orange-theme, 36%);
 @color-orange-theme-sidebar: @color-orange-theme;
 @color-orange-btn: lighten(@color-orange-theme, 5%);
 @color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%);
@@ -260,6 +264,7 @@
 @color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
 // @color-blue-theme_2-line: transparent;
 @color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
+@color-blue-reply-floor: lighten(@color-blue-theme, 42%);
 @color-blue-theme-sidebar: @color-blue-theme;
 @color-blue-btn: lighten(@color-blue-theme, 5%);
 @color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%);
@@ -316,6 +321,7 @@
 @color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
 // @color-red-theme_2-line: transparent;
 @color-red-theme_2-line: lighten(@color-red-theme, 42%);
+@color-red-reply-floor: lighten(@color-red-theme, 42%);
 @color-red-theme-sidebar: @color-red-theme;
 @color-red-btn: lighten(@color-red-theme, 5%);
 @color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
@@ -374,6 +380,7 @@
 @color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 50%);
 // @color-pink-theme_2-line: transparent;
 @color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
+@color-pink-reply-floor: lighten(@color-pink-theme, 25%);
 @color-pink-theme-sidebar: @color-pink-theme;
 @color-pink-btn: darken(@color-pink-theme, 3%);
 @color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%);
@@ -430,6 +437,7 @@
 @color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
 // @color-purple-theme_2-line: transparent;
 @color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
+@color-purple-reply-floor: lighten(@color-purple-theme, 43%);
 @color-purple-theme-sidebar: @color-purple-theme;
 @color-purple-btn: lighten(@color-purple-theme, 5%);
 @color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
@@ -486,6 +494,7 @@
 @color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
 // @color-grey-theme_2-line: transparent;
 @color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
+@color-grey-reply-floor: lighten(@color-grey-theme, 47%);
 @color-grey-theme-sidebar: @color-grey-theme;
 @color-grey-btn: lighten(@color-grey-theme, 5%);
 @color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
@@ -543,6 +552,7 @@
 @color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 50%);
 // @color-ming-theme_2-line: transparent;
 @color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
+@color-ming-reply-floor: lighten(@color-ming-theme, 60%);
 @color-ming-theme-sidebar: @color-ming-theme;
 @color-ming-btn: lighten(@color-ming-theme, 5%);
 @color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%);
@@ -602,6 +612,7 @@
 @color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 50%);
 // @color-blue2-theme_2-line: transparent;
 @color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%);
+@color-blue2-reply-floor: lighten(@color-blue2-theme, 41%);
 @color-blue2-theme-sidebar: @color-blue2-theme;
 @color-blue2-btn: lighten(@color-blue2-theme, 5%);
 @color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%);
@@ -659,6 +670,7 @@
 @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
 // @color-mid_autumn-theme_2-line: transparent;
 @color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 61%);
+@color-mid_autumn-reply-floor: lighten(@color-mid_autumn-theme, 61%);
 @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
 @color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%);
 @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@@ -716,6 +728,7 @@
 @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
 // @color-mid_autumn-theme_2-line: transparent;
 @color-mid_autumn-theme_2-line: darken(@color-mid_autumn-theme, 18%);
+@color-mid_autumn-reply-floor: darken(@color-mid_autumn-theme, 18%);
 @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
 @color-mid_autumn-btn: darken(@color-mid_autumn-theme, 10%);
 @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@@ -772,6 +785,7 @@
 @color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%);
 // @color-naruto-theme_2-line: transparent;
 @color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%);
+@color-naruto-reply-floor: fadeout(lighten(@color-naruto-theme, 36%), 70%);
 @color-naruto-theme-sidebar: rgba(255, 255, 255, .3);
 @color-naruto-btn: lighten(@color-naruto-theme, 2%);
 @color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%);
@@ -828,6 +842,7 @@
 @color-happy_new_year-theme_2-font-label: desaturate(darken(@color-happy_new_year-theme, 5%), 50%);
 // @color-happy_new_year-theme_2-line: transparent;
 @color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);
+@color-happy_new_year-reply-floor: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);
 @color-happy_new_year-theme-sidebar: rgba(119, 37, 18, 0.1);
 @color-happy_new_year-btn: desaturate(@color-happy_new_year-theme, 10%);
 @color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%);

src/renderer/components/core/PlayerDetail.vue

@@ -16,23 +16,35 @@
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
             use(xlink:href='#icon-window-close')
 
-    div(:class="$style.main")
+    div(:class="[$style.main, isShowComment ? $style.showComment : null]")
       div(:class="$style.left")
+        //- div(:class="$style.info")
         div(:class="$style.info")
-          div(:class="$style.img")
+          img(:class="$style.img" :src="musicInfo.img" v-if="musicInfo.img")
-            img(:src="musicInfo.img" v-if="musicInfo.img")
+          div(:class="$style.description" @click="isShowComment = true")
-          div(:class="$style.description")
             p {{$t('core.player.name')}}{{musicInfo.name}}
             p {{$t('core.player.singer')}}{{musicInfo.singer}}
             p(v-if="musicInfo.album") {{$t('core.player.album')}}{{musicInfo.album}}
-        //- div(:class="$style.list")
-          ul
 
       div(:class="$style.right")
         div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
           div(:class="$style.lyricSpace")
           p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
           div(:class="$style.lyricSpace")
+
+      div(:class="$style.comment")
+        div(:class="$style.commentHeader" @click="isShowComment = false")
+          h3 {{title}}
+        div.scroll(:class="$style.commentMain")
+          div
+            h2(:class="$style.commentType") 热门评论
+            material-comment-floor(v-if="comment.hotComments.length" :class="$style.reply_floor" :comments="comment.hotComments")
+          div
+            h2(:class="$style.commentType") 最新评论
+            material-comment-floor(v-if="comment.comments.length" :class="$style.reply_floor" :comments="comment.comments")
+          div(:class="$style.pagination")
+            material-pagination(:count="comment.total" :limit="comment.limit" :page="comment.page" @btn-click="handleToggleCommentPage")
+
     div(:class="$style.footer")
       div(:class="$style.left")
         div(:class="$style.progressContainer")
@@ -205,6 +217,109 @@ export default {
       _lyricLines: [],
       lyricLines: [],
       isSetedLines: false,
+      isShowComment: false,
+      comment: {
+        page: 1,
+        total: 10,
+        maxPage: 1,
+        limit: 5,
+        comments: [{
+          text: ['123123hhh'],
+          userName: 'dsads',
+          avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+          time: '2020-10-22 22:14:17',
+          likedCount: 100,
+          reply: [
+            {
+              text: ['123123hhh'],
+              userName: 'dsads',
+              avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+              time: '2020-10-22 22:14:17',
+              likedCount: 100,
+            },
+          ],
+        }, {
+          text: ['123123hhh'],
+          userName: 'dsads',
+          avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+          time: '2020-10-22 22:14:17',
+          likedCount: 100,
+          reply: [
+            {
+              text: ['123123hhh'],
+              userName: 'dsads',
+              avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+              time: '2020-10-22 22:14:17',
+              likedCount: 100,
+            },
+            {
+              text: ['123123hhh'],
+              userName: 'dsads',
+              avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+              time: '2020-10-22 22:14:17',
+              likedCount: 100,
+            },
+          ],
+        }, {
+          text: ['123123hhh'],
+          userName: 'dsads',
+          avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+          time: '2020-10-22 22:14:17',
+          likedCount: 100,
+          reply: [],
+        }, {
+          text: ['123123hhh'],
+          userName: 'dsads',
+          avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+          time: '2020-10-22 22:14:17',
+          likedCount: 100,
+          reply: [],
+        }, {
+          text: ['123123hhh'],
+          userName: 'dsads',
+          avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+          time: '2020-10-22 22:14:17',
+          likedCount: 100,
+          reply: [],
+        }, {
+          text: ['123123hhh'],
+          userName: 'dsads',
+          avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+          time: '2020-10-22 22:14:17',
+          likedCount: 100,
+          reply: [],
+        }, {
+          text: ['123123hhh'],
+          userName: 'dsads',
+          avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+          time: '2020-10-22 22:14:17',
+          likedCount: 100,
+          reply: [],
+        }, {
+          text: ['123123hhh'],
+          userName: 'dsads',
+          avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+          time: '2020-10-22 22:14:17',
+          likedCount: 100,
+          reply: [],
+        }],
+        hotComments: [{
+          text: ['123123hhh'],
+          userName: 'dsads',
+          avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+          time: '2020-10-22 22:14:17',
+          likedCount: 100,
+          reply: [
+            {
+              text: ['123123hhh'],
+              userName: 'dsads',
+              avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+              time: '2020-10-22 22:14:17',
+              likedCount: 100,
+            },
+          ],
+        }],
+      },
     }
   },
   mounted() {
@@ -224,6 +339,11 @@ export default {
   computed: {
     ...mapGetters(['setting']),
     ...mapGetters('player', ['isShowPlayerDetail']),
+    title() {
+      return this.musicInfo.name
+        ? this.setting.download.fileName.replace('歌名', this.musicInfo.name).replace('歌手', this.musicInfo.singer)
+        : '^-^'
+    },
   },
   methods: {
     ...mapMutations('player', [
@@ -325,6 +445,9 @@ export default {
     close() {
       window.eventHub.$emit(eventBaseName.close)
     },
+    handleToggleCommentPage(page) {
+
+    },
   },
 }
 </script>
@@ -452,36 +575,56 @@ export default {
   overflow: hidden;
   display: flex;
   padding: 0 30px;
+
+  &.showComment {
+    .left {
+      flex-basis: 18%;
+      .description p {
+        font-size: 12px;
+      }
+    }
+    .right {
+      flex-basis: 30%;
+      .lyric {
+        font-size: 13px;
+      }
+    }
+    .comment {
+      flex-basis: 50%;
+      opacity: 1;
+    }
+  }
 }
 .left {
-  flex: 0 0 40%;
+  flex: auto;
-  overflow: hidden;
-}
-.info {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
+  padding: 13px;
+  overflow: hidden;
+  transition: flex-basis @transition-theme;
+}
+
+.info {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  max-width: 300px;
+
 }
 .img {
-  width: 300px;
+  max-width: 100%;
-  height: 300px;
+  max-height: 100%;
-  display: flex;
+  min-width: 100%;
-  justify-content: flex-start;
+  box-shadow: 0 0 4px @color-theme-hover;
-  align-items: center;
+  border-radius: 6px;
-
+  opacity: .8;
-  img {
+  // border: 5px solid @color-theme-hover;
-    max-width: 100%;
+  // border-radius: @radius-border;
-    max-height: 100%;
+  // border: 5px solid #fff;
-    box-shadow: 0 0 4px @color-theme-hover;
-    border-radius: 6px;
-    opacity: .8;
-    // border: 5px solid @color-theme-hover;
-    // border-radius: @radius-border;
-    // border: 5px solid #fff;
-  }
 }
 .description {
-  width: 300px;
+  max-width: 300px;
   padding: 15px 0;
   overflow: hidden;
   p {
@@ -495,6 +638,8 @@ export default {
   flex: 0 0 60%;
   // padding: 0 30px;
   position: relative;
+  transition: flex-basis @transition-theme;
+
   &:before {
     position: absolute;
     top: 0;
@@ -540,19 +685,48 @@ export default {
   color: @color-theme;
   font-size: 1.2em;
 }
+
+.comment {
+  flex: 0 0 0;
+  display: flex;
+  flex-flow: column nowrap;
+  transition: @transition-theme;
+  transition-property: flex-basis opacity;
+  overflow: hidden;
+  opacity: 0;
+
+}
+.commentHeader {
+  flex: none;
+  padding-bottom: 10px;
+  // border-bottom: 1px solid #eee;
+  h3 {
+    font-size: 14px;
+  }
+}
+.commentMain {
+  flex: auto;
+  padding-left: 15px;
+  padding-right: 10px;
+  background-color: @color-reply-floor;
+  border-radius: 4px;
+}
+.commentType {
+  padding: 10px 0;
+  font-size: 13px;
+  color: @color-theme_2-font;
+}
+.pagination {
+  padding: 10px 0;
+}
+
 .footer {
   flex: 0 0 100px;
   overflow: hidden;
   display: flex;
   align-items: center;
 }
-.left {
+
-  flex: auto;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  padding-top: 13px;
-}
 .progress-container {
   width: 100%;
   position: relative;
@@ -689,10 +863,8 @@ each(@themes, {
       }
     }
     .img {
-      img {
+      box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}';
-        box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}';
+      // border-color: ~'@{color-@{value}-theme-hover}';
-        // border-color: ~'@{color-@{value}-theme-hover}';
-      }
     }
     .lrc-active {
       color: ~'@{color-@{value}-theme}';

src/renderer/components/material/CommentFloor.vue

@@ -0,0 +1,130 @@
+<template lang="pug">
+  div(:class="$style.container")
+    ul
+      li(v-for="(item, index) in comments" :key="item.id" :class="$style.listItem")
+        div(:class="$style.content")
+          div(:class="$style.left")
+            img( :class="$style.avatar" :src="item.avatar || commentDefImg" @error="handleUserImg")
+          div(:class="$style.right")
+            div(:class="$style.info")
+              div(:class="$style.name") {{item.userName}}
+              time(:class="$style.time") {{timeFormat(item.time)}}
+              div(:class="$style.likes") {{item.likedCount}}
+            div(:class="$style.comment_text")
+              p(v-for="text in item.text") {{text}}
+        material-comment-floor(v-if="item.reply && item.reply.length" :class="$style.reply_floor" :comments="item.reply")
+</template>
+
+<script>
+import commentDefImg from '../../assets/images/defaultUser.jpg'
+
+export default {
+  props: {
+    comments: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  data() {
+    return {
+      commentDefImg,
+    }
+  },
+  methods: {
+    timeFormat(time) {
+      return time
+      // return formatTime(new Date(time), true)
+    },
+    handleUserImg(event) {
+      event.target.src = this.commentDefImg
+    },
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+@padding: 15px;
+
+.container {
+
+}
+
+.listItem {
+  border-bottom: 1px dashed @color-theme_2-line;
+}
+
+.content {
+  padding: 12px 0;
+  font-size: 13px;
+  color: @color-theme_2-font;
+  display: flex;
+}
+.left {
+  flex: none;
+}
+.avatar {
+  width: 40px;
+  border-radius: 4px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, .15);
+}
+.right {
+  flex: auto;
+  min-width: 0;
+  margin-left: 10px;
+}
+
+.info {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+  min-width: 0;
+}
+.name {
+  flex: auto;
+  min-width: 0;
+  .mixin-ellipsis-1;
+}
+.time {
+  flex: none;
+  color: @color-theme_2-font-label;
+  font-size: 11px;
+  margin-left: 10px;
+}
+.likes {
+  flex: none;
+  margin-left: 10px;
+  color: @color-theme_2-font-label;
+  font-size: 11px;
+  align-self: flex-end;
+}
+.comment_text {
+  text-align: justify;
+  font-size: 14px;
+  p {
+    line-height: 1.5;
+    margin-top: 8px;
+  }
+}
+
+.reply_floor {
+  padding: 0 0 0 @padding;
+  margin-left: @padding * 2;
+  border-radius: .5rem;
+  &:last-child {
+    margin-bottom: 12px;
+  }
+  .listItem:last-child {
+    border-bottom: none;
+  }
+  .right {
+    margin-right: 10px;
+  }
+
+  background-color: @color-reply-floor;
+}
+
+</style>