You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.3 KiB
47 lines
1.3 KiB
<script lang="ts" setup>
|
|
import type { View } from '../types';
|
|
import { computed } from 'vue';
|
|
import { useContext } from '../context';
|
|
import ColorConfig from '../configs/ColorConfig.vue';
|
|
import NumberStyle from '../styles/NumberStyle.vue'
|
|
|
|
defineOptions({
|
|
name: 'ConfigCurrentView',
|
|
})
|
|
|
|
const ctx = useContext()
|
|
const view = computed<View | undefined>(() => {
|
|
return ctx.activeViewId ? ctx.views[ctx.activeViewId] : undefined
|
|
})
|
|
const styles = computed(() => {
|
|
if (!view.value?.theme) {
|
|
return undefined
|
|
}
|
|
return Object.entries(view.value.theme).filter(([, value]) => {
|
|
return typeof value === 'string' && value.startsWith('@@')
|
|
}) as Array<[string, string]>
|
|
})
|
|
const label = computed(()=>{
|
|
if(!view.value?.title) {
|
|
return undefined
|
|
}
|
|
return view.value.title
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
{{ ctx.activeViewId }}
|
|
|
|
<hr/>
|
|
<fieldset>
|
|
<legend>{{ label }}设置</legend>
|
|
<template v-for="([key, value]) in styles" :key="key">
|
|
<ColorConfig v-if="key === 'color'" :field="value.slice(2)" label="背景颜色" />
|
|
<NumberStyle v-if="key === 'radius'" :field="value.slice(2)" label="圆角设置" />
|
|
<!-- <div v-else>{{ key }}:{{ value }}</div>-->
|
|
</template>
|
|
</fieldset>
|
|
<!--<pre><code>{{ view }}</code></pre>-->
|
|
</template>
|
|
|