From dcb91bcbb02afed052b8c46a8e70de20d6031622 Mon Sep 17 00:00:00 2001
From: 13218645326 <sjf13651675634@163.com>
Date: Sun, 3 Dec 2023 15:48:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                              |  4 +-
 src/components/comNav/index.vue              |  9 ++-
 src/components/comNav/sideBar/menuItem.vue   |  6 +-
 src/components/comNav/sideBar/subMenu.vue    | 11 +++-
 src/components/headerCom/headerNav.vue       | 34 +++++++++++
 src/components/{ => headerCom}/headerTop.vue |  2 +
 src/main.ts                                  |  6 +-
 src/router/routerData.ts                     |  2 +-
 src/store/comNav.ts                          | 38 ++++++++++++
 src/store/myInfo.ts                          |  2 +-
 src/style/scss/variable.scss                 |  3 +
 src/views/AppMain.vue                        | 62 ++++++++++++--------
 src/views/Index.vue                          | 56 ------------------
 src/views/configuration/swiperConfig.vue     |  2 +-
 src/views/test/Index.vue                     |  9 ---
 src/views/test/MittTest.vue                  | 33 -----------
 src/views/test/PiniaTest.vue                 | 31 ----------
 src/views/test/RouterTest.vue                | 32 ----------
 src/views/test/TimeTest.vue                  | 49 ----------------
 19 files changed, 139 insertions(+), 252 deletions(-)
 create mode 100644 src/components/headerCom/headerNav.vue
 rename src/components/{ => headerCom}/headerTop.vue (99%)
 create mode 100644 src/store/comNav.ts
 delete mode 100644 src/views/Index.vue
 delete mode 100644 src/views/test/Index.vue
 delete mode 100644 src/views/test/MittTest.vue
 delete mode 100644 src/views/test/PiniaTest.vue
 delete mode 100644 src/views/test/RouterTest.vue
 delete mode 100644 src/views/test/TimeTest.vue

