From 0ef0249f58ac737d4fcec3473b52ebccde858651 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Sat, 21 Dec 2024 23:33:51 +0800
Subject: [PATCH] =?UTF-8?q?ConfigurationPage=E7=BB=84=E4=BB=B6=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandEditor.vue          |  64 +-
 src/components/config/BackgroundLayer.vue |  35 ++
 src/components/config/CommandPanels.vue   | 130 ++++
 src/components/config/FooterBar.vue       | 229 +++++++
 src/components/config/TagBar.vue          | 158 +++++
 src/components/editor/CommandSideBar.vue  | 718 ++++++++++++----------
 src/pages/ConfigurationPage.vue           | 518 +++-------------
 7 files changed, 1061 insertions(+), 791 deletions(-)
 create mode 100644 src/components/config/BackgroundLayer.vue
 create mode 100644 src/components/config/CommandPanels.vue
 create mode 100644 src/components/config/FooterBar.vue
 create mode 100644 src/components/config/TagBar.vue

diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue
index 7509274..f812016 100644
--- a/src/components/CommandEditor.vue
+++ b/src/components/CommandEditor.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="absolute-full command-editor-container">
+  <div
+    class="command-editor-container"
+    :class="{ 'leaving': isLeaving }"
+    @animationend="$emit('animationend')"
+  >
     <!-- 命令设置栏 -->
     <CommandSideBar
       ref="sidebar"
@@ -14,6 +18,7 @@
       }"
       :sideBarWidth="sideBarWidth"
       v-if="showSidebar"
+      @back="handleBack"
     ></CommandSideBar>
 
     <!-- 编程语言栏 -->
@@ -118,7 +123,18 @@ export default {
     };
   },
   props: {
-    action: Object,
+    action: {
+      type: Object,
+      required: true
+    },
+    allQuickCommandTags: {
+      type: Array,
+      required: true
+    },
+    isLeaving: {
+      type: Boolean,
+      default: false
+    }
   },
   created() {
     this.commandInit();
@@ -130,15 +146,6 @@ export default {
     configurationPage() {
       return this.$root.$refs.view;
     },
-    allQuickCommandTags() {
-      return _.without(
-        this.configurationPage.allQuickCommandTags,
-        "默认",
-        "未分类",
-        "搜索结果"
-        // "来自分享"
-      );
-    },
   },
   methods: {
     // 命令初始化
@@ -270,6 +277,10 @@ export default {
       // 恢复历史内容
       this.$refs.editor.setEditorValue(item.content);
     },
+    handleBack() {
+      // 触发返回事件
+      this.$emit('editorEvent', { type: 'back' });
+    }
   },
 };
 </script>
