二列卡片视图布局调整

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);
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform;
+  will-change: transform, width;
+  transform-origin: center center;
 }
 
 .card-wrapper-hover {

src/components/card/CommandCardContent.vue

@@ -4,169 +4,73 @@
     v-ripple
     :class="{ [`text-${disabledColor}`]: !isActivated, command: 1 }"
   >
-    <q-card-section>
+    <component
-      <!-- logo -->
+      :is="currentLayout"
-      <div class="row" :class="cardStyleVars.logoPosition">
+      :commandInfo="commandInfo"
-        <q-avatar
+      :isActivated="isActivated"
-          square
+      :isPlatformSupported="isPlatformSupported"
-          size="48px"
+      :isHovered="isHovered"
-          :class="{
+      :style="iconHaloStyle"
-            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>
   </q-card>
 </template>
 
 <script>
-import commandTypes from "js/options/commandTypes.js";
+import ListLayout from "./layouts/ListLayout.vue";
-import platformTypes from "js/options/platformTypes.js";
+import DenseLayout from "./layouts/DenseLayout.vue";
-import CommandTypeTag from "./CommandTypeTag.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() {
+    currentLayout() {
-      return this.isActivated
+      switch (this.cardStyleCode) {
-        ? this.$root.programs[this.commandInfo.program].color
+        case 3:
-        : this.disabledColor;
+          return "ListLayout";
+        case 2:
+          return "DenseLayout";
+        case 1:
+          return "MiniLayout";
+        default:
+          return "DenseLayout";
+      }
     },
     disabledColor() {
       return this.$q.dark.isActive ? "grey-6" : "grey-5";
     },
-  },
+    iconHaloStyle() {
-  mounted() {
+      return {
-    // 设置图标URL作为光晕背景
+        "--icon-url": `url(${this.commandInfo.features.icon})`,
-    this.$el.style.setProperty(
+      };
-      "--icon-url",
-      `url(${this.commandInfo.features.icon})`
-    );
-  },
-  watch: {
-    "commandInfo.features.icon"(newVal) {
-      this.$el.style.setProperty("--icon-url", `url(${newVal})`);
     },
   },
 };
 </script>
 
 <style scoped>
-.ellipsis {
+/* 保留卡片基础样式 */
-  overflow: hidden;
+.q-card.command {
-  text-overflow: ellipsis;
+  cursor: pointer;
-  white-space: nowrap;
+  user-select: none;
-}
+  transition: all 0.3s ease;
-
+  background: rgba(255, 255, 255, 0.3) !important;
-.matchTypesBox {
+  backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
-  height: 23px;
+  -webkit-backdrop-filter: blur(
-  width: 100%;
+    calc(var(--glass-effect-strength) * 1px)
-  overflow: hidden;
+  ) !important;
-  text-align: right;
+  border: 1px solid rgba(255, 255, 255, 0.1);
-}
+  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.07);
-
-.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%);
 }
 </style>

src/components/card/CommandTypeTag.vue

@@ -1,64 +1,69 @@
 <template>
