diff --git a/package.json b/package.json
index 68d35499a5a398cb3d4892ae92842ad18de91581..1ba219fa724b87c7956fda1fd0c77f352922dc02 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/Home.vue b/src/Home.vue
index 071ed5d449d7a822798fcab7f1b8784561f0d384..68fd1ab9a6b9e42dfc36528cc9e3a67832eba8cf 100644
--- a/src/Home.vue
+++ b/src/Home.vue
@@ -1,21 +1,29 @@
 <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>
               <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>
+            <div v-else-if="pageType === getPageTypeEnum().SearchPage">
+              <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>
@@ -28,40 +36,73 @@
 /**
  * 书签操作
  * 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 { ITEMS_GROUP, BOOK_MARKS } from './data'
+import SearchBar from '@/components/Search/SearchBar.vue'
+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 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 = iteratorSearchBMTree(searchResultMap, routerKey, srcArr[i].children, findText);
+      childArr.length && (searchResultMap[routerKey] = childArr);
+    } else {
+
+      if (!srcArr[i].title.toLowerCase().includes(findText.toLowerCase())) continue;
+      resArr.push({
+        id: srcArr[i].id,
+        name: srcArr[i].title,
+        url: srcArr[i].url
+      });
+    }
+  }
+  return resArr;
+}
+
 export default {
   components: {
     BookmarksItem, 
     BookmarksTab, 
     BookmarksTree,
-    NavigationBar
+    NavigationBar,
+    SearchBar,
+    SearchResultTab
   },
   data () {
     return {
       itemsList: [],
       itemsGroup: [],
+      pageType: PAGE_TYPE.SearchPage,
       treeItems: BOOK_MARKS[0].children,
-      navItems: [{name:'收藏夹', id: 0}]
+      navItems: [{title:'收藏夹', id: 0}],
+      searchResItems: []//SEARCH_RES_LIST
     }
   },
   methods: {
+    getPageTypeEnum(){
+      return PAGE_TYPE;
+    },
     bookmarksSelectedHandle(bookmarksItems, navRouters) {
       
       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 +132,43 @@ export default {
         return item.children.sort(objectArrayGroupBySort('array', 'children', '', 'ASC'));
       });
       return groupArr;
+    },
+    searchHandle(searchText) {
+      this.pageType = PAGE_TYPE.SearchPage;
+
+      let searchResultMap = {}
+      let routerRootKey = '收藏夹'
+      let rootArr = iteratorSearchBMTree(searchResultMap, routerRootKey, this.treeItems, searchText);
+      rootArr.length && (searchResultMap[routerRootKey] = rootArr);
+
+      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);
+      if (bmItem && bmItem.url) {
+        const winName = bmItem.title;
+        const winConfig = `
+          menubar=yes,
+          location=yes,
+          resizable=yes,
+          scrollbars=yes,
+          status=yes,
+          width=400,
+          height=400,
+          `
+        const winRef = window.open(bmItem.url, winName, winConfig);
+      }
     }
   }
 }
@@ -132,6 +210,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 c96be3427489e387df8e7f644aff75d38234d778..32ebb6934e7c8c4462d27b46aa83f618fe002a2f 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.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>
@@ -15,6 +17,7 @@
 <script>
 
 export default {
+  name: 'LSBookmarksItem',
   props: {
     gutter:{
       type: [Number, String],
@@ -37,6 +40,9 @@ export default {
       return {
         'margin-right':`${this.gutter}px`
       }
+    },
+    isFolder() {
+      return !!this.bmItems.children
     }
   },
   watch: {
@@ -49,8 +55,8 @@ export default {
     }
   },
   methods: {
-    openPage() {
-      
+    openPage(item) {
+      this.$emit('openPage', item);
     }
   }
 }
@@ -92,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 92efaff0cda1045946d400cb9d9a6c6b9bd55f19..a9b77a2e2b5bd18f7bb552248d38b4e399cbc99b 100644
--- a/src/components/Bookmarks/BookmarksTab.vue
+++ b/src/components/Bookmarks/BookmarksTab.vue
@@ -2,10 +2,10 @@
   <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"></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>
@@ -14,6 +14,7 @@
 import BookmarksItem from '@/components/Bookmarks/BookmarksItem'
 
 export default {
+  name: 'LSBookmarksTab',
   components: {BookmarksItem},
   props: {
     ItemsGroup: {
@@ -46,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 7a3acfcf4d40d4ccd7285e88d370d7882bfc849a..01dc28b9d11231883bde94f6e9e397edbad49f6e 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"
+    :props="defaultProps"
     node-key="id"
     :expand-on-click-node="true"
     :render-content="renderContent"
@@ -14,6 +16,7 @@
 </template>
 <script>
 export default {
+  name: 'LSBookmarksTree',
   props: {
     TreeItems: {
       type: Array,
@@ -22,21 +25,32 @@ export default {
   },
   data() {
     return {
-      treeDataItems: JSON.parse(JSON.stringify(this.TreeItems))
+      treeDataItems: JSON.parse(JSON.stringify(this.TreeItems)),
+      defaultProps: {
+        children: 'children',
+        label: 'title'
+      }
     }
   },
   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) {
         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;
@@ -72,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/components/Navigation/NavigationBar.vue b/src/components/Navigation/NavigationBar.vue
index 4c4f3baf6e22b894b2550ee0ace4e92336d8fa60..28f09c3fb2b4d725e26f3d74fbc117fb22cc72a8 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 9d2f1157e205c1befc06c58b2c49a86624c4640d..13238b75a4aa68c77c7f32fc5ef9befcf414c504 100644
--- a/src/components/Navigation/NavigationItem.vue
+++ b/src/components/Navigation/NavigationItem.vue
@@ -1,11 +1,12 @@
 <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>
 <script>
 export default {
+  name: 'LSNavItem',
   props: {
     dataItem: {
       type: Object,
diff --git a/src/components/Search/SearchBar.vue b/src/components/Search/SearchBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..69742386d3815e403dbe1e8234467895024edf04
--- /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 0000000000000000000000000000000000000000..c90f6be79e0945aace95497e77579ebfa0b68c35
--- /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 0000000000000000000000000000000000000000..1caee6fac5e85e25cf17e47ab24073c03bcef7f9
--- /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 92f6b27f53452ad2555253e49d6f4d34c97ac716..09cf505917b7f7ba5b5cfcadd928957156ffe4f1 100644
--- a/src/data.js
+++ b/src/data.js
@@ -1,20 +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',
-            url: 'http://baidu.com',
+            title: 'codeMirror',
             children: [{
                 id: '100',
-                name: '编辑脚本工具库codeMirror使用说明',
+                title: '编辑脚本工具库codeMirror使用说明',
                 url: 'http://baidu.com'
               }
             ]
@@ -22,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'
           }
         ]
@@ -63,7 +62,7 @@ const BOOK_MARKS = [{
     ]
    },{
     id: '4',
-    name: '系统监控+部署+性能优化+用户行为/异常日志',
+    title: '系统监控+部署+性能优化+用户行为/异常日志',
     url: 'http://baidu.com'
    }
   ]
@@ -72,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'
       }
     ]
@@ -116,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 0000000000000000000000000000000000000000..5855d10ff474cfc9c90e4b132a5e99f065ca8e06
--- /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