From a1a955f412ffa5401b8fc3d142e62c4c2c7c2cd8 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Thu, 19 Dec 2024 18:10:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=8F=E5=B0=8F=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandEditor.vue  |  44 ++-
 src/components/CommandSideBar.vue | 609 +++++++++++++++---------------
 2 files changed, 347 insertions(+), 306 deletions(-)

diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue
index 089d6f8..de71e85 100644
--- a/src/components/CommandEditor.vue
+++ b/src/components/CommandEditor.vue
@@ -12,6 +12,7 @@
         transform: isFullscreen ? 'translateX(-100%)' : 'translateX(0)',
         transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
       }"
+      :sideBarWidth="sideBarWidth"
       v-if="showSidebar"
     ></CommandSideBar>
 
@@ -224,13 +225,14 @@
       }"
     />
 
-    <!-- 添加全屏按钮 -->
+    <!-- 全屏按钮 -->
     <q-btn
       class="fullscreen-btn"
       round
       flat
       :icon="isFullscreen ? 'fullscreen_exit' : 'fullscreen'"
       @click="toggleFullscreen"
+      :class="{ 'btn-fullscreen': isFullscreen }"
     >
       <q-tooltip>{{
         isFullscreen ? "退出全屏 (F11)" : "全屏编辑 (F11)"
@@ -252,7 +254,7 @@ const MonacoEditor = defineAsyncComponent(() =>
   import("components/MonacoEditor")
 );
 
-const defaultSideBarWidth = 250;
+const defaultSideBarWidth = 200;
 const defaultlanguageBarHeight = 40;
 
 export default {
@@ -324,7 +326,7 @@ export default {
           : this.action.data;
       quickCommandInfo?.program &&
         Object.assign(this.quickcommandInfo, _.cloneDeep(quickCommandInfo));
-      // 默认命令��编辑
+      // 默认命令编辑
       if (this.quickcommandInfo.tags?.includes("默认") && !utools.isDev()) {
         this.canCommandSave = false;
       }
@@ -466,26 +468,47 @@ export default {
 
 .fullscreen-btn {
   position: fixed;
-  right: 20px;
-  bottom: 20px;
+  right: 24px;
+  bottom: 24px;
   z-index: 1000;
-  background: rgba(var(--q-primary-rgb), 0.1);
+  background: rgba(var(--q-primary-rgb), 0.08);
   color: var(--q-primary);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(4px);
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .fullscreen-btn:hover {
-  background: rgba(var(--q-primary-rgb), 0.2);
-  transform: scale(1.1);
+  background: rgba(var(--q-primary-rgb), 0.15);
+  transform: scale(1.1) translateY(-2px);
+  box-shadow: 0 4px 12px rgba(var(--q-primary-rgb), 0.2);
+}
+
+.fullscreen-btn:active {
+  transform: scale(0.95);
+  transition-duration: 0.1s;
+}
+
+.btn-fullscreen {
+  right: 32px;
+  bottom: 32px;
+  transform: rotate(180deg);
+}
+
+.btn-fullscreen:hover {
+  transform: rotate(180deg) scale(1.1) translateY(-2px);
 }
 
 .body--dark .fullscreen-btn {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .body--dark .fullscreen-btn:hover {
   background: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 /* 统一过渡效果 */
@@ -520,6 +543,7 @@ export default {
 }
 
 .editor-transition {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  will-change: transform, left, top, opacity;
 }
 </style>
diff --git a/src/components/CommandSideBar.vue b/src/components/CommandSideBar.vue
index 0afb23d..0259770 100644
--- a/src/components/CommandSideBar.vue
+++ b/src/components/CommandSideBar.vue
@@ -8,305 +8,316 @@
     }"
     class="command-side-bar"
   >
-    <div class="row q-pa-md q-gutter-md">
-      <q-btn
-        dense
-        flat
-        color="grey"
-        style="margin-right: 29px"
-        icon="arrow_back_ios_new"
-        v-close-popup
-      />
-      <q-avatar size="64" square class="commandLogo">
-        <q-img
-          @click="showIconPicker = true"
-          :src="currentCommand.features.icon"
-        />
-      </q-avatar>
-      <div class="row">
-        <div class="command-side-bar-content">
-          <!-- 说明 -->
-          <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"
+    <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"
+          />
+          <div class="col-12 flex justify-center">
+            <q-avatar size="64" square class="commandLogo">
+              <q-img
+                @click="showIconPicker = true"
+                :src="currentCommand.features.icon"
               />
-            </template>
-          </q-input>
-          <!-- 匹配类型 -->
-          <q-select
-            :disable="!canCommandSave"
-            hide-dropdown-icon
-            stack-label
-            label-color="primary"
-            transition-show="jump-down"
-            transition-hide="jump-up"
-            borderless
-            square
-            @update:model-value="
-              (val) =>
-                (cmdMatch =
-                  val.name === 'professional'
-                    ? JSON.stringify(val.jsonSample, null, 4)
-                    : null)
-            "
-            :options="commandTypesOptions"
-            v-model="cmdType"
-            type="text"
-            label="匹配类型"
+            </q-avatar>
+          </div>
+        </div>
+
+        <div class="row">
+          <div
+            class="command-side-bar-content"
+            :style="{ width: sideBarWidth - sideBarPadding * 2 + 'px' }"
           >
-            <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">
-                <q-item-section avatar>
-                  <q-icon :name="scope.opt.icon" />
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label v-html="scope.opt.name" />
-                  <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"
-            transition-show="jump-down"
-            transition-hide="jump-up"
-            v-if="cmdType.valueType === 'array'"
-            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
-            :disable="!canCommandSave"
-            v-else
-            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>
-          </q-input>
-          <!-- 标签 -->
-          <q-select
-            :disable="!canCommandSave"
-            hide-dropdown-icon
-            stack-label
-            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
-            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"
-            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">
-                <q-item-section avatar>
-                  <q-icon :name="outputTypes[scope.opt].icon" />
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label v-html="outputTypes[scope.opt].label" />
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-          <!-- 搜索面板推送 -->
-          <q-field
-            :disable="!canCommandSave"
-            stack-label
-            label-color="primary"
-            borderless
-            square
-            type="text"
-            label="搜索面板推送"
-          >
-            <template v-slot:control>
-              <div class="self-center full-width no-outline" tabindex="0">
-                {{
-                  currentCommand.features.mainPush
-                    ? "主搜索框执行"
-                    : "进插件后执行"
-                }}
-                <q-btn
-                  flat
-                  round
-                  icon="help_outline"
-                  size="xs"
+            <!-- 说明 -->
+            <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"
+              hide-dropdown-icon
+              stack-label
+              label-color="primary"
+              transition-show="jump-down"
+              transition-hide="jump-up"
+              borderless
+              square
+              @update:model-value="
+                (val) =>
+                  (cmdMatch =
+                    val.name === 'professional'
+                      ? JSON.stringify(val.jsonSample, null, 4)
+                      : null)
+              "
+              :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">
+                  <q-item-section avatar>
+                    <q-icon :name="scope.opt.icon" />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label v-html="scope.opt.name" />
+                    <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"
+              transition-show="jump-down"
+              transition-hide="jump-up"
+              v-if="cmdType.valueType === 'array'"
+              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
+              :disable="!canCommandSave"
+              v-else
+              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>
+            </q-input>
+            <!-- 标签 -->
+            <q-select
+              :disable="!canCommandSave"
+              hide-dropdown-icon
+              stack-label
+              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
+              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"
+              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">
+                  <q-item-section avatar>
+                    <q-icon :name="outputTypes[scope.opt].icon" />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label v-html="outputTypes[scope.opt].label" />
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+            <!-- 搜索面板推送 -->
+            <q-field
+              :disable="!canCommandSave"
+              stack-label
+              label-color="primary"
+              borderless
+              square
+              type="text"
+              label="搜索面板推送"
+            >
+              <template v-slot:control>
+                <div class="self-center full-width no-outline" tabindex="0">
+                  {{
+                    currentCommand.features.mainPush
+                      ? "主搜索执行"
+                      : "进插件执行"
+                  }}
+                  <q-btn
+                    flat
+                    round
+                    icon="help_outline"
+                    size="xs"
+                    dense
+                    @click="showMainPushHelp"
+                  ></q-btn>
+                </div>
+              </template>
+              <template v-slot:prepend>
+                <q-icon class="command-side-bar-icon" name="search" />
+              </template>
+              <template v-slot:append>
+                <q-toggle
+                  v-model="currentCommand.features.mainPush"
+                  color="primary"
+                  size="md"
                   dense
-                  @click="showMainPushHelp"
-                ></q-btn>
-              </div>
-            </template>
-            <template v-slot:prepend>
-              <q-icon class="command-side-bar-icon" name="search" />
-            </template>
-            <template v-slot:append>
-              <q-toggle
-                v-model="currentCommand.features.mainPush"
-                color="primary"
-                size="md"
-                dense
-              />
-            </template>
-          </q-field>
-          <!-- 平台 -->
-          <q-select
-            :disable="!canCommandSave"
-            hide-dropdown-icon
-            stack-label
-            label-color="primary"
-            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">
-                <q-item-section avatar>
-                  <span
-                    :class="`iconfont icon-${platformTypes[scope.opt].icon}`"
-                  ></span>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label v-html="platformTypes[scope.opt].label" />
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
+                />
+              </template>
+            </q-field>
+            <!-- 平台 -->
+            <q-select
+              :disable="!canCommandSave"
+              hide-dropdown-icon
+              stack-label
+              label-color="primary"
+              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">
+                  <q-item-section avatar>
+                    <span
+                      :class="`iconfont icon-${platformTypes[scope.opt].icon}`"
+                    ></span>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label v-html="platformTypes[scope.opt].label" />
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
         </div>
       </div>
     </div>
@@ -355,11 +366,13 @@ export default {
       allQuickCommandTags: this.$parent.allQuickCommandTags,
       showIconPicker: false,
       showUserData: false,
+      sideBarPadding: 12,
     };
   },
   props: {
     quickcommandInfo: Object,
     canCommandSave: Boolean,
+    sideBarWidth: Number,
   },
   computed: {
     commandTypesOptions() {
@@ -578,4 +591,8 @@ export default {
   background: var(--q-primary);
   opacity: 0.85;
 }
+
+/* .command-side-bar-content  {
+  width: 171px;
+} */
 </style>