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'
};