feat: 添加连接备注功能

packages/frontend/src/components/AddConnectionForm.vue

@@ -42,6 +42,7 @@ const initialFormData = {
   selected_ssh_key_id: null as number | null, // +++ Add field for selected key ID +++
   proxy_id: null as number | null,
   tag_ids: [] as number[], // 新增 tag_ids 字段
+notes: '', // 新增备注字段
   // Add RDP specific fields later if needed, e.g., domain
 };
 const formData = reactive({ ...initialFormData });
@@ -85,6 +86,7 @@ watch(() => props.connectionToEdit, (newVal) => {
         formData.username = newVal.username;
         formData.auth_method = newVal.auth_method;
         formData.proxy_id = newVal.proxy_id ?? null;
+formData.notes = newVal.notes ?? ''; // 填充备注
        formData.tag_ids = newVal.tag_ids ? [...newVal.tag_ids] : []; // 填充 tag_ids (深拷贝)
 
        // +++ 填充 selected_ssh_key_id (如果认证方式是 key) +++
@@ -104,6 +106,7 @@ watch(() => props.connectionToEdit, (newVal) => {
        Object.assign(formData, initialFormData);
        formData.tag_ids = []; // 确保 tag_ids 也被重置为空数组
        formData.selected_ssh_key_id = null; // 确保添加模式下也重置
+formData.notes = ''; // 重置备注
     }
 }, { immediate: true });
 
@@ -202,6 +205,7 @@ const handleSubmit = async () => {
       name: formData.name,
       host: formData.host,
       port: formData.port,
+notes: formData.notes, // 添加备注
       username: formData.username,
       proxy_id: formData.proxy_id || null,
       tag_ids: formData.tag_ids || [], // 发送 tag_ids
@@ -528,6 +532,13 @@ const testButtonText = computed(() => {
              <div v-if="isTagLoading" class="mt-1 text-xs text-text-secondary">{{ t('tags.loading') }}</div>
              <div v-if="tagStoreError" class="mt-1 text-xs text-error">{{ t('tags.error', { error: tagStoreError }) }}</div>
            </div>
+           <!-- Notes Section -->
+           <div>
+             <label for="conn-notes" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.notes', '备注') }}</label>
+             <textarea id="conn-notes" v-model="formData.notes" rows="3"
+                       class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
+                       :placeholder="t('connections.form.notesPlaceholder', '输入连接备注...')"></textarea>
+           </div>
          </div>
 
         <!-- Error message -->

packages/frontend/src/components/CommandInputBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, nextTick, onMounted, onBeforeUnmount, defineExpose, computed } from 'vue';
+import { ref, watch, nextTick, onMounted, onBeforeUnmount, defineExpose, computed, defineOptions } from 'vue'; // Import defineOptions
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { useSessionStore } from '../stores/session.store'; // +++ 导入 Session Store +++
@@ -9,6 +9,9 @@ import { useQuickCommandsStore } from '../stores/quickCommands.store';
 import { useCommandHistoryStore } from '../stores/commandHistory.store';
 import QuickCommandsModal from './QuickCommandsModal.vue'; // +++ Import the modal component +++
 
+// Disable attribute inheritance as this component has multiple root nodes (div + modal)
+defineOptions({ inheritAttrs: false });
+
 const emit = defineEmits(['send-command', 'search', 'find-next', 'find-previous', 'close-search', 'clear-terminal']); // 添加 clear-terminal 事件
 const { t } = useI18n();
 const focusSwitcherStore = useFocusSwitcherStore();
@@ -267,7 +270,7 @@ const handleQuickCommandExecute = (command: string) => {
 </script>
 
 <template>
-  <div class="flex items-center px-2 py-1.5 bg-background gap-2">
+  <div :class="$attrs.class" class="flex items-center px-2 py-1.5 bg-background gap-2"> <!-- Bind $attrs.class -->
     <div class="flex-grow flex items-center bg-transparent relative gap-2">
       <!-- Clear Terminal Button -->
       <button

packages/frontend/src/locales/en-US.json

@@ -160,6 +160,8 @@
       "proxy": "Proxy:",
       "noProxy": "No Proxy",
       "tags": "Tags:",
+"notes": "Notes:",
+      "notesPlaceholder": "Enter connection notes...",
 "connectionType": "Connection Type:",
       "typeSsh": "SSH",
       "typeRdp": "RDP",

packages/frontend/src/locales/ja-JP.json

@@ -136,6 +136,8 @@
             "sectionAuth": "認証情報",
             "sectionBasic": "基本情報",
             "tags": "タグ:",
+            "notes": "備考：",
+"notesPlaceholder": "接続に関する備考を入力してください...",
             "testConnection": "接続をテスト",
             "testing": "テスト中...",
             "title": "新しい接続を追加",

packages/frontend/src/locales/zh-CN.json

@@ -160,6 +160,8 @@
       "proxy": "代理:",
       "noProxy": "无代理",
       "tags": "标签:",
+"notes": "备注:",
+      "notesPlaceholder": "输入连接备注...",
 "connectionType": "连接类型",
       "typeSsh": "SSH",
       "typeRdp": "RDP",

packages/frontend/src/stores/connections.store.ts

@@ -16,6 +16,7 @@ export interface ConnectionInfo {
     created_at: number;
     updated_at: number;
     last_connected_at: number | null;
+notes?: string | null; // 新增备注字段
 }
 
 // 定义 Store State 的接口