@@ -292,6 +303,37 @@ export default {
   color: black;
   background: white;
   overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 5000;
+  background: var(--q-page-background);
+  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.command-editor-container.leaving {
+  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: transparent;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
 }
 
 .body--dark .command-editor-container {
diff --git a/src/components/config/BackgroundLayer.vue b/src/components/config/BackgroundLayer.vue
new file mode 100644
index 0000000..89ff985
--- /dev/null
+++ b/src/components/config/BackgroundLayer.vue
@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="background-layer"
+    :style="{
+      background: $q.dark.isActive
+        ? $root.profile.backgroundImgDark
+          ? `url('${$root.profile.backgroundImgDark}')`
+          : 'none'
+        : $root.profile.backgroundImgLight
+        ? `url('${$root.profile.backgroundImgLight}')`
+        : 'none',
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundAttachment: 'fixed',
+    }"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: 'BackgroundLayer'
+}
+</script>
+
+<style scoped>
+.background-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+}
+</style>
diff --git a/src/components/config/CommandPanels.vue b/src/components/config/CommandPanels.vue
new file mode 100644
index 0000000..7b72018
--- /dev/null
+++ b/src/components/config/CommandPanels.vue
@@ -0,0 +1,130 @@
+<template>
+  <q-tab-panels
+    animated
+    class="absolute-right"
+    :style="{
+      bottom: footerBarHeight,
+      left: tabBarWidth,
+    }"
+    v-model="currentTag"
+    transition-prev="jump-down"
+    transition-next="jump-up"
+  >
+    <q-tab-panel
+      style="padding: 0"
+      v-for="tag in allQuickCommandTags"
+      :key="tag"
+      :name="tag"
+    >
+      <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"
+            :isCommandActivated="
+              activatedQuickCommandFeatureCodes.includes(
+                commandInfo.features.code
+              )
+            "
+            :cardStyle="cardStyleSheet[$root.profile.commandCardStyle]"
+            @commandChanged="$emit('command-changed', $event)"
+            :style="{
+              width: cardStyleSheet[$root.profile.commandCardStyle].width,
+            }"
+            class="relative-position q-pa-sm"
+          ></CommandCard>
+        </div>
+      </q-scroll-area>
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+
+<script>
+import CommandCard from "components/CommandCard.vue";
+
+export default {
+  name: "CommandPanels",
+  components: {
+    CommandCard,
+  },
+  data() {
+    return {
+      cardStyleSheet: {
+        mini: {
+          width: "20%",
+          code: 1,
+        },
+        dense: {
+          width: "33%",
+          code: 2,
+        },
+        normal: {
+          width: "50%",
+          code: 3,
+        },
+        large: {
+          width: "100%",
+          code: 4,
+        },
+      },
+    };
+  },
+  props: {
+    footerBarHeight: {
+      type: String,
+      required: true,
+    },
+    tabBarWidth: {
+      type: String,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    allQuickCommandTags: {
+      type: Array,
+      required: true,
+    },
+    currentTagQuickCommands: {
+      type: Array,
+      required: true,
+    },
+    activatedQuickCommandFeatureCodes: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    currentTag: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  emits: ["update:modelValue", "command-changed"],
+};
+</script>
+
+<style scoped>
+.q-tab-panels {
+  background: transparent;
+}
+
+/* 面板过渡效果 */
+.q-tab-panel {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>
diff --git a/src/components/config/FooterBar.vue b/src/components/config/FooterBar.vue
new file mode 100644
index 0000000..ccc5c1d
--- /dev/null
+++ b/src/components/config/FooterBar.vue
@@ -0,0 +1,229 @@
+<template>
+  <div
+    class="absolute-bottom footer-bar"
+    :style="{ height: height, left: left }"
+  >
+    <div class="row">
+      <!-- 搜索栏 -->
+      <div class="col">
+        <q-input
+          :model-value="searchKeyword"
+          @update:model-value="updateSearch"
+          debounce="200"
+          filled
+          dense
+          :autofocus="$root.profile.autofocusSearch"
+          placeholder="搜索，支持拼音首字母"
+        >
+          <template v-slot:prepend>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </div>
+      <!-- 按钮组 -->
+      <div class="col-auto justify-end flex">
+        <q-btn-group>
+          <!-- 暗色模式切换按钮 -->
+          <q-btn
+            flat
+            v-if="isDev"
+            :color="isDarkMode ? 'amber' : 'blue-9'"
+            :icon="isDarkMode ? 'dark_mode' : 'light_mode'"
+            @click="toggleDarkMode"
+          >
+            <q-tooltip>
+              {{ isDarkMode ? "切换到亮色模式" : "切换到暗色模式" }}
+            </q-tooltip>
+          </q-btn>
+          <!-- 切换视图 -->
+          <q-btn-toggle
+            v-model="$root.profile.commandCardStyle"
+            toggle-color="primary"
+            flat
+            :options="[
+              { slot: 'normal', value: 'normal' },
+              { slot: 'dense', value: 'dense' },
+              { slot: 'mini', value: 'mini' },
+            ]"
+          >
+            <template v-slot:normal>
+              <q-icon name="dashboard" />
+              <q-tooltip>双列视图</q-tooltip>
+            </template>
+            <template v-slot:dense>
+              <q-icon name="apps" />
+              <q-tooltip>三列视图</q-tooltip>
+            </template>
+            <template v-slot:mini>
+              <q-icon name="view_comfy" />
+              <q-tooltip>
+                五列面板视图<br />
+                未启用、匹配类型为窗口的命令在此视图下不显示
+              </q-tooltip>
+            </template>
+          </q-btn-toggle>
+          <!-- 分享中心按钮 -->
+          <q-btn
+            split
+            flat
+            @click="goShareCenter"
+            color="primary"
+            label="分享中心"
+            icon="groups"
+            class="share-btn"
+          />
+          <!-- 新建按钮 -->
+          <q-btn
+            split
+            flat
+            @click="$emit('add-new')"
+            color="primary"
+            label="新建"
+            icon="add"
+            class="new-btn"
+          />
+          <!-- 菜单按钮 -->
+          <q-btn
+            stretch
+            color="primary"
+            flat
+            size="xs"
+            id="menuBtn"
+            :style="{ height: height }"
+          >
+            <q-spinner-bars color="primary" size="1.5em" />
+            <ConfigurationMenu
+              :isTagStared="isTagStared"
+              :currentTag="currentTag"
+            />
+          </q-btn>
+        </q-btn-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ConfigurationMenu from "components/menu";
+
+export default {
+  name: "FooterBar",
+  components: {
+    ConfigurationMenu,
+  },
+  props: {
+    height: {
+      type: String,
+      default: "40px",
+    },
+    left: {
+      type: String,
+      required: true,
+    },
+    isTagStared: {
+      type: Boolean,
+      required: true,
+    },
+    currentTag: {
+      type: String,
+      required: true,
+    },
+    searchKeyword: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:search", "add-new"],
+  data() {
+    return {
+      isDarkMode: this.$q.dark.isActive,
+      isDev: utools.isDev(),
+    };
+  },
+  methods: {
+    updateSearch(value) {
+      this.$emit("update:search", value);
+    },
+    toggleDarkMode() {
+      this.$q.dark.toggle();
+      this.isDarkMode = this.$q.dark.isActive;
+    },
+    goShareCenter() {
+      utools.shellOpenExternal("https://qc.qaz.ink/");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.footer-bar {
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: left;
+}
+
+/* 底栏输入框样式 */
+.q-field__control {
+  background: rgba(255, 255, 255, 0.15) !important;
+  border-radius: 4px;
+}
+
+:deep(.body--dark) .q-field__control {
+  background: rgba(0, 0, 0, 0.2) !important;
+}
+
+/* 底栏毛玻璃效果 */
+:deep(body.glass-effect-menu) .footer-bar {
+  background: rgba(
+    255,
+    255,
+    255,
+    calc(0.15 + var(--glass-effect-strength) * 0.01)
+  ) !important;
+  backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
+  -webkit-backdrop-filter: blur(
+    calc(var(--glass-effect-strength) * 1px)
+  ) !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+:deep(body.body--dark.glass-effect-menu) .footer-bar {
+  background: rgba(
+    0,
+    0,
+    0,
+    calc(0.2 + var(--glass-effect-strength) * 0.02)
+  ) !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* 按钮动画 */
+.share-btn,
+.new-btn {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.share-btn:hover,
+.new-btn:hover {
+  transform: translateY(-2px);
+  background: rgba(var(--q-primary-rgb), 0.1) !important;
+}
+
+/* 搜索框动画 */
+@keyframes searchIconShake {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-10deg);
+  }
+  75% {
+    transform: rotate(10deg);
+  }
+}
+
+.q-field--focused .q-field__prepend .q-icon {
+  animation: searchIconShake 0.8s ease;
+  color: var(--q-primary);
+}
+</style>
diff --git a/src/components/config/TagBar.vue b/src/components/config/TagBar.vue
new file mode 100644
index 0000000..690a987
--- /dev/null
+++ b/src/components/config/TagBar.vue
@@ -0,0 +1,158 @@
+<template>
+  <q-scroll-area
+    v-show="$root.profile.commandCardStyle !== 'mini'"
+    class="absolute-left tag-bar"
+    :thumb-style="{
+      width: '2px',
+    }"
+    :style="{
+      width: tabBarWidth,
+      zIndex: 1,
+    }"
+  >
+    <q-tabs
+      v-model="currentTag"
+      vertical
+      switch-indicator
+      :key="denseTagBar"
+      :dense="denseTagBar"
+    >
+      <!-- 所有标签 -->
+      <q-tab
+        v-for="tag in allQuickCommandTags"
+        :key="tag"
+        :name="tag"
+        :data-search-result="tag === '搜索结果'"
+        :data-active-panel="activatedQuickPanels.includes(tag)"
+      >
+        {{ tag }}
+        <q-tooltip v-if="tag === '未分类'">
+          所有没有添加标签的命令都会归在未分类 <br />
+          可以在新建命令时在标签一栏选择或直接键入标签名来添加标签
+        </q-tooltip>
+      </q-tab>
+    </q-tabs>
+  </q-scroll-area>
+</template>
+
+<script>
+export default {
+  name: "TagBar",
+  props: {
+    tabBarWidth: {
+      type: String,
+      required: true,
+    },
+    allQuickCommandTags: {
+      type: Array,
+      required: true,
+    },
+    activatedQuickPanels: {
+      type: Array,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    denseTagBar: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    currentTag: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 标签栏容器样式 */
+.q-tabs {
+  height: 100vh !important;
+  background: transparent !important;
+}
+
+/* 标签栏和底栏内的按钮悬浮效果 */
+.q-tabs .q-tab:hover {
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+
+.body--dark .q-tabs .q-tab:hover {
+  background: rgba(255, 255, 255, 0.05) !important;
+}
+
+.q-tab {
+  word-break: break-all;
+  white-space: normal;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--q-blue-grey) !important;
+  opacity: 0.7;
+  transition: all 0.3s ease;
+}
+
+/* 激活标签样式 */
+.q-tab--active {
+  color: var(--q-primary) !important;
+  font-weight: 600 !important;
+  opacity: 1;
+}
+
+.q-tab:hover::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--q-primary);
+  opacity: 0.1;
+  border-radius: 4px;
+  transition: opacity 0.3s;
+}
+
+/* 特殊标签样式（搜索结果和激活面板） */
+.q-tab[data-search-result="true"],
+.q-tab[data-active-panel="true"] {
+  color: #4286de !important;
+  font-weight: 600 !important;
+}
+
+/* 标签悬浮效果 */
+.q-tab:hover {
+  opacity: 0.9;
+  transform: translateX(4px);
+}
+
+/* 标签内容过渡效果 */
+.q-tab__content {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 标签栏过渡动画 */
+.tag-bar {
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: width, opacity;
+  opacity: 1;
+  background: transparent;
+}
+
+/* 标签栏隐藏时的样式 */
+.tag-bar[style*="display: none"] {
+  opacity: 0;
+  width: 0 !important;
+}
+
+/* 暗色模式适配 */
+:deep(.body--dark) .q-tab:hover::after {
+  opacity: 0.15;
+}
+</style>
diff --git a/src/components/editor/CommandSideBar.vue b/src/components/editor/CommandSideBar.vue
index 7c8b020..e0a8ed4 100644
--- a/src/components/editor/CommandSideBar.vue
+++ b/src/components/editor/CommandSideBar.vue
@@ -1,337 +1,355 @@
 <template>
-  <q-scroll-area
-    :thumb-style="{
-      width: '3px',
-    }"
-    :horizontal-thumb-style="{
-      height: '5px',
-    }"
-    class="command-side-bar"
-  >
-    <div class="row" :style="{ padding: sideBarPadding + 'px' }">
-      <div class="col-12">
-        <div class="row items-center relative-position q-pb-md">
-          <q-btn
-            dense
-            flat
-            color="grey"
-            icon="arrow_back_ios_new"
-            v-close-popup
-            class="absolute-left"
-            style="height: 48px; width: 22px"
-          />
-          <div class="col-12 flex justify-center">
-            <q-avatar size="64" square class="commandLogo">
-              <q-img
-                @click="showIconPicker = true"
-                :src="currentCommand.features.icon"
-              />
-            </q-avatar>
-          </div>
-        </div>
-
-        <div class="row">
-          <div
-            class="command-side-bar-content"
-            :style="{ width: sideBarWidth - sideBarPadding * 2 + 'px' }"
-          >
-            <!-- 说明 -->
-            <q-input
-              :disable="!canCommandSave"
-              stack-label
-              label-color="primary"
-              borderless
-              square
-              v-model="currentCommand.features.explain"
-              type="text"
-              placeholder="请输入说明"
-              label="说明"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  class="command-side-bar-icon"
-                  name="drive_file_rename_outline"
-                />
-              </template>
-            </q-input>
-            <!-- 匹配类型 -->
-            <q-select
-              :disable="!canCommandSave"
-              popup-content-class="side-bar-popup-content"
-              hide-dropdown-icon
-              stack-label
-              label-color="primary"
-              transition-show="jump-down"
-              transition-hide="jump-up"
-              borderless
-              square
-              @update:model-value="(val) => handleCmdTypeChange(val)"
-              :options="commandTypesOptions"
-              v-model="cmdType"
-              type="text"
-              label="匹配类型"
-            >
-              <template v-slot:prepend>
-                <q-icon class="command-side-bar-icon" :name="cmdType.icon" />
-              </template>
-              <template v-slot:option="scope">
-                <q-item v-bind="scope.itemProps" class="row items-center">
-                  <q-icon :name="scope.opt.icon" class="q-mr-md" />
-                  <div>
-                    <q-item-label v-html="scope.opt.name" />
-                    <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
-                  </div>
-                </q-item>
-              </template>
-            </q-select>
-            <!-- 匹配规则 -->
-            <q-select
-              v-if="cmdType.valueType === 'array'"
-              :disable="!canCommandSave"
-              popup-content-class="side-bar-popup-content"
-              hide-dropdown-icon
-              stack-label
-              label-color="primary"
-              transition-show="jump-down"
-              transition-hide="jump-up"
-              borderless
-              square
-              v-model="cmdMatch"
-              max-values="3"
-              type="text"
-              placeholder="回车添加"
-              use-input
-              use-chips
-              multiple
-              new-value-mode="add-unique"
-              input-debounce="0"
-              :label="cmdType.matchLabel"
-              ref="cmdMatchRef"
-              @blur="(e) => autoAddInputVal(e, $refs.cmdMatchRef)"
-            >
-              <template v-slot:prepend>
-                <q-icon class="command-side-bar-icon" name="square_foot" />
-              </template>
-            </q-select>
-            <q-input
-              v-else
-              :disable="!canCommandSave"
-              autogrow
-              borderless
-              square
-              v-model="cmdMatch"
-              hide-bottom-space
-              @blur="regexVerify"
-              :readonly="!cmdType.valueType"
-              type="text"
-              :label="cmdType.matchLabel"
-            >
-              <template v-slot:prepend>
-                <q-icon class="command-side-bar-icon" name="square_foot" />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="cmdType.name === 'files'"
-                  name="folder"
-                  size="xs"
-                  :color="isFileTypeDirectory ? 'primary' : ''"
-                  @click="isFileTypeDirectory = !isFileTypeDirectory"
-                  style="cursor: pointer"
-                >
-                  <q-tooltip>
-                    切换匹配类型，当前：{{
-                      isFileTypeDirectory ? "文件夹" : "文件"
-                    }}
-                  </q-tooltip>
-                </q-icon>
-              </template>
-            </q-input>
-            <!-- 标签 -->
-            <q-select
-              :disable="!canCommandSave"
-              hide-dropdown-icon
-              stack-label
-              popup-content-class="side-bar-popup-content"
-              label-color="primary"
-              transition-show="jump-down"
-              transition-hide="jump-up"
-              borderless
-              square
-              v-model="currentCommand.tags"
-              max-values="3"
-              type="text"
-              label="标签"
-              placeholder="回车添加"
-              use-input
-              use-chips
-              multiple
-              new-value-mode="add-unique"
-              @new-value="tagVerify"
-              input-debounce="0"
-              :options="allQuickCommandTags"
-              ref="commandTagRef"
-              @blur="(e) => autoAddInputVal(e, $refs.commandTagRef)"
-            >
-              <template v-slot:prepend>
-                <q-icon class="command-side-bar-icon" name="label" />
-              </template>
-            </q-select>
-            <!-- 特殊变量 -->
-            <q-select
-              :disable="!canCommandSave"
-              hide-dropdown-icon
-              popup-content-class="side-bar-popup-content"
-              stack-label
-              label-color="primary"
-              transition-show="jump-down"
-              transition-hide="jump-up"
-              borderless
-              @popup-hide="
-                () => {
-                  if (specialVar.label === '{{usr:}}') showUserData = true;
-                  else insertSpecialVar(specialVar.label);
-                }
-              "
-              square
-              :options="specialVarsOptions"
-              v-model="specialVar"
-              input-debounce="0"
-              type="text"
-              label="特殊变量"
-            >
-              <template v-slot:prepend>
-                <q-icon class="command-side-bar-icon" name="attach_money" />
-              </template>
-              <template v-slot:option="scope">
-                <q-item v-bind="scope.itemProps">
-                  <q-item-section>
-                    <q-item-label v-html="scope.opt.label" />
-                    <q-tooltip v-if="scope.opt.tooltip">
-                      {{ scope.opt.tooltip }}
-                    </q-tooltip>
-                    <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </template></q-select
-            >
-            <!-- 输出 -->
-            <q-select
-              :disable="!canCommandSave"
-              hide-dropdown-icon
-              stack-label
-              label-color="primary"
-              popup-content-class="side-bar-popup-content"
-              transition-show="jump-down"
-              transition-hide="jump-up"
-              borderless
-              square
-              color="primary"
-              v-model="currentCommand.output"
-              :display-value="outputTypes[currentCommand.output].label"
-              :options="outputTypesOptionsDy"
-              label="输出"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  class="command-side-bar-icon"
-                  :name="outputTypes[currentCommand.output].icon"
-                />
-              </template>
-              <template v-slot:option="scope">
-                <q-item v-bind="scope.itemProps" class="row items-center">
-                  <q-icon :name="outputTypes[scope.opt].icon" class="q-mr-md" />
-                  <div>
-                    <q-item-label v-html="outputTypes[scope.opt].label" />
-                  </div>
-                </q-item>
-              </template>
-            </q-select>
-            <!-- 搜索面板推送 -->
-            <q-select
-              :disable="!canCommandSave"
-              hide-dropdown-icon
-              stack-label
-              label-color="primary"
-              popup-content-class="side-bar-popup-content"
-              transition-show="jump-down"
-              transition-hide="jump-up"
-              borderless
-              square
-              v-model="searchPushValue"
-              :options="searchPushOptions"
-              label="搜索面板推送"
-            >
-              <template v-slot:prepend>
-                <q-icon class="command-side-bar-icon" name="search" />
-              </template>
-              <template v-slot:option="scope">
-                <q-item v-bind="scope.itemProps">
-                  <q-item-section>
-                    <q-item-label>{{ scope.opt.label }}</q-item-label>
-                    <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
-                  </q-item-section>
-                  <q-item-section side v-if="scope.opt.value">
-                    <q-btn
-                      flat
-                      round
-                      icon="help_outline"
-                      size="xs"
-                      dense
-                      @click.stop="showMainPushHelp"
-                    />
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-            <!-- 平台 -->
-            <q-select
-              :disable="!canCommandSave"
-              hide-dropdown-icon
-              stack-label
-              label-color="primary"
-              popup-content-class="side-bar-popup-content"
-              transition-show="jump-down"
-              transition-hide="jump-up"
-              borderless
-              square
-              :options="Object.keys(platformTypes)"
-              use-chips
-              @blur="platformVerify()"
-              v-model="currentCommand.features.platform"
-              multiple
-              label="平台"
-            >
-              <template v-slot:prepend>
-                <q-icon class="command-side-bar-icon" name="window" />
-              </template>
-              <template v-slot:selected-item="scope">
-                <q-chip
-                  removable
-                  dense
-                  @remove="scope.removeAtIndex(scope.index)"
-                  :tabindex="scope.tabindex"
-                >
-                  {{ platformTypes[scope.opt].label }}
-                </q-chip>
-              </template>
-              <template v-slot:option="scope">
-                <q-item v-bind="scope.itemProps" class="row items-center">
-                  <q-img
-                    :src="platformTypes[scope.opt].icon"
-                    width="24px"
-                    class="q-mr-md"
-                  />
-                  <div>
-                    <q-item-label v-html="platformTypes[scope.opt].label" />
-                    <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
-                  </div>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
+  <div class="command-side-bar" :style="{ width: sideBarWidth + 'px' }">
+    <!-- 头部区域 -->
+    <div class="header-section">
+      <div class="header-content">
+        <q-btn
+          dense
+          flat
+          color="grey"
+          icon="arrow_back_ios_new"
+          v-close-popup
+          class="back-btn"
+          @click="$emit('back')"
+        />
+        <div class="logo-container">
+          <q-avatar size="64" square class="commandLogo">
+            <q-img
+              @click="showIconPicker = true"
+              :src="currentCommand.features.icon"
+            />
+          </q-avatar>
         </div>
       </div>
     </div>
+
+    <!-- 可滚动的内容区域 -->
+    <q-scroll-area
+      :thumb-style="{
+        width: '3px',
+      }"
+      :horizontal-thumb-style="{
+        height: '5px',
+      }"
+      class="scroll-area"
+    >
+      <div
+        class="row"
+        :style="{
+          paddingLeft: sideBarPadding + 'px',
+          paddingRight: sideBarPadding + 'px',
+          paddingBottom: sideBarPadding + 'px',
+        }"
+      >
+        <div class="col-12">
+          <div class="row">
+            <div
+              class="command-side-bar-content"
+              :style="{ width: sideBarWidth - sideBarPadding * 2 + 'px' }"
+            >
+              <!-- 说明 -->
+              <q-input
+                :disable="!canCommandSave"
+                stack-label
+                label-color="primary"
+                borderless
+                square
+                v-model="currentCommand.features.explain"
+                type="text"
+                placeholder="请输入说明"
+                label="说明"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    class="command-side-bar-icon"
+                    name="drive_file_rename_outline"
+                  />
+                </template>
+              </q-input>
+              <!-- 匹配类型 -->
+              <q-select
+                :disable="!canCommandSave"
+                popup-content-class="side-bar-popup-content"
+                hide-dropdown-icon
+                stack-label
+                label-color="primary"
+                transition-show="jump-down"
+                transition-hide="jump-up"
+                borderless
+                square
+                @update:model-value="(val) => handleCmdTypeChange(val)"
+                :options="commandTypesOptions"
+                v-model="cmdType"
+                type="text"
+                label="匹配类型"
+              >
+                <template v-slot:prepend>
+                  <q-icon class="command-side-bar-icon" :name="cmdType.icon" />
+                </template>
+                <template v-slot:option="scope">
+                  <q-item v-bind="scope.itemProps" class="row items-center">
+                    <q-icon :name="scope.opt.icon" class="q-mr-md" />
+                    <div>
+                      <q-item-label v-html="scope.opt.name" />
+                      <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
+                    </div>
+                  </q-item>
+                </template>
+              </q-select>
+              <!-- 匹配规则 -->
+              <q-select
+                v-if="cmdType.valueType === 'array'"
+                :disable="!canCommandSave"
+                popup-content-class="side-bar-popup-content"
+                hide-dropdown-icon
+                stack-label
+                label-color="primary"
+                transition-show="jump-down"
+                transition-hide="jump-up"
+                borderless
+                square
+                v-model="cmdMatch"
+                max-values="3"
+                type="text"
+                placeholder="回车添加"
+                use-input
+                use-chips
+                multiple
+                new-value-mode="add-unique"
+                input-debounce="0"
+                :label="cmdType.matchLabel"
+                ref="cmdMatchRef"
+                @blur="(e) => autoAddInputVal(e, $refs.cmdMatchRef)"
+              >
+                <template v-slot:prepend>
+                  <q-icon class="command-side-bar-icon" name="square_foot" />
+                </template>
+              </q-select>
+              <q-input
+                v-else
+                :disable="!canCommandSave"
+                autogrow
+                borderless
+                square
+                v-model="cmdMatch"
+                hide-bottom-space
+                @blur="regexVerify"
+                :readonly="!cmdType.valueType"
+                type="text"
+                :label="cmdType.matchLabel"
+              >
+                <template v-slot:prepend>
+                  <q-icon class="command-side-bar-icon" name="square_foot" />
+                </template>
+                <template v-slot:append>
+                  <q-icon
+                    v-if="cmdType.name === 'files'"
+                    name="folder"
+                    size="xs"
+                    :color="isFileTypeDirectory ? 'primary' : ''"
+                    @click="isFileTypeDirectory = !isFileTypeDirectory"
+                    style="cursor: pointer"
+                  >
+                    <q-tooltip>
+                      切换匹配类型，当前：{{
+                        isFileTypeDirectory ? "文件夹" : "文件"
+                      }}
+                    </q-tooltip>
+                  </q-icon>
+                </template>
+              </q-input>
+              <!-- 标签 -->
+              <q-select
+                :disable="!canCommandSave"
+                hide-dropdown-icon
+                stack-label
+                popup-content-class="side-bar-popup-content"
+                label-color="primary"
+                transition-show="jump-down"
+                transition-hide="jump-up"
+                borderless
+                square
+                v-model="currentCommand.tags"
+                max-values="3"
+                type="text"
+                label="标签"
+                placeholder="回车添加"
+                use-input
+                use-chips
+                multiple
+                new-value-mode="add-unique"
+                @new-value="tagVerify"
+                input-debounce="0"
+                :options="allQuickCommandTags"
+                ref="commandTagRef"
+                @blur="(e) => autoAddInputVal(e, $refs.commandTagRef)"
+              >
+                <template v-slot:prepend>
+                  <q-icon class="command-side-bar-icon" name="label" />
+                </template>
+              </q-select>
+              <!-- 特殊变量 -->
+              <q-select
+                :disable="!canCommandSave"
+                hide-dropdown-icon
+                popup-content-class="side-bar-popup-content"
+                stack-label
+                label-color="primary"
+                transition-show="jump-down"
+                transition-hide="jump-up"
+                borderless
+                @popup-hide="
+                  () => {
+                    if (specialVar.label === '{{usr:}}') showUserData = true;
+                    else insertSpecialVar(specialVar.label);
+                  }
+                "
+                square
+                :options="specialVarsOptions"
+                v-model="specialVar"
+                input-debounce="0"
+                type="text"
+                label="特殊变量"
+              >
+                <template v-slot:prepend>
+                  <q-icon class="command-side-bar-icon" name="attach_money" />
+                </template>
+                <template v-slot:option="scope">
+                  <q-item v-bind="scope.itemProps">
+                    <q-item-section>
+                      <q-item-label v-html="scope.opt.label" />
+                      <q-tooltip v-if="scope.opt.tooltip">
+                        {{ scope.opt.tooltip }}
+                      </q-tooltip>
+                      <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
+              <!-- 输出 -->
+              <q-select
+                :disable="!canCommandSave"
+                hide-dropdown-icon
+                stack-label
+                label-color="primary"
+                popup-content-class="side-bar-popup-content"
+                transition-show="jump-down"
+                transition-hide="jump-up"
+                borderless
+                square
+                color="primary"
+                v-model="currentCommand.output"
+                :display-value="outputTypes[currentCommand.output].label"
+                :options="outputTypesOptionsDy"
+                label="输出"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    class="command-side-bar-icon"
+                    :name="outputTypes[currentCommand.output].icon"
+                  />
+                </template>
+                <template v-slot:option="scope">
+                  <q-item v-bind="scope.itemProps" class="row items-center">
+                    <q-icon
+                      :name="outputTypes[scope.opt].icon"
+                      class="q-mr-md"
+                    />
+                    <div>
+                      <q-item-label v-html="outputTypes[scope.opt].label" />
+                    </div>
+                  </q-item>
+                </template>
+              </q-select>
+              <!-- 搜索面板推送 -->
+              <q-select
+                :disable="!canCommandSave"
+                hide-dropdown-icon
+                stack-label
+                label-color="primary"
+                popup-content-class="side-bar-popup-content"
+                transition-show="jump-down"
+                transition-hide="jump-up"
+                borderless
+                square
+                v-model="searchPushValue"
+                :options="searchPushOptions"
+                label="搜索面板推送"
+              >
+                <template v-slot:prepend>
+                  <q-icon class="command-side-bar-icon" name="search" />
+                </template>
+                <template v-slot:option="scope">
+                  <q-item v-bind="scope.itemProps">
+                    <q-item-section>
+                      <q-item-label>{{ scope.opt.label }}</q-item-label>
+                      <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side v-if="scope.opt.value">
+                      <q-btn
+                        flat
+                        round
+                        icon="help_outline"
+                        size="xs"
+                        dense
+                        @click.stop="showMainPushHelp"
+                      />
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+              <!-- 平台 -->
+              <q-select
+                :disable="!canCommandSave"
+                hide-dropdown-icon
+                stack-label
+                label-color="primary"
+                popup-content-class="side-bar-popup-content"
+                transition-show="jump-down"
+                transition-hide="jump-up"
+                borderless
+                square
+                :options="Object.keys(platformTypes)"
+                use-chips
+                @blur="platformVerify()"
+                v-model="currentCommand.features.platform"
+                multiple
+                label="平台"
+              >
+                <template v-slot:prepend>
+                  <q-icon class="command-side-bar-icon" name="window" />
+                </template>
+                <template v-slot:selected-item="scope">
+                  <q-chip
+                    removable
+                    dense
+                    @remove="scope.removeAtIndex(scope.index)"
+                    :tabindex="scope.tabindex"
+                  >
+                    {{ platformTypes[scope.opt].label }}
+                  </q-chip>
+                </template>
+                <template v-slot:option="scope">
+                  <q-item v-bind="scope.itemProps" class="row items-center">
+                    <q-img
+                      :src="platformTypes[scope.opt].icon"
+                      width="24px"
+                      class="q-mr-md"
+                    />
+                    <div>
+                      <q-item-label v-html="platformTypes[scope.opt].label" />
+                      <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
+                    </div>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-scroll-area>
+
+    <!-- 对话框部分保持不变 -->
     <q-dialog v-model="showIconPicker" position="left">
       <iconPicker
         @iconChanged="(dataUrl) => (currentCommand.features.icon = dataUrl)"
@@ -341,7 +359,7 @@
     <q-dialog v-model="showUserData">
       <UserData @insertText="insertSpecialVar" :showInsertBtn="true" />
     </q-dialog>
-  </q-scroll-area>
+  </div>
 </template>
 
 <script>
@@ -579,12 +597,50 @@ export default {
       return updateData;
     },
   },
+  emits: ["back"],
 };
 </script>
 <style scoped>
 .command-side-bar {
   height: 100%;
   background: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+}
