diff --git a/saturn-console-web/src/components/common/favorites/index.js b/saturn-console-web/src/components/common/favorites/index.js
new file mode 100644
index 000000000..92d7b6d1e
--- /dev/null
+++ b/saturn-console-web/src/components/common/favorites/index.js
@@ -0,0 +1,70 @@
+import Favorites from './src/main';
+
+/* eslint-disable no-param-reassign */
+Favorites.install = function install(Vue, options) {
+  const { key = 'oaName', storage = localStorage } = options || {};
+  Vue.directive('favorites', {
+    bind(el, binding, vnode) {
+      /* eslint-disable no-param-reassign */
+      function handler() {
+        let path = location.hash.substring(1);
+        let title = path.split('?')[0].substring(1);
+        let group = '';
+        const map = JSON.parse(storage.getItem(key) || '{}');
+        const parent = vnode.context;
+        const self = vnode.componentInstance;
+        if (binding.modifiers.del) {
+          const item = map[binding.value];
+          delete map[binding.value];
+          storage.setItem(key, JSON.stringify(map));
+          self.$emit('favorites-del', true, 'del', item);
+        } else if (binding.modifiers.add) {
+          if (!Object.prototype.hasOwnProperty.call(map, path)) {
+            if (typeof binding.value === 'string') {
+              title = binding.value;
+            } else if (typeof binding.value === 'object') {
+              if (binding.value.title) {
+                title = binding.value.title;
+              }
+              if (binding.value.path) {
+                path = binding.value.path;
+              }
+              if (binding.value.group) {
+                group = binding.value.group;
+              }
+            }
+            map[path] = { title, path, group, date: new Date() };
+            storage.setItem(key, JSON.stringify(map));
+            self.$emit('favorites-add', true, 'add', map[path]);
+          } else {
+            self.$emit('favorites-add', false, 'add', map[path]);
+          }
+        }
+        parent.$set(parent, binding.arg || 'favorites', Object.values(map));
+        self.$emit('favorites-show', true, 'show', Object.values(map));
+      }
+      if (el.addEventListener) {
+        el.addEventListener('click', handler, false);
+      } else if (el.attachEvent) {
+        el.attachEvent('onclick', handler);
+      } else {
+        el.onclick = handler;
+      }
+    },
+  });
+  Vue.prototype.$favorites = function favorites(path, title, group) {
+    const map = JSON.parse(storage.getItem(key) || '{}');
+    if (title) {
+      const index = path || location.hash.substring(1);
+      Object.assign(map[index], { title, group });
+      storage.setItem(key, JSON.stringify(map));
+      return map[index];
+    } else if (path) {
+      return map[path];
+    }
+    return Object.values(map);
+  };
+  Vue.component(Favorites.name, Favorites);
+};
+
+export default Favorites;
diff --git a/saturn-console-web/src/components/common/favorites/src/main.vue b/saturn-console-web/src/components/common/favorites/src/main.vue
new file mode 100644
index 000000000..4ab73b41d
--- /dev/null
+++ b/saturn-console-web/src/components/common/favorites/src/main.vue
@@ -0,0 +1,202 @@
+<template>
+<div class="fav-container">
+  <el-popover trigger="click" ref="popover" title="我的收藏" @show="show = true" @hide="show = false" popper-class="my-fav" placement="bottom" width="400">
+    <el-form :model="form">
+      <el-table :data="favorites" :show-header="true" v-if="show">
+        <el-table-column property="title" label="名称" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <el-form-item v-if="scope.row.path === editPath" style="margin-bottom: 0;">
+              <el-input v-model="form.title" :placeholder="scope.row.title"></el-input>
+            </el-form-item>
+            <router-link :to="{ path: scope.row.path}" v-else>
+              {{scope.row.title}}
+            </router-link>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column property="date" label="日期" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{scope.row.date | formatDate}}
+          </template>
+        </el-table-column> -->
+        <el-table-column
+          property="group"
+          label="分组"
+          show-overflow-tooltip
+          :filters="groupsList"
+          :filter-method="filterGroup"
+          filter-placement="bottom-end">
+          <template slot-scope="scope">
+            <el-form-item v-if="scope.row.path === editPath" style="margin-bottom: 0;">
+              <el-select allow-create filterable size="small" v-model="form.group" style="width: 100%">
+                  <el-option v-for="item in groupsList" :label="item.text" :value="item.value" :key="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+            <span v-else>{{scope.row.group || '暂无分组'}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column width="70" label="操作">
+          <template slot-scope="scope">
+            <div v-if="scope.row.path === editPath">
+              <el-tooltip class="item" effect="dark" content="保存" placement="top" key="floppy">
+                <el-button type="text" @click="submitForm(scope.row.path)"><i class="fa fa-floppy-o" aria-hidden="true"></i></el-button>
+              </el-tooltip>
+              <el-tooltip class="item" effect="dark" content="取消" placement="top" key="undo">
+                <el-button type="text" @click.stop="resetFields"><i class="fa fa-undo" aria-hidden="true"></i></el-button>
+              </el-tooltip>
+            </div>
+            <div v-else>
+              <el-tooltip class="item" effect="dark" content="修改" placement="top" key="edit">
+                <el-button type="text" icon="el-icon-edit" @click="edit(scope.row, scope.row.path)"></el-button>
+              </el-tooltip>
+              <el-tooltip class="item" effect="dark" content="删除" placement="top" key="delete">
+                <el-button type="text" icon="el-icon-delete text-danger" v-favorites:favorites.del="scope.row.path" @favorites-del="showMessage"></el-button>
+              </el-tooltip>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+  </el-popover>
+  <el-popover
+    trigger="click"
+    ref="popover1"
+    title="添加收藏"
+    placement="bottom"
+    v-model="visible"
+    popper-class="my-fav"
+    width="350">
+    <el-form :model="form">
+      <el-form-item label="名称" label-width="40px" style="margin: 9px 0;">
+        <el-input v-model="form.title" size="small" auto-complete="off" placeholder="输入名称"></el-input>
+      </el-form-item>
+      <el-form-item label="分组" label-width="40px" style="margin-bottom: 9px;">
+          <el-select clearable allow-create filterable size="small" v-model="form.group" style="width: 100%">
+              <el-option v-for="item in groupsList" :label="item.text" :value="item.value" :key="item.value"></el-option>
+          </el-select>
+      </el-form-item>
+      <div style="text-align: right; margin: 0">
+        <el-button size="mini" type="default"  @click="resetFields">取 消</el-button>
+        <el-button type="primary" size="mini" @click="submitForm()">确 定</el-button>
+      </div>
+    </el-form>
+  </el-popover>
+  <el-tooltip class="item" effect="dark" content="添加收藏" placement="top-start">
+    <el-button type="text" v-popover:popover1 v-favorites:favorites.add="unit" @favorites-add="showMessage">
+      <i :class="['fa', isFav ? 'fa-heart' : 'fa-heart-o']" aria-hidden="true"></i>
+    </el-button>
+  </el-tooltip>
+  <el-tooltip class="item" effect="dark" content="查看收藏" placement="top-start">
+    <el-button type="text" v-popover:popover v-favorites:favorites>
+      <i :class="['fa', hasFav ? 'fa-star' : 'fa-star-o']" aria-hidden="true"></i>
+    </el-button>
+  </el-tooltip> 
+</div>
+</template>
+<script>
+export default {
+  name: 'Favorites',
+  props: ['unit'],
+  data() {
+    return {
+      show: false,
+      visible: false,
+      favorites: this.$favorites(),
+      editPath: '',
+      form: {
+        title: '',
+        group: '',
+      },
+    };
+  },
+  watch: {
+    $route: function init() {
+      this.favorites = this.$favorites();
+    },
+  },
+  computed: {
+    isFav() {
+      return this.favorites.some(item => item.path === location.hash.substring(1));
+    },
+    hasFav() {
+      return this.favorites.length;
+    },
+    groupsList() {
+      const arr = [];
+      this.favorites.forEach((ele) => {
+        arr.push(ele.group);
+      });
+      const groupArr = Array.from(new Set(arr));
+      return groupArr.map((obj) => {
+        const rObj = {};
+        rObj.text = obj;
+        rObj.value = obj;
+        return rObj;
+      });
+    },
+  },
+  methods: {
+    filterGroup(value, row) {
+      return row.group === value;
+    },
+    resetFields() {
+      this.form.title = '';
+      this.form.group = '';
+      this.favorites = this.$favorites();
+      this.visible = false;
+      this.$nextTick(() => { this.editPath = ''; });
+    },
+    submitForm(path) {
+      this.$favorites(path, this.form.title, this.form.group);
+      this.favorites = this.$favorites();
+      this.resetFields();
+      this.editPath = '';
+    },
+    edit(data, editPath) {
+      this.form.title = data.title;
+      this.form.group = data.group;
+      this.editPath = editPath;
+    },
+    showMessage(status, op, data) {
+      if (op === 'add') {
+        this.edit(data);
+        const messageText = status ? '该资源收藏成功！' : '该资源已收藏，勿重复收藏！';
+        const messageType = status ? 'success' : 'error';
+        this.$message.customMessage(messageType, messageText);
+      } else if (op === 'del') {
+        this.$message.customMessage('success', '该收藏资源已移除成功!');
+      }
+    },
+  },
+};
+</script>
+<style lang="sass">
+.fav-container {
+  display: inline-block;
+  margin: 0 10px;
+  height: 40px;
+  line-height: 40px;
+}
+.my-fav {
+  &.el-popover {
+      padding: 8px;
+  }
+  .el-popover__title {
+      margin-bottom: 5px;
+      padding: 5px 0;
+      font-weight: 800;
+      font-size: 15px;
+  }
+  .el-table {
+    td, th {
+      height: 30px;
+    }
+  }
+  .el-table__column-filter-trigger {
+    i {
+      color: #0000ff;
+      font-size: 14px;
+      font-weight: bolder;
+    }
+  }
+}
+</style>
diff --git a/saturn-console-web/src/components/common/top_bar.vue b/saturn-console-web/src/components/common/top_bar.vue
index 390cdc094..8b2ccb7ab 100644
--- a/saturn-console-web/src/components/common/top_bar.vue
+++ b/saturn-console-web/src/components/common/top_bar.vue
@@ -1,18 +1,23 @@
 <template>
     <div>
         <div class="top-bar">
