first

src/layout/AppLayout.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="layout-page">
+        <div class="layout-main">
+            <app-menu class="menu" :menus="menus" />
+            <router-view class="main"></router-view>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from '@vue/reactivity';
+import { AppMenu } from './components';
+let menus = ref([
+    {
+        href: '/',
+        icon: "icon-homefill",
+        text: "hello"
+    },
+    {
+        href: '/main',
+        icon: "icon-peoplefill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-homefill",
+        text: "hello"
+    },
+    {
+        href: '/main',
+        icon: "icon-peoplefill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-homefill",
+        text: "hello"
+    },
+    {
+        href: '/main',
+        icon: "icon-peoplefill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-homefill",
+        text: "hello"
+    },
+    {
+        href: '/main',
+        icon: "icon-peoplefill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-homefill",
+        text: "hello"
+    },
+    {
+        href: '/main',
+        icon: "icon-peoplefill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-videofill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-videofill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-videofill",
+        text: "hello"
+    },
+    {
+        href: '/',
+        icon: "icon-videofill",
+        text: "hello"
+    }
+])
+</script>
+
+<style lang="scss" scoped>
+.layout-page {
+    width: 100vw;
+    height: 100vh;
+    @apply flex justify-center items-center;
+}
+
+.layout-main {
+    @apply bg-black rounded-lg mb-10 text-white shadow-xl flex;
+    height: 800px;
+    width: 1400px;
+    .menu {
+        width: 70px;
+    }
+    .main {
+        @apply p-4;
+        flex: 1;
+    }
+}
+</style>

src/layout/components/AppMenu.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <!-- menu -->
+    <div class="app-menu">
+      <div class="app-menu-header">
+        <div class="app-menu-logo">
+          <img src="@/assets/logo.png" class="w-10 h-10" alt="logo" />
+        </div>
+      </div>
+      <div class="app-menu-list">
+        <div class="app-menu-item" v-for="(item,index) in menus" :key="index">
+          <router-link class="app-menu-item-link mb-4 mt-4" :to="item.href">
+            <i class="iconfont app-menu-item-icon" :style="iconStyle" :class="item.icon"></i>
+            <span v-if="isText" class="app-menu-item-text ml-3">{{ item.text }}</span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "@vue/runtime-core";
+
+const props = defineProps({
+  isText: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: '30px'
+  },
+  color: {
+    type: String,
+    default: '#fff'
+  },
+  menus: {
+    type: Array,
+    default: () => []
+  }
+})
+
+let iconStyle = ref({})
+onMounted(() => {
+  // 初始化
+  iconStyle.value = {
+    fontSize: props.size,
+    color: props.color
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.app-menu {
+  @apply flex-col items-center justify-center p-4;
+  max-width: 100px;
+}
+.app-menu-item-link,
+.app-menu-header {
+  @apply flex items-center justify-center;
+}
+
+img {
+  color: #fff;
+}
+</style>

src/layout/components/index.ts

@@ -0,0 +1,3 @@
+import AppMenu from "./AppMenu.vue";
+
+export { AppMenu };