fix path
This commit is contained in:
lyswhut
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div :class="$style.main">
|
||||
<div class="scroll" :class="$style.toc">
|
||||
<ul :class="$style.tocList" role="toolbar">
|
||||
<li v-for="h2 in tocList" :key="h2.id" :class="$style.tocListItem" role="presentation">
|
||||
<h2
|
||||
:class="[$style.tocH2, {[$style.active]: avtiveComponentName == h2.id }]"
|
||||
role="tab" :aria-selected="avtiveComponentName == h2.id"
|
||||
:aria-label="h2.title" ignore-tip @click="toggleTab(h2.id)"
|
||||
>
|
||||
{{ h2.title }}
|
||||
</h2>
|
||||
<!-- <ul v-if="h2.children.length" :class="$style.tocList">
|
||||
<li v-for="h3 in h2.children" :key="h3.id" :class="$style.tocSubListItem">
|
||||
<h3 :class="[$style.tocH3, toc.activeId == h3.id ? $style.active : null]" :aria-label="h3.title">
|
||||
<a :href="'#' + h3.id" @click.stop="toc.activeId = h3.id">{{ h3.title }}</a>
|
||||
</h3>
|
||||
</li>
|
||||
</ul> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div ref="dom_content_ref" class="scroll" :class="$style.setting">
|
||||
<dl>
|
||||
<component :is="avtiveComponentName" />
|
||||
<!-- <SettingBasic />
|
||||
<SettingPlay />
|
||||
<SettingPlayDetail />
|
||||
<SettingDesktopLyric />
|
||||
<SettingSearch />
|
||||
<SettingList />
|
||||
<SettingDownload />
|
||||
<SettingSync />
|
||||
<SettingHotKey />
|
||||
<SettingNetwork />
|
||||
<SettingOdc />
|
||||
<SettingBackup />
|
||||
<SettingOther />
|
||||
<SettingUpdate />
|
||||
<SettingAbout /> -->
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed, nextTick } from '@common/utils/vueTools'
|
||||
// import { currentStting } from './setting'
|
||||
import { useI18n } from '@renderer/plugins/i18n'
|
||||
import { useRoute } from '@common/utils/vueRouter'
|
||||
|
||||
import SettingBasic from './components/SettingBasic'
|
||||
import SettingPlay from './components/SettingPlay'
|
||||
import SettingPlayDetail from './components/SettingPlayDetail'
|
||||
import SettingDesktopLyric from './components/SettingDesktopLyric'
|
||||
import SettingSearch from './components/SettingSearch'
|
||||
import SettingList from './components/SettingList'
|
||||
import SettingDownload from './components/SettingDownload'
|
||||
import SettingSync from './components/SettingSync'
|
||||
import SettingHotKey from './components/SettingHotKey'
|
||||
import SettingNetwork from './components/SettingNetwork'
|
||||
import SettingOdc from './components/SettingOdc'
|
||||
import SettingBackup from './components/SettingBackup'
|
||||
import SettingOther from './components/SettingOther'
|
||||
import SettingUpdate from './components/SettingUpdate'
|
||||
import SettingAbout from './components/SettingAbout'
|
||||
|
||||
export default {
|
||||
name: 'Setting',
|
||||
components: {
|
||||
SettingBasic,
|
||||
SettingPlay,
|
||||
SettingPlayDetail,
|
||||
SettingDesktopLyric,
|
||||
SettingSearch,
|
||||
SettingList,
|
||||
SettingDownload,
|
||||
SettingSync,
|
||||
SettingHotKey,
|
||||
SettingNetwork,
|
||||
SettingOdc,
|
||||
SettingBackup,
|
||||
SettingOther,
|
||||
SettingUpdate,
|
||||
SettingAbout,
|
||||
},
|
||||
setup() {
|
||||
const t = useI18n()
|
||||
const route = useRoute()
|
||||
|
||||
const dom_content_ref = ref(null)
|
||||
|
||||
const tocList = computed(() => {
|
||||
return [
|
||||
{ id: 'SettingBasic', title: t('setting__basic') },
|
||||
{ id: 'SettingPlay', title: t('setting__play') },
|
||||
{ id: 'SettingPlayDetail', title: t('setting__play_detail') },
|
||||
{ id: 'SettingDesktopLyric', title: t('setting__desktop_lyric') },
|
||||
{ id: 'SettingSearch', title: t('setting__search') },
|
||||
{ id: 'SettingList', title: t('setting__list') },
|
||||
{ id: 'SettingDownload', title: t('setting__download') },
|
||||
{ id: 'SettingSync', title: t('setting__sync') },
|
||||
{ id: 'SettingHotKey', title: t('setting__hot_key') },
|
||||
{ id: 'SettingNetwork', title: t('setting__network') },
|
||||
{ id: 'SettingOdc', title: t('setting__odc') },
|
||||
{ id: 'SettingBackup', title: t('setting__backup') },
|
||||
{ id: 'SettingOther', title: t('setting__other') },
|
||||
{ id: 'SettingUpdate', title: t('setting__update') },
|
||||
{ id: 'SettingAbout', title: t('setting__about') },
|
||||
]
|
||||
})
|
||||
|
||||
const avtiveComponentName = ref(route.query.name && tocList.value.some(t => t.id == route.query.name)
|
||||
? route.query.name
|
||||
: tocList.value[0].id)
|
||||
|
||||
const toggleTab = id => {
|
||||
avtiveComponentName.value = id
|
||||
nextTick(() => {
|
||||
dom_content_ref.value?.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
tocList,
|
||||
avtiveComponentName,
|
||||
dom_content_ref,
|
||||
toggleTab,
|
||||
}
|
||||
},
|
||||
// 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: var(--color-list-header-border-bottom);
|
||||
}
|
||||
|
||||
.toc {
|
||||
flex: 0 0 16%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.tocH2 {
|
||||
line-height: 1.5;
|
||||
.mixin-ellipsis-1;
|
||||
font-size: 13px;
|
||||
color: var(--color-font);
|
||||
padding: 8px 10px;
|
||||
transition: @transition-fast;
|
||||
transition-property: background-color, color;
|
||||
|
||||
&:not(.active) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: var(--color-button-background-hover);
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
// .tocH3 {
|
||||
// font-size: 13px;
|
||||
// opacity: .8;
|
||||
// }
|
||||
|
||||
// .tocList {
|
||||
// .tocList {
|
||||
// // padding-left: 15px;
|
||||
// }
|
||||
// }
|
||||
// .tocSubListItem {
|
||||
// padding-top: 10px;
|
||||
// }
|
||||
|
||||
.setting {
|
||||
padding: 0 15px 15px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
:global {
|
||||
dt {
|
||||
border-left: 5px solid var(--color-primary-alpha-700);
|
||||
padding: 3px 7px;
|
||||
margin: 15px 0;
|
||||
|
||||
+ 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-btn {
|
||||
padding: 0;
|
||||
margin: 0 0.4em;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--color-button-font);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
.help-icon {
|
||||
margin: 0 0.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .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; }
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user