-            <i class="fa fa-home"></i>
-            <span>当前域: 
-                <router-link tag="a" :to="{ name: 'job_overview', params: { domain: domain } }">{{this.domain}}</router-link>
-            </span>
-            <span>所属集群: <router-link tag="a" :to="{ name: 'clusters_manage' }">{{domainInfo.zkAlias}}</router-link></span>
-            <el-tooltip placement="right">
-                <div slot="content">
-                    运维负责人：<span>{{domainInfo.sysAdmin || '空'}}</span><br/>
-                    开发负责人：<span>{{domainInfo.techAdmin || '空'}}</span>
-                </div>
-                <i class="el-icon-warning"></i>
-            </el-tooltip>
+            <div class="top-bar-left">
+                <i class="fa fa-home"></i>
+                <span>当前域: 
+                    <router-link tag="a" :to="{ name: 'job_overview', params: { domain: domain } }">{{this.domain}}</router-link>
+                </span>
+                <span>所属集群: <router-link tag="a" :to="{ name: 'clusters_manage' }">{{domainInfo.zkAlias}}</router-link></span>
+                <el-tooltip placement="right">
+                    <div slot="content">
+                        运维负责人：<span>{{domainInfo.sysAdmin || '空'}}</span><br/>
+                        开发负责人：<span>{{domainInfo.techAdmin || '空'}}</span>
+                    </div>
+                    <i class="el-icon-warning"></i>
+                </el-tooltip>
+            </div>
+            <div class="top-bar-right">
+                <Favorites></Favorites>
+            </div>
         </div>
         
     </div>
