158 lines
4.0 KiB
Vue
158 lines
4.0 KiB
Vue
<template>
|
|
<div class="space-y-4">
|
|
<!-- Content Tab -->
|
|
<div v-if="editTab === 'content'" class="space-y-4">
|
|
<div class="border-t-2 border-gray-100 pt-4 first:border-t-0 first:pt-0">
|
|
<h3 class="mb-3 font-medium">{{ $t('system.diy.content') }}</h3>
|
|
|
|
<a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
|
<!-- Text Content -->
|
|
<a-form-item :label="$t('system.diy.textContent')">
|
|
<a-textarea
|
|
v-model:value="localValue.text"
|
|
:placeholder="$t('system.diy.textContentPlaceholder')"
|
|
:rows="3"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<!-- Font Size -->
|
|
<a-form-item :label="$t('system.diy.fontSize')">
|
|
<a-slider
|
|
v-model:value="localValue.fontSize"
|
|
:min="12"
|
|
:max="48"
|
|
:step="1"
|
|
:marks="{ 12: '12px', 24: '24px', 36: '36px', 48: '48px' }"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<!-- Font Weight -->
|
|
<a-form-item :label="$t('system.diy.fontWeight')">
|
|
<a-radio-group v-model:value="localValue.fontWeight">
|
|
<a-radio value="normal">{{ $t('system.diy.normal') }}</a-radio>
|
|
<a-radio value="bold">{{ $t('system.diy.bold') }}</a-radio>
|
|
<a-radio value="lighter">{{ $t('system.diy.lighter') }}</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
|
|
<!-- Text Alignment -->
|
|
<a-form-item :label="$t('system.diy.textAlign')">
|
|
<a-radio-group v-model:value="localValue.textAlign">
|
|
<a-radio value="left">{{ $t('system.diy.alignLeft') }}</a-radio>
|
|
<a-radio value="center">{{ $t('system.diy.alignCenter') }}</a-radio>
|
|
<a-radio value="right">{{ $t('system.diy.alignRight') }}</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
|
|
<!-- Line Height -->
|
|
<a-form-item :label="$t('system.diy.lineHeight')">
|
|
<a-slider
|
|
v-model:value="localValue.lineHeight"
|
|
:min="1"
|
|
:max="3"
|
|
:step="0.1"
|
|
:marks="{ 1: '1x', 1.5: '1.5x', 2: '2x', 2.5: '2.5x', 3: '3x' }"
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Style Tab -->
|
|
<div v-if="editTab === 'style'" class="space-y-4">
|
|
<ComponentStyleEditor
|
|
:value="localValue"
|
|
@update:value="updateLocalValue"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import { cloneDeep } from 'lodash-es';
|
|
|
|
import ComponentStyleEditor from './component-style-editor.vue';
|
|
|
|
interface Props {
|
|
value: any;
|
|
editTab: 'content' | 'style';
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:value', value: any): void;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const localValue = ref<any>({
|
|
text: '',
|
|
fontSize: 16,
|
|
fontWeight: 'normal',
|
|
textAlign: 'left',
|
|
lineHeight: 1.5,
|
|
textColor: '#333333',
|
|
margin: {
|
|
top: 0,
|
|
bottom: 10,
|
|
both: 0,
|
|
},
|
|
topRounded: 0,
|
|
bottomRounded: 0,
|
|
componentStartBgColor: '',
|
|
componentEndBgColor: '',
|
|
componentGradientAngle: 'to bottom',
|
|
componentBgUrl: '',
|
|
componentBgAlpha: 2,
|
|
isHidden: false,
|
|
});
|
|
|
|
// Initialize local value
|
|
const initLocalValue = () => {
|
|
if (props.value) {
|
|
localValue.value = {
|
|
...localValue.value,
|
|
...props.value,
|
|
};
|
|
}
|
|
};
|
|
|
|
// Watch for value changes
|
|
watch(
|
|
() => props.value,
|
|
() => {
|
|
initLocalValue();
|
|
},
|
|
{ immediate: true, deep: true }
|
|
);
|
|
|
|
// Watch for local changes
|
|
watch(
|
|
localValue,
|
|
(newValue) => {
|
|
emit('update:value', newValue);
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
const updateLocalValue = (newValue: any) => {
|
|
localValue.value = {
|
|
...localValue.value,
|
|
...newValue,
|
|
};
|
|
};
|
|
|
|
// Initialize
|
|
initLocalValue();
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.ant-form-item) {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
:deep(.ant-form-item:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
</style> |