新增：连接管理、数据查询等功能

web/src/components/ThemeToggle.vue

@@ -0,0 +1,50 @@
+<template>
+  <a-tooltip :content="tooltipText" position="bottom">
+    <div
+      class="theme-toggle-btn"
+      @click="handleToggle"
+    >
+      {{ isDark ? '🌙' : '☀️' }}
+    </div>
+  </a-tooltip>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+const { isDark, toggleTheme } = useTheme()
+
+const tooltipText = computed(() => {
+  return isDark.value ? '切换到亮色主题' : '切换到夜间主题'
+})
+
+const handleToggle = () => {
+  toggleTheme()
+}
+</script>
+
+<style scoped>
+.theme-toggle-btn {
+  width: 32px;
+  height: 32px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: var(--border-radius-small, 2px);
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  transition: background-color 0.2s;
+}
+
+.theme-toggle-btn:hover {
+  background: var(--color-bg-2);
+}
+
+.theme-toggle-btn:active {
+  background: var(--color-bg-3);
+}
+</style>