+
{{ currentText }}
|
@@ -115,34 +179,36 @@ watch(() => props.texts, () => {
font-family: 'Fira Code', 'Courier New', monospace;
font-weight: 500;
line-height: 1.5;
+ min-height: 1.5em; /* 防止内容变化时布局抖动 */
}
.typewriter-text {
color: var(--text-primary);
white-space: pre-wrap;
+ display: inline-block;
+ vertical-align: top;
}
.typewriter-cursor {
position: relative;
display: inline-block;
width: 0.1em;
- color: var(--primary-color);
+ height: 1em;
+ margin-left: 2px;
+ background-color: var(--primary-color);
opacity: 0;
- animation: cursorPulse 1s infinite;
+ transition: opacity 0.2s ease;
+ vertical-align: top;
}
.cursor-visible {
opacity: 1;
}
-/* 光标动画 */
-@keyframes cursorPulse {
- 0%, 100% {
- opacity: 1;
- }
- 50% {
- opacity: 0.3;
- }
+/* 性能优化 */
+.typewriter-container {
+ will-change: contents;
+ contain: content;
}
/* 响应式调整 */
@@ -153,11 +219,18 @@ watch(() => props.texts, () => {
}
/* 暗黑模式适配 */
-[data-theme="dark"] .typewriter-text {
- color: var(--text-primary-dark);
+@media (prefers-color-scheme: dark) {
+ .typewriter-text {
+ color: var(--text-primary-dark);
+ }
+
+ .typewriter-cursor {
+ background-color: var(--primary-color-dark);
+ }
}
-[data-theme="dark"] .typewriter-cursor {
- color: var(--primary-color-dark);
+/* 减少重排优化 */
+.typewriter-text {
+ backface-visibility: hidden;
}
-
+
\ No newline at end of file