From 3d572c064395ca02a648c564ec935c5ef335e076 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 15 Apr 2022 16:17:02 +0800
Subject: [PATCH] feat: add base layout components

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 index.html                                    |  2 +-
 src/App.vue                                   | 15 +----------
 src/components/base/menu/Menu.vue             |  2 +-
 .../__snapshots__/Menu.spec.tsx.snap          |  6 ++---
 src/layouts/BlankLayout.vue                   |  7 ++++++
 src/layouts/FilledLayout.vue                  | 25 +++++++++++++++++++
 src/layouts/index.ts                          |  2 ++
 src/views/AboutView.vue                       | 10 +++++---
 src/views/HomeView.vue                        |  9 ++++---
 src/views/__tests__/HomeView.spec.ts          | 11 --------
 10 files changed, 53 insertions(+), 36 deletions(-)
 create mode 100644 src/layouts/BlankLayout.vue
 create mode 100644 src/layouts/FilledLayout.vue
 create mode 100644 src/layouts/index.ts
 delete mode 100644 src/views/__tests__/HomeView.spec.ts

diff --git a/index.html b/index.html
index a48002ab..e0c74c92 100644
--- a/index.html
+++ b/index.html
@@ -44,7 +44,7 @@
         JavaScript enabled. Please enable it to continue.
       </strong>
     </noscript>
-    <div id="app">
+    <div id="app" class="h-screen">
       <div id="loader"></div>
     </div>
     <script type="module" src="/src/main.ts"></script>
diff --git a/src/App.vue b/src/App.vue
index e19487ed..8c3013c5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,9 @@
 <script lang="ts" setup>
 import { RouterView } from "vue-router";
-import { VRoutesMenu } from "@/components/base/menu";
-import { menus } from "@/router/menus.config";
-import logo from "@/assets/logo.svg";
 </script>
 
 <template>
-  <div class="flex">
-    <div class="navbar h-screen w-72 p-4" style="background: #fff">
-      <div class="logo flex justify-center pt-2 pb-6">
-        <img :src="logo" style="width: 80px" alt="Halo Logo" />
-      </div>
-      <VRoutesMenu :menus="menus" />
-    </div>
-    <div class="flex-1">
-      <RouterView />
-    </div>
-  </div>
+  <RouterView />
 </template>
 
 <style lang="scss">
diff --git a/src/components/base/menu/Menu.vue b/src/components/base/menu/Menu.vue
index 1bbee0bb..22428ed7 100644
--- a/src/components/base/menu/Menu.vue
+++ b/src/components/base/menu/Menu.vue
@@ -13,7 +13,7 @@ provide<string[] | undefined>("openIds", props.openIds);
 </script>
 
 <template>
-  <div class="menu-container w-full h-full">
+  <div class="menu-container p-3 w-full">
     <ul>
       <slot />
     </ul>
diff --git a/src/components/base/menu/__tests__/__snapshots__/Menu.spec.tsx.snap b/src/components/base/menu/__tests__/__snapshots__/Menu.spec.tsx.snap
index e3eee30a..ba2d4ce7 100644
--- a/src/components/base/menu/__tests__/__snapshots__/Menu.spec.tsx.snap
+++ b/src/components/base/menu/__tests__/__snapshots__/Menu.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`Menu > should render 1`] = `
-"<div class=\\"menu-container w-full h-full\\">
+"<div class=\\"menu-container p-3 w-full\\">
   <ul></ul>
 </div>"
 `;
@@ -19,7 +19,7 @@ exports[`Menu > should render 2`] = `
 `;
 
 exports[`Menu > should work with openIds prop 1`] = `
-"<div class=\\"menu-container w-full h-full\\">
+"<div class=\\"menu-container p-3 w-full\\">
   <ul>
     <li class=\\"menu-item\\">
       <div class=\\"menu-item-title\\">
@@ -62,7 +62,7 @@ exports[`Menu > should work with openIds prop 1`] = `
 `;
 
 exports[`Menu > should work with sub menus 1`] = `
-"<div class=\\"menu-container w-full h-full\\">
+"<div class=\\"menu-container p-3 w-full\\">
   <ul>
     <li class=\\"menu-item\\">
       <div class=\\"menu-item-title\\">
diff --git a/src/layouts/BlankLayout.vue b/src/layouts/BlankLayout.vue
new file mode 100644
index 00000000..c0980423
--- /dev/null
+++ b/src/layouts/BlankLayout.vue
@@ -0,0 +1,7 @@
+<template>
+  <RouterView />
+</template>
+
+<script lang="ts" setup>
+import { RouterView } from "vue-router";
+</script>
diff --git a/src/layouts/FilledLayout.vue b/src/layouts/FilledLayout.vue
new file mode 100644
index 00000000..8497bc1e
--- /dev/null
+++ b/src/layouts/FilledLayout.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="flex h-full">
+    <aside class="navbar h-full" style="background: #fff">
+      <div class="logo flex justify-center py-6">
+        <img :src="logo" style="width: 80px" alt="Halo Logo" />
+      </div>
+      <VRoutesMenu :menus="menus" />
+    </aside>
+    <main class="content w-full overflow-y-auto">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VRoutesMenu } from "@/components/base/menu";
+import { menus } from "@/router/menus.config";
+import logo from "@/assets/logo.svg";
+</script>
+
+<style lang="scss">
+.navbar {
+  flex: 0 0 270px;
+}
+</style>
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
new file mode 100644
index 00000000..462bbbf8
--- /dev/null
+++ b/src/layouts/index.ts
@@ -0,0 +1,2 @@
+export { default as BlankLayout } from "./BlankLayout.vue";
+export { default as FilledLayout } from "./FilledLayout.vue";
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 7c5f42f3..feda57e7 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,11 +1,15 @@
 <script lang="ts" setup>
+import { FilledLayout } from "@/layouts";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
 </script>
 
 <template>
-  <div class="about">
-    <pre>Route: {{ route }}</pre>
-  </div>
+  <FilledLayout>
+    <div>
+      <pre class="overflow-auto w-3/4">Route: {{ route }}</pre>
+      <pre class="overflow-auto w-3/4">Route: {{ route }}</pre>
+    </div>
+  </FilledLayout>
 </template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8ffe89fb..ff1ec75b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,9 +1,12 @@
 <template>
-  <main class="text-red-600">Hello Halo!</main>
-  <VInput v-model="value" />
-  {{ value }}
+  <FilledLayout>
+    <main class="text-red-600">Hello Halo!</main>
+    <VInput v-model="value" />
+    {{ value }}
+  </FilledLayout>
 </template>
 <script lang="ts" setup>
+import { FilledLayout } from "@/layouts";
 import { VInput } from "@/components/base/input";
 import { ref } from "vue";
 const value = ref();
diff --git a/src/views/__tests__/HomeView.spec.ts b/src/views/__tests__/HomeView.spec.ts
deleted file mode 100644
index 6432a64d..00000000
--- a/src/views/__tests__/HomeView.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { mount } from "@vue/test-utils";
-import HomeView from "../HomeView.vue";
-
-describe("HomeView", () => {
-  it("renders properly", () => {
-    const wrapper = mount(HomeView);
-    expect(wrapper.text()).toContain("Hello Halo!");
-  });
-});