109 lines
2.7 KiB
Vue
109 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
import ColorPalette from './ColorPalette.vue';
|
|
import Scheme from './Scheme.vue';
|
|
import { ThemeAssemble } from '@/stores/helper/themes';
|
|
import { useSystemInfoStore } from '@/stores/modules/system';
|
|
import type { THEME_MODEL } from '@/enums/UI';
|
|
|
|
const { changeThemeKey, changeThemeModel } = useSystemInfoStore();
|
|
|
|
const themeColor = computed(() => {
|
|
return useSystemInfoStore().theme;
|
|
});
|
|
|
|
const themeKey = computed(() => {
|
|
return useSystemInfoStore().getThemeKey;
|
|
});
|
|
|
|
const themeModel = computed(() => {
|
|
return useSystemInfoStore().getThemeModel;
|
|
});
|
|
|
|
type ThemeModelKey = keyof typeof THEME_MODEL;
|
|
|
|
const themeModelList: {
|
|
key: ThemeModelKey
|
|
value: ThemeModelKey
|
|
}[] = [
|
|
{
|
|
key: 'LIGHT',
|
|
value: 'LIGHT',
|
|
},
|
|
{
|
|
key: 'DARK',
|
|
value: 'DARK',
|
|
},
|
|
];
|
|
|
|
onMounted(() => {
|
|
//
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view class="bg-background flex-1">
|
|
<div class="py-[32rpx] b flex flex-col b-[#123]">
|
|
<h2 class="text-onBackground">
|
|
click it to change themeModel
|
|
</h2>
|
|
|
|
<div class="flex flex-row my-3">
|
|
<div
|
|
v-for="(item, index) in themeModelList"
|
|
:key="index"
|
|
class="flex-1 p-4 flex justify-center items-center"
|
|
:class="{
|
|
'bg-common-black text-common-white': item.key === 'DARK',
|
|
'bg-common-white text-common-black': item.key === 'LIGHT',
|
|
}"
|
|
@click="changeThemeModel({
|
|
model: item.key,
|
|
})"
|
|
>
|
|
{{ item.value }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="m-3 text-onBackground">
|
|
now : {{ themeModel }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="py-[32rpx] b flex flex-col b-[#123]">
|
|
<h2 class="text-onBackground">
|
|
click it to change themeKey
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-4 gap-4">
|
|
<div v-for="(v, k) in ThemeAssemble" :key="k" class="flex flex-col justify-center items-center" @click="changeThemeKey({ key: k })">
|
|
<div class="w-[100rpx] h-[100rpx] bg-[#123] rounded-[8rpx]" :style="{ backgroundColor: v.primary }" />
|
|
<h4 class="text-onBackground">
|
|
{{ k }}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="m-3 text-onBackground">
|
|
now : {{ themeKey }}
|
|
</h4>
|
|
</div>
|
|
|
|
<!-- 递归渲染色卡 -->
|
|
<ColorPalette :palette="themeColor.palette" />
|
|
|
|
<!-- lightScheme -->
|
|
<span class="text-onBackground">lightScheme</span>
|
|
<Scheme :scheme="themeColor.lightScheme" />
|
|
|
|
<!-- darkScheme -->
|
|
<span class="text-onBackground">darkScheme</span>
|
|
<Scheme :scheme="themeColor.darkScheme" />
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
// page {
|
|
// --at-apply: uno: bg-background;
|
|
// }
|
|
</style>
|