优化富文本显示排版

packages/webgal/src/Stage/TextBox/IMSSTextbox.tsx

@@ -4,6 +4,7 @@ import { WebGAL } from '@/Core/WebGAL';
 import { ITextboxProps } from './types';
 import useApplyStyle from '@/hooks/useApplyStyle';
 import { css } from '@emotion/css';
+import { textSize } from '@/store/userDataInterface';
 
 export default function IMSSTextbox(props: ITextboxProps) {
   const {
@@ -22,6 +23,7 @@ export default function IMSSTextbox(props: ITextboxProps) {
     textDuration,
     isUseStroke,
     textboxOpacity,
+    textSizeState,
   } = props;
 
   const applyStyle = useApplyStyle('Stage/TextBox/textbox.scss');
@@ -251,6 +253,7 @@ export default function IMSSTextbox(props: ITextboxProps) {
                 flexFlow: 'column',
                 overflow: 'hidden',
                 paddingLeft: '0.1em',
+                lineHeight: textSizeState === textSize.medium ? '2.2em' : '2em', // 不加的话上半拼音可能会被截断，同时保持排版整齐
               }}
             >
               {textElementList}

packages/webgal/src/Stage/TextBox/TextBox.tsx

@@ -60,7 +60,7 @@ export const TextBox = () => {
     size = getTextSize(stageState.showTextSize) + '%';
     textSizeState = stageState.showTextSize;
   }
-  const lineLimit = match(userDataState.optionData.textSize)
+  const lineLimit = match(textSizeState)
     .with(textSize.small, () => 3)
     .with(textSize.medium, () => 2)
     .with(textSize.large, () => 2)

packages/webgal/src/Stage/TextBox/textbox.module.scss

@@ -71,13 +71,14 @@ $height: 330px;
   position: relative;
   animation: TextDelayShow 1000ms ease-out forwards;
   opacity: 0;
+  display: inline-flex;
+  align-content: space-between
 }
 
+
 .outer {
   position: absolute;
   white-space: nowrap;
-  left: 0;
-  top: 0;
   //background-image: linear-gradient(rgba(255, 255, 255, 1) 0%, rgb(225, 237, 255) 100%);
   background-image: linear-gradient(#0B346E 0%,
     //#f5f7fa 45%,
@@ -87,21 +88,26 @@ $height: 330px;
   -webkit-background-clip: text;
   color: transparent;
   z-index: 2;
+  display: inline-block;   /* 与文本对齐 */
+  vertical-align: middle;  /* 确保注音整体的垂直居中 */
 }
 
 .inner {
   white-space: nowrap;
   position: absolute;
-  left: 0;
-  top: 0;
   -webkit-text-stroke: 0.1em rgba(255, 255, 255, 1);
   z-index: 1;
   //text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);
+  display: inline-block;   /* 内层元素同样行内块布局 */
+  vertical-align: middle;  /* 确保与外层的对齐一致 */
 }
 
 .zhanwei {
   color: transparent;
   white-space: nowrap;
+  display: inline-block;    /* 保持行内块布局 */
+  vertical-align: baseline; /* 确保文本基线对齐 */
+  position: relative;       /* 保持相对定位 */
 }
 
 //
@@ -116,6 +122,8 @@ $height: 330px;
   position: relative;
   @include text_shadow_textElement;
   opacity: 1;
+  display: inline-flex;
+  align-content: space-between
 }
 
 //

packages/webgal/src/UI/getTextSize.ts

@@ -1,11 +1,11 @@
 export function getTextSize(size: number) {
   switch (size) {
     case 0:
-      return 150;
+      return 155;
     case 1:
       return 205;
     case 2:
-      return 240;
+      return 230;
     default:
       return 205;
   }