+
+.header-section {
+  height: 60px;
+  min-height: 60px;
+  background: inherit;
+  position: relative;
+}
+
+.header-content {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.back-btn {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 48px;
+  width: 22px;
+  z-index: 1;
+}
+
+.logo-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.scroll-area {
+  flex: 1;
+  background: inherit;
 }
 
 .body--dark .command-side-bar {
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index f94c7c9..8b2b99f 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -1,230 +1,53 @@
 <template>
   <div class="config-page-container">
+    <!-- 主界面内容 -->
     <div
-      class="background-layer"
-      :style="{
-        background: $q.dark.isActive
-          ? $root.profile.backgroundImgDark
-            ? `url('${$root.profile.backgroundImgDark}')`
-            : 'none'
-          : $root.profile.backgroundImgLight
-          ? `url('${$root.profile.backgroundImgLight}')`
-          : 'none',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        backgroundAttachment: 'fixed',
-      }"
-    ></div>
-    <!-- 标签栏 -->
-    <!-- 面板视图不显示标签栏 -->
-    <q-scroll-area
-      v-show="commandCardStyle !== 'mini'"
-      class="absolute-left tag-bar"
-      :thumb-style="{
-        width: '2px',
-      }"
-      :style="{
-        width: tabBarWidth,
-        zIndex: 1,
-      }"
+      class="main-content"
+      :class="{ hide: isCommandEditorShow && !isEditorLeaving }"
     >
