Popup删除快捷图标

src/popup/App.vue

 <template>
-  <div class="popup-wrap" :style="{ 'padding-bottom': !canUseVomnibar ? '30px' : '12px' }">
+  <div class="popup-wrap">
     <div class="top-content">
-      <div class="navs" v-if="canSettings">
-        <div :class="['nav-item', { active: active === nav.value }]" v-for="nav in navs" @click="active = nav.value" :key="nav.value">
-          <img :src="active === nav.value ? nav.logoActive : nav.logo" alt="" />
-          <span> {{ nav.name }}</span>
-        </div>
-        <div class="active-bar" :style="{ transform: `translateX(${(active - 1) * 171 + 2}px)` }"></div>
-      </div>
       <img
         class="close"
         @click="close"
         src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAiCAYAAAA+stv/AAABqklEQVRYR+2Vu07DQBBFZ3koKFCAREEKPgBokJAQHwAlraOkcuUkDa+G0nJJw6tJ4spVomxLCR+AIiHRAB9AEQokKCAi4rHIJAFj2d6ZNVIonNKZnXt8986YwYB/bMD6kAAkDvxfB3I5YzqVyjw5jvUSZ1J03RzrdFoT9bp9H9Qn0AHTNIeub+5aAOJ2dGR4rVYrP6hA5POlqde391MANjs/N5OxLOvD3yf0CjTN2BcA2wBwoQLxIw5LDOCAc3sH7UC/UNOMIwGw4UKMp9OrjnP4iHHCJ37Mub0Zdk4aQiqErm9NPrfbZwBfbx4p7kJJAdwiLARVHA2AgVARJwFEQaiKkwGCINxnlDtHj2FU2j2ZuOzVLWICRx7DaIhCWYAodm1kFc6rJcyI/okD3jvvNSTtCS8Eagy9B/yBc/9TWVb9niSAsLRj90SsDMhGTRUC5YBMPM63QwqAFVeFiASgiqtAhAKoilMhAgGEEEzLFs8BxLLqhvu9tlmTNyorjDGBWkRdgMIJY3DFG/auyob7diJr7AkBC7xRXUcDxBGknpVOAbUhtT4BSBz4BL3LHjJDG6Z/AAAAAElFTkSuQmCC"
       />
     </div>
-    <Icons v-show="active === 1"></Icons>
-    <div v-if="canSettings" v-show="active === 2" style="max-height: calc(100vh - 65px);overflow-y: auto;">
-      <Settings></Settings>
-    </div>
+    <Settings></Settings>
   </div>
 </template>
 
 <script>
 import Settings from './components/Setting.vue';
-import Icons from './components/Icons.vue';
-import { navs } from './config';
 
 export default {
   data() {
-    return {
-      navs,
-      active: 1,
-      currentTabId: '',
-
-      // 是否可以启用脚本管理模块
-      canSettings: true,
-      canUseVomnibar: false,
-    };
+    return {};
   },
-  components: { Icons, Settings },
+  components: { Settings },
   methods: {
     close() {
       window.close();
     },
   },
-  created() {},
 };
 </script>
 
