2.4.0

添加搜索所有资源功能

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zy",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/assets/scss/style.scss

@@ -78,16 +78,45 @@
     }
   }
 }
-
+.zy-checkbox{
+  position: relative;
+  display: flex;
+  width: 200px;
+  height: 30px;
+  vertical-align: middle;
+  align-items: center;
+  .search-all-check-input{
+    cursor: pointer;
+  }
+}
+.zy-highlighted{
+  color: var(--highlight-color);
+}
 // table
 .zy-table{
   display: flex;
   flex-direction: column;
   height: 100%;
   font-size: 15px;
+  .tHeader{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 50px;
+    min-height: 50px;
+    width: 100%;
+    border-bottom: 1px solid;
+    .btn{
+      user-select: none;
+      margin-right: 15px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+  }
   .tBody{
     flex: 1;
     border-bottom: 1px solid;
+    overflow: auto;
     ul{
       list-style: none;
       padding: 0;
@@ -102,41 +131,42 @@
         cursor: pointer;
         span{
           display: flex;
-          width: 180px;
           font-size: 13px;
           height: 50px;
           line-height: 50px;
+          overflow: hidden;
+          margin-right: 5px;
           &.name{
             flex: 1;
-            padding-left: 15px;
-            overflow: hidden;
-            text-overflow: ellipsis;
+            min-width: 100px;
             white-space: nowrap;
-          }
-          &.note{
-            width: 180px;
+            margin-left: 10px;
           }
           &.type{
-            width: 120px;
-          }
-          &.last{
-            width: 160px;
+            width: 10%;
           }
           &.time{
-            width: 60px;
+            width: 10%;
           }
-          &.from{
-            width: 120px;
+          &.last{
+            width: 10%;
+          }
+          &.site{
+            width: 10%;
+          }
+          &.note{
+            width: 10%;
           }
           &.operate{
-            width: 170px;
+            .btn{
+              width: 40px;
+            }
           }
         }
       }
     }
   }
 }
-
 // scroll
 .zy-scroll{
   &::-webkit-scrollbar{
@@ -152,7 +182,6 @@
     position: absolute;
   }
 }
-
 // loading
 .zy-loading{
   width: 100%;

src/assets/scss/theme.scss

@@ -1,4 +1,6 @@
 :root{
+  // general
+  --highlight-color: #38dd77;
   // light
   --l-c-0: #823aa0;
   --l-c-1: #823aa011;

src/assets/scss/theme/dark.scss

@@ -32,8 +32,20 @@
       }
     }
   }
+  .zy-checkbox{
+    color: var(--d-fc-1);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+  }
   .zy-table{
     color: var(--d-fc-2);
+    .tHeader{
+      border-bottom-color: var(--d-c-3);
+      .btn{
+        &:hover{
+          color: var(--d-fc-3)
+        }
+      }
+    }
     .tBody{
       border-bottom-color: var(--d-c-3);
       ul{
@@ -199,6 +211,7 @@
           }
           &.last-tip {
             color: var(--d-fc-1);
+            font-size: 14px;
           }
         }
       }
@@ -229,6 +242,9 @@
               background-color: var(--d-c-2);
               color: var(--d-fc-3);
             }
+            &:hover{
+              background-color: var(--d-c-3);
+            }
           }
         }
         .list-history{
@@ -274,7 +290,7 @@
         }
       }
     }
-    .view, .shortcut, .site{
+    .view, .search, .shortcut, .site{
       .title{
         color: var(--d-fc-1);
       }
@@ -324,4 +340,8 @@
       background-color: var(--d-bgc-1);
     }
   }
+  .history{
+    background-color: var(--d-bgc-1);
+    box-shadow: var(--d-bsc);
+  }
 }

src/assets/scss/theme/green.scss

@@ -32,8 +32,19 @@
       }
     }
   }
+  .zy-checkbox{
+    color: var(--g-fc-1);
+  }
   .zy-table{
     color: var(--g-fc-2);
+    .tHeader{
+      border-bottom-color: var(--g-c-3);
+      .btn{
+        &:hover{
+          color: var(--g-fc-3)
+        }
+      }
+    }
     .tBody{
       border-bottom-color: var(--g-c-3);
       ul{
@@ -199,6 +210,7 @@
           }
           &.last-tip {
             color: var(--g-fc-1);
+            font-size: 14px;
           }
         }
       }
