feat(console): 添加控制台UI界面及功能组件

实现BLS项目控制台UI界面，包含以下主要功能：
- 项目选择器组件，支持项目筛选和选择
- 控制台组件，支持命令输入和日志显示
- 调试区域组件，展示调试信息
- 响应式布局设计，适配PC和移动端
- 日志管理功能，限制最多1000条记录
- 更新路由配置和全局样式

src/frontend/App.vue

@@ -1,14 +1,57 @@
 <template>
   <div class="app-container">
     <header class="app-header">
+      <button class="menu-toggle" @click="toggleSidebar" v-if="isMobile">
+        <span class="menu-icon"></span>
+      </button>
       <h1>BLS Project Console</h1>
     </header>
-    <main class="app-main">
-      <router-view />
-    </main>
+    <div class="app-content">
+      <!-- 左侧选择区域 -->
+      <aside class="sidebar" :class="{ 'sidebar-closed': !sidebarOpen && isMobile }">
+        <router-view name="sidebar" />
+      </aside>
+
+      <!-- 右侧调试区域 -->
+      <main class="main-content">
+        <router-view name="main" />
+      </main>
+    </div>
   </div>
 </template>
 
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const sidebarOpen = ref(true);
+const isMobile = ref(false);
+
+// 检测窗口大小变化
+const checkMobile = () => {
+  isMobile.value = window.innerWidth < 768;
+  if (isMobile.value) {
+    sidebarOpen.value = false;
+  } else {
+    sidebarOpen.value = true;
+  }
+};
+
+// 切换侧边栏
+const toggleSidebar = () => {
+  sidebarOpen.value = !sidebarOpen.value;
+};
+
+// 监听窗口大小变化
+onMounted(() => {
+  checkMobile();
+  window.addEventListener('resize', checkMobile);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile);
+});
+</script>
+
 <style>
 * {
   margin: 0;
@@ -18,26 +61,148 @@
 
 body {
   font-family: Arial, sans-serif;
-  background-color: #f5f5f5;
-  color: #333;
+  background-color: #121212;
+  color: #e0e0e0;
+  overflow: hidden;
 }
 
 .app-container {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  background-color: #1e1e1e;
 }
 
 .app-header {
-  background-color: #4285f4;
+  background-color: #008C8C;
   color: white;
-  padding: 1rem;
-  text-align: center;
+  padding: 0.6rem 1rem;
+  display: flex;
+  align-items: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 100;
 }
 
-.app-main {
+.menu-toggle {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.2rem;
+  cursor: pointer;
+  margin-right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.menu-toggle:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.menu-icon {
+  display: block;
+  width: 20px;
+  height: 2px;
+  background-color: white;
+  position: relative;
+  transition: background-color 0.2s;
+}
+
+.menu-icon::before,
+.menu-icon::after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 2px;
+  background-color: white;
+  transition: transform 0.2s, top 0.2s;
+}
+
+.menu-icon::before {
+  top: -6px;
+}
+
+.menu-icon::after {
+  top: 6px;
+}
+
+.app-header h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.app-content {
   flex: 1;
-  padding: 1rem;
+  display: flex;
+  overflow: hidden;
+}
+
+/* 左侧选择区域 */
+.sidebar {
+  width: 280px;
+  background-color: #252526;
+  border-right: 1px solid #3e3e42;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease;
+  overflow-y: auto;
+  z-index: 50;
+  color: #e0e0e0;
+}
+
+/* 移动端侧边栏关闭状态 */
+.sidebar-closed {
+  width: 0;
+  border-right: none;
+  overflow: hidden;
+}
+
+/* 右侧调试区域 */
+.main-content {
+  flex: 1;
+  padding: 0;
+  overflow: hidden;
+  background-color: #1e1e1e;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .menu-toggle {
+    display: flex;
+  }
+
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 60px;
+    height: calc(100vh - 60px);
+    width: 280px;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+  }
+
+  .sidebar-closed {
+    left: -280px;
+    width: 280px;
+  }
+
+  .main-content {
+    padding: 0.5rem;
+    overflow: auto;
+  }
+}
+
+@media (min-width: 769px) {
+  .menu-toggle {
+    display: none;
+  }
+
+  .sidebar {
+    width: 280px;
+  }
 }
 </style>