@@ -22,7 +27,7 @@ export default {
   props: ['domain', 'domainInfo'],
 };
 </script>
-<style lang="sass" scoped>
+<style lang="sass">
 .top-bar {
     padding: 0 30px;
     height: 40px;
@@ -30,12 +35,24 @@ export default {
     font-size: 15px;
     line-height: 40px;
     color: #97a8be;
-    >span {
-        margin-right: 15px;
-        a {
-            color: #c2d0d7;
-            &:hover {
-                color: #fff;
+    .top-bar-left {
+        float: left;
+        >span {
+            margin-right: 15px;
+            a {
+                color: #c2d0d7;
+                &:hover {
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .top-bar-right {
+        float: right;
+        .el-button--text {
+            .fa {
+                font-size: 16px;
+                color: #c2d0d7;
             }
         }
     }
diff --git a/saturn-console-web/src/index.js b/saturn-console-web/src/index.js
index b7ec8c9a9..38f2ad422 100644
--- a/saturn-console-web/src/index.js
+++ b/saturn-console-web/src/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import ElementUI from 'element-ui';
 import 'font-awesome/css/font-awesome.css';
 import '@cloudux/noah-theme/lib/index.css';
+import Favorites from './components/common/favorites/';
 import './components';
 import './components/filter';
 import App from './App';
@@ -12,6 +13,7 @@ import './styles/iconfont/iconfont.css';
 import './styles/main.scss';
 
 Vue.use(ElementUI);
+Vue.use(Favorites, { key: '' });
 Vue.use(Utils);
 
 /* eslint-disable no-new */
diff --git a/saturn-console-web/src/utils/message.js b/saturn-console-web/src/utils/message.js
index 10570c810..e1433a890 100644
--- a/saturn-console-web/src/utils/message.js
+++ b/saturn-console-web/src/utils/message.js
@@ -1,4 +1,4 @@
-import { MessageBox, Loading, Notification } from 'element-ui';
+import { MessageBox, Loading, Notification, Message } from 'element-ui';
 
 export default {
   openMessage(text) {
@@ -48,4 +48,11 @@ export default {
       type: 'success',
     });
   },
+  customMessage(type, text) {
+    Message({
+      type,
+      message: text,
+      showClose: true,
+    });
+  },
 };