-      <q-tabs
+      <BackgroundLayer />
+      <!-- 标签栏 -->
+      <TagBar
         v-model="currentTag"
-        vertical
-        switch-indicator
-        :key="$root.profile.denseTagBar"
-        :dense="$root.profile.denseTagBar"
-      >
-        <!-- 所有标签 -->
-        <q-tab
-          v-for="tag in allQuickCommandTags"
-          :key="tag"
-          :name="tag"
-          :data-search-result="tag === '搜索结果'"
-          :data-active-panel="activatedQuickPanels.includes(tag)"
-        >
-          {{ tag }}
-          <q-tooltip v-if="tag === '未分类'">
-            所有没有添加标签的命令都会归在未分类 <br />
-            可以在新建命令时在标签一栏选择或直接键入标签名来添加标签
-          </q-tooltip>
-        </q-tab>
-      </q-tabs>
-    </q-scroll-area>
-    <!-- 面板栏 -->
-    <q-tab-panels
-      animated
-      class="absolute-right"
-      :style="{
-        bottom: footerBarHeight,
-        left: tabBarWidth,
-      }"
-      v-model="currentTag"
-      transition-prev="jump-down"
-      transition-next="jump-up"
-    >
-      <q-tab-panel
-        style="padding: 0"
-        v-for="tag in allQuickCommandTags"
-        :key="tag"
-        :name="tag"
-      >
-        <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"
-              :isCommandActivated="
-                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>
-    <!-- 底栏 -->
-    <div
-      class="absolute-bottom footer-bar"
-      :style="{
-        height: footerBarHeight,
-        left: tabBarWidth,
-      }"
-    >
-      <div class="row">
-        <!-- 搜索栏 -->
-        <div class="col">
-          <q-input
-            v-model="commandSearchKeyword"
-            debounce="200"
-            filled
-            dense
-            :autofocus="$root.profile.autofocusSearch"
-            @update:model-value="updateSearch"
-            placeholder="搜索，支持拼音首字母"
-          >
-            <template v-slot:prepend>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-        </div>
-        <!-- 按钮组 -->
-        <div class="col-auto justify-end flex">
-          <q-btn-group>
-            <!-- 添加暗色模式切换按钮 -->
-            <q-btn
-              flat
-              v-if="isDev"
-              :color="$q.dark.isActive ? 'amber' : 'blue-9'"
-              :icon="$q.dark.isActive ? 'dark_mode' : 'light_mode'"
-              @click="$q.dark.toggle()"
-            >
-              <q-tooltip>
-                {{ $q.dark.isActive ? "切换到亮色模式" : "切换到暗色模式" }}
-              </q-tooltip>
-            </q-btn>
-            <!-- 切换视图 -->
-            <q-btn-toggle
-              v-model="commandCardStyle"
-              @click="$root.profile.commandCardStyle = commandCardStyle"
-              toggle-color="primary"
-              flat
-              :options="[
-                { slot: 'normal', value: 'normal' },
-                { slot: 'dense', value: 'dense' },
-                { slot: 'mini', value: 'mini' },
-              ]"
-            >
-              <template v-slot:normal>
-                <q-icon name="dashboard" />
-                <q-tooltip>双列视图</q-tooltip>
-              </template>
-              <template v-slot:dense>
-                <q-icon name="apps" />
-                <q-tooltip>三列视图</q-tooltip>
-              </template>
-              <template v-slot:mini>
-                <q-icon name="view_comfy" />
-                <q-tooltip
-                  >五列面板视图<br />
-                  未启用、匹配类型为窗口的命令在此视图下不显示</q-tooltip
-                >
-              </template>
-            </q-btn-toggle>
-            <!-- <q-separator vertical /> -->
-            <q-btn
-              split
-              flat
-              @click="goShareCenter"
-              color="primary"
-              label="分享中心"
-              icon="groups"
-              class="share-btn"
-            />
-            <!-- <q-separator vertical /> -->
-            <!-- 新建按钮 -->
-            <q-btn
-              split
-              flat
-              @click="addNewCommand"
-              color="primary"
-              label="新建"
-              icon="add"
-              class="new-btn"
-            />
-            <!-- <q-separator vertical /> -->
-            <q-btn
-              stretch
-              color="primary"
-              flat
-              size="xs"
-              id="menuBtn"
-              :style="{
-                height: footerBarHeight,
-              }"
-              ><q-spinner-bars color="primary" size="1.5em" />
-              <!-- 菜单 -->
-              <ConfigurationMenu
-                :isTagStared="activatedQuickPanels.includes(currentTag)"
-                :currentTag="currentTag"
-              >
-              </ConfigurationMenu>
-            </q-btn>
-          </q-btn-group>
-        </div>
-      </div>
+        :tab-bar-width="tabBarWidth"
+        :all-quick-command-tags="allQuickCommandTags"
+        :activated-quick-panels="activatedQuickPanels"
+        :dense-tag-bar="$root.profile.denseTagBar"
+      />
+      <CommandPanels
+        v-model="currentTag"
+        :footer-bar-height="footerBarHeight"
+        :tab-bar-width="tabBarWidth"
+        :all-quick-command-tags="allQuickCommandTags"
+        :current-tag-quick-commands="currentTagQuickCommands"
+        :activated-quick-command-feature-codes="
+          activatedQuickCommandFeatureCodes
+        "
+        @command-changed="commandChanged"
+      />
+      <!-- 底栏 -->
+      <FooterBar
+        :height="footerBarHeight"
+        :left="tabBarWidth"
+        :is-tag-stared="activatedQuickPanels.includes(currentTag)"
+        :current-tag="currentTag"
+        :search-keyword="commandSearchKeyword"
+        @update:search="updateSearch"
+        @add-new="addNewCommand"
+      />
     </div>
