Quellcode durchsuchen

重构默认布局组件,移除不必要的头部和底部内容,添加Header和Menu组件以优化布局结构和提升可读性。

xbx vor 1 Woche
Ursprung
Commit
c494eeb38f

Datei-Diff unterdrückt, da er zu groß ist
+ 1 - 0
src/assets/icons/logo.svg


+ 37 - 0
src/layout/components/Logo/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="flex items-center p-4 transition-all duration-300 overflow-hidden">
+    <SvgIcon 
+      name="logo" 
+      class="mr-3 transition-transform duration-300 hover:scale-110" 
+      size="32px" 
+    />
+    <h1 
+      v-if="!collapsed" 
+      class="text-lg font-semibold m-0 whitespace-nowrap overflow-hidden text-ellipsis transition-all duration-300 hover:font-bold"
+      :style="{ color: 'var(--el-text-color-primary)' }"
+    >
+      多人语音合成
+    </h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from '@/components/Icon/Index.vue';
+
+defineOptions({
+  name: 'Logo'
+})
+
+
+defineProps({
+  // 是否折叠,折叠时不显示标题
+  collapsed: {
+    type: Boolean,
+    default: false
+  }
+});
+</script>
+
+<style scoped>
+/* 只保留必要的样式,其他都通过 Tailwind 类实现 */
+</style> 

+ 8 - 0
src/layout/components/header/index.vue

@@ -0,0 +1,8 @@
+<template>
+    <div>我是头部</div>
+</template>
+<script setup lang="ts">  
+ defineOptions({
+    name: 'Header'
+ })
+</script>

+ 8 - 0
src/layout/components/menu/index.vue

@@ -0,0 +1,8 @@
+<template>
+    <div>我是菜单</div>
+</template>
+<script setup lang="ts">  
+ defineOptions({
+    name: 'Menu'
+ })
+</script>

+ 6 - 12
src/layout/default-layout.vue

@@ -1,21 +1,15 @@
 <template>
-  <div class="default-layout">
-    <header class="layout-header" v-if="showHeader">
-      <!-- 可以在这里添加头部内容 -->
-    </header>
-    
-    <main class="layout-content">
-      <router-view />
-    </main>
-    
-    <footer class="layout-footer" v-if="showFooter">
-      <!-- 可以在这里添加底部内容 -->
-    </footer>
+  <div class="default-layout overflow-auto h-full bg-white bg-[length:100%_auto] bg-no-repeat bg-left-top relative">
+    <Header />
+    <Menu />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import Header from './components/header/index.vue';
+import Menu from './components/menu/index.vue';
+
 
 export default defineComponent({
   name: 'DefaultLayout',