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.
 
 
 
 
data-driven-design/src/engineer/components/ConfigCurrentView.vue

33 lines
945 B

<script lang="ts" setup>
import type { View } from '../types';
import { computed } from 'vue';
import { useContext } from '../context';
import ColorConfig from '../configs/ColorConfig.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('@@theme.')
}) as Array<[string, string]>
})
</script>
<template>
{{ ctx.activeViewId }}
<hr/>
<template v-for="([key, value]) in styles" :key="key">
<ColorConfig v-if="key === 'color'" :field="value.slice(2)" label="背景颜色" />
<div v-else>{{ key }}:{{ value }}</div>
</template>
<pre><code>{{ view }}</code></pre>
</template>