feat: 页面结构调整
This commit is contained in:
@@ -227,8 +227,8 @@ const createWindow = () => {
|
|||||||
Menu.setApplicationMenu(null);
|
Menu.setApplicationMenu(null);
|
||||||
|
|
||||||
const mainWindow = new BrowserWindow({
|
const mainWindow = new BrowserWindow({
|
||||||
width: 1280,
|
width: 1600,
|
||||||
height: 800,
|
height: 1000,
|
||||||
minWidth: 800,
|
minWidth: 800,
|
||||||
minHeight: 600,
|
minHeight: 600,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
|
|||||||
@@ -1,7 +1,95 @@
|
|||||||
<template>
|
<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 />
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<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>
|
</script>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -3,10 +3,6 @@ import { createRouter, createWebHashHistory } from 'vue-router';
|
|||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
component: () => import('@/layouts/DefaultLayout.vue'),
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
component: () => import('@/views/home/HomeView.vue'),
|
component: () => import('@/views/home/HomeView.vue'),
|
||||||
meta: { title: '首页' },
|
meta: { title: '首页' },
|
||||||
@@ -23,8 +19,6 @@ const routes = [
|
|||||||
component: () => import('@/views/bonjour/BonjourView.vue'),
|
component: () => import('@/views/bonjour/BonjourView.vue'),
|
||||||
meta: { title: '发现设备' },
|
meta: { title: '发现设备' },
|
||||||
},
|
},
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|||||||
Reference in New Issue
Block a user