From 0039a33026b65e4be662c6e733bf788306e5b8a9 Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Sun, 10 Aug 2025 17:50:06 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=9C=A8layout=E6=96=87=E4=BB=B6=E5=A4=B9?=
 =?UTF-8?q?=E4=B8=AD=E5=88=9B=E5=BB=BAheader=E6=96=87=E4=BB=B6=E5=A4=B9?=
 =?UTF-8?q?=EF=BC=8C=E7=94=A8=E6=9D=A5=E5=AD=98=E6=94=BEheader=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在header文件夹中新建Header.vue、Collapse.vue、LoginOut.vue文件
分别对应头部整体区域、收缩按钮组件、退出登录组件

将Collapse.vue、LoginOut.vue引入Header.vue
为Header.vue配置样式

在layout.Index.vue主页引入Header.vue
对Index.vue中的header区域添加样式，分隔收缩图标和退出登录
---
 order-system/src/layout/Index.vue           | 17 +++++++++++++++--
 order-system/src/layout/header/Collapse.vue | 13 +++++++++++++
 order-system/src/layout/header/Header.vue   | 20 ++++++++++++++++++++
 order-system/src/layout/header/LoginOut.vue | 13 +++++++++++++
 4 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 order-system/src/layout/header/Collapse.vue
 create mode 100644 order-system/src/layout/header/Header.vue
 create mode 100644 order-system/src/layout/header/LoginOut.vue

diff --git a/order-system/src/layout/Index.vue b/order-system/src/layout/Index.vue
index c9839d4..beeb70b 100644
--- a/order-system/src/layout/Index.vue
+++ b/order-system/src/layout/Index.vue
@@ -6,7 +6,11 @@
       <Menu></Menu>
     </el-aside>
     <el-container>
-      <el-header class="header">Header</el-header>
+      <el-header class="header">
+        <!-- 头部区域直接引入头部组件 -->
+        <Header></Header>
+      </el-header>
+
       <el-main class="main">
 
         <!-- 路由跳转后，页面显示在main区域 -->
@@ -19,6 +23,9 @@
 <script setup lang="ts">
   // 引入菜单
   import Menu from './Menu.vue'
+
+  // 引入头部区域
+  import Header from './header/Header.vue';
 </script>
 
 <style scoped lang="scss">
