From 1e5465dc16f7f5776093f4a74c54b93f721f82f0 Mon Sep 17 00:00:00 2001
From: Liu Rabt <136670930@qq.com>
Date: Thu, 3 Sep 2020 17:04:48 +0800
Subject: [PATCH] add darkMode,edit  at indexFund,fix bug

---
 README.md                |   6 +
 edge.html                |   7 +
 index.html               |  11 +-
 package.json             |   2 +-
 src/common/reward.vue    |  74 ++++-
 src/options/App.vue      | 142 ++++++---
 src/options/options.html |   2 +-
 src/options/options.js   |   5 +
 src/popup/App.vue        | 604 ++++++++++++++++++++++++++++++---------
 src/popup/popup.html     |   2 +-
 src/popup/popup.js       |   4 +-
 11 files changed, 647 insertions(+), 212 deletions(-)

diff --git a/README.md b/README.md
index af3a78a..a3caf2f 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,12 @@
 ![主界面2](https://raw.githubusercontent.com/x2rr/Picture/master/img/20200716181202.png)
 
 ## 更新说明
+### v1.7.0
+- 新增暗色模式主题。
+- 顶部指数信息支持动态修改。
+- 暂停实时更新功能改为全局生效。
+- 修复删除特别关注的基金后，脚本还实时更新的异常。
+
 ### v1.6.0
 - 解决基金添加后无法显示、基金丢失等异常问题。
 - 增加按类别排序功能。
diff --git a/edge.html b/edge.html
index b05ed83..b9de48e 100644
--- a/edge.html
+++ b/edge.html
@@ -64,6 +64,13 @@ <h2>如何使用</h2>
             <img style="margin: 10px;" src="./image/2222.png" alt="主界面2">
         </div>
         <h2>更新说明</h2>
+        <h3>v1.7.0</h3>
+        <ul>
+            <li>新增暗色模式主题。</li>
+            <li>顶部指数信息支持动态修改。</li>
+            <li>暂停实时更新功能改为全局生效。</li>
+            <li>修复删除特别关注的基金后，脚本还实时更新的异常。</li>
+        </ul>
         <h3>v1.6.0</h3>
 
         <ul>
diff --git a/index.html b/index.html
index 2918713..349eb4e 100644
--- a/index.html
+++ b/index.html
@@ -72,21 +72,24 @@ <h2>如何使用</h2>
             <img src="./image/2222.png" alt="主界面2">
         </div>
         <h2>更新说明</h2>
+        <h3>v1.7.0</h3>
+        <ul>
+            <li>新增暗色模式主题。</li>
+            <li>顶部指数信息支持动态修改。</li>
+            <li>暂停实时更新功能改为全局生效。</li>
+            <li>修复删除特别关注的基金后，脚本还实时更新的异常。</li>
+        </ul>
         <h3>v1.6.0</h3>
-
         <ul>
             <li>解决基金添加后无法显示、基金丢失等异常问题。</li>
             <li>增加按类别排序功能。</li>
             <li>增加拖拽排序功能。</li>
             <li>添加基金时增加搜索与多选功能。</li>
         </ul>
-
         <h3>v1.5.6</h3>
-
         <ul>
             <li>修复不同时区的时间异常问题。</li>
         </ul>
-
         <h3>v1.5.5</h3>
 
         <ul>
diff --git a/package.json b/package.json
index 45673ea..ff0708f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "choose-funds",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "A Vue.js web extension",
   "author": "Liu Rabt",
   "license": "GPL-3.0",
diff --git a/src/common/reward.vue b/src/common/reward.vue
index 4fde364..2134dc4 100644
--- a/src/common/reward.vue
+++ b/src/common/reward.vue
@@ -1,22 +1,39 @@
 <template>
   <div v-if="rewardShadow" class="shadow">
-    <div class="reward-box" :style="{marginTop: top +'px'}">
+    <div class="reward-box" :style="{ marginTop: top + 'px' }">
       <div class="tab-row">
-        <button @click="checked = 'wepay'" :class="checked == 'wepay' ? 'checked' : ''">微信</button>
-        <button @click="checked = 'alipay'" :class="checked == 'alipay' ? 'checked' : ''">支付宝</button>
+        <button
+          @click="checked = 'wepay'"
+          :class="checked == 'wepay' ? 'checked' : ''"
+        >
+          微信
+        </button>
+        <button
+          @click="checked = 'alipay'"
+          :class="checked == 'alipay' ? 'checked' : ''"
+        >
+          支付宝
+        </button>
       </div>
       <div class="qrcode">
         <img
           :src="
-              checked == 'wepay'
-                ? './../icons/qrcode/wepay.png'
-                : './../icons/qrcode/alipay.png'
-            "
+            checked == 'wepay'
+              ? './../icons/qrcode/wepay.png'
+              : './../icons/qrcode/alipay.png'
+          "
         />
       </div>
-      <p class="tips reward-tips">感谢有您的支持，自选基金才能一直保持更新，增加更多功能。</p>
+      <p class="tips reward-tips">
+        感谢有您的支持，自选基金才能一直保持更新，增加更多功能。
+      </p>
       <div class="tab-row">
-        <input class="btn success" type="button" value="打赏好了" @click="close" />
+        <input
+          class="btn success"
+          type="button"
+          value="打赏好了"
+          @click="close"
+        />
         <input class="btn" type="button" value="下次一定" @click="close" />
       </div>
     </div>
@@ -27,13 +44,13 @@ export default {
   props: {
     top: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   },
   data() {
     return {
       rewardShadow: false,
-      checked: "wepay"
+      checked: "wepay",
     };
   },
   mounted() {},
@@ -44,8 +61,8 @@ export default {
     close() {
       this.rewardShadow = false;
       this.$emit("close", false);
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -139,6 +156,7 @@ export default {
 
 .reward-tips {
   padding: 0 50px;
+  margin-top: 5px;
 }
 
 .btn {
@@ -158,4 +176,30 @@ export default {
   color: #4eb61b;
   border-color: #4eb61b;
 }
-</style>
\ No newline at end of file
+
+.darkMode .reward-box {
+  color: rgba($color: #ffffff, $alpha: 0.6);
+  background-color: #373737;
+  .btn {
+    background-color: rgba($color: #ffffff, $alpha: 0.16);
+    color: rgba($color: #ffffff, $alpha: 0.6);
+    border: 1px solid rgba($color: #ffffff, $alpha: 0.6);
+  }
+  .success {
+    border: 1px solid rgba($color: #4eb61b, $alpha: 0.6);
+    background-color: rgba($color: #4eb61b, $alpha: 0.6);
+  }
+
+  button {
+    background-color: rgba($color: #ffffff, $alpha: 0.16);
+    color: rgba($color: #ffffff, $alpha: 0.6);
+    border: 1px solid rgba($color: #ffffff, $alpha: 0.38);
+  }
+
+  button.checked {
+    color: rgba($color: #ffffff, $alpha: 0.6);
+    border: 1px solid rgba($color: #409eff, $alpha: 0.38);
+    background-color: rgba($color: #409eff, $alpha: 0.6);
+  }
+}
+</style>
diff --git a/src/options/App.vue b/src/options/App.vue
index fd11b66..9d5d7c7 100644
--- a/src/options/App.vue
+++ b/src/options/App.vue
@@ -1,20 +1,25 @@
 <template>
-  <div id="app" class="container">
+  <div id="app" class="container" :class="containerClass">
     <div>
       <ul class="setting-list">
         <li>
           <div class="list-title">
             节假日信息
-            <button :disabled="disabled" @click="getHoliday" title="点击更新节假日信息" class="btn">更新</button>
+            <button
+              :disabled="disabled"
+              @click="getHoliday"
+              title="点击更新节假日信息"
+              class="btn"
+            >
+              更新
+            </button>
             <span class="loading" v-if="disabled">更新中。。。</span>
           </div>
           <p>
             <span v-if="holiday">
               当前版本：v{{
-              holiday.version
-              }}&nbsp;&nbsp;&nbsp;&nbsp;最后节假日日期：{{
-              holiday.lastDate
-              }}
+                holiday.version
+              }}&nbsp;&nbsp;&nbsp;&nbsp;最后节假日日期：{{ holiday.lastDate }}
             </span>
           </p>
           <p>
@@ -24,23 +29,27 @@
         </li>
         <li>
           <div class="list-title">
-            显示份额与收益信息
-            <div class="select-row">
-              显示持有金额
-              <input type="radio" id="numFalse" :value="false" v-model="showAmount" />
-              <label for="numFalse">否</label>
-              <input type="radio" id="numTrue" :value="true" v-model="showAmount" />
-              <label for="numTrue">是</label>
-            </div>
+            主题设置
             <div class="select-row">
-              显示估值收益
-              <input type="radio" id="numFalse" :value="false" v-model="showGains" />
-              <label for="numFalse">否</label>
-              <input type="radio" id="numTrue" :value="true" v-model="showGains" />
-              <label for="numTrue">是</label>
+              <el-switch
+                v-model="darkMode"
+                @change="changeDarkMode"
+                active-color="#484848"
+                inactive-color="#13ce66"
+                inactive-text="标准模式"
+                active-text="暗色模式"
+              >
+              </el-switch>
             </div>
           </div>
-          <p>tips：在编辑设置里，输入基金的持有份额，即可计算出收益估值情况。</p>
+        </li>
+        <li>
+          <div class="list-title">
+            显示份额与收益信息
+          </div>
+          <p>
+            tips：在编辑设置里，输入基金的持有份额，即可计算出收益估值情况。
+          </p>
         </li>
         <li>
           <div class="list-title">请作者喝杯咖啡</div>
@@ -56,7 +65,11 @@
           </p>
           <p style="line-height:34px">
             或者你也可以帮忙点一个star，点击查看源码→
-            <span title="点击查看项目源码" class="black icon-btn-row" @click="openGithub">
+            <span
+              title="点击查看项目源码"
+              class="black icon-btn-row"
+              @click="openGithub"
+            >
               <svg
                 class="githubIcon"
                 height="24"
@@ -87,28 +100,29 @@
 import reward from "../common/reward";
 export default {
   components: {
-    reward
+    reward,
   },
   data() {
     return {
       holiday: null,
       disabled: false,
       showAmount: false,
-      showGains: false
+      showGains: false,
+      darkMode: false,
     };
   },
   mounted() {
     chrome.storage.sync.get(
-      ["holiday", "showNum", "showAmount", "showGains"],
-      res => {
+      ["holiday", "showNum", "showAmount", "showGains", "darkMode"],
+      (res) => {
         if (res.showNum) {
           //解决版本遗留问题，拆分属性
           chrome.storage.sync.set({
-            showNum: false
+            showNum: false,
           });
           chrome.storage.sync.set(
             {
-              showAmount: true
+              showAmount: true,
             },
             () => {
               this.showAmount = true;
@@ -116,7 +130,7 @@ export default {
           );
           chrome.storage.sync.set(
             {
-              showGains: true
+              showGains: true,
             },
             () => {
               this.showGains = true;
@@ -132,6 +146,8 @@ export default {
         } else {
           this.getHoliday();
         }
+
+        this.darkMode = res.darkMode ? res.darkMode : false;
       }
     );
   },
@@ -139,7 +155,7 @@ export default {
     showAmount(val) {
       chrome.storage.sync.set(
         {
-          showAmount: val
+          showAmount: val,
         },
         () => {
           this.showAmount = val;
@@ -149,22 +165,29 @@ export default {
     showGains(val) {
       chrome.storage.sync.set(
         {
-          showGains: val
+          showGains: val,
         },
         () => {
           this.showGains = val;
         }
       );
-    }
+    },
+  },
+  computed: {
+    containerClass() {
+      if (this.darkMode) {
+        return "darkMode";
+      }
+    },
   },
   methods: {
     getHoliday() {
       this.disabled = true;
       let url = "https://x2rr.github.io/funds/holiday.json";
-      this.$axios.get(url).then(res => {
+      this.$axios.get(url).then((res) => {
         chrome.storage.sync.set(
           {
-            holiday: res.data
+            holiday: res.data,
           },
           () => {
             this.holiday = res.data;
@@ -181,8 +204,13 @@ export default {
     },
     reward(data) {
       this.$refs.reward.init();
-    }
-  }
+    },
+    changeDarkMode() {
+      chrome.storage.sync.set({
+        darkMode: this.darkMode,
+      });
+    },
+  },
 };
 </script>
 
@@ -202,7 +230,8 @@ export default {
   width: 600px;
   margin: 0 auto;
   text-align: left;
-  padding: 0;
+  padding: 0 10px 10px;
+  border-radius: 8px;
 }
 
 .setting-list li {
@@ -261,17 +290,6 @@ export default {
   padding: 8px 8px 8px 36px;
 }
 
-.slt {
-  color: #fff;
-  background-color: #67c23a;
-  border-color: #67c23a;
-}
-
-.input-row {
-  text-align: center;
-  margin-top: 10px;
-}
-
 .tips {
   font-size: 12px;
   margin: 0;
@@ -288,4 +306,34 @@ export default {
   color: #24292e;
   border-color: #24292e;
 }
+
+//暗黑主题
+.container.darkMode {
+  color: rgba($color: #ffffff, $alpha: 0.6);
+  background-color: #121212;
+  .btn {
+    background-color: rgba($color: #ffffff, $alpha: 0.16);
+    color: rgba($color: #ffffff, $alpha: 0.6);
+    border: 1px solid rgba($color: #ffffff, $alpha: 0.6);
+  }
+  .primary {
+    border: 1px solid rgba($color: #409eff, $alpha: 0.6);
+    background-color: rgba($color: #409eff, $alpha: 0.6);
+  }
+
+  .setting-list {
+    background-color: rgba($color: #ffffff, $alpha: 0.11);
+  }
+
+  .setting-list li {
+    border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.38);
+  }
+
+  /deep/ .el-switch__label.is-active {
+    color: rgba($color: #409eff, $alpha: 0.87);
+  }
+  /deep/ .el-switch__label {
+    color: rgba($color: #ffffff, $alpha: 0.6);
+  }
+}
 </style>
diff --git a/src/options/options.html b/src/options/options.html
index 50c9275..31c4055 100644
--- a/src/options/options.html
+++ b/src/options/options.html
@@ -9,7 +9,7 @@
   <!-- Load some resources only in development environment -->
   <% } %>
 </head>
-<body>
+<body style="margin:0">
   <div id="app">
 
   </div>
diff --git a/src/options/options.js b/src/options/options.js
index 698cdec..a29d70b 100644
--- a/src/options/options.js
+++ b/src/options/options.js
@@ -1,9 +1,14 @@
 import Vue from "vue";
 import App from "./App";
 import axios from "axios";
+import {
+  Switch
+} from 'element-ui';
 
 Vue.prototype.$axios = axios;
 
+Vue.use(Switch)
+
 /* eslint-disable no-new */
 new Vue({
   el: "#app",
diff --git a/src/popup/App.vue b/src/popup/App.vue
index 27ef460..c78838e 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -1,11 +1,67 @@
 <template>
-  <div id="app" class="container" :class="containerWidth">
+  <div id="app" class="container" :class="containerClass">
     <div>
       <div class="tab-row">
-        <div v-for="el in seciData" class="tab-col" :key="el.f12">
-          <h5>{{ el.f14 }}</h5>
+        <div
+          v-for="(el, index) in indFundData"
+          :draggable="isEdit"
+          class="tab-col"
+          :class="drag"
+          :key="el.f12"
+          @dragstart="handleDragStart($event, el)"
+          @dragover.prevent="handleDragOver($event, el)"
+          @dragenter="handleDragEnter($event, el, index)"
+          @dragend="handleDragEnd($event, el)"
+        >
+          <h5>
+            {{ el.f14 }}
+            <span
+              v-if="isEdit"
+              @click="dltIndFund(index)"
+              class="dltBtn edit red btn"
+              >✖</span
+            >
+          </h5>
           <p :class="el.f3 >= 0 ? 'up' : 'down'">{{ el.f2 }}</p>
-          <p :class="el.f3 >= 0 ? 'up' : 'down'">{{ el.f4 }}&nbsp;&nbsp;{{ el.f3 }}%</p>
+          <p :class="el.f3 >= 0 ? 'up' : 'down'">
+            {{ el.f4 }}&nbsp;&nbsp;{{ el.f3 }}%
+          </p>
+        </div>
+        <div v-if="isEdit && indFundData.length < 4" class="tab-col">
+          <div
+            v-if="!showAddSeciInput"
+            class="addSeci"
+            @click="() => (showAddSeciInput = true)"
+          >
+            添加
+          </div>
+          <div v-else>
+            <div style="padding-top:2px">
+              <el-select
+                size="mini"
+                :popper-append-to-body="false"
+                v-model="sltSeci"
+                style="width:110px"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in userSeciList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </div>
+            <div style="margin-top:4px">
+              <input
+                class="btn"
+                type="button"
+                value="取消"
+                @click="() => (showAddSeciInput = false)"
+              />
+              <input class="btn" type="button" value="确定" @click="saveSeci" />
+            </div>
+          </div>
         </div>
       </div>
       <div v-if="isEdit" class="input-row">
@@ -15,6 +71,7 @@
           v-model="fundcode"
           multiple
           filterable
+          :popper-append-to-body="false"
           remote
           size="mini"
           reserve-keyword
@@ -33,12 +90,15 @@
             <span style="float: left">{{ item.label }}</span>
             <span
               style="float: right; color: #8492a6; font-size: 13px;margim-right:20px;padding-right:15px"
-            >{{ item.value }}</span>
+              >{{ item.value }}</span
+            >
           </el-option>
         </el-select>
         <input @click="save" class="btn" type="button" value="确定" />
       </div>
-      <p v-if="isEdit" class="tips center">部分新发基金或QDII基金可以搜索到，但可能无法获取估值情况</p>
+      <p v-if="isEdit" class="tips center">
+        部分新发基金或QDII基金可以搜索到，但可能无法获取估值情况
+      </p>
       <table :class="tableHeight">
         <thead>
           <tr>
@@ -79,7 +139,9 @@
             <td v-if="!isEdit">{{ el.gsz }}</td>
             <td :class="el.gszzl >= 0 ? 'up' : 'down'">{{ el.gszzl }}%</td>
             <td v-if="showAmount">{{ calculateMoney(el) }}</td>
-            <td v-if="showGains" :class="el.gszzl >= 0 ? 'up' : 'down'">{{ calculate(el) }}</td>
+            <td v-if="showGains" :class="el.gszzl >= 0 ? 'up' : 'down'">
+              {{ calculate(el) }}
+            </td>
             <td v-if="!isEdit">{{ el.gztime.substr(5) }}</td>
             <th v-if="isEdit && isEdit && (showAmount || showGains)">
               <input
@@ -100,27 +162,60 @@
               />
             </td>
             <td v-if="isEdit">
-              <input @click="dlt(el.fundcode)" class="btn red edit" value="✖" type="button" />
+              <input
+                @click="dlt(el.fundcode)"
+                class="btn red edit"
+                value="✖"
+                type="button"
+              />
             </td>
           </tr>
         </tbody>
       </table>
     </div>
-    <p v-if="isEdit" class="tips">特别关注功能介绍：可以指定一个基金，实现后台自动更新估值涨跌幅，并在程序图标中以角标的形式实时更新。</p>
+    <p v-if="isEdit" class="tips">
+      特别关注功能介绍：可以指定一个基金，在后台自动更新估值涨跌幅，并在程序图标中以角标的形式实时更新。
+    </p>
+
+    <div v-show="isEdit" class="input-row">
+      <el-switch
+        v-model="darkMode"
+        @change="changeDarkMode"
+        active-color="#484848"
+        inactive-color="#13ce66"
+        inactive-text="标准模式"
+        active-text="暗色模式"
+      >
+      </el-switch>
+    </div>
 
     <div class="input-row">
       <input
         class="btn"
         v-if="isDuringDate"
         type="button"
-        :value="isLiveUpdate ? '暂停实时更新' : '实时更新'"
-        @click="isLiveUpdate = !isLiveUpdate"
+        :value="isLiveUpdate ? '暂停更新' : '实时更新'"
+        :title="
+          isLiveUpdate ? '正在实时更新，点击暂停' : '已暂停，点击切换为实时更新'
+        "
+        @click="changeLiveUpdate"
       />
       <input class="btn" v-if="!isDuringDate" type="button" value="休市中" />
-      <input class="btn" type="button" :value="isEdit ? '完成编辑' : '编辑'" @click="isEdit = !isEdit" />
+      <input
+        class="btn"
+        type="button"
+        :value="isEdit ? '完成编辑' : '编辑'"
+        @click="isEdit = !isEdit"
+      />
       <!-- <input class="btn" type="button" :value="isAdd ? '取消添加' : '添加'" @click="isAdd = !isAdd" /> -->
       <input class="btn" type="button" value="设置" @click="option" />
-      <input class="btn primary" type="button" title="φ(>ω<*)" value="打赏" @click="reward" />
+      <input
+        class="btn primary"
+        type="button"
+        title="φ(>ω<*)"
+        value="打赏"
+        @click="reward"
+      />
       <input
         v-if="showGains"
         class="btn"
@@ -147,7 +242,7 @@ export default {
       isEdit: false,
       fundcode: "",
       isAdd: false,
-      seciData: [],
+      indFundData: [],
       isLiveUpdate: false,
       isDuringDate: false,
       RealtimeFundcode: null,
@@ -171,13 +266,66 @@ export default {
       list: [],
       loading: false,
       dragging: null,
+      showAddSeciInput: false,
+      seciList: ["1.000001", "1.000300", "0.399001", "0.399006"],
+      allSeciList: [
+        {
+          value: "1.000001",
+          label: "上证指数",
+        },
+        {
+          value: "1.000300",
+          label: "沪深300",
+        },
+        {
+          value: "0.399001",
+          label: "深证成指",
+        },
+        {
+          value: "1.000688",
+          label: "科创50",
+        },
+        {
+          value: "0.399006",
+          label: "创业板指",
+        },
+        {
+          value: "0.399005",
+          label: "中小板指",
+        },
+        {
+          value: "100.HSI",
+          label: "恒生指数",
+        },
+        {
+          value: "100.DJIA",
+          label: "道琼斯",
+        },
+        {
+          value: "100.NDX",
+          label: "纳斯达克",
+        },
+        {
+          value: "100.SPX",
+          label: "标普500",
+        },
+      ],
+      sltSeci: "",
+      darkMode: false,
     };
   },
   mounted() {
-    this.isLiveUpdate = true;
-    this.getSeciData();
     chrome.storage.sync.get(
-      ["RealtimeFundcode", "fundListM", "showAmount", "showGains", "fundList"],
+      [
+        "RealtimeFundcode",
+        "fundListM",
+        "showAmount",
+        "showGains",
+        "fundList",
+        "seciList",
+        "darkMode",
+        "isLiveUpdate",
+      ],
       (res) => {
         this.fundList = res.fundList ? res.fundList : this.fundList;
         if (res.fundListM) {
@@ -191,24 +339,39 @@ export default {
             this.fundListM.push(val);
           }
         }
+        this.darkMode = res.darkMode ? res.darkMode : false;
+        this.seciList = res.seciList ? res.seciList : this.seciList;
         this.showAmount = res.showAmount ? res.showAmount : false;
         this.showGains = res.showGains ? res.showGains : false;
         this.RealtimeFundcode = res.RealtimeFundcode;
+        this.isLiveUpdate = res.isLiveUpdate ? res.isLiveUpdate : false;
+        this.getIndFundData();
         this.getData();
+        this.checkInterval(true);
       }
     );
   },
   computed: {
-    containerWidth() {
+    containerClass() {
+      let className = "";
+      if (this.darkMode) {
+        className += "darkMode ";
+      }
       if (this.rewardShadow) {
-        return "more-height";
+        className += "more-height";
       } else if (this.isEdit) {
-        return "more-width";
+        className += "more-width";
       } else if (this.showAmount && this.showGains) {
-        return "num-all-width";
+        className += "num-all-width";
       } else if (this.showAmount || this.showGains) {
-        return "num-one-width";
+        className += "num-one-width";
       }
+      return className;
+    },
+    userSeciList() {
+      return this.allSeciList.filter((val) => {
+        return this.seciList.indexOf(val.value) == -1;
+      });
     },
     tableHeight() {
       if (this.isEdit) {
@@ -222,12 +385,27 @@ export default {
     },
   },
   watch: {
-    isLiveUpdate(val) {
+    //编辑状态停止更新
+    isEdit(val) {
+      if (val) {
+        clearInterval(this.myVar);
+        clearInterval(this.myVar1);
+      } else {
+        this.checkInterval();
+      }
+    },
+  },
+  methods: {
+    checkInterval(isFirst) {
       chrome.runtime.sendMessage({ type: "DuringDate" }, (response) => {
         this.isDuringDate = response.farewell;
-        if (val && this.isDuringDate) {
+        if (this.isLiveUpdate && this.isDuringDate) {
+          if (!isFirst) {
+            this.getIndFundData();
+            this.getData();
+          }
           this.myVar = setInterval(() => {
-            this.getSeciData();
+            this.getIndFundData();
           }, 5 * 1000);
           this.myVar1 = setInterval(() => {
             this.getData();
@@ -238,19 +416,6 @@ export default {
         }
       });
     },
-    //编辑状态停止更新
-    isEdit(val) {
-      if (val) {
-        clearInterval(this.myVar1);
-      } else {
-        this.getData();
-        this.myVar1 = setInterval(() => {
-          this.getData();
-        }, 60 * 1000);
-      }
-    },
-  },
-  methods: {
     selectChange() {
       this.searchOptions = [];
     },
@@ -301,7 +466,7 @@ export default {
       );
     },
     compare(property, type) {
-      return function (obj1, obj2) {
+      return function(obj1, obj2) {
         var val1 = obj1[property];
         var val2 = obj2[property];
         if (type == "asc") {
@@ -314,12 +479,54 @@ export default {
     closeReward() {
       this.rewardShadow = false;
     },
-    getSeciData() {
+    changeDarkMode() {
+      chrome.storage.sync.set({
+        darkMode: this.darkMode,
+      });
+    },
+    changeLiveUpdate() {
+      chrome.storage.sync.set(
+        {
+          isLiveUpdate: !this.isLiveUpdate,
+        },
+        () => {
+          this.isLiveUpdate = !this.isLiveUpdate;
+          this.checkInterval();
+        }
+      );
+    },
+    saveSeci() {
+      this.seciList.push(this.sltSeci);
+      chrome.storage.sync.set(
+        {
+          seciList: this.seciList,
+        },
+        () => {
+          this.sltSeci = "";
+          this.getIndFundData();
+        }
+      );
+    },
+    dltIndFund(ind) {
+      this.seciList.splice(ind, 1);
+      chrome.storage.sync.set(
+        {
+          seciList: this.seciList,
+        },
+        () => {
+          this.getIndFundData();
+        }
+      );
+    },
+    getIndFundData() {
+      let seciListStr = this.seciList.join(",");
       let url =
-        "https://push2.eastmoney.com/api/qt/ulist.np/get?fltt=2&fields=f2,f3,f4,f12,f14&secids=1.000001,1.000300,0.399001,0.399006&_=" +
+        "https://push2.eastmoney.com/api/qt/ulist.np/get?fltt=2&fields=f2,f3,f4,f12,f14&secids=" +
+        seciListStr +
+        "&_=" +
         new Date().getTime();
       this.$axios.get(url).then((res) => {
-        this.seciData = res.data.data.diff;
+        this.indFundData = res.data.data.diff;
       });
     },
     getData() {
@@ -347,7 +554,7 @@ export default {
       );
 
       function checkFailed(then) {
-        return function (responses) {
+        return function(responses) {
           const someFailed = responses.some((response) => response.error);
           if (someFailed) {
             throw responses;
@@ -362,7 +569,7 @@ export default {
           if (res.data && res.data.match(/\{(.+?)\}/)) {
             let val = res.data.match(/\{(.+?)\}/);
             if (val) {
-              //判读返回数据格式是否正常
+              //判断返回数据格式是否正常
               let data = JSON.parse(val[0]);
               if (this.showAmount || this.showGains) {
                 let slt = this.fundListM.filter(
@@ -411,58 +618,6 @@ export default {
         .catch((err) => {
           formatData(err);
         });
-
-      return false;
-
-      this.$axios
-        .all(promisesResolved)
-        .then(
-          this.$axios.spread((...responses) => {
-            this.dataList = [];
-            responses.forEach((res, ind) => {
-              let val = res.data.match(/\{(.+?)\}/);
-              if (val) {
-                //判读返回数据格式是否正常
-                let data = JSON.parse(val[0]);
-                if (this.showAmount || this.showGains) {
-                  let slt = this.fundListM.filter(
-                    (item) => item.code == data.fundcode
-                  );
-                  data.num = slt[0].num;
-                  data.amount = this.calculateMoney(data);
-                  data.gains = this.calculate(data);
-                }
-                this.dataList.push(data);
-                if (data.fundcode == this.RealtimeFundcode) {
-                  chrome.runtime.sendMessage({
-                    type: "refreshBadge",
-                    data: data,
-                  });
-                }
-              } else {
-                //不支持的基金特殊处理
-                let data = {
-                  fundcode: this.fundListM[ind].code,
-                  name: this.fundListM[ind].code + "无法获取详情",
-                  jzrq: "",
-                  dwjz: "0",
-                  gsz: "0",
-                  gszzl: "0",
-                  gztime: "0",
-                  num: "0",
-                  amount: "0",
-                  gains: "0",
-                };
-
-                this.dataList.push(data);
-              }
-            });
-            this.getAllGains();
-          })
-        )
-        .catch((error) => {
-          console.log("数据请求出现错误！");
-        });
     },
     getAllGains() {
       let allGains = 0;
@@ -548,10 +703,22 @@ export default {
       }
     },
     dlt(id) {
-      this.fundListM = this.fundListM.filter(function (ele) {
+      this.fundListM = this.fundListM.filter(function(ele) {
         return ele.code != id;
       });
 
+      if (id == this.RealtimeFundcode) {
+        chrome.storage.sync.set(
+          {
+            RealtimeFundcode: null,
+          },
+          () => {
+            this.RealtimeFundcode = null;
+            chrome.runtime.sendMessage({ type: "endInterval" });
+          }
+        );
+      }
+
       chrome.storage.sync.set(
         {
           fundListM: this.fundListM,
@@ -564,42 +731,81 @@ export default {
     handleDragStart(e, item) {
       this.dragging = item;
     },
-    handleDragEnd(e, item) {
-      this.dragging = null;
-      chrome.storage.sync.set(
-        {
-          fundListM: this.fundListM,
-        },
-
-        () => {}
-      );
-    },
     handleDragOver(e) {
       e.dataTransfer.dropEffect = "move";
     },
+    handleDragEnd(e, item) {
+      this.dragging = null;
+      if (item.fundcode) {
+        chrome.storage.sync.set(
+          {
+            fundListM: this.fundListM,
+          },
+          () => {}
+        );
+      } else if (item.f12) {
+        chrome.storage.sync.set(
+          {
+            seciList: this.seciList,
+          },
+          () => {}
+        );
+      }
+    },
     handleDragEnter(e, item, index) {
-      e.dataTransfer.effectAllowed = "move";
-      if (item.fundcode === this.dragging.fundcode) {
-        return;
+      // 基金排序
+      if (this.dragging && this.dragging.fundcode && item.fundcode) {
+        e.dataTransfer.effectAllowed = "move";
+        if (item.fundcode === this.dragging.fundcode) {
+          return;
+        }
+        const newItems = [...this.fundListM];
+        const src = newItems.findIndex((n) => n.code == this.dragging.fundcode);
+        const dst = newItems.findIndex((n) => n.code == item.fundcode);
+        // // 替换
+        newItems.splice(dst, 0, ...newItems.splice(src, 1));
+
+        this.fundListM = newItems;
+
+        //数据列表也同步更新
+        const newDataItems = [...this.dataList];
+        const dataSrc = newDataItems.findIndex(
+          (n) => n.fundcode == this.dragging.fundcode
+        );
+        const dataDst = newDataItems.findIndex(
+          (n) => n.fundcode == item.fundcode
+        );
+        newDataItems.splice(dataDst, 0, ...newDataItems.splice(dataSrc, 1));
+        this.dataList = newDataItems;
+      } else if (this.dragging && this.dragging.f12 && item.f12) {
+        e.dataTransfer.effectAllowed = "move";
+        if (item.f12 === this.dragging.f12) {
+          return;
+        }
+        const newIndItems = [...this.seciList];
+        const indSrc = newIndItems.findIndex(
+          (n) => n.split(".")[1] == this.dragging.f12
+        );
+        const indDst = newIndItems.findIndex(
+          (n) => n.split(".")[1] == item.f12
+        );
+        console.log(newIndItems);
+        newIndItems.splice(indDst, 0, ...newIndItems.splice(indSrc, 1));
+        console.log(newIndItems);
+        this.seciList = newIndItems;
+
+        const newIndDataItems = [...this.indFundData];
+        const indDataSrc = newIndDataItems.findIndex(
+          (n) => n.f12 == this.dragging.f12
+        );
+        const indDataDst = newIndDataItems.findIndex((n) => n.f12 == item.f12);
+        newIndDataItems.splice(
+          indDataDst,
+          0,
+          ...newIndDataItems.splice(indDataSrc, 1)
+        );
+        this.indFundData = newIndDataItems;
       }
-      const newItems = [...this.fundListM];
-      const src = newItems.findIndex((n) => n.code == this.dragging.fundcode);
-      const dst = newItems.findIndex((n) => n.code == item.fundcode);
-      // // 替换
-      newItems.splice(dst, 0, ...newItems.splice(src, 1));
-      // // 让item的颜色等于新交换的颜色
-      this.fundListM = newItems;
-
-      //数据列表也同步更新
-      const newDataItems = [...this.dataList];
-      const dataSrc = newDataItems.findIndex(
-        (n) => n.fundcode == this.dragging.fundcode
-      );
-      const dataDst = newDataItems.findIndex(
-        (n) => n.fundcode == item.fundcode
-      );
-      newDataItems.splice(dataDst, 0, ...newDataItems.splice(dataSrc, 1));
-      this.dataList = newDataItems;
     },
   },
 };
@@ -610,7 +816,7 @@ export default {
   min-width: 400px;
   min-height: 150px;
   overflow-y: auto;
-  padding: 8px 2px;
+  padding: 10px 7px;
   font-size: 12px;
   font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC",
     "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei",
@@ -618,7 +824,7 @@ export default {
 }
 
 .more-height {
-  height: 405px;
+  height: 415px;
 }
 
 .more-width {
@@ -681,7 +887,7 @@ tbody tr:hover {
   border-radius: 3px;
   font-size: 12px;
   color: #000000;
-  margin: 0 5px;
+  margin: 0 3px;
   outline: none;
   border: 1px solid #dcdfe6;
 }
@@ -721,18 +927,28 @@ tbody tr:hover {
 }
 
 .tab-col {
-  float: left;
-  width: 25%;
+  flex: 1;
+  margin: 0 4px;
   text-align: center;
-}
-
-.tab-col h5 {
-  margin: 4px 0;
-  font-size: 12px;
-}
-
-.tab-col p {
-  margin: 4px 0;
+  h5 {
+    margin: 4px 0;
+    font-size: 12px;
+    .dltBtn {
+      margin-left: 3px;
+    }
+  }
+  p {
+    margin: 4px 0;
+  }
+  .addSeci {
+    margin: 10px auto;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    line-height: 40px;
+    border: 1px solid #dcdfe6;
+    border-radius: 50%;
+  }
 }
 
 .tab-row:after,
@@ -747,6 +963,8 @@ tbody tr:hover {
 
 .tab-row {
   padding: 6px 0;
+  display: flex;
+  margin: 0 -3px;
 }
 
 .primary {
@@ -824,4 +1042,106 @@ tbody tr:hover {
 .pointer {
   cursor: pointer;
 }
+
+//暗黑主题
+.container.darkMode {
+  color: rgba($color: #ffffff, $alpha: 0.6);
+  background-color: #121212;
+  .btn {
+    background-color: rgba($color: #ffffff, $alpha: 0.16);
+    color: rgba($color: #ffffff, $alpha: 0.6);
+    border: 1px solid rgba($color: #ffffff, $alpha: 0.6);
+  }
+  .primary {
+    border: 1px solid rgba($color: #409eff, $alpha: 0.6);
+    background-color: rgba($color: #409eff, $alpha: 0.6);
+  }
+  /deep/ .el-input__inner {
+    background-color: rgba($color: #ffffff, $alpha: 0.16);
+    color: rgba($color: #ffffff, $alpha: 0.6);
+  }
+  /deep/ .el-select__input {
+    color: rgba($color: #ffffff, $alpha: 0.6);
+  }
+
+  /deep/ tbody tr:hover {
+    background-color: rgba($color: #ffffff, $alpha: 0.08);
+  }
+
+  .slt {
+    border: 1px solid rgba($color: #67c23a, $alpha: 0.6);
+    background-color: rgba($color: #67c23a, $alpha: 0.6);
+  }
+
+  .btn.red {
+    border: 1px solid rgba($color: #f56c6c, $alpha: 0.6);
+    background-color: rgba($color: #f56c6c, $alpha: 0.6);
+  }
+
+  .btn-up {
+    border: 1px solid rgba($color: #f56c6c, $alpha: 0.6);
+    background-color: rgba($color: #f56c6c, $alpha: 0.6);
+  }
+
+  .btn-down {
+    border: 1px solid rgba($color: #4eb61b, $alpha: 0.6);
+    background-color: rgba($color: #4eb61b, $alpha: 0.6);
+  }
+
+  .tab-col {
+    background-color: rgba($color: #ffffff, $alpha: 0.09);
+    border-radius: 5px;
+  }
+
+  table {
+    background-color: rgba($color: #ffffff, $alpha: 0.12);
+    border-radius: 5px;
+  }
+
+  ::placeholder {
+    color: rgba($color: #ffffff, $alpha: 0.38);
+  }
+
+  /deep/ .el-select .el-input.is-focus .el-input__inner {
+    border-color: rgba($color: #409eff, $alpha: 0.6);
+  }
+
+  /deep/ .el-select .el-tag {
+    background-color: rgba($color: #ffffff, $alpha: 0.14);
+    color: rgba($color: #ffffff, $alpha: 0.6);
+  }
+
+  /deep/ .el-select-dropdown {
+    background-color: #383838;
+    border: 1px solid rgba($color: #ffffff, $alpha: 0.38);
+    .popper__arrow::after {
+      border-bottom-color: #383838;
+    }
+    .el-scrollbar {
+      background-color: rgba($color: #ffffff, $alpha: 0.16);
+    }
+    .el-select-dropdown__item {
+      color: rgba($color: #ffffff, $alpha: 0.6);
+    }
+
+    .el-select-dropdown__item.hover,
+    .el-select-dropdown__item:hover {
+      background-color: rgba($color: #ffffff, $alpha: 0.08);
+    }
+    .el-select-dropdown__item.selected {
+      color: rgba($color: #409eff, $alpha: 0.6);
+      background-color: rgba($color: #ffffff, $alpha: 0.08);
+    }
+    .el-select-dropdown__item.selected::after {
+      color: rgba($color: #409eff, $alpha: 0.6);
+    }
+  }
+
+  /deep/ .el-switch__label.is-active {
+    color: rgba($color: #409eff, $alpha: 0.87);
+  }
+  /deep/ .el-switch__label {
+    color: rgba($color: #ffffff, $alpha: 0.6);
+  }
+}
 </style>
diff --git a/src/popup/popup.html b/src/popup/popup.html
index 447628f..48cf321 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -8,7 +8,7 @@
   <!-- Load some resources only in development environment -->
   <% } %>
 </head>
-<body>
+<body style="margin:0">
   <div id="app">
 
   </div>
diff --git a/src/popup/popup.js b/src/popup/popup.js
index 076da42..2396511 100644
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -3,13 +3,15 @@ import App from "./App";
 import axios from "axios";
 import {
   Select,
-  Option
+  Option,
+  Switch
 } from 'element-ui';
 
 Vue.prototype.$axios = axios;
 
 Vue.use(Select)
 Vue.use(Option)
+Vue.use(Switch)
 
 /* eslint-disable no-new */
 new Vue({