@@ -229,6 +241,9 @@
               background-color: var(--g-c-2);
               color: var(--g-fc-3);
             }
+            &:hover{
+              background-color: var(--d-c-3);
+            }
           }
         }
         .list-history{
@@ -274,7 +289,7 @@
         }
       }
     }
-    .view, .shortcut, .site{
+    .view, .search, .shortcut, .site{
       .title{
         color: var(--g-fc-1);
       }
@@ -324,4 +339,8 @@
       background-color: var(--g-bgc-1);
     }
   }
+  .history{
+    background-color: var(--g-bgc-1);
+    box-shadow: var(--g-bsc);
+  }
 }

src/assets/scss/theme/light.scss

@@ -32,8 +32,19 @@
       }
     }
   }
+  .zy-checkbox{
+    color: var(--l-fc-1);
+  }
   .zy-table{
     color: var(--l-fc-2);
+    .tHeader{
+      border-bottom-color: var(--l-c-3);
+      .btn{
+        &:hover{
+          color: var(--l-fc-3)
+        }
+      }
+    }
     .tBody{
       border-bottom-color: var(--l-c-3);
       ul{
@@ -199,6 +210,7 @@
           }
           &.last-tip {
             color: var(--l-fc-1);
+            font-size: 14px;
           }
         }
       }
@@ -229,6 +241,9 @@
               background-color: var(--l-c-2);
               color: var(--l-fc-3);
             }
+            &:hover{
+              background-color: var(--d-c-3);
+            }
           }
         }
         .list-history{
@@ -274,7 +289,7 @@
         }
       }
     }
-    .view, .shortcut, .site{
+    .view, .search, .shortcut, .site{
       .title{
         color: var(--l-fc-1);
       }
@@ -324,4 +339,8 @@
       background-color: var(--l-bgc-1);
     }
   }
+  .history{
+    background-color: var(--l-bgc-1);
+    box-shadow: var(--l-bsc);
+  }
 }

src/assets/scss/theme/pink.scss

@@ -32,8 +32,19 @@
       }
     }
   }
+  .zy-checkbox{
+    color: var(--p-fc-1);
+  }
   .zy-table{
     color: var(--p-fc-2);
+    .tHeader{
+      border-bottom-color: var(--p-c-3);
+      .btn{
+        &:hover{
+          color: var(--p-fc-3)
+        }
+      }
+    }
     .tBody{
       border-bottom-color: var(--p-c-3);
       ul{
@@ -199,6 +210,7 @@
           }
           &.last-tip {
             color: var(--p-fc-1);
+            font-size: 14px;
           }
         }
       }
@@ -229,6 +241,9 @@
               background-color: var(--p-c-2);
               color: var(--p-fc-3);
             }
+            &:hover{
+              background-color: var(--d-c-3);
+            }
           }
         }
         .list-history{
@@ -274,7 +289,7 @@
         }
       }
     }
-    .view, .shortcut, .site{
+    .view, .search, .shortcut, .site{
       .title{
         color: var(--p-fc-1);
       }
@@ -324,4 +339,8 @@
       background-color: var(--p-bgc-1);
     }
   }
+  .history{
+    background-color: var(--p-bgc-1);
+    box-shadow: var(--p-bsc);
+  }
 }

src/components/Detail.vue

@@ -121,9 +121,9 @@ export default {
     playEvent (n) {
       history.find({ site: this.detail.key, ids: this.detail.info.id }).then(res => {
         if (res) {
-          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: n } }
+          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: n, site: this.detail.site } }
         } else {
-          this.video = { key: this.detail.key, info: { id: this.detail.info.id, name: this.detail.info.name, index: n } }
+          this.video = { key: this.detail.key, info: { id: this.detail.info.id, name: this.detail.info.name, index: n, site: this.detail.site } }
         }
       })
 
