暂存

src/apis/ApiAction.ts

@@ -3,3 +3,9 @@ export enum Magnet_Actions {
   magnet_batch_update = 'magnet_batch_update',
   magnet_delete = 'magnet_delete',
 }
+
+
+export enum Music_Actions {
+  get_play_list= 'get_play_list',
+
+}

src/apis/musicControl.ts

@@ -0,0 +1,12 @@
+import api from "./baseApi.ts"
+import {ResponseData} from "@/types/apiTypes.ts";
+import {Magnet} from "@/types/magnetType.ts";
+import {Music_Actions} from "@/apis/ApiAction.ts";
+
+export async function fetchPlayList(): Promise< ResponseData<Magnet[]> >
+{
+    let [_callId, promise] = api.sendQuery(Music_Actions.get_play_list, {});
+    let response = await promise;
+
+    return response;
+}

src/components/music/musicIndex.vue

@@ -1,9 +1,21 @@
 <script setup lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
+import IconSvg from "@/components/public/icon/iconSvg.vue";
+import {PlayList} from "@/types/musicType.ts";
 
 defineComponent({
   name: "musicIndex"
 })
+
+const searchText = ref('');
+
+const playList: PlayList = ref([
+  {
+    id: 0,
+
+  }
+])
+
 </script>
 
 <template>
@@ -15,8 +27,14 @@ defineComponent({
 
 <!--      侧边栏 -->
       <div class="search-input">
-
+        <input type="text" v-model="searchText" placeholder="搜索"/>
+        <div class="icon-search">
+          <IconSvg icon-name="search" />
+        </div>
       </div>
+
+<!--       主歌单 -->
+
     </div>
   </div>
 </template>
@@ -39,4 +57,49 @@ defineComponent({
   padding-left: 0.8em;
 }
 
+.search-input{
+  width: calc( 100% - 20px);
+  height: 40px;
+  line-height: 40px;
+  margin: 0 10px;
+  border-radius: 0.5em;
+  background-color: var(--color-background-soft);
+  box-shadow: 1px 0 5px 0 var(--color-border);
+  display: flex;
+  position: relative;
+}
+.search-input input{
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  border: none;
+  background-color: transparent;
+  padding-left: 10px;
+  padding-right: 50px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.search-input .icon-search{
+  width: 50px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: var(--color-text);
+  flex-shrink: 0;
+  font-size: 1.5em;
+  position: absolute;
+  right: 0;
+}
+
+.search-input .icon-search:hover{
+  color: var(--color-text-show);
+  cursor: pointer;
+}
+.search-input .icon-search:active{
+  color: var(--color-text-money);
+}
+
 </style>

src/types/musicType.ts

@@ -0,0 +1,43 @@
+export interface PlayList {
+    id: string;
+    name: string;   // 歌单名称
+    cover: string;  // 封面图片地址
+    description: string;    // 歌单描述
+    playCount: number;  // 播放量
+    trackCount: number; // 歌曲数量
+    createTime: number; // 创建时间 时间戳
+    isTagSearch: boolean;  // 是否参与标签搜索
+    lastPlayTime: number;  // 上次播放时间 时间戳
+    isSync: boolean; // 是否参与跨设备同步
+    isPublic: boolean; // 是否公开
+    isLike: boolean; // 是否为默认收藏歌单
+}
+
+export enum MusicType{
+    local = 0, // 本地音乐
+    couldMusic = 1, // 云网络内的其它音乐
+}
+
+export interface MusicInfo {
+    id: string;
+    name: string;   // 歌曲名称
+    artists: string[];  // 歌手名称
+    album: string;  // 专辑名称
+    cover: string;  // 歌曲封面图片地址
+    duration: number;   // 歌曲时长 单位: 秒
+    isLike: boolean;  // 是否喜欢
+    origin: string; // 歌曲来源 用于实现远程链接设备获取音频源文件.
+    type: MusicType; // 歌曲类型, 用于区分歌曲源存放位置
+    isLocal: boolean; // 本地是否存在
+    filePath: string; // 文件存放路径
+    lyricPath: string;  // 歌词文件地址
+    tags: string[]; // 歌曲标签
+}
+
+
+export interface MusicSearchInfo {
+    // 搜索路径
+    // 自动转换文件
+}
+
+