减小侧边栏宽度

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));
-      // 默认命令<EFBFBD><EFBFBD>编辑
+      // 默认命令编辑
       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>

src/components/CommandSideBar.vue

@@ -8,23 +8,33 @@
     }"
     class="command-side-bar"
   >
-    <div class="row q-pa-md q-gutter-md">
+    <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"
-        style="margin-right: 29px"
             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"
               />
             </q-avatar>
+          </div>
+        </div>
+
         <div class="row">
-        <div class="command-side-bar-content">
+          <div
+            class="command-side-bar-content"
+            :style="{ width: sideBarWidth - sideBarPadding * 2 + 'px' }"
+          >
             <!-- 说明 -->
             <q-input
               :disable="!canCommandSave"
@@ -95,7 +105,7 @@
               v-model="cmdMatch"
               max-values="3"
               type="text"
-            placeholder="回车添加多个"
+              placeholder="回车添加"
               use-input
               use-chips
               multiple
@@ -140,7 +150,7 @@
               max-values="3"
               type="text"
               label="标签"
-            placeholder="回车添加多个"
+              placeholder="回车添加"
               use-input
               use-chips
               multiple
@@ -239,8 +249,8 @@
                 <div class="self-center full-width no-outline" tabindex="0">
                   {{
                     currentCommand.features.mainPush
-                    ? "主搜索框执行"
-                    : "进插件后执行"
+                      ? "主搜索执行"
+                      : "进插件执行"
                   }}
                   <q-btn
                     flat
@@ -310,6 +320,7 @@
           </div>
         </div>
       </div>
+    </div>
     <q-dialog v-model="showIconPicker" position="left">
       <iconPicker
         @iconChanged="(dataUrl) => (currentCommand.features.icon = dataUrl)"
@@ -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>