调整布局。

src/assets/base.css

@@ -47,6 +47,7 @@
     }
 }
 
+/* 
 *,
 *::before,
 *::after {
@@ -55,6 +56,7 @@
     position: relative;
     font-weight: normal;
 }
+*/
 
 body {
     min-height: 100vh;

src/assets/main.css

@@ -3,7 +3,7 @@
 #app {
     margin: 0;
     padding: 0;
-    position: fixed;
+    position: absolute;
     top: 0;
     right: 0;
     bottom: 0;

src/main.ts

@@ -11,10 +11,26 @@ import {
     create,
     // component
     NButton,
+    NLayout,
+    NLayoutHeader,
+    NLayoutContent,
+    NLayoutFooter,
+    NLayoutSider,
+    NMenu,
+    NScrollbar,
 } from 'naive-ui'
 
 const naive = create({
-    components: [NButton],
+    components: [
+        NButton,
+        NLayout,
+        NLayoutHeader,
+        NLayoutContent,
+        NLayoutFooter,
+        NLayoutSider,
+        NMenu,
+        NScrollbar,
+    ],
 })
 
 const app = createApp(App)

src/views/HomeView/HomeView.vue

@@ -1,11 +1,169 @@
 <template>
-    <div>MainView</div>
+    <n-layout position="absolute" style="top: 0; right: 0; bottom: 0; left: 0">
+        <n-layout-header position="absolute" style="z-index: 9999">
+            <LogoComponent :collapsed="collapsed" style="width: 224px" />
+            <div class="header">颐和园路</div>
+        </n-layout-header>
+        <n-layout has-sider position="absolute" style="top: 72px; right: 0; bottom: 0; left: 0">
+            <n-layout-sider
+                bordered
+                :collapsed-width="64"
+                :width="256"
+                show-trigger="arrow-circle"
+                collapse-mode="width"
+                :collapsed="collapsed"
+                @collapse="collapsed = true"
+                @expand="collapsed = false"
+                :native-scrollbar="false"
+                inverted
+            >
+                <n-menu
+                    inverted
+                    v-model:value="activeKey"
+                    :collapsed="collapsed"
+                    :collapsed-width="64"
+                    :collapsed-icon-size="22"
+                    :options="menuOptions"
+                />
+            </n-layout-sider>
+            <n-layout-content content-style="padding: 24px;" :native-scrollbar="false">
+                平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
+                平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
+                平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
+                平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
+            </n-layout-content>
+        </n-layout>
+    </n-layout>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, h, ref, type Component } from 'vue'
+
+import { NIcon } from 'naive-ui'
+import type { MenuOption } from 'naive-ui'
+import {
+    BookOpen20Filled as BookIcon,
+    Person20Regular as PersonIcon,
+    DrinkWine20Regular as WineIcon,
+} from '@vicons/fluent'
+
+import LogoComponent from './components/LogoComponent.vue'
+
+function renderIcon(icon: Component) {
+    return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+const menuOptions: MenuOption[] = [
+    {
+        label: '且听风吟',
+        key: 'hear-the-wind-sing',
+        icon: renderIcon(BookIcon),
+    },
+    {
+        label: '1973年的弹珠玩具',
+        key: 'pinball-1973',
+        icon: renderIcon(BookIcon),
+        disabled: true,
+        children: [
+            {
+                label: '鼠',
+                key: 'rat',
+            },
+        ],
+    },
+    {
+        label: '寻羊冒险记',
+        key: 'a-wild-sheep-chase',
+        disabled: true,
+        icon: renderIcon(BookIcon),
+    },
+    {
+        label: '舞，舞，舞',
+        key: 'dance-dance-dance',
+        icon: renderIcon(BookIcon),
+        children: [
+            {
+                type: 'group',
+                label: '人物',
+                key: 'people',
+                children: [
+                    {
+                        label: '叙事者',
+                        key: 'narrator',
+                        icon: renderIcon(PersonIcon),
+                    },
+                    {
+                        label: '羊男',
+                        key: 'sheep-man',
+                        icon: renderIcon(PersonIcon),
+                    },
+                ],
+            },
+            {
+                label: '饮品',
+                key: 'beverage',
+                icon: renderIcon(WineIcon),
+                children: [
+                    { label: '威士忌', key: 'whisky' },
+                    { label: '威士忌', key: 'whisky' },
+                    { label: '威士忌', key: 'whisky' },
+                    { label: '威士忌', key: 'whisky' },
+                    { label: '威士忌', key: 'whisky' },
+                    { label: '威士忌', key: 'whisky' },
+                    { label: '威士忌', key: 'whisky' },
+                    { label: '威士忌', key: 'whisky' },
+                    { label: '威士忌', key: 'whisky' },
+                    { label: '威士忌', key: 'whisky' },
+                    { label: '威士忌', key: 'whisky' },
+                    { label: '威士忌', key: 'whisky' },
+                ],
+            },
+            {
+                label: '食物',
+                key: 'food',
+                children: [
+                    {
+                        label: '三明治',
+                        key: 'sandwich',
+                    },
+                ],
+            },
+            {
+                label: '过去增多，未来减少',
+                key: 'the-past-increases-the-future-recedes',
+            },
+        ],
+    },
+]
 
 export default defineComponent({
     name: 'HomeView',
+    components: {
+        LogoComponent,
+    },
+    setup() {
+        const collapsed = ref(false)
+        return {
+            activeKey: ref<string | null>(null),
+            collapsed,
+            menuOptions,
+        }
+    },
 })
 </script>
+
+<style scoped>
+.n-layout-header {
+    display: flex;
+}
+.header {
+    padding: 24px;
+    border-bottom: solid 1px rgb(239, 239, 245);
+}
+
+.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical {
+    --n-scrollbar-color: rgba(255, 255, 255, 0.25);
+    --n-scrollbar-color-hover: rgba(255, 255, 255, 0.4);
+    width: 25px;
+}
+</style>

src/views/HomeView/components/LogoComponent.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="logo">
+        <img alt="logo" src="@/assets/logo.svg" />
+        <span class="title" v-if="!collapsed">Plusone Admin</span>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+    collapsed: Boolean,
+})
+</script>
+
+<style scoped>
+.logo {
+    padding: 20px 16px;
+    display: inline-flex;
+    background-color: rgb(0, 20, 40);
+    color: #ffffff;
+}
+
+.logo > img {
+    width: 32px;
+}
+
+.logo > .title {
+    font-size: 22px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    width: 100%;
+    font-weight: 500;
+}
+</style>