ydy0615
01b132266a
Add a file tree UI and corresponding composable for local file management. Introduce TTS menu and player components for voice synthesis integration. Add new EditorView and DocsView routes and update SettingsPanel view switching. Enhance Mermaid plugin with improved styling and action buttons.
63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useSettingsStore } from './stores/settings'
|
|
import SettingsPanel from './components/SettingsPanel.vue'
|
|
|
|
const settings = useSettingsStore()
|
|
|
|
const appStyle = computed(() => {
|
|
const style = {}
|
|
if (settings.backgroundType === 'warm') {
|
|
style.background = '#fdfaf3ff'
|
|
style.color = '#5d4037'
|
|
} else if (settings.backgroundType === 'reading') {
|
|
style.background = '#f5f0e1'
|
|
style.color = '#333333'
|
|
} else if (settings.backgroundType === 'default') {
|
|
style.background = 'var(--app-bg)'
|
|
style.color = 'var(--app-text)'
|
|
} else if (settings.backgroundType === 'image') {
|
|
style.background = settings.theme === 'dark' ? '#000000' : '#ffffff'
|
|
}
|
|
return style
|
|
})
|
|
|
|
const backgroundStyle = computed(() => {
|
|
if (settings.backgroundType === 'image' && settings.backgroundImage) {
|
|
return {
|
|
backgroundImage: `url(${settings.backgroundImage})`,
|
|
opacity: settings.backgroundOpacity,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
position: 'absolute',
|
|
inset: 0,
|
|
zIndex: 0,
|
|
pointerEvents: 'none'
|
|
}
|
|
}
|
|
return {}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-shell" :style="appStyle">
|
|
<div v-if="settings.backgroundType === 'image'" class="app-bg-layer" :style="backgroundStyle"></div>
|
|
|
|
<router-view />
|
|
|
|
<SettingsPanel />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-shell {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: var(--app-bg);
|
|
color: var(--app-text);
|
|
transition: background 0.3s, color 0.3s;
|
|
isolation: isolate;
|
|
}
|
|
</style>
|