From b09ec5fa3de65f6221e372abda7a46aab2fbcb11 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Tue, 5 Apr 2022 17:00:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandCard.vue  |  5 ++---
 src/pages/ConfigurationPage.vue | 34 ++++++++++++++++++++++++++-------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/CommandCard.vue b/src/components/CommandCard.vue
index 44f3d61..a1056ae 100644
--- a/src/components/CommandCard.vue
+++ b/src/components/CommandCard.vue
@@ -95,9 +95,8 @@
               :style="{
                 fontSize: cardStyleVars.showBiggerTitle ? '1.25rem' : '1.1rem',
               }"
-            >
-              {{ commandInfo.features.explain }}
-            </div>
+              v-html="commandInfo.features.explain"
+            />
           </div>
           <!-- 匹配模式 -->
           <div class="row">
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index 9157b67..72ec5d9 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -21,7 +21,7 @@
           :content-class="
             tag === '搜索结果' ? 'text-blue-9 text-weight-bold' : ''
           "
-          v-show="!(tag === '搜索结果' && !commandSearchKeyword)"
+          v-show="!(tag === '搜索结果' && commandSearchKeyword?.length < 2)"
         >
           {{ tag }}
           <q-tooltip v-if="tag === '未分类'">
@@ -104,7 +104,7 @@
             clearable
             clear-icon="close"
             @update:model-value="updateSearch"
-            placeholder="搜索"
+            placeholder="搜索，支持拼音首字母"
           >
             <template v-slot:prepend>
               <q-icon name="search" />
@@ -236,15 +236,35 @@ export default {
   computed: {
     // 当前标签下的所有快捷命令
     currentTagQuickCommands() {
-      let commands = Object.values(this.allQuickCommands);
+      let commands = Object.values(
+        JSON.parse(JSON.stringify(this.allQuickCommands))
+      );
       switch (this.currentTag) {
         case "未分类":
           return commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0);
         case "搜索结果":
-          if (this.commandSearchKeyword)
-            return commands.filter((cmd) =>
-              cmd.features.explain.includes(this.commandSearchKeyword)
+          if (this.commandSearchKeyword?.length < 2) return;
+          let searchResult = [];
+          commands.forEach((cmd) => {
+            // 拼音搜索
+            let explain = cmd.features.explain;
+            let matchedWordPositions = window.pinYinMatch.match(
+              explain,
+              this.commandSearchKeyword
             );
+            if (!matchedWordPositions) return;
+            let matchedWords = explain.slice(
+              matchedWordPositions[0],
+              matchedWordPositions[1] + 1
+            );
+            // 高亮
+            cmd.features.explain = explain.replace(
+              matchedWords,
+              `<strong style="color:#ed6237">${matchedWords}</strong>`
+            );
+            searchResult.push(cmd);
+          });
+          return searchResult;
         default:
           return commands.filter((cmd) => cmd.tags?.includes(this.currentTag));
       }
@@ -475,7 +495,7 @@ export default {
     updateSearch() {
       // 记录当前标签页
       if (this.currentTag !== "搜索结果") this.lastTag = this.currentTag;
-      if (this.commandSearchKeyword) {
+      if (this.commandSearchKeyword?.length > 1) {
         // 搜索时跳转到搜索结果标签
         this.$nextTick(() => {
           this.currentTag = "搜索结果";