添加常用网站导航

README.md

@@ -89,8 +89,8 @@ cd ~/Library/Application\ Support/Google/Chrome/Default/Extensions
   - [ ] 天气日期展示
   - [x] 更换背景色
   - [x] 添加时钟效果
+- [x] 常用网站导航
 - [ ] 书签管理页面
-- [ ] 常用网站导航
 - [ ] Github
   - [ ] Github 登录，浏览自己项目
   - [ ] Github Start 管理

src/Route.js

@@ -3,6 +3,7 @@ import Blank from './pages/Blank';
 import Github from './pages/Github';
 import Historys from './pages/History';
 import Documents from './pages/Document';
+import Navigation from './pages/Navigation';
 import Linux from './pages/Linux';
 import Search from './pages/Search';
 
@@ -11,6 +12,10 @@ export const getNavData = () => [
     title: '空白页',
     type: 'blank',
     component: Blank,
+  }, {
+    title: '导航',
+    type: 'navigation',
+    component: Navigation,
   }, {
     title: '搜索',
     type: 'search',

src/component/Contextmenu/index.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from './index.less';
+
+export default class Contexmenu extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.handleContextmenu = this.handleContextmenu.bind(this);
+  }
+  componentDidMount() {
+    window.addEventListener('contextmenu', this.handleContextmenu, true);
+  }
+  handleContextmenu(e) {
+    e.preventDefault();
+    // 根据事件对象中鼠标点击的位置，进行定位
+    this.menu.style.left = `${e.clientX}px`;
+    this.menu.style.top = `${e.clientY}px`;
+  }
+  render() {
+    // const { option } = this.props;
+    return (
+      <div className={styles.menu} ref={node => this.menu = node}>
+        <div>功能1</div>
+        <div>功能2</div>
+        <div>功能3</div>
+        <div>功能4</div>
+        <div>功能5</div>
+      </div>
+    );
+  }
+}
+
+Contexmenu.propsTypes = {
+  option: PropTypes.array,
+};
+
+Contexmenu.defaultProps = {
+  option: [],
+};

src/component/Contextmenu/index.less

@@ -0,0 +1,10 @@
+
+.menu {
+  position: absolute;
+  color: #586069;
+  box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(27, 31, 35, 0.15);
+  border-radius: 4px;
+}

src/index.js

@@ -6,12 +6,16 @@ import './index.less';
 
 const storage = chrome.storage.sync;
 
