From 55ca46efbd938f8e57cf5cc64a89236294bc77bc Mon Sep 17 00:00:00 2001
From: 64a4c0f828d3a54b45792bb5 <64a4c0f828d3a54b45792bb5@devide>
Date: Sat, 8 Jul 2023 17:19:10 +0000
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=90=9C=E7=B4=A2=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=B9=B3=E5=8F=B0=E7=AD=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |  1 +
 src/App.vue  | 87 ++++++++++++++++++++++++++++++++++++++++++++++++----
 src/main.js  |  4 ++-
 3 files changed, 85 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index aa1c7de..af18d33 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "element-plus": "^2.3.7",
     "guess": "^1.0.2",
     "vue": "^3.2.37"
   },
diff --git a/src/App.vue b/src/App.vue
index ffe04f4..930ecb0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,96 @@
 <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="8692248848"
-  server="tencent"
-  type="playlist"
-  fixed="true"
+  :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">
-</meting-js>
+  lrc-type="1" -->
+
 </template>
 
 <style scoped>
diff --git a/src/main.js b/src/main.js
index 90e6400..a250629 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
 import './assets/main.css'
 
-createApp(App).mount('#app')
+createApp(App).use(ElementPlus).mount('#app')
-- 
GitLab