feat: 播放器首页制作

1. 播放器歌单样式
2. 歌单详情样式

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/assets/public.css

@@ -13,4 +13,9 @@
 
 .flex{
     display: flex;
+}
+
+.cover img {
+    width: 100%;
+    height: 100%;
 }

src/components/music/common/playListInfo.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import {defineComponent, PropType, ref} from "vue";
+import {MusicInfo, PlayList} from "@/types/musicType.ts";
+
+defineComponent({name: "play-list-info"});
+
+const props = defineProps({
+  playList: {
+    type: Object as PropType<PlayList>,
+    default: () => ({})
+  }
+})
+
+const musicList = ref<MusicInfo[]>([
+  {
+    name: "生如繁花",
+    artists: ["1"],
+    cover: "1",
+    duration: 1,
+    filePath: "1",
+    id: "1",
+    isLike: true,
+    isLocal: true,
+    lyricPath: "1",
+    origin: "1",
+    playCount: 1,
+    tags: ["1"],
+    type: 1
+  },
+  {
+    name: "2",
+    artists: ["2"],
+    cover: "2",
+    duration: 2,
+    filePath: "2",
+    id: "2",
+    isLike: true,
+    isLocal: true,
+    lyricPath: "2",
+    origin: "2",
+    playCount: 2,
+    tags: ["2"],
+    type: 1
+  },
+])
+
+
+</script>
+
+<template>
+  <div class="play-list-info">
+    <div class="info">
+      <div class="cover">
+        <img :src="playList.cover" alt="">
+      </div>
+      <div class="info-content">
+        <div class="name">{{playList.name}}</div>
+        <div class="desc">{{playList.description}}</div>
+        <div class="tags">
+          <span v-for="tag in playList.tags">{{tag}}</span>
+        </div>
+        <div class="time">创建时间: {{playList.createTime}}</div>
+      </div>
+    </div>
+    <div class="lists">
+      <div class="list-item">
+        <div class="cover">
+
+        </div>
+        <div class="name">名称</div>
+        <div class="artists">艺术家</div>
+        <div class="origin">来源</div>
+        <div class="duration">时长</div>
+        <div class="isLike">是否喜欢</div>
+      </div>
+      <div v-for="item in musicList"
+           class="list-item">
+        <div class="cover">
+          <img :src="item.cover" alt=""/>
+        </div>
+        <div class="name">{{item.name}}</div>
+        <div class="artists">{{item.artists}}</div>
+        <div class="origin">{{item.origin}}</div>
+        <div class="duration">{{item.duration}}</div>
+        <div class="isLike">{{item.isLike}}</div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+.play-list-info {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.info {
+  display: flex;
+  width: 100%;
+  height: 160px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.info .cover {
+  width: 130px;
+  height: 130px;
+  background-color: #ccc;
+  overflow: hidden;
+  margin-left: 15px;
+  margin-top: 5px;
+}
+
+.info-content {
+  width: calc(100% - 130px);
+  height: 100%;
+  padding-left: 30px;
+}
+
+.info-content .name {
+  font-size: 30px;
+  font-weight: bold;
+}
+.info-content .desc {
+  font-size: 20px;
+  color: #999;
+}
+.info-content .tags {
+  font-size: 20px;
+  color: #999;
+}
+
+.lists {
+  display: grid; /* 使用 Grid 布局 */
+  grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr; /* 设置列的布局 */
+  gap: 10px; /* 列之间的间距 */
+}
+
+.list-item {
+  display: contents; /* 使各个子元素直接成为 Grid 容器的子元素 */
+  padding: 10px; /* 少许内边距 */
+  border-bottom: 1px solid #ccc; /* 可选：增加底部边框，分隔各行 */
+}
+
+.cover {
+  width: 50px; /* 封面图片固定宽度 */
+  height: 50px; /* 和高度保持一致 */
+  overflow: hidden; /* 隐藏超出部分 */
+}
+
+.cover img {
+  width: 100%; /* 图片宽度100% */
+  height: auto; /* 高度自适应 */
+}
+
+.name, .artists, .origin, .duration, .isLike {
+  text-align: left; /* 文本左对齐 */
+  min-height: 50px; /* 所有列的最小高度一致 */
+}
+
+
+
+
+</style>

src/components/music/musicIndex.vue

@@ -1,33 +1,121 @@
 <script setup lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, Ref, ref} from "vue";
+import IconSvg from "@/components/public/icon/iconSvg.vue";
+import {PlayList} from "@/types/musicType.ts";
+import PlayListInfo from "./common/playListInfo.vue";
 
 defineComponent({
   name: "musicIndex"
 })
+
+const searchText = ref('');
+
+const playList: Ref<PlayList[]> = ref<PlayList[]>([
+    {
+    id: 'default',
+    name: "喜爱的歌曲",
+    cover: "bg.jpg",
+    icon: "music",
+    description: "默认收藏夹",
+    createTime: 0,
+    lastPlayTime: 0,
+    playCount: 0,
+    trackCount: 0,
+    isPublic: true,
+    isSync: true,
+    isTagSearch: false,
+    isLike: false
+  },
+  {
+    id: 'history',
+    name: "最近播放",
+    cover: "bg.jpg",
+    icon: "music",
+    description: "默认收藏夹2",
+    createTime: 0,
+    lastPlayTime: 0,
+    playCount: 0,
+    trackCount: 0,
+    isPublic: true,
+    isSync: true,
+    isTagSearch: false,
+    isLike: false
+  },
+])
+
+const selectIndex = ref(0);
 </script>
 
 <template>
-  <div class="fc-app-window flex">
-    <div class="side-bar">
-      <div class="side-title">
-        FC-MUSIC
-      </div>
+  <div class="fc-app-window">
+    <div class="music-content">
+      <div class="side-bar">
+        <div class="side-title">
+          FC-MUSIC
+        </div>
 
-<!--      侧边栏 -->
-      <div class="search-input">
+        <!--      侧边栏 -->
+        <div class="search-input">
+          <input type="text" v-model="searchText" placeholder="搜索"/>
+          <div class="icon-search">
+            <IconSvg icon-name="search" />
+          </div>
+        </div>
 
+        <!--       主歌单 -->
+        <div class="play-list">
+          <div class="title">播放列表</div>
+          <div
+              v-for="(item, i) in playList"
+              :key="item.id"
+              :class="`list-item ${i == selectIndex?'select-item':''}` "
+              @click=""
+          >
+            <div class="icon">
+              <IconSvg :icon-name="item.icon" />
+            </div>
+            <span>{{item.name}}</span>
+          </div>
+        </div>
+      </div>
+      <div class="play-list-info">
+        <play-list-info :play-list="playList[selectIndex]"/>
       </div>
+
+    </div>
+
+    <div class="music-control">
+
     </div>
   </div>
 </template>
 
 <style scoped>
 @import "../../assets/public.css";
+.music-content{
+  width: 100%;
+  height: calc(100% - 50px);
+  display: flex;
+}
 .side-bar
 {
   width: 210px;
   height: 100%;
-  border-right: 1px solid var(--color-border);
+  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1);
+}
+.music-view{
+  width: calc(100% - 210px);
+  height: 100%;
+}
+.play-list-info{
+  width: 100%;
+  height: 100%;
+}
+.music-control{
+  width: 100%;
+  height: 50px;
+  background-color: var(--color-background);
+  border-top: 1px solid var(--color-border);
 }
 
 .side-bar .side-title{
@@ -39,4 +127,113 @@ 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);
+}
+
+
+.play-list {
+  width: 100%;
+  height: calc(100% - 100px);
+  overflow-y: auto;
+  padding-top: 10px;
+}
+.play-list .title{
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  font-size: 1.3em;
+  padding-left: 0.8em;
+  border-bottom: 1px solid var(--color-border);
+  box-sizing: border-box;
+}
+.play-list .list-item{
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  display: flex;
+  padding-left: 0.8em;
+  box-sizing: border-box;
+  position: relative;
+  font-size: 0.9em;
+}
+.play-list .list-item:hover , .play-list .select-item{
+  background-color: var(--color-background-soft);
+}
+.list-item:hover::before ,.play-list .select-item::before{
+  content: "";
+  width: 5px;
+  height: 25px;
+  position: absolute;
+  left: 0.5em;
+  top: 5px;
+  background-color: var(--color-text-money);
+}
+.play-list .list-item .icon{
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: var(--color-text);
+  flex-shrink: 0;
+  font-size: 1.2em;
+}
+.play-list .list-item span{
+  width: calc(100% - 40px);
+  margin-left: 10px;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  text-align: left;
+  color: var(--color-text);
+  flex-shrink: 0;
+}
+
+
+
 </style>

src/types/musicType.ts

@@ -0,0 +1,45 @@
+export interface PlayList {
+    id: string;
+    name: string;   // 歌单名称
+    icon: string;   // 歌单icon
+    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[]; // 歌曲标签
+    playCount: number;  // 播放次数
+}
+
+
+export interface MusicSearchInfo {
+    // 搜索路径
+    // 自动转换文件
+}
+
+