新增动态主题“道法自然”
This commit is contained in:
lyswhut
@@ -4,9 +4,15 @@ dd
|
||||
h3#basic_theme {{$t('setting__basic_theme')}}
|
||||
div
|
||||
ul(:class="$style.theme")
|
||||
li(v-for="theme in themes.list" :key="theme.id" :tips="$t('theme_' + theme.className)" @click="currentStting.themeId = theme.id" :class="[theme.className, {[$style.active]: themes.active == theme.id}]")
|
||||
span
|
||||
li(v-for="theme in themes.list" :key="theme.id" :tips="$t('theme_' + theme.className)" @click="currentStting.theme.id = theme.id" :class="[theme.className, {[$style.active]: themes.active == theme.id}]")
|
||||
div(:class="$style.bg")
|
||||
label {{$t('theme_' + theme.className)}}
|
||||
li(:tips="$t('theme_auto_tip')" @click="handleSetThemeAuto" @contextmenu="isShowThemeSelectorModal = true" :class="[$style.auto, themeClassName, {[$style.active]: themes.active == 'auto'}]")
|
||||
div(:class="$style.bg")
|
||||
div(:class="$style.bgContent")
|
||||
div(:class="[$style.light, themes.lightTheme.className]")
|
||||
div(:class="[$style.dark, themes.darkTheme.className]")
|
||||
label {{$t('theme_auto')}}
|
||||
|
||||
dd
|
||||
div
|
||||
@@ -55,12 +61,13 @@ dd
|
||||
div
|
||||
base-selection.gap-teft(:list="fontList" v-model="currentStting.font" item-key="id" item-name="label")
|
||||
|
||||
ThemeSelectorModal(v-model="isShowThemeSelectorModal")
|
||||
play-timeout-modal(v-model="isShowPlayTimeoutModal")
|
||||
user-api-modal(v-model="isShowUserApiModal")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed, ref, useI18n, watch } from '@renderer/utils/vueTools'
|
||||
import { computed, ref, useI18n, watch, useRefGetter } from '@renderer/utils/vueTools'
|
||||
import { themes as themeList, windowSizeList, apiSource, userApi, isFullscreen } from '@renderer/core/share'
|
||||
import { langList } from '@/lang'
|
||||
import { currentStting } from '../setting'
|
||||
@@ -68,7 +75,9 @@ import { setWindowSize } from '@renderer/utils'
|
||||
import apiSourceInfo from '@renderer/utils/music/api-source-info'
|
||||
import { useTimeout } from '@renderer/utils/timeoutStop'
|
||||
import { getSystemFonts } from '@renderer/utils/tools'
|
||||
import { dialog } from '@renderer/plugins/Dialog'
|
||||
|
||||
import ThemeSelectorModal from './ThemeSelectorModal'
|
||||
import PlayTimeoutModal from './PlayTimeoutModal'
|
||||
import UserApiModal from './UserApiModal'
|
||||
|
||||
@@ -76,19 +85,34 @@ import UserApiModal from './UserApiModal'
|
||||
export default {
|
||||
name: 'SettingBasic',
|
||||
components: {
|
||||
ThemeSelectorModal,
|
||||
PlayTimeoutModal,
|
||||
UserApiModal,
|
||||
},
|
||||
setup() {
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
|
||||
const themeClassName = useRefGetter('theme')
|
||||
const themes = computed(() => {
|
||||
return {
|
||||
active: currentStting.value.themeId,
|
||||
active: currentStting.value.theme.id,
|
||||
lightTheme: themeList.find(t => t.id == currentStting.value.theme.lightId) ?? themeList[0],
|
||||
darkTheme: themeList.find(t => t.id == currentStting.value.theme.darkId) ?? themeList[0],
|
||||
list: themeList,
|
||||
}
|
||||
})
|
||||
const isShowThemeSelectorModal = ref(false)
|
||||
const handleSetThemeAuto = () => {
|
||||
if (currentStting.value.theme.id == 'auto') return
|
||||
currentStting.value.theme.id = 'auto'
|
||||
if (window.localStorage.getItem('theme-auto-tip') != 'true') {
|
||||
window.localStorage.setItem('theme-auto-tip', 'true')
|
||||
dialog({
|
||||
message: t('setting__basic_theme_auto_tip'),
|
||||
confirmButtonText: t('ok'),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => currentStting.value.apiSource, visible => {
|
||||
apiSource.value = visible
|
||||
@@ -161,6 +185,9 @@ export default {
|
||||
return {
|
||||
currentStting,
|
||||
themes,
|
||||
themeClassName,
|
||||
isShowThemeSelectorModal,
|
||||
handleSetThemeAuto,
|
||||
isShowPlayTimeoutModal,
|
||||
timeLabel,
|
||||
apiSources,
|
||||
@@ -200,7 +227,7 @@ export default {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
.bg {
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -230,7 +257,7 @@ export default {
|
||||
|
||||
each(@themes, {
|
||||
&:global(.@{value}) {
|
||||
span {
|
||||
.bg {
|
||||
&:after {
|
||||
background-color: ~'@{color-@{value}-theme}';
|
||||
background-image: ~'@{color-@{value}-theme-bgimg}';
|
||||
@@ -238,6 +265,68 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
&.auto {
|
||||
>.bg {
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
.bgContent {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.light, .dark {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&:after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
.light {
|
||||
&:after {
|
||||
clip-path: polygon(0 0, 100% 0, 0 100%);
|
||||
}
|
||||
each(@themes, {
|
||||
&:global(.@{value}) {
|
||||
svg {
|
||||
fill: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
&:after {
|
||||
background-color: ~'@{color-@{value}-theme}';
|
||||
background-image: ~'@{color-@{value}-theme-bgimg}';
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
.dark {
|
||||
&:after {
|
||||
clip-path: polygon(0 100%, 100% 0, 100% 100%);
|
||||
}
|
||||
each(@themes, {
|
||||
&:global(.@{value}) {
|
||||
svg {
|
||||
fill: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
&:after {
|
||||
background-color: ~'@{color-@{value}-theme}';
|
||||
background-image: ~'@{color-@{value}-theme-bgimg}';
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -248,7 +337,7 @@ each(@themes, {
|
||||
&.active {
|
||||
&:global(.@{value}) {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
span {
|
||||
.bg {
|
||||
border-color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
<template lang="pug">
|
||||
material-modal(:show="modelValue" bg-close @close="$emit('update:modelValue', false)" teleport="#view")
|
||||
main(:class="$style.main")
|
||||
h2 {{$t('theme_selector_modal__title')}}
|
||||
div.scroll(:class="$style.content")
|
||||
div
|
||||
h3 {{$t('theme_selector_modal__light_title')}}
|
||||
ul(:class="$style.theme")
|
||||
li(v-for="theme in themeLights" :key="theme.id" :tips="$t('theme_' + theme.className)" @click="currentStting.theme.lightId = theme.id" :class="[theme.className, {[$style.active]: lightId == theme.id}]")
|
||||
span
|
||||
label {{$t('theme_' + theme.className)}}
|
||||
div
|
||||
h3 {{$t('theme_selector_modal__dark_title')}}
|
||||
ul(:class="$style.theme")
|
||||
li(v-for="theme in themeDarks" :key="theme.id" :tips="$t('theme_' + theme.className)" @click="currentStting.theme.darkId = theme.id" :class="[theme.className, {[$style.active]: darkId == theme.id}]")
|
||||
span
|
||||
label {{$t('theme_' + theme.className)}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed } from '@renderer/utils/vueTools'
|
||||
import { themeLights, themeDarks } from '@renderer/core/share'
|
||||
import { currentStting } from '../setting'
|
||||
|
||||
export default {
|
||||
name: 'ThemeSelectorModal',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const lightId = computed(() => {
|
||||
return currentStting.value.theme.lightId
|
||||
})
|
||||
const darkId = computed(() => {
|
||||
return currentStting.value.theme.darkId
|
||||
})
|
||||
return {
|
||||
currentStting,
|
||||
themeLights,
|
||||
themeDarks,
|
||||
lightId,
|
||||
darkId,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
.main {
|
||||
// padding: 15px;
|
||||
// max-width: 400px;
|
||||
min-width: 300px;
|
||||
min-height: 0;
|
||||
// max-height: 100%;
|
||||
// overflow: hidden;
|
||||
h2 {
|
||||
flex: none;
|
||||
font-size: 16px;
|
||||
color: @color-theme_2-font;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
color: @color-theme_2-font;
|
||||
line-height: 1.3;
|
||||
padding-bottom: 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
flex: auto;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
gap: 15px;
|
||||
}
|
||||
.theme {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
// padding: 0 15px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
// color: @color-theme;
|
||||
margin-right: 30px;
|
||||
transition: color .3s ease;
|
||||
margin-bottom: 15px;
|
||||
width: 56px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-bottom: 5px;
|
||||
border: 2px solid transparent;
|
||||
padding: 2px;
|
||||
transition: border-color .3s ease;
|
||||
border-radius: 5px;
|
||||
&:after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: @radius-border;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 1.2em;
|
||||
font-size: 14px;
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
&:global(.@{value}) {
|
||||
span {
|
||||
&:after {
|
||||
background-color: ~'@{color-@{value}-theme}';
|
||||
background-image: ~'@{color-@{value}-theme-bgimg}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
.theme {
|
||||
li {
|
||||
&:global(.@{value}) {
|
||||
&.active {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
span {
|
||||
border-color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
@@ -86,7 +86,11 @@ export const currentStting = ref({
|
||||
},
|
||||
windowSizeId: 1,
|
||||
langId: 'cns',
|
||||
themeId: 0,
|
||||
theme: {
|
||||
id: 0,
|
||||
lightId: 0,
|
||||
darkId: 13,
|
||||
},
|
||||
sourceId: 0,
|
||||
font: '',
|
||||
isShowAnimation: true,
|
||||
|
||||
Reference in New Issue
Block a user