4. 创建一个布局组件-DeepSeek辅助编程

在deepseek中输入：

创建一个vue组件
组件实现布局的功能

deepseek返回的代码：

这里有多个页面的代码

<!-- LayoutContainer.vue -->
<template>
    <div 
      class="layout-container"
      :class="[
        layoutClass,
        { 'has-sider': hasSider }
      ]"
      :style="containerStyle"
    >
      <slot />
    </div>
  </template>
  
  <script setup>
  import { provide, ref, computed, useSlots } from 'vue'
  
  const props = defineProps({
    direction: {
      type: String,
      default: 'vertical',
      validator: v => ['vertical', 'horizontal'].includes(v)
    },
    gap: {
      type: [String, Number],
      default: 0
    },
    responsive: {
      type: Boolean,
      default: true
    }
  })
  
  const slots = useSlots()
  const hasSider = computed(() => !!slots.sider)
  const layoutClass = computed(() => `layout-${props.direction}`)
  const containerStyle = computed(() => ({
    gap: typeof props.gap === 'number' ? `${props.gap}px` : props.gap
  }))
  
  // 响应式布局状态
  const collapsed = ref(false)
  provide('layoutContext', {
    direction: computed(() => props.direction),
    responsive: props.responsive,
    collapsed,
    toggleCollapsed: () => { collapsed.value = !collapsed.value }
  })
  </script>
  
  <style scoped>
  .layout-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
  }
  
  .layout-vertical {
    flex-direction: column;
  }
  
  .layout-horizontal {
    flex-direction: row;
  }
  
  .has-sider {
    position: relative;
  }
  
  @media (max-width: 768px) {
    .layout-container.responsive {
      flex-direction: column;
    }
  }
  </style>
  
  <!-- LayoutContent.vue -->
<template>
    <main 
      class="layout-content"
      :style="contentStyle"
    >
      <slot />
    </main>
  </template>
  
  <script setup>
  import { inject, computed } from 'vue'
  
  const props = defineProps({
    padding: {
      type: [String, Number],
      default: 24
    },
    backgroundColor: {
      type: String,
      default: '#ffffff'
    }
  })
  
  const { collapsed } = inject('layoutContext')
  
  const contentStyle = computed(() => ({
    padding: typeof props.padding === 'number' ? `${props.padding}px` : props.padding,
    backgroundColor: props.backgroundColor
  }))
  </script>
  
  <style scoped>
  .layout-content {
    flex: 1;
    min-height: calc(100vh - 128px);
    overflow: auto;
    transition: all 0.3s;
  }
  
  @media (max-width: 768px) {
    .layout-content {
      padding: 16px;
    }
  }
  </style>
  
  <!-- LayoutFooter.vue -->
<template>
    <footer 
      class="layout-footer"
      :style="footerStyle"
    >
      <slot />
    </footer>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  
  const props = defineProps({
    height: {
      type: [String, Number],
      default: 64
    },
    backgroundColor: {
      type: String,
      default: '#f5f7fa'
    }
  })
  
  const footerStyle = computed(() => ({
    height: typeof props.height === 'number' ? `${props.height}px` : props.height,
    backgroundColor: props.backgroundColor
  }))
  </script>
  
  <style scoped>
  .layout-footer {
    display: flex;
    align-items: center;
    padding: 0 24px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  }
  
  @media (max-width: 768px) {
    .layout-footer {
      padding: 0 12px;
    }
  }
  </style>
  
  <!-- LayoutHeader.vue -->
<template>
    <header 
      class="layout-header"
      :style="headerStyle"
    >
      <slot />
      <div 
        v-if="showCollapse && responsive"
        class="collapse-trigger"
        @click="toggleCollapsed"
      >
        <svg :class="{'is-collapsed': collapsed}" viewBox="0 0 24 24">
          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
        </svg>
      </div>
    </header>
  </template>
  
  <script setup>
  import { inject, computed } from 'vue'
  
  const props = defineProps({
    height: {
      type: [String, Number],
      default: 64
    },
    backgroundColor: {
      type: String,
      default: '#ffffff'
    },
    showCollapse: Boolean
  })
  
  const { responsive, collapsed, toggleCollapsed } = inject('layoutContext')
  
  const headerStyle = computed(() => ({
    height: typeof props.height === 'number' ? `${props.height}px` : props.height,
    backgroundColor: props.backgroundColor
  }))
  </script>
  
  <style scoped>
  .layout-header {
    display: flex;
    align-items: center;
    padding: 0 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 100;
    transition: all 0.3s;
  }
  
  .collapse-trigger {
    margin-left: auto;
    cursor: pointer;
    padding: 8px;
  }
  
  .collapse-trigger svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
  }
  
  .collapse-trigger svg.is-collapsed {
    transform: rotate(90deg);
  }
  
  @media (max-width: 768px) {
    .layout-header {
      padding: 0 12px;
    }
  }
  </style>
  
  <!-- LayoutSider.vue -->
<template>
    <aside 
      class="layout-sider"
      :class="{ 'is-collapsed': collapsed }"
      :style="siderStyle"
    >
      <div class="sider-content">
        <slot />
      </div>
    </aside>
  </template>
  
  <script setup>
  import { inject, computed } from 'vue'
  
  const props = defineProps({
    width: {
      type: [String, Number],
      default: 200
    },
    collapsedWidth: {
      type: [String, Number],
      default: 80
    },
    backgroundColor: {
      type: String,
      default: '#f5f7fa'
    }
  })
  
  const { responsive, collapsed } = inject('layoutContext')
  
  const siderStyle = computed(() => ({
    width: collapsed.value ? `${props.collapsedWidth}px` : `${props.width}px`,
    backgroundColor: props.backgroundColor
  }))
  </script>
  
  <style scoped>
  .layout-sider {
    transition: all 0.3s;
    overflow: hidden;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  }
  
  .sider-content {
    padding: 16px;
    min-height: 100vh;
  }
  
  @media (max-width: 768px) {
    .layout-sider {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 1000;
      transform: translateX(-100%);
    }
  
    .layout-sider.is-collapsed {
      transform: translateX(0);
    }
  }
  </style>

 

然后运行，我们就可以看到deepseek给我们写的这个组件了

 

 

 

直观的感觉上有点瑕疵需要修改，但已经是一个可以被使用的组件了

 

 代码地址