From 12fbc3ef97812628fc21de98e901a1f9596d652f Mon Sep 17 00:00:00 2001
From: sundongyu <2811054731@qq.com>
Date: Mon, 22 Apr 2024 15:15:28 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=E5=AE=8C=E6=88=90=E4=BA=86lay?=
 =?UTF-8?q?out=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 env.d.ts                               |  5 ++
 src/App.vue                            | 85 ++----------------------
 src/layout/components/AsideIndex.vue   | 92 ++++++++++++++++++++++++++
 src/layout/components/ContentIndex.vue | 14 ++++
 src/layout/components/HeaderIndex.vue  | 36 ++++++++++
 src/layout/index.vue                   | 23 ++++++-
 src/papes/ShiYan.vue                   |  7 ++
 src/router/index.ts                    | 19 +++---
 src/style/index.css                    |  2 +-
 src/style/index.less                   | 38 +++++------
 src/style/variables.less               |  2 +-
 11 files changed, 208 insertions(+), 115 deletions(-)
 create mode 100644 src/layout/components/AsideIndex.vue
 create mode 100644 src/layout/components/ContentIndex.vue
 create mode 100644 src/layout/components/HeaderIndex.vue
 create mode 100644 src/papes/ShiYan.vue

diff --git a/env.d.ts b/env.d.ts
index 11f02fe..95ee9df 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1 +1,6 @@
 /// <reference types="vite/client" />
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/src/App.vue b/src/App.vue
index 7905b05..534db52 100644
--- a/src/App.vue
+++ b/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>
-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>
+<style scoped></style>
diff --git a/src/layout/components/AsideIndex.vue b/src/layout/components/AsideIndex.vue
new file mode 100644
index 0000000..247506b
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/ContentIndex.vue b/src/layout/components/ContentIndex.vue
new file mode 100644
index 0000000..3f605ab
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/HeaderIndex.vue b/src/layout/components/HeaderIndex.vue
new file mode 100644
index 0000000..07fed2c
--- /dev/null
+++ b/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>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 45dd24b..b5d18bb 100644
--- a/src/layout/index.vue
+++ b/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 {
diff --git a/src/papes/ShiYan.vue b/src/papes/ShiYan.vue
new file mode 100644
index 0000000..c867475
--- /dev/null
+++ b/src/papes/ShiYan.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>1</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index a49ae50..6cc1dcd 100644
--- a/src/router/index.ts
+++ b/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
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // 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')
+      component: Layout,
+      children: [
+        {
+          path: '/ad',
+          name: 'ad',
+          component: () => import('@/papes/ShiYan.vue')
+        }
+      ]
     }
   ]
 })
diff --git a/src/style/index.css b/src/style/index.css
index 6d6cc16..51fa199 100644
--- a/src/style/index.css
+++ b/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;
 }
diff --git a/src/style/index.less b/src/style/index.less
index 3673e20..8ab6529 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -4,31 +4,31 @@
 
 // 滚动条外观样式
 ::-webkit-scrollbar {
-    width: 10px;
+  width: 10px;
 }
 
 ::-webkit-scrollbar-track {
-    width: 10px;
-    border-radius: 10px;
+  width: 10px;
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: 8px;
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    background: @base-scrollbar-color;
+  border-radius: 8px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: @base-scrollbar-color;
 }
 
 .t-default-menu__inner .t-menu--scroll {
-    background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2));
+  background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2));
 }
 
 // 主体背景颜色以及大小
 .back-color {
-    background-color: #f5f7fb;
-    padding: 16px 24px;
-    height: calc(96vh - 64px);
-    overflow-y: auto;
-    overflow-x: hidden;
+  background-color: #f5f7fb;
+  padding: 16px 24px;
+  height: calc(91vh - 64px);
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 // 去除a标签默认样式
@@ -37,24 +37,24 @@ a:link,
 a:visited,
 a:hover,
 a:active {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 // 改变文字按钮的颜色
 .t-button--variant-text .t-button__text {
-    color: @base-text-color;
+  color: @base-text-color;
 }
 
 // 改变文字按钮移入的颜色
 .t-button--variant-text .t-button__text:hover {
-    color: #8799a3;
+  color: #8799a3;
 }
 // 禁用的颜色
- .t-is-disabled .t-button__text{
-    color: #d3d3d3 !important;
+.t-is-disabled .t-button__text {
+  color: #d3d3d3 !important;
 }
 
 // 查询框宽度
 .form-item-width {
-    width: 100%;
-}
\ No newline at end of file
+  width: 100%;
+}
diff --git a/src/style/variables.less b/src/style/variables.less
index 51be775..8445a14 100644
--- a/src/style/variables.less
+++ b/src/style/variables.less
@@ -11,4 +11,4 @@
 // text按钮的颜色
 @base-text-color: #0052d9;
 // 滚动条的颜色
-@base-scrollbar-color: rgb(229, 229, 229);
\ No newline at end of file
+@base-scrollbar-color: rgb(229, 229, 229);