From 236931e94a6c1bf192343c47b904dfe960c2342c Mon Sep 17 00:00:00 2001
From: yangshengqiang <yangshengqiang@geekplus.com>
Date: Wed, 16 Feb 2022 17:25:58 +0800
Subject: [PATCH 1/4] =?UTF-8?q?MOD=EF=BC=9A=E7=BB=84=E4=BB=B6=20name=20?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=E5=8C=96=E3=80=82=E8=A6=81=E6=B1=82=E4=BB=A5?=
 =?UTF-8?q?=20LS=20=E5=BC=80=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                 | 2 ++
 src/components/Bookmarks/BookmarksItem.vue   | 1 +
 src/components/Bookmarks/BookmarksTab.vue    | 1 +
 src/components/Bookmarks/BookmarksTree.vue   | 1 +
 src/components/Navigation/NavigationBar.vue  | 1 +
 src/components/Navigation/NavigationItem.vue | 1 +
 6 files changed, 7 insertions(+)

diff --git a/package.json b/package.json
index 68d3549..1ba219f 100644
--- a/package.json
+++ b/package.json
@@ -34,8 +34,10 @@
       "parser": "babel-eslint"
     },
     "rules": {
+      "no-empty":"off",
       "no-unused-vars": "off",
       "no-undef":"off",
+      "no-debugger":"off",
       "vue/no-unused-components": "off"
     }
   },
