init

685036e2 · zhangchao · b460c0c5 · 685036e2 · 685036e2 · 685036e2
--- a/components.d.ts
+++ b/components.d.ts
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 export {}
 declare module '@vue/runtime-core' {
  export interface GlobalComponents {
-    ElButton: typeof import('element-plus/es')['ElButton']
+    ElAside: typeof import('element-plus/es')['ElAside']
-    RouterLink: typeof import('vue-router')['RouterLink']
+    ElButton: typeof import('element-plus/es')['ElButton']
-    RouterView: typeof import('vue-router')['RouterView']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
-    SvgIcon: typeof import('./src/components/sys/SvgIcon.vue')['default']
+    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']
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
 <script setup lang="ts">
-import { RouterLink, RouterView } from "vue-router";
+import { RouterView } from "vue-router";
 </script>
 <template>
  <div id="app">
    <router-view />
  </div>
 </template>
+<style lang="less">
+#app {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+}
+</style>
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
 // Generated by 'unplugin-auto-import'
 export {}
 declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
  const effectScope: typeof import('vue')['effectScope']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
  const inject: typeof import('vue')['inject']
  const isProxy: typeof import('vue')['isProxy']
  const isReactive: typeof import('vue')['isReactive']
  const isReadonly: typeof import('vue')['isReadonly']
  const isRef: typeof import('vue')['isRef']
  const markRaw: typeof import('vue')['markRaw']
  const nextTick: typeof import('vue')['nextTick']
  const onActivated: typeof import('vue')['onActivated']
  const onBeforeMount: typeof import('vue')['onBeforeMount']
  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
  const onDeactivated: typeof import('vue')['onDeactivated']
  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
  const onMounted: typeof import('vue')['onMounted']
  const onRenderTracked: typeof import('vue')['onRenderTracked']
  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
  const onScopeDispose: typeof import('vue')['onScopeDispose']
  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
  const onUnmounted: typeof import('vue')['onUnmounted']
  const onUpdated: typeof import('vue')['onUpdated']
  const provide: typeof import('vue')['provide']
  const reactive: typeof import('vue')['reactive']
  const readonly: typeof import('vue')['readonly']
  const ref: typeof import('vue')['ref']
  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: typeof import('vue')['shallowReactive']
+  const resolveDirective: typeof import('vue')['resolveDirective']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowRef: typeof import('vue')['shallowRef']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const toRaw: typeof import('vue')['toRaw']
+  const shallowRef: typeof import('vue')['shallowRef']
-  const toRef: typeof import('vue')['toRef']
+  const toRaw: typeof import('vue')['toRaw']
-  const toRefs: typeof import('vue')['toRefs']
+  const toRef: typeof import('vue')['toRef']
-  const triggerRef: typeof import('vue')['triggerRef']
+  const toRefs: typeof import('vue')['toRefs']
-  const unref: typeof import('vue')['unref']
+  const triggerRef: typeof import('vue')['triggerRef']
-  const useAttrs: typeof import('vue')['useAttrs']
+  const unref: typeof import('vue')['unref']
-  const useCssModule: typeof import('vue')['useCssModule']
+  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssVars: typeof import('vue')['useCssVars']
+  const useCssModule: typeof import('vue')['useCssModule']
-  const useSlots: typeof import('vue')['useSlots']
+  const useCssVars: typeof import('vue')['useCssVars']
-  const watch: typeof import('vue')['watch']
+  const useSlots: typeof import('vue')['useSlots']
-  const watchEffect: typeof import('vue')['watchEffect']
+  const watch: typeof import('vue')['watch']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchEffect: typeof import('vue')['watchEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
-}
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
--- a/src/layouts/BlankLayout.vue
+++ b/src/layouts/BlankLayout.vue
 <template>
  <div class="blank-layout">
    <router-view />
  </div>
 </template>
 <script lang="ts" setup name="BlankLayout"></script>
--- a/src/layouts/default/components/DefaultHeader.vue
+++ b/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>
+<style scoped lang="less">
-header {
+.header-wrapper {
-  background-color: antiquewhite;
+  background-color: var(--color-background);
-}
+  height: 64px;
-</style>
+  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>
--- a/src/layouts/default/index.vue
+++ b/src/layouts/default/index.vue
 <template>
  <div class="relative">
-    <Default-header />
+    <!-- <Default-header /> -->
-    <router-view v-slot="{ Component, route }">
+    <div class="main-wrapper h-full">
-      <keep-alive>
+      <el-container class="h-full">
-        <component :is="Component" v-if="route.meta.keepAlive"></component>
+        <el-header>消息中台系统</el-header>
-      </keep-alive>
+        <el-container class="h-full">
-      <component :is="Component" v-if="!route.meta.keepAlive"></component>
+          <el-aside width="200px">Aside</el-aside>
-    </router-view>
+          <el-main>
-    <Default-footer />
+            <router-view v-slot="{ Component, route }">
-  </div>
+              <keep-alive>
-</template>
+                <component
+                  :is="Component"
-<script lang="ts" setup name="DefaultLayout">
+                  v-if="route.meta.keepAlive"
-import DefaultHeader from "./components/DefaultHeader.vue";
+                ></component>
-import DefaultFooter from "./components/DefaultFooter.vue";
+              </keep-alive>
-</script>
+              <component
+                :is="Component"
+                v-if="!route.meta.keepAlive"
+              ></component>
+            </router-view>
+          </el-main>
+        </el-container>
+      </el-container>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="DefaultLayout">
+// 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>
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
 <route lang="yaml">
 redirect:
  name: home
 </route>
+<template></template>
--- a/src/router/index.ts
+++ b/src/router/index.ts
 import { createRouter, createWebHistory } from "vue-router";
 import { setupLayouts } from "virtual:generated-layouts";
 import generatedRoutes from "virtual:generated-pages";
 const routes = setupLayouts(generatedRoutes);
 const router = createRouter({
  // history: createWebHashHistory(),
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
 });
 export default router;
--- a/src/styles/base.css
+++ b/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;
@@ -71,4 +79,4 @@ body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
\ No newline at end of file
--- a/src/styles/main.css
+++ b/src/styles/main.css
 @import "./base.css";
 #app {
-  max-width: 1280px;
+  /* max-width: 1280px; */
+  width: 100%;
  margin: 0 auto;
  /* padding: 2rem; */
@@ -25,4 +26,4 @@
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  } */
 }
\ No newline at end of file
--- a/tsconfig.config.json
+++ b/tsconfig.config.json
@@ -3,6 +3,6 @@
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
  "compilerOptions": {
    "composite": true,
-    "types": ["node"]
+    "types": ["node","element-plus/global"]
  }
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -98,4 +98,9 @@ export default defineConfig({
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
+  server: {
+    hmr: true,
+    open: true,
+    port: 6714,
+  },
 });