From 4baab60804d37efc48483fdbcd7524d1e77fa3c8 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sat, 21 Dec 2024 13:52:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E5=88=97=E5=8D=A1=E7=89=87=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E5=B8=83=E5=B1=80=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 plugin/platform/linux.png                   | Bin 0 -> 1462 bytes
 plugin/platform/macos.png                   | Bin 0 -> 998 bytes
 plugin/platform/windows.png                 | Bin 0 -> 1832 bytes
 src/components/CommandCard.vue              |  28 +--
 src/components/card/CommandCardContent.vue  | 180 ++++----------
 src/components/card/CommandTypeTag.vue      | 149 +++++++-----
 src/components/card/ControlButtons.vue      |  10 +-
 src/components/card/layouts/DenseLayout.vue |  96 ++++++++
 src/components/card/layouts/ListLayout.vue  |  90 +++++++
 src/components/card/layouts/MiniLayout.vue  |  74 ++++++
 src/css/app.css                             |  77 +++---
 src/fonts/iconfont.ttf                      | Bin 3292 -> 0 bytes
 src/fonts/iconfont.woff                     | Bin 2252 -> 0 bytes
 src/fonts/iconfont.woff2                    | Bin 1816 -> 0 bytes
 src/js/options/platformTypes.js             |   6 +-
 src/js/options/programs.js                  | 252 ++++++++++----------
 src/pages/ConfigurationPage.vue             |  57 ++++-
 17 files changed, 630 insertions(+), 389 deletions(-)
 create mode 100644 plugin/platform/linux.png
 create mode 100644 plugin/platform/macos.png
 create mode 100644 plugin/platform/windows.png
 create mode 100644 src/components/card/layouts/DenseLayout.vue
 create mode 100644 src/components/card/layouts/ListLayout.vue
 create mode 100644 src/components/card/layouts/MiniLayout.vue
 delete mode 100644 src/fonts/iconfont.ttf
 delete mode 100644 src/fonts/iconfont.woff
 delete mode 100644 src/fonts/iconfont.woff2

