From 23a5bb86574e4a43c7daa50ea42bb5d4a712fb62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Sun, 14 May 2023 11:37:58 +0000
Subject: [PATCH 1/4] 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈嘉鑫 <2971973423@qq.com>
---
 ...06\345\222\214\345\270\203\345\261\200.md" | 116 ++++++++++++++++++
 ...0220511-layout\345\270\203\345\261\200.md" |  30 +++++
 .../20220512-menu\350\217\234\345\215\225.md" |  16 +++
 .../20230509-icon\345\233\276\346\240\207.md" |  13 ++
 4 files changed, 175 insertions(+)
 create mode 100644 "06\351\231\210\345\230\211\351\221\253/20220508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md"
 create mode 100644 "06\351\231\210\345\230\211\351\221\253/20220511-layout\345\270\203\345\261\200.md"
 create mode 100644 "06\351\231\210\345\230\211\351\221\253/20220512-menu\350\217\234\345\215\225.md"
 create mode 100644 "06\351\231\210\345\230\211\351\221\253/20230509-icon\345\233\276\346\240\207.md"

diff --git "a/06\351\231\210\345\230\211\351\221\253/20220508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" "b/06\351\231\210\345\230\211\351\221\253/20220508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..918c843
--- /dev/null
+++ "b/06\351\231\210\345\230\211\351\221\253/20220508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md"
@@ -0,0 +1,116 @@
+```
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-aside width="200px">
+        <Navbar :is-collapse="isCollapse" :menus="menuList"></Navbar>
+      </el-aside>
+      <el-container>
+        <el-header>
+          <el-icon :class="{ rotateClass: isCollapse }" :size="30" @click="iconClickHandler">
+            <fold></fold>
+          </el-icon>
+        </el-header>
+        <el-main>
+          <div class="inline-flex" :style="obj">
+
+          </div>
+        </el-main>
+        <el-footer>Footer</el-footer>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+import Navbar from './components/Navbar.vue';
+
+const isCollapse = ref(false)
+const menuList = reactive([
+  {
+    title: '系统管理',
+    meta: { icon: 'setting' },
+    children: [
+      {
+        title: '用户管理',
+        meta: { icon: 'User' }
+      },
+      {
+        title: '角色管理',
+        meta: { icon: 'Grid' }
+      },
+      {
+        title: '权限管理',
+        meta: { icon: 'Promotion' }
+      },
+      {
+        title: '部门管理',
+        meta: { icon: 'HelpFilled' },
+        children: [
+          {
+            title: '销售部',
+            meta: { icon: 'user' }
+          },
+          {
+            title: '研发部',
+            meta: { icon: 'user' }
+          },
+          {
+            title: '财务部',
+            meta: { icon: 'user' },
+            children: [
+              {
+                title: '出纳'
+              },
+              {
+                title: '会计',
+
+              },
+              {
+                title: '财务总监'
+              },
+            ]
+          },
+        ]
+      },
+    ]
+  }, {
+    title: '学生管理',
+    meta: { icon: 'setting' }
+  }
+])
+const obj = reactive({ boxShadow: 'var("--el-box-shadow-dark")', height: '30px', width: '30px', backgroundColor: 'black' })
+
+
+const iconClickHandler = function () {
+  console.log('888');
+  isCollapse.value = !isCollapse.value
+}
+</script>
+<style scoped>
+.el-aside {
+  background-color: white;
+  height: calc(100vh);
+  /* flex: 2 2 auto; */
+}
+
+.el-header {
+  width: 600px;
+  background-color: red;
+  display: flex;
+  align-items: center;
+}
+
+.el-main {
+  background-color: blue;
+}
+
+.el-footer {
+  background-color: #A3A6AD;
+}
+
+.rotateClass {
+  transform: rotate(-90deg);
+}
+</style>
+```
\ No newline at end of file
diff --git "a/06\351\231\210\345\230\211\351\221\253/20220511-layout\345\270\203\345\261\200.md" "b/06\351\231\210\345\230\211\351\221\253/20220511-layout\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..f403e1a
--- /dev/null
+++ "b/06\351\231\210\345\230\211\351\221\253/20220511-layout\345\270\203\345\261\200.md"
@@ -0,0 +1,30 @@
+```
+<template>
+        <!-- 遍历传入的菜单数组 -->
+        <template v-for="menu in itemMenus">
+            <!-- 当前菜单对象如果有下级菜单，即有children属性，并且children的长度大于0，则需要使用组件中的子菜单组件el-sub-menu -->
+            <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.title">
+                <template #title>
+                    <el-icon>
+                        <component v-if="menu.meta && menu.meta.icon" :is="menu.meta.icon"></component>
+                        <setting v-else></setting>
+                    </el-icon>
+                    {{ menu.title }}
+                </template>
+                <!-- 重复自己 -->
+                <NavbarItem :item-menus="menu.children"></NavbarItem>
+            </el-sub-menu>
+            <el-menu-item v-else :index="menu.title">
+                <el-icon>
+                    <component v-if="menu.meta && menu.meta.icon" :is="menu.meta.icon"></component>
+                    <setting v-else></setting>
+                </el-icon>
+                {{ menu.title }}
+            </el-menu-item>
+        </template>
+</template>
+<script setup>
+const props = defineProps(['itemMenus'])
+
+</script>
+```
\ No newline at end of file
diff --git "a/06\351\231\210\345\230\211\351\221\253/20220512-menu\350\217\234\345\215\225.md" "b/06\351\231\210\345\230\211\351\221\253/20220512-menu\350\217\234\345\215\225.md"
new file mode 100644
index 0000000..da5d4fe
--- /dev/null
+++ "b/06\351\231\210\345\230\211\351\221\253/20220512-menu\350\217\234\345\215\225.md"
@@ -0,0 +1,16 @@
+```
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import  ElementPlus  from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+const app = createApp(App)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.use(ElementPlus)
+app.mount('#app')
+```
\ No newline at end of file
diff --git "a/06\351\231\210\345\230\211\351\221\253/20230509-icon\345\233\276\346\240\207.md" "b/06\351\231\210\345\230\211\351\221\253/20230509-icon\345\233\276\346\240\207.md"
new file mode 100644
index 0000000..6a4d85c
--- /dev/null
+++ "b/06\351\231\210\345\230\211\351\221\253/20230509-icon\345\233\276\346\240\207.md"
@@ -0,0 +1,13 @@
+```
+<template>
+    <div>
+        <el-menu :collapse="isCollapse">
+            <NavbarItem :itemMenus="menus"></NavbarItem>
+        </el-menu>
+    </div>
+</template>
+<script setup>
+const props = defineProps(['menus','isCollapse'])
+import NavbarItem from './NavbarItem.vue'
+</script>
+```
\ No newline at end of file
-- 
Gitee


