Optimize rendering performance.

EaseCation · Mar 28, 2024 · d1ac475 · d1ac475
1 parent 1829cdb
commit d1ac475
Showing 1 changed file with 38 additions and 21 deletions.
diff --git a/src/components/MCTextFormatter.vue b/src/components/MCTextFormatter.vue
@@ -251,6 +251,8 @@ export default {
             // this.isDarkMode = !this.isDarkMode;
         };
 
+        const colorCodeSymbol = '§';
+
         const formatText = () => {
             let formatted = rawText.value;
             for (let braceCode in colorsBrace.value) {
@@ -266,48 +268,63 @@ export default {
                 underline: false,
                 strikethrough: false,
             };
+            let newState = { ...state };
             let output = "";
-            let i = 0;
+            let contentBuffer = "";
+
+            // 应用样式到缓冲内容，并重置缓冲
+            const applyStylesAndResetBuffer = () => {
+                if (contentBuffer) {
+                    let spanStart = `<span style="color: ${state.color};`;
+                    if (state.bold) spanStart += " font-weight: bold;";
+                    if (state.italic) spanStart += " font-style: italic;";
+                    if (state.underline) spanStart += " text-decoration: underline;";
+                    if (state.strikethrough) spanStart += " text-decoration: line-through;";
+                    spanStart += `">`;
+                    output += spanStart + contentBuffer + "</span>";
+                    contentBuffer = ""; // 重置内容缓冲
+                }
+            };
 
-            while (i < formatted.length) {
-                if (formatted[i] === '§') {
+            for (let i = 0; i < rawText.value.length; i++) {
+                if (rawText.value[i] === '§') {
                     i++; // 跳过 '§'
-                    let colorTag = '';
-                    switch (formatted[i]) {
+                    switch (rawText.value[i]) {
                         case 'r':
-                            state = { color: "", bold: false, italic: false, underline: false, strikethrough: false };
+                            newState = { color: "", bold: false, italic: false, underline: false, strikethrough: false };
                             break;
                         case 'l':
-                            state.bold = true;
+                            newState.bold = true;
                             break;
                         case 'o':
-                            state.italic = true;
+                            newState.italic = true;
                             break;
                         case 'n':
-                            state.underline = true;
+                            newState.underline = true;
                             break;
                         case 'm':
-                            state.strikethrough = true;
+                            newState.strikethrough = true;
                             break;
                         default:
-                            colorTag = `§${formatted[i]}`;
-                            state.color = colors.value[colorTag] || state.color;
+                            newState.color = colors.value[`${colorCodeSymbol}${rawText.value[i]}`] || newState.color;
                             break;
                     }
-                } else if (formatted[i] === '\n') {
+                } else if (rawText.value[i] === '\n') {
+                    applyStylesAndResetBuffer(); // 应用样式并清空缓冲
                     output += "<br>";
                 } else {
-                    let spanStart = `<span style="color: ${state.color};`;
-                    if (state.bold) spanStart += " font-weight: bold;";
-                    if (state.italic) spanStart += " font-style: italic;";
-                    if (state.underline) spanStart += " text-decoration: underline;";
-                    if (state.strikethrough) spanStart += " text-decoration: line-through;";
-                    spanStart += `">`;
-                    output += spanStart + formatted[i] + "</span>";
+                    contentBuffer += rawText.value[i]; // 加入当前字符到缓冲
+                }
+
+                // 检查状态是否改变
+                if (JSON.stringify(state) !== JSON.stringify(newState)) {
+                    applyStylesAndResetBuffer(); // 应用当前样式并重置缓冲
+                    state = { ...newState }; // 更新当前状态为新状态
                 }
-                i++;
             }
 
+            applyStylesAndResetBuffer(); // 确保最后的缓冲内容被应用
+
             formattedText.value = output;
         };