+
     <!-- 命令编辑界面 -->
-    <q-dialog
-      v-model="isCommandEditorShow"
-      persistent
-      maximized
-      :transition-show="fromNewCommand ? '' : 'slide-up'"
-      transition-hide="slide-down"
-      style="overflow: hidden"
-    >
-      <CommandEditor
-        ref="commandEditor"
-        :action="commandEditorAction"
-        @editorEvent="editorEvent"
-      ></CommandEditor>
-    </q-dialog>
+    <CommandEditor
+      v-show="isCommandEditorShow"
+      ref="commandEditor"
+      :action="commandEditorAction"
+      @editorEvent="editorEvent"
+      :allQuickCommandTags="allQuickCommandTags"
+      :isLeaving="isEditorLeaving"
+      @animationend="handleAnimationEnd"
+    ></CommandEditor>
+
     <CommandRunResult
       :action="{ type: 'config' }"
       ref="result"
@@ -238,9 +61,11 @@ import quickcommandParser from "js/common/quickcommandParser.js";
 import importAll from "js/common/importAll.js";
 import changeLog from "js/options/changeLog.js";
 import pinyinMatch from "pinyin-match";
-import CommandCard from "components/CommandCard";
 import CommandEditor from "components/CommandEditor";
-import ConfigurationMenu from "components/menu";
+import FooterBar from "src/components/config/FooterBar.vue";
+import TagBar from "src/components/config/TagBar.vue";
+import BackgroundLayer from "src/components/config/BackgroundLayer.vue";
+import CommandPanels from "src/components/config/CommandPanels.vue";
 const CommandRunResult = defineAsyncComponent(() =>
   import("components/CommandRunResult.vue")
 );