diff --git a/components.d.ts b/components.d.ts
index cb87217..084ef3a 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -16,8 +16,10 @@ declare module 'vue' {
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElTag: typeof import('element-plus/es')['ElTag']
     Header: typeof import('./src/components/header.vue')['default']
-    HeaderTop: typeof import('./src/components/headerTop.vue')['default']
+    HeaderNav: typeof import('./src/components/headerCom/headerNav.vue')['default']
+    HeaderTop: typeof import('./src/components/headerCom/headerTop.vue')['default']
     MenuItem: typeof import('./src/components/comNav/sideBar/menuItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/components/comNav/index.vue b/src/components/comNav/index.vue
index 81c57eb..53dc972 100644
--- a/src/components/comNav/index.vue
+++ b/src/components/comNav/index.vue
@@ -8,7 +8,8 @@
   <script setup lang="ts">
 import {list } from "router/routerData"
 import subMenu from './sideBar/subMenu.vue';
-
+import {comNavStore} from "store/comNav"
+const navStore = comNavStore()
   const routes = useRoute()
   const router = useRouter()
   const menuInfo:any = reactive({
@@ -24,18 +25,20 @@ import subMenu from './sideBar/subMenu.vue';
     isCustomLink:true,
     customLinkCallBack:(ev:any)=>{
       console.log("customLinkCallBack",ev)
-      if(ev.startsWith('staticDefault')){
+      if(ev.title.startsWith('staticDefault')){
         return
       }
       router.push({
-        name:ev
+        name:ev.path
       })
+      navStore.addNavTarget(ev)
     }
   })
 
   onMounted(()=>{
     console.log("routes",router.getRoutes())
     // initRouteList()
+    menuInfo.defaultOpeneds.push()
     
    
   })
diff --git a/src/components/comNav/sideBar/menuItem.vue b/src/components/comNav/sideBar/menuItem.vue
index a25544c..2e36308 100644
--- a/src/components/comNav/sideBar/menuItem.vue
+++ b/src/components/comNav/sideBar/menuItem.vue
@@ -1,7 +1,7 @@
 <template>
-  <template v-for="item in props.menuList" :key="item.path">
+  <template v-for="(item) in props.menuList" :key="item.path">
 
-    <el-sub-menu :index="item.name" v-if="item.children && item.children.length > 0">
+    <el-sub-menu :index="item.name+'&&'+item.meta.title" v-if="item.children && item.children.length > 0">
       <template #title v-if="item.meta.icon">
         <el-icon>
           <Edit />
@@ -11,7 +11,7 @@
       <template #title v-else>{{ item.meta.title }}</template>
       <menuItem :menuList="(item.children as any)" />
     </el-sub-menu>
-    <el-menu-item :index="item.name" v-else >
+    <el-menu-item :index="item.name+'&&'+item.meta.title"  v-else  @click="handleSelectItem(item)">
       <template v-if="item.meta.icon">
         <el-icon >
           <Search/> </el-icon>
diff --git a/src/components/comNav/sideBar/subMenu.vue b/src/components/comNav/sideBar/subMenu.vue
index f4167dc..4ee0a06 100644
--- a/src/components/comNav/sideBar/subMenu.vue
+++ b/src/components/comNav/sideBar/subMenu.vue
@@ -2,8 +2,8 @@
   <el-menu :collapse="props.collapse" :background-color="props.backgroundColor" :text-color="props.textColor"
     :active-text-color="props.activeTextColor" :default-active="props.defaultActive"
     :default-openeds="props.defaultOpeneds" :unique-opened="props.uniqueOpened" :menu-trigger="props.menuTrigger"
-    :router="props.router" :collapse-transition="props.collapseTransition" :popper-effect="props.popperEffect" @select="customLinkCallBackFn">
-    <menuItem :menuList="props.menuList" :isCustomLink="props.isCustomLink" >
+    :router="props.router" :collapse-transition="props.collapseTransition" :popper-effect="props.popperEffect" @select="customLinkCallBackFn" >
+    <menuItem :menuList="props.menuList" :isCustomLink="props.isCustomLink"     >
     </menuItem>
   </el-menu>
 </template>
@@ -72,7 +72,12 @@ const props: any = defineProps({
 
 const customLinkCallBackFn =(ev:any)=>{
   console.log("2342423",ev)
-  props.customLinkCallBack(ev)
+  const current = ev.split("&&")
+  let currentItem = {
+    title:current[1],
+    path:current[0]
+  }
+  props.customLinkCallBack(currentItem)
 }
  
 </script>
diff --git a/src/components/headerCom/headerNav.vue b/src/components/headerCom/headerNav.vue
new file mode 100644
index 0000000..1cea3f1
--- /dev/null
+++ b/src/components/headerCom/headerNav.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="nav_out">
+        <el-tag v-for="(tag,index) in navStore.topNavList" :key="tag.name" size="large"   closable :type="tag.type" @close="closeNavTagFn(index)" @click="TapNavTagFn(tag)" class="navItem">
+            {{ tag.title }}
+        </el-tag>
+    </div>
+</template>
+  
+<script setup lang="ts">
+import {comNavStore} from "store/comNav"
+const router = useRouter()
+const navStore = comNavStore()
+const closeNavTagFn =(index:any)=>{
+    navStore.deleteNavTarget(index)
+}
+const TapNavTagFn=(tag:any)=>{
+    router.push({
+        name:tag.path
+    })
+}
+</script>
+  
+<style scoped lang="scss">
+.nav_out{
+    height: 48px;
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
+    display: flex;
+    align-items: center;
+}
+.navItem{
+    margin-right:8px;
+}
+
+</style>
diff --git a/src/components/headerTop.vue b/src/components/headerCom/headerTop.vue
similarity index 99%
rename from src/components/headerTop.vue
rename to src/components/headerCom/headerTop.vue
index 0c670f8..2c656c3 100644
--- a/src/components/headerTop.vue
+++ b/src/components/headerCom/headerTop.vue
@@ -22,11 +22,13 @@
       </div>
     </div>
   </div>
+
 </template>
 <script setup lang="ts">
 
 
 
+
 </script>
   
 <style lang="scss" scoped>
diff --git a/src/main.ts b/src/main.ts
index 742f83a..9ab51da 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,19 +1,17 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './router'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-
+import pinia from "./store"
  
 const app = createApp(App)
 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
-app.use(createPinia())
 app.use(router)
-
+app.use(pinia)
 app.mount('#app')
diff --git a/src/router/routerData.ts b/src/router/routerData.ts
index 9a60ac4..c05c4eb 100644
--- a/src/router/routerData.ts
+++ b/src/router/routerData.ts
@@ -1,4 +1,4 @@
-export const list = [
+export const list:any = [
     {
         name: "staticDefault_PathParent",
         path: 'staticDefault_PathParent',
diff --git a/src/store/comNav.ts b/src/store/comNav.ts
new file mode 100644
index 0000000..71dd631
--- /dev/null
+++ b/src/store/comNav.ts
@@ -0,0 +1,38 @@
+ 
+export const comNavStore = defineStore('main_com_nav', {
+    state: () => {
+        return {
+            topNavList: [] as any, //loading控制,
+            maxNavCount: 5
+        }
+    },
+    getters: {},
+    actions: {
+        addNavTarget(ev:any) {
+            console.log("topNavList",this.topNavList)
+             if(!this.topNavList.map((ele:any)=>ele.path).includes(ev.path)){
+                this.topNavList.push(ev)
+             }  
+        },
+        deleteNavTarget(index:any) {
+           if(this.topNavList.length>0){
+            this.topNavList.splice(index,1)
+        }
+        },
+        clearTarget(val: any) {
+            this.topNavList=[]
+        }
+    },
+    persist: {
+        enabled: true, // 开启数据缓存
+        strategies: [
+            {
+                // 自定义存储的 key，默认是 store.$id
+                key: 'main_com_nav',
+                storage: localStorage, //缓存模式 可选 localStorage sessionStorage
+                // state 中的字段名，按组打包储存
+                paths: ['topNavList'] //需要缓存的字段 与 state中相关联
+            }
+        ]
+    }
+})
diff --git a/src/store/myInfo.ts b/src/store/myInfo.ts
index b9c9f08..2c23e58 100644
--- a/src/store/myInfo.ts
+++ b/src/store/myInfo.ts
@@ -21,7 +21,7 @@ export const useStore = defineStore('myInfo', {
             {
                 // 自定义存储的 key，默认是 store.$id
                 key: 'userName',
-                storage: localStorage, //缓存模式 可选 localStorage sessionStorage
+                storage: sessionStorage, //缓存模式 可选 localStorage sessionStorage
                 // state 中的字段名，按组打包储存
                 paths: ['userName'] //需要缓存的字段 与 state中相关联
             }
diff --git a/src/style/scss/variable.scss b/src/style/scss/variable.scss
index d410b06..5eb82ed 100644
--- a/src/style/scss/variable.scss
+++ b/src/style/scss/variable.scss
@@ -1,2 +1,5 @@
 $main-color: #3fb9f7;
 $second-color: #666;
+
+
+$headerTopHeight:72px;
diff --git a/src/views/AppMain.vue b/src/views/AppMain.vue
index 05bd6b8..58cb489 100644
--- a/src/views/AppMain.vue
+++ b/src/views/AppMain.vue
@@ -1,50 +1,62 @@
 <template>
-<div class="view_home">
-  <div class="main_top">
-    <headerTop></headerTop>
-  </div>
-  <div class="main_">
-    <div class="main_nav">
-      <comNav></comNav>
+  <div class="view_home">
+    <div class="main_top">
+      <headerTop></headerTop>
     </div>
-    <div class="main_content">
-  
-      <RouterView />
+    <div class="main_">
+      <div class="main_nav">
+        <comNav></comNav>
+      </div>
+      <div class="main_content">
+        <headerNav></headerNav>
+        <RouterView />
+      </div>
     </div>
   </div>
-
-</div>
-
- 
-
 </template>
 <script setup lang="ts">
 import comNav from 'components/comNav/index.vue';
-import headerTop from 'components/headerTop.vue';
+import headerTop from 'components/headerCom/headerTop.vue';
+import headerNav from "components/headerCom/headerNav.vue"
 </script>
   
 <style scoped lang="scss">
-.view_home{
+.view_home {
   display: flex;
   flex-direction: column;
   width: 100vw;
   height: 100vh;
-  .main_top{
-    height: 72px;
+
+  .main_top {
+    height: $headerTopHeight;
   }
-  .main_{
+
+  .main_ {
     flex: 1;
     display: flex;
     justify-content: space-between;
-    .main_nav{
+    overflow: auto;
+
+    .main_nav {
       width: 240px;
     }
-    .main_content{
-      flex: 1;
-      background-color:pink;
+
+    .main_content {
+      border-left: 1px solid $second-color;
+      width: 100%;
+      overflow-y: auto;
+      height: calc(100% - var($headerTopHeight) - 48px);
+
+      &::-webkit-scrollbar {
+        width: 2px;
+      }
+      &::-webkit-scrollbar-thumb{
+        height: 6px;
+        width: 2px;
+        background-color: $main-color;
+}
     }
   }
 }
-
 </style>
   
\ No newline at end of file
diff --git a/src/views/Index.vue b/src/views/Index.vue
deleted file mode 100644
index 88bcfc8..0000000
--- a/src/views/Index.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <div>
-        <div
-            class="pathItem"
-            v-for="(item, index) in routeList.list"
-            :key="index"
-            @click="toPage(item)"
-        >
-            {{ item.name }}
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-const router = useRouter()
-const routeList = reactive({
-    list: [
-        {
-            name: 'vant-scss演示',
-            path: 'vantTest'
-        },
-        {
-            name: '时间测试',
-            path: 'timeTest'
-        },
-        {
-            name: '全局事件 mitt 演示',
-            path: 'mittTest'
-        },
-        {
-            name: 'pinia演示',
-            path: 'piniaTest'
-        },
-        {
-            name: '路由演示',
-            path: 'piniaTest'
-        }
-    ]
-})
-
-/* eslint-disable  @typescript-eslint/no-explicit-any */
-const toPage = (item: any) => {
-    router.push({ name: item.path })
-}
-</script>
-
-<style scoped lang="scss">
-// @mixin fontStyle($size,$color,$weight,$lineH,$align) {
-// @mixin flexStyle($js,$al,$dir,$wrap){
-.pathItem {
-    @include fontStyle(48px, green, bold, 80px, center);
-    @include wh(750px, 80px);
-
-    margin-bottom: 12px;
-}
-</style>
diff --git a/src/views/configuration/swiperConfig.vue b/src/views/configuration/swiperConfig.vue
index fc3d19d..6e903f2 100644
--- a/src/views/configuration/swiperConfig.vue
+++ b/src/views/configuration/swiperConfig.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="width: 100%;height: 520vh;">
  
     </div>
 </template>
diff --git a/src/views/test/Index.vue b/src/views/test/Index.vue
deleted file mode 100644
index a4a40ad..0000000
--- a/src/views/test/Index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div>
- 
-    </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss"></style>
diff --git a/src/views/test/MittTest.vue b/src/views/test/MittTest.vue
deleted file mode 100644
index 207dba9..0000000
--- a/src/views/test/MittTest.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-    <button @click="testFn">全局事件测试</button>
-</template>
-
-<script lang="ts" setup>
-import bus from 'utils/bus'
-
-onBeforeMount(() => {
-    console.log('onBeforeMount')
-})
-onMounted(() => {
-    console.log('onMounted')
-})
-
-onBeforeUnmount(() => {
-    console.log('onBeforeUnmount')
-})
-onUnmounted(() => {
-    console.log('onUnmounted')
-})
-let a = computed(() => {
-    return 'aaa'
-})
-
-console.log(a)
-
-const testFn = () => {
-    console.log('测试')
-    bus.emit('sendMsg', '666')
-}
-</script>
-
-<style scoped></style>
diff --git a/src/views/test/PiniaTest.vue b/src/views/test/PiniaTest.vue
deleted file mode 100644
index 25fdd84..0000000
--- a/src/views/test/PiniaTest.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <div class="test">
-        <h1>测试--</h1>
-        <!-- {{ mainStore.text }} -->
-    </div>
-    <button @click="changeTextFn">修改</button>
-</template>
-
-<script lang="ts" setup>
-// import { useStore } from 'store/main'
-// const mainStore = useStore()
-//  mainStore.text
-const changeTextFn = () => {
-    // mainStore.text="999"
-    // mainStore.$patch((state)=>{
-    //     state.text = "何以皆有，唯有杜康"
-    // })
-    // 或者
-    // mainStore.$patch({
-    //     text: '55555555'
-    // })
-}
-let a = '6666'
-console.log(a)
-</script>
-
-<style scoped lang="scss">
-.test {
-    color: $main-color;
-}
-</style>
diff --git a/src/views/test/RouterTest.vue b/src/views/test/RouterTest.vue
deleted file mode 100644
index 18db1cb..0000000
--- a/src/views/test/RouterTest.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <h1>路由</h1>
-    <button @click="toPage">路由测试</button>
-</template>
-
-<script lang="ts" setup>
-const router = useRouter()
-onBeforeMount(() => {
-    console.log('onBeforeMount')
-})
-onMounted(() => {
-    console.log('onMounted')
-})
-
-onBeforeUnmount(() => {
-    console.log('onBeforeUnmount')
-})
-onUnmounted(() => {
-    console.log('onUnmounted')
-})
-let a = computed(() => {
-    return 'aaa'
-})
-
-console.log(a)
-
-const toPage = () => {
-    router.push({ name: 'piniaTest' })
-}
-</script>
-
-<style scoped></style>
diff --git a/src/views/test/TimeTest.vue b/src/views/test/TimeTest.vue
deleted file mode 100644
index 248980c..0000000
--- a/src/views/test/TimeTest.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <h1>我是时间测试</h1>
-    <van-button type="primary" @click="toastFn">6666</van-button>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable  @typescript-eslint/no-explicit-any */
-
-import moment from 'moment'
-import bus from 'utils/bus'
-const { proxy } = getCurrentInstance() as any
-onBeforeMount(() => {
-    console.log('onBeforeMount')
-})
-
-onMounted(() => {
-    bus.on('sendMsg', getMsg)
-    console.log('63666', moment().format('YYYY年MM月DD日'))
-    let currentTime = moment('2019-02-03 12:24:36').format(
-        'YYYY年MM月DD日 HH时mm分ss秒'
-    )
-    console.log('currentTime', currentTime)
-    let diff = moment('2020-08-09').diff(moment('2020-07-08'), 'days')
-    console.log(diff)
-    let firstTime = moment().startOf('month').format('YYYY-MM-DD')
-    console.log('firstTime', firstTime)
-})
-
-onBeforeUnmount(() => {
-    console.log('onBeforeUnmount')
-})
-onUnmounted(() => {
-    console.log('onUnmounted')
-})
-let a = computed(() => {
-    return 'aaa'
-})
-
-console.log(a)
-
-const getMsg = (val: string) => {
-    console.log('val', val)
-}
-const toastFn = () => {
-    proxy.$toast('6666')
-}
-</script>
-
-<style scoped></style>