@@ -56,6 +35,7 @@ body {
 }
 
 .popup-wrap {
+  padding-bottom: 30px;
   .ant-collapse-icon-position-right {
     > .ant-collapse-item {
       > .ant-collapse-header {
@@ -101,6 +81,7 @@ body {
     font-size: 0;
     right: 0;
     top: 0;
+    margin-bottom: 24px;
     img {
       width: 32px;
       height: 32px;
@@ -125,63 +106,6 @@ body {
       line-height: 22px;
       letter-spacing: 1px;
     }
-    .navs {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0 2px;
-      width: 346px;
-      height: 36px;
-      background: rgba(118, 118, 128, 0.12);
-      border-radius: 4px;
-      position: relative;
-      .active-bar {
-        content: '';
-        display: block;
-        width: 171px;
-        height: 32px;
-        position: absolute;
-        left: 0;
-        background: #ffffff;
-        box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.04), 0px 3px 8px 0px rgba(0, 0, 0, 0.07);
-        border-radius: 4px;
-        transition: all 0.3s;
-      }
-      .nav-item {
-        position: relative;
-        flex: 0 50%;
-        height: 28px;
-        z-index: 99;
-        background: rgba($color: #000000, $alpha: 0);
-        cursor: pointer;
-        line-height: 28px;
-        text-align: center;
-        font-size: 13px;
-        flex-grow: 0;
-        font-weight: 400;
-        color: #000000;
-        font-size: 0;
-        img {
-          user-select: none;
-          width: 20px;
-          height: 20px;
-          display: inline-block;
-          vertical-align: middle;
-          margin-right: 14px;
-        }
-        &.active {
-          color: #303133;
-        }
-        span {
-          user-select: none;
-          vertical-align: middle;
-          font-size: 14px;
-          font-weight: 400;
-          color: #555666;
-          line-height: 14px;
-        }
-      }
-    }
   }
 }
 

src/popup/components/Icons.vue

-<template>
-  <div class="tab-panel">
-    <div class="content-item">
-      <div class="title-classify" v-if="showIcons(tabIconsComputed)">导航快捷入口</div>
-      <div class="content">
-        <div class="icon" @click="iconClick(iconItem)" v-for="iconItem in tabIconsComputed" :key="`icon-link-item-${iconItem.src}-${iconItem.url}-${iconItem.id || iconIndex}`">
-          <img :src="iconItem.src" v-if="iconItem.logoType !== 'web' && iconItem.logoType !== 'text'" />
-          <div style="display: inline-block;" v-else v-html="iconItem.html"></div>
-          <div class="name">{{ iconItem.name }}</div>
-        </div>
-      </div>
-    </div>
-
-    <div class="content-item">
-      <div class="title-classify" v-if="showIcons(systemIcons)">系统</div>
-      <div class="content">
-        <div class="icon" @click="iconClick(systemIcon)" v-for="systemIcon in systemIcons" :key="systemIcon.id">
-          <img :src="systemIcon.src" />
-          <div class="name">{{ systemIcon.name }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Message } from 'ant-design-vue';
-import { systemIcons } from '../config';
-
-export default {
-  data() {
-    return {
-      // 是开发者工具箱
-      isToolsBox: true,
-      // 是否可以启用脚本管理模块
-      // 图标
-      tabIcons: [],
-      toolIcons: [],
-      systemIcons,
-    };
-  },
-  computed: {
-    tabIconsComputed() {
-      return this.tabIcons.filter(v => this.showIcon(v));
-    },
-    toolIconsComputed() {
-      return this.toolIcons.filter(v => this.showIcon(v));
-    },
-  },
-  methods: {
-    close() {
-      window.close();
-    },
-    showIcons(icons) {
-      return icons.some(v => this.showIcon(v));
-    },
-    showIcon(iconItem) {
-      let dependency = false;
-
-      const isInstall = iconItem.url.startsWith('Install://');
-      const isPlugin = iconItem.url.startsWith('Plugin://');
-      const isWebPage = iconItem.type === 'webPage' && iconItem.openIsIframe;
-      if (iconItem.url.startsWith('CSDN://')) {
-        const url = iconItem.url.replace('CSDN://', '');
-        const func = url.split('/')[0];
-        // 一些内置的功能， 比如tab的书签、设置、天气等
-        if (func !== 'Vomnibar' && func !== 'pages') {
-          return false;
-        }
-        if (func === 'Vomnibar') {
-          dependency = true;
-        } else {
-          dependency = false;
-        }
-      } else if (isInstall || isPlugin || isWebPage) {
-        dependency = true;
-      } else {
-        dependency = false;
-      }
-
-      return (dependency && this.canUseVomnibar) || !dependency;
-    },
-    iconClick(iconItem) {
-      if (iconItem.url.startsWith('CSDN://')) {
-        const url = iconItem.url.replace('CSDN://', '');
-        const func = url.split('/')[0];
-        if (func === 'pages') {
-          const optionsUrl = chrome.runtime.getURL(url);
-          chrome.tabs.create({ active: true, url: optionsUrl }, () => chrome.runtime.lastError);
-        } else if (func === 'Vomnibar') {
-          Message.info('暂不支持');
-        }
-      } else if (iconItem.type === 'webPage') {
-        Message.info('暂不支持');
-      } else if (iconItem.url.startsWith('chrome://')) {
-        // 打开chrome://页面
-        chrome.tabs.create({ url: iconItem.url });
-      } else if (iconItem.url.startsWith('Plugin://')) {
-        Message.info('暂不支持');
-      } else if (iconItem.url.startsWith('Install://')) {
-        Message.info('暂不支持');
-      } else {
-        // 正常打开页面
-        const checkLastRuntimeError = () => chrome.runtime.lastError;
-        chrome.tabs.create({ active: true, url: iconItem.url }, checkLastRuntimeError);
-      }
-      this.close();
-    },
-    getStorageData(key) {
-      return new Promise(resolve => {
-        chrome.storage.local.get([key], function(res) {
-          let data = null;
-          try {
-            data = (res[key] && typeof res[key] === 'string' ? JSON.parse(res[key]) : res[key]) || [];
-          } catch (e) {
-            data = res[key];
-          }
-          resolve(data);
-        });
-      });
-    },
-    getTabIcons() {
-      const flatten = arr => {
-        return arr.reduce((result, item) => {
-          return result.concat(Array.isArray(item) ? flatten(item) : item);
-        }, []);
-      };
-
-      if (!this.isToolsBox) {
-        this.getStorageData('tab-icons').then(icons => {
-          if (!icons) return;
-          this.tabIcons = flatten(icons)
-            .filter(v => {
-              try {
-                return !v.id.startsWith('activity-') && v.url.indexOf('tabSettings') === -1;
-              } catch (e) {
-                return false;
-              }
-            })
-            .slice(0, 8);
-        });
-      }
-    },
-  },
-  created() {
-    this.getTabIcons();
-  },
-};
-</script>
-
-<style lang="scss">
-.fontLink,
-.font_box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 44px;
-  height: 44px;
-  cursor: pointer;
-  border-radius: 6px;
-  color: #fff;
-  overflow: hidden;
-  font {
-    color: #fff !important;
-    line-height: 30px;
-  }
-}
-.font_box {
-  .text {
-    font-size: 18px !important;
-  }
-}
-.fontLink {
-  span {
-    display: inline-block;
-    width: 36px;
-    height: 36px;
-    background: rgba(255, 255, 255, 0.8);
-    text-align: center;
-    border-radius: 100px;
-    position: relative;
-  }
-  img {
-    width: 24px !important;
-    height: 24px !important;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-  }
-}
-
-.content-item {
-  margin-bottom: 8px;
-  padding: 0 12px;
-  &:last-child {
-    margin-bottom: 0;
-  }
-  .title-classify {
-    font-size: 14px;
-    margin-bottom: 4px;
-    font-weight: 500;
-    user-select: none;
-    color: #000000;
-    line-height: 22px;
-  }
-  .content {
-    display: flex;
-    user-select: none;
-
-    flex-wrap: wrap;
-    .icon {
-      width: 88px;
-      height: 85px;
-      text-align: center;
-      cursor: pointer;
-      box-sizing: border-box;
-      padding: 8px 8px 0 8px;
-      font-size: 0;
-      transition: all 0.2s;
-      margin-right: 8px;
-
-      &:nth-child(4n) {
-        margin-right: 0;
-      }
-      img {
-        width: 44px;
-        height: 44px;
-        border-radius: 6px;
-      }
-      > div.name {
-        margin-top: 8px;
-        font-size: 12px;
-        font-weight: 400;
-        color: #222226;
-        line-height: 17px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        text-align: center;
-        word-break: break-all;
-      }
-      &:hover {
-        background: rgba($color: #000000, $alpha: 0.1);
-        border-radius: 4px;
-      }
-    }
-  }
-}
-@media (prefers-color-scheme: dark) {
-  .content-item {
-    .title-classify {
-      color: #d5d5d5;
-    }
-    .content {
-      .icon {
-        &:hover {
-          background: rgba(160, 160, 160, 0.1);
-        }
-        & > div.name {
-          color: #e0e0e0;
-        }
-      }
-    }
-  }
-}
-</style>