升级到 vue3
This commit is contained in:
lyswhut
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
|
||||
<div :class="$style.main">
|
||||
<!-- <div class="scroll" :class="$style.toc">
|
||||
<ul :class="$style.tocList">
|
||||
<li :class="$style.tocListItem" v-for="h2 in toc.list" :key="h2.id">
|
||||
<h2 :class="[$style.tocH2, toc.activeId == h2.id ? $style.active : null]" :tips="h2.title">
|
||||
<a :href="'#' + h2.id" @click.stop="toc.activeId = h2.id">{{h2.title}}</a>
|
||||
</h2>
|
||||
<ul :class="$style.tocList" v-if="h2.children.length">
|
||||
<li :class="$style.tocSubListItem" v-for="h3 in h2.children" :key="h3.id">
|
||||
<h3 :class="[$style.tocH3, toc.activeId == h3.id ? $style.active : null]" :tips="h3.title">
|
||||
<a :href="'#' + h3.id" @click.stop="toc.activeId = h3.id">{{h3.title}}</a>
|
||||
</h3>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
<div class="scroll" :class="$style.setting" ref="dom_setting">
|
||||
<dl ref="dom_setting_list">
|
||||
<Basic />
|
||||
<Play />
|
||||
<DesktopLyric />
|
||||
<Search />
|
||||
<List />
|
||||
<Download />
|
||||
<Sync />
|
||||
<HotKey />
|
||||
<Network />
|
||||
<Odc />
|
||||
<Backup />
|
||||
<Other />
|
||||
<Update />
|
||||
<About />
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRefGetter, watch, useCommit } from '@renderer/utils/vueTools'
|
||||
import { currentStting } from './setting'
|
||||
|
||||
import Basic from './components/Basic'
|
||||
import Play from './components/Play'
|
||||
import DesktopLyric from './components/DesktopLyric'
|
||||
import Search from './components/Search'
|
||||
import List from './components/List'
|
||||
import Download from './components/Download'
|
||||
import Sync from './components/Sync'
|
||||
import HotKey from './components/HotKey'
|
||||
import Network from './components/Network'
|
||||
import Odc from './components/Odc'
|
||||
import Backup from './components/Backup'
|
||||
import Other from './components/Other'
|
||||
import Update from './components/Update'
|
||||
import About from './components/About'
|
||||
|
||||
export default {
|
||||
name: 'Setting',
|
||||
components: {
|
||||
Basic,
|
||||
Play,
|
||||
DesktopLyric,
|
||||
Search,
|
||||
List,
|
||||
Download,
|
||||
Sync,
|
||||
HotKey,
|
||||
Network,
|
||||
Odc,
|
||||
Backup,
|
||||
Other,
|
||||
Update,
|
||||
About,
|
||||
},
|
||||
setup() {
|
||||
const setting = useRefGetter('setting')
|
||||
|
||||
const setSetting = useCommit('setSetting')
|
||||
currentStting.value = JSON.parse(JSON.stringify(setting.value))
|
||||
watch(currentStting, newSetting => {
|
||||
const newSettingStr = JSON.stringify(newSetting)
|
||||
if (newSettingStr === JSON.stringify(setting.value)) return
|
||||
setSetting(JSON.parse(newSettingStr))
|
||||
}, {
|
||||
deep: true,
|
||||
})
|
||||
|
||||
watch(() => setting.value.isAgreePact, val => {
|
||||
currentStting.value.isAgreePact = val
|
||||
})
|
||||
watch(() => setting.value.player.mediaDeviceId, val => {
|
||||
currentStting.value.player.mediaDeviceId = val
|
||||
})
|
||||
watch(() => setting.value.player.isMute, val => {
|
||||
currentStting.value.player.isMute = val
|
||||
})
|
||||
watch(() => setting.value.apiSource, val => {
|
||||
currentStting.value.apiSource = val
|
||||
})
|
||||
watch(() => setting.value.desktopLyric.enable, val => {
|
||||
currentStting.value.desktopLyric.enable = val
|
||||
})
|
||||
watch(() => setting.value.desktopLyric.isLock, val => {
|
||||
currentStting.value.desktopLyric.isLock = val
|
||||
})
|
||||
watch(() => setting.value.player.togglePlayMethod, val => {
|
||||
currentStting.value.player.togglePlayMethod = val
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toc: {
|
||||
list: [],
|
||||
activeId: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
// mounted() {
|
||||
// this.initTOC()
|
||||
// },
|
||||
// methods: {
|
||||
// initTOC() {
|
||||
// const list = this.$refs.dom_setting_list.children
|
||||
// const toc = []
|
||||
// let prevTitle
|
||||
// for (const item of list) {
|
||||
// if (item.tagName == 'DT') {
|
||||
// prevTitle = {
|
||||
// title: item.innerText.replace(/[（(].+?[)）]/, ''),
|
||||
// id: item.getAttribute('id'),
|
||||
// dom: item,
|
||||
// children: [],
|
||||
// }
|
||||
// toc.push(prevTitle)
|
||||
// continue
|
||||
// }
|
||||
// const h3 = item.querySelector('h3')
|
||||
// if (h3) {
|
||||
// prevTitle.children.push({
|
||||
// title: h3.innerText.replace(/[（(].+?[)）]/, ''),
|
||||
// id: h3.getAttribute('id'),
|
||||
// dom: h3,
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// console.log(toc)
|
||||
// this.toc.list = toc
|
||||
// },
|
||||
// handleListScroll(event) {
|
||||
// // console.log(event.target.scrollTop)
|
||||
// },
|
||||
// },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
height: 100%;
|
||||
// border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
// .toc {
|
||||
// flex: 0 0 15%;
|
||||
// overflow-y: scroll;
|
||||
// padding: 10px;
|
||||
// a {
|
||||
// text-decoration: none;
|
||||
// display: block;
|
||||
// line-height: 1.5;
|
||||
// .mixin-ellipsis-1;
|
||||
// }
|
||||
// }
|
||||
// .tocH2 {
|
||||
// font-size: 14px;
|
||||
// a {
|
||||
// color: @color-theme;
|
||||
// }
|
||||
// &.active {
|
||||
// a {
|
||||
// color: @color-theme;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .tocH3 {
|
||||
// font-size: 13px;
|
||||
// opacity: .8;
|
||||
// }
|
||||
|
||||
// .tocList {
|
||||
// .tocList {
|
||||
// padding-left: 15px;
|
||||
// }
|
||||
// }
|
||||
// .tocListItem {
|
||||
// +.tocListItem {
|
||||
// padding-top: 10px;
|
||||
// }
|
||||
// }
|
||||
// .tocSubListItem {
|
||||
// padding-top: 10px;
|
||||
// }
|
||||
|
||||
.setting {
|
||||
padding: 0 15px 30px 15px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
:global {
|
||||
dt {
|
||||
border-left: 5px solid @color-theme;
|
||||
padding: 3px 7px;
|
||||
margin: 30px 0 15px;
|
||||
|
||||
+ dd h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 15px;
|
||||
// font-size: 13px;
|
||||
> div {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
}
|
||||
h3 {
|
||||
font-size: 12px;
|
||||
margin: 25px 0 15px;
|
||||
}
|
||||
p {
|
||||
padding: 3px 0;
|
||||
line-height: 1.3;
|
||||
.btn {
|
||||
+ .btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gap-left {
|
||||
+ .gap-left {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.gap-top {
|
||||
&.top {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
+ .gap-top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
display: inline-block;
|
||||
transition: @transition-theme;
|
||||
transition-property: opacity, transform;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
||||
&.hide {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// :global(dt):target, :global(h3):target {
|
||||
// animation: highlight 1s ease;
|
||||
// }
|
||||
|
||||
// @keyframes highlight {
|
||||
// from { background: yellow; }
|
||||
// to { background: transparent; }
|
||||
// }
|
||||
|
||||
each(@themes, {
|
||||
:global(#root.@{value}) {
|
||||
.tocH2 {
|
||||
a {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
tr {
|
||||
&.active {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
}
|
||||
}
|
||||
.setting {
|
||||
dt {
|
||||
border-left-color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</style>
|
||||
Reference in New Issue
Block a user