优化历史记录列表及预览界面

src/components/CommandEditor.vue

@@ -227,24 +227,20 @@
 
     <!-- 编辑器工具按钮组 -->
     <div class="editor-tools">
-      <!-- 历史按钮 -->
-      <q-btn
-        class="history-btn"
-        round
-        flat
-        icon="history"
-        @click="showHistory"
-      >
-        <q-tooltip>历史记录</q-tooltip>
-      </q-btn>
+      <!-- 历史记录组件 -->
+      <EditorHistory
+        ref="history"
+        :commandCode="quickcommandInfo?.features?.code || 'temp'"
+        @restore="restoreHistory"
+      />
 
       <!-- 全屏按钮 -->
       <q-btn
-        class="fullscreen-btn"
         round
-        flat
+        dense
         :icon="isFullscreen ? 'fullscreen_exit' : 'fullscreen'"
         @click="toggleFullscreen"
+        class="fullscreen-btn"
         :class="{ 'btn-fullscreen': isFullscreen }"
       >
         <q-tooltip>{{
@@ -255,13 +251,6 @@
 
     <!-- 运行结果 -->
     <CommandRunResult :action="action" ref="result"></CommandRunResult>
-
-    <!-- 历史记录组件 -->
-    <EditorHistory
-      ref="history"
-      @restore="restoreHistory"
-      :commandCode="quickcommandInfo.features?.code || 'temp'"
-    />
   </div>
 </template>
 
@@ -271,7 +260,7 @@ import CommandSideBar from "components/CommandSideBar";
 import CommandRunResult from "components/CommandRunResult";
 import QuickAction from "components/popup/QuickAction";
 import KeyRecorder from "components/popup/KeyRecorder";
-import EditorHistory from 'components/popup/EditorHistory.vue'
+import EditorHistory from "components/popup/EditorHistory.vue";
 // Performance Scripting > 500ms
 const MonacoEditor = defineAsyncComponent(() =>
   import("components/MonacoEditor")
@@ -287,7 +276,7 @@ export default {
     CommandRunResult,
     QuickAction,
     KeyRecorder,
-    EditorHistory
+    EditorHistory,
   },
   data() {
     return {
@@ -367,8 +356,8 @@ export default {
 
       // 等待编辑器内容加载完成后再保存
       setTimeout(() => {
-        this.saveToHistory('初始化保存');
-      }, 1000); // 给予足够的时间让编辑器加载完成
+        this.saveToHistory();
+      }, 1000); // 给予足够的时间让编辑器载完成
     },
     programChanged(value) {
       this.setLanguage(value);
@@ -421,7 +410,7 @@ export default {
     },
     // 运行
     runCurrentCommand(cmd) {
-      this.saveToHistory('运行时自动保存'); // 运行时保存
+      this.saveToHistory(); // 运行时保存
       let command = _.cloneDeep(this.quickcommandInfo);
       if (cmd) command.cmd = cmd;
       command.output =
@@ -480,43 +469,18 @@ export default {
     showHistory() {
       this.$refs.history.open();
     },
-    saveToHistory(message = '已保存') {
-      // 确保编辑器已经初始化
-      if (!this.$refs.editor) {
-        return;
-      }
-
-      const content = this.$refs.editor.getEditorValue();
-      // 检查内容是否为空或未定义
-      if (!content || !content.trim()) {
-        return;
-      }
-
-      this.$refs.history.saveHistory(
-        content,
+    saveToHistory() {
+      this.$refs.history.tryToSave(
+        this.$refs.editor.getEditorValue(),
         this.quickcommandInfo.program
       );
-
-      // 显示提示
-      quickcommand.showMessageBox(
-        message,
-        'success',
-        1000,
-        'bottom-right'
-      );
     },
     restoreHistory(item) {
       // 保存当前内容
-      this.saveToHistory('已保存当前内容');
+      this.saveToHistory();
 
       // 恢复历史内容
       this.$refs.editor.setEditorValue(item.content);
-      quickcommand.showMessageBox(
-        '已恢复历史内容',
-        'success',
-        1000,
-        'bottom-right'
-      );
     },
   },
 };
@@ -534,18 +498,14 @@ export default {
 
 .fullscreen-btn {
   z-index: 1000;
-  background: rgba(var(--q-primary-rgb), 0.08);
-  color: var(--q-primary);
   transform-origin: center;
+  color: #666;
   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.15);
   transform: scale(1.1) translateY(-2px);
-  box-shadow: 0 4px 12px rgba(var(--q-primary-rgb), 0.2);
 }
 
 .fullscreen-btn:active {
@@ -558,13 +518,13 @@ export default {
 }
 
 .btn-fullscreen:hover {
-  transform: rotate(180deg) scale(1.1) translateY(-2px);
+  transform: rotate(180deg) scale(1.1);
 }
 
 .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);
+  color: #bbb;
 }
 
 .body--dark .fullscreen-btn:hover {
@@ -623,30 +583,4 @@ export default {
   right: 32px;
   bottom: 32px;
 }
-
-.history-btn {
-  background: rgba(var(--q-primary-rgb), 0.08);
-  color: var(--q-primary);
-  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);
-}
-
-.history-btn:hover {
-  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);
-}
-
-.body--dark .history-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 .history-btn:hover {
-  background: rgba(255, 255, 255, 0.15);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
 </style>