Merge pull request #127 from Kreedzt/feature/tdollskin2

✨ add highlight for tdoll2 & tdoll2 cmd
Kreedzt · Jan 13, 2025 · a7da008 · a7da008
2 parents a1330b4 + ac5626b
commit a7da008
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 15 deletions.
diff --git a/src/commands/tdoll/canvas/tdoll2Canvas.ts b/src/commands/tdoll/canvas/tdoll2Canvas.ts
@@ -8,6 +8,7 @@ import { BaseCanvas } from '../../../services/baseCanvas';
 import { ITDollDataItem } from '../types/types';
 import { resizeImg } from '../../../utils/imgproxy';
 import { CANVAS_STYLE } from '../types/constants';
+import { replacedQueryMatch } from '../utils/utils';
 
 export class TDoll2Canvas extends BaseCanvas {
     renderStartY: number = 0;
@@ -222,13 +223,56 @@ export class TDoll2Canvas extends BaseCanvas {
         );
         const idSectionWidth = context.measureText(section.noSection).width;
 
-        // name
-        context.fillStyle = '#fff';
-        context.fillText(
-            section.staticSection2,
-            CANVAS_STYLE.PADDING * 2 + staticSectionWidth + idSectionWidth,
-            this.renderStartY
-        );
+        // name with highlight if needed
+        const startX = CANVAS_STYLE.PADDING * 2 + staticSectionWidth + idSectionWidth;
+        if (this.query && this.query !== 'random') {
+            const name = section.staticSection2;
+            const processedName = replacedQueryMatch(name);
+            const processedQuery = replacedQueryMatch(this.query);
+            const queryIndex = processedName.indexOf(processedQuery);
+
+            if (queryIndex !== -1) {
+                let matchStartIndex = 0;
+                let matchEndIndex = 0;
+                let currentProcessedIndex = 0;
+
+                // 找到实际要高亮的字符位置
+                for (let i = 0; i < name.length; i++) {
+                    if (currentProcessedIndex === queryIndex) {
+                        matchStartIndex = i;
+                    }
+                    if (currentProcessedIndex === queryIndex + processedQuery.length) {
+                        matchEndIndex = i;
+                        break;
+                    }
+                    if (!/[-. ]/.test(name[i])) {
+                        currentProcessedIndex++;
+                    }
+                }
+                if (matchEndIndex === 0) matchEndIndex = name.length;
+
+                const before = name.substring(0, matchStartIndex);
+                const match = name.substring(matchStartIndex, matchEndIndex);
+                const after = name.substring(matchEndIndex);
+
+                context.fillStyle = '#fff';
+                context.fillText(before, startX, this.renderStartY);
+                const beforeWidth = context.measureText(before).width;
+
+                context.fillStyle = '#22d3ee';
+                context.fillText(match, startX + beforeWidth, this.renderStartY);
+                const matchWidth = context.measureText(match).width;
+
+                context.fillStyle = '#fff';
+                context.fillText(after, startX + beforeWidth + matchWidth, this.renderStartY);
+            } else {
+                context.fillStyle = '#fff';
+                context.fillText(name, startX, this.renderStartY);
+            }
+        } else {
+            context.fillStyle = '#fff';
+            context.fillText(section.staticSection2, startX, this.renderStartY);
+        }
 
         this.renderStartY += CANVAS_STYLE.LINE_HEIGHT;
 

diff --git a/src/commands/tdoll/canvas/tdollSkin2Canvas.ts b/src/commands/tdoll/canvas/tdollSkin2Canvas.ts
@@ -361,21 +361,34 @@ export class TDollSkin2Canvas extends BaseCanvas {
         const x = CANVAS_STYLE.PADDING * 2;
 
         this.skinList.forEach((skin, index) => {
-            const image = this.tdollSkinImgMap.get(skin.value);
-            if (!image) return;
-
             // Render skin title
             this.state.startY += CANVAS_STYLE.PADDING;
+
+            // 分段渲染标题文本
             context.fillStyle = CANVAS_STYLE.TEXT_COLOR;
-            const title = `${index + 1}. ${skin.title} ID:${skin.value}`;
-            context.fillText(title, x, this.state.startY);
-            maxWidth = Math.max(maxWidth, context.measureText(title).width);
+            const prefix = `${index + 1}. ${skin.title} ID:`;
+            context.fillText(prefix, x, this.state.startY);
+
+            // 计算前缀宽度
+            const prefixWidth = context.measureText(prefix).width;
+
+            // 高亮渲染 skin.value
+            context.fillStyle = '#059669';
+            context.fillText(skin.value, x + prefixWidth, this.state.startY);
+
+            // 计算总宽度
+            const totalWidth = prefixWidth + context.measureText(skin.value).width;
+            maxWidth = Math.max(maxWidth, totalWidth);
 
             // Render skin image
             this.state.startY += CANVAS_STYLE.LINE_HEIGHT;
-            context.drawImage(image, x, this.state.startY, 150, 150);
+            const image = this.tdollSkinImgMap.get(skin.value);
+            if (image) {
+                context.drawImage(image, x, this.state.startY, 150, 150);
+                maxWidth = Math.max(maxWidth, 150);
+            }
+            // Even if no image, still increase startY to keep spacing
             this.state.startY += 150;
-            maxWidth = Math.max(maxWidth, 150);
         });
 
         this.renderStartY = this.state.startY;

diff --git a/src/commands/tdoll/utils/utils.ts b/src/commands/tdoll/utils/utils.ts
@@ -55,6 +55,14 @@ export const getRandomTDollData = (dataList: ITDollDataItem[]): string => {
     return formatTDollData(randomData);
 };
 
+export const replacedQueryMatch = (query: string): string => {
+    return query
+        .toLowerCase()
+        .replaceAll('-', '')
+        .replaceAll('.', '')
+        .replaceAll(' ', '');
+};
+
 /**
  * Get matched tdoll data
  * @param dataList