492 lines
12 KiB
Vue
492 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
import { useSettingsStore } from '../stores/settings'
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
|
const primaryColor = ref(settingsStore.theme.primaryColor)
|
|
const backgroundColor = ref(settingsStore.theme.backgroundColor)
|
|
const blurAmount = ref(settingsStore.theme.blurAmount)
|
|
const videoBrightness = ref(settingsStore.theme.videoBrightness)
|
|
|
|
watch(() => settingsStore.theme, (newTheme) => {
|
|
primaryColor.value = newTheme.primaryColor
|
|
backgroundColor.value = newTheme.backgroundColor
|
|
blurAmount.value = newTheme.blurAmount
|
|
videoBrightness.value = newTheme.videoBrightness
|
|
}, { deep: true })
|
|
|
|
const presetColors = [
|
|
{ name: '蓝色', value: '#007AFF' },
|
|
{ name: '绿色', value: '#34C759' },
|
|
{ name: '橙色', value: '#FF9500' },
|
|
{ name: '红色', value: '#FF3B30' },
|
|
{ name: '紫色', value: '#AF52DE' },
|
|
{ name: '粉色', value: '#FF2D55' }
|
|
]
|
|
|
|
const backgroundPresets = [
|
|
{ name: '深色', value: 'rgba(30, 30, 30, 0.7)' },
|
|
{ name: '灰色', value: 'rgba(100, 100, 100, 0.7)' },
|
|
{ name: '深蓝', value: 'rgba(20, 40, 80, 0.7)' }
|
|
]
|
|
|
|
const videoList = computed(() => settingsStore.videoList)
|
|
const currentVideo = computed(() => settingsStore.currentVideo)
|
|
|
|
const activeSection = ref('video')
|
|
|
|
const sections = [
|
|
{ id: 'video', name: '视频背景', icon: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z' },
|
|
{ id: 'brightness', name: '视频亮度', icon: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z' },
|
|
{ id: 'theme', name: '主题颜色', icon: 'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01' },
|
|
{ id: 'background', name: '窗口背景', icon: 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z' },
|
|
{ id: 'blur', name: '模糊程度', icon: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z' }
|
|
]
|
|
|
|
function selectVideo(video: typeof currentVideo.value) {
|
|
if (video) {
|
|
settingsStore.setCurrentVideo(video)
|
|
}
|
|
}
|
|
|
|
function updatePrimaryColor(color: string) {
|
|
primaryColor.value = color
|
|
settingsStore.updateTheme({ primaryColor: color })
|
|
}
|
|
|
|
function updateBackground(bg: string) {
|
|
backgroundColor.value = bg
|
|
settingsStore.updateTheme({ backgroundColor: bg })
|
|
}
|
|
|
|
function updateBlur(amount: number) {
|
|
blurAmount.value = amount
|
|
settingsStore.updateTheme({ blurAmount: amount })
|
|
}
|
|
|
|
function updateBrightness(value: number) {
|
|
videoBrightness.value = value
|
|
settingsStore.updateTheme({ videoBrightness: value })
|
|
}
|
|
|
|
function resetSettings() {
|
|
settingsStore.resetTheme()
|
|
primaryColor.value = settingsStore.theme.primaryColor
|
|
backgroundColor.value = settingsStore.theme.backgroundColor
|
|
blurAmount.value = settingsStore.theme.blurAmount
|
|
videoBrightness.value = settingsStore.theme.videoBrightness
|
|
}
|
|
|
|
function getVideoThumb(thumb: string) {
|
|
return thumb
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="settings">
|
|
<div class="settings-sidebar">
|
|
<div class="sidebar-header">
|
|
<h3>设置</h3>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<button
|
|
v-for="section in sections"
|
|
:key="section.id"
|
|
class="nav-item"
|
|
:class="{ 'nav-item-active': activeSection === section.id }"
|
|
@click="activeSection = section.id"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path :d="section.icon" />
|
|
</svg>
|
|
<span>{{ section.name }}</span>
|
|
</button>
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<button class="reset-btn" @click="resetSettings">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
<span>恢复默认</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-content">
|
|
<div v-if="activeSection === 'video'" class="content-section">
|
|
<h3 class="section-title">视频背景</h3>
|
|
<p class="section-desc">选择喜欢的视频作为背景</p>
|
|
<div class="video-list">
|
|
<div
|
|
v-for="video in videoList"
|
|
:key="video.id"
|
|
class="video-item"
|
|
:class="{ 'video-item-active': currentVideo?.id === video.id }"
|
|
@click="selectVideo(video)"
|
|
>
|
|
<img
|
|
v-if="video.thumb"
|
|
:src="getVideoThumb(video.thumb)"
|
|
:alt="video.name"
|
|
class="video-thumb"
|
|
/>
|
|
<div class="video-name">{{ video.name.replace('.mp4', '') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="activeSection === 'brightness'" class="content-section">
|
|
<h3 class="section-title">视频亮度</h3>
|
|
<p class="section-desc">调整视频遮罩亮度</p>
|
|
<div class="blur-control">
|
|
<div class="blur-preview" :style="{ background: 'rgba(0, 0, 0, ' + videoBrightness + ')' }">
|
|
预览效果
|
|
</div>
|
|
<div class="slider-container">
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
:value="videoBrightness"
|
|
@input="updateBrightness(Number(($event.target as HTMLInputElement).value))"
|
|
class="blur-slider"
|
|
/>
|
|
<span class="slider-value">{{ Math.round(videoBrightness * 100) }}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="activeSection === 'theme'" class="content-section">
|
|
<h3 class="section-title">主题颜色</h3>
|
|
<p class="section-desc">自定义主题强调色</p>
|
|
<div class="color-grid">
|
|
<button
|
|
v-for="color in presetColors"
|
|
:key="color.value"
|
|
class="color-btn"
|
|
:class="{ 'color-btn-active': primaryColor === color.value }"
|
|
:style="{ backgroundColor: color.value }"
|
|
@click="updatePrimaryColor(color.value)"
|
|
:title="color.name"
|
|
>
|
|
<svg v-if="primaryColor === color.value" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16" height="16">
|
|
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="activeSection === 'background'" class="content-section">
|
|
<h3 class="section-title">窗口背景</h3>
|
|
<p class="section-desc">选择窗口背景样式</p>
|
|
<div class="bg-grid">
|
|
<button
|
|
v-for="bg in backgroundPresets"
|
|
:key="bg.value"
|
|
class="bg-btn"
|
|
:class="{ 'bg-btn-active': backgroundColor === bg.value }"
|
|
:style="{ backgroundColor: bg.value }"
|
|
@click="updateBackground(bg.value)"
|
|
>
|
|
{{ bg.name }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="activeSection === 'blur'" class="content-section">
|
|
<h3 class="section-title">模糊程度</h3>
|
|
<p class="section-desc">调整背景模糊效果</p>
|
|
<div class="blur-control">
|
|
<div class="blur-preview" :style="{ backdropFilter: `blur(${blurAmount}px)` }">
|
|
预览效果
|
|
</div>
|
|
<div class="slider-container">
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="40"
|
|
:value="blurAmount"
|
|
@input="updateBlur(Number(($event.target as HTMLInputElement).value))"
|
|
class="blur-slider"
|
|
/>
|
|
<span class="slider-value">{{ blurAmount }}px</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.settings {
|
|
display: flex;
|
|
height: 100%;
|
|
color: white;
|
|
}
|
|
|
|
.settings-sidebar {
|
|
width: 180px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 20px 16px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.sidebar-header h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
flex: 1;
|
|
padding: 12px 8px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.nav-item {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border: none;
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
}
|
|
|
|
.nav-item-active {
|
|
background: v-bind('settingsStore.theme.primaryColor');
|
|
color: white;
|
|
}
|
|
|
|
.nav-item svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 12px 8px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.reset-btn {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.reset-btn:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
}
|
|
|
|
.reset-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.settings-content {
|
|
flex: 1;
|
|
padding: 24px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.content-section {
|
|
animation: fadeIn 0.2s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: 13px;
|
|
opacity: 0.7;
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
.video-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.video-item {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
transition: all 0.2s ease;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.video-item:hover {
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.video-item-active {
|
|
border-color: v-bind('settingsStore.theme.primaryColor');
|
|
}
|
|
|
|
.video-thumb {
|
|
width: 100%;
|
|
height: 80px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.video-name {
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.color-grid {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.color-btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
border: 3px solid transparent;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.color-btn:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.color-btn-active {
|
|
border-color: white;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.bg-grid {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.bg-btn {
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
border: 2px solid transparent;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
color: white;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.bg-btn:hover {
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.bg-btn-active {
|
|
border-color: v-bind('settingsStore.theme.primaryColor');
|
|
}
|
|
|
|
.blur-control {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.blur-preview {
|
|
padding: 40px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.slider-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.blur-slider {
|
|
flex: 1;
|
|
height: 6px;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 3px;
|
|
outline: none;
|
|
}
|
|
|
|
.blur-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: v-bind('settingsStore.theme.primaryColor');
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.slider-value {
|
|
font-size: 14px;
|
|
opacity: 0.8;
|
|
min-width: 50px;
|
|
text-align: right;
|
|
}
|
|
</style>
|