暂存

src/App.vue

@@ -28,7 +28,7 @@ import {
   openApp,
   runNavComputed,
   runningApplications,
-  setAppTop, AppListNames,
+  setAppTop, AppListNames, getAppMinSize,
 } from "@/util/AppManag.ts";
 
 import musicIndex from "@/components/music/musicIndex.vue"
@@ -55,6 +55,8 @@ const isBarHidden = ref(false);
 const AppContent = ref<HTMLElement | null>(null);
 const parentWidth = ref(0);
 const parentHeight = ref(0);
+const appWindowBorderW = 30;
+const appWindowBorderH = 40;
 
 function getParentSize() {
   nextTick(()=>{
@@ -157,7 +159,6 @@ function closeAppHandle(runApplication: RunApplicationInfo){
 }
 
 function focusAppHandle(runApplication: RunApplicationInfo){
-  message.log(`focus app ${runApplication.key}`);
   setAppTop(runApplication);
 }
 
@@ -199,8 +200,8 @@ function openApplication(key: string)
             <app-window
                 v-for="item in runningApplications"
                 :key="item.id"
-                :min-height="480"
-                :min-width="640"
+                :min-height="getAppMinSize(item, 'height', parentHeight - appWindowBorderH)"
+                :min-width="getAppMinSize(item, 'width', parentWidth - appWindowBorderW)"
                 :parent-width="parentWidth"
                 :parent-height="parentHeight"
                 :app-name="item.showTitle"

src/assets/svg/heart-fill.svg

@@ -0,0 +1 @@
+<svg t="1733986739037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4392" width="200" height="200"><path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" p-id="4393"></path></svg>

src/assets/svg/heart.svg

@@ -0,0 +1 @@
+<svg t="1733986659838" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4243" width="200" height="200"><path d="M510.68 883.15c-15.2 0-30.37-8.49-48.1-25.47-25.35-24.3-50.81-48.48-76.27-72.64-61.6-58.49-125.28-118.96-186.38-180.25-68.39-68.6-99.26-141.23-94.39-222.07 4.09-67.79 31.08-122.65 78.06-158.66 50.62-38.79 123.3-53.23 194.46-38.6 51.71 10.63 90 41.18 127.03 70.72l1.54 1.23c0.47 0.38 0.94 0.76 1.41 1.13 8.05-5.05 15.94-10.15 23.68-15.13 30.01-19.35 58.34-37.63 90.38-50.54 84.26-33.9 189.34-8.11 244.51 60.07 58.08 71.79 68.23 157.45 28.57 241.22-20 42.22-50.67 84.68-91.16 126.22-57.91 59.41-118.94 117.32-177.96 173.33-22.3 21.16-44.59 42.32-66.77 63.59-17.98 17.22-33.31 25.85-48.61 25.85zM322.91 235.07c-40.08 0-77.72 11.4-105.7 32.85-34.37 26.34-53.38 66.08-56.52 118.12-3.92 65.06 20.98 122.17 78.37 179.73 60.56 60.74 123.97 120.95 185.3 179.18 25.52 24.23 51.04 48.47 76.45 72.82 4.78 4.57 7.91 7.21 9.9 8.73 2.06-1.55 5.31-4.3 10.31-9.09 22.25-21.35 44.61-42.57 66.98-63.8 58.64-55.64 119.28-113.19 176.44-171.82 36.23-37.15 63.39-74.6 80.77-111.3 30.5-64.42 23.05-127.64-21.58-182.8-39.86-49.23-119.33-68.36-180.89-43.55-27.16 10.93-53.36 27.83-81.09 45.71-13.56 8.74-27.59 17.79-42.49 26.65l-17.29 10.29-18.13-16.06c-2.81-2.58-7.07-6.51-11.59-10.12l-1.54-1.22c-33.41-26.65-64.96-51.83-103.69-59.79a217.005 217.005 0 0 0-44.01-4.53z" p-id="4244"></path></svg>

src/components/music/common/lickIcon.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+
+import {defineComponent} from "vue";
+import IconSvg from "@/components/public/icon/iconSvg.vue";
+
+defineComponent({
+  name: 'LickIcon',
+})
+
+defineProps({
+  like: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div :class="`icon ${like?'like-icon':''}`">
+    <icon-svg :icon-name="like?'heart-fill':'heart'"/>
+  </div>
+</template>
+
+<style scoped>
+.like-icon{
+  color: var(--color-text-money)
+}
+</style>

src/components/music/common/musicSetting.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import {defineComponent} from "vue";
+
+defineComponent({
+  name: 'musicSetting',
+})
+</script>
+
+<template>
+  <div class="musicSetting">
+    <div class="title">音乐设置</div>
+    <div class="head">
+      <div class="tab">扫描路径</div>
+      <div class="tab">云同步配置</div>
+    </div>
+    <div class="view-con">
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/music/common/playListInfo.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import {defineComponent, PropType, ref} from "vue";
 import {MusicInfo, PlayList} from "@/types/musicType.ts";
+import LickIcon from "@/components/music/common/lickIcon.vue";
+import IconSvg from "@/components/public/icon/iconSvg.vue";
+import message from "@/components/public/kui/message";
 
 defineComponent({name: "play-list-info"});
 
@@ -13,7 +16,7 @@ const props = defineProps({
 
 const musicList = ref<MusicInfo[]>([
   {
-    name: "生如繁花",
+    name: "霜雪千年",
     artists: ["1"],
     cover: "1",
     duration: 1,
@@ -25,7 +28,8 @@ const musicList = ref<MusicInfo[]>([
     origin: "1",
     playCount: 1,
     tags: ["1"],
-    type: 1
+    type: 1,
+    album: "1"
   },
   {
     name: "2",
@@ -34,17 +38,114 @@ const musicList = ref<MusicInfo[]>([
     duration: 2,
     filePath: "2",
     id: "2",
-    isLike: true,
+    isLike: false,
     isLocal: true,
     lyricPath: "2",
     origin: "2",
     playCount: 2,
     tags: ["2"],
-    type: 1
+    type: 1,
+    album: "2"
   },
+    {
+      name: "3",
+      artists: ["3"],
+      cover: "3",
+      duration: 3,
+      filePath: "3",
+      id: "3",
+      isLike: false,
+      isLocal: true,
+      lyricPath: "3",
+      origin: "3",
+      playCount: 3,
+      tags: ["3"],
+      type: 1,
+      album: "3"
+    },
+    {
+      name: "4",
+      artists: ["4"],
+      cover: "4",
+      duration: 4,
+      filePath: "4",
+      id: "4",
+      isLike: false,
+      isLocal: true,
+      lyricPath: "4",
+      origin: "4",
+      playCount: 4,
+      tags: ["4"],
+      type: 1,
+      album: "4"
+    },
+    {
+      name: "5",
+      artists: ["5"],
+      cover: "5",
+      duration: 5,
+      filePath: "5",
+      id: "5",
+      isLike: false,
+      isLocal: true,
+      lyricPath: "5",
+      origin: "5",
+      playCount: 5,
+      tags: ["5"],
+      type: 1,
+      album: "5"
+    },
+    {
+      name: "6",
+      artists: ["6"],
+      cover: "6",
+      duration: 6,
+      filePath: "6",
+      id: "6",
+      isLike: false,
+      isLocal: true,
+      lyricPath: "6",
+      origin: "6",
+      playCount: 6,
+      tags: ["6"],
+      type: 1,
+      album: "6"
+    },
+    {
+      name: "7",
+      artists: ["7"],
+      cover: "7",
+      duration: 7,
+      filePath: "7",
+      id: "7",
+      isLike: false,
+      isLocal: true,
+      lyricPath: "7",
+      origin: "7",
+      playCount: 7,
+      tags: ["7"],
+      type: 1,
+      album: "7"
+    },
 ])
 
 
+function playMusic(item: MusicInfo) {
+  console.log(item);
+  message.info(`play ${item.name}`);
+}
+
+function likeMusic(item: MusicInfo) {
+ console.log(item);
+ message.info(`like ${item.name}`);
+}
+function showMore(item: MusicInfo) {
+  console.log(item);
+  message.info(`show ${item.name}`);
+
+}
+
+
 </script>
 
 <template>
@@ -56,33 +157,40 @@ const musicList = ref<MusicInfo[]>([
       <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 class="list-head">
+        <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 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 class="list-con scroll">
+        <div v-for="item in musicList"
+             class="list-item"
+             @click="playMusic(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>
+          <lick-icon class="isLike" :like="item.isLike"
+                     @click.stop.capture="likeMusic(item)"/>
+          <div class="more">
+            <icon-svg icon-name="add" @click.stop.capture="showMore(item)"></icon-svg>
+          </div>
         </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>
 
@@ -117,32 +225,50 @@ const musicList = ref<MusicInfo[]>([
   width: calc(100% - 130px);
   height: 100%;
   padding-left: 30px;
+  font-size: 1em;
 }
 
 .info-content .name {
-  font-size: 30px;
+  font-size: 1.6rem;
   font-weight: bold;
 }
 .info-content .desc {
-  font-size: 20px;
-  color: #999;
+  font-size: 1rem;
+  color: var(--color-text-subtitle);
 }
-.info-content .tags {
-  font-size: 20px;
+.info-content .time {
+  font-size: 0.8rem;
+  margin-top: 10px;
   color: #999;
 }
 
 .lists {
+  width: 100%;
+  height: calc(100% - 160px);
+  overflow: hidden;
+}
+.list-head{
+  width: calc(100% - 30px);
+  height: 50px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+.list-con{
+  width: 100%;
+  height: calc(100% - 51px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.list-item {
+  border-bottom: 1px solid #ccc; /* 可选：增加底部边框，分隔各行 */
+  position: relative;
   display: grid; /* 使用 Grid 布局 */
   grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr; /* 设置列的布局 */
   gap: 10px; /* 列之间的间距 */
+  width: 100%;
+  height: 50px;
 }
 
-.list-item {
-  display: contents; /* 使各个子元素直接成为 Grid 容器的子元素 */
-  padding: 10px; /* 少许内边距 */
-  border-bottom: 1px solid #ccc; /* 可选：增加底部边框，分隔各行 */
-}
 
 .cover {
   width: 50px; /* 封面图片固定宽度 */
@@ -155,12 +281,26 @@ const musicList = ref<MusicInfo[]>([
   height: auto; /* 高度自适应 */
 }
 
-.name, .artists, .origin, .duration, .isLike {
+.list-item > * {
   text-align: left; /* 文本左对齐 */
-  min-height: 50px; /* 所有列的最小高度一致 */
+  height: 100%; /* 所有列的最小高度一致 */
+  display: flex;
+  align-items: center;
+}
+.more{
+  color: var(--color-text-pirmary);
+  position: absolute;
+  right: 0.5rem;
+}
+.list-con .isLike , .list-con .more{
+  width: 30px;
+  display: flex;
+  font-size: 2rem;
+  cursor: pointer;
 }
 
+.list-con .list-item:hover{
+  background-color: var(--color-background-soft);
+}
 
-
-
-</style>
+</style>

src/components/music/musicIndex.vue

@@ -3,6 +3,8 @@ 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";
+import message from "@/components/public/kui/message";
+import MusicSetting from "@/components/music/common/musicSetting.vue";
 
 defineComponent({
   name: "musicIndex"
@@ -41,9 +43,39 @@ const playList: Ref<PlayList[]> = ref<PlayList[]>([
     isTagSearch: false,
     isLike: false
   },
+  {
+    id: 'local',
+    name: "本地目录",
+    cover: "bg.jpg",
+    icon: "music",
+    description: "默认收藏夹3",
+    createTime: 0,
+    lastPlayTime: 0,
+    playCount: 0,
+    trackCount: 0,
+    isPublic: true,
+    isSync: true,
+    isTagSearch: false,
+    isLike: false
+  },
 ])
 
 const selectIndex = ref(0);
+
+const showPlayList = "showPlayList";
+const showSetting = "showSetting";
+const musicViewShow = ref(showPlayList);
+
+function changePlayList(index: number) {
+  selectIndex.value = index;
+  musicViewShow.value = showPlayList;
+}
+
+function showMusicSetting()
+{
+  message.info("show music setting");
+  musicViewShow.value = showSetting;
+}
 </script>
 
 <template>
@@ -69,7 +101,7 @@ const selectIndex = ref(0);
               v-for="(item, i) in playList"
               :key="item.id"
               :class="`list-item ${i == selectIndex?'select-item':''}` "
-              @click=""
+              @click="changePlayList(i)"
           >
             <div class="icon">
               <IconSvg :icon-name="item.icon" />
@@ -77,9 +109,15 @@ const selectIndex = ref(0);
             <span>{{item.name}}</span>
           </div>
         </div>
+
+<!--        设置-->
+        <div class="setting-group">
+          <icon-svg class="icon" @click.stop.capture="showMusicSetting" icon-name="setting"/>
+        </div>
       </div>
       <div class="play-list-info">
-        <play-list-info :play-list="playList[selectIndex]"/>
+        <play-list-info v-if="musicViewShow === showPlayList" :play-list="playList[selectIndex]"/>
+        <music-setting v-if="musicViewShow === showSetting"/>
       </div>
 
     </div>
@@ -102,6 +140,7 @@ const selectIndex = ref(0);
   width: 210px;
   height: 100%;
   box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
 }
 .music-view{
   width: calc(100% - 210px);
@@ -175,7 +214,7 @@ const selectIndex = ref(0);
 
 .play-list {
   width: 100%;
-  height: calc(100% - 100px);
+  height: calc(100% - 140px);
   overflow-y: auto;
   padding-top: 10px;
 }
@@ -234,6 +273,17 @@ const selectIndex = ref(0);
   flex-shrink: 0;
 }
 
-
+.setting-group{
+  width: calc(100% - 20px);
+  height: 40px;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  font-size: 1.5em;
+}
+.setting-group .icon:hover{
+  cursor: pointer;
+  color: var(--color-text-money);
+}
 
 </style>

src/components/window/app-window.vue

@@ -34,8 +34,8 @@ const props = defineProps({
 const isFull = ref(false)
 const width = ref(props.minWidth)
 const height = ref(props.minHeight)
-const left = ref(100)
-const top = ref(100)
+const left = ref(0)
+const top = ref(0)
 
 const style = computed(() => {
   return {
@@ -144,6 +144,11 @@ function resizeHandle(item: string, moveInfo: MoveInfo) {
 
 }
 
+// 剧中窗口
+function centerHandle() {
+  left.value = (props.parentWidth - width.value) / 2;
+  top.value = (props.parentHeight - height.value) / 2;
+}
 
 function moveStart(moveInfo: MoveInfo) {
   console.log(moveInfo)
@@ -229,6 +234,8 @@ onMounted(()=>{
   windowRef.value?.addEventListener('click', ()=>{
     focusWindow();
   }, false)
+  centerHandle();
+
 })
 
 // watch 事件

src/style.css

@@ -71,7 +71,8 @@
 
     --color-heading: var(--vt-c-text-dark-1);
     /*--color-text-title: var(--vt-c-text-dark-title);*/
-    --color-text: var(--vt-c-text-dark-2);
+    --color-text-pirmary: var(--vt-c-text-dark-1);
+    --color-text-subtitle: var(--vt-c-text-dark-2);
     --color-text-show: var(--vt-c-text-dark-3);
     --color-text-money: var(--vt-c-text-red);
   }

src/util/AppManag.ts

@@ -16,7 +16,7 @@ export let Applications:ApplicationInfo[] = [
         icon: 'music',
         allowMulti: false,
         minHeight: 600,
-        minWidth: 800,
+        minWidth: 1000,
         description: '音乐播放器',
         component: null,
         componentPath: '@/components/music/musicIndex.vue',
@@ -141,6 +141,23 @@ export function getAppByKey(key: string)
     return runningApplications.find(item => item.key === key)
 }
 
+export function getAppMinSize(runApp: RunApplicationInfo, type: 'width' | 'height', defaultSize: number)
+{
+    let appInfo = Applications.find(item => item.key === runApp.key)
+    let result = 200;
+    if (type === 'width')
+    {
+        appInfo?.minWidth && (result = appInfo.minWidth)
+        result = Math.min(result, defaultSize)
+    }
+    else if (type === 'height')
+    {
+        appInfo?.minHeight && (result = appInfo.minHeight)
+        result = Math.min(result, defaultSize)
+    }
+    return result
+}
+
 export function getAppComponent (key: string): any {
     let appInfo = Applications.find(item => item.key === key)
     if(!appInfo)