@@ -131,17 +131,19 @@ export default {
       this.detail.show = false
     },
     starEvent () {
-      star.find({ site: this.detail.key, ids: this.info.id }).then(res => {
+      star.find({ key: this.detail.key, ids: this.info.id }).then(res => {
         if (res) {
           this.$message.info('已存在')
         } else {
           const docs = {
-            site: this.detail.key,
+            key: this.detail.site.key,
+            site: this.detail.site,
             ids: this.info.id,
             name: this.info.name,
             type: this.info.type,
             year: this.info.year,
-            last: this.info.last
+            last: this.info.last,
+            note: this.info.note
           }
           star.add(docs).then(res => {
             this.$message.success('收藏成功')

src/components/Film.vue

@@ -9,7 +9,7 @@
           </ul>
         </div>
       </div>
-      <div class="zy-select" @mouseleave="show.classList = false" v-if="show.class">
+      <div class="zy-select" @mouseleave="show.classList = false" v-show="show.class">
         <div class="vs-placeholder" @click="show.classList = true">{{type.name}}</div>
         <div class="vs-options" v-show="show.classList">
           <ul class="zy-scroll" style="max-height: 600px;">
@@ -18,10 +18,10 @@
         </div>
       </div>
       <div class="zy-select" @mouseleave="show.search = false">
-        <div class="vs-input" @click="show.search = true"><input v-model.trim="searchTxt" type="text" placeholder="搜索" @keyup.enter="searchEvent"></div>
+        <div class="vs-input" @click="show.search = true"><input v-model.trim="searchTxt" type="text" placeholder="搜索" @keyup.enter="searchEvent(searchTxt)"></div>
         <div class="vs-options" v-show="show.search">
           <ul class="zy-scroll" style="max-height: 600px">
-            <li v-for="(i, j) in searchList" :key="j" @click="searchClickEvent(i)">{{i.keywords}}</li>
+            <li v-for="(i, j) in searchList" :key="j" @click="searchEvent(i.keywords)">{{i.keywords}}</li>
             <li v-show="searchList.length >= 1" @click="clearSearch">清空历史记录</li>
           </ul>
         </div>
@@ -37,16 +37,16 @@
             <template slot="item" slot-scope="props">
               <div class="card">
                 <div class="img">
-                  <img style="width: 100%" :src="props.data.pic" alt="" @load="$refs.waterfall.refresh()" @click="detailEvent(props.data)">
+                  <img style="width: 100%" :src="props.data.pic" alt="" @load="$refs.waterfall.refresh()" @click="detailEvent(site, props.data)">
                   <div class="operate">
                     <div class="operate-wrap">
-                      <span class="o-play" @click="playEvent(props.data)">播放</span>
-                      <span class="o-star" @click="starEvent(props.data)">收藏</span>
-                      <span class="o-share" @click="shareEvent(props.data)">分享</span>
+                      <span class="o-play" @click="playEvent(site, props.data)">播放</span>
+                      <span class="o-star" @click="starEvent(site, props.data)">收藏</span>
+                      <span class="o-share" @click="shareEvent(site, props.data)">分享</span>
                     </div>
                   </div>
                 </div>
-                <div class="name" @click="detailEvent(props.data)">{{props.data.name}}</div>
+                <div class="name" @click="detailEvent(site, props.data)">{{props.data.name}}</div>
                 <div class="info">
                   <span>{{props.data.year}}</span>
                   <span>{{props.data.type}}</span>
@@ -60,16 +60,16 @@
           <div class="zy-table">
             <div class="tBody">
               <ul>
-                <li v-for="(i, j) in list" :key="j" @click="detailEvent(i)">
+                <li v-for="(i, j) in list" :key="j" @click="detailEvent(site, i)">
                   <span class="name">{{i.name}}</span>
                   <span class="type">{{i.type}}</span>
                   <span class="time">{{i.year}}</span>
                   <span class="last">{{i.last}}</span>
                   <span class="operate">
-                    <span class="btn" @click.stop="playEvent(i)">播放</span>
-                    <span class="btn" @click.stop="starEvent(i)">收藏</span>
-                    <span class="btn" @click.stop="shareEvent(i)">分享</span>
-                    <span class="btn" @click.stop="downloadEvent(i)">下载</span>
+                    <span class="btn" @click.stop="playEvent(site, i)">播放</span>
+                    <span class="btn" @click.stop="starEvent(site, i)">收藏</span>
+                    <span class="btn" @click.stop="shareEvent(site, i)">分享</span>
+                    <span class="btn" @click.stop="downloadEvent(site, i)">下载</span>
                   </span>
                 </li>
               </ul>
@@ -81,18 +81,19 @@
       <div class="body-box" v-show="show.find">
         <div class="show-table">
           <div class="zy-table">
-            <div class="tBody">
+            <div class="tBody zy-scroll">
               <ul>
-                <li v-for="(i, j) in searchContents" :key="j" @click="detailEvent(i)">
+                <li v-for="(i, j) in searchContents" :key="j" @click="detailEvent(i.site, i)">
                   <span class="name">{{i.name}}</span>
                   <span class="type">{{i.type}}</span>
-                  <span class="time">{{i.year}}</span>
                   <span class="last">{{i.last}}</span>
+                  <span class="site">{{i.site.name}}</span>
+                  <span class="note">{{i.note}}</span>
                   <span class="operate">
-                    <span class="btn" @click.stop="playEvent(i)">播放</span>
-                    <span class="btn" @click.stop="starEvent(i)">收藏</span>
-                    <span class="btn" @click.stop="shareEvent(i)">分享</span>
-                    <span class="btn" @click.stop="downloadEvent(i)">下载</span>
+                    <span class="btn" @click.stop="playEvent(i.site, i)">播放</span>
+                    <span class="btn" @click.stop="starEvent(i.site, i)">收藏</span>
+                    <span class="btn" @click.stop="shareEvent(i.site, i)">分享</span>
+                    <span class="btn" @click.stop="downloadEvent(i.site, i)">下载</span>
                   </span>
                 </li>
               </ul>
@@ -199,7 +200,7 @@ export default {
       this.show.site = false
       this.show.class = false
       if (this.searchTxt.length > 0) {
-        this.searchEvent()
+        this.searchSingleSiteEvent(this.site, this.searchTxt)
       } else {
         this.classList = []
         this.type = {}
@@ -275,35 +276,38 @@ export default {
         }
       })
     },
-    detailEvent (e) {
+    detailEvent (site, e) {
       this.detail = {
         show: true,
-        key: this.site.key,
+        key: site.key,
+        site: site,
         info: e
       }
     },
-    playEvent (e) {
-      history.find({ site: this.site.key, ids: e.id }).then(res => {
+    playEvent (site, e) {
+      history.find({ site: site.key, ids: e.id }).then(res => {
         if (res) {
-          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: res.index } }
+          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: res.index, site: site } }
         } else {
-          this.video = { key: this.site.key, info: { id: e.id, name: e.name, index: 0 } }
+          this.video = { key: site.key, info: { id: e.id, name: e.name, index: 0, site: site } }
         }
       })
       this.view = 'Play'
     },
-    starEvent (e) {
-      star.find({ site: this.site.key, ids: e.id }).then(res => {
+    starEvent (site, e) {
+      star.find({ key: site.key, ids: e.id }).then(res => {
         if (res) {
           this.$message.info('已存在')
         } else {
           const docs = {
-            site: this.site.key,
+            key: site.key,
+            site: site,
             ids: e.id,
             name: e.name,
             type: e.type,
             year: e.year,
-            last: e.last
+            last: e.last,
+            note: e.note
           }
           star.add(docs).then(res => {
             this.$message.success('收藏成功')
@@ -313,15 +317,15 @@ export default {
         this.$message.warning('收藏失败')
       })
     },
-    shareEvent (e) {
+    shareEvent (site, e) {
       this.share = {
         show: true,
-        key: this.site.key,
+        key: site.key,
         info: e
       }
     },
-    downloadEvent (e) {
-      zy.download(this.site.key, e.id).then(res => {
+    downloadEvent (site, e) {
+      zy.download(site.key, e.id).then(res => {
         if (res.length > 0) {
           const text = res.dl.dd._t
           if (text) {
@@ -338,7 +342,7 @@ export default {
           }
         } else {
           let m3u8List = []
-          const dd = e.dl.dd
+          const dd = res.dl.dd
           const type = Object.prototype.toString.call(dd)
           if (type === '[object Array]') {
             for (const i of dd) {
@@ -376,8 +380,8 @@ export default {
         this.searchList = res.reverse()
       })
     },
-    searchEvent () {
-      const wd = this.searchTxt
+    searchAllSitesEvent (sites, wd) {
+      this.searchTxt = wd
       this.searchContents = []
       this.pagecount = 0
       this.show.search = false
@@ -389,18 +393,24 @@ export default {
           }
           this.getAllSearch()
         })
-        zy.search(this.site.key, wd).then(res => {
-          const type = Object.prototype.toString.call(res)
-          if (type === '[object Undefined]') {
-            this.$message.info('无搜索结果')
-          }
-          if (type === '[object Array]') {
-            this.searchContents.push(...res)
-          }
-          if (type === '[object Object]') {
-            this.searchContents.push(res)
-          }
-        })
+        sites.forEach(site =>
+          zy.search(site.key, wd).then(res => {
+            const type = Object.prototype.toString.call(res)
+            if (type === '[object Undefined]') {
+              this.$message.info(site.name + ' 无搜索结果')
+            }
+            if (type === '[object Array]') {
+              res.forEach(element => {
+                element.site = site
+                this.searchContents.push(element)
+              })
+            }
+            if (type === '[object Object]') {
+              res.site = site
+              this.searchContents.push(res)
+            }
+          })
+        )
       } else {
         this.show.find = false
         this.getClass().then(res => {
@@ -410,28 +420,17 @@ export default {
         })
       }
     },
-    searchClickEvent (e) {
-      this.searchContents = []
-      this.pagecount = 0
-      this.searchTxt = e.keywords
-      this.show.search = false
-      this.show.find = true
-      search.remove(e.id).then(res => {
-        search.add({ keywords: e.keywords })
-        this.getAllSearch()
-      })
-      zy.search(this.site.key, e.keywords).then(res => {
-        const type = Object.prototype.toString.call(res)
-        if (type === '[object Undefined]') {
-          this.$message.info('无搜索结果')
-        }
-        if (type === '[object Array]') {
-          this.searchContents.push(...res)
-        }
-        if (type === '[object Object]') {
-          this.searchContents.push(res)
-        }
-      })
+    searchEvent (wd) {
+      if (this.setting.searchAllSites) {
+        this.searchAllSitesEvent(this.sites, wd)
+      } else {
+        this.searchSingleSiteEvent(this.site, wd)
+      }
+    },
+    searchSingleSiteEvent (site, wd) {
+      var sites = []
+      sites.push(this.site)
+      this.searchAllSitesEvent(sites, wd)
     },
     clearSearch () {
       search.clear().then(res => {

src/components/History.vue

@@ -2,15 +2,17 @@
   <div class="history">
     <div class="body zy-scroll">
       <div class="zy-table">
-        <div class="tBody">
+        <div class="tHeader">
+          <span class="btn" @click="clearAllHistory">清空</span>
+        </div>
+        <div class="tBody zy-scroll">
           <ul>
-            <li v-show="this.history.length >= 1" @click="clearAllHistory">清空</li>
             <li v-show="this.history.length === 0">无数据</li>
             <li v-for="(i, j) in history" :key="j" @click="historyItemEvent(i)">
-              <span class="name">{{i.name}}</span>
-              <span class="site">{{i.site}}</span>
-              <span class="index">第{{i.index+1}}集</span>
-              <span class="operate" style="width: 220px">
+              <span class="name" @click.stop="playEvent(i)">{{i.name}}</span>
+              <span class="site">{{getSiteName(i.site)}}</span>
+              <span class="note">第{{i.index+1}}集</span>
+              <span class="operate">
                 <span class="btn" @click.stop="playEvent(i)">播放</span>
                 <span class="btn" @click.stop="downloadEvent(i)">下载</span>
                 <span class="btn" @click.stop="removeHistoryItem(i)">删除</span>
@@ -24,14 +26,15 @@
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import { history } from '../lib/dexie'
+import { history, sites } from '../lib/dexie'
 import zy from '../lib/site/tools'
 const { clipboard } = require('electron')
 export default {
   name: 'history',
   data () {
     return {
-      history: history
+      history: history,
+      sites: []
     }
   },
   computed: {
@@ -71,6 +74,7 @@ export default {
   watch: {
     view () {
       this.getAllhistory()
+      this.getAllsites()
     }
   },
   methods: {
@@ -133,6 +137,17 @@ export default {
         this.history = res.reverse()
       })
     },
+    getAllsites () {
+      sites.all().then(res => {
+        this.sites = res
+      })
+    },
+    getSiteName (key) {
+      var site = this.sites.find(e => e.key === key)
+      if (site) {
+        return site.name
+      }
+    },
     historyItemEvent (e) {
       this.video = {
         key: e.site,
@@ -171,7 +186,6 @@ export default {
   .body{
     width: 100%;
     height: 100%;
-    overflow: auto;
   }
 }
 </style>

src/components/Play.vue

@@ -461,20 +461,19 @@ export default {
     },
     starEvent () {
       const info = this.video.info
-      star.find({ site: this.video.key, ids: info.id }).then(res => {
+      star.find({ key: this.video.key, ids: info.id }).then(res => {
         if (res) {
-          star.remove(res.id).then(e => {
-            this.$message.info('取消收藏')
-            this.isStar = false
-          })
+          this.$message.info('已存在')
         } else {
           const docs = {
-            site: this.video.key,
+            key: this.video.key,
+            site: this.video.site,
             ids: info.id,
             name: info.name,
             type: info.type,
             year: info.year,
-            last: info.last
+            last: info.last,
+            note: info.note
           }
           star.add(docs).then(res => {
             this.$message.success('收藏成功')
@@ -577,17 +576,17 @@ export default {
       }
       let m3u8Content = '#EXTM3U'
       for (const item of m3u8Arr) {
-        m3u8Content += `#EXTINF:-1, ${item.name}${item.link}`
+        m3u8Content += `#EXTINF:-1, ${item.name}\n${item.link}`
       }
       const blob = new Blob([m3u8Content], { type: 'application/vnd.apple.mpegurl' })
-      const downloadElement = document.createElement('a') // 创建下载的链接
+      const downloadElement = document.createElement('a')
       const href = window.URL.createObjectURL(blob)
       downloadElement.href = href
-      downloadElement.download = `${this.name}.m3u8` // 下载后的文件名
+      downloadElement.download = `${this.name}.m3u8`
       document.body.appendChild(downloadElement)
-      downloadElement.click() // 下载
-      document.body.removeChild(downloadElement) // 下载完成 移除 a
-      window.URL.revokeObjectURL(href) // 释放blob对象
+      downloadElement.click()
+      document.body.removeChild(downloadElement)
+      window.URL.revokeObjectURL(href)
     },
     clearAllHistory () {
       history.clear().then(res => {

src/components/Setting.vue

@@ -44,6 +44,12 @@
           </div>
         </div>
       </div>
+      <div class='search'>
+         <div class="title">搜索</div>
+         <div class="zy-checkbox">
+           <input type="checkbox" v-model="setting.searchAllSites" @change="updateSearchOption($event)"> 搜索所有资源
+         </div>
+      </div>
       <div class="site">
         <div class="title">源管理</div>
         <div class="site-box">
@@ -135,6 +141,7 @@ export default {
         site: '',
         theme: '',
         shortcut: true,
+        searchAllSites: true,
         view: 'picture'
       }
     }
@@ -161,7 +168,8 @@ export default {
           site: res.site,
           theme: res.theme,
           shortcut: res.shortcut,
-          view: res.view
+          view: res.view,
+          searchAllSites: res.searchAllSites
         }
         this.setting = this.d
       })
@@ -192,6 +200,12 @@ export default {
         this.show.site = false
       })
     },
+    updateSearchOption (e) {
+      this.d.searchAllSites = this.setting.searchAllSites
+      setting.update(this.d).then(res => {
+        this.setting = this.d
+      })
+    },
     expSites () {
       const arr = [...this.sitesList]
       const str = JSON.stringify(arr)
@@ -313,6 +327,11 @@ export default {
       }
     }
   }
+  .search{
+    width: 100%;
+    padding: 20px;
+    margin-top: 20px;
+  }
   .site{
     width: 100%;
     padding: 20px;
@@ -341,6 +360,7 @@ export default {
     margin-top: 20px;
     .theme-box{
       display: flex;
+      flex-wrap: wrap;
       justify-content: flex-start;
       margin-top: 10px;
       .theme-item{

src/components/Star.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="star">
-    <div class="body zy-scroll">
+    <div class="body">
       <div class="zy-table">
-        <div class="tBody">
+        <div class="tHeader">
+          <span class="btn" @click="updateAllEvent(list)">同步所有收藏</span>
+        </div>
+        <div class="tBody zy-scroll">
           <ul>
-            <li v-for="(i, j) in list" :key="j" @click="detailEvent(i)">
+            <li v-for="(i, j) in list" :key="j" @click="detailEvent(i)" :class="[i.hasUpdate ? 'zy-highlighted': '']">
               <span class="name">{{i.name}}</span>
               <span class="type">{{i.type}}</span>
               <span class="time">{{i.year}}</span>
-              <span class="from">{{i.site}}</span>
-              <span class="operate" style="width: 220px">
+              <span class="site">{{i.site.name}}</span>
+              <span class="note">{{i.note}}</span>
+              <span class="operate">
                 <span class="btn" @click.stop="playEvent(i)">播放</span>
                 <span class="btn" @click.stop="deleteEvent(i)">删除</span>
                 <span class="btn" @click.stop="shareEvent(i)">分享</span>
@@ -79,21 +83,23 @@ export default {
     detailEvent (e) {
       this.detail = {
         show: true,
-        key: e.site,
+        key: e.site.key,
         info: {
           id: e.ids,
           name: e.name
         }
       }
+      this.clearHasUpdateFlag(e)
     },
     playEvent (e) {
-      history.find({ site: e.site, ids: e.ids }).then(res => {
+      history.find({ site: e.site.key, ids: e.ids }).then(res => {
         if (res) {
-          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: res.index } }
+          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: res.index, site: e.site } }
         } else {
-          this.video = { key: e.site, info: { id: e.ids, name: e.name, index: 0 } }
+          this.video = { key: e.site.key, info: { id: e.ids, name: e.name, index: 0, site: e.site } }
         }
       })
+      this.clearHasUpdateFlag(e)
       this.view = 'Play'
     },
     deleteEvent (e) {
@@ -109,14 +115,22 @@ export default {
     shareEvent (e) {
       this.share = {
         show: true,
-        key: e.site,
+        key: e.site.key,
         info: e
       }
     },
+    clearHasUpdateFlag (e) {
+      star.find({ id: e.id }).then(res => {
+        res.hasUpdate = false
+        star.update(e.id, res)
+        this.getStarList()
+      })
+    },
     updateEvent (e) {
-      zy.detail(e.site, e.ids).then(res => {
+      zy.detail(e.site.key, e.ids).then(res => {
         if (e.last === res.last) {
-          this.$message.info('同步成功, 未查询到更新。')
+          var msg = `同步"${e.name}"成功, 未查询到更新。`
+          this.$message.info(msg)
         } else {
           const doc = {
             id: e.id,
@@ -125,18 +139,28 @@ export default {
             name: res.name,
             site: e.site,
             type: res.type,
-            year: res.year
+            year: res.year,
+            note: res.note,
+            hasUpdate: true
           }
           star.update(e.id, doc).then(res => {
-            this.$message.success('同步成功, 检查到更新.')
+            var msg = `同步"${e.name}"成功, 检查到更新。`
+            this.$message.success(msg)
           })
+          this.getStarList()
         }
       }).catch(err => {
-        this.$message.warning('同步失败, 请重试', err)
+        var msg = `同步"${e.name}"失败, 请重试。`
+        this.$message.warning(msg, err)
+      })
+    },
+    updateAllEvent (list) {
+      list.forEach(e => {
+        this.updateEvent(e)
       })
     },
     downloadEvent (e) {
-      zy.download(e.site, e.ids).then(res => {
+      zy.download(e.site.key, e.ids).then(res => {
         if (res) {
           const text = res.dl.dd._t
           if (text) {
@@ -186,7 +210,6 @@ export default {
   .body{
     width: 100%;
     height: 100%;
-    overflow: auto;
   }
 }
 </style>