46 lines
996 B
Vue
46 lines
996 B
Vue
<template>
|
|
<div class="setting-container">
|
|
<div class="setting-item">
|
|
<span>主题色</span>
|
|
<el-color-picker v-model="appStore.themeColor"
|
|
@change="changeThemeColorEvent"/>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<span>模式</span>
|
|
<el-button circle @click="appStore.toggleDark" class="theme-button">
|
|
{{ appStore.isDark ? '🌙' : '☀️' }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useAppStore } from '@/store/app.ts'
|
|
import { onMounted } from 'vue'
|
|
const appStore = useAppStore()
|
|
|
|
onMounted(() => {
|
|
appStore.themeColor = appStore.getThemeColor()
|
|
})
|
|
|
|
const changeThemeColorEvent = (value: string) => {
|
|
appStore.setThemeColor(value)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.setting-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
.setting-item {
|
|
display: grid;
|
|
grid-template-columns: 50px 1fr;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|