-storage.get(['oscconfig', 'visible', 'conf'], (items) => {
+storage.get(['oscconfig', 'visible', 'conf', 'dbs'], (items) => {
   // 默认顶部菜单，和新闻是否展示判断
   if (!items.visible) items.visible = {};
   if (items.visible.header === undefined) items.visible.header = true;
   if (items.visible.newBar === undefined) items.visible.newBar = true;
 
+  // 数据存储
+  if (!items.dbs) items.dbs = {};
+  if (items.dbs.nav === undefined) items.dbs.nav = [];
+
   // 默认选中的栏目
   if (!items.conf) items.conf = {};
   // 默认是否在新标签页显示

src/pages/Navigation/Edit.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import styles from './Edit.less';
+import website from '../../source/website.json';
+import addIcon from '../../assets/add-icon.png';
+
+export default class Edit extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      list: [],
+      active: '',
+      edit: {
+        label: '添加网址',
+        value: '',
+        icon: addIcon,
+      },
+    };
+  }
+  componentDidMount() {
+    this.setListData();
+    this.onHideEdit();
+  }
+  setListData(type) {
+    let list = [];
+    for (let i = 0; i < website.length; i += 1) {
+      if (type) {
+        if (website[i].value === type) {
+          list = website[i].children;
+          break;
+        }
+      } else if (website[i].children && website[i].children.length > 0) {
+        list = website[i].children;
+        break;
+      }
+    }
+    this.setState({ list });
+  }
+  onClickTab(type) {
+    this.setListData(type);
+    this.setState({ active: type });
+  }
+  onClickAdd(edit) {
+    const { onClickAdd } = this.props;
+    if (!edit.value) return;
+    this.onHideEdit();
+    onClickAdd && onClickAdd(edit);
+  }
+  handleAddNav(edit) {
+    const { onClickGrid } = this.props;
+    this.setState({ edit }, () => {
+      onClickGrid && onClickGrid(edit);
+    });
+  }
+  onShowEdit() {
+    this.warpper.style.marginBottom = '0px';
+  }
+  onHideEdit() {
+    this.warpper.style.marginBottom = `-${this.warpper.clientHeight}px`;
+  }
+  onChangeEdit(e) {
+    const { edit } = this.state;
+    edit.icon = '';
+    edit.value = e.target.value;
+    edit.label = e.target.value;
+    this.setState({ edit });
+  }
+  render() {
+    const { list, active, edit } = this.state;
+    return (
+      <div className={styles.navEdit} ref={node => this.warpper = node}>
+        <div className={styles.edit}>
+          <img alt="" src={edit.icon} />
+          <span className={styles.title}>{edit.label}</span>
+          <input className={styles.url} onChange={this.onChangeEdit.bind(this)} value={edit.value} type="text" placeholder="输入网址" />
+          <button className={styles.save} onClick={this.onClickAdd.bind(this, edit)}>确定</button>
+        </div>
+        <div className={styles.editTabList}>
+          <div className={styles.category}>
+            {website.map((item, idx) => {
+              let isActive = item.value === active;
+              if (active === '' && idx === 0) isActive = true;
+              return (
+                <span key={idx} onClick={this.onClickTab.bind(this, item.value)} className={classNames({ active: isActive })}>
+                  {item.label}
+                </span>
+              );
+            })}
+          </div>
+          <div className={styles.list}>
+            {list.map((item, idx) => {
+              return (
+                <span key={idx} onClick={this.handleAddNav.bind(this, item)}>
+                  <img alt={item.label} src={item.icon} />
+                  <p>{item.label}</p>
+                </span>
+              );
+            })}
+          </div>
+        </div>
+        <div className={styles.closeBtn} onClick={this.onHideEdit.bind(this)} />
+      </div>
+    );
+  }
+}

src/pages/Navigation/Edit.less

@@ -0,0 +1,145 @@
+.navEdit {
+  min-height: 160px;
+  margin-bottom: -405px;
+  background-color: #333;
+  width: 100%;
+  bottom: 0;
+  position: relative;
+  z-index: 1;
+  transition: all .3s;
+  .edit {
+    display: flex;
+    position: relative;
+    margin: 0 50px;
+    padding: 40px 0 0 0;
+    box-sizing: border-box;
+    img {
+      width: 31px;
+      height: 31px;
+      align-self: center;
+      border-radius: 3px;
+      background-color: #ffffff1c;
+    }
+    .title {
+      display: block;
+      margin-right: 24px;
+      margin-left: 10px;
+      align-self: center;
+      width: 90px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: rgba(255,255,255,.8);
+    }
+    .url {
+      padding: 16px 16px 16px;
+      border: 0;
+      width: 50%;
+      height: 14px;
+      line-height: 14px;
+      outline: none;
+      background-color: #414141;
+      color: rgba(255,255,255,.8);
+    }
+    .save {
+      margin-left: 10px;
+      border-radius: 2px;
+      width: 74px;
+      border: 0;
+      outline: none;
+      cursor: pointer;
+      transition: all .3s;
+      &:hover {
+        background-color: #cccccc;
+      }
+      &:active {
+        background-color: #076a39;
+        color: #fff;
+      }
+    }
+  }
+  .editTabList {
+    padding: 20px 0 0 0;
+    color: #fff;
+    margin: 0 50px;
+    .category {
+      display: flex;
+      color: rgba(255,255,255,.4);
+      border-bottom: 1px solid rgba(255,255,255,.05);
+      padding-bottom: 12px;
+      :global(.active) {
+        color: #fff;
+        position: relative;
+        &::before {
+          position: absolute;
+          bottom: -12px;
+          border-bottom: 1px solid rgba(24,177,255,.8);
+          width: 100%;
+          content: '';
+        }
+      }
+      span {
+        margin-right: 10px;
+        cursor: pointer;
+      }
+    }
+    .list {
+      display: flex;
+      flex-flow: row wrap;
+      align-content: flex-start;
+      padding: 30px 0;
+      min-height: 280px;
+      span {
+        display: inline-block;
+        margin: 0 10px;
+        user-select: none;
+        cursor: pointer;
+        &:hover > img {
+          filter:brightness(0.96);
+        }
+        &:active > img {
+          filter:brightness(0.66);
+        }
+      }
+      img {
+        border-radius: 2px;
+        display: inline-block;
+        background-color: #ffffff2b;
+        width: 62px;
+        height: 62px;
+        filter: brightness(0.99);
+      }
+      p {
+        width: 62px;
+        font-size: 12px;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  .closeBtn {
+    height: 23px;
+    width: 23px;
+    bottom: 20px;
+    right: 20px;
+    cursor: pointer;
+    position: absolute;
+    &::before, &::after {
+      content: '';
+      display:  block;
+      background-color: #fff;
+      position: absolute;
+      border-radius: 3px;
+      height: 2px;
+      width: 100%;
+    }
+    &::before {
+      transform: rotate(45deg);
+    }
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+}