Auto Commit

.inscode

 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "element-plus": "^2.3.7",
     "guess": "^1.0.2",
+    "mitt": "^3.0.1",
     "vue": "^3.2.37"
   },
   "devDependencies": {

src/App.vue

-<script setup>
-import {ref} from "vue"
-import { Search } from '@element-plus/icons-vue'
-const platInfoList = [
-  {
-    name: 'tencent',
-    chName: 'QQ音乐',
-    id: '0'
-  },
-  {
-    name: 'netease',
-    chName: '网易云音乐',
-    id: '1'
-  },
-  {
-    name: 'kugou',
-    chName: '酷狗音乐',
-    id: '2'
-  },
-  {
-    name: 'xiami',
-    chName: '虾米音乐',
-    id: '3'
-  },
-  {
-    name: 'baidu',
-    chName: '百度音乐',
-    id: '4'
-  }
-]
-
-let search = ref("")
-let key = ref(0)
-let servePlat = ref('netease')
-
-function runSearch() {
-  key.value = new Date().getTime()
-}
-/*
-type是搜索类型
-playlist 歌单
-song 单曲
-album 专辑
-search 关键词
-artist 歌手
-*/
-</script>
-
 <template>
-  <el-form @submit.native.prevent>
-    <el-form-item>
-      <el-input 
-        clearable 
-        v-model="search" 
-        placeholder="请输入搜索关键字" 
-        style="width: 100%;" 
-        :prefix-icon="Search"
-        @keyup.enter.native="runSearch"
-        />
-    </el-form-item>
-    <el-form-item label="选择搜索平台：">
-      <el-radio-group v-model="servePlat" class="ml-4">
-        <el-radio v-for="item in platInfoList" :label="item.name" :key="item.id" size="mini">{{ item.chName }}</el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item>
-      <el-button @click="runSearch" type="primary" style="width:100%;">搜索</el-button>
-    </el-form-item>
-  </el-form>
-  
-  <br />
-  
-  
-    
-    <br />
-  <meting-js
-  :id="search"
-  :server="servePlat"
-  type="search"
-  :key="key"
-  autoplay="true"
-  >
-</meting-js>
-
-<!-- fixed="true"
-  autoplay="true"
-  loop="all"
-  order="random"
-  preload="auto"
-  list-folded="ture"
-  list-max-height="500px"
-  lrc-type="1" -->
-
+  <div id="App">
+    <div class="musicContainer">
+      <div class="songList">
+        <songList />
+      </div>
+      <div class="meting">
+        <search-form />
+        <meting />
+      </div>
+    </div>
+  </div>
 </template>
 
+<script setup>
+import meting from "./components/meting.vue";
+import searchForm from "./components/searchForm.vue";
+import songList from "./components/songList.vue";
+</script>
+
 <style scoped>
-header {
-  line-height: 1.5;
+.musicContainer {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
 }
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+.songList {
+  width: 180px;
+  max-height: 100%;
+  overflow-y: auto;
+  padding: 5px;
 }
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+.meting {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+  padding: 5px;
 }
 </style>

src/components/meting.vue

+<template>
+    <meting-js
+      ref="metingjs"
+      :id="search"
+      :key="key"
+      :server="platform"
+      :type="type"
+    />
+  </template>
+  
+  <script setup>
+  import { ref, onBeforeUnmount, onMounted } from "vue";
+  import bus from "./../utils/bus.js";
+  
+  let search = ref("");
+  let platform = ref("netease");
+  let key = ref(0);
+  let type = ref("search");
+  let metingjs = ref(null);
+  
+  function searchNewValue(searchObj) {
+    search.value = searchObj.search;
+    platform.value = searchObj.platform;
+    key.value = new Date().getTime();
+    type.value = searchObj.type;
+  }
+  
+  bus.on("searchNewValue", searchNewValue);
+  onBeforeUnmount(() => {
+    bus.off("searchNewValue");
+  });
+  //歌词全屏显示
+  // document.querySelector(".aplayer-lrc").requestFullscreen();
+  // aplayer-info音乐信息
+  //document.querySelector(".aplayer-info").requestFullscreen();
+  </script>
+  
\ No newline at end of file

src/components/searchForm.vue

+<template>
+    <el-form @submit.native.prevent>
+      <el-form-item>
+        <el-input
+          clearable
+          v-model="search"
+          placeholder="你干嘛啊~"
+          style="width: 100%"
+          :prefix-icon="Search"
+          @keyup.enter.native="runSearch"
+        />
+      </el-form-item>
+      <el-form-item label="精准搜索：">
+        <el-radio-group v-model="type" class="ml-4">
+          <el-radio
+            v-for="item in advanceSearchList"
+            :label="item.name"
+            :key="item.id"
+            size="small"
+            >{{ item.chName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择平台：">
+        <el-radio-group v-model="platform" class="ml-4">
+          <el-radio
+            v-for="item in platInfoList"
+            :label="item.name"
+            :key="item.id"
+            size="small"
+            >{{ item.chName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+        <el-row
+          style="font-size: 10px"
+          :style="{ color: type === 'playlist' ? '#F56C6C' : '#79bbff' }"
+        >
+          {{ alertInfo[type] }}
+        </el-row>
+        <el-button @click="runSearch" type="primary" style="width: 100%"
+          >搜索</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </template>
+  
+  <script setup>
+  import { Search } from "@element-plus/icons-vue";
+  import { ref, reactive } from "vue";
+  import bus from "./../utils/bus.js";
+  
+  const platInfoList = [
+    {
+      name: "tencent",
+      chName: "QQ音乐",
+      id: "0",
+    },
+    {
+      name: "netease",
+      chName: "网易云音乐",
+      id: "1",
+    },
+    {
+      name: "kugou",
+      chName: "酷狗音乐",
+      id: "2",
+    },
+    {
+      name: "xiami",
+      chName: "虾米音乐",
+      id: "3",
+    },
+    {
+      name: "baidu",
+      chName: "百度音乐",
+      id: "4",
+    },
+  ];
+  
+  const advanceSearchList = [
+    {
+      name: "search",
+      chName: "关键字",
+      id: "0",
+    },
+    {
+      name: "playlist",
+      chName: "歌单",
+      id: "1",
+    },
+    {
+      name: "artist",
+      chName: "歌手",
+      id: "2",
+    },
+    {
+      name: "song",
+      chName: "单曲",
+      id: "3",
+    },
+    {
+      name: "album",
+      chName: "专辑",
+      id: "4",
+    },
+  ];
+  
+  const alertInfo = reactive({
+    search: "推荐使用：关键字+网易云音乐",
+    playlist: "请输入歌单分享链接中的id值！！",
+    artist: "推荐使用：关键字+网易云音乐",
+    song: "推荐使用：关键字+网易云音乐",
+    album: "推荐使用：关键字+网易云音乐",
+  });
+  
+  let search = ref("");
+  let key = ref(0);
+  let platform = ref("netease");
+  let type = ref("search");
+  
+  function runSearch() {
+    bus.emit("searchNewValue", {
+      search: search.value || '鸡你太美',
+      platform: platform.value,
+      type: type.value,
+    });
+  }
+  /*
+  type是搜索类型
+  playlist 歌单
+  song 单曲
+  album 专辑
+  search 关键词
+  artist 歌手
+  */
+  </script>
+  
\ No newline at end of file

src/components/songList.vue

+<template>
+    <div style="text-align: left">
+      <el-tooltip content="点击即刻播放对应歌单歌曲" placement="right">
+        <el-tag>歌单</el-tag>
+      </el-tooltip>
+    </div>
+  
+    <el-tree node-key="id" :default-expanded-keys="['2']" :data="data" :props="defaultProps" @node-click="handleNodeClick" />
+  </template>
+  <script lang="ts" setup>
+  import bus from "./../utils/bus.js";
+  interface Tree {
+    label: string;
+    search?: number | string;
+    platform?: string;
+    children?: Tree[];
+    id: string;
+  }
+  
+  const handleNodeClick = (data: Tree) => {
+    if (!data.search) {
+      return;
+    }
+    bus.emit("searchNewValue", {
+      search: data.search,
+      platform: data.platform,
+      type: "playlist",
+    });
+  };
+  
+  const data: Tree[] = [
+    {
+      label: "QQ音乐",
+      children: [],
+      id: '1'
+    },
+    {
+      label: "网易云音乐",
+      id: '2',
+      children: [
+        {
+            label: "小黑子永远不懂",
+            search: "8168081914",
+            platform: "netease",
+            id: '8168081914'
+        },
+        {
+            label: "ikun真爱粉",
+            search: "2762963245",
+            platform: "netease",
+            id: '2762963245'
+        },
+        {
+            label: "ikun应援团",
+            search: "7548038923",
+            platform: "netease",
+            id: '7548038923'
+        },
+        {
+          label: "坤坤严选歌单",
+          search: "7313297753",
+          platform: "netease",
+          id: '7313297753'
+        },
+        {
+          label: "我的歌单",
+          search: "6771007429",
+          platform: "netease",
+          id: '6771007429'
+        },
+        {
+          label: "轻音乐",
+          search: "6771327978",
+          platform: "netease",
+          id: '6771327978'
+        },
+        {
+          label: "地下城与勇士",
+          search: "8464562814",
+          platform: "netease",
+          id: '8464562814'
+        },
+      ],
+    },
+    {
+      label: "酷狗音乐",
+      children: [],
+      id: '3'
+    },
+    {
+      label: "虾米音乐",
+      children: [],
+      id: '4'
+    },
+    {
+      label: "百度音乐",
+      children: [],
+      id: '5'
+    },
+  ];
+  
+  const defaultProps = {
+    children: "children",
+    label: "label",
+  };
+  </script>
+  
\ No newline at end of file

src/utils/bus.js

+import mitt from "mitt";
+export default mitt();