添加文本对齐和文字方向设置，支持换行显示

src/widgets/text/Config.vue

@@ -17,7 +17,7 @@
       <el-divider>基本设置</el-divider>
 
       <el-form-item label="文本内容">
-        <el-input v-model="localConfig.text" type="textarea" :rows="3" placeholder="输入要显示的文本" />
+        <el-input v-model="localConfig.text" type="textarea" :rows="3" placeholder="输入要显示的文本（支持换行）" />
       </el-form-item>
       
       <el-divider>文本样式</el-divider>
@@ -45,6 +45,24 @@
           <el-option label="细体" value="lighter" />
         </el-select>
       </el-form-item>
+
+      <el-divider>布局设置</el-divider>
+      
+      <el-form-item label="文本对齐">
+        <el-select v-model="localConfig.textAlign">
+          <el-option label="左对齐" value="left" />
+          <el-option label="居中对齐" value="center" />
+          <el-option label="右对齐" value="right" />
+          <el-option label="两端对齐" value="justify" />
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="文字方向">
+        <el-select v-model="localConfig.writingMode">
+          <el-option label="水平显示" value="horizontal" />
+          <el-option label="垂直显示" value="vertical" />
+        </el-select>
+      </el-form-item>
       
       <el-divider>颜色设置</el-divider>
       
@@ -97,7 +115,7 @@ const props = withDefaults(defineProps<{
   config: Partial<TextConfig>;
 }>(), {
   config: () => ({
-    text: 'Sample Text',
+    text: '示例文本\n支持换行显示',
     color: '#ffffff',
     fontSize: 32,
     fontWeight: 'normal',
@@ -106,7 +124,9 @@ const props = withDefaults(defineProps<{
     shadowColor: 'rgba(0,0,0,0.5)',
     shadowBlur: 4,
     useGradient: false,
-    gradientColors: ['#ff0000', '#0000ff']
+    gradientColors: ['#ff0000', '#0000ff'],
+    textAlign: 'left',
+    writingMode: 'horizontal'
   })
 });
 
@@ -117,7 +137,7 @@ const emit = defineEmits<{
 
 // Local config for two-way binding
 const localConfig = ref<TextConfig>({
-  text: 'Sample Text',
+  text: '示例文本\n支持换行显示',
   color: '#ffffff',
   fontSize: 32,
   fontWeight: 'normal',
@@ -126,7 +146,9 @@ const localConfig = ref<TextConfig>({
   shadowColor: 'rgba(0,0,0,0.5)',
   shadowBlur: 4,
   useGradient: false,
-  gradientColors: ['#ff0000', '#0000ff']
+  gradientColors: ['#ff0000', '#0000ff'],
+  textAlign: 'left',
+  writingMode: 'horizontal'
 });
 
 // Sync with parent config on mount
@@ -146,7 +168,9 @@ const presets = {
     gradientColors: ['#3498db', '#9b59b6'],
     textShadow: true,
     shadowColor: 'rgba(0, 0, 0, 0.3)',
-    shadowBlur: 10
+    shadowBlur: 10,
+    textAlign: 'center' as const,
+    writingMode: 'horizontal' as const
   },
   neon: {
     text: localConfig.value.text,
@@ -157,7 +181,9 @@ const presets = {
     useGradient: false,
     textShadow: true,
     shadowColor: 'rgba(57, 255, 20, 0.8)',
-    shadowBlur: 15
+    shadowBlur: 15,
+    textAlign: 'center' as const,
+    writingMode: 'horizontal' as const
   },
   retro: {
     text: localConfig.value.text,
@@ -168,7 +194,9 @@ const presets = {
     gradientColors: ['#f39c12', '#e74c3c'],
     textShadow: true,
     shadowColor: 'rgba(0, 0, 0, 0.6)',
-    shadowBlur: 6
+    shadowBlur: 6,
+    textAlign: 'left' as const,
+    writingMode: 'horizontal' as const
   },
   minimal: {
     text: localConfig.value.text,
@@ -177,7 +205,9 @@ const presets = {
     fontWeight: 'lighter',
     color: '#ffffff',
     useGradient: false,
-    textShadow: false
+    textShadow: false,
+    textAlign: 'left' as const,
+    writingMode: 'horizontal' as const
   }
 };
 

src/widgets/text/Widget.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="text-widget" :style="textStyle">
-    {{ config.text }}
+    <div class="text-content" v-html="formattedText"></div>
   </div>
 </template>
 
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<{
   config: Partial<TextConfig>;
 }>(), {
   config: () => ({
-    text: 'Sample Text',
+    text: '示例文本\n支持换行显示',
     color: '#ffffff',
     fontSize: 32,
     fontWeight: 'normal',
@@ -22,17 +22,35 @@ const props = withDefaults(defineProps<{
     shadowColor: 'rgba(0,0,0,0.5)',
     shadowBlur: 4,
     useGradient: false,
-    gradientColors: ['#ff0000', '#0000ff']
+    gradientColors: ['#ff0000', '#0000ff'],
+    textAlign: 'left',
+    writingMode: 'horizontal'
   })
 });
 
+// 格式化文本内容，处理换行
+const formattedText = computed(() => {
+  const text = props.config.text || '示例文本\n支持换行显示';
+  // 将换行符转换为 <br> 标签
+  return text.replace(/\n/g, '<br>');
+});
+
 // Computed styles for the text
 const textStyle = computed(() => {
   const style: Record<string, string> = {
     fontSize: `${props.config.fontSize || 32}px`,
     fontFamily: props.config.fontFamily || 'Arial',
-    fontWeight: props.config.fontWeight || 'normal'
+    fontWeight: props.config.fontWeight || 'normal',
+    textAlign: props.config.textAlign || 'left'
   };
+
+  // 根据文字显示方向设置样式
+  if (props.config.writingMode === 'vertical') {
+    style.writingMode = 'vertical-rl';
+    style.textOrientation = 'mixed';
+  } else {
+    style.writingMode = 'horizontal-tb';
+  }
   
   // Apply gradient or solid color
   if (props.config.useGradient && (props.config.gradientColors || []).length >= 2) {
@@ -61,4 +79,10 @@ const textStyle = computed(() => {
   font-family: Arial, sans-serif;
   user-select: none;
 }
+
+.text-content {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  line-height: 1.2;
+}
 </style>

src/widgets/text/types.ts

@@ -10,11 +10,13 @@ export interface TextConfig {
   shadowBlur: number;
   useGradient: boolean;
   gradientColors: string[];
+  textAlign: 'left' | 'center' | 'right' | 'justify';
+  writingMode: 'horizontal' | 'vertical';
 }
 
 // 文本小组件默认配置
 export const defaultConfig: TextConfig = {
-  text: 'Sample Text',
+  text: '示例文本\n支持换行显示',
   color: '#ffffff',
   fontSize: 32,
   fontWeight: 'normal',
@@ -23,5 +25,7 @@ export const defaultConfig: TextConfig = {
   shadowColor: 'rgba(0,0,0,0.5)',
   shadowBlur: 4,
   useGradient: false,
-  gradientColors: ['#ff0000', '#0000ff']
+  gradientColors: ['#ff0000', '#0000ff'],
+  textAlign: 'left',
+  writingMode: 'horizontal'
 };