From 3422a2308747859a1e1811d811b446b6f10ce644 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sat, 2 Apr 2022 19:33:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=90=8D=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandCard.vue  | 40 +++++++++++------------
 src/pages/ConfigurationPage.vue | 58 +++++++++++++++++++++------------
 2 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/src/components/CommandCard.vue b/src/components/CommandCard.vue
index 9e238b5..70f9483 100644
--- a/src/components/CommandCard.vue
+++ b/src/components/CommandCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper" :style="isCommandActivated ? '' : 'color:#9e9e9ea6'">
+  <div class="wrapper" :style="isCommandActivated ? '' : 'color:##9e9e9ea6'">
     <div>
       <!-- 开关 -->
       <div class="absolute" style="z-index: 1; left: 20px; bottom: 16px">
@@ -46,18 +46,18 @@
         <q-card-section>
           <!-- logo -->
           <div class="row">
-            <q-img width="48px" :src="quickcommand.features.icon" />
+            <q-img width="48px" :src="commandInfo.features.icon" />
           </div>
           <!-- 名称 -->
           <div class="row justify-end">
             <div class="text-h6 ellipsis">
-              {{ quickcommand.features.explain }}
+              {{ commandInfo.features.explain }}
             </div>
           </div>
           <!-- 匹配模式 -->
           <div class="row justify-end q-gutter-xs">
