feat: 页面结构调整

src/main/index.js

@@ -227,8 +227,8 @@ const createWindow = () => {
   Menu.setApplicationMenu(null);
 
   const mainWindow = new BrowserWindow({
-    width: 1280,
-    height: 800,
+    width: 1600,
+    height: 1000,
     minWidth: 800,
     minHeight: 600,
     webPreferences: {

src/renderer/App.vue

@@ -1,7 +1,95 @@
 <template>
-  <router-view />
+  <div class="flex flex-col h-screen w-screen overflow-hidden">
+    <div class="flex flex-1 overflow-hidden">
+      <!-- 侧边栏 -->
+      <aside
+        :class="[
+          'flex flex-col bg-white border-r border-gray-200 transition-all duration-300 no-drag',
+          appStore.collapsed ? 'w-16' : 'w-56',
+        ]"
+      >
+        <!-- Logo -->
+        <div class="flex items-center h-14 px-4 border-b border-gray-200 shrink-0">
+          <el-icon class="text-blue-500 text-xl shrink-0"><Monitor /></el-icon>
+          <template v-if="!appStore.collapsed">
+            <el-button class="ml-2 font-semibold text-gray-800 truncate" link @click="showAppInfo = true">
+              {{ appStore.title }}
+            </el-button>
+          </template>
+        </div>
+
+        <!-- 导航菜单 -->
+        <el-menu
+          :default-active="$route.path"
+          :collapse="appStore.collapsed"
+          :collapse-transition="false"
+          router
+          class="flex-1 border-none"
+        >
+          <el-menu-item index="/">
+            <el-icon><House /></el-icon>
+            <template #title>首页</template>
+          </el-menu-item>
+          <el-menu-item index="/chat">
+            <el-icon><ChatDotRound /></el-icon>
+            <template #title>OpenCode 对话</template>
+          </el-menu-item>
+          <el-menu-item index="/bonjour">
+            <el-icon><Search /></el-icon>
+            <template #title>发现设备</template>
+          </el-menu-item>
+        </el-menu>
+
+        <!-- 折叠按钮 -->
+        <div class="p-3 border-t border-gray-200">
+          <el-button :icon="appStore.collapsed ? Expand : Fold" circle size="small" @click="appStore.toggleSidebar" />
+        </div>
+      </aside>
+
+      <!-- 主内容区 -->
+      <div class="flex flex-col flex-1 overflow-hidden">
+        <!-- 顶部栏 -->
+        <header class="flex items-center justify-between h-14 px-6 bg-white border-b border-gray-200 shrink-0">
+          <h1 class="text-base font-medium text-gray-700">{{ currentTitle }}</h1>
+          <div class="flex items-center gap-2">
+            <el-avatar :size="32" class="bg-blue-500">U</el-avatar>
+          </div>
+        </header>
+
+        <!-- 页面内容 -->
+        <main class="flex-1 overflow-hidden p-6">
+          <div class="h-full overflow-auto">
+            <router-view />
+          </div>
+        </main>
+      </div>
+    </div>
+
+    <!-- 应用信息弹窗 -->
+    <el-dialog v-model="showAppInfo" :title="appStore.title" width="400">
+      <div class="p-4 text-center">
+        <p class="text-lg font-medium mb-2">欢迎使用 {{ appStore.title }}</p>
+        <p class="text-sm text-gray-500">这是一个基于 Electron 和 Vue 3 的应用示例。</p>
+      </div>
+      <template #footer>
+        <div class="flex justify-end">
+          <el-button type="primary" @click="showAppInfo = false">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
-// App 根组件，路由视图入口
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useAppStore } from '@/stores/app';
+import { House, Monitor, Expand, Fold, ChatDotRound, Search } from '@element-plus/icons-vue';
+
+const route = useRoute();
+const appStore = useAppStore();
+
+const showAppInfo = ref(false);
+
+const currentTitle = computed(() => route.meta?.title || appStore.title);
 </script>

src/renderer/layouts/DefaultLayout.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="flex flex-col h-screen w-screen overflow-hidden">
-    <div class="flex flex-1 overflow-hidden">
-      <!-- 侧边栏 -->
-      <aside
-        :class="[
-          'flex flex-col bg-white border-r border-gray-200 transition-all duration-300 no-drag',
-          appStore.collapsed ? 'w-16' : 'w-56',
-        ]"
-      >
-        <!-- Logo -->
-        <div class="flex items-center h-14 px-4 border-b border-gray-200 shrink-0">
-          <el-icon class="text-blue-500 text-xl shrink-0"><Monitor /></el-icon>
-          <template v-if="!appStore.collapsed">
-            <el-button class="ml-2 font-semibold text-gray-800 truncate" link @click="showAppInfo = true">
-              {{ appStore.title }}
-            </el-button>
-          </template>
-        </div>
-
-        <!-- 导航菜单 -->
-        <el-menu
-          :default-active="$route.path"
-          :collapse="appStore.collapsed"
-          :collapse-transition="false"
-          router
-          class="flex-1 border-none"
-        >
-          <el-menu-item index="/">
-            <el-icon><House /></el-icon>
-            <template #title>首页</template>
-          </el-menu-item>
-          <el-menu-item index="/chat">
-            <el-icon><ChatDotRound /></el-icon>
-            <template #title>OpenCode 对话</template>
-          </el-menu-item>
-          <el-menu-item index="/bonjour">
-            <el-icon><Search /></el-icon>
-            <template #title>发现设备</template>
-          </el-menu-item>
-        </el-menu>
-
-        <!-- 折叠按钮 -->
-        <div class="p-3 border-t border-gray-200">
-          <el-button :icon="appStore.collapsed ? Expand : Fold" circle size="small" @click="appStore.toggleSidebar" />
-        </div>
-      </aside>
-
-      <!-- 主内容区 -->
-      <div class="flex flex-col flex-1 overflow-hidden">
-        <!-- 顶部栏 -->
-        <header class="flex items-center justify-between h-14 px-6 bg-white border-b border-gray-200 shrink-0">
-          <h1 class="text-base font-medium text-gray-700">{{ currentTitle }}</h1>
-          <div class="flex items-center gap-2">
-            <el-avatar :size="32" class="bg-blue-500">U</el-avatar>
-          </div>
-        </header>
-
-        <!-- 页面内容 -->
-        <main class="flex-1 overflow-hidden p-6">
-          <div class="h-full overflow-auto">
-            <router-view />
-          </div>
-        </main>
-      </div>
-    </div>
-
-    <!-- 应用信息弹窗 -->
-    <el-dialog v-model="showAppInfo" :title="appStore.title" width="400">
-      <div class="p-4 text-center">
-        <p class="text-lg font-medium mb-2">欢迎使用 {{ appStore.title }}</p>
-        <p class="text-sm text-gray-500">这是一个基于 Electron 和 Vue 3 的应用示例。</p>
-      </div>
-      <template #footer>
-        <div class="flex justify-end">
-          <el-button type="primary" @click="showAppInfo = false">确定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { useAppStore } from '@/stores/app';
-import { House, Monitor, Expand, Fold, Edit, ChatDotRound, Search } from '@element-plus/icons-vue';
-import LucideIcon from '../components/base/LucideIcon.vue';
-
-const route = useRoute();
-const appStore = useAppStore();
-
-const showAppInfo = ref(false);
-
-const currentTitle = computed(() => route.meta?.title || appStore.title);
-</script>

src/renderer/router/index.js

@@ -3,27 +3,21 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 const routes = [
   {
     path: '/',
-    component: () => import('@/layouts/DefaultLayout.vue'),
-    children: [
-      {
-        path: '',
-        name: 'Home',
-        component: () => import('@/views/home/HomeView.vue'),
-        meta: { title: '首页' },
-      },
-      {
-        path: '/chat',
-        name: 'Chat',
-        component: () => import('@/views/chat/ChatView.vue'),
-        meta: { title: 'OpenCode 对话' },
-      },
-      {
-        path: '/bonjour',
-        name: 'Bonjour',
-        component: () => import('@/views/bonjour/BonjourView.vue'),
-        meta: { title: '发现设备' },
-      },
-    ],
+    name: 'Home',
+    component: () => import('@/views/home/HomeView.vue'),
+    meta: { title: '首页' },
+  },
+  {
+    path: '/chat',
+    name: 'Chat',
+    component: () => import('@/views/chat/ChatView.vue'),
+    meta: { title: 'OpenCode 对话' },
+  },
+  {
+    path: '/bonjour',
+    name: 'Bonjour',
+    component: () => import('@/views/bonjour/BonjourView.vue'),
+    meta: { title: '发现设备' },
   },
 ];