从webpack迁移到vite
This commit is contained in:
lyswhut
@@ -51,7 +51,7 @@ export default {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['update:model-value', 'change'],
|
||||
emits: ['update:modelValue', 'change'],
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
modelValue = checked
|
||||
} else modelValue = checked ? this.value : ''
|
||||
}
|
||||
this.$emit('update:model-value', modelValue)
|
||||
this.$emit('update:modelValue', modelValue)
|
||||
this.$emit('change', modelValue)
|
||||
},
|
||||
setValue(value) {
|
||||
|
||||
@@ -52,7 +52,7 @@ export default {
|
||||
// default: true,
|
||||
// },
|
||||
},
|
||||
emits: ['update:model-value', 'submit', 'change'],
|
||||
emits: ['update:modelValue', 'submit', 'change'],
|
||||
methods: {
|
||||
handleInput(event) {
|
||||
let value = event.target.value
|
||||
@@ -60,7 +60,7 @@ export default {
|
||||
value = value.trim()
|
||||
event.target.value = value
|
||||
}
|
||||
this.$emit('update:model-value', value)
|
||||
this.$emit('update:modelValue', value)
|
||||
},
|
||||
focus() {
|
||||
this.$refs.dom_input.focus()
|
||||
@@ -78,7 +78,7 @@ export default {
|
||||
// if (dom_input.selectionStart == dom_input.selectionEnd) {
|
||||
const value = text.substring(0, dom_input.selectionStart) + str + text.substring(dom_input.selectionEnd, text.length)
|
||||
event.target.value = value
|
||||
this.$emit('update:model-value', value)
|
||||
this.$emit('update:modelValue', value)
|
||||
// } else {
|
||||
// clipboardWriteText(text.substring(dom_input.selectionStart, dom_input.selectionEnd))
|
||||
// }
|
||||
|
||||
@@ -48,13 +48,13 @@ export default {
|
||||
default: 'name',
|
||||
},
|
||||
},
|
||||
emits: ['update:model-value', 'menu-click'],
|
||||
emits: ['update:modelValue', 'menu-click'],
|
||||
setup(props, { emit }) {
|
||||
const visible = computed(() => props.modelValue)
|
||||
const location = computed(() => props.xy)
|
||||
|
||||
const onHide = () => {
|
||||
emit('update:model-value', false)
|
||||
emit('update:modelValue', false)
|
||||
menuClick(null)
|
||||
}
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@ export default {
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
emits: ['update:model-value', 'change'],
|
||||
emits: ['update:modelValue', 'change'],
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
@@ -84,7 +84,7 @@ export default {
|
||||
handleClick(item) {
|
||||
// console.log(this.modelValue)
|
||||
if (item === this.modelValue) return
|
||||
this.$emit('update:model-value', this.itemKey ? item[this.itemKey] : item)
|
||||
this.$emit('update:modelValue', this.itemKey ? item[this.itemKey] : item)
|
||||
this.$emit('change', item)
|
||||
},
|
||||
handleShow() {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :class="[$style.sliderContent, { [$style.disabled]: disabled }, className]">
|
||||
<div :class="[$style.slider ]">
|
||||
<div :class="[$style.slider]">
|
||||
<div ref="dom_sliderBar" :class="$style.sliderBar" :style="{ transform: `scaleX(${(value - min) / (max - min) || 0})` }" />
|
||||
</div>
|
||||
<div :class="$style.sliderMask" @mousedown="handleSliderMsDown" />
|
||||
@@ -86,7 +86,7 @@ export default {
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
.slider-content {
|
||||
.sliderContent {
|
||||
flex: none;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
@@ -125,7 +125,7 @@ export default {
|
||||
// opacity: .5;
|
||||
// }
|
||||
|
||||
.slider-bar {
|
||||
.sliderBar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<ul :class="[$style.list, $style[align]]" role="tablist">
|
||||
<li
|
||||
v-for="item in list" :key="item[itemKey]" :class="[$style.listItem, {[$style.active]: modelValue == item[itemKey]}]" tabindex="-1"
|
||||
role="tab" :aria-label="item[itemLabel]" ignore-tip :aria-selected="modelValue == item[itemKey]"
|
||||
@click="handleToggle(item[itemKey])"
|
||||
v-for="item in list"
|
||||
:key="item[itemKey]" :class="[$style.listItem, {[$style.active]: modelValue == item[itemKey]}]" tabindex="-1" role="tab"
|
||||
:aria-label="item[itemLabel]" ignore-tip :aria-selected="modelValue == item[itemKey]" @click="handleToggle(item[itemKey])"
|
||||
>
|
||||
<span :class="$style.label">{{ item[itemLabel] }}</span>
|
||||
</li>
|
||||
@@ -37,11 +37,11 @@ export default {
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
emits: ['update:model-value', 'change'],
|
||||
emits: ['update:modelValue', 'change'],
|
||||
setup(props, { emit }) {
|
||||
const handleToggle = id => {
|
||||
if (id == props.modelValue) return
|
||||
emit('update:model-value', id)
|
||||
emit('update:modelValue', id)
|
||||
emit('change', id)
|
||||
}
|
||||
|
||||
|
||||
@@ -54,19 +54,19 @@
|
||||
|
||||
// // div.list-item(@click="handleListItemClick($event, index)" @contextmenu="handleListItemRightClick($event, index)"
|
||||
// // :class="[{ selected: rightClickSelectedIndex == index }, { active: selectedList.includes(item) }]")
|
||||
// // div.list-item-cell.nobreak.center(:style="{ width: rowWidth.r1 }" style="padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
|
||||
// // div.list-item-cell.nobreak.center(:style="{ width: rowWidth.r1 }" style="padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{ index + 1 }}
|
||||
// // div.list-item-cell.auto(:style="{ width: rowWidth.r2 }" :aria-label="item.name + (item.meta._qualitys.flac32bit ? ` - ${$t('tag__lossless_24bit')}` : (item.meta._qualitys.ape || item.meta._qualitys.flac || item.meta._qualitys.wav) ? ` - ${$t('tag__lossless')}` : item.meta._qualitys['320k'] ? ` - ${$t('tag__high_quality')}` : '') + (sourceTag ? ` - ${item.source}` : '')")
|
||||
// // span.select {{item.name}}
|
||||
// // span.badge.badge-theme-primary(:class="[$style.labelQuality, $style.noSelect]" v-if="item.meta._qualitys.flac32bit") {{$t('tag__lossless_24bit')}}
|
||||
// // span.badge.badge-theme-primary(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item.meta._qualitys.ape || item.meta._qualitys.flac || item.meta._qualitys.wav") {{$t('tag__lossless')}}
|
||||
// // span.badge.badge-theme-secondary(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item.meta._qualitys['320k']") {{$t('tag__high_quality')}}
|
||||
// // span.badge.badge-theme-tertiary(:class="[$style.labelQuality, $style.noSelect]" v-if="sourceTag") {{item.source}}
|
||||
// // span.select {{ item.name }}
|
||||
// // span.badge.badge-theme-primary(:class="[$style.labelQuality, $style.noSelect]" v-if="item.meta._qualitys.flac32bit") {{ $t('tag__lossless_24bit') }}
|
||||
// // span.badge.badge-theme-primary(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item.meta._qualitys.ape || item.meta._qualitys.flac || item.meta._qualitys.wav") {{ $t('tag__lossless') }}
|
||||
// // span.badge.badge-theme-secondary(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item.meta._qualitys['320k']") {{ $t('tag__high_quality') }}
|
||||
// // span.badge.badge-theme-tertiary(:class="[$style.labelQuality, $style.noSelect]" v-if="sourceTag") {{ item.source }}
|
||||
// // div.list-item-cell(:style="{ width: rowWidth.r3 }" :aria-label="item.singer")
|
||||
// // span.select {{item.singer}}
|
||||
// // span.select {{ item.singer }}
|
||||
// // div.list-item-cell(:style="{ width: rowWidth.r4 }" :aria-label="item.albumName")
|
||||
// // span.select {{item.meta.albumName}}
|
||||
// // span.select {{ item.meta.albumName }}
|
||||
// // div.list-item-cell(:style="{ width: rowWidth.r5 }")
|
||||
// // span(:class="[$style.time, $style.noSelect]") {{item.meta.interval || '--/--'}}
|
||||
// // span(:class="[$style.time, $style.noSelect]") {{ item.meta.interval || '--/--' }}
|
||||
// // div.list-item-cell(:style="{ width: rowWidth.r6 }" style="padding-left: 0; padding-right: 0;")
|
||||
// // material-list-buttons(:index="index" :class="$style.btns"
|
||||
// // :remove-btn="false" @btn-click="handleListBtnClick"
|
||||
|
||||
@@ -22,7 +22,7 @@ import { watch, ref, onBeforeUnmount } from '@common/utils/vueTools'
|
||||
import { defaultList, loveList, userLists } from '@renderer/store/list/state'
|
||||
import { addListMusics, moveListMusics, createUserList, getMusicExistListIds } from '@renderer/store/list/action'
|
||||
import useKeyDown from '@renderer/utils/compositions/useKeyDown'
|
||||
import { useI18n } from '@/lang'
|
||||
import { useI18n } from '@root/lang'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@@ -207,7 +207,7 @@ export default {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
.btnContent {
|
||||
flex: auto;
|
||||
max-height: 100%;
|
||||
padding-right: 15px;
|
||||
|
||||
@@ -21,7 +21,7 @@ import { computed } from '@common/utils/vueTools'
|
||||
import { defaultList, loveList, userLists } from '@renderer/store/list/state'
|
||||
import { addListMusics, moveListMusics, createUserList } from '@renderer/store/list/action'
|
||||
import useKeyDown from '@renderer/utils/compositions/useKeyDown'
|
||||
import { useI18n } from '@/lang'
|
||||
import { useI18n } from '@root/lang'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@@ -164,7 +164,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
.btnContent {
|
||||
flex: auto;
|
||||
max-height: 100%;
|
||||
padding-right: 15px;
|
||||
|
||||
@@ -104,7 +104,7 @@ export default {
|
||||
position: relative;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.progress-mask {
|
||||
.progressMask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -112,7 +112,7 @@ export default {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.progress-bar {
|
||||
.progressBar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -120,22 +120,22 @@ export default {
|
||||
height: 100%;
|
||||
transform-origin: 0;
|
||||
}
|
||||
.progress-bar1 {
|
||||
.progressBar1 {
|
||||
background-color: var(--color-primary-light-100-alpha-600);
|
||||
}
|
||||
|
||||
.progress-bar2 {
|
||||
.progressBar2 {
|
||||
background-color: var(--color-primary-light-100-alpha-400);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.progress-bar3 {
|
||||
.progressBar3 {
|
||||
background-color: var(--color-primary-light-100-alpha-200);
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.bar-transition {
|
||||
.barTransition {
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 0.2s;
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<base-btn min :class="[$style.newPreset, {[$style.editing]: isEditing}]" :aria-label="$t('player__sound_effect_biquad_filter_save_btn')" @click="handleEditing($event)">
|
||||
<svg-icon name="plus" />
|
||||
<base-input ref="input" :class="$style.newPresetInput" :value="newPresetName" :placeholder="$t('player__sound_effect_biquad_filter_save_input')" @keyup.enter="handleSave($event)" @blur="handleSave($event)" />
|
||||
</base-btn>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick } from '@common/utils/vueTools'
|
||||
import { appSetting } from '@renderer/store/setting'
|
||||
import { saveUserPitchShifterPreset } from '@renderer/store/soundEffect'
|
||||
|
||||
const isEditing = ref(false)
|
||||
const input = ref(false)
|
||||
const newPresetName = ref('')
|
||||
|
||||
const handleEditing = () => {
|
||||
if (isEditing.value) return
|
||||
// if (!this.newPresetName) this.newPresetName = this.listName
|
||||
isEditing.value = true
|
||||
nextTick(() => {
|
||||
input.value.$el.focus()
|
||||
})
|
||||
}
|
||||
|
||||
const handleSave = (event) => {
|
||||
let name = event.target.value.trim()
|
||||
newPresetName.value = event.target.value = ''
|
||||
isEditing.value = false
|
||||
if (!name) return
|
||||
if (name.length > 20) name = name.substring(0, 20)
|
||||
saveUserPitchShifterPreset({
|
||||
id: Date.now().toString(),
|
||||
name,
|
||||
playbackRate: appSetting['player.soundEffect.pitchShifter.playbackRate'],
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
.newPreset {
|
||||
position: relative;
|
||||
border: 1px dashed var(--color-primary-font-hover);
|
||||
// background-color: var(--color-main-background);
|
||||
color: var(--color-primary-font-hover);
|
||||
opacity: .7;
|
||||
height: 22px;
|
||||
|
||||
&.editing {
|
||||
opacity: 1;
|
||||
width: 90px;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
.newPresetInput {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.svg-icon {
|
||||
vertical-align: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.newPresetInput {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// line-height: 16px;
|
||||
background: none !important;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
padding: 0 3px;
|
||||
border-radius: 0;
|
||||
display: none;
|
||||
&::placeholder {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -38,7 +38,7 @@
|
||||
import { ref, onMounted, computed } from '@common/utils/vueTools'
|
||||
import { appSetting, updateSetting } from '@renderer/store/setting'
|
||||
import { convolutions } from '@renderer/plugins/player'
|
||||
import AddConvolutionPresetBtn from './AddConvolutionPresetBtn'
|
||||
import AddConvolutionPresetBtn from './AddConvolutionPresetBtn.vue'
|
||||
import { getUserConvolutionPresetList, removeUserConvolutionPreset } from '@renderer/store/soundEffect'
|
||||
|
||||
const updateConvolution = val => {
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
import { onMounted, ref } from '@common/utils/vueTools'
|
||||
import { freqs, freqsPreset } from '@renderer/plugins/player'
|
||||
import { appSetting, updateSetting } from '@renderer/store/setting'
|
||||
import AddEQPresetBtn from './AddEQPresetBtn'
|
||||
import AddEQPresetBtn from './AddEQPresetBtn.vue'
|
||||
import { getUserEQPresetList, removeUserEQPreset } from '@renderer/store/soundEffect'
|
||||
|
||||
const labels = freqs.map(num => num < 1000 ? num : `${num / 1000}k`)
|
||||
|
||||
@@ -29,9 +29,9 @@ import { ref } from '@common/utils/vueTools'
|
||||
// import { saveVolumeIsMute } from '@renderer/store/setting'
|
||||
// import { volume, isMute } from '@renderer/store/player/volume'
|
||||
// import fs from 'node:fs'
|
||||
import BiquadFilter from './BiquadFilter'
|
||||
import AudioPanner from './AudioPanner'
|
||||
import AudioConvolution from './AudioConvolution'
|
||||
import BiquadFilter from './BiquadFilter.vue'
|
||||
import AudioPanner from './AudioPanner.vue'
|
||||
import AudioConvolution from './AudioConvolution.vue'
|
||||
import PitchShifter from './PitchShifter.vue'
|
||||
|
||||
defineProps({
|
||||
|
||||
@@ -1,25 +1,22 @@
|
||||
import upperFirst from 'lodash/upperFirst'
|
||||
import camelCase from 'lodash/camelCase'
|
||||
|
||||
const requireComponent = require.context('./', true, /\.vue$/)
|
||||
|
||||
const requireComponent = import.meta.glob(['./**/*.vue', '!./**/components/**/*.vue'], { eager: true })
|
||||
const vueFileRxp = /\.vue$/
|
||||
const vueIndexFileRxp = /\/index\.vue$/
|
||||
|
||||
|
||||
export default app => {
|
||||
requireComponent.keys().forEach(fileName => {
|
||||
const filePath = fileName.replace(/^\.\//, '')
|
||||
Object.entries(requireComponent).forEach(([path, module]) => {
|
||||
path = path.replace(/^\.\//, '')
|
||||
let fileName = vueIndexFileRxp.test(path)
|
||||
? path.replace(vueIndexFileRxp, '')
|
||||
: path.replace(vueFileRxp, '')
|
||||
|
||||
if (!filePath.split('/').every((path, index, arr) => {
|
||||
const char = path.charAt(0)
|
||||
return vueFileRxp.test(path) || char.toUpperCase() !== char || arr[index + 1] == 'index.vue'
|
||||
})) return
|
||||
let componentName = upperFirst(camelCase(fileName))
|
||||
|
||||
const componentConfig = requireComponent(fileName)
|
||||
// console.log(componentName)
|
||||
|
||||
let componentName = upperFirst(camelCase(filePath.replace(/\.\w+$/, '')))
|
||||
|
||||
if (componentName.endsWith('Index')) componentName = componentName.replace(/Index$/, '')
|
||||
|
||||
app.component(componentName, componentConfig.default || componentConfig)
|
||||
app.component(componentName, module.default)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
import { isFullscreen } from '@renderer/store'
|
||||
import { appSetting } from '@renderer/store/setting'
|
||||
|
||||
import ControlBtns from './ControlBtns'
|
||||
import NavBar from './NavBar'
|
||||
import ControlBtns from './ControlBtns.vue'
|
||||
import NavBar from './NavBar.vue'
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
import { computed } from '@common/utils/vueTools'
|
||||
import { useRouter } from '@common/utils/vueRouter'
|
||||
import { clipboardWriteText } from '@common/utils/electron'
|
||||
import ControlBtns from './ControlBtns'
|
||||
import ControlBtns from './ControlBtns.vue'
|
||||
// import PlayProgress from './PlayProgress'
|
||||
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
|
||||
// import { lyric } from '@renderer/core/share/lyric'
|
||||
@@ -284,7 +284,7 @@ export default {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
.playBtn {
|
||||
flex: none;
|
||||
height: 52%;
|
||||
// margin-top: -2px;
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
import { computed } from '@common/utils/vueTools'
|
||||
import { useRouter } from '@common/utils/vueRouter'
|
||||
import { clipboardWriteText } from '@common/utils/electron'
|
||||
import ControlBtns from './ControlBtns'
|
||||
import ControlBtns from './ControlBtns.vue'
|
||||
// import PlayProgress from './PlayProgress'
|
||||
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
|
||||
// import { lyric } from '@renderer/core/share/lyric'
|
||||
|
||||
@@ -49,8 +49,8 @@
|
||||
import { computed } from '@common/utils/vueTools'
|
||||
import { useRouter } from '@common/utils/vueRouter'
|
||||
import { clipboardWriteText } from '@common/utils/electron'
|
||||
import ControlBtns from './ControlBtns'
|
||||
import PlayProgress from './PlayProgress'
|
||||
import ControlBtns from './ControlBtns.vue'
|
||||
import PlayProgress from './PlayProgress.vue'
|
||||
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
|
||||
// import { lyric } from '@renderer/core/share/lyric'
|
||||
import {
|
||||
@@ -314,7 +314,7 @@ export default {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
.playBtn {
|
||||
flex: none;
|
||||
height: 52%;
|
||||
// margin-top: -2px;
|
||||
|
||||
@@ -56,7 +56,7 @@ import {
|
||||
} from '@renderer/store/player/action'
|
||||
import { onMounted, onBeforeUnmount, computed, reactive, ref, nextTick, watch } from '@common/utils/vueTools'
|
||||
import useLyric from '@renderer/utils/compositions/useLyric'
|
||||
import LyricMenu from './components/LyricMenu'
|
||||
import LyricMenu from './components/LyricMenu.vue'
|
||||
import { appSetting } from '@renderer/store/setting'
|
||||
import { setLyricOffset } from '@renderer/core/lyric'
|
||||
|
||||
@@ -263,7 +263,7 @@ export default {
|
||||
// font-size: 1.2em;
|
||||
// }
|
||||
}
|
||||
.lrc-active-zoom {
|
||||
.lrcActiveZoom {
|
||||
:global {
|
||||
.line-content {
|
||||
&.active {
|
||||
@@ -343,12 +343,12 @@ export default {
|
||||
.lyricSelectlineExtended {
|
||||
font-size: 14px;
|
||||
}
|
||||
.lrc-active {
|
||||
.lrcActive {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.lyric-space {
|
||||
.lyricSpace {
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@ import { playNext, playPrev, togglePlay } from '@renderer/core/player'
|
||||
import { status, isPlay } from '@renderer/store/player/state'
|
||||
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
|
||||
|
||||
import ControlBtns from './components/ControlBtns'
|
||||
import ControlBtns from './components/ControlBtns.vue'
|
||||
|
||||
const {
|
||||
nowPlayTimeStr,
|
||||
@@ -71,13 +71,13 @@ const {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
.progressContainer {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.progress-content {
|
||||
.progressContent {
|
||||
position: relative;
|
||||
height: 16px;
|
||||
padding: 5px 0;
|
||||
@@ -87,12 +87,12 @@ const {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bar-transition {
|
||||
.barTransition {
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.time-label {
|
||||
.timeLabel {
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
@@ -104,7 +104,7 @@ const {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.play-control {
|
||||
.playControl {
|
||||
flex: none;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -113,7 +113,7 @@ const {
|
||||
padding: 0 25px;
|
||||
color: var(--color-button-font);
|
||||
}
|
||||
.play-btn {
|
||||
.playBtn {
|
||||
height: 40%;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
@@ -125,7 +125,7 @@ const {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
|
||||
+.play-btn {
|
||||
+.playBtn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
svg {
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<teleport to="#root">
|
||||
<div ref="dom_menu" :class="$style.container" :style="menuStyles" :aria-hidden="!modelValue">
|
||||
<!-- <div :class="$style.group">
|
||||
<div :class="$style.title">{{$t('lyric_menu__align')}}</div>
|
||||
<div :class="$style.title">{{ $t('lyric_menu__align') }}</div>
|
||||
<div :class="$style.subGroup">
|
||||
<div :class="[$style.btn, { [$style.active]: appSetting['playDetail.style.align'] == 'left' }]" role="button" @click="setFontAlign('left')" ignore-tip :aria-label="$t('lyric_menu__align_left')">{{$t('lyric_menu__align_left')}}</div>
|
||||
<div :class="[$style.btn, { [$style.active]: appSetting['playDetail.style.align'] == 'center' }]" role="button" @click="setFontAlign('center')" ignore-tip :aria-label="$t('lyric_menu__align_center')">{{$t('lyric_menu__align_center')}}</div>
|
||||
<div :class="[$style.btn, { [$style.active]: appSetting['playDetail.style.align'] == 'left' }]" role="button" @click="setFontAlign('left')" ignore-tip :aria-label="$t('lyric_menu__align_left')">{{ $t('lyric_menu__align_left') }}</div>
|
||||
<div :class="[$style.btn, { [$style.active]: appSetting['playDetail.style.align'] == 'center' }]" role="button" @click="setFontAlign('center')" ignore-tip :aria-label="$t('lyric_menu__align_center')">{{ $t('lyric_menu__align_center') }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div :class="$style.group">
|
||||
@@ -83,7 +83,7 @@ export default {
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['updateLyric', 'update:model-value'],
|
||||
emits: ['updateLyric', 'update:modelValue'],
|
||||
setup(props, { emit }) {
|
||||
// const appSetting = useRefGetter('appSetting')
|
||||
// const playDetailSetting = useRefGetter('playDetailSetting')
|
||||
@@ -98,7 +98,7 @@ export default {
|
||||
const location = computed(() => props.xy)
|
||||
|
||||
const onHide = () => {
|
||||
emit('update:model-value', false)
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
const setFontAlign = val => {
|
||||
|
||||
@@ -11,11 +11,11 @@ div(:class="$style.container")
|
||||
div.select(:class="$style.name") {{ item.userName }}
|
||||
div(:class="$style.metaInfo")
|
||||
time(v-if="item.timeStr" :class="$style.label") {{ timeFormat(item.timeStr) }}
|
||||
div(v-if="item.location" :class="$style.label") {{$t('comment__location', { location: item.location })}}
|
||||
div(v-if="item.location" :class="$style.label") {{ $t('comment__location', { location: item.location }) }}
|
||||
div(v-if="item.likedCount != null" :class="$style.likes")
|
||||
svg(:class="$style.likesIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" space="preserve")
|
||||
use(xlink:href="#icon-thumbs-up")
|
||||
| {{item.likedCount}}
|
||||
| {{ item.likedCount }}
|
||||
p.select(:class="$style.comment_text") {{ item.text }}
|
||||
div(v-if="item.images?.length" :class="$style.comment_images")
|
||||
img(v-for="(url, index) in item.images" :key="index" :src="url" loading="lazy" decoding="async")
|
||||
|
||||
@@ -33,14 +33,14 @@ div.comment(ref="dom_container" :class="$style.comment")
|
||||
div(:class="$style.pagination")
|
||||
material-pagination(:count="newComment.total" :btn-length="5" :limit="newComment.limit" :page="newComment.page" @btn-click="handleToggleCommentPage")
|
||||
div(v-else :class="$style.unavailable")
|
||||
p {{$t('comment__unavailable')}}
|
||||
p {{ $t('comment__unavailable') }}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { appSetting } from '@renderer/store/setting'
|
||||
import { toOldMusicInfo } from '@renderer/utils'
|
||||
import music from '@renderer/utils/musicSdk'
|
||||
import CommentFloor from './CommentFloor'
|
||||
import CommentFloor from './CommentFloor.vue'
|
||||
|
||||
export default {
|
||||
name: 'MusicComment',
|
||||
|
||||
@@ -44,7 +44,7 @@ transition(enter-active-class="animated slideInRight" leave-active-class="animat
|
||||
div.description(:class="$style.description")
|
||||
p {{ $t('player__music_name') }}{{ musicInfo.name }}
|
||||
p {{ $t('player__music_singer') }}{{ musicInfo.singer }}
|
||||
p(v-if="musicInfo.album") {{ $t('player__music_album') }}{{musicInfo.album}}
|
||||
p(v-if="musicInfo.album") {{ $t('player__music_album') }}{{ musicInfo.album }}
|
||||
|
||||
transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
|
||||
LyricPlayer(v-if="visibled")
|
||||
@@ -70,9 +70,9 @@ import {
|
||||
setShowPlayComment,
|
||||
setShowPlayLrcSelectContentLrc,
|
||||
} from '@renderer/store/player/action'
|
||||
import LyricPlayer from './LyricPlayer'
|
||||
import PlayBar from './PlayBar'
|
||||
import MusicComment from './components/MusicComment'
|
||||
import LyricPlayer from './LyricPlayer.vue'
|
||||
import PlayBar from './PlayBar.vue'
|
||||
import MusicComment from './components/MusicComment/index.vue'
|
||||
import { registerAutoHideMounse, unregisterAutoHideMounse } from './autoHideMounse'
|
||||
import { appSetting } from '@renderer/store/setting'
|
||||
import { closeWindow, maxWindow, minWindow, setFullScreen } from '@renderer/utils/ipc'
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
<script setup>
|
||||
import { isFullscreen } from '@renderer/store'
|
||||
import { appSetting } from '@renderer/store/setting'
|
||||
import ControlBtns from './ControlBtns'
|
||||
import SearchInput from './SearchInput'
|
||||
import ControlBtns from './ControlBtns.vue'
|
||||
import SearchInput from './SearchInput.vue'
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -285,7 +285,7 @@ export default {
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
.song-list {
|
||||
.songList {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
:placeholder="placeholder"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@input="$emit('update:model-value', text)"
|
||||
@input="$emit('update:modelValue', text)"
|
||||
@change="sendEvent('change')"
|
||||
@keyup.enter="handleSearch"
|
||||
@keydown.arrow-down.arrow-up.prevent
|
||||
@@ -82,7 +82,7 @@ export default {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['update:model-value', 'event'],
|
||||
emits: ['update:modelValue', 'event'],
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
@@ -182,11 +182,11 @@ export default {
|
||||
str = str.replace(/\s+/g, ' ')
|
||||
let dom_input = this.$refs.dom_input
|
||||
this.text = this.text.substring(0, dom_input.selectionStart) + str + this.text.substring(dom_input.selectionEnd, this.text.length)
|
||||
this.$emit('update:model-value', this.text)
|
||||
this.$emit('update:modelValue', this.text)
|
||||
},
|
||||
handleClearList() {
|
||||
this.text = ''
|
||||
this.$emit('update:model-value', this.text)
|
||||
this.$emit('update:modelValue', this.text)
|
||||
this.sendEvent('submit')
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user