-            <div class="scrollArea">
-              <span v-for="cmd in quickcommand.features.cmds" :key="cmd">
+            <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-icon class="q-mr-xs" name="font_download" />{{
@@ -135,14 +135,14 @@
           <!-- 语言类型及适配系统 -->
           <div class="row justify-end items-center q-gutter-xs">
             <span
-              :style="'color:' + allProgrammings[quickcommand.program].color"
+              :style="'color:' + allProgrammings[commandInfo.program].color"
               >●</span
             >
-            <span class="text-subtitle2">{{ quickcommand.program }}</span
+            <span class="text-subtitle2">{{ commandInfo.program }}</span
             ><span>|</span>
             <img
               width="16"
-              v-for="platform in quickcommand.features.platform"
+              v-for="platform in commandInfo.features.platform"
               :key="platform"
               :src="'/img/' + platform + '.svg'"
             />
@@ -167,29 +167,29 @@ export default {
   computed: {
     canCommandRun() {
       return (
-        this.quickcommand.features.cmds.filter((x) => x.length).length &&
+        this.commandInfo.features.cmds.filter((x) => x.length).length &&
         this.isCommandActivated
       );
     },
   },
   props: {
-    quickcommand: Object,
+    commandInfo: Object,
     activated: Boolean,
   },
   methods: {
     runCommand() {
       utools.redirect(
-        this.quickcommand.features.cmds.filter((x) => x.length)[0]
+        this.commandInfo.features.cmds.filter((x) => x.length)[0]
       );
     },
     toggleCommandActivated() {
       let event = {
         type: "disable",
-        data: this.quickcommand.features.code,
+        data: this.commandInfo.features.code,
       };
-      if (!UTOOLS.whole.removeFeature(this.quickcommand.features.code)) {
+      if (!UTOOLS.whole.removeFeature(this.commandInfo.features.code)) {
         UTOOLS.whole.setFeature(
-          JSON.parse(JSON.stringify(this.quickcommand.features))
+          JSON.parse(JSON.stringify(this.commandInfo.features))
         );
         event.type = "enable";
       }
@@ -198,8 +198,8 @@ export default {
     removeCommand() {
       quickcommand.showConfirmBox("删除这个快捷命令").then((x) => {
         if (!x) return;
-        let code = this.quickcommand.features.code;
-        utools.copyText(JSON.stringify(this.quickcommand, null, 4));
+        let code = this.commandInfo.features.code;
+        utools.copyText(JSON.stringify(this.commandInfo, null, 4));
         UTOOLS.delDB(UTOOLS.DBPRE.QC + code);
         UTOOLS.whole.removeFeature(code);
         this.isCommandAlive = false;
@@ -213,13 +213,13 @@ export default {
       });
     },
     exportCommandRaw() {
-      utools.copyText(JSON.stringify(this.quickcommand, null, 4)) &&
+      utools.copyText(JSON.stringify(this.commandInfo, null, 4)) &&
         quickcommand.showMessageBox("已复制到剪贴板");
     },
     exportCommandFile() {
-      window.saveFile(JSON.stringify(this.quickcommand), {
+      window.saveFile(JSON.stringify(this.commandInfo), {
         title: "选择保存位置",
-        defaultPath: `${this.quickcommand.features.explain}.json`,
+        defaultPath: `${this.commandInfo.features.explain}.json`,
         filters: [{ name: "json", extensions: ["json"] }],
       });
     },
@@ -241,7 +241,7 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.scrollArea {
+.matchTypesBox {
   height: 23px;
   width: 60%;
   overflow: hidden;
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index d02e874..53e9953 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -1,34 +1,35 @@
 <template>
   <div>
+    <!-- 标签栏 -->
     <q-tabs
       v-model="currentTag"
       vertical
       class="text-teal fixed-left"
-      style="width: 80px; border-right: 1px solid #0000001f"
+      :style="{
+        width: tabBarWidth,
+        boxShadow: barShadow,
+        zIndex: 1,
+      }"
     >
       <!-- 所有标签 -->
-      <q-tab
-        v-for="tag in allQuickCommandTags"
-        :key="tag"
-        :name="tag"
-        :label="tag"
-      >
-        <div>
-          <q-badge
+      <q-tab v-for="tag in allQuickCommandTags" :key="tag" :name="tag">
+        <div class="flex items-center">
+          <q-icon
             v-if="activatedQuickPanels.includes(tag)"
-            floating
-            rounded
-            color="teal"
-            ><q-icon name="near_me"
-          /></q-badge>
+            name="star"
+            style="margin-right: 2px"
+          />{{ tag }}
         </div>
       </q-tab>
     </q-tabs>
-    <!-- 标签对应的面板 -->
+    <!-- 面板栏 -->
     <q-tab-panels
       animated
       class="fixed-right"
-      style="left: 80px"
+      :style="{
+        bottom: footerBarHeight,
+        left: tabBarWidth,
+      }"
       v-model="currentTag"
       transition-prev="slide-down"
       transition-next="slide-up"
@@ -43,21 +44,32 @@
       >
         <div class="row center">
           <CommandCard
-            v-for="quickcommand in currentTagQuickCommands"
-            :key="quickcommand.features.code"
-            :quickcommand="quickcommand"
+            v-for="commandInfo in currentTagQuickCommands"
+            :key="commandInfo.features.code"
+            :commandInfo="commandInfo"
             :activated="
               activatedQuickCommandFeatureCodes.includes(
-                quickcommand.features.code
+                commandInfo.features.code
               )
             "
             @commandChanged="commandChanged"
-            style="width: 50%"
+            :style="{
+              width: cmmandCardWidth,
+            }"
             class="relative-position q-pa-sm"
           ></CommandCard>
         </div>
       </q-tab-panel>
     </q-tab-panels>
+    <!-- 底栏 -->
+    <div
+      class="fixed-bottom"
+      :style="{
+        height: footerBarHeight,
+        left: tabBarWidth,
+        boxShadow: barShadow,
+      }"
+    ></div>
   </div>
 </template>
 
@@ -73,6 +85,10 @@ export default {
       activatedQuickCommandFeatureCodes: [],
       activatedQuickPanels: [],
       allQuickCommands: [],
+      cmmandCardWidth: "33%",
+      tabBarWidth: "80px",
+      footerBarHeight: "35px",
+      barShadow: "2px 0 5px 2px #0000001f",
     };
   },
   computed: {