添加编辑源页面

src/App.vue

@@ -15,6 +15,9 @@
     <transition name="slide">
       <Share v-if="share.show"/>
     </transition>
+    <transition name="slide">
+      <EditSites v-if="editSites.show"/>
+    </transition>
   </div>
 </template>
 
@@ -38,6 +41,9 @@ export default {
     },
     setting () {
       return this.$store.getters.getSetting
+    },
+    editSites () {
+      return this.$store.getters.getEditSites
     }
   },
   watch: {

src/components/EditSites.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="detail">
+    <div class="detail-content">
+      <div class="detail-header">
+        <span class="detail-title">源管理</span>
+        <span class="detail-close zy-svg" @click="close">
+          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
+            <title id="closeIconTitle">关闭</title>
+            <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
+          </svg>
+        </span>
+      </div>
+      <div class="body zy-scroll">
+        <div class="zy-table">
+          <div class="tBody zy-scroll">
+            <ul>
+              <li v-show="sites.length === 0">无数据</li>
+              <li v-for="(i, j) in sites" :key="j">
+                <span class="name">{{i.name}}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import { sites } from '../lib/dexie'
+export default {
+  name: 'editSites',
+  data () {
+    this.$message.success('In editSites data')
+    return {
+      show: false,
+      sites: []
+    }
+  },
+  computed: {
+    view: {
+      get () {
+        return this.$store.getters.getView
+      },
+      set (val) {
+        this.SET_VIEW(val)
+      }
+    },
+    editSites: {
+      get () {
+        return this.$store.getters.getEditSites
+      },
+      set (val) {
+        this.SET_EDITSITES(val)
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW', 'SET_EDITSITES']),
+    close () {
+      this.editSites.show = false
+    },
+    getSites () {
+      sites.all().then(res => {
+        this.sites = res
+      })
+    }
+  },
+  created () {
+    this.getSites()
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.detail{
+  position: absolute;
+  left: 80px;
+  right: 20px;
+  bottom: 0;
+  width: calc(100% - 100px);
+  height: calc(100% - 40px);
+  z-index: 888;
+  .detail-content{
+    height: calc(100% - 10px);
+    padding: 0 60px;
+    position: relative;
+    .detail-header{
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .detail-title{
+        font-size: 16px;
+      }
+      .detail-close{
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/components/Setting.vue

@@ -89,6 +89,9 @@
           <div class="zy-select">
             <div class="vs-placeholder vs-noAfter" @click="importSites">导入</div>
           </div>
+          <div class="zy-select">
+            <div class="vs-placeholder vs-noAfter" @click="editSitesEvent">编辑源</div>
+          </div>
           <div class="zy-select">
             <div class="vs-placeholder vs-noAfter" @click="resetSites">重置源</div>
           </div>
@@ -194,10 +197,18 @@ export default {
       set (val) {
         this.SET_SETTING(val)
       }
+    },
+    editSites: {
+      get () {
+        return this.$store.getters.getEditSites
+      },
+      set (val) {
+        this.SET_EDITSITES(val)
+      }
     }
   },
   methods: {
-    ...mapMutations(['SET_SETTING']),
+    ...mapMutations(['SET_SETTING', 'SET_EDITSITES']),
     linkOpen (e) {
       shell.openExternal(e)
     },
@@ -411,6 +422,12 @@ export default {
         }
       })
     },
+    editSitesEvent () {
+      this.editSites = {
+        show: true,
+        sites: this.sitesList
+      }
+    },
     resetSites () {
       sites.clear()
       sites.add(defaultSites).then(e => {

src/components/register.js

@@ -8,6 +8,7 @@ import Setting from './Setting'
 import Detail from './Detail'
 import Share from './Share'
 import History from './History'
+import EditSites from './EditSites'
 
 export default {
   registerComponents () {
@@ -19,6 +20,7 @@ export default {
     Vue.component('Setting', Setting)
     Vue.component('Detail', Detail)
     Vue.component('Share', Share)
-    Vue.component('History', History)
+    Vue.component('History', History),
+    Vue.component('EditSites', EditSites)
   }
 }

src/store/index.js

@@ -25,6 +25,10 @@ export default new Vuex.Store({
     video: {
       key: '',
       info: {}
+    },
+    editSites: {
+      show: false,
+      sites: []
     }
   },
   getters: {
@@ -42,6 +46,9 @@ export default new Vuex.Store({
     },
     getVideo: state => {
       return state.video
+    },
+    getEditSites: state => {
+      return state.editSites
     }
   },
   mutations: {
@@ -59,6 +66,9 @@ export default new Vuex.Store({
     },
     SET_VIDEO: (state, payload) => {
       state.video = payload
+    },
+    SET_EDITSITES: (state, payload) => {
+      state.editSites = payload
     }
   }
 })