From b0cc476822003f47e66343999da3c97d86fad241 Mon Sep 17 00:00:00 2001 From: hxuanyu <2252193204@qq.com> Date: Sun, 29 Jun 2025 23:49:38 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=9C=AC=E5=AF=B9?= =?UTF-8?q?=E9=BD=90=E5=92=8C=E6=96=87=E5=AD=97=E6=96=B9=E5=90=91=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E6=94=AF=E6=8C=81=E6=8D=A2=E8=A1=8C=E6=98=BE?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/text/Config.vue | 48 ++++++++++++++++++++++++++++++------- src/widgets/text/Widget.vue | 32 +++++++++++++++++++++---- src/widgets/text/types.ts | 8 +++++-- 3 files changed, 73 insertions(+), 15 deletions(-) diff --git a/src/widgets/text/Config.vue b/src/widgets/text/Config.vue index e1c1d87..4557dee 100644 --- a/src/widgets/text/Config.vue +++ b/src/widgets/text/Config.vue @@ -17,7 +17,7 @@ 基本设置 - + 文本样式 @@ -45,6 +45,24 @@ + + 布局设置 + + + + + + + + + + + + + + + + 颜色设置 @@ -97,7 +115,7 @@ const props = withDefaults(defineProps<{ config: Partial; }>(), { 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({ - text: 'Sample Text', + text: '示例文本\n支持换行显示', color: '#ffffff', fontSize: 32, fontWeight: 'normal', @@ -126,7 +146,9 @@ const localConfig = ref({ 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 } }; diff --git a/src/widgets/text/Widget.vue b/src/widgets/text/Widget.vue index edd1af9..5550b82 100644 --- a/src/widgets/text/Widget.vue +++ b/src/widgets/text/Widget.vue @@ -1,6 +1,6 @@ @@ -13,7 +13,7 @@ const props = withDefaults(defineProps<{ config: Partial; }>(), { 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支持换行显示'; + // 将换行符转换为
标签 + return text.replace(/\n/g, '
'); +}); + // Computed styles for the text const textStyle = computed(() => { const style: Record = { 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; +} diff --git a/src/widgets/text/types.ts b/src/widgets/text/types.ts index d27846d..0e86d0b 100644 --- a/src/widgets/text/types.ts +++ b/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' };