添加历史记录的功能

src/components/CommandEditor.vue

@@ -225,6 +225,19 @@
       }"
     />
 
+    <!-- 编辑器工具按钮组 -->
+    <div class="editor-tools">
+      <!-- 历史按钮 -->
+      <q-btn
+        class="history-btn"
+        round
+        flat
+        icon="history"
+        @click="showHistory"
+      >
+        <q-tooltip>历史记录</q-tooltip>
+      </q-btn>
+
       <!-- 全屏按钮 -->
       <q-btn
         class="fullscreen-btn"
@@ -238,8 +251,17 @@
           isFullscreen ? "退出全屏 (F11)" : "全屏编辑 (F11)"
         }}</q-tooltip>
       </q-btn>
+    </div>
+
     <!-- 运行结果 -->
     <CommandRunResult :action="action" ref="result"></CommandRunResult>
+
+    <!-- 历史记录组件 -->
+    <EditorHistory
+      ref="history"
+      @restore="restoreHistory"
+      :commandCode="quickcommandInfo.features?.code || 'temp'"
+    />
   </div>
 </template>
 
@@ -249,6 +271,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'
 // Performance Scripting > 500ms
 const MonacoEditor = defineAsyncComponent(() =>
   import("components/MonacoEditor")
@@ -264,6 +287,7 @@ export default {
     CommandRunResult,
     QuickAction,
     KeyRecorder,
+    EditorHistory
   },
   data() {
     return {
@@ -340,6 +364,11 @@ export default {
       this.$refs.editor.setEditorValue(this.quickcommandInfo.cmd);
       this.setLanguage(this.quickcommandInfo.program);
       this.$refs.editor.setCursorPosition(this.quickcommandInfo.cursorPosition);
+
+      // 等待编辑器内容加载完成后再保存
+      setTimeout(() => {
+        this.saveToHistory('初始化保存');
+      }, 1000); // 给予足够的时间让编辑器加载完成
     },
     programChanged(value) {
       this.setLanguage(value);
@@ -386,17 +415,13 @@ export default {
         type: "save",
         data: newQuickcommandInfo,
       });
-      if (!config.silent)
+      if (!config.silent) {
-        quickcommand.showMessageBox(
+        this.saveToHistory(); // 保存时记录历史
-          "保存成功！",
+      }
-          "success",
-          1000,
-          "bottom-right"
-        );
     },
     // 运行
     runCurrentCommand(cmd) {
-      this.saveCurrentCommand({ silent: true });
+      this.saveToHistory('运行时自动保存'); // 运行时保存
       let command = _.cloneDeep(this.quickcommandInfo);
       if (cmd) command.cmd = cmd;
       command.output =
@@ -452,6 +477,47 @@ export default {
         this.$refs.editor.resizeEditor();
       }, 300);
     },
+    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,
+        this.quickcommandInfo.program
+      );
+
+      // 显示提示
+      quickcommand.showMessageBox(
+        message,
+        'success',
+        1000,
+        'bottom-right'
+      );
+    },
+    restoreHistory(item) {
+      // 保存当前内容
+      this.saveToHistory('已保存当前内容');
+
+      // 恢复历史内容
+      this.$refs.editor.setEditorValue(item.content);
+      quickcommand.showMessageBox(
+        '已恢复历史内容',
+        'success',
+        1000,
+        'bottom-right'
+      );
+    },
   },
 };
 </script>