-  <span v-if="typeof cmd === 'string'">
+  <div class="matchTypesBox">
-    <q-badge rounded :class="badgeClass">
+    <div v-for="cmd in cmds" :key="cmd">
-      <q-icon class="q-mr-xs" :name="commandTypes.key.icon" />
+      <span v-if="typeof cmd === 'string'">
-      <span class="badge-text">{{ cmd }}</span>
+        <q-badge rounded :class="getBadgeClass(cmd)">
-    </q-badge>
+          <q-icon class="q-mr-xs" :name="commandTypes.key.icon" />
-    <q-tooltip>
+          <span class="badge-text">{{ cmd }}</span>
-      <div class="text-subtitle2">{{ cmd }}</div>
+        </q-badge>
-    </q-tooltip>
+        <q-tooltip>
-  </span>
+          <div class="text-subtitle2">{{ cmd }}</div>
-  <span v-else-if="cmd.type === 'window' && cmd.match">
+        </q-tooltip>
-    <q-badge rounded :class="badgeClass">
+      </span>
-      <q-icon class="q-mr-xs" :name="commandTypes.window.icon" />
+      <span v-else-if="cmd.type === 'window' && cmd.match">
-      <span class="badge-text">{{ cmd.match.app[0] }}</span>
+        <q-badge rounded :class="getBadgeClass(cmd)">
-    </q-badge>
+          <q-icon class="q-mr-xs" :name="commandTypes.window.icon" />
-    <q-tooltip>
+          <span class="badge-text">{{ cmd.match.app[0] }}</span>
-      <div class="text-subtitle2" v-for="app in cmd.match.app" :key="app">
+        </q-badge>
-        {{ app }}
+        <q-tooltip>
-      </div>
+          <div class="text-subtitle2" v-for="app in cmd.match.app" :key="app">
-    </q-tooltip>
+            {{ app }}
-  </span>
+          </div>
-  <span v-else-if="cmd.type === 'files'">
+        </q-tooltip>
-    <q-badge rounded :class="badgeClass">
+      </span>
-      <q-icon class="q-mr-xs" :name="commandTypes.files.icon" />
+      <span v-else-if="cmd.type === 'files'">
-      <span class="badge-text">{{ cmd.match || "所有文件" }}</span>
+        <q-badge rounded :class="getBadgeClass(cmd)">
-    </q-badge>
+          <q-icon class="q-mr-xs" :name="commandTypes.files.icon" />
-    <q-tooltip>
+          <span class="badge-text">{{ cmd.match || "所有文件" }}</span>
-      <div class="text-subtitle2">
+        </q-badge>
-        {{ cmd.match || "所有文件" }}
+        <q-tooltip>
-      </div>
+          <div class="text-subtitle2">
-    </q-tooltip>
+            {{ cmd.match || "所有文件" }}
-  </span>
+          </div>
-  <span v-else-if="cmd.type === 'regex'">
+        </q-tooltip>
-    <q-badge rounded :class="badgeClass">
+      </span>
-      <q-icon class="q-mr-xs" :name="commandTypes.regex.icon" />
+      <span v-else-if="cmd.type === 'regex'">
-      <span class="badge-text">{{ cmd.match }}</span>
+        <q-badge rounded :class="getBadgeClass(cmd)">
-    </q-badge>
+          <q-icon class="q-mr-xs" :name="commandTypes.regex.icon" />
-    <q-tooltip>
+          <span class="badge-text">{{ cmd.match }}</span>
-      <div class="text-subtitle2">
+        </q-badge>
-        {{ cmd.match }}
+        <q-tooltip>
-      </div>
+          <div class="text-subtitle2">
-    </q-tooltip>
+            {{ cmd.match }}
-  </span>
+          </div>
-  <span v-else-if="cmd.type === 'over'">
+        </q-tooltip>
-    <q-badge rounded :class="badgeClass">
+      </span>
-      <q-icon class="q-mr-xs" :name="commandTypes.over.icon" />所有文本
+      <span v-else-if="cmd.type === 'over'">
-    </q-badge>
+        <q-badge rounded :class="getBadgeClass(cmd)">
-  </span>
+          <q-icon class="q-mr-xs" :name="commandTypes.over.icon" />所有文本
-  <span v-else-if="cmd.type === 'img'">
+        </q-badge>
-    <q-badge rounded :class="badgeClass">
+      </span>
-      <q-icon class="q-mr-xs" :name="commandTypes.img.icon" />图片
+      <span v-else-if="cmd.type === 'img'">
-    </q-badge>
+        <q-badge rounded :class="getBadgeClass(cmd)">
-  </span>
+          <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: {
+  methods: {
-    badgeClass() {
+    getBadgeClass(cmd) {
-      return this.isGrayColor
+      if (this.isGrayColor) {
-        ? this.$q.dark.isActive
+        return this.$q.dark.isActive ? "text-grey-6 bg-grey-9" : "bg-grey-4";
-          ? "text-grey-6 bg-grey-9"
+      }
-          : "bg-grey-5"
+      const color = this.commandTypes[cmd.type || "key"].color;
-        : "bg-" + this.commandTypes[this.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>

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() {

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>

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>

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>

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;
+}

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"
     }
 }
 

src/js/options/programs.js

@@ -3,127 +3,133 @@
  */
 
 const programs = {
-    quickcommand: {
+  quickcommand: {
-        name: "quickcommand",
+    name: "quickcommand",
-        highlight: "javascript",
+    highlight: "javascript",
-        bin: "",
+    bin: "",
-        argv: "",
+    argv: "",
-        ext: "",
+    ext: "",
-        color: "primary",
+    color: "primary",
-        icon: "logo/quickcommand.png",
+    icon: "logo/quickcommand.png",
-    },
+    shortName: "qc",
-    html: {
+  },
-        name: "html",
+  html: {
-        bin: "",
+    name: "html",
-        argv: "",
+    bin: "",
-        ext: "",
+    argv: "",
-        color: "deep-orange",
+    ext: "",
-        icon: "logo/html.png",
+    color: "deep-orange",
-    },
+    icon: "logo/html.png",
-    shell: {
+  },
-        name: "shell",
+  shell: {
-        bin: "bash",
+    name: "shell",
-        argv: "",
+    bin: "bash",
-        ext: "sh",
+    argv: "",
-        color: "green-6",
+    ext: "sh",
-        icon: "logo/shell.png",
+    color: "green-6",
-    },
+    icon: "logo/shell.png",
-    applescript: {
+  },
-        name: "applescript",
+  applescript: {
-        bin: "osascript",
+    name: "applescript",
-        argv: "",
+    bin: "osascript",
-        ext: "scpt",
+    argv: "",
-        color: "cyan-10",
+    ext: "scpt",
-        icon: "logo/applescript.png",
+    color: "cyan-10",
-    },
+    icon: "logo/applescript.png",
-    cmd: {
+    shortName: "ascpt",
-        name: "cmd",
+  },
-        highlight: "bat",
+  cmd: {
-        bin: "",
+    name: "cmd",
-        argv: "",
+    highlight: "bat",
-        ext: "bat",
+    bin: "",
-        color: "orange-10",
+    argv: "",
-        icon: "logo/cmd.png",
+    ext: "bat",
-    },
+    color: "orange-10",
-    powershell: {
+    icon: "logo/cmd.png",
-        name: "powershell",
+  },
-        bin: "powershell",
+  powershell: {
-        argv: "-NoProfile -File",
+    name: "powershell",
-        ext: "ps1",
+    bin: "powershell",
-        color: "amber-14",
+    argv: "-NoProfile -File",
-        icon: "logo/powershell.png",
+    ext: "ps1",
-    },
+    color: "amber-14",
-    python: {
+    icon: "logo/powershell.png",
-        name: "python",
+    shortName: "ps",
-        bin: "python",
+  },
-        argv: "-u",
+  python: {
-        ext: "py",
+    name: "python",
-        color: "light-blue-10",
+    bin: "python",
-        icon: "logo/python.png",
+    argv: "-u",
-    },
+    ext: "py",
-    javascript: {
+    color: "light-blue-10",
-        name: "javascript",
+    icon: "logo/python.png",
-        bin: "node",
+    shortName: "py",
-        argv: "",
+  },
-        ext: "js",
+  javascript: {
-        color: "teal",
+    name: "javascript",
-        icon: "logo/javascript.png",
+    bin: "node",
-    },
+    argv: "",
-    ruby: {
+    ext: "js",
-        name: "ruby",
+    color: "teal",
-        bin: "ruby",
+    icon: "logo/javascript.png",
-        argv: "",
+    shortName: "js",
-        ext: "rb",
+  },
-        color: "red-10",
+  ruby: {
-        icon: "logo/ruby.png",
+    name: "ruby",
-    },
+    bin: "ruby",
-    php: {
+    argv: "",
-        name: "php",
+    ext: "rb",
-        bin: "php",
+    color: "red-10",
-        argv: "",
+    icon: "logo/ruby.png",
-        ext: "php",
+  },
-        color: "deep-purple",
+  php: {
-        icon: "logo/php.png",
+    name: "php",
-    },
+    bin: "php",
-    c: {
+    argv: "",
-        name: "c",
+    ext: "php",
-        bin: "gcc",
+    color: "deep-purple",
-        argv: "-o",
+    icon: "logo/php.png",
-        ext: "c",
+  },
-        color: "blue-7",
+  c: {
-        icon: "logo/c.png",
+    name: "c",
-    },
+    bin: "gcc",
-    csharp: {
+    argv: "-o",
-        name: "csharp",
+    ext: "c",
-        bin: "C:\\Windows\\Microsoft.NET\\Framework\\v4.0.30319\\csc.exe",
+    color: "blue-7",
-        argv: "/Nologo",
+    icon: "logo/c.png",
-        ext: "cs",
+  },
-        color: "light-blue-13",
+  csharp: {
-        icon: "logo/csharp.png",
+    name: "csharp",
-    },
+    bin: "C:\\Windows\\Microsoft.NET\\Framework\\v4.0.30319\\csc.exe",
-    lua: {
+    argv: "/Nologo",
-        name: "lua",
+    ext: "cs",
-        bin: "lua",
+    color: "light-blue-13",
-        argv: "",
+    icon: "logo/csharp.png",
-        ext: "lua",
+    shortName: "c#",
-        color: "light-green-8",
+  },
-        icon: "logo/lua.png",
+  lua: {
-    },
+    name: "lua",
-    perl: {
+    bin: "lua",
-        name: "perl",
+    argv: "",
-        bin: "perl",
+    ext: "lua",
-        argv: "",
+    color: "light-green-8",
-        ext: "pl",
+    icon: "logo/lua.png",
-        color: "purple",
+  },
-        icon: "logo/perl.png"
+  perl: {
-    },
+    name: "perl",
-    custom: {
+    bin: "perl",
-        name: "custom",
+    argv: "",
-        bin: "",
+    ext: "pl",
-        argv: "",
+    color: "purple",
-        ext: "",
+    icon: "logo/perl.png",
-        color: "indigo-6",
+  },
-        icon: "logo/custom.png",
+  custom: {
-    },
+    name: "custom",
+    bin: "",
+    argv: "",
+    ext: "",
+    color: "indigo-6",
+    icon: "logo/custom.png",
+  },
 };
-export default programs
+export default programs;

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 />
+                  未启用、匹配类型为窗口的命令在此视图下不显示</q-tooltip
-                  注意：<br />
-                  1.未启用、匹配类型为窗口的命令在此视图下不显示<br />
-                  2.只显示图标描述和匹配类型<br />
-                  3.点击卡片时会直接运行命令而不是编辑命令</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>