富文本拼音优化

src/components/PinyinText.vue

@@ -411,11 +411,14 @@ export default {
 
       // 如果该文字块有着重点标记，应用到字符上
       if (block.hasEmphasisDot) {
+        const letterSpacing = block.styleObj?.letterSpacing || '0';
+        const letterSpacingValue = parseFloat(letterSpacing) || 0;
+
         baseStyle['border-bottom'] = 'none';
         baseStyle['background-image'] = 'radial-gradient(circle at center, currentColor 0.15em, transparent 0.16em)';
-        baseStyle['background-size'] = '1em 0.3em';
         baseStyle['background-repeat'] = 'repeat-x';
-        baseStyle['background-position'] = '0 100%';
+        baseStyle['background-position'] = `${letterSpacingValue * -0.5}em 100%`;
+        baseStyle['background-size'] = `${1 + letterSpacingValue}em 0.3em`;
         baseStyle['padding-bottom'] = '0.3em';
         baseStyle['display'] = 'inline';
       }

src/components/RichText.vue

@@ -159,15 +159,16 @@ export default {
             line-height: 1.2 !important; /* 避免行高影响 */
           }
           .rich-text-emphasis-dot {
+           --letter-spacing-value: attr(data-letter-spacing number, 0);
             border-bottom: none;
             background-image: radial-gradient(
               circle at center,
               currentColor 0.15em,  /* 圆点大小相对于字体 */
               transparent 0.16em
             );
-            background-size: 1em 0.3em; /* 间距相对于字体大小，高度相对字体 */
+            background-size: calc((1 + var(--letter-spacing-value)) * 1em) 0.3em;
             background-repeat: repeat-x;
-            background-position: 0 100%;
+            background-position: calc(var(--letter-spacing-value) * -0.5em) 100%;
             padding-bottom: 0.3em; /* 间距也相对于字体 */
             display: inline;
           }
@@ -222,7 +223,8 @@ export default {
               const formatName = `letterSpacing${config}_em`;
               editor.formatter.register(formatName, {
                 inline: 'span',
-                styles: { 'letter-spacing': `${config}em` },
+                styles: { 'letter-spacing': `${config}em`},
+                attributes: { 'data-letter-spacing': `${config}` },
                 wrapper: true,
                 remove_similar: true,
               });
@@ -261,7 +263,7 @@ export default {
             }
             this.editorIsInited = true;
           });
-
+          
           // 自定义行高下拉（因为没有内置 lineheight 插件）
           editor.ui.registry.addMenuButton('lineheight', {
             text: '行高',

src/styles/index.scss

@@ -95,11 +95,14 @@ ul {
 /* 富文本着重点 */
 .rich-text-emphasis-dot {
   display: inline;
-  padding-bottom: 0.2em; /* 间距也相对于字体 */
-  background-image: radial-gradient(circle at center, currentColor 0.15em, /* 圆点大小相对于字体 */ transparent 0.16em);
+  padding-bottom: 0.2em;
+
+  --letter-spacing-value: var(--emphasis-letter-spacing, 0);
+
+  background-image: radial-gradient(circle at center, currentColor 0.15em, transparent 0.16em);
   background-repeat: repeat-x;
-  background-position: 0 100%;
-  background-size: 1em 0.3em; /* 间距相对于字体大小，高度相对字体 */
+  background-position: calc(var(--letter-spacing-value) * -0.5em) 100%;
+  background-size: calc((1 + var(--letter-spacing-value)) * 1em) 0.3em;
   border-bottom: none;
 }