@@ -251,10 +76,12 @@ let defaultCommands = importAll(require.context("../json/", false, /\.json$/));
 
 export default {
   components: {
-    CommandCard,
     CommandEditor,
-    ConfigurationMenu,
     CommandRunResult,
+    FooterBar,
+    TagBar,
+    BackgroundLayer,
+    CommandPanels,
   },
   data() {
     return {
@@ -268,26 +95,7 @@ export default {
       isCommandEditorShow: false,
       commandEditorAction: {},
       footerBarHeight: "40px",
-      commandCardStyle: this.$root.profile.commandCardStyle,
-      isDev: window.utools.isDev(),
-      commandCardStyleSheet: {
-        mini: {
-          width: "20%",
-          code: 1,
-        },
-        dense: {
-          width: "33%",
-          code: 2,
-        },
-        normal: {
-          width: "50%",
-          code: 3,
-        },
-        large: {
-          width: "100%",
-          code: 4,
-        },
-      },
+      isEditorLeaving: false,
     };
   },
   computed: {
@@ -328,7 +136,7 @@ export default {
     },
     // 标签栏宽度
     tabBarWidth() {
-      return this.commandCardStyle === "mini" ? "0" : "80px";
+      return this.$root.profile.commandCardStyle === "mini" ? "0" : "80px";
     },
     fromNewCommand() {
       return this.$route.name === "newcommand";
@@ -351,7 +159,7 @@ export default {
       this.$router.push("/configuration");
       if (this.$route.params.tags) {
         this.changeCurrentTag(window.hexDecode(this.$route.params.tags));
-        this.commandCardStyle = "mini";
+        this.$root.profile.commandCardStyle = "mini";
       }
       this.showChangeLog();
       // 异步读取
@@ -577,8 +385,9 @@ export default {
       }
       this.activatedQuickCommandFeatureCodes = [];
     },
-    // 搜索
-    updateSearch() {
+    // 搜索方法
+    updateSearch(value) {
+      this.commandSearchKeyword = value;
       // 记录当前标签页
       let searchTagName = "搜索结果";
       if (this.currentTag !== searchTagName) this.lastTag = this.currentTag;
@@ -619,7 +428,10 @@ export default {
       switch (event.type) {
         case "save":
           this.saveCommand(event.data);
-        // this.isCommandEditorShow = false;
+          break;
+        case "back":
+          this.isEditorLeaving = true;
+          break;
         default:
           return;
       }
@@ -644,8 +456,11 @@ export default {
         );
       }
     },
-    goShareCenter() {
-      utools.shellOpenExternal("https://qc.qaz.ink/");
+    handleAnimationEnd(e) {
+      if (this.isEditorLeaving) {
+        this.isEditorLeaving = false;
+        this.isCommandEditorShow = false;
+      }
     },
   },
 };
@@ -659,210 +474,15 @@ export default {
   overflow: hidden;
 }
 
-.background-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 0;
-}
-
-/* 标签栏容器样式 */
-.q-tabs {
-  height: 100vh !important;
-  background: transparent !important;
-}
-
-/* 标签栏和底栏内的按钮悬浮效果 */
-.q-tabs .q-tab:hover,
-.absolute-bottom .q-btn:hover {
-  background: rgba(255, 255, 255, 0.1) !important;
-}
-
-.body--dark .q-tabs .q-tab:hover,
-.body--dark .absolute-bottom .q-btn:hover {
-  background: rgba(255, 255, 255, 0.05) !important;
-}
-
-.q-tab {
-  word-break: break-all;
-  white-space: normal;
-  position: relative;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--q-blue-grey) !important;
-  opacity: 0.7;
-  transition: all 0.3s ease;
-}
-
-/* 激活标签样式 */
-.q-tab--active {
-  color: var(--q-primary) !important;
-  font-weight: 600 !important;
-  opacity: 1;
-}
-
-.q-tab:hover::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--q-primary);
-  opacity: 0.1;
-  border-radius: 4px;
-  transition: opacity 0.3s;
-}
-
-/* 特殊标签样式（搜索结果和激活面板） */
-.q-tab[data-search-result="true"],
-.q-tab[data-active-panel="true"] {
-  color: #4286de !important;
-  font-weight: 600 !important;
-}
-
-/* 标签悬浮效果 */
-.q-tab:hover {
-  opacity: 0.9;
-  transform: translateX(4px);
-}
-
-/* 标签内容过渡效果 */
-.q-tab__content {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* 面板过渡效果 */
 .q-tab-panels {
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  background: none !important;
-}
-
-.q-tab-panel {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* 暗色模式适配 */
-:deep(.body--dark) .q-tab:hover::after {
-  opacity: 0.15;
-}
-
-/* 标签滚动区域样式 */
-.q-scroll-area {
   background: transparent;
 }
 
-:deep(.body--dark) .q-scroll-area {
-  background: transparent;
+.main-content {
+  transition: opacity 0.3s ease;
 }
 
-/* 底栏输入框样式 */
-.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;
-}
-
-/* 底栏毛玻璃效果 */
-body.glass-effect-menu .absolute-bottom {
-  background: rgba(
-    255,
-    255,
-    255,
-    calc(0.15 + var(--glass-effect-strength) * 0.01)
-  ) !important;
-  backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
-  -webkit-backdrop-filter: blur(
-    calc(var(--glass-effect-strength) * 1px)
-  ) !important;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-body.body--dark.glass-effect-menu .absolute-bottom {
-  background: rgba(
-    0,
-    0,
-    0,
-    calc(0.2 + var(--glass-effect-strength) * 0.02)
-  ) !important;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-/* 调整内容层级 */
-.q-scroll-area,
-.q-tab-panels,
-.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"] {
+.main-content.hide {
   opacity: 0;
-  width: 0 !important;
-}
-
-/* 面板过渡效果 */
-.q-tab-panels {
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  background: none !important;
-}
-
-/* 基础按钮动画 */
-.share-btn,
-.new-btn {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.share-btn:hover,
-.new-btn:hover {
-  transform: translateY(-2px);
-  background: rgba(var(--q-primary-rgb), 0.1) !important;
-}
-
-/* 搜索框动画 */
-@keyframes searchIconShake {
-  0%,
-  100% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(-10deg);
-  }
-  75% {
-    transform: rotate(10deg);
-  }
-}
-
-.q-field--focused .q-field__prepend .q-icon {
-  animation: searchIconShake 0.8s ease;
-  color: var(--q-primary);
 }
 </style>