diff --git a/package.json b/package.json
index aa1c7deb0adb6e6aea5a1380426189ac24eee7a7..af18d33d8a6f434c12e710f91ae9aabad58f87b7 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 ffe04f46356a2e119e9d3ad84a2f23f3672e0925..930ecb0f7e8dc73cb06b0304111216640a354620 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 90e6400b4d8ad8aba0c1caa53874eb4b81380648..a2506294bcc8223c4cf7f39c5cad5d6aa27fae4b 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')