@@ -32,7 +39,13 @@
   }
 
   .header {
-    background-color: chocolate;
+    // background-color: chocolate;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #d8dce5 !important;
+
+    // 分隔开收缩图标和退出登录
+    justify-content: space-between;
   }
 
   .main {
diff --git a/order-system/src/layout/header/Collapse.vue b/order-system/src/layout/header/Collapse.vue
new file mode 100644
index 0000000..ab02a2a
--- /dev/null
+++ b/order-system/src/layout/header/Collapse.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    收缩图标
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/order-system/src/layout/header/Header.vue b/order-system/src/layout/header/Header.vue
new file mode 100644
index 0000000..0a4c281
--- /dev/null
+++ b/order-system/src/layout/header/Header.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="left-header">
+    <collapse></collapse>
+  </div>
+
+  <LoginOut></LoginOut>
+</template>
+
+<script setup lang="ts">
+  // 引入另外两个组件
+  import Collapse from './Collapse.vue';
+  import LoginOut from './LoginOut.vue';
+</script>
+
+<style scoped lang="scss">
+  .left-header{
+    display: flex;
+    align-items: center;
+  }
+</style>
\ No newline at end of file
diff --git a/order-system/src/layout/header/LoginOut.vue b/order-system/src/layout/header/LoginOut.vue
new file mode 100644
index 0000000..48c7041
--- /dev/null
+++ b/order-system/src/layout/header/LoginOut.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    退出登录
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
-- 
2.34.1


From 3e93e011b16115fa8e8267105489daee49d9218b Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Sun, 10 Aug 2025 18:37:58 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=9C=A8store=E6=96=87=E4=BB=B6=E5=A4=B9?=
 =?UTF-8?q?=E4=B8=AD=EF=BC=8C=E5=88=9B=E5=BB=BAcollapse=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=B9=EF=BC=8C=E4=BB=A5=E5=8F=8Aindex.ts=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=20=E9=85=8D=E7=BD=AEindex.ts=E6=96=87=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E5=AD=98=E5=82=A8=E4=B8=80=E4=B8=AA=E5=B8=83=E5=B0=94=E5=80=BC?=
 =?UTF-8?q?=EF=BC=8C=E7=94=A8=E6=9D=A5=E6=8E=A7=E5=88=B6=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在vite-env.d.ts文件中配置store的导出

在layout.header/Collapse.vue中，添加动态组件
通过动态组件，实现图标点击事件

为图标添加点击事件，点击后store中存储的值取反，结合动态组件改变图标状态

ps：使用动态组件时，需要局部引入图标
---
 order-system/src/layout/header/Collapse.vue | 36 +++++++++++++++++++--
 order-system/src/store/collapse/index.ts    | 25 ++++++++++++++
 order-system/src/vite-env.d.ts              |  3 ++
 3 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 order-system/src/store/collapse/index.ts

diff --git a/order-system/src/layout/header/Collapse.vue b/order-system/src/layout/header/Collapse.vue
index ab02a2a..d853a9b 100644
--- a/order-system/src/layout/header/Collapse.vue
+++ b/order-system/src/layout/header/Collapse.vue
@@ -1,11 +1,41 @@
 <template>
-  <div>
-    收缩图标
-  </div>
+  <!-- 添加图标替换文字 -->
+  <el-icon style="cursor: pointer" :size="26" @click="iconClick">
+      <!-- <Expand /> -->
+      <!-- 使用动态组件 -->
+      <!-- currentTab 改变时组件也改变 -->
+      <component :is="status ? Expand : Fold"></component>
+  </el-icon>
 </template>
 
 <script setup lang="ts">
+  // 已经全局引入图标，不需要单独引入
+  // 切换至使用动态组件，此时需要局部引入
 
+  import { Expand, Fold } from '@element-plus/icons-vue';
+
+
+  // 引入computed
+  import { computed } from 'vue'
+
+  // 引入useCollapseStore
+  import { useCollapseStore } from '@/store/collapse';
+  
+
+  // 获取store
+  const store = useCollapseStore()
+
+  // 获取状态
+  const status = computed(()=>{
+    return store.getcollapse
+  })
+
+  // 给图标添加点击事件
+  const iconClick = ()=>{
+    
+    // 通过取反collapse管理图标的状态值
+    store.collapse = (!store.collapse)
+  }
 </script>
 
 <style scoped>
diff --git a/order-system/src/store/collapse/index.ts b/order-system/src/store/collapse/index.ts
new file mode 100644
index 0000000..955b810
--- /dev/null
+++ b/order-system/src/store/collapse/index.ts
@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+
+export const useCollapseStore = defineStore('collapseStore', {
+  state: () => {
+    return {
+      collapse: false
+    }
+  },
+
+  // getter
+  getters:{
+    // 数据放在state里面，需要传递state
+    getcollapse(state){
+      return state.collapse
+    }
+  },
+
+  // action
+  actions:{
+    // 设置state里面的数据
+    setcollapse(collapse:boolean){
+      this.collapse = collapse
+    }
+  }
+})
\ No newline at end of file
diff --git a/order-system/src/vite-env.d.ts b/order-system/src/vite-env.d.ts
index b71bf71..5d4dd01 100644
--- a/order-system/src/vite-env.d.ts
+++ b/order-system/src/vite-env.d.ts
@@ -43,4 +43,7 @@ declare module '@/store/*' {
   export const useTestStore: StoreDefinition;
   // 或者更通用的声明方式
   export function useTestStore(): any;
+
+  // useCollapseStore导出
+  export function useCollapseStore(): any;
 }
\ No newline at end of file
-- 
2.34.1