dev...

src/views/common/SongDetail.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { ref, onUnmounted, watch } from "vue";
+import { NButton, NIcon } from "naive-ui";
+import { useStore } from "vuex";
+import svgChevrongDown from "@/assets/svgs/ChevronDown.svg";
+import pubsub from "pubsub-js";
+
+const store = useStore();
+
+const songInfo = ref(null);
+const lyric = ref(null);
+const coverAngle = ref(0);
+
+let interval;
+watch(
+  () => store.state.settings.playing,
+  (val) => {
+    if(val){
+      interval = setInterval(() => {
+        coverAngle.value += .5
+      }, 100);
+    } else {
+      clearInterval(interval)
+    }
+      
+  },
+  {immediate: true}
+);
+
+//#region 处理消息订阅
+
+const token = pubsub.subscribe("zp", (msg, data) => {
+  switch (msg) {
+    case "zp.songInfo":
+      console.log("SongDetail: 收到歌曲详细信息。", data);
+      songInfo.value = data;
+      break;
+    case "zp.lyric":
+      lyric.value = data;
+      break;
+  }
+});
+//卸载组件
+onUnmounted(() => {
+  pubsub.unsubscribe(token);
+});
+//#endregion
+</script>
+
+<template>
+  <div id="sdTitle">
+    <n-button
+      circle
+      size="small"
+      @click="pubsub.publish('zp.toggleSongDetail')"
+    >
+      <template #icon>
+        <n-icon>
+          <svgChevrongDown />
+        </n-icon>
+      </template>
+    </n-button>
+  </div>
+  <div id="sdContent" v-if="songInfo">
+    <div class="detail">
+      <div class="disk">
+        <div class="styli">
+          <img
+            src="@/assets/images/needle.png"
+            :class="{ playing: store.state.settings.playing }"
+          />
+        </div>
+        <div class="bg">
+          <img class="disk" src="@/assets/images/disk.png" />
+          <img
+            class="cover"
+            :src="songInfo.album.picUrl"
+            :style="{ transform: 'rotateZ(' + coverAngle + 'deg)' }"
+          />
+        </div>
+        <div class="pic"></div>
+      </div>
+      <div class="song">
+        歌曲
+        <div class="name"></div>
+        <div class="others"></div>
+        <div class="ly"></div>
+      </div>
+    </div>
+    <div class="comments"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+#sdTitle {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 280px;
+  height: 40px;
+  background-color: #f9f9f9;
+  padding-left: 50px;
+
+  display: flex;
+  align-items: center;
+}
+#sdContent {
+  position: absolute;
+  left: 0;
+  top: 40px;
+  right: 0;
+  bottom: 64px;
+  background-color: #f6f6f6;
+
+  .styli {
+    position: relative;
+    height: 60px;
+    img {
+      width: 160px;
+      position: absolute;
+      left: 135px;
+      transform-origin: 13px 13px;
+      z-index: 100;
+    }
+    .playing {
+      transform: rotateZ(28deg);
+    }
+  }
+  .detail {
+    // margin: 2em;
+    display: flex;
+    justify-content: center;
+    .pointer {
+      height: 50px;
+    }
+    .disk {
+      --back-color: #eee;
+      --width-num: 340;
+      --padding-num: 10;
+      --width: calc(var(--width-num) * 1px);
+      --height: calc(var(--width-num) * 1px);
+
+      // position: relative;
+      // width: 300px;
+      .bg {
+        position: relative;
+
+        width: var(--width);
+        height: var(--height);
+        background-color: var(--back-color);
+        border-radius: var(--width);
+        padding: calc(var(--padding-num) * 1px);
+        img.disk {
+          width: calc(
+            (var(--width-num) - var(--padding-num) * 2) * 1px
+          );
+        }
+        img.cover {
+          width: 220px;
+          border-radius: 200px;
+          position: absolute;
+          top: 60px;
+          left: 62px;
+        }
+      }
+    }
+    .song {
+      position: relative;
+      width: 400px;
+    }
+  }
+}
+</style>