From cee00fd3a71a827505c2c9558dede5052c2d65f1 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sat, 2 Apr 2022 19:34:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandCard.vue  | 205 ++++++++++++++++++++------------
 src/pages/ConfigurationPage.vue |  69 +++++++----
 2 files changed, 177 insertions(+), 97 deletions(-)

diff --git a/src/components/CommandCard.vue b/src/components/CommandCard.vue
index 70f9483..28e840a 100644
--- a/src/components/CommandCard.vue
+++ b/src/components/CommandCard.vue
@@ -1,56 +1,72 @@
 <template>
-  <div class="wrapper" :style="isCommandActivated ? '' : 'color:##9e9e9ea6'">
+  <!-- mini 模式下如果命令未启用或者不可直接运行则隐藏卡片面板 -->
+  <div
+    class="wrapper"
+    v-show="!(cardStyle.code === 1 && (!isCommandActivated || !canCommandRun))"
+  >
     <div>
-      <!-- 开关 -->
-      <div class="absolute" style="z-index: 1; left: 20px; bottom: 16px">
-        <q-toggle
-          v-model="isCommandActivated"
-          checked-icon="flash_on"
-          color="orange-6"
-          @click="toggleCommandActivated"
-        />
+      <!-- mini 模式下不显示各类按钮 -->
+      <div v-show="cardStyle.code > 1">
+        <!-- 开关 -->
+        <div class="absolute" style="z-index: 1; left: 20px; bottom: 16px">
+          <q-toggle
+            v-model="isCommandActivated"
+            checked-icon="flash_on"
+            color="orange-6"
+            @click="toggleCommandActivated"
+          />
+        </div>
+        <!-- 选项按钮 -->
+        <div class="absolute" style="z-index: 1; right: 16px; top: 16px">
+          <q-btn
+            flat
+            round
+            color="green"
+            icon="play_arrow"
+            v-show="canCommandRun"
+            @click="runCommand"
+            ><q-tooltip anchor="top middle" self="center middle">
+              运行
+            </q-tooltip></q-btn
+          >
+          <q-btn flat round color="primary" icon="share">
+            <q-tooltip anchor="top middle" self="center middle">
+              导出
+            </q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 100px">
+                <q-item clickable v-close-popup @click="exportCommandFile">
+                  <q-item-section>导出</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="exportCommandRaw">
+                  <q-item-section>复制到剪贴板</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+          <q-btn flat round color="red" icon="close" @click="removeCommand"
+            ><q-tooltip anchor="top middle" self="center middle">
+              删除
+            </q-tooltip></q-btn
+          >
+        </div>
       </div>
-      <!-- 选项按钮 -->
-      <div class="absolute" style="z-index: 1; right: 16px; top: 16px">
-        <q-btn
-          flat
-          round
-          color="green"
-          icon="play_arrow"
-          v-show="canCommandRun"
-          @click="runCommand"
-          ><q-tooltip anchor="top middle" self="center middle">
-            运行
-          </q-tooltip></q-btn
-        >
-        <q-btn flat round color="primary" icon="share">
-          <q-tooltip anchor="top middle" self="center middle"> 导出 </q-tooltip>
-          <q-menu>
-            <q-list style="min-width: 100px">
-              <q-item clickable v-close-popup @click="exportCommandFile">
-                <q-item-section>导出</q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup @click="exportCommandRaw">
-                <q-item-section>复制到剪贴板</q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn>
-        <q-btn flat round color="red" icon="close" @click="removeCommand"
-          ><q-tooltip anchor="top middle" self="center middle">
-            删除
-          </q-tooltip></q-btn
-        >
-      </div>
-      <q-card v-ripple>
+      <!-- 未启用的命令文字为灰色 -->
+      <q-card v-ripple :style="isCommandActivated ? '' : 'color:grey'">
         <q-card-section>
           <!-- logo -->
           <div class="row">
             <q-img width="48px" :src="commandInfo.features.icon" />
           </div>
           <!-- 名称 -->
+          <!-- mini 和 small 模式下命令标题字体变小 -->
           <div class="row justify-end">
-            <div class="text-h6 ellipsis">
+            <div
+              class="ellipsis"
+              :style="{
+                fontSize: cardStyle.code > 2 ? '1.25rem' : '1.1rem',
+              }"
+            >
               {{ commandInfo.features.explain }}
             </div>
           </div>
@@ -59,9 +75,9 @@
             <div class="matchTypesBox">
               <span v-for="cmd in commandInfo.features.cmds" :key="cmd">
                 <span v-if="typeof cmd === 'string'">
-                  <q-badge rounded color="teal"
+                  <q-badge rounded :color="cmdBadgeColor()"
                     ><q-icon class="q-mr-xs" name="font_download" />{{
-                      cmd.length > 10 ? cmd.slice(0, 10) + "..." : cmd
+                      getShortStrByByte(cmd)
                     }}</q-badge
                   >
                   <q-tooltip>