diff --git a/plugin/platform/linux.png b/plugin/platform/linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc1ffd38d2c477123d8be34b63ed473c9e6f704b
GIT binary patch
literal 1462
zcmV;n1xfmeP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000XU
z000XU0RWnu7ytkTXh}ptRCt{2nF&l3R~W}1*4=T{njX=l+QhUl!?IfI%px<3#U;8P
z!Kk&?5bM!HSCd9*ORbgEhG0EPV`xPYMX4CCibvE+qd?gmP-;B_BCU!jiWM&o@1hI)
zZ)N})TG(CbvaHGelP{ayWZwM#?|tuk-^>!?lTSYR<VgLE#%_AOUPYcI1?q)27*5zu
zv;19#6Tq<i-welR1+c<6LWm#nW-%-uNwdOZ8N8LCIbk!IJo!1|jS2_}>BX?Zownec
zga4R#qXJldl5=<|rG#>?OeLBNnco_4P;e*)@L?@}^Jha1#M?x3LX0pX0%_aQF)nhN
z3~DfqMbV$<aQW&rOq}{b^Il+uxy0K<v;3mf>o+1cZZR@4f0aR(CnO>%c`cIHrC`_o
z421#yE8=Zp^!&nYyY|B0-ydn4x5}WaQhr2GP!M!F9kQ%>$~5|vc$;XBpFMw39JVLV
z#DzWm@gP%!!ma(VW94YXEc^tq%U3AMDW5>Ru?l@R|25dH-B53#0FlC@?1s<3c5AR@
zNk655BgESjsOQ5=wrNn?2rb2}eQF$xSK-ViHOdb#$`q>C>h-S>ZxYQKhAoK+e^j{f
zdE_Ulke8@J!3H(#RtmP`JgTpX2pcort~ixrh&PGmgl{81G(Wt3H5+wD17XkW1>3O@
z+`Y6Fl{L3fS#t;RE0dI!sH*>)#utb;NIPf<qYVyy{Pog!8MLh^K358DaHz7a*woqV
zM5i<MWH_N%0?NqDacDq_8FS{gIF$ofep06zpjm#s1Y(--E^b!UI5n_y?}3&bDl1fW
z+J>eF3nqpW<c<0Bp)9BHQe3-P3902^TA1K>bOwJHh7$@U1LmmDU4n0lmC5T7KK5;?
zD%CwPF<3Bp{NaV+43*&#6Kut2&p(xcvMUuBWH4gpyl4ofh}y<gIP6J&KbjLxO_(z6
zxU<UBR?PYA3%S)!*|eoOmGnIC5qg>n31e8kZt032YJNLW&@KbtC#T5Jn|JJ%SEI44
zCVI#KpQ;TuoLZK!3b(2o4ymV&U5)MaPkZ)3Z!|Tn!f8+N`_ZgW!3`UkEtSOfz)O*7
z$(2*+WKps5aI<&#Ynayu8Tv>!<HAOiNF}ko2CVr<5%uLFWMt(i%c-ry4b=RinOM5B
z*Tc9de|ZD8*Fa(M8I+Wj!yFZ@Y%K~p6do4UK#0`+rgk}cRv;4BZFnm1>Kms~f21Eu
zbEad=^w}6S)r^Sg=KJ$z4Y-uGx=(t?fP-{FZnvQj)mNI}rMPpj2aLn@SP=USuHUM1
z$-upfDe|>;D}_;0XJX`gv#@Z%Sex{{Vcf1E?u8ercvz`wCAc!IYkSMfKlyz#O3TWf
z8n}NU@yWHh8yOr*(cy7Ucg2`$_dYK}qzc-CZ;E*zX=M|`$GwB{it7#yJSbW2a4cA<
zV&s#T+-JZ_B{(y1V}DO@p+n?yc&y-*;}rTM#<2lWHgOgrHQG%E)X`3FC{jp|?~665
zX%69~L#t@dTXt8*gQ&jl9s{B}$CVpOo6tOMAQr?f#^IyK<+fRZK7a8t(zd5#{FE7T
zn%&6gUEu<J8ANK-|A)^bFS<5c4e@*G%TH>$HaN6iH)N>o-|tFmv#BZvsq+X{Y8g(D
z?(Ug=5I>0OREU(#6$4cn-S0`SOlXd;mV#mV%M2@Ake(Z8j=v<Gv~?D$whj1`$Wsk)
z3;2JG93nknp-d2|I9Sz3V5RC?hfs@-#xWX=UF$7WQ7hLa;so*BUs14VUX|*#JZsG}
zco(_U2&dPI)Noj-a}cGKP@jjWiu4S1TR?|3eIcqi<P%M&g81Z<Pvn`?KV@DuT5?RD
Q;Q#;t07*qoM6N<$f>}kt!~g&Q

literal 0
HcmV?d00001

diff --git a/plugin/platform/macos.png b/plugin/platform/macos.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a64414dd878d1b618ad7b0506282fd2d55da0c9
GIT binary patch
literal 998
zcmV<C0~!2@P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000XU
z000XU0RWnu7ytkRm`OxIRCt{2nQKT>VHn4cS&><WAQ4516iJkkG-ni%U!tt&vhEiu
zi%6rwvZ(wb?L!n%gmy8C(6w~vnwd9dMOw?Kg_X-$TXW}?717OHrR_ugWACX<-1N8|
z*BP7#o=-35-T!y?JpcD{7)A;yq>w_CvCa5#_ME#;5_Pll$Ecc4_>vL&ZwM(cfysY{
z3NryAKBbFg*)oU2F`l>hErxe<BK6;XGSx2lm8I{g_;Ae&U&Z5}{A{z?qIm(#s&hL0
z7Vl1todV3OVTAwyA><k_fRXx6|KEPqcQC)pr?g2B@gRga`PGmRZ@;XKiXT=eNcrGT
z1`eR)H3gVb-V&q$g;ol%^Bxf|z;KlXL$vQajCIxjotM1}y4BDGRjo1b07Hx4AZh+G
zOx}99=XiNL6+iT<xlcjz)J(`z6sUb_4lKZMwG~P8mm+@s?w;d1&i}_~t$hlTtxcoz
zl-zF+5rCF!;G`;hkOF90D8QCFB3^*d8=o<4!!AT;UF<ooenA0p8(RAmv>-bdiJSJo
zWU-0JMpe%#z^y(Ui2QFG^_uyO6u@F<gAkyqgNhGPnFJS40s>I+l>!Xmu?7%P0+c%`
zfTtX-wZdi>J3#e!Fh$%x$WvZ7w+2BIS9^CReRHq^6mZV;*e3cCa(S^<u7rZ12V5Sk
zwUe{f0{^X*@fRTSi~(bn8VqvVWk1&j_Zgu#ah4Vq8&6+FrmAA#0OB|7p_{L%oAzQ@
z5!>$)^0qqb>YpGnbswEuwtD-(0fgr_WBTgt^oQgrD-d(&0tV|o@MvQ0gl4dGcOj$M
z3dONYNL;*z&N*Y%Hsn+q2DS%6%i0i|nG5-X<=h)vvJNo^&m+8`nY&K$XroOOK=+&z
za{2Z{EK;6>Z0UMBhdYz^AEQ74YvM5VE5xN8`76Mk35rxq+<lz(Nz|#Eh&)@5QF%s0
zDT^@fKn~;?M<H90+U=Q{JF<{lZTNpK<UZWQ9Lz()%B|gm^_DWlW-QD;i@ch8aoK3t
zl~;&5RfFiPOPG*x5|h%Eh})5kiRns2XPiL7aSaOZK8Bt3ZL7@;G=SICy`?=6Tgva`
zMf?F6A;jINm#fAw|E?O_c>&1lzPuJ3pz_aR)(BIJ&l@@|FMu@<+L9ym9m4+$>X#HE
z`%(V^SeE7geZU>->Oaj*taUmBEvMpE3NVw$eG%zO7a^p)UtegXkU|P6q+oc)FP%LQ
U;;T-KmH+?%07*qoM6N<$f?fI5LjV8(

literal 0
HcmV?d00001

diff --git a/plugin/platform/windows.png b/plugin/platform/windows.png
new file mode 100644
index 0000000000000000000000000000000000000000..306614963559d8f58a469eea2c6a585a76d8372c
GIT binary patch
literal 1832
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
W%kE|5@!&830000<MNUMnLSTZ8PGyw<

literal 0
HcmV?d00001

diff --git a/src/components/CommandCard.vue b/src/components/CommandCard.vue
index d7c7698..8488ab6 100644
--- a/src/components/CommandCard.vue
+++ b/src/components/CommandCard.vue
@@ -5,7 +5,7 @@
       'card-wrapper': 1,
       'card-wrapper-hover': isWarpperHover,
     }"
-    v-show="!cardStyleVars.hideCard"
+    v-show="canRunInConfigurationPage || cardStyle.code > 1"
     :id="commandInfo.features.code"
     @mouseenter="isWarpperHover = true"
     @mouseleave="if (!$refs.controlButtons?.isMenuOpen) isWarpperHover = false;"
@@ -14,7 +14,8 @@
     <ControlButtons
       ref="controlButtons"
       v-model:isVisible="isWarpperHover"
-      v-show="cardStyleVars.showButtons"
+      v-show="cardStyle.code > 1"
+      :toggleBtnSize="cardStyle.code === 3 ? 'xs' : 'sm'"
       :isActivated="isCommandActivated"
       :isRunButtonVisible="canRunInConfigurationPage"
       :commandInfo="commandInfo"
@@ -24,8 +25,8 @@
       :commandInfo="commandInfo"
       :isActivated="isCommandActivated"
       :isPlatformSupported="isPlatformSupported"
-      :cardStyleVars="cardStyleVars"
       :isHovered="isWarpperHover"
+      :cardStyleCode="cardStyle.code"
       @click="handleCardClick"
     />
   </div>
@@ -46,20 +47,6 @@ export default {
     };
   },
   computed: {
-    // 控制卡片样式的具体参数
-    cardStyleVars() {
-      return {
-        showButtons: this.cardStyle.code > 1,
-        showPlatforms: this.cardStyle.code > 2,
-        showLanguages: this.cardStyle.code > 1,
-        showBiggerTitle: this.cardStyle.code > 2,
-        logoPosition:
-          this.cardStyle.code > 1 ? "justify-start" : "justify-center",
-        fontPosition:
-          this.cardStyle.code > 1 ? "justify-end" : "justify-center",
-        hideCard: this.cardStyle.code === 1 && !this.canRunInConfigurationPage,
-      };
-    },
     isPlatformSupported() {
       let { platform } = this.commandInfo.features;
       return !_.isEmpty(platform) && !platform.includes(window.processPlatform)
@@ -85,7 +72,7 @@ export default {
   methods: {
     // 命令卡片点击事件
     handleCardClick() {
-      // 视图模式直接运行命令
+      // mini视图模式直接运行命令
       if (this.cardStyle.code === 1) {
         return this.$refs.controlButtons.runCommand();
       }
@@ -125,8 +112,9 @@ export default {
 }
 
 .card-wrapper {
-  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform;
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, width;
+  transform-origin: center center;
 }
 
 .card-wrapper-hover {
diff --git a/src/components/card/CommandCardContent.vue b/src/components/card/CommandCardContent.vue
index b23a9da..35e051c 100644
--- a/src/components/card/CommandCardContent.vue
+++ b/src/components/card/CommandCardContent.vue
@@ -4,169 +4,73 @@
     v-ripple
     :class="{ [`text-${disabledColor}`]: !isActivated, command: 1 }"
   >
-    <q-card-section>
-      <!-- logo -->
-      <div class="row" :class="cardStyleVars.logoPosition">
-        <q-avatar
-          square
-          size="48px"
-          :class="{
-            featureIco: 1,
-            featureIcoHover: isHovered,
-            'feature-disabled': !isActivated,
-          }"
-        >
-          <img :src="commandInfo.features.icon" />
-        </q-avatar>
-      </div>
-
-      <!-- 名称 -->
-      <div :class="'row ' + cardStyleVars.fontPosition">
-        <div
-          class="ellipsis"
-          :style="{
-            fontSize: cardStyleVars.showBiggerTitle ? '16px' : '14px',
-          }"
-          v-html="commandInfo.features.explain.trim() || '<br/>'"
-        />
-      </div>
-
-      <!-- 匹配模式 -->
-      <div class="row">
-        <div
-          :class="
-            'matchTypesBox flex q-gutter-xs ' + cardStyleVars.fontPosition
-          "
-        >
-          <span v-for="cmd in commandInfo.features.cmds" :key="cmd">
-            <CommandTypeTag
-              :cmd="cmd"
-              :isGrayColor="!isPlatformSupported || !isActivated"
-            />
-          </span>
-        </div>
-      </div>
-
-      <!-- 语言类型和适配系统 -->
-      <div
-        class="row justify-end items-center q-gutter-xs"
-        v-show="cardStyleVars.showLanguages"
-      >
-        <span :class="`text-${programColor}`">●</span>
-        <span class="text-subtitle2">{{ commandInfo.program }}</span>
-
-        <div class="q-gutter-xs" v-show="cardStyleVars.showPlatforms">
-          <span
-            v-for="platform in commandInfo.features.platform"
-            :key="platform"
-            :class="`iconfont icon-${platformTypes[platform].icon} text-${programColor}`"
-            style="font-size: 12px"
-          ></span>
-        </div>
-      </div>
-    </q-card-section>
+    <component
+      :is="currentLayout"
+      :commandInfo="commandInfo"
+      :isActivated="isActivated"
+      :isPlatformSupported="isPlatformSupported"
+      :isHovered="isHovered"
+      :style="iconHaloStyle"
+    />
   </q-card>
 </template>
 
 <script>
-import commandTypes from "js/options/commandTypes.js";
-import platformTypes from "js/options/platformTypes.js";
-import CommandTypeTag from "./CommandTypeTag.vue";
+import ListLayout from "./layouts/ListLayout.vue";
+import DenseLayout from "./layouts/DenseLayout.vue";
+import MiniLayout from "./layouts/MiniLayout.vue";
 
 export default {
   components: {
-    CommandTypeTag,
+    ListLayout,
+    DenseLayout,
+    MiniLayout,
   },
   props: {
     commandInfo: Object,
     isActivated: Boolean,
-    cardStyleVars: Object,
+    cardStyleCode: Number,
     isPlatformSupported: Boolean,
     isHovered: Boolean,
   },
   emits: ["click"],
-  data() {
-    return {
-      commandTypes,
-      platformTypes,
-    };
-  },
   computed: {
-    programColor() {
-      return this.isActivated
-        ? this.$root.programs[this.commandInfo.program].color
-        : this.disabledColor;
+    currentLayout() {
+      switch (this.cardStyleCode) {
+        case 3:
+          return "ListLayout";
+        case 2:
+          return "DenseLayout";
+        case 1:
+          return "MiniLayout";
+        default:
+          return "DenseLayout";
+      }
     },
     disabledColor() {
       return this.$q.dark.isActive ? "grey-6" : "grey-5";
     },
-  },
-  mounted() {
-    // 设置图标URL作为光晕背景
-    this.$el.style.setProperty(
-      "--icon-url",
-      `url(${this.commandInfo.features.icon})`
-    );
-  },
-  watch: {
-    "commandInfo.features.icon"(newVal) {
-      this.$el.style.setProperty("--icon-url", `url(${newVal})`);
+    iconHaloStyle() {
+      return {
+        "--icon-url": `url(${this.commandInfo.features.icon})`,
+      };
     },
   },
 };
 </script>
 
 <style scoped>
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.matchTypesBox {
-  height: 23px;
-  width: 100%;
-  overflow: hidden;
-  text-align: right;
-}
-
-.featureIco {
-  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
-  will-change: transform;
-  position: relative;
-  z-index: 1;
-}
-
-.featureIcoHover {
-  transform: scale(1.08) translateY(-2px);
-}
-
-.featureIco::after {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
-  opacity: 0;
-  background-image: var(--icon-url);
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-  filter: blur(8px) brightness(1.1);
-  transform: scale(1.05);
-  pointer-events: none;
-}
-
-.featureIcoHover::after {
-  opacity: 0.8;
-  transform: scale(1.1);
-}
-
-.feature-disabled {
-  opacity: 0.5;
-  filter: grayscale(100%);
+/* 保留卡片基础样式 */
+.q-card.command {
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.3s ease;
+  background: rgba(255, 255, 255, 0.3) !important;
+  backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
+  -webkit-backdrop-filter: blur(
+    calc(var(--glass-effect-strength) * 1px)
+  ) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.07);
 }
 </style>
diff --git a/src/components/card/CommandTypeTag.vue b/src/components/card/CommandTypeTag.vue
index 2c020fe..23c2a8d 100644
--- a/src/components/card/CommandTypeTag.vue
+++ b/src/components/card/CommandTypeTag.vue
@@ -1,64 +1,69 @@
 <template>
-  <span v-if="typeof cmd === 'string'">
-    <q-badge rounded :class="badgeClass">
-      <q-icon class="q-mr-xs" :name="commandTypes.key.icon" />
-      <span class="badge-text">{{ cmd }}</span>
-    </q-badge>
-    <q-tooltip>
-      <div class="text-subtitle2">{{ cmd }}</div>
-    </q-tooltip>
-  </span>
-  <span v-else-if="cmd.type === 'window' && cmd.match">
-    <q-badge rounded :class="badgeClass">
-      <q-icon class="q-mr-xs" :name="commandTypes.window.icon" />
-      <span class="badge-text">{{ cmd.match.app[0] }}</span>
-    </q-badge>
-    <q-tooltip>
-      <div class="text-subtitle2" v-for="app in cmd.match.app" :key="app">
-        {{ app }}
-      </div>
-    </q-tooltip>
-  </span>
-  <span v-else-if="cmd.type === 'files'">
-    <q-badge rounded :class="badgeClass">
-      <q-icon class="q-mr-xs" :name="commandTypes.files.icon" />
-      <span class="badge-text">{{ cmd.match || "所有文件" }}</span>
-    </q-badge>
-    <q-tooltip>
-      <div class="text-subtitle2">
-        {{ cmd.match || "所有文件" }}
-      </div>
-    </q-tooltip>
-  </span>
-  <span v-else-if="cmd.type === 'regex'">
-    <q-badge rounded :class="badgeClass">
-      <q-icon class="q-mr-xs" :name="commandTypes.regex.icon" />
-      <span class="badge-text">{{ cmd.match }}</span>
-    </q-badge>
-    <q-tooltip>
-      <div class="text-subtitle2">
-        {{ cmd.match }}
-      </div>
-    </q-tooltip>
-  </span>
-  <span v-else-if="cmd.type === 'over'">
-    <q-badge rounded :class="badgeClass">
-      <q-icon class="q-mr-xs" :name="commandTypes.over.icon" />所有文本
-    </q-badge>
-  </span>
-  <span v-else-if="cmd.type === 'img'">
-    <q-badge rounded :class="badgeClass">
-      <q-icon class="q-mr-xs" :name="commandTypes.img.icon" />图片
-    </q-badge>
-  </span>
+  <div class="matchTypesBox">
+    <div v-for="cmd in cmds" :key="cmd">
+      <span v-if="typeof cmd === 'string'">
+        <q-badge rounded :class="getBadgeClass(cmd)">
+          <q-icon class="q-mr-xs" :name="commandTypes.key.icon" />
+          <span class="badge-text">{{ cmd }}</span>
+        </q-badge>
+        <q-tooltip>
+          <div class="text-subtitle2">{{ cmd }}</div>
+        </q-tooltip>
+      </span>
+      <span v-else-if="cmd.type === 'window' && cmd.match">
+        <q-badge rounded :class="getBadgeClass(cmd)">
+          <q-icon class="q-mr-xs" :name="commandTypes.window.icon" />
+          <span class="badge-text">{{ cmd.match.app[0] }}</span>
+        </q-badge>
+        <q-tooltip>
+          <div class="text-subtitle2" v-for="app in cmd.match.app" :key="app">
+            {{ app }}
+          </div>
+        </q-tooltip>
+      </span>
+      <span v-else-if="cmd.type === 'files'">
+        <q-badge rounded :class="getBadgeClass(cmd)">
+          <q-icon class="q-mr-xs" :name="commandTypes.files.icon" />
+          <span class="badge-text">{{ cmd.match || "所有文件" }}</span>
+        </q-badge>
+        <q-tooltip>
+          <div class="text-subtitle2">
+            {{ cmd.match || "所有文件" }}
+          </div>
+        </q-tooltip>
+      </span>
+      <span v-else-if="cmd.type === 'regex'">
+        <q-badge rounded :class="getBadgeClass(cmd)">
+          <q-icon class="q-mr-xs" :name="commandTypes.regex.icon" />
+          <span class="badge-text">{{ cmd.match }}</span>
+        </q-badge>
+        <q-tooltip>
+          <div class="text-subtitle2">
+            {{ cmd.match }}
+          </div>
+        </q-tooltip>
+      </span>
+      <span v-else-if="cmd.type === 'over'">
+        <q-badge rounded :class="getBadgeClass(cmd)">
+          <q-icon class="q-mr-xs" :name="commandTypes.over.icon" />所有文本
+        </q-badge>
+      </span>
+      <span v-else-if="cmd.type === 'img'">
+        <q-badge rounded :class="getBadgeClass(cmd)">
+          <q-icon class="q-mr-xs" :name="commandTypes.img.icon" />图片
+        </q-badge>
+      </span>
+    </div>
+  </div>
 </template>
 
 <script>
 import commandTypes from "js/options/commandTypes.js";
 
 export default {
+  name: "CommandTypeTag",
   props: {
-    cmd: [String, Object],
+    cmds: Array,
     isGrayColor: Boolean,
   },
   data() {
@@ -66,21 +71,28 @@ export default {
       commandTypes,
     };
   },
-  computed: {
-    badgeClass() {
-      return this.isGrayColor
-        ? this.$q.dark.isActive
-          ? "text-grey-6 bg-grey-9"
-          : "bg-grey-5"
-        : "bg-" + this.commandTypes[this.cmd.type || "key"].color;
+  methods: {
+    getBadgeClass(cmd) {
+      if (this.isGrayColor) {
+        return this.$q.dark.isActive ? "text-grey-6 bg-grey-9" : "bg-grey-4";
+      }
+      const color = this.commandTypes[cmd.type || "key"].color;
+      return "bg-" + color + (this.$q.dark.isActive ? "-10" : "-4");
     },
   },
 };
 </script>
 
 <style scoped>
+.matchTypesBox {
+  height: 23px;
+  display: flex;
+  overflow: hidden;
+  gap: 2px;
+}
+
 .q-badge {
-  font-size: 13px;
+  font-size: 12px;
   margin: 0 1px;
   max-width: 120px;
   white-space: nowrap;
@@ -93,4 +105,19 @@ export default {
   text-overflow: ellipsis;
   vertical-align: bottom;
 }
+
+.tags-container {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: fit-content;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.tag-wrapper {
+  display: inline-flex;
+  white-space: nowrap;
+}
 </style>
diff --git a/src/components/card/ControlButtons.vue b/src/components/card/ControlButtons.vue
index 0e44d13..6728af2 100644
--- a/src/components/card/ControlButtons.vue
+++ b/src/components/card/ControlButtons.vue
@@ -1,12 +1,13 @@
 <template>
   <div>
     <!-- 开关按钮 -->
-    <div class="absolute" style="z-index: 1; left: 20px; bottom: 16px">
+    <div class="absolute" style="z-index: 1; left: 19px; bottom: 16px">
       <q-toggle
         :model-value="isActivated"
         checked-icon="flash_on"
         color="orange-6"
         @click="toggleCommandActivated"
+        :size="toggleBtnSize"
       />
     </div>
 
@@ -24,8 +25,8 @@
         icon="play_arrow"
         v-show="isRunButtonVisible"
         @click="runCommand"
+        size="12px"
       >
-        <q-tooltip anchor="top middle" self="center middle">运行</q-tooltip>
       </q-btn>
 
       <q-btn
@@ -36,8 +37,8 @@
         :color="!!cronExp ? 'amber' : 'blue-9'"
         :icon="!!cronExp ? 'timer' : 'insights'"
         @click="isMenuOpen = true"
+        size="12px"
       >
-        <q-tooltip anchor="top middle" self="center middle">设置</q-tooltip>
         <q-menu
           transition-show="jump-down"
           transition-hide="jump-up"
@@ -93,8 +94,8 @@
         color="red"
         icon="close"
         @click="removeCommand"
+        size="12px"
       >
-        <q-tooltip anchor="top middle" self="center middle">删除</q-tooltip>
       </q-btn>
     </div>
 
@@ -121,6 +122,7 @@ export default {
     isActivated: Boolean,
     commandInfo: Object,
     isRunButtonVisible: Boolean,
+    toggleBtnSize: String,
   },
   emits: ["update:isVisible", "commandChanged"],
   data() {
diff --git a/src/components/card/layouts/DenseLayout.vue b/src/components/card/layouts/DenseLayout.vue
new file mode 100644
index 0000000..98ea31e
--- /dev/null
+++ b/src/components/card/layouts/DenseLayout.vue
@@ -0,0 +1,96 @@
+<template>
+  <q-card-section>
+    <!-- logo -->
+    <div class="row">
+      <q-avatar
+        square
+        size="48px"
+        :class="{
+          featureIco: 1,
+          featureIcoHover: isHovered,
+          'feature-disabled': !isActivated,
+        }"
+      >
+        <img :src="commandInfo.features.icon" />
+      </q-avatar>
+    </div>
+
+    <!-- 名称 -->
+    <div class="row justify-end">
+      <div
+        class="text-ellipsis"
+        v-html="commandInfo.features.explain.trim() || '<br/>'"
+      />
+    </div>
+
+    <!-- 匹配模式 -->
+    <div class="row justify-end">
+      <CommandTypeTag
+        :cmds="commandInfo.features.cmds"
+        :isGrayColor="!isPlatformSupported || !isActivated"
+      />
+    </div>
+
+    <!-- 语言类型 -->
+    <div
+      :class="{
+        'platform-icons': 1,
+        'platform-icons-disabled': !isActivated,
+      }"
+    >
+      <q-img
+        v-for="platform in commandInfo.features.platform"
+        :key="platform"
+        :src="platformTypes[platform].icon"
+        width="16px"
+      />
+      <div>|</div>
+      <q-img :src="$root.programs[commandInfo.program].icon" width="16px" />
+      <div class="text-subtitle2">{{ programName }}</div>
+    </div>
+  </q-card-section>
+</template>
+
+<script>
+import CommandTypeTag from "../CommandTypeTag.vue";
+import platformTypes from "js/options/platformTypes.js";
+
+export default {
+  name: "DenseLayout",
+  components: { CommandTypeTag },
+  props: {
+    commandInfo: Object,
+    isActivated: Boolean,
+    isPlatformSupported: Boolean,
+    isHovered: Boolean,
+  },
+  data() {
+    return {
+      platformTypes,
+    };
+  },
+  computed: {
+    program() {
+      return this.$root.programs[this.commandInfo.program];
+    },
+    programName() {
+      return this.program.shortName ?? this.program.name;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.platform-icons {
+  display: flex;
+  gap: 2px;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  font-size: 14px;
+}
+</style>
diff --git a/src/components/card/layouts/ListLayout.vue b/src/components/card/layouts/ListLayout.vue
new file mode 100644
index 0000000..49de627
--- /dev/null
+++ b/src/components/card/layouts/ListLayout.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="wrapper">
+    <!-- logo -->
+    <div class="row items-center q-gutter-sm">
+      <q-avatar
+        square
+        size="38px"
+        :class="{
+          featureIco: 1,
+          featureIcoHover: isHovered,
+          'feature-disabled': !isActivated,
+        }"
+      >
+        <img :src="commandInfo.features.icon" />
+      </q-avatar>
+      <div class="column">
+        <!-- 名称 -->
+        <div
+          class="text-ellipsis"
+          v-html="commandInfo.features.explain.trim() || '<br/>'"
+        />
+        <!-- 匹配模式 -->
+        <CommandTypeTag
+          :cmds="commandInfo.features.cmds"
+          :isGrayColor="!isPlatformSupported || !isActivated"
+        />
+      </div>
+    </div>
+    <!-- 语言类型 -->
+    <div
+      :class="{
+        'platform-icons': 1,
+        'platform-icons-disabled': !isActivated,
+      }"
+    >
+      <q-img
+        v-for="platform in commandInfo.features.platform"
+        :key="platform"
+        :src="platformTypes[platform].icon"
+        width="16px"
+      />
+      <div>|</div>
+      <q-img :src="program.icon" width="16px" />
+      <div class="text-subtitle2">{{ program.name }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CommandTypeTag from "../CommandTypeTag.vue";
+import platformTypes from "js/options/platformTypes.js";
+
+export default {
+  name: "ListLayout",
+  components: { CommandTypeTag },
+  props: {
+    commandInfo: Object,
+    isActivated: Boolean,
+    isPlatformSupported: Boolean,
+    isHovered: Boolean,
+  },
+  data() {
+    return {
+      platformTypes,
+    };
+  },
+  computed: {
+    program() {
+      return this.$root.programs[this.commandInfo.program];
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 网格布局 */
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+</style>
diff --git a/src/components/card/layouts/MiniLayout.vue b/src/components/card/layouts/MiniLayout.vue
new file mode 100644
index 0000000..919b355
--- /dev/null
+++ b/src/components/card/layouts/MiniLayout.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="mini-layout">
+    <!-- logo -->
+    <div class="row justify-center">
+      <q-avatar
+        square
+        size="48px"
+        :class="{
+          featureIco: 1,
+          featureIcoHover: isHovered,
+        }"
+      >
+        <img :src="commandInfo.features.icon" />
+      </q-avatar>
+    </div>
+
+    <!-- 名称 -->
+    <div class="row justify-center w-100">
+      <div
+        class="text-ellipsis text-center"
+        v-html="commandInfo.features.explain.trim() || '<br/>'"
+      />
+    </div>
+
+    <!-- 匹配模式 -->
+    <div class="row justify-center w-100">
+      <CommandTypeTag :cmds="commandInfo.features.cmds" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CommandTypeTag from "../CommandTypeTag.vue";
+import platformTypes from "js/options/platformTypes.js";
+import { computed } from "vue";
+
+export default {
+  name: "MiniLayout",
+  components: { CommandTypeTag },
+  props: {
+    commandInfo: Object,
+    isHovered: Boolean,
+  },
+  setup() {
+    return {
+      platformTypes,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.mini-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 16px;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 90%;
+  margin: 0 auto;
+  padding: 0 8px;
+  font-size: 14px;
+}
+</style>
diff --git a/src/css/app.css b/src/css/app.css
index 0e95073..7a09a2b 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -1,31 +1,4 @@
 /* app global css */
-@font-face {
-  font-family: "iconfont";
-  src: url("../fonts/iconfont.woff2?t=1649900426635") format("woff2"),
-    url("../fonts/iconfont.woff?t=1649900426635") format("woff"),
-    url("../fonts/iconfont.ttf?t=1649900426635") format("truetype");
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-linux:before {
-  content: "\e6c1";
-}
-
-.icon-macos1:before {
-  content: "\e6b2";
-}
-
-.icon-windows1:before {
-  content: "\e6bb";
-}
-
 :root {
   --q-dark: #464646;
   --q-dark-page: #303133;
@@ -221,3 +194,53 @@ body.body--dark.glass-effect-menu .q-menu {
 .body--dark .q-menu .q-field__control {
   background: rgba(0, 0, 0, 0.3) !important;
 }
+
+/* 添加图标光晕效果 */
+.featureIco {
+  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+  will-change: transform;
+  position: relative;
+  z-index: 1;
+}
+
+.featureIcoHover {
+  transform: scale(1.08) translateY(-2px);
+}
+
+.featureIco::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+  opacity: 0;
+  background-image: var(--icon-url);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  filter: blur(8px) brightness(1.1);
+  transform: scale(1.05);
+  pointer-events: none;
+}
+
+.featureIcoHover::after {
+  opacity: 0.8;
+  transform: scale(1.1);
+}
+
+.feature-disabled,
+.platform-icons-disabled {
+  opacity: 0.5;
+  filter: grayscale(100%);
+}
+
+.platform-icons {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: 12px;
+}
diff --git a/src/fonts/iconfont.ttf b/src/fonts/iconfont.ttf
deleted file mode 100644
index 0df3f7a278ef85715c1e329c6ede3e2d5a47478d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3292
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

diff --git a/src/fonts/iconfont.woff b/src/fonts/iconfont.woff
deleted file mode 100644
index d82031c90d5b339d4c7b4c3f1ccacc923c6d09bd..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2252
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

diff --git a/src/fonts/iconfont.woff2 b/src/fonts/iconfont.woff2
deleted file mode 100644
index 94d0c99ce90e6436e5e083d336a46348f7f1829c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1816
zcmV+z2j}>APew8T0RR9100$TV3jhEB01Vs!00zkb0RR9100000000000000000000
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
G0002Xw_t(*

diff --git a/src/js/options/platformTypes.js b/src/js/options/platformTypes.js
index 64baf0d..7881e61 100644
--- a/src/js/options/platformTypes.js
+++ b/src/js/options/platformTypes.js
@@ -2,17 +2,17 @@ const platformTypes = {
     win32: {
         name: "win32",
         label: "Windows",
-        icon: "windows1"
+        icon: "platform/windows.png"
     },
     darwin: {
         name: "darwin",
         label: "MacOS",
-        icon: "macos1"
+        icon: "platform/macos.png"
     },
     linux: {
         name: "linux",
         label: "Linux",
-        icon: "linux"
+        icon: "platform/linux.png"
     }
 }
 
diff --git a/src/js/options/programs.js b/src/js/options/programs.js
index d8f6b06..82904de 100644
--- a/src/js/options/programs.js
+++ b/src/js/options/programs.js
@@ -3,127 +3,133 @@
  */
 
 const programs = {
-    quickcommand: {
-        name: "quickcommand",
-        highlight: "javascript",
-        bin: "",
-        argv: "",
-        ext: "",
-        color: "primary",
-        icon: "logo/quickcommand.png",
-    },
-    html: {
-        name: "html",
-        bin: "",
-        argv: "",
-        ext: "",
-        color: "deep-orange",
-        icon: "logo/html.png",
-    },
-    shell: {
-        name: "shell",
-        bin: "bash",
-        argv: "",
-        ext: "sh",
-        color: "green-6",
-        icon: "logo/shell.png",
-    },
-    applescript: {
-        name: "applescript",
-        bin: "osascript",
-        argv: "",
-        ext: "scpt",
-        color: "cyan-10",
-        icon: "logo/applescript.png",
-    },
-    cmd: {
-        name: "cmd",
-        highlight: "bat",
-        bin: "",
-        argv: "",
-        ext: "bat",
-        color: "orange-10",
-        icon: "logo/cmd.png",
-    },
-    powershell: {
-        name: "powershell",
-        bin: "powershell",
-        argv: "-NoProfile -File",
-        ext: "ps1",
-        color: "amber-14",
-        icon: "logo/powershell.png",
-    },
-    python: {
-        name: "python",
-        bin: "python",
-        argv: "-u",
-        ext: "py",
-        color: "light-blue-10",
-        icon: "logo/python.png",
-    },
-    javascript: {
-        name: "javascript",
-        bin: "node",
-        argv: "",
-        ext: "js",
-        color: "teal",
-        icon: "logo/javascript.png",
-    },
-    ruby: {
-        name: "ruby",
-        bin: "ruby",
-        argv: "",
-        ext: "rb",
-        color: "red-10",
-        icon: "logo/ruby.png",
-    },
-    php: {
-        name: "php",
-        bin: "php",
-        argv: "",
-        ext: "php",
-        color: "deep-purple",
-        icon: "logo/php.png",
-    },
-    c: {
-        name: "c",
-        bin: "gcc",
-        argv: "-o",
-        ext: "c",
-        color: "blue-7",
-        icon: "logo/c.png",
-    },
-    csharp: {
-        name: "csharp",
-        bin: "C:\\Windows\\Microsoft.NET\\Framework\\v4.0.30319\\csc.exe",
-        argv: "/Nologo",
-        ext: "cs",
-        color: "light-blue-13",
-        icon: "logo/csharp.png",
-    },
-    lua: {
-        name: "lua",
-        bin: "lua",
-        argv: "",
-        ext: "lua",
-        color: "light-green-8",
-        icon: "logo/lua.png",
-    },
-    perl: {
-        name: "perl",
-        bin: "perl",
-        argv: "",
-        ext: "pl",
-        color: "purple",
-        icon: "logo/perl.png"
-    },
-    custom: {
-        name: "custom",
-        bin: "",
-        argv: "",
-        ext: "",
-        color: "indigo-6",
-        icon: "logo/custom.png",
-    },
+  quickcommand: {
+    name: "quickcommand",
+    highlight: "javascript",
+    bin: "",
+    argv: "",
+    ext: "",
+    color: "primary",
+    icon: "logo/quickcommand.png",
+    shortName: "qc",
+  },
+  html: {
+    name: "html",
+    bin: "",
+    argv: "",
+    ext: "",
+    color: "deep-orange",
+    icon: "logo/html.png",
+  },
+  shell: {
+    name: "shell",
+    bin: "bash",
+    argv: "",
+    ext: "sh",
+    color: "green-6",
+    icon: "logo/shell.png",
+  },
+  applescript: {
+    name: "applescript",
+    bin: "osascript",
+    argv: "",
+    ext: "scpt",
+    color: "cyan-10",
+    icon: "logo/applescript.png",
+    shortName: "ascpt",
+  },
+  cmd: {
+    name: "cmd",
+    highlight: "bat",
+    bin: "",
+    argv: "",
+    ext: "bat",
+    color: "orange-10",
+    icon: "logo/cmd.png",
+  },
+  powershell: {
+    name: "powershell",
+    bin: "powershell",
+    argv: "-NoProfile -File",
+    ext: "ps1",
+    color: "amber-14",
+    icon: "logo/powershell.png",
+    shortName: "ps",
+  },
+  python: {
+    name: "python",
+    bin: "python",
+    argv: "-u",
+    ext: "py",
+    color: "light-blue-10",
+    icon: "logo/python.png",
+    shortName: "py",
+  },
+  javascript: {
+    name: "javascript",
+    bin: "node",
+    argv: "",
+    ext: "js",
+    color: "teal",
+    icon: "logo/javascript.png",
+    shortName: "js",
+  },
+  ruby: {
+    name: "ruby",
+    bin: "ruby",
+    argv: "",
+    ext: "rb",
+    color: "red-10",
+    icon: "logo/ruby.png",
+  },
+  php: {
+    name: "php",
+    bin: "php",
+    argv: "",
+    ext: "php",
+    color: "deep-purple",
+    icon: "logo/php.png",
+  },
+  c: {
+    name: "c",
+    bin: "gcc",
+    argv: "-o",
+    ext: "c",
+    color: "blue-7",
+    icon: "logo/c.png",
+  },
+  csharp: {
+    name: "csharp",
+    bin: "C:\\Windows\\Microsoft.NET\\Framework\\v4.0.30319\\csc.exe",
+    argv: "/Nologo",
+    ext: "cs",
+    color: "light-blue-13",
+    icon: "logo/csharp.png",
+    shortName: "c#",
+  },
+  lua: {
+    name: "lua",
+    bin: "lua",
+    argv: "",
+    ext: "lua",
+    color: "light-green-8",
+    icon: "logo/lua.png",
+  },
+  perl: {
+    name: "perl",
+    bin: "perl",
+    argv: "",
+    ext: "pl",
+    color: "purple",
+    icon: "logo/perl.png",
+  },
+  custom: {
+    name: "custom",
+    bin: "",
+    argv: "",
+    ext: "",
+    color: "indigo-6",
+    icon: "logo/custom.png",
+  },
 };
-export default programs
+export default programs;
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index e7da790..ac360c0 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -20,7 +20,7 @@
     <!-- 面板视图不显示标签栏 -->
     <q-scroll-area
       v-show="commandCardStyle !== 'mini'"
-      class="absolute-left"
+      class="absolute-left tag-bar"
       :thumb-style="{
         width: '2px',
       }"
@@ -101,7 +101,7 @@
     </q-tab-panels>
     <!-- 底栏 -->
     <div
-      class="absolute-bottom"
+      class="absolute-bottom footer-bar"
       :style="{
         height: footerBarHeight,
         left: tabBarWidth,
@@ -153,23 +153,17 @@
             >
               <template v-slot:normal>
                 <q-icon name="dashboard" />
-                <q-tooltip>按两列排列的基础视图</q-tooltip>
+                <q-tooltip>双列视图</q-tooltip>
               </template>
               <template v-slot:dense>
                 <q-icon name="apps" />
-                <q-tooltip
-                  >按三列排列的紧凑视图，但不会显示适用的操作系统</q-tooltip
-                >
+                <q-tooltip>三列视图</q-tooltip>
               </template>
               <template v-slot:mini>
                 <q-icon name="view_comfy" />
                 <q-tooltip
-                  >按四列排列的面板视图<br />
-                  老版本的「快捷面板」已被弃用，取而代之的是新版的「面板视图」<br />
-                  注意：<br />
-                  1.未启用、匹配类型为窗口的命令在此视图下不显示<br />
-                  2.只显示图标描述和匹配类型<br />
-                  3.点击卡片时会直接运行命令而不是编辑命令</q-tooltip
+                  >五列面板视图<br />
+                  未启用、匹配类型为窗口的命令在此视图下不显示</q-tooltip
                 >
               </template>
             </q-btn-toggle>
@@ -739,7 +733,7 @@ export default {
 
 /* 面板过渡效果 */
 .q-tab-panels {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   background: none !important;
 }
 
@@ -804,4 +798,41 @@ body.body--dark.glass-effect-menu .absolute-bottom {
   position: absolute;
   z-index: 1;
 }
+
+/* 底栏过渡动画 */
+.footer-bar {
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: left;
+}
+
+/* 底栏输入框样式 */
+.absolute-bottom .q-field__control {
+  background: rgba(255, 255, 255, 0.15) !important;
+  border-radius: 4px;
+}
+
+.body--dark .absolute-bottom .q-field__control {
+  background: rgba(0, 0, 0, 0.2) !important;
+}
+
+/* 标签栏过渡动画 */
+.tag-bar {
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: width, opacity;
+  opacity: 1;
+}
+
+/* 标签栏隐藏时的样式 */
+.tag-bar[style*="display: none"] {
+  opacity: 0;
+  width: 0 !important;
+}
+
+/* 面板过渡效果 */
+.q-tab-panels {
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  background: none !important;
+}
+
+/* ... 其他样式保持不变 ... */
 </style>