feat: 添加连接备注功能

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