init

components.d.ts

@@ -7,7 +7,11 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ElAside: typeof import('element-plus/es')['ElAside']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElMain: typeof import('element-plus/es')['ElMain']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./src/components/sys/SvgIcon.vue')['default']

src/App.vue

 <script setup lang="ts">
-import { RouterLink, RouterView } from "vue-router";
+import { RouterView } from "vue-router";
 </script>
 
 <template>
@@ -7,3 +7,10 @@ import { RouterLink, RouterView } from "vue-router";
     <router-view />
   </div>
 </template>
+<style lang="less">
+#app {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+}
+</style>

src/auto-imports.d.ts

@@ -36,6 +36,7 @@ declare global {
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
   const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveDirective: typeof import('vue')['resolveDirective']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']

src/layouts/default/components/DefaultHeader.vue

 <template>
-  <header>头部</header>
+  <div class="header-wrapper">消息中台header</div>
 </template>
 
 <script lang="ts" setup name="DefaultHeader"></script>
 
-<style scoped>
-header {
-  background-color: antiquewhite;
+<style scoped lang="less">
+.header-wrapper {
+  background-color: var(--color-background);
+  height: 64px;
+  line-height: 64px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 9999;
+  padding: 0 var(--page-padding);
 }
 </style>

src/layouts/default/index.vue

 <template>
   <div class="relative">
-    <Default-header />
+    <!-- <Default-header /> -->
+    <div class="main-wrapper h-full">
+      <el-container class="h-full">
+        <el-header>消息中台系统</el-header>
+        <el-container class="h-full">
+          <el-aside width="200px">Aside</el-aside>
+          <el-main>
             <router-view v-slot="{ Component, route }">
               <keep-alive>
-        <component :is="Component" v-if="route.meta.keepAlive"></component>
+                <component
+                  :is="Component"
+                  v-if="route.meta.keepAlive"
+                ></component>
               </keep-alive>
-      <component :is="Component" v-if="!route.meta.keepAlive"></component>
+              <component
+                :is="Component"
+                v-if="!route.meta.keepAlive"
+              ></component>
             </router-view>
-    <Default-footer />
+          </el-main>
+        </el-container>
+      </el-container>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup name="DefaultLayout">
-import DefaultHeader from "./components/DefaultHeader.vue";
-import DefaultFooter from "./components/DefaultFooter.vue";
+// import DefaultHeader from "./components/DefaultHeader.vue";
 </script>
+<style lang="less">
+.relative {
+  width: 100%;
+  height: 100%;
+  .el-header {
+    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
+  }
+  .el-aside {
+    // background-color: #79bbff;
+    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
+  }
+}
+</style>

src/pages/index.vue

@@ -2,3 +2,4 @@
 redirect:
   name: home
 </route>
+<template></template>

src/styles/base.css

@@ -36,6 +36,10 @@
   --section-gap: 160px;
 }
 
+:root {
+  --page-padding: 20px;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --color-background: var(--vt-c-black);
@@ -59,8 +63,12 @@
   font-weight: normal;
 }
 
+html,
+body {
+  height: 100%;
+}
+
 body {
-  min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;

src/styles/main.css

 @import "./base.css";
 
 #app {
-  max-width: 1280px;
+  /* max-width: 1280px; */
+  width: 100%;
   margin: 0 auto;
   /* padding: 2rem; */
 

tsconfig.config.json

@@ -3,6 +3,6 @@
   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
+    "types": ["node","element-plus/global"]
   }
 }

vite.config.ts

@@ -98,4 +98,9 @@ export default defineConfig({
       "@": fileURLToPath(new URL("./src", import.meta.url)),
     },
   },
+  server: {
+    hmr: true,
+    open: true,
+    port: 6714,
+  },
 });