工欲善其事必先利其器

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div class="flex">
-      <menu/>
+      <apps-nav/>
       <router-view class="fill"/>
     </div>
   </div>
@@ -12,7 +12,16 @@ html, body, #app {
   width: 100vw;
   height: 100vh;
   margin: 0;
+  overflow: hidden;
 }
 </style>
-<script setup>
+<script>
+import AppsNav from "@/components/appsNav.vue";
+
+export default {
+  name: "App",
+  components: {AppsNav},
+
+
+}
 </script>

src/assets/base.css

@@ -1,74 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/assets/main.css

@@ -1,15 +1,8 @@
-@import "base.css";
-
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
   font-weight: normal;
 }
 
-a,
-.green {
+a, .green {
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
@@ -21,15 +14,17 @@ a,
   }
 }
 
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.fill {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.pointer {
+  cursor: pointer;
 }

src/components/appsNav.vue

@@ -0,0 +1,46 @@
+<script>
+export default {
+  name: "appsNav",
+  data() {
+    return {
+      menu: []
+    }
+  },
+  created() {
+    this.menu = localStorage.getItem('routes') ? JSON.parse(localStorage.getItem('routes')) : []
+  }
+}
+</script>
+
+<template>
+  <div class="appsNav">
+    <img src="../assets/logo.svg" class="logo"/>
+    <div class="item pointer" v-for="item in menu" :key="item.name" v-text="item.label" @click="$router.push({name: item.name})"/>
+  </div>
+</template>
+<style scoped>
+.appsNav {
+  width: 200px;
+  height: 100vh;
+  background: #f3f6f9;
+}
+
+.item {
+  line-height: 32px;
+  border-top: 1px solid #ddd;
+  font-size: 14px;
+  font-weight: bold;
+  user-select: none;
+  padding: 0 16px;
+}
+
+.item:hover {
+  opacity: .8;
+}
+
+.logo {
+  width: 40px;
+  height: 40px;
+  margin: 10px calc(50% - 20px);
+}
+</style>

src/components/menu.vue

@@ -1,26 +0,0 @@
-<script>
-export default {
-  name: "menu",
-  data() {
-    return {
-      menu: []
-    }
-  },
-  created() {
-    this.menu = localStorage.getItem('routes') ? JSON.parse(localStorage.getItem('routes')) : []
-  }
-}
-</script>
-
-<template>
-  <div class="menu">
-    <div v-for="item in menu" :key="item.name" v-text="item.label" @click="$router.push({name: item.name})"/>
-  </div>
-</template>
-<style scoped>
-.menu {
-  width: 200px;
-  height: 100vh;
-  background: #f3f6f9;
-}
-</style>

src/router/index.js

@@ -2,22 +2,22 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
-const ctx = import.meta.glob('../views/App*.vue')
+const ctx = import.meta.glob('../views/App*.vue', {eager: true})
 const router = new VueRouter({
   mode: 'history', routes: [{
     path: '/', name: 'home',
   }]
 })
 const routes = []
-await Promise.all(ctx.keys().map(ctx)).then(file => {
+console.log(ctx)
+await Promise.all(Object.values(ctx).map(file => {
   if (file.default) {
-    const {name, label = name, path} = file.default
+    let {name, label = name, path = name} = file.default
     routes.push({name, path, label})
-    router.addRoute({
-      path, name, component: file.default
-    })
+    return router.addRoute("home", {path, name, component: () => file.default})
+
   }
-}).then(() => {
+})).then(() => {
   localStorage.setItem('routes', JSON.stringify(routes))
 })
 export default router

vite.config.js

@@ -20,7 +20,7 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   },
-  devServer: {
+  server: {
     port: 9000
   }
 })