From bfc0f95c8f30cd5d14ae5fc9d904446930c49a06 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Wed, 2 Jul 2025 21:44:30 +0800
Subject: [PATCH] feat: main layout

---
 open-isle-cli/src/App.vue                     | 33 +++++++++----------
 open-isle-cli/src/assets/global.css           | 13 ++++++++
 .../src/components/HeaderComponent.vue        |  6 ++--
 .../src/components/MenuComponent.vue          |  8 ++---
 open-isle-cli/src/main.js                     |  1 +
 open-isle-cli/src/views/HomePageView.vue      |  3 +-
 6 files changed, 37 insertions(+), 27 deletions(-)
 create mode 100644 open-isle-cli/src/assets/global.css

diff --git a/open-isle-cli/src/App.vue b/open-isle-cli/src/App.vue
index 0dd2cd6ba..4568ff505 100644
--- a/open-isle-cli/src/App.vue
+++ b/open-isle-cli/src/App.vue
@@ -1,9 +1,12 @@
 <template>
   <div id="app">
     <HeaderComponent @toggle-menu="menuVisible = !menuVisible" />
-    <MenuComponent :visible="menuVisible" />
-    <div class="content" :class="{ 'with-menu': menuVisible }">
-      <router-view />
+
+    <div class="main-container">
+      <MenuComponent :visible="menuVisible" />
+      <div class="content" :class="{ 'with-menu': menuVisible }">
+        <router-view />
+      </div>
     </div>
   </div>
 </template>
@@ -22,22 +25,18 @@ export default {
 </script>
 
 <style>
-<<<<<<< HEAD
-
-=======
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
 .content {
-  margin-left: 0;
   transition: margin-left 0.3s ease;
-  padding-top: 60px;
 }
-.content.with-menu {
-  margin-left: 200px;
+
+.main-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  max-width: var(--page-max-width);
+  margin-left: auto;
+  margin-right: auto;
+  background-color: var(--normal-background-color);
 }
->>>>>>> 09bbafa1912b3a87115018c72230fd57e8d08aff
+
 </style>
diff --git a/open-isle-cli/src/assets/global.css b/open-isle-cli/src/assets/global.css
new file mode 100644
index 000000000..ddcaad32c
--- /dev/null
+++ b/open-isle-cli/src/assets/global.css
@@ -0,0 +1,13 @@
+:root {
+  --header-height: 60px;
+  --header-background-color: gray;
+  --menu-background-color: darkgray;
+  --normal-background-color: lightgray;
+  --menu-width: 200px;
+  --page-max-width: 1200px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
\ No newline at end of file
diff --git a/open-isle-cli/src/components/HeaderComponent.vue b/open-isle-cli/src/components/HeaderComponent.vue
index ff360a0ba..f6dbae795 100644
--- a/open-isle-cli/src/components/HeaderComponent.vue
+++ b/open-isle-cli/src/components/HeaderComponent.vue
@@ -16,9 +16,9 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 20px;
-  background-color: #42b983;
-  color: white;
+  height: var(--header-height);
+  background-color: var(--header-background-color);
+  color: var(--header-text-color);
 }
 .menu-btn {
   font-size: 24px;
diff --git a/open-isle-cli/src/components/MenuComponent.vue b/open-isle-cli/src/components/MenuComponent.vue
index 5968bf685..316d52be7 100644
--- a/open-isle-cli/src/components/MenuComponent.vue
+++ b/open-isle-cli/src/components/MenuComponent.vue
@@ -23,13 +23,9 @@ export default {
 <style scoped>
 .menu {
   width: 200px;
-  background-color: #f5f5f5;
-  padding: 10px;
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
+  background-color: var(--menu-background-color);
   overflow-y: auto;
+  height: calc(100vh - var(--header-height));
 }
 .slide-enter-active, .slide-leave-active {
   transition: transform 0.3s ease;
diff --git a/open-isle-cli/src/main.js b/open-isle-cli/src/main.js
index 3e79677c7..e051776ff 100644
--- a/open-isle-cli/src/main.js
+++ b/open-isle-cli/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import './assets/global.css'
 
 createApp(App).use(router).mount('#app')
diff --git a/open-isle-cli/src/views/HomePageView.vue b/open-isle-cli/src/views/HomePageView.vue
index 8e3e40f14..b675f9d8e 100644
--- a/open-isle-cli/src/views/HomePageView.vue
+++ b/open-isle-cli/src/views/HomePageView.vue
@@ -13,6 +13,7 @@ export default {
 
 <style scoped>
 .home-page {
-  padding: 20px;
+  background-color: white;
+  color: black;
 }
 </style>