fc-ele/src/components/music/common/mSettingScan.vue

<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>