新增“不喜欢歌曲”功能&新增“收藏歌曲”、“取消收藏”、“不喜欢该歌曲”快捷键设置

2023-09-04 14:13:47 +08:00
parent 3ca8f09971
commit baf69e397a
40 changed files with 861 additions and 26 deletions
@@ -0,0 +1,112 @@
+<template lang="pug">
+material-modal(:show="modelValue" teleport="#view" height="80%" width="80%" @close="$emit('update:modelValue', false)")
+  main(:class="$style.main")
+    h2 {{ $t('setting__dislike_list_title') }}
+    div(:class="$style.content")
+      textarea(v-model="rules" :class="$style.textarea")
+  div(:class="$style.footer")
+    div(:class="$style.tips") {{ $t('setting__dislike_list_tips') }}
+    base-btn(:class="$style.btn" @click="handleSave") {{ $t('setting__dislike_list_save_btn') }}
+</template>
+
+<script>
+import { watch, ref } from '@common/utils/vueTools'
+import { overwirteDislikeInfo } from '@renderer/core/dislikeList'
+import { dislikeInfo } from '@renderer/store/dislikeList'
+
+export default {
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue', 'onRuleUpdate'],
+  setup(props, { emit }) {
+    const rules = ref('')
+
+    const handleSave = async() => {
+      await overwirteDislikeInfo(rules.value)
+      emit('onRuleUpdate')
+      emit('update:modelValue', false)
+    }
+
+    watch(() => props.modelValue, (visible) => {
+      if (!visible) return
+      rules.value = dislikeInfo.rules
+    })
+
+    return {
+      rules,
+      handleSave,
+    }
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.main {
+  // padding: 15px;
+  // max-width: 400px;
+  // min-width: 460px;
+  // min-height: 200px;
+  // width: ;
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  // min-height: 0;
+  // max-height: 100%;
+  // overflow: hidden;
+  h2 {
+    margin: 20px;
+    font-size: 16px;
+    color: var(--color-font);
+    line-height: 1.3;
+    text-align: center;
+  }
+}
+
+.content {
+  flex: auto;
+  // min-height: 100px;
+  max-height: 100%;
+  display: flex;
+  padding: 0 15px;
+}
+.textarea {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  background-color: var(--color-primary-light-200-alpha-900);
+  box-sizing: border-box;
+  font-family: inherit;
+  resize: none;
+}
+
+.footer {
+  box-sizing: border-box;
+  flex: none;
+  // width: @width;
+  padding: 15px 15px;
+  // padding: 2px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.tips {
+  // padding: 10px 15px;
+  font-size: 12px;
+  line-height: 1.25;
+  color: var(--color-550);
+  white-space: pre-wrap;
+}
+.btn {
+  min-width: 80px;
+}
+
+</style>