@@ -71,11 +87,9 @@
                   </q-tooltip>
                 </span>
                 <span v-else-if="cmd.type === 'window' && cmd.match">
-                  <q-badge rounded color="indigo"
+                  <q-badge rounded :color="cmdBadgeColor(cmd.type)"
                     ><q-icon class="q-mr-xs" name="widgets" />{{
-                      cmd.match.app[0].length > 10
-                        ? cmd.match.app[0].slice(0, 10) + "..."
-                        : cmd.match.app[0]
+                      getShortStrByByte(cmd.match.app[0])
                     }}
                   </q-badge>
                   <q-tooltip>
@@ -89,14 +103,10 @@
                   </q-tooltip>
                 </span>
                 <span v-else-if="cmd.type === 'files'">
-                  <q-badge rounded color="light-blue"
+                  <q-badge rounded :color="cmdBadgeColor(cmd.type)"
                     ><q-icon class="q-mr-xs" name="description" />
                     {{
-                      (cmd.match &&
-                        (cmd.match.length > 10
-                          ? cmd.match.slice(0, 10) + "..."
-                          : cmd.match)) ||
-                      "所有文件"
+                      (cmd.match && getShortStrByByte(cmd.match)) || "所有文件"
                     }}</q-badge
                   >
                   <q-tooltip>
@@ -106,11 +116,9 @@
                   </q-tooltip>
                 </span>
                 <span v-else-if="cmd.type === 'regex'">
-                  <q-badge rounded color="cyan"
+                  <q-badge rounded :color="cmdBadgeColor(cmd.type)"
                     ><q-icon class="q-mr-xs" name="playlist_add_check" />{{
-                      cmd.match.length > 10
-                        ? cmd.match.slice(0, 10) + "..."
-                        : cmd.match
+                      getShortStrByByte(cmd.match)
                     }}
                   </q-badge>
                   <q-tooltip>
@@ -120,32 +128,39 @@
                   </q-tooltip>
                 </span>
                 <span v-else-if="cmd.type === 'over'">
-                  <q-badge rounded color="light-green"
+                  <q-badge rounded :color="cmdBadgeColor(cmd.type)"
                     ><q-icon class="q-mr-xs" name="clear_all" />所有文本
                   </q-badge>
                 </span>
                 <span v-else-if="cmd.type === 'img'">
-                  <q-badge rounded color="deep-orange" label="">
+                  <q-badge rounded :color="cmdBadgeColor(cmd.type)" label="">
                     <q-icon class="q-mr-xs" name="panorama" />图片
                   </q-badge>
                 </span>
               </span>
             </div>
           </div>
-          <!-- 语言类型及适配系统 -->
-          <div class="row justify-end items-center q-gutter-xs">
-            <span
-              :style="'color:' + allProgrammings[commandInfo.program].color"
+          <!-- mini模式下不显示语言类型和适配系统 -->
+          <!-- 语言类型 -->
+          <div
+            class="row justify-end items-center q-gutter-xs"
+            v-show="cardStyle.code > 1"
+          >
+            <span :style="'color:' + allProgrammings[commandInfo.program].color"
               >●</span
             >
-            <span class="text-subtitle2">{{ commandInfo.program }}</span
-            ><span>|</span>
-            <img
-              width="16"
-              v-for="platform in commandInfo.features.platform"
-              :key="platform"
-              :src="'/img/' + platform + '.svg'"
-            />
+            <span class="text-subtitle2">{{ commandInfo.program }}</span>
+            <!-- mini 和 small 模式下不显示适配系统 -->
+            <!-- 适配系统 -->
+            <div class="flex" v-show="cardStyle.code > 2">
+              |&nbsp;
+              <img
+                width="16"
+                v-for="platform in commandInfo.features.platform"
+                :key="platform"
+                :src="'/img/' + platform + '.svg'"
+              />
+            </div>
           </div>
         </q-card-section>
       </q-card>
