chore(release): v1.1.0 unify DI(strategy), AI equivalence service, config domain refactor, docker alias; health checks and schedules

admin-vben/apps/web-antd/src/views/diy/design/components/edit-text.vue

@@ -0,0 +1,158 @@
+<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>