侧栏折叠；适配移动端

ArkMowers · Sep 19, 2023 · 1eb5e65 · 1eb5e65
1 parent 47f3b21
commit 1eb5e65
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 10 deletions.
diff --git a/ui/components.d.ts b/ui/components.d.ts
@@ -30,6 +30,9 @@ declare module '@vue/runtime-core' {
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NLayout: typeof import('naive-ui')['NLayout']
+    NLayoutContent: typeof import('naive-ui')['NLayoutContent']
+    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NLog: typeof import('naive-ui')['NLog']
     NMenu: typeof import('naive-ui')['NMenu']
     NRadio: typeof import('naive-ui')['NRadio']

diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -7,9 +7,27 @@
     :hljs="hljs"
   >
     <n-global-style />
-    <n-menu :options="menuOptions" class="menu" />
     <n-dialog-provider>
-      <router-view class="router-view" />
+      <n-layout has-sider>
+        <n-layout-sider
+          show-trigger="bar"
+          bordered
+          :collapsed-width="0"
+          :show-collapsed-content="false"
+          :collapsed="collapse"
+          :on-update:collapsed="
+            () => {
+              collapse = !collapse
+            }
+          "
+          width="240"
+        >
+          <n-menu default-expand-all :options="menuOptions" class="menu" />
+        </n-layout-sider>
+        <n-layout-content class="main">
+          <router-view />
+        </n-layout-content>
+      </n-layout>
     </n-dialog-provider>
   </n-config-provider>
 </template>
@@ -150,6 +168,8 @@ const { get_running, listen_ws } = mower_store
 
 const axios = inject('axios')
 
+const collapse = ref(true)
+
 function start() {
   running.value = true
   log_lines.value = []
@@ -169,6 +189,10 @@ onMounted(async () => {
     set_window_height()
   })
 
+  if (window.innerWidth > 570) {
+    collapse.value = false
+  }
+
   const params = new URLSearchParams(document.location.search)
   const token = params.get('token')
   axios.defaults.headers.common['token'] = token
@@ -232,8 +256,7 @@ onMounted(async () => {
 }
 
 .home-container {
-  padding: 0 12px 12px;
-  flex-grow: 1;
+  height: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -259,9 +282,8 @@ onMounted(async () => {
   min-width: 200px;
   overflow-y: auto;
 }
-.router-view {
-  flex: 1;
-  flex-basis: 80%;
-  overflow-y: auto;
+
+.main .n-layout-scroll-container {
+  padding: 12px 12px 12px 24px;
 }
 </style>
diff --git a/ui/src/pages/Home.vue b/ui/src/pages/Home.vue
@@ -92,12 +92,11 @@ function stop() {
 
 <style scoped lang="scss">
 .home-container {
-  padding: 0 12px 12px;
-  flex-grow: 1;
   display: flex;
   flex-direction: column;
   gap: 8px;
   overflow: hidden;
+  height: 100%;
 }
 
 .log {