From e33c600e3cfa119f4a4b48b5a766f831ca31c5aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Sun, 14 May 2023 11:38:17 +0000
Subject: [PATCH 2/4] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2006=E9=99=88?=
 =?UTF-8?q?=E5=98=89=E9=91=AB/20220508-=E8=BE=B9=E6=A1=86=E5=92=8C?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80.md=20=E4=B8=BA=2006=E9=99=88=E5=98=89?=
 =?UTF-8?q?=E9=91=AB/20230508-=E8=BE=B9=E6=A1=86=E5=92=8C=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...50\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "06\351\231\210\345\230\211\351\221\253/20220508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" => "06\351\231\210\345\230\211\351\221\253/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" (100%)

diff --git "a/06\351\231\210\345\230\211\351\221\253/20220508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" "b/06\351\231\210\345\230\211\351\221\253/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md"
similarity index 100%
rename from "06\351\231\210\345\230\211\351\221\253/20220508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md"
rename to "06\351\231\210\345\230\211\351\221\253/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md"
-- 
Gitee


From dbcb32403ded439a08e04f9888713be4eb42a3fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Sun, 14 May 2023 11:38:27 +0000
Subject: [PATCH 3/4] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2006=E9=99=88?=
 =?UTF-8?q?=E5=98=89=E9=91=AB/20220511-layout=E5=B8=83=E5=B1=80.md=20?=
 =?UTF-8?q?=E4=B8=BA=2006=E9=99=88=E5=98=89=E9=91=AB/20230511-layout?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20230511-layout\345\270\203\345\261\200.md"                   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "06\351\231\210\345\230\211\351\221\253/20220511-layout\345\270\203\345\261\200.md" => "06\351\231\210\345\230\211\351\221\253/20230511-layout\345\270\203\345\261\200.md" (100%)

diff --git "a/06\351\231\210\345\230\211\351\221\253/20220511-layout\345\270\203\345\261\200.md" "b/06\351\231\210\345\230\211\351\221\253/20230511-layout\345\270\203\345\261\200.md"
similarity index 100%
rename from "06\351\231\210\345\230\211\351\221\253/20220511-layout\345\270\203\345\261\200.md"
rename to "06\351\231\210\345\230\211\351\221\253/20230511-layout\345\270\203\345\261\200.md"
-- 
Gitee


From cfb2bf31980065db83f1f1aa4c1dbfa8eadfa611 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Sun, 14 May 2023 11:38:37 +0000
Subject: [PATCH 4/4] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2006=E9=99=88?=
 =?UTF-8?q?=E5=98=89=E9=91=AB/20220512-menu=E8=8F=9C=E5=8D=95.md=20?=
 =?UTF-8?q?=E4=B8=BA=2006=E9=99=88=E5=98=89=E9=91=AB/20230512-menu?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20230512-menu\350\217\234\345\215\225.md"                     | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "06\351\231\210\345\230\211\351\221\253/20220512-menu\350\217\234\345\215\225.md" => "06\351\231\210\345\230\211\351\221\253/20230512-menu\350\217\234\345\215\225.md" (100%)

diff --git "a/06\351\231\210\345\230\211\351\221\253/20220512-menu\350\217\234\345\215\225.md" "b/06\351\231\210\345\230\211\351\221\253/20230512-menu\350\217\234\345\215\225.md"
similarity index 100%
rename from "06\351\231\210\345\230\211\351\221\253/20220512-menu\350\217\234\345\215\225.md"
rename to "06\351\231\210\345\230\211\351\221\253/20230512-menu\350\217\234\345\215\225.md"
-- 
Gitee