@@ -467,9 +533,6 @@ export default {
 }
 
 .fullscreen-btn {
-  position: fixed;
-  right: 24px;
-  bottom: 24px;
   z-index: 1000;
   background: rgba(var(--q-primary-rgb), 0.08);
   color: var(--q-primary);
@@ -491,8 +554,6 @@ export default {
 }
 
 .btn-fullscreen {
-  right: 32px;
-  bottom: 32px;
   transform: rotate(180deg);
 }
 
@@ -546,4 +607,46 @@ export default {
   transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   will-change: transform, left, top, opacity;
 }
+
+.editor-tools {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.isFullscreen .editor-tools {
+  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>

src/components/popup/EditorHistory.vue

@@ -0,0 +1,238 @@
+<template>
+  <q-dialog
+    v-model="show"
+    position="right"
+    @hide="$emit('hide')"
+    transition-show="slide-left"
+    transition-hide="slide-right"
+  >
+    <q-card class="history-card">
+      <q-card-section class="row items-center q-pb-none">
+        <div class="text-h6">编辑历史</div>
+        <q-space />
+        <q-btn
+          flat
+          round
+          dense
+          icon="delete_sweep"
+          @click="clearHistory"
+        >
+          <q-tooltip>清空历史</q-tooltip>
+        </q-btn>
+        <q-btn icon="close" flat round dense v-close-popup />
+      </q-card-section>
+
+      <q-card-section class="q-pt-sm">
+        <div class="history-list">
+          <q-list separator>
+            <q-item
+              v-for="(item, index) in historyList"
+              :key="index"
+              clickable
+              v-ripple
+              @click="restoreHistory(item)"
+              class="history-item"
+            >
+              <q-item-section>
+                <q-item-label>{{ formatDate(item.timestamp) }}</q-item-label>
+                <q-item-label caption>
+                  {{ item.program }} · {{ truncateContent(item.content) }}
+                </q-item-label>
+              </q-item-section>
+
+              <q-item-section side>
+                <q-btn
+                  flat
+                  round
+                  dense
+                  icon="delete_outline"
+                  @click.stop="deleteHistory(index)"
+                >
+                  <q-tooltip>删除</q-tooltip>
+                </q-btn>
+              </q-item-section>
+
+              <!-- 预览弹窗 -->
+              <q-tooltip
+                anchor="center right"
+                self="center left"
+                :offset="[10, 0]"
+                class="history-preview bg-dark"
+                :delay="500"
+              >
+                <pre class="preview-content">{{ item.content }}</pre>
+              </q-tooltip>
+            </q-item>
+          </q-list>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+export default {
+  name: 'EditorHistory',
+
+  props: {
+    commandCode: {
+      type: String,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      show: false,
+      historyList: [],
+      maxHistoryItems: 50,
+      storagePrefix: 'editor_history_'
+    }
+  },
+
+  methods: {
+    getStorageKey(timestamp) {
+      return `${this.storagePrefix}${this.commandCode}_${timestamp}`;
+    },
+
+    open() {
+      this.loadHistory();
+      this.show = true;
+    },
+
+    loadHistory() {
+      this.historyList = [];
+      const prefix = `${this.storagePrefix}${this.commandCode}_`;
+
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key.startsWith(prefix)) {
+          try {
+            const item = JSON.parse(localStorage.getItem(key));
+            this.historyList.push(item);
+          } catch (e) {
+            console.error('Failed to parse history item:', e);
+          }
+        }
+      }
+
+      this.historyList.sort((a, b) => b.timestamp - a.timestamp);
+
+      if (this.historyList.length > this.maxHistoryItems) {
+        const toDelete = this.historyList.slice(this.maxHistoryItems);
+        toDelete.forEach(item => {
+          localStorage.removeItem(this.getStorageKey(item.timestamp));
+        });
+        this.historyList = this.historyList.slice(0, this.maxHistoryItems);
+      }
+    },
+
+    saveHistory(content, program) {
+      const timestamp = Date.now();
+      const historyItem = {
+        content,
+        program,
+        timestamp
+      };
+
+      try {
+        localStorage.setItem(
+          this.getStorageKey(timestamp),
+          JSON.stringify(historyItem)
+        );
+
+        this.loadHistory();
+      } catch (e) {
+        if (e.name === 'QuotaExceededError') {
+          if (this.historyList.length > 0) {
+            const oldestItem = this.historyList[this.historyList.length - 1];
+            localStorage.removeItem(this.getStorageKey(oldestItem.timestamp));
+            this.saveHistory(content, program);
+          }
+        }
+      }
+    },
+
+    deleteHistory(index) {
+      const item = this.historyList[index];
+      localStorage.removeItem(this.getStorageKey(item.timestamp));
+      this.historyList.splice(index, 1);
+    },
+
+    clearHistory() {
+      const prefix = `${this.storagePrefix}${this.commandCode}_`;
+      for (let i = localStorage.length - 1; i >= 0; i--) {
+        const key = localStorage.key(i);
+        if (key.startsWith(prefix)) {
+          localStorage.removeItem(key);
+        }
+      }
+      this.historyList = [];
+    },
+
+    restoreHistory(item) {
+      this.$emit('restore', item);
+      this.show = false;
+    },
+
+    formatDate(timestamp) {
+      const date = new Date(timestamp);
+      const now = new Date();
+      const diff = now - date;
+
+      // 24小时内显示相对时间
+      if (diff < 24 * 60 * 60 * 1000) {
+        if (diff < 60 * 1000) return '刚刚';
+        if (diff < 60 * 60 * 1000) return `${Math.floor(diff / 60000)}分钟前`;
+        return `${Math.floor(diff / 3600000)}小时前`;
+      }
+
+      // 超过24小时显示具体日期时间
+      return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
+    },
+
+    truncateContent(content) {
+      return content.length > 50 ? content.slice(0, 50) + '...' : content;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.history-card {
+  width: 400px;
+  max-width: 90vw;
+  height: 100vh;
+}
+
+.history-list {
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+}
+
+.history-item {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.history-item:hover {
+  background: rgba(var(--q-primary-rgb), 0.05);
+}
+
+.history-preview {
+  max-width: 400px;
+  padding: 12px;
+}
+
+.preview-content {
+  margin: 0;
+  white-space: pre-wrap;
+  font-size: 12px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+/* 暗色模式适配 */
+.body--dark .history-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+</style>