@@ -162,26 +177,61 @@ export default {
     return {
       allProgrammings: allProgrammings,
       isCommandActivated: this.activated,
+      maxCmdStingLen: 8,
+      cmdBadgeSheet: {
+        keyword: "teal",
+        files: "light-blue",
+        window: "indigo",
+        regex: "cyan",
+        over: "light-green",
+        img: "deep-orange",
+      },
     };
   },
   computed: {
+    // 命令是否可直接运行
     canCommandRun() {
       return (
         this.commandInfo.features.cmds.filter((x) => x.length).length &&
         this.isCommandActivated
       );
     },
+    // 匹配类型的颜色
+    cmdBadgeColor() {
+      return (cmdType = "keyword") => {
+        if (!this.isCommandActivated)
+          return this.$q.dark.isActive ? "grey-9" : "grey-5";
+        return this.cmdBadgeSheet[cmdType];
+      };
+    },
   },
   props: {
     commandInfo: Object,
     activated: Boolean,
+    cardStyle: Object,
+  },
+  mounted() {
+    console.log("CommandCard", this);
   },
   methods: {
+    // 匹配类型太长的话截断
+    getShortStrByByte(str) {
+      let byteLen = 0;
+      let shortStr = "";
+      for (let i = 0; i < str.length; i++) {
+        byteLen += 129 - str[i].charCodeAt(0) > 0 ? 1 : 2;
+        if (byteLen > this.maxCmdStingLen) break;
+        shortStr += str[i];
+      }
+      return shortStr === str ? shortStr : shortStr + "...";
+    },
+    // 运行命令
     runCommand() {
       utools.redirect(
         this.commandInfo.features.cmds.filter((x) => x.length)[0]
       );
     },
+    // 启用/禁用命令
     toggleCommandActivated() {
       let event = {
         type: "disable",
@@ -195,6 +245,7 @@ export default {
       }
       this.$emit("commandChanged", event);
     },
+    // 移除命令
     removeCommand() {
       quickcommand.showConfirmBox("删除这个快捷命令").then((x) => {
         if (!x) return;
@@ -212,10 +263,12 @@ export default {
         );
       });
     },
+    // 导出到剪贴板
     exportCommandRaw() {
       utools.copyText(JSON.stringify(this.commandInfo, null, 4)) &&
         quickcommand.showMessageBox("已复制到剪贴板");
     },
+    // 导出到文件
     exportCommandFile() {
       window.saveFile(JSON.stringify(this.commandInfo), {
         title: "选择保存位置",
@@ -243,7 +296,7 @@ export default {
 }
 .matchTypesBox {
   height: 23px;
-  width: 60%;
+  width: 80%;
   overflow: hidden;
   text-align: right;
 }
@@ -251,8 +304,8 @@ export default {
   transition: 0.5s;
 }
 .wrapper:hover {
-  text-shadow: 1px 2px 4px #0000009e;
   transition: 0.5s;
-  transform: translateY(-4px);
+  transform: translateY(-5px);
+  filter: drop-shadow(1px 1px 5px #0000008e);
 }
 </style>
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index 53e9953..302bd86 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -37,28 +37,38 @@
       vertical
     >
       <q-tab-panel
-        style="padding: 8px"
+        style="padding: 0"
         v-for="tag in allQuickCommandTags"
         :key="tag"
         :name="tag"
       >
-        <div class="row center">
-          <CommandCard
-            v-for="commandInfo in currentTagQuickCommands"
-            :key="commandInfo.features.code"
-            :commandInfo="commandInfo"
-            :activated="
-              activatedQuickCommandFeatureCodes.includes(
-                commandInfo.features.code
-              )
-            "
-            @commandChanged="commandChanged"
-            :style="{
-              width: cmmandCardWidth,
-            }"
-            class="relative-position q-pa-sm"
-          ></CommandCard>
-        </div>
+        <q-scroll-area
+          style="height: 100%"
+          :thumb-style="{
+            background: 'grey',
+            width: '6px',
+            opacity: 0.5,
+          }"
+        >
+          <div class="row center q-pa-xs">
+            <CommandCard
+              v-for="commandInfo in currentTagQuickCommands"
+              :key="commandInfo.features.code"
+              :commandInfo="commandInfo"
+              :activated="
+                activatedQuickCommandFeatureCodes.includes(
+                  commandInfo.features.code
+                )
+              "
+              :cardStyle="commandCardStyleSheet[commandCardStyle]"
+              @commandChanged="commandChanged"
+              :style="{
+                width: commandCardStyleSheet[commandCardStyle].width,
+              }"
+              class="relative-position q-pa-sm"
+            ></CommandCard>
+          </div>
+        </q-scroll-area>
       </q-tab-panel>
     </q-tab-panels>
     <!-- 底栏 -->
@@ -85,10 +95,28 @@ export default {
       activatedQuickCommandFeatureCodes: [],
       activatedQuickPanels: [],
       allQuickCommands: [],
-      cmmandCardWidth: "33%",
       tabBarWidth: "80px",
       footerBarHeight: "35px",
       barShadow: "2px 0 5px 2px #0000001f",
+      commandCardStyle: "normal",
+      commandCardStyleSheet: {
+        mini: {
+          width: "25%",
+          code: 1,
+        },
+        small: {
+          width: "33%",
+          code: 2,
+        },
+        normal: {
+          width: "50%",
+          code: 3,
+        },
+        large: {
+          width: "100%",
+          code: 4,
+        },
+      },
     };
   },
   computed: {
@@ -131,8 +159,7 @@ export default {
       this.activatedQuickPanels = activatedFeatures.quickpanels;
       // 所有的快捷命令
       this.allQuickCommands = this.getAllQuickCommands();
-      // 所有的 tags
-      console.log(this);
+      console.log("ConfigurationPage", this);
     },
     // 获取所有已启用的命令的 features 以及面板名称
     getActivatedFeatures() {