✨ feat:完成了layout布局

env.d.ts

@@ -1 +1,6 @@
 /// <reference types="vite/client" />
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/App.vue

@@ -1,85 +1,8 @@
-<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
   <RouterView />
 </template>
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
 
-<style scoped>
+<style scoped></style>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
-}
-</style>

src/layout/components/AsideIndex.vue

@@ -0,0 +1,92 @@
+<template>
+  <t-aside style="border-top: 1px solid var(--component-border); height: 100vh">
+    <t-menu
+      v-model:expanded="expanded"
+      theme="light"
+      default-value="3-2"
+      expand-mutex
+      :collapsed="collapsed"
+    >
+      <template #logo>
+        <img :src="iconUrl" alt="logo" :width="collapsed ? 35 : 136" />
+      </template>
+      <t-submenu value="3">
+        <template #icon>
+          <t-icon name="mail" />
+        </template>
+        <template #title>
+          <span>消息区</span>
+        </template>
+        <t-submenu value="3-1" title="二级菜单">
+          <t-menu-item value="3-1-1"> 三级菜单内容 </t-menu-item>
+          <t-menu-item value="3-1-2"> 三级菜单内容 </t-menu-item>
+          <t-menu-item value="3-1-3"> 三级菜单内容 </t-menu-item>
+        </t-submenu>
+        <t-submenu value="3-5" title="二级菜单">
+          <t-menu-item value="3-5-1"> 三级菜单内容 </t-menu-item>
+          <t-menu-item value="3-5-2"> 三级菜单内容 </t-menu-item>
+          <t-menu-item value="3-5-3"> 三级菜单内容 </t-menu-item>
+        </t-submenu>
+        <t-menu-item value="3-2"> 二级菜单内容 </t-menu-item>
+        <t-menu-item value="3-3"> 二级菜单内容 </t-menu-item>
+        <t-menu-item value="3-4"> 二级菜单内容 </t-menu-item>
+      </t-submenu>
+      <t-menu-item value="user-circle">
+        <template #icon>
+          <t-icon name="user-circle" />
+        </template>
+        个人中心
+      </t-menu-item>
+      <t-submenu value="4">
+        <template #icon>
+          <t-icon name="play-circle" />
+        </template>
+        <template #title>
+          <span>视频区</span>
+        </template>
+        <t-menu-item value="4-1"> 二级菜单内容 </t-menu-item>
+        <t-menu-item value="4-2"> 二级菜单内容 </t-menu-item>
+        <t-menu-item value="4-3"> 二级菜单内容 </t-menu-item>
+      </t-submenu>
+      <t-menu-item value="edit1">
+        <template #icon>
+          <t-icon name="edit-1" />
+        </template>
+        资源编辑
+      </t-menu-item>
+      <template #operations>
+        <t-button variant="text" shape="square" @click="changeCollapsed">
+          <template #icon><t-icon name="view-list" /></template>
+        </t-button>
+      </template>
+    </t-menu>
+  </t-aside>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { MenuProps, ButtonProps } from 'tdesign-vue-next'
+const collapsed = ref(false)
+const iconUrl = ref(
+  'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png'
+)
+const changeCollapsed: ButtonProps['onClick'] = () => {
+  collapsed.value = !collapsed.value
+  iconUrl.value = collapsed.value
+    ? 'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png'
+    : 'https://tdesign.gtimg.com/site/baseLogo-light.png'
+}
+
+const expanded = ref<MenuProps['expanded']>(['2', '3'])
+</script>
+
+<style scoped>
+.t-demo-collapse-btn {
+  color: #fff;
+  &:hover {
+    background-color: #4b4b4b;
+    border-color: transparent;
+    --ripple-color: #383838;
+  }
+}
+</style>

src/layout/components/ContentIndex.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <t-layout>
+      <t-content><RouterView /></t-content>
+      <t-footer>Footer</t-footer>
+    </t-layout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<style lang="less" scoped></style>

src/layout/components/HeaderIndex.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="box" :style="{ width: '800px' }">
+    <t-button variant="text" shape="square">
+      <template #icon><t-icon name="search" /></template>
+    </t-button>
+    <t-button variant="text" shape="square">
+      <template #icon><t-icon name="mail" /></template>
+    </t-button>
+    <t-button variant="text" shape="square">
+      <template #icon><t-icon name="user" /></template>
+    </t-button>
+    <t-button variant="text" shape="square">
+      <template #icon><t-icon name="ellipsis" /></template>
+    </t-button>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped>
+.t-menu__operations {
+  .t-button {
+    margin-left: 8px;
+  }
+}
+.t-demo-menu--dark {
+  .t-button {
+    color: #fff;
+    &:hover {
+      background-color: #4b4b4b;
+      border-color: transparent;
+      --ripple-color: #383838;
+    }
+  }
+}
+</style>

src/layout/index.vue

@@ -1,10 +1,27 @@
 <template>
-  <div></div>
+  <div class="box">
+    <t-layout>
+      <t-aside><AsideIndex /></t-aside>
+      <t-layout>
+        <t-header><HeaderIndex /></t-header>
+        <t-content><ContentIndex /></t-content>
+        <!-- <t-footer>Footer</t-footer> -->
+      </t-layout>
+    </t-layout>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import AsideIndex from '@/layout/components/AsideIndex.vue'
+import HeaderIndex from './components/HeaderIndex.vue'
+import ContentIndex from './components/ContentIndex.vue'
+</script>
 
-<style scoped></style>
+<style lang="less" scoped>
+.box {
+  display: flex;
+}
+</style>
 
 <script lang="ts">
 export default {

src/papes/ShiYan.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>1</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import Layout from '@/layout/index.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -7,15 +7,14 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView
+      component: Layout,
-    },
+      children: [
         {
-      path: '/about',
+          path: '/ad',
-      name: 'about',
+          name: 'ad',
-      // route level code-splitting
+          component: () => import('@/papes/ShiYan.vue')
-      // this generates a separate chunk (About.[hash].js) for this route
+        }
-      // which is lazy-loaded when the route is visited.
+      ]
-      component: () => import('../views/AboutView.vue')
     }
   ]
 })

src/style/index.css

@@ -186,7 +186,7 @@ pre {
 .back-color {
   background-color: #f5f7fb;
   padding: 16px 24px;
-  height: calc(96vh - 64px);
+  height: calc(91vh - 64px);
   overflow-y: auto;
   overflow-x: hidden;
 }

src/style/index.less

@@ -26,7 +26,7 @@
 .back-color {
   background-color: #f5f7fb;
   padding: 16px 24px;
-    height: calc(96vh - 64px);
+  height: calc(91vh - 64px);
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -50,7 +50,7 @@ a:active {
   color: #8799a3;
 }
 // 禁用的颜色
- .t-is-disabled .t-button__text{
+.t-is-disabled .t-button__text {
   color: #d3d3d3 !important;
 }