diff --git a/src/components/Bookmarks/BookmarksItem.vue b/src/components/Bookmarks/BookmarksItem.vue
index c96be34..e156f12 100644
--- a/src/components/Bookmarks/BookmarksItem.vue
+++ b/src/components/Bookmarks/BookmarksItem.vue
@@ -15,6 +15,7 @@
 <script>
 
 export default {
+  name: 'LSBookmarksItem',
   props: {
     gutter:{
       type: [Number, String],
diff --git a/src/components/Bookmarks/BookmarksTab.vue b/src/components/Bookmarks/BookmarksTab.vue
index 92efaff..aa500e8 100644
--- a/src/components/Bookmarks/BookmarksTab.vue
+++ b/src/components/Bookmarks/BookmarksTab.vue
@@ -14,6 +14,7 @@
 import BookmarksItem from '@/components/Bookmarks/BookmarksItem'
 
 export default {
+  name: 'LSBookmarksTab',
   components: {BookmarksItem},
   props: {
     ItemsGroup: {
diff --git a/src/components/Bookmarks/BookmarksTree.vue b/src/components/Bookmarks/BookmarksTree.vue
index 7a3acfc..bcf06af 100644
--- a/src/components/Bookmarks/BookmarksTree.vue
+++ b/src/components/Bookmarks/BookmarksTree.vue
@@ -14,6 +14,7 @@
 </template>
 <script>
 export default {
+  name: 'LSBookmarksTree',
   props: {
     TreeItems: {
       type: Array,
diff --git a/src/components/Navigation/NavigationBar.vue b/src/components/Navigation/NavigationBar.vue
index 4c4f3ba..28f09c3 100644
--- a/src/components/Navigation/NavigationBar.vue
+++ b/src/components/Navigation/NavigationBar.vue
@@ -6,6 +6,7 @@
 <script>
 import NavItem from './NavigationItem.vue'
 export default {
+  name: 'LSNavBar',
   components: {NavItem},
   props: {
     separate: {
diff --git a/src/components/Navigation/NavigationItem.vue b/src/components/Navigation/NavigationItem.vue
index 9d2f115..e0b1c29 100644
--- a/src/components/Navigation/NavigationItem.vue
+++ b/src/components/Navigation/NavigationItem.vue
@@ -6,6 +6,7 @@
 </template>
 <script>
 export default {
+  name: 'LSNavItem',
   props: {
     dataItem: {
       type: Object,
-- 
Gitee


From 490510cfffadfb2d09b2595d220a8af15d78d02d Mon Sep 17 00:00:00 2001
From: yangshengqiang <yangshengqiang@geekplus.com>
Date: Thu, 17 Feb 2022 15:30:13 +0800
Subject: [PATCH 2/4] =?UTF-8?q?ADD=EF=BC=9A=E6=94=B6=E8=97=8F=E5=A4=B9?=
 =?UTF-8?q?=E5=85=B7=E4=BD=93=E9=A1=B5=E9=9D=A2=E6=89=93=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Home.vue                               | 22 +++++++++++--
 src/components/Bookmarks/BookmarksItem.vue | 37 +++++++++++++++++++---
 src/components/Bookmarks/BookmarksTab.vue  |  5 ++-
 src/components/Bookmarks/BookmarksTree.vue |  9 ++++++
 src/data.js                                |  1 -
 5 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/src/Home.vue b/src/Home.vue
index 071ed5d..b7f5026 100644
--- a/src/Home.vue
+++ b/src/Home.vue
@@ -13,9 +13,9 @@
                 <navigation-bar :nav-items="navItems" :separate="'>'"></navigation-bar> 
               </div>
               <div class="bookmarks-items__layout">
-                <bookmarks-item v-for="item in itemsList" :key="item.id" :data-item="item" :gutter="15"></bookmarks-item>
+                <bookmarks-item v-for="item in itemsList" :key="item.id" :data-item="item" :gutter="15" @openPage="openPageHandle($event)"></bookmarks-item>
               </div>
-              <bookmarks-tab :items-group="itemsGroup"></bookmarks-tab>
+              <bookmarks-tab :items-group="itemsGroup" @openPage="openPageHandle($event)"></bookmarks-tab>
             </div>
           </el-main>
           <el-footer>Footer</el-footer>
@@ -61,7 +61,7 @@ export default {
       
       this.updatedNavRouters(navRouters);
 
-      console.log('************ bookmarksSelectedHandle ', bookmarksItems, navRouters)
+      // console.log('************ bookmarksSelectedHandle ', bookmarksItems, navRouters)
       if (Object.prototype.toString.call(bookmarksItems) !== '[object Array]') return;
       const groupArr = this.handledBookmarkItems(bookmarksItems);
       
@@ -91,6 +91,22 @@ export default {
         return item.children.sort(objectArrayGroupBySort('array', 'children', '', 'ASC'));
       });
       return groupArr;
+    },
+    openPageHandle(bmItem){
+      console.log('*********** openPageHandle : ', bmItem);
+      if (bmItem && bmItem.url) {
+        const winName = bmItem.name;
+        const winConfig = `
+          menubar=yes,
+          location=yes,
+          resizable=yes,
+          scrollbars=yes,
+          status=yes,
+          width=400,
+          height=400,
+          `
+        const winRef = window.open(bmItem.url, winName, winConfig);
+      }
     }
   }
 }
diff --git a/src/components/Bookmarks/BookmarksItem.vue b/src/components/Bookmarks/BookmarksItem.vue
index e156f12..a1d4265 100644
--- a/src/components/Bookmarks/BookmarksItem.vue
+++ b/src/components/Bookmarks/BookmarksItem.vue
@@ -2,12 +2,14 @@
   <div :style="ItemStyle">
     <div class="bookmarks-item" >
       <div class="bookmarks-icon">
-        <i v-if="bmItems.children" class="el-icon-folder bookmarks-folder"></i>
+        <i v-if="isFolder" class="el-icon-folder bookmarks-folder"></i>
         <i v-else class="el-icon-collection"></i>
         <!-- <img :src="require('../../assets/icon.png')" width="32" height="32"> -->
       </div>
-      <div class="bookmarks-content" @click="openPage">
-        {{ bmItems.name }}
+      <div class="bookmarks-content" >
+        <span :class="[isFolder ? 'bookmarks-content__folder' : 'bookmarks-content__text']"  @click="openPage(bmItems)">{{ bmItems.name }}</span>
+        <!-- <span :class="{'bookmarks-content__text':true, 'bookmarks-content__folder':isFolder}"  @click="openPage(bmItems)">{{ bmItems.name }}</span> -->
+        <!-- <a v-else href="11" @click.prevent="openPage(bmItems)">{{ bmItems.name }}</a> -->
       </div>
     </div>
   </div>
@@ -38,6 +40,9 @@ export default {
       return {
         'margin-right':`${this.gutter}px`
       }
+    },
+    isFolder() {
+      return !!this.bmItems.children
     }
   },
   watch: {
@@ -50,8 +55,8 @@ export default {
     }
   },
   methods: {
-    openPage() {
-      
+    openPage(item) {
+      this.$emit('openPage', item);
     }
   }
 }
@@ -93,4 +98,26 @@ export default {
   -webkit-box-orient: vertical;
 }
 
+/* .bookmarks-content a{
+  text-decoration: none;
+} */
+
+.bookmarks-content .bookmarks-content__folder{
+  color:black;
+  text-decoration: none;
+}
+
+.bookmarks-content .bookmarks-content__text{
+  color:#551A8B;
+  text-decoration: underline;
+}
+
+.bookmarks-content .bookmarks-content__text:hover, .bookmarks-content__folder:hover{
+  color:#2067e2;
+}
+
+.bookmarks-content .bookmarks-content__text:active, .bookmarks-content__folder:active{
+  color:#ff0000;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/Bookmarks/BookmarksTab.vue b/src/components/Bookmarks/BookmarksTab.vue
index aa500e8..e2ea3ce 100644
--- a/src/components/Bookmarks/BookmarksTab.vue
+++ b/src/components/Bookmarks/BookmarksTab.vue
@@ -5,7 +5,7 @@
         {{ item.name }}<i class="header-icon el-icon-info"></i>
       </template>
       <div :style="ItemStyle">
-        <bookmarks-item v-for="bmItem in item.children" :dataItem="bmItem" :key="bmItem.id" :gutter="15"></bookmarks-item>
+        <bookmarks-item v-for="bmItem in item.children" :dataItem="bmItem" :key="bmItem.id" :gutter="15" @openPage="openPage($event)"></bookmarks-item>
       </div>
     </el-collapse-item>
   </el-collapse>
@@ -47,6 +47,9 @@ export default {
     // console.log('************ BookmarksTab updated itemsGroup ', this.ItemsGroup)
   },
   methods: {
+    openPage(itemData){
+      this.$emit('openPage', itemData);
+    }
   }
 }
 </script>
diff --git a/src/components/Bookmarks/BookmarksTree.vue b/src/components/Bookmarks/BookmarksTree.vue
index bcf06af..60e5081 100644
--- a/src/components/Bookmarks/BookmarksTree.vue
+++ b/src/components/Bookmarks/BookmarksTree.vue
@@ -1,9 +1,11 @@
 <template>
   <el-tree
     class="bookmarks-tree"
+    ref="bookmarkRef"
     accordion
     :data="TreeItems"
     :show-checkbox="false"
+    :default-expanded-keys="['0']"
     node-key="id"
     :expand-on-click-node="true"
     :render-content="renderContent"
@@ -28,8 +30,15 @@ export default {
   },
   mounted() {
     this.$emit('selectBookmark', this.treeDataItems);
+    this.$nextTick(cb=> {
+      this.setSelected();
+    });
   },
   methods: {
+    setSelected() {
+      console.log('*****setSelected ', this.treeDataItems[0])
+      this.$refs.bookmarkRef.setCurrentNode(this.treeDataItems[0]);
+    },
     statisNavRouter(itemNode) {
       const navRouters = [];
       while(itemNode.parent) {
diff --git a/src/data.js b/src/data.js
index 92f6b27..efa2574 100644
--- a/src/data.js
+++ b/src/data.js
@@ -11,7 +11,6 @@ const BOOK_MARKS = [{
         children: [{
             id: '100',
             name: 'codeMirror',
-            url: 'http://baidu.com',
             children: [{
                 id: '100',
                 name: '编辑脚本工具库codeMirror使用说明',
-- 
Gitee


From 749ca5ab486da18d56a0b45d3f75481a71650456 Mon Sep 17 00:00:00 2001
From: yangshengqiang <yangshengqiang@geekplus.com>
Date: Fri, 18 Feb 2022 14:38:27 +0800
Subject: [PATCH 3/4] =?UTF-8?q?MOD=EF=BC=9A=E5=AE=8C=E5=96=84=E6=94=B6?=
 =?UTF-8?q?=E8=97=8F=E5=A4=B9=E6=95=B0=E6=8D=AE=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Home.vue                               | 59 +++++++++++++++++++---
 src/components/Bookmarks/BookmarksItem.vue |  6 +--
 src/components/Bookmarks/BookmarksTab.vue  |  2 +-
 src/components/Bookmarks/BookmarksTree.vue | 10 ++--
 src/data.js                                | 46 ++++++++---------
 5 files changed, 87 insertions(+), 36 deletions(-)

diff --git a/src/Home.vue b/src/Home.vue
index b7f5026..844e9f7 100644
--- a/src/Home.vue
+++ b/src/Home.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="home">
     <el-container>
-      <el-header>Header</el-header>
+      <el-header>
+        <div class="bookmarks-header-bar">
+          Header
+          <search-bar @search="searchHandle($event)"></search-bar>
+        </div>
+      </el-header>
       <el-container>
         <el-aside >
           <bookmarks-tree :tree-items="treeItems" @selectBookmark="bookmarksSelectedHandle"></bookmarks-tree>
         </el-aside>
         <el-container>
           <el-main>
-            <div class="bookmarks-tab__layout">
+            <div v-if="pageType === getPageTypeEnum().NavPage" class="bookmarks-tab__layout">
               <div class="bookmarks-navigation__bar">
                 <navigation-bar :nav-items="navItems" :separate="'>'"></navigation-bar> 
               </div>
@@ -17,6 +22,9 @@
               </div>
               <bookmarks-tab :items-group="itemsGroup" @openPage="openPageHandle($event)"></bookmarks-tab>
             </div>
+            <div v-else-if="pageType === getPageTypeEnum().SearchPage">
+              ssss
+            </div>
           </el-main>
           <el-footer>Footer</el-footer>
         </el-container>
@@ -28,35 +36,60 @@
 /**
  * 书签操作
  * 1. 增删改查
- * 2. 搜索，关键字高亮
+ * 》2. 搜索，关键字高亮
  * 3. 数据导出（XML，JSON）；导入（XML，JSON）
  * 4. 兼容360浏览器
  * 5. 增加图标库（图标库，本地图标）
- * 6. 快速导航栏（左边树状显示，右边折叠面板，树状与折叠面板关联）
+ * 》6. 快速导航栏（头部显示收藏夹导航路径，左边树状显示，右边折叠面板，树状与折叠面板关联）
+ * 7. 换肤功能
  */
 import BookmarksItem from '@/components/Bookmarks/BookmarksItem'
 import BookmarksTab from '@/components/Bookmarks/BookmarksTab'
 // import BookmarksTabGroup from '@/components/Bookmarks/BookmarksTabGroup'
 import BookmarksTree from '@/components/Bookmarks/BookmarksTree.vue'
 import NavigationBar from '@/components/Navigation/NavigationBar.vue'
+import SearchBar from '@/components/Search/SearchBar.vue'
 import { ITEMS_GROUP, BOOK_MARKS } from './data'
 import {objectArrayGroupBySort} from './utils/objectArrayExt'
+import {PAGE_TYPE} from './utils/enumObject'
+
+function iteratorBMTree(searchResultMap, navRouter, srcArr, findText) {
+  if (!findText || findText.trim().length === 0) return;
+  let resArr = [];
+  for(let i=0; i < srcArr.length; i++) {
+    if (Array.isArray(srcArr[i].children)) {
+      let routerKey = `${navRouter} -> ${srcArr[i].title}`;
+      let childArr = iteratorBMTree(searchResultMap, routerKey, srcArr[i].children, findText);
+      childArr.length && (searchResultMap[routerKey] = childArr);
+    } else {
+      if (!srcArr[i].title.toLowerCase().includes(findText.toLowerCase())) continue;
+      resArr.push(srcArr[i].title);
+    }
+  }
+  return resArr;
+}
+
 export default {
   components: {
     BookmarksItem, 
     BookmarksTab, 
     BookmarksTree,
-    NavigationBar
+    NavigationBar,
+    SearchBar
   },
   data () {
     return {
       itemsList: [],
       itemsGroup: [],
+      pageType: PAGE_TYPE.NavPage,
       treeItems: BOOK_MARKS[0].children,
       navItems: [{name:'收藏夹', id: 0}]
     }
   },
   methods: {
+    getPageTypeEnum(){
+      return PAGE_TYPE;
+    },
     bookmarksSelectedHandle(bookmarksItems, navRouters) {
       
       this.updatedNavRouters(navRouters);
@@ -92,10 +125,19 @@ export default {
       });
       return groupArr;
     },
+    searchHandle(searchText) {
+      this.pageType = PAGE_TYPE.SearchPage;
+
+      let searchResultMap = {}
+      let routerRootKey = '收藏夹'
+      let rootArr = iteratorBMTree(searchResultMap, routerRootKey, this.treeItems, searchText);
+      rootArr.length && (searchResultMap[routerRootKey] = rootArr);
+      console.log('************ search Result : ', searchResultMap);
+    },
     openPageHandle(bmItem){
       console.log('*********** openPageHandle : ', bmItem);
       if (bmItem && bmItem.url) {
-        const winName = bmItem.name;
+        const winName = bmItem.title;
         const winConfig = `
           menubar=yes,
           location=yes,
@@ -148,6 +190,11 @@ body{
   text-align: center;
 }
 
+.bookmarks-header-bar{
+  display: flex;
+  justify-content: space-between;
+}
+
 .bookmarks-navigation__bar{
   text-align: left;
 }
diff --git a/src/components/Bookmarks/BookmarksItem.vue b/src/components/Bookmarks/BookmarksItem.vue
index a1d4265..32ebb69 100644
--- a/src/components/Bookmarks/BookmarksItem.vue
+++ b/src/components/Bookmarks/BookmarksItem.vue
@@ -7,9 +7,9 @@
         <!-- <img :src="require('../../assets/icon.png')" width="32" height="32"> -->
       </div>
       <div class="bookmarks-content" >
-        <span :class="[isFolder ? 'bookmarks-content__folder' : 'bookmarks-content__text']"  @click="openPage(bmItems)">{{ bmItems.name }}</span>
-        <!-- <span :class="{'bookmarks-content__text':true, 'bookmarks-content__folder':isFolder}"  @click="openPage(bmItems)">{{ bmItems.name }}</span> -->
-        <!-- <a v-else href="11" @click.prevent="openPage(bmItems)">{{ bmItems.name }}</a> -->
+        <span :class="[isFolder ? 'bookmarks-content__folder' : 'bookmarks-content__text']"  @click="openPage(bmItems)">{{ bmItems.title }}</span>
+        <!-- <span :class="{'bookmarks-content__text':true, 'bookmarks-content__folder':isFolder}"  @click="openPage(bmItems)">{{ bmItems.title }}</span> -->
+        <!-- <a v-else href="11" @click.prevent="openPage(bmItems)">{{ bmItems.title }}</a> -->
       </div>
     </div>
   </div>
diff --git a/src/components/Bookmarks/BookmarksTab.vue b/src/components/Bookmarks/BookmarksTab.vue
index e2ea3ce..a9b77a2 100644
--- a/src/components/Bookmarks/BookmarksTab.vue
+++ b/src/components/Bookmarks/BookmarksTab.vue
@@ -2,7 +2,7 @@
   <el-collapse class="bookmarks-tab">
     <el-collapse-item v-for="item in ItemsGroup" :key="item.id">
       <template slot="title">
-        {{ item.name }}<i class="header-icon el-icon-info"></i>
+        {{ item.title }}<i class="header-icon el-icon-info"></i>
       </template>
       <div :style="ItemStyle">
         <bookmarks-item v-for="bmItem in item.children" :dataItem="bmItem" :key="bmItem.id" :gutter="15" @openPage="openPage($event)"></bookmarks-item>
diff --git a/src/components/Bookmarks/BookmarksTree.vue b/src/components/Bookmarks/BookmarksTree.vue
index 60e5081..3d66fcf 100644
--- a/src/components/Bookmarks/BookmarksTree.vue
+++ b/src/components/Bookmarks/BookmarksTree.vue
@@ -5,7 +5,7 @@
     accordion
     :data="TreeItems"
     :show-checkbox="false"
-    :default-expanded-keys="['0']"
+    :props="defaultProps"
     node-key="id"
     :expand-on-click-node="true"
     :render-content="renderContent"
@@ -25,7 +25,11 @@ export default {
   },
   data() {
     return {
-      treeDataItems: JSON.parse(JSON.stringify(this.TreeItems))
+      treeDataItems: JSON.parse(JSON.stringify(this.TreeItems)),
+      defaultProps: {
+        children: 'children',
+        label: 'title'
+      }
     }
   },
   mounted() {
@@ -82,7 +86,7 @@ export default {
       return (
         <span class="custom-tree-node">
           <i class={['el-icon-collection-tag', 'tree-node-icon']}></i>
-          <span class="tree-node-content">{data.name}</span>
+          <span class="tree-node-content">{data.title}</span>
           <span class={['tree-node-operate', 'tree-node-operate__show']}>
             <el-button size="mini" type="text" icon="el-icon-circle-plus-outline" on-click={ () => this.append(data) }></el-button>
             <el-button size="mini" type="text" icon="el-icon-remove-outline" on-click={ () => this.remove(node, data) }></el-button>
diff --git a/src/data.js b/src/data.js
index efa2574..46e036b 100644
--- a/src/data.js
+++ b/src/data.js
@@ -1,19 +1,19 @@
 const BOOK_MARKS = [{
   id: '0',
-  name: 'a',
+  title: 'a',
   children: [
    {
     id: '1',
-    name: '微前端aa',
+    title: '微前端aa',
     children: [{
         id: '10',
-        name: 'web前端html+js+css基础知识',
+        title: 'web前端html+js+css基础知识',
         children: [{
             id: '100',
-            name: 'codeMirror',
+            title: 'codeMirror',
             children: [{
                 id: '100',
-                name: '编辑脚本工具库codeMirror使用说明',
+                title: '编辑脚本工具库codeMirror使用说明',
                 url: 'http://baidu.com'
               }
             ]
@@ -21,40 +21,40 @@ const BOOK_MARKS = [{
         ]
       },{
         id: '11',
-        name: '跨域：前端解决跨域的几种方式',
+        title: '跨域：前端解决跨域的几种方式',
         children: [{
             id: '101',
-            name: 'Nginx 代理',
+            title: 'Nginx 代理',
             url: 'http://baidu.com'
           }, {
             id: '1000',
-            name: '前后端运行跨域',
+            title: '前后端运行跨域',
             url: 'http://baidu.com'
           }
         ]
       },{
         id: '12',
-        name: '浏览器机制',
+        title: '浏览器机制',
         url: 'http://baidu.com'
       },{
         id: '1001',
-        name: '系统监控+部署+性能优化',
+        title: '系统监控+部署+性能优化',
         url: 'http://baidu.com'
        }
     ]
    },{
     id: '3',
-    name: '系统监控+部署+性能优化',
+    title: '系统监控+部署+性能优化',
     url: 'http://baidu.com'
    },{
     id: '2',
-    name: '前端工程化bb',
+    title: '前端工程化bb',
     children: [{
         id: '12',
-        name: 'webpack配置说明',
+        title: 'webpack配置说明',
         children: [{
             id: '102',
-            name: '插件+loader',
+            title: '插件+loader+跨域+前端code脚本nginx性能',
             url: 'http://baidu.com'
           }
         ]
@@ -62,7 +62,7 @@ const BOOK_MARKS = [{
     ]
    },{
     id: '4',
-    name: '系统监控+部署+性能优化+用户行为/异常日志',
+    title: '系统监控+部署+性能优化+用户行为/异常日志',
     url: 'http://baidu.com'
    }
   ]
@@ -71,43 +71,43 @@ const BOOK_MARKS = [{
 const ITEMS_GROUP=[
   {
     id: 1, 
-    name: '分组一',
+    title: '分组一',
     children: [
       {
         id: 10,
-        name: '数据项1',
+        title: '数据项1',
         children: [
           {
             id: 100,
-            name: '数据项1-1',
+            title: '数据项1-1',
             url: 'http://baidu.com'
           },
           {
             id: 101,
-            name: '数据项1-2',
+            title: '数据项1-2',
             url: 'http://baidu.com'
           }
         ]
       },
       {
         id: 11,
-        name: '数据项1',
+        title: '数据项1',
         url: 'http://baidu.com'
       }
     ]
   },
   {
     id: 2, 
-    name: '分组二',
+    title: '分组二',
     children: [
       {
         id: 20,
-        name: '数据项20-1',
+        title: '数据项20-1',
         url: 'http://baidu.com'
       },
       {
         id: 21,
-        name: '数据项21',
+        title: '数据项21',
         url: 'http://baidu.com'
       }
     ]
-- 
Gitee


From bdd7098da3d6796a43c9153bd65a11a12ee425b5 Mon Sep 17 00:00:00 2001
From: yangshengqiang <yangshengqiang@geekplus.com>
Date: Fri, 18 Feb 2022 15:44:05 +0800
Subject: [PATCH 4/4] =?UTF-8?q?ADD=EF=BC=9A=E6=B7=BB=E5=8A=A0=E6=94=B6?=
 =?UTF-8?q?=E8=97=8F=E5=A4=B9=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Home.vue                                 | 40 +++++++++++----
 src/components/Bookmarks/BookmarksTree.vue   |  4 +-
 src/components/Navigation/NavigationItem.vue |  2 +-
 src/components/Search/SearchBar.vue          | 20 ++++++++
 src/components/Search/SearchItem.vue         | 24 +++++++++
 src/components/Search/SearchItemTab.vue      | 54 ++++++++++++++++++++
 src/data.js                                  | 44 ++++++++++++++--
 src/utils/enumObject.js                      |  8 +++
 8 files changed, 179 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Search/SearchBar.vue
 create mode 100644 src/components/Search/SearchItem.vue
 create mode 100644 src/components/Search/SearchItemTab.vue
 create mode 100644 src/utils/enumObject.js

diff --git a/src/Home.vue b/src/Home.vue
index 844e9f7..68fd1ab 100644
--- a/src/Home.vue
+++ b/src/Home.vue
@@ -23,7 +23,7 @@
               <bookmarks-tab :items-group="itemsGroup" @openPage="openPageHandle($event)"></bookmarks-tab>
             </div>
             <div v-else-if="pageType === getPageTypeEnum().SearchPage">
-              ssss
+              <search-result-tab v-for="item in searchResItems" :key="item.id" :data-item="item"></search-result-tab>
             </div>
           </el-main>
           <el-footer>Footer</el-footer>
@@ -49,21 +49,27 @@ import BookmarksTab from '@/components/Bookmarks/BookmarksTab'
 import BookmarksTree from '@/components/Bookmarks/BookmarksTree.vue'
 import NavigationBar from '@/components/Navigation/NavigationBar.vue'
 import SearchBar from '@/components/Search/SearchBar.vue'
-import { ITEMS_GROUP, BOOK_MARKS } from './data'
+import SearchResultTab from '@/components/Search/SearchItemTab.vue'
+import { ITEMS_GROUP, BOOK_MARKS, SEARCH_RES_LIST } from './data'
 import {objectArrayGroupBySort} from './utils/objectArrayExt'
 import {PAGE_TYPE} from './utils/enumObject'
 
-function iteratorBMTree(searchResultMap, navRouter, srcArr, findText) {
+function iteratorSearchBMTree(searchResultMap, navRouter, srcArr, findText) {
   if (!findText || findText.trim().length === 0) return;
   let resArr = [];
   for(let i=0; i < srcArr.length; i++) {
     if (Array.isArray(srcArr[i].children)) {
       let routerKey = `${navRouter} -> ${srcArr[i].title}`;
-      let childArr = iteratorBMTree(searchResultMap, routerKey, srcArr[i].children, findText);
+      let childArr = iteratorSearchBMTree(searchResultMap, routerKey, srcArr[i].children, findText);
       childArr.length && (searchResultMap[routerKey] = childArr);
     } else {
+
       if (!srcArr[i].title.toLowerCase().includes(findText.toLowerCase())) continue;
-      resArr.push(srcArr[i].title);
+      resArr.push({
+        id: srcArr[i].id,
+        name: srcArr[i].title,
+        url: srcArr[i].url
+      });
     }
   }
   return resArr;
@@ -75,15 +81,17 @@ export default {
     BookmarksTab, 
     BookmarksTree,
     NavigationBar,
-    SearchBar
+    SearchBar,
+    SearchResultTab
   },
   data () {
     return {
       itemsList: [],
       itemsGroup: [],
-      pageType: PAGE_TYPE.NavPage,
+      pageType: PAGE_TYPE.SearchPage,
       treeItems: BOOK_MARKS[0].children,
-      navItems: [{name:'收藏夹', id: 0}]
+      navItems: [{title:'收藏夹', id: 0}],
+      searchResItems: []//SEARCH_RES_LIST
     }
   },
   methods: {
@@ -130,9 +138,21 @@ export default {
 
       let searchResultMap = {}
       let routerRootKey = '收藏夹'
-      let rootArr = iteratorBMTree(searchResultMap, routerRootKey, this.treeItems, searchText);
+      let rootArr = iteratorSearchBMTree(searchResultMap, routerRootKey, this.treeItems, searchText);
       rootArr.length && (searchResultMap[routerRootKey] = rootArr);
-      console.log('************ search Result : ', searchResultMap);
+
+      let searchResArr = []
+      let resCount = 1;
+      for(let resItem in searchResultMap) {
+        searchResArr.push({
+          id: resCount++,
+          navRouter: resItem,
+          searchList: searchResultMap[resItem]
+        })
+      }
+      this.searchResItems = searchResArr;
+
+      // console.log('************ search Result : ', searchResultMap, JSON.stringify(searchResultMap));
     },
     openPageHandle(bmItem){
       console.log('*********** openPageHandle : ', bmItem);
diff --git a/src/components/Bookmarks/BookmarksTree.vue b/src/components/Bookmarks/BookmarksTree.vue
index 3d66fcf..01dc28b 100644
--- a/src/components/Bookmarks/BookmarksTree.vue
+++ b/src/components/Bookmarks/BookmarksTree.vue
@@ -49,8 +49,8 @@ export default {
         if (!itemNode.parent) {
           break;
         }
-        let {name, id} = itemNode.data;
-        navRouters.unshift({name, id});
+        let {title, id} = itemNode.data;
+        navRouters.unshift({title, id});
         itemNode = itemNode.parent
       }
       return navRouters;
diff --git a/src/components/Navigation/NavigationItem.vue b/src/components/Navigation/NavigationItem.vue
index e0b1c29..13238b7 100644
--- a/src/components/Navigation/NavigationItem.vue
+++ b/src/components/Navigation/NavigationItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="nav-item__content">{{dataItem.name}}</span>
+    <span class="nav-item__content">{{dataItem.title}}</span>
     <span class="nav-item__separate">{{separator}}</span>
   </div>
 </template>
diff --git a/src/components/Search/SearchBar.vue b/src/components/Search/SearchBar.vue
new file mode 100644
index 0000000..6974238
--- /dev/null
+++ b/src/components/Search/SearchBar.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <!-- <input> -->
+    <el-input placeholder="请输入内容" v-model="searchText" class="input-with-select" @keyup.enter.native="$emit('search', searchText)">
+      <el-button slot="append" icon="el-icon-search" @click="$emit('search', searchText)"></el-button>
+    </el-input>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      searchText: ''
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Search/SearchItem.vue b/src/components/Search/SearchItem.vue
new file mode 100644
index 0000000..c90f6be
--- /dev/null
+++ b/src/components/Search/SearchItem.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <div class="search-item__content" >
+      {{ dataItem.name }}
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataItem: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Search/SearchItemTab.vue b/src/components/Search/SearchItemTab.vue
new file mode 100644
index 0000000..1caee6f
--- /dev/null
+++ b/src/components/Search/SearchItemTab.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="search-item-tab">
+    <div class="search-item-tab__title">
+      {{ dataItem.navRouter }}
+    </div>
+    <div class="search-item-tab__content">
+      <search-item class="search-item" v-for="resItem in dataItem.searchList" :key="resItem.id" :data-item="resItem"></search-item>
+    </div>
+  </div>
+</template>
+<script>
+import SearchItem from './SearchItem.vue'
+export default {
+  components: {
+    SearchItem
+  },
+  props: {
+    dataItem: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style scoped>
+.search-item-tab{
+  padding:5px 0px 15px 0px;
+}
+.search-item-tab__title {
+  display: flex;
+  font-size: 15px;
+  color: #333;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #aaa;
+}
+.search-item-tab__content{
+  display: flex;
+  padding: 10px 20px;
+  flex-direction: column;
+  align-items: left;
+  text-align: left;
+}
+.search-item{
+  font-size: 14px;
+  padding: 5px 0px;
+}
+</style>
\ No newline at end of file
diff --git a/src/data.js b/src/data.js
index 46e036b..09cf505 100644
--- a/src/data.js
+++ b/src/data.js
@@ -115,11 +115,47 @@ const ITEMS_GROUP=[
 
 ]
 
-
-
-
+const SEARCH_RES_LIST = [
+  {
+    id: 1,
+    navRouter: '收藏夹 -> 微前端aa',
+    searchList: [{
+      id: '1-1',
+      name: "系统监控+部署+性能优化",
+      url: "https://www.pingwest.com/status"
+    }],
+  },
+  {
+    id: 2,
+    navRouter: '收藏夹 -> 前端工程化bb -> webpack配置说明',
+    searchList: [
+      {
+        id: '2-1',
+        name: "插件+loader+跨域+前端code脚本nginx性能",
+        url: "https://www.pingwest.com/status"
+      }
+    ],
+  },
+  {
+    id: 3,
+    navRouter: '收藏夹',
+    searchList: [
+      {
+        id: '3-1',
+        name: "系统监控+部署+性能优化",
+        url: "https://www.pingwest.com/status"
+      },
+      {
+        id: '3-2',
+        name: "系统监控+部署+性能优化+用户行为/异常日志",
+        url: "https://www.pingwest.com/status"
+      }
+    ]
+  }
+]
 
 export {
   BOOK_MARKS,
-  ITEMS_GROUP
+  ITEMS_GROUP,
+  SEARCH_RES_LIST
 }
\ No newline at end of file
diff --git a/src/utils/enumObject.js b/src/utils/enumObject.js
new file mode 100644
index 0000000..5855d10
--- /dev/null
+++ b/src/utils/enumObject.js
@@ -0,0 +1,8 @@
+const PAGE_TYPE = {
+  SearchPage: Symbol(), // 搜索页面
+  NavPage: Symbol(), // 导航页面
+}
+
+export {
+  PAGE_TYPE
+}
\ No newline at end of file
-- 
Gitee