feat: 播放器设置页面

1. 播放器设置页面样式制作
2. 扫描部分样式

src/components/music/common/mSettingCould.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {defineComponent} from "vue";
+
+defineComponent({
+  name: 'mSettingCould',
+})
+</script>
+
+<template>
+  <div class="full">
+    云配置
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/music/common/mSettingScan.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import {defineComponent} from "vue";
+import {MusicScanSetting} from "@/types/musicType.ts";
+import EmptyView from "@/components/public/emptyView.vue";
+
+defineComponent({
+  name: 'm-setting-scan'
+})
+
+const scanSetting: MusicScanSetting[] = [];
+scanSetting.push({
+  name: '默认配置',
+  isFileRepeat: true,
+  path: 'D:\\music',
+  scanSubDir: true,
+})
+scanSetting.push({
+  name: '默认配置',
+  isFileRepeat: true,
+  path: 'D:\\music',
+  scanSubDir: true,
+})
+scanSetting.push({
+  name: '默认配置',
+  isFileRepeat: true,
+  path: 'D:\\music',
+  scanSubDir: true,
+})
+scanSetting.push({
+  name: '默认配置',
+  isFileRepeat: true,
+  path: 'D:\\music',
+  scanSubDir: true,
+})
+scanSetting.push({
+  name: '默认配置',
+  isFileRepeat: true,
+  path: 'D:\\music',
+  scanSubDir: true,
+})
+
+
+</script>
+
+<template>
+  <div class="full scroll">
+    <div class="btn-group">
+      <div class="btn">创建扫描配置</div>
+    </div>
+    <div class="scan-view scroll">
+      <empty-view v-if="scanSetting.length === 0"/>
+
+      <div class="scan-item" v-for="(item,index) in scanSetting" :key="index">
+        <div class="scan-title">
+          {{ item.name }}
+        </div>
+        <div class="scan-content">
+          <div class="scan-item-content">{{ item.path }}</div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.btn-group{
+  width: 100%;
+  height: 50px;
+  box-sizing: border-box;
+  padding: 0 20px;
+  justify-content: flex-start;
+}
+.btn{
+  background-color: var(--color-btn-bg);
+  color: var(--color-btn-text);
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+.btn:hover{
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+  background-color: var(--color-btn-bg-hover);
+  color: var(--color-btn-text-hover);
+}
+.btn:active{
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+  background-color: var(--color-btn-bg-active);
+  color: var(--color-btn-text-active);
+}
+
+.scan-view{
+  width: 100%;
+  height: calc(100% - 60px);
+}
+
+.scan-item{
+  width: calc(100% - 40px);
+  height: 120px;
+  border-radius: 1rem;
+  margin: 20px auto 0;
+  box-sizing: border-box;
+  padding: 5px 10px;
+  background-color: var(--color-background-mute);
+}
+.scan-item .scan-title{
+  width: 100%;
+  height: 30px;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+
+</style>

src/components/music/common/musicSetting.vue

@@ -1,24 +1,84 @@
 <script setup lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
+import MSettingScan from "@/components/music/common/mSettingScan.vue";
+import MSettingCould from "@/components/music/common/mSettingCould.vue";
 
 defineComponent({
   name: 'musicSetting',
 })
+
+interface TabItem {
+  name: string;
+  key: string;
+}
+const keyScan = 'keyScanSetting'
+const keyCloud = 'keyCloudSetting'
+const showTabKey = ref(keyScan)
+const tabList: TabItem[] = [
+  {
+    name: '扫描配置',
+    key: keyScan
+  },
+  {
+    name: '云同步配置',
+    key: keyCloud
+  }
+]
+function changeTabHandle (item: TabItem)
+{
+  showTabKey.value = item.key
+}
+
 </script>
 
 <template>
   <div class="musicSetting">
     <div class="title">音乐设置</div>
     <div class="head">
-      <div class="tab">扫描路径</div>
-      <div class="tab">云同步配置</div>
+      <div v-for="(item, index) in tabList"
+           :key="index"
+           :class="`tab ${item.key === showTabKey?'tab-select':''}`"
+           @click="changeTabHandle(item)"
+      >
+        {{ item.name }}
+      </div>
     </div>
     <div class="view-con">
-
+      <m-setting-scan v-if="showTabKey === keyScan"/>
+      <m-setting-could v-else-if="showTabKey === keyCloud"/>
     </div>
   </div>
 </template>
 
 <style scoped>
 
+.musicSetting{
+  width: 100%;
+  height: 100%;
+}
+.title{
+  font-size: 1.6rem;
+  height: 70px;
+  line-height: 70px;
+  padding: 0 20px;
+  color: var(--color-text-show);
+}
+.head{
+  display: flex;
+  width: 100%;
+  height: 40px;
+  border-bottom: 1px solid #ccc;
+}
+.tab{
+  padding: 0 20px;
+  font-size: 1.2rem;
+}
+.tab:active, .tab-select{
+  color: var(--color-text-show);
+  border-bottom: 2px solid var(--color-text-show);
+}
+.view-con{
+  width: 100%;
+  height: calc(100% - 108px);
+}
 </style>

src/components/music/musicIndex.vue

@@ -75,6 +75,7 @@ function showMusicSetting()
 {
   message.info("show music setting");
   musicViewShow.value = showSetting;
+  selectIndex.value = -1;
 }
 </script>
 
@@ -160,10 +161,12 @@ function showMusicSetting()
 .side-bar .side-title{
   width: 100%;
   height: 50px;
-  line-height: 50px;
-  font-size: larger;
   display: block;
-  padding-left: 0.8em;
+  padding-left: 0.4rem;
+  font-size: 1.8rem;
+  font-weight: bold;
+
+  color: var(--color-text-show);
 }
 
 .search-input{

src/components/public/emptyView.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {defineComponent} from "vue";
+
+defineComponent({
+  name: "emptyView"
+})
+</script>
+
+<template>
+<div class="empty-view">
+  <div class="empty-view-content">
+      <div class="empty-view-content-title-text">
+        <div class="empty-view-content-title-text-title">
+          暂无数据
+        </div>
+        <div class="empty-view-content-title-text-subtitle"></div>
+      </div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+.empty-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

src/style.css

@@ -52,6 +52,23 @@
   --color-text-title: var(--vt-c-text-light-title);
   --color-text-show: var(--vt-c-text-light-3);
   --color-text-money: var(--vt-c-text-red);
+
+  --color-btn-bg: var(--vt-c-indigo);
+  --color-btn-text: var(--vt-c-white);
+
+  --color-btn-bg-hover: var(--vt-c-indigo);
+  --color-btn-text-hover: var(--vt-c-white);
+
+  --color-btn-text-disabled: var(--vt-c-text-light-2);
+  --color-btn-text-disabled-hover: var(--vt-c-text-light-2);
+  --color-btn-bg-disabled: var(--vt-c-indigo);
+  --color-btn-bg-disabled-hover: var(--vt-c-indigo);
+
+  --color-btn-bg-active: var(--vt-c-indigo);
+  --color-btn-text-active: var(--vt-c-white);
+
+
+
   --color-shadow: var(--vt-c-divider-light-2);
   --color-shadow-hover: var(--vt-c-divider-light-1);
   --section-gap: 160px;
@@ -75,6 +92,12 @@
     --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);
+
+    --color-btn-bg: var(--vt-c-indigo);
+    --color-btn-bg-hover: var(--vt-c-indigo);
+    --color-btn-text: var(--vt-c-white);
+    --color-btn-text-hover: var(--vt-c-white);
+
   }
 }
 

src/types/musicType.ts

@@ -42,4 +42,12 @@ export interface MusicSearchInfo {
     // 自动转换文件
 }
 
+export interface MusicScanSetting {
+    name: string;// 配置名称
+    path: string;// 扫描路径
+    scanSubDir: boolean;// 是否扫描子目录
+    // 是否文件去重
+    isFileRepeat: boolean;
+}
+