v2.5.8

package.json

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

src/App.vue

@@ -10,6 +10,7 @@
       <History v-show="view === 'History'" />
       <Setting v-show="view === 'Setting'" />
       <EditSites v-if="view === 'EditSites'"/>
+      <Recommandation v-show="view === 'Recommandation'" />
     </div>
     <transition name="slide">
       <Detail v-if="detail.show"/>
@@ -43,6 +44,9 @@ export default {
     },
     editSites () {
       return this.$store.getters.getEditSites
+    },
+    recommandation () {
+      return this.$store.getters.recommandation
     }
   },
   watch: {

src/assets/scss/style.scss

@@ -152,7 +152,7 @@
           &.name{
             flex: 1;
             min-width: 100px;
-            white-space: nowrap;
+            overflow: hidden;
             margin-left: 10px;
           }
           &.type{

src/assets/scss/theme/dark.scss

@@ -170,7 +170,7 @@
       }
     }
   }
-  .film{
+  .pictureView{
     .body{
       background-color: var(--d-bgc-1);
       box-shadow: var(--d-bsc);
@@ -286,10 +286,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--d-bgc-1);
-    box-shadow: var(--d-bsc);
-  }
   .setting{
     background-color: var(--d-bgc-1);
     box-shadow: var(--d-bsc);

src/assets/scss/theme/green.scss

@@ -166,7 +166,7 @@
       }
     }
   }
-  .film{
+  .pictureView{
     .body{
       background-color: var(--g-bgc-1);
       box-shadow: var(--g-bsc);
@@ -282,10 +282,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--g-bgc-1);
-    box-shadow: var(--g-bsc);
-  }
   .setting{
     background-color: var(--g-bgc-1);
     box-shadow: var(--g-bsc);

src/assets/scss/theme/light.scss

@@ -166,7 +166,7 @@
       }
     }
   }
-  .film{
+  .pictureView{
     .body{
       background-color: var(--l-bgc-1);
       box-shadow: var(--l-bsc);
@@ -282,10 +282,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--l-bgc-1);
-    box-shadow: var(--l-bsc);
-  }
   .setting{
     background-color: var(--l-bgc-1);
     box-shadow: var(--l-bsc);

src/assets/scss/theme/pink.scss

@@ -165,7 +165,7 @@
       }
     }
   }
-  .film{
+  .pictureView{
     .body{
       background-color: var(--p-bgc-1);
       box-shadow: var(--p-bsc);
@@ -281,10 +281,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--p-bgc-1);
-    box-shadow: var(--p-bsc);
-  }
   .setting{
     background-color: var(--p-bgc-1);
     box-shadow: var(--p-bsc);

src/background.js

@@ -8,7 +8,7 @@ import { initUpdater } from './lib/update/update'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors') // 允许跨域
-app.commandLine.appendSwitch('--ignore-certificate-errors', 'true') // 忽略证书相关错误
+// app.commandLine.appendSwitch('--ignore-certificate-errors', 'true') // 忽略证书相关错误
 
 let win
 let mini

src/components/Aside.vue

@@ -14,6 +14,13 @@
         </g>
       </svg>
     </span>
+    <span :class="[view === 'Recommandation' ? 'active ': ''] + 'zy-svg'" @click="changeView('Recommandation')">
+      <svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="thumbUpIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6">
+      <title id="thumbUpIconTitle">影视推荐</title>
+      <path d="M8,8.73984815 C8,8.26242561 8.17078432,7.80075162 8.4814868,7.43826541 L13.2723931,1.84887469 C13.7000127,1.34998522 14.4122932,1.20614658 15,1.5 C15.5737957,1.78689785 15.849314,2.45205792 15.6464466,3.06066017 L14,8 L18.6035746,8 C18.7235578,8 18.8432976,8.01079693 18.9613454,8.03226018 C20.0480981,8.22985158 20.7689058,9.27101818 20.5713144,10.3577709 L19.2985871,17.3577709 C19.1256814,18.3087523 18.2974196,19 17.3308473,19 L10,19 C8.8954305,19 8,18.1045695 8,17 L8,8.73984815 Z"/>
+      <path d="M4,18 L4,9"/>
+      </svg>
+    </span>
     <span :class="[view === 'IPTV' ? 'active ': ''] + 'zy-svg'" @click="changeView('IPTV')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="tvIconTitle">
         <title id="tvIconTitle">电视直播</title>

src/components/Detail.vue

@@ -173,21 +173,19 @@ export default {
     },
     async starEvent () {
       const db = await star.find({ key: this.detail.key, ids: this.info.id })
+      const doc = {
+        key: this.detail.key,
+        ids: this.info.id,
+        site: this.detail.site,
+        name: this.info.name,
+        detail: this.info,
+        rate: this.info.rate
+      }
       if (db) {
-        this.$message.info('该影片已被收藏')
+        star.update(db.id, doc)
+        this.$message.success('收藏更新成功')
       } else {
-        const docs = {
-          key: this.detail.key,
-          ids: this.info.id,
-          site: this.detail.site,
-          name: this.info.name,
-          type: this.info.type,
-          year: this.info.year,
-          note: this.info.note,
-          last: this.info.last
-
-        }
-        star.add(docs).then(res => {
+        star.add(doc).then(res => {
           this.$message.success('收藏成功')
         })
       }
@@ -281,38 +279,9 @@ export default {
       })
     },
     getDoubanRate () {
-      const axios = require('axios')
-      const cheerio = require('cheerio')
       const name = this.detail.info.name.trim()
-      // 豆瓣搜索链接
-      var doubanSearchLink = 'https://www.douban.com/search?q=' + name
-      axios.get(doubanSearchLink).then(res => {
-        const $ = cheerio.load(res.data)
-        // 比较第一和第二给豆瓣搜索结果, 看名字是否相符
-        var link = ''
-        var nameInDouban = $($('div.result')[0]).find('div>div>h3>a').first()
-        if (name.replace(/\s/g, '') === nameInDouban.text().replace(/\s/g, '')) {
-          link = nameInDouban.attr('href')
-        } else {
-          nameInDouban = $($('div.result')[1]).find('div>div>h3>a').first()
-          if (name.replace(/\s/g, '') === nameInDouban.text().replace(/\s/g, '')) {
-            link = nameInDouban.attr('href')
-          }
-        }
-        // 如果找到链接，就打开该链接获取评分
-        if (link) {
-          axios.get(link).then(response => {
-            const parsedHtml = cheerio.load(response.data)
-            var rating = parsedHtml('body').find('#interest_sectl').first().find('strong').first()
-            if (rating.text()) {
-              this.info.rate = rating.text()
-            } else {
-              this.info.rate = '暂无评分'
-            }
-          })
-        } else {
-          this.info.rate = '暂无评分'
-        }
+      zy.doubanRate(name).then(res => {
+        this.info.rate = res
       })
     },
     getDetailInfo () {

src/components/EditSites.vue

@@ -54,7 +54,11 @@
               <el-button type="text">{{scope.row.group}}</el-button>
             </template>
           </el-table-column>
-          <el-table-column label="状态" width="120">
+          <el-table-column
+            label="状态"
+            sortable
+            :sort-by="['status']"
+            width="120">
             <template slot-scope="scope">
               <span v-show="scope.row.status === ''">
                 <i class="el-icon-loading"></i>
@@ -65,11 +69,12 @@
           </el-table-column>
           <el-table-column
             label="操作"
-            header-align="right"
+            header-align="center"
             align="right">
             <template slot-scope="scope">
               <el-button size="mini" @click.stop="moveToTopEvent(scope.row)" type="text">置顶</el-button>
               <el-button size="mini" @click.stop="editSite(scope.row)" type="text">编辑</el-button>
+              <el-button size="mini" @click.stop="checkSimpleSite(scope.row)" type="text">检测</el-button>
               <el-button size="mini" @click.stop="removeEvent(scope.row)" type="text">删除</el-button>
             </template>
           </el-table-column>
@@ -440,6 +445,20 @@ export default {
         this.tableKey = Math.random()
       }
       this.checkAllSiteLoading = false
+      this.updateDatabase()
+    },
+    async checkSimpleSite (row) {
+      this.checkAllSiteLoading = true
+      const flag = await zy.check(row.key)
+      if (flag) {
+        row.status = '可用'
+      } else {
+        row.status = '失效'
+        row.isActive = 0
+      }
+      this.updateDatabase()
+      this.tableKey = Math.random()
+      this.checkAllSiteLoading = false
     }
   },
   mounted () {

src/components/Film.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="film">
+  <div class="film pictureView">
     <div class="header">
       <div class="zy-select" @mouseleave="show.site = false">
         <div class="vs-placeholder" @click="show.site = true">{{site.name}}</div>
@@ -88,11 +88,7 @@
                 <li v-for="(i, j) in searchContents" :key="j" @click="detailEvent(i.site, i)">
                   <span class="name">{{i.name}}</span>
                   <span class="info">{{i.site.name}}</span>
-                  <span class="info">{{i.director}}</span>
                   <span class="info">{{i.type}}</span>
-                  <span class="info">{{i.area}}</span>
-                  <span class="info">{{i.lang}}</span>
-                  <span class="info">{{i.year}}</span>
                   <span class="info">{{i.note}}</span>
                   <span class="operate">
                     <span class="btn" @click.stop="playEvent(i.site, i)">播放</span>
@@ -331,18 +327,17 @@ export default {
       if (db) {
         this.$message.info('已存在')
       } else {
-        const docs = {
-          key: site.key,
-          ids: e.id,
-          site: site,
-          name: e.name,
-          type: e.type,
-          year: e.year,
-          last: e.last,
-          note: e.note
-        }
-        star.add(docs).then(res => {
-          this.$message.success('收藏成功')
+        zy.detail(site.key, e.id).then(detailRes => {
+          const docs = {
+            key: site.key,
+            ids: e.id,
+            site: site,
+            name: e.name,
+            detail: detailRes
+          }
+          star.add(docs).then(res => {
+            this.$message.success('收藏成功')
+          })
         })
       }
     },

src/components/Play.vue

@@ -84,6 +84,12 @@
             <rect x="17" y="6" width="1" height="1"></rect>
           </svg>
         </span>
+        <span class="zy-svg" @click="showShortcutEvent" v-show="right.list.length > 0">
+          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="sendIconTitle">
+            <title id="sendIconTitle">快捷键指南</title>
+            <polygon points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"></polygon>
+          </svg>
+        </span>
         <span class="zy-svg" @click="issueEvent" v-show="right.list.length > 0">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="infoIconTitle">
             <title id="infoIconTitle">复制调试信息</title>
@@ -98,7 +104,10 @@
     <transition name="slideX">
       <div v-if="right.show" class="list">
         <div class="list-top">
-          <span class="list-top-title">{{ right.type === 'list' ? '播放列表' : right.type === 'history' ? '历史记录' : '其他相同资源' }}</span>
+          <span class="list-top-title" v-if="right.type === 'list'">播放列表</span>
+          <span class="list-top-title" v-if="right.type === 'history'">历史记录</span>
+          <span class="list-top-title" v-if="right.type === 'shortcut'">快捷键指南</span>
+          <span class="list-top-title" v-if="right.type === 'other'">其他源的视频</span>
           <span class="list-top-close zy-svg" @click="closeListEvent">
             <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>
@@ -117,6 +126,9 @@
             <li v-show="right.history.length === 0">无数据</li>
             <li @click="historyItemEvent(m)" :class="video.info.id === m.ids ? 'active' : ''" v-for="(m, n) in right.history" :key="n"><span class="title" :title="'【' + m.site + '】' + m.name + ' 第' + (m.index+1) + '集'">【{{m.site}}】{{m.name}} 第{{m.index+1}}集</span><span @click.stop="removeHistoryItem(m)" class="detail-delete">删除</span></li>
           </ul>
+          <ul v-show="right.type === 'shortcut'" class="list-shortcut">
+            <li v-for="(m, n) in right.shortcut" :key="n"><span class="title">{{m.desc}} -- [ {{m.key}} ]</span></li>
+          </ul>
           <ul v-show="right.type === 'other'" class="list-other">
             <li v-show="right.other.length === 0">无数据</li>
             <li @click="otherItemEvent(m)" v-for="(m, n) in right.other" :key="n"><span class="title">{{m.name}} - [{{m.site}}]</span></li>
@@ -185,9 +197,10 @@ export default {
       right: {
         show: false,
         type: '',
-        other: [],
         list: [],
-        history: []
+        history: [],
+        shortcut: [],
+        other: []
       },
       config: {
         id: 'xgplayer',
@@ -532,19 +545,18 @@ export default {
           }
         })
       } else {
-        const docs = {
-          key: this.video.key,
-          ids: info.id,
-          name: info.name,
-          type: info.type,
-          year: info.year,
-          last: info.last,
-          note: info.note,
-          index: info.index
-        }
-        star.add(docs).then(res => {
-          this.$message.success('收藏成功')
-          this.isStar = true
+        zy.detail(this.video.key, info.id).then(detailRes => {
+          const docs = {
+            key: this.video.key,
+            ids: info.id,
+            name: info.name,
+            detail: detailRes,
+            index: info.index
+          }
+          star.add(docs).then(res => {
+            this.$message.success('收藏成功')
+            this.isStar = true
+          })
         })
       }
     },
@@ -732,51 +744,30 @@ export default {
         this.$message.warning('删除历史记录失败, 错误信息: ' + err)
       })
     },
-    getAllsitestest () {
-      this.name = '喜宝'
-      sites.all().then(res => {
-        const sites = res
-        const arr = []
-        for (const i of sites) {
-          zy.search(i.key, this.name).then(res => {
-            const type = Object.prototype.toString.call(res)
-            if (type === '[object Array]') {
-              res.forEach(element => {
-                zy.detail(i.key, element.id).then(detailRes => {
-                  arr.push(detailRes)
-                })
-              })
-            }
-            if (type === '[object Object]') {
-              zy.detail(i.key, res.id).then(detailRes => {
-                arr.push(detailRes)
-              })
-            }
-          })
-        }
-        console.log(arr, 'arr')
-      })
-    },
     async getAllsites () {
       const all = await sites.all()
       this.right.other = []
       for (const i of all) {
         if (i.isActive) {
-          const searchRes = await zy.search(i.key, this.name)
-          const type = Object.prototype.toString.call(searchRes)
-          if (type === '[object Array]') {
-            searchRes.forEach(async element => {
-              const detailRes = await zy.detail(i.key, element.id)
+          try {
+            const searchRes = await zy.search(i.key, this.name)
+            const type = Object.prototype.toString.call(searchRes)
+            if (type === '[object Array]') {
+              searchRes.forEach(async item => {
+                const detailRes = item
+                detailRes.key = i.key
+                detailRes.site = i.site
+                this.right.other.push(detailRes)
+              })
+            }
+            if (type === '[object Object]') {
+              const detailRes = searchRes
               detailRes.key = i.key
               detailRes.site = i.name
               this.right.other.push(detailRes)
-            })
-          }
-          if (type === '[object Object]') {
-            const detailRes = await zy.detail(i.key, searchRes.id)
-            detailRes.key = i.key
-            detailRes.site = i.name
-            this.right.other.push(detailRes)
+            }
+          } catch (err) {
+            console.error(err)
           }
         }
       }
@@ -1152,6 +1143,14 @@ export default {
         }
         addPlayerView.bind(this, 'videoTitle', `<span>${title}</span>`, {})()
       })
+    },
+    showShortcutEvent () {
+      this.right.show = !this.right.show
+      shortcut.all().then(res => {
+        this.right.type = 'shortcut'
+        this.right.shortcut = res
+        console.log(res)
+      })
     }
   },
   created () {

src/components/Recommandation.vue

@@ -0,0 +1,405 @@
+<template>
+  <div class="listpage recommandataions pictureView">
+    <div class="listpage-content">
+      <div class="listpage-header">
+        <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="list" @change="updateViewMode"></el-switch>
+        <el-select size="mini" v-model="selectedAreas" multiple collapse-tags style="margin-left: 20px;" placeholder="地区">
+          <el-option
+            v-for="item in areas"
+            :key="item"
+            :label="item"
+            :value="item">
+          </el-option>
+        </el-select>
+        <el-select size="mini" v-model="selectedTypes" multiple collapse-tags style="margin-left: 20px;" placeholder="类型">
+          <el-option
+            v-for="item in types"
+            :key="item"
+            :label="item"
+            :value="item">
+          </el-option>
+        </el-select>
+        <el-button :loading="loading" @click.stop="updateEvent" icon="el-icon-refresh">更新推荐</el-button>
+      </div>
+      <div class="listpage-body" id="recommandataions-table" v-show="viewMode === 'list'">
+        <el-table size="mini" fit height="100%" row-key="id"
+        ref="recommandataionsTable"
+        :data="filteredRecommandations"
+        @row-click="detailEvent">
+          <el-table-column
+            prop="name"
+            label="片名">
+          </el-table-column>
+          <el-table-column
+            prop="detail.area"
+            label="地区"
+            width="100">
+          </el-table-column>
+          <el-table-column
+            prop="detail.type"
+            label="类型"
+            width="100">
+          </el-table-column>
+          <el-table-column
+            prop="detail.year"
+            label="上映"
+            width="100"
+            align="center">
+          </el-table-column>
+          <el-table-column v-if="filteredRecommandations.some(e => e.detail.note)"
+            prop="detail.note"
+            width="120"
+            label="备注">
+          </el-table-column>
+          <el-table-column v-if="filteredRecommandations.some(e => e.rate)"
+            prop="rate"
+            width="120"
+            label="豆瓣评分">
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            header-align="right"
+            align="right">
+            <template slot-scope="scope">
+              <el-button @click.stop="playEvent(scope.row)" type="text">播放</el-button>
+              <el-button @click.stop="shareEvent(scope.row)" type="text">分享</el-button>
+              <el-button @click.stop="downloadEvent(scope.row)" type="text">下载</el-button>
+              <el-button @click.stop="deleteEvent(scope.row)" type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="body zy-scroll" id="star-picture" v-show="viewMode === 'picture'">
+        <div class="show-img">
+          <Waterfall ref="waterfall" :list="filteredRecommandations" :gutter="20" :width="240"
+          :breakpoints="{ 1200: { rowPerView: 4 } }"
+          animationEffect="fadeInUp"
+          backgroundColor="rgba(0, 0, 0, 0)">
+            <template slot="item" slot-scope="props">
+              <div class="card">
+                <div class="img">
+                  <div class="rate" v-if="props.data.rate && props.data.rate !== '暂无评分'">
+                    <span>豆瓣: {{props.data.rate}}</span>
+                  </div>
+                  <img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.waterfall.refresh()" @click="detailEvent(props.data)">
+                  <div class="operate">
+                    <div class="operate-wrap">
+                      <span class="o-play" @click="playEvent(props.data)">播放</span>
+                      <span class="o-share" @click="shareEvent(props.data)">分享</span>
+                      <span class="o-star" @click="downloadEvent(props.data)">下载</span>
+                      <span class="o-star" @click="deleteEvent(props.data)">删除</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="name" @click="detailEvent(props.data)">{{props.data.name}}</div>
+                <div class="info">
+                  <span>{{props.data.detail.area}}</span>
+                  <span>{{props.data.detail.year}}</span>
+                  <span>{{props.data.detail.note}}</span>
+                  <span>{{props.data.detail.type}}</span>
+                </div>
+              </div>
+            </template>
+          </Waterfall>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import { history, recommandation, setting } from '../lib/dexie'
+import zy from '../lib/site/tools'
+import Waterfall from 'vue-waterfall-plugin'
+const { clipboard } = require('electron')
+export default {
+  name: 'recommandations',
+  data () {
+    return {
+      recommandations: [],
+      sites: [],
+      viewMode: 'picture',
+      loading: false,
+      types: [],
+      selectedTypes: [],
+      areas: [],
+      selectedAreas: []
+    }
+  },
+  components: {
+    Waterfall
+  },
+  computed: {
+    view: {
+      get () {
+        return this.$store.getters.getView
+      },
+      set (val) {
+        this.SET_VIEW(val)
+      }
+    },
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    detail: {
+      get () {
+        return this.$store.getters.getDetail
+      },
+      set (val) {
+        this.SET_DETAIL(val)
+      }
+    },
+    share: {
+      get () {
+        return this.$store.getters.getShare
+      },
+      set (val) {
+        this.SET_SHARE(val)
+      }
+    },
+    filteredRecommandations () {
+      var filteredData = this.recommandations.filter(x => (this.selectedAreas.length === 0) || this.selectedAreas.includes(x.detail.area))
+      filteredData = filteredData.filter(x => (this.selectedTypes.length === 0) || this.selectedTypes.includes(x.detail.type))
+      return filteredData
+    }
+  },
+  watch: {
+    view () {
+      this.getRecommandations()
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    detailEvent (e) {
+      this.detail = {
+        show: true,
+        key: e.key,
+        info: {
+          id: e.ids,
+          name: e.name
+        }
+      }
+    },
+    updateEvent () {
+      const url = 'https://raw.githubusercontent.com/Hunlongyu/ZY-Player/master/src/lib/dexie/iniData/Recommandations.json'
+      this.loading = true
+      const axios = require('axios')
+      axios.get(url).then(res => {
+        if (res.status === 200) {
+          if (res.data.length > 0) {
+            this.recommandations = res.data
+            this.recommandations.sort(function (a, b) {
+              return b.detail.year - a.detail.year
+            })
+            recommandation.clear().then(recommandation.bulkAdd(this.recommandations))
+            this.$message.success('更新推荐成功')
+          }
+        }
+        this.loading = false
+      })
+    },
+    async playEvent (e) {
+      const db = await history.find({ site: e.key, ids: e.ids })
+      if (db) {
+        this.video = { key: e.key, info: { id: db.ids, name: db.name, index: db.index } }
+      } else {
+        this.video = { key: e.key, info: { id: e.ids, name: e.name, index: 0 } }
+      }
+      this.view = 'Play'
+    },
+    deleteEvent (e) {
+      recommandation.remove(e.id).then(res => {
+        if (res) {
+          this.$message.warning('删除失败')
+        } else {
+          this.$message.success('删除成功')
+        }
+        this.getRecommandations()
+      })
+    },
+    shareEvent (e) {
+      this.share = {
+        show: true,
+        key: e.key,
+        info: e
+      }
+    },
+    downloadEvent (e) {
+      zy.download(e.key, e.ids).then(res => {
+        if (res && res.dl && res.dl.dd) {
+          const text = res.dl.dd._t
+          if (text) {
+            const list = text.split('#')
+            let downloadUrl = ''
+            for (const i of list) {
+              const url = encodeURI(i.split('$')[1])
+              downloadUrl += (url + '\n')
+            }
+            clipboard.writeText(downloadUrl)
+            this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
+          } else {
+            this.$message.warning('没有查询到下载链接.')
+          }
+        } else {
+          var m3u8List = {}
+          zy.detail(e.key, e.ids).then(res => {
+            const dd = res.dl.dd
+            const type = Object.prototype.toString.call(dd)
+            if (type === '[object Array]') {
+              for (const i of dd) {
+                if (i._flag.indexOf('m3u8') >= 0) {
+                  m3u8List = i._t.split('#')
+                }
+              }
+            } else {
+              m3u8List = dd._t.split('#')
+            }
+            const list = [...m3u8List]
+            let downloadUrl = ''
+            for (const i of list) {
+              const url = encodeURI(i.split('$')[1])
+              downloadUrl += (url + '\n')
+            }
+            clipboard.writeText(downloadUrl)
+            this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
+          })
+        }
+      })
+    },
+    getRecommandations () {
+      recommandation.all().then(res => {
+        this.recommandations = res
+        this.recommandations.sort(function (a, b) {
+          return b.detail.year - a.detail.year
+        })
+        this.getFilterData()
+      })
+    },
+    getFilterData () {
+      this.types = [...new Set(this.recommandations.map(ele => ele.detail.type))].filter(x => x)
+      this.areas = [...new Set(this.recommandations.map(ele => ele.detail.area))].filter(x => x)
+    },
+    getViewMode () {
+      setting.find().then(res => {
+        this.viewMode = res.recommandationViewMode
+      })
+    },
+    updateViewMode () {
+      setting.find().then(res => {
+        res.recommandationViewMode = this.viewMode
+        setting.update(res)
+      })
+    }
+  },
+  created () {
+    this.getRecommandations()
+    this.getViewMode()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.recommandataions{
+  .body{
+    height: calc(100% - 40px);
+    display: flex;
+    position: relative;
+    overflow-y: auto;
+    &::-webkit-scrollbar{
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      position: absolute;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      position: absolute;
+    }
+    .body-box{
+      height: 100%;
+      width: 100%;
+    }
+    .show-img{
+      height: 100%;
+      width: 100%;
+      padding: 10px;
+      .card{
+        border-radius: 6px;
+        overflow: hidden;
+        .img{
+          position: relative;
+          min-height: 40px;
+          img{
+            width: 100%;
+            height: auto;
+            cursor: pointer;
+          }
+          .rate{
+            position: absolute;
+            top: 10%;
+            right: -35%;
+            width: 100%;
+            background-color: #111111aa;
+            color: #cdcdcd;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            text-align: center;
+            transform: rotate(45deg);
+          }
+          .operate{
+            display: none;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            background-color: #111111aa;
+            width: 100%;
+            font-size: 13px;
+            .operate-wrap{
+              display: flex;
+              justify-content: space-between;
+              .o-play, .o-star, .o-share{
+                cursor: pointer;
+                display: inline-block;
+                width: 80px;
+                height: 36px;
+                text-align: center;
+                line-height: 36px;
+                color: #cdcdcd;
+                &:hover{
+                  background-color: #111;
+                }
+              }
+            }
+          }
+        }
+        .name{
+          font-size: 16px;
+          padding: 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+        .info{
+          display: flex;
+          justify-content: space-between;
+          font-size: 12px;
+          padding: 10px;
+        }
+        &:hover{
+          .operate{
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Setting.vue

@@ -210,17 +210,7 @@ export default {
     },
     getSetting () {
       setting.find().then(res => {
-        this.d = {
-          id: res.id,
-          theme: res.theme,
-          shortcut: res.shortcut,
-          view: res.view,
-          externalPlayer: res.externalPlayer,
-          searchAllSites: res.searchAllSites,
-          excludeRootClasses: res.excludeRootClasses,
-          excludeR18Films: res.excludeR18Films,
-          forwardTimeInSec: res.forwardTimeInSec
-        }
+        this.d = res
         this.setting = this.d
       })
     },
@@ -362,6 +352,7 @@ export default {
       })
     },
     quitAndInstall () {
+      this.$message.success('已开始下载更新，下载完毕后，将自动退出安装。')
       ipcRenderer.send('quitAndInstall')
     },
     createContextMenu () {

src/components/Star.vue

@@ -1,13 +1,14 @@
 <template>
-  <div class="listpage" id="star">
+  <div class="listpage star pictureView">
     <div class="listpage-content">
       <div class="listpage-header">
+        <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="list" @change="updateViewMode"></el-switch>
         <el-button @click.stop="exportFavoritesEvent" icon="el-icon-upload2">导出</el-button>
         <el-button @click.stop="importFavoritesEvent" icon="el-icon-download">导入</el-button>
         <el-button @click.stop="clearFavoritesEvent" icon="el-icon-delete-solid">清空</el-button>
         <el-button @click.stop="updateAllEvent" icon="el-icon-refresh">同步所有收藏</el-button>
       </div>
-      <div class="listpage-body" id="star-table">
+      <div class="listpage-body" id="star-table" v-show="viewMode === 'list'">
         <el-table size="mini" fit height="100%" row-key="id"
         ref="starTable"
         :data="list"
@@ -21,37 +22,39 @@
             label="片名">
           </el-table-column>
           <el-table-column
-            :sort-by="['type', 'name']"
+            :sort-by="['detail.type', 'name']"
             sortable
             :sort-method="sortByType"
-            prop="type"
+            prop="detail.type"
             label="类型"
             width="100">
           </el-table-column>
           <el-table-column
             sortable
-            :sort-by="['year', 'name']"
-            prop="year"
+            :sort-by="['detail.year', 'name']"
+            prop="detail.year"
             label="上映"
             width="100"
             align="center">
           </el-table-column>
           <el-table-column
-            :sort-by="['site', 'name']"
-            sortable
-            :sort-method="sortBySite"
-            prop="site"
+            prop="site.name"
             width="120"
-            label="片源">
+            label="源站">
             <template slot-scope="scope">
-              <span>{{ getSiteName(scope.row.key) }}</span>
+              <span>{{ getSiteName(scope.row) }}</span>
             </template>
           </el-table-column>
-          <el-table-column v-if="list.some(e => e.note)"
-            prop="note"
+          <el-table-column v-if="list.some(e => e.detail.note)"
+            prop="detail.note"
             width="120"
             label="备注">
           </el-table-column>
+          <el-table-column v-if="list.some(e => e.rate)"
+            prop="rate"
+            width="120"
+            label="豆瓣评分">
+          </el-table-column>
           <el-table-column v-if="list.some(e => e.index >= 0)"
             prop="index"
             width="120"
@@ -73,25 +76,63 @@
           </el-table-column>
         </el-table>
       </div>
+      <div class="body zy-scroll" id="star-picture" v-show="viewMode === 'picture'">
+        <div class="show-img">
+          <Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
+          :breakpoints="{ 1200: { rowPerView: 4 } }"
+          animationEffect="fadeInUp"
+          backgroundColor="rgba(0, 0, 0, 0)">
+            <template slot="item" slot-scope="props">
+              <div class="card">
+                <div class="img">
+                  <div class="rate" v-if="props.data.rate && props.data.rate !== '暂无评分'">
+                    <span>豆瓣: {{props.data.rate}}</span>
+                  </div>
+                  <img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.waterfall.refresh()" @click="detailEvent(props.data)">
+                  <div class="operate">
+                    <div class="operate-wrap">
+                      <span class="o-play" @click="playEvent(props.data)">播放</span>
+                      <span class="o-share" @click="shareEvent(props.data)">分享</span>
+                      <span class="o-star" @click="downloadEvent(props.data)">下载</span>
+                      <span class="o-star" @click="deleteEvent(props.data)">删除</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="name" @click="detailEvent(props.data)">{{props.data.name}}</div>
+                <div class="info">
+                  <span>{{props.data.detail.year}}</span>
+                  <span>{{props.data.detail.note}}</span>
+                  <span>{{props.data.detail.type}}</span>
+                </div>
+              </div>
+            </template>
+          </Waterfall>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import { star, history, sites } from '../lib/dexie'
+import { star, history, sites, setting } from '../lib/dexie'
 import zy from '../lib/site/tools'
 import { remote } from 'electron'
 import fs from 'fs'
 import Sortable from 'sortablejs'
+import Waterfall from 'vue-waterfall-plugin'
 const { clipboard } = require('electron')
 export default {
   name: 'star',
   data () {
     return {
       list: [],
-      sites: []
+      sites: [],
+      viewMode: 'picture'
     }
   },
+  components: {
+    Waterfall
+  },
   computed: {
     view: {
       get () {
@@ -143,14 +184,6 @@ export default {
     sortByType (a, b) {
       return a.type.localeCompare(b.type)
     },
-    sortBySite (a, b) {
-      const siteA = this.getSiteName(a.key)
-      if (!siteA) {
-        return -1
-      } else {
-        return siteA.localeCompare(this.getSiteName(b.key))
-      }
-    },
     detailEvent (e) {
       this.detail = {
         show: true,
@@ -207,24 +240,19 @@ export default {
       }
     },
     updateEvent (e) {
-      zy.detail(e.key, e.ids).then(res => {
+      zy.detail(e.key, e.ids).then(detailRes => {
         var doc = {
           id: e.id,
           key: e.key,
-          ids: res.id,
-          site: res.site,
-          name: res.name,
-          type: res.type,
-          year: res.year,
-          note: res.note,
-          index: res.index,
-          last: res.last,
-          hasUpdate: res.hasUpdate
+          ids: e.ids,
+          site: e.site,
+          name: e.name,
+          detail: detailRes,
+          index: e.index
         }
         star.get(e.id).then(resStar => {
-          doc.hasUpdate = resStar.hasUpdate
           var msg = ''
-          if (e.last === res.last) {
+          if (e.detail.last === detailRes.last) {
             msg = `同步"${e.name}"成功, 未查询到更新。`
             this.$message.info(msg)
           } else {
@@ -287,10 +315,14 @@ export default {
         }
       })
     },
-    getSiteName (key) {
-      var site = this.sites.find(e => e.key === key)
-      if (site) {
-        return site.name
+    getSiteName (row) {
+      if (row.site) {
+        return row.site.name
+      } else {
+        var site = this.sites.find(e => e.key === row.key)
+        if (site) {
+          return site.name
+        }
       }
     },
     getHistoryNote (index) {
@@ -352,12 +384,19 @@ export default {
                   ids: ele.ids,
                   site: ele.site === undefined ? ele.site = this.sites.find(x => x.key === ele.key) : ele.site,
                   name: ele.name,
-                  type: ele.type,
-                  year: ele.year,
-                  note: ele.note,
+                  hasUpdate: ele.hasUpdate,
                   index: ele.index,
-                  last: ele.last,
-                  hasUpdate: ele.hasUpdate
+                  rate: ele.rate,
+                  detail: ele.detail === undefined ? {
+                    director: ele.director,
+                    actor: ele.actor,
+                    type: ele.type,
+                    area: ele.area,
+                    lang: ele.lang,
+                    year: ele.year,
+                    last: ele.last,
+                    note: ele.note
+                  } : ele.detail
                 }
                 starList.push(doc)
               }
@@ -403,6 +442,17 @@ export default {
           _this.updateDatabase()
         }
       })
+    },
+    getViewMode () {
+      setting.find().then(res => {
+        this.viewMode = res.starViewMode
+      })
+    },
+    updateViewMode () {
+      setting.find().then(res => {
+        res.starViewMode = this.viewMode
+        setting.update(res)
+      })
     }
   },
   mounted () {
@@ -410,6 +460,108 @@ export default {
   },
   created () {
     this.getFavorites()
+    this.getViewMode()
   }
 }
 </script>
+<style lang="scss" scoped>
+.star{
+  .body{
+    height: calc(100% - 40px);
+    display: flex;
+    position: relative;
+    overflow-y: auto;
+    &::-webkit-scrollbar{
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      position: absolute;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      position: absolute;
+    }
+    .body-box{
+      height: 100%;
+      width: 100%;
+    }
+    .show-img{
+      height: 100%;
+      width: 100%;
+      padding: 10px;
+      .card{
+        border-radius: 6px;
+        overflow: hidden;
+        .img{
+          position: relative;
+          min-height: 40px;
+          img{
+            width: 100%;
+            height: auto;
+            cursor: pointer;
+          }
+          .rate{
+            position: absolute;
+            top: 10%;
+            right: -35%;
+            width: 100%;
+            background-color: #111111aa;
+            color: #cdcdcd;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            text-align: center;
+            transform: rotate(45deg);
+          }
+          .operate{
+            display: none;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            background-color: #111111aa;
+            width: 100%;
+            font-size: 13px;
+            .operate-wrap{
+              display: flex;
+              justify-content: space-between;
+              .o-play, .o-star, .o-share{
+                cursor: pointer;
+                display: inline-block;
+                width: 80px;
+                height: 36px;
+                text-align: center;
+                line-height: 36px;
+                color: #cdcdcd;
+                &:hover{
+                  background-color: #111;
+                }
+              }
+            }
+          }
+        }
+        .name{
+          font-size: 16px;
+          padding: 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+        .info{
+          display: flex;
+          justify-content: space-between;
+          font-size: 12px;
+          padding: 10px;
+        }
+        &:hover{
+          .operate{
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/register.js

@@ -10,7 +10,7 @@ import Share from './Share'
 import History from './History'
 import EditSites from './EditSites'
 import IPTV from './IPTV'
-
+import Recommandation from './Recommandation'
 export default {
   registerComponents () {
     Vue.component('Aside', Aside)
@@ -24,5 +24,6 @@ export default {
     Vue.component('History', History)
     Vue.component('EditSites', EditSites)
     Vue.component('IPTV', IPTV)
+    Vue.component('Recommandation', Recommandation)
   }
 }

src/lib/dexie/dexie.js

@@ -1,14 +1,15 @@
 import Dexie from 'dexie'
-import { setting, sites, localKey, iptv } from './initData'
+import { setting, sites, localKey, iptv, recommandations } from './initData'
 
 const db = new Dexie('zy')
 
 db.version(4).stores({
   search: '++id, keywords',
   iptvSearch: '++id, keywords',
-  setting: 'id, theme, site, shortcut, view, externalPlayer, searchAllSites, excludeRootClasses, excludeR18Films, forwardTimeInSec',
+  setting: 'id, theme, site, shortcut, view, externalPlayer, searchAllSites, excludeRootClasses, excludeR18Films, forwardTimeInSec, starViewMode, recommandationViewMode',
   shortcut: 'name, key, desc',
-  star: '++id, [key+ids], site, name, type, year, note, index, last, hasUpdate',
+  star: '++id, [key+ids], site, name, detail, index, rate, hasUpdate',
+  recommandation: '++id, [key+ids], site, name, detail, index, rate, hasUpdate',
   sites: '++id, key, name, api, download, isActive, group',
   history: '++id, [site+ids], name, type, year, index, time',
   mini: 'id, site, ids, name, index, time',
@@ -20,6 +21,7 @@ db.on('populate', () => {
   db.sites.bulkAdd(sites)
   db.shortcut.bulkAdd(localKey)
   db.iptv.bulkAdd(iptv)
+  db.recommandation.bulkAdd(recommandations)
 })
 
 db.open()

src/lib/dexie/index.js

@@ -7,6 +7,7 @@ import sites from './sites'
 import search from './search'
 import iptvSearch from './iptvSearch'
 import iptv from './iptv'
+import recommandation from './recommandation'
 
 export {
   history,
@@ -17,5 +18,6 @@ export {
   sites,
   iptv,
   search,
-  iptvSearch
+  iptvSearch,
+  recommandation
 }

src/lib/dexie/initData.js

@@ -8,7 +8,9 @@ const setting = [
     searchAllSites: true,
     excludeRootClasses: true,
     excludeR18Films: true,
-    forwardTimeInSec: 5
+    forwardTimeInSec: 5,
+    starViewMode: 'picture',
+    recommandationViewMode: 'picture'
   }
 ]
 
@@ -342,11 +344,12 @@ const getSite = (key) => {
 }
 
 const iptv = require('./iniData/Iptv.json')
-
+const recommandations = require('./iniData/Recommandations.json')
 export {
   setting,
   sites,
   iptv,
+  recommandations,
   localKey,
   getSite
 }

src/lib/dexie/recommandation.js

@@ -0,0 +1,28 @@
+import db from './dexie'
+const { recommandation } = db
+export default {
+  async add (doc) {
+    return await recommandation.add(doc)
+  },
+  async bulkAdd (doc) {
+    return await recommandation.bulkAdd(doc)
+  },
+  async find (doc) {
+    return await recommandation.where(doc).first()
+  },
+  async update (id, docs) {
+    return await recommandation.update(id, docs)
+  },
+  async all () {
+    return await recommandation.toArray()
+  },
+  async remove (id) {
+    return await recommandation.delete(id)
+  },
+  async get (id) {
+    return await recommandation.get(id)
+  },
+  async clear () {
+    return await recommandation.clear()
+  }
+}

src/lib/site/tools.js

@@ -1,6 +1,8 @@
 import { sites } from '../dexie'
 import axios from 'axios'
 import parser from 'fast-xml-parser'
+import cheerio from 'cheerio'
+
 const zy = {
   xmlConfig: { // XML 转 JSON 配置
     trimValues: true,
@@ -210,6 +212,52 @@ const zy = {
     } catch (e) {
       return false
     }
+  },
+  /**
+   * 获取豆瓣评分
+   * @param {*} name 视频名称
+   * @returns 豆瓣评分
+   */
+  doubanRate (name) {
+    return new Promise((resolve, reject) => {
+      // 豆瓣搜索链接
+      var nameToSearch = name.replace(/\s/g, '')
+      var doubanSearchLink = 'https://www.douban.com/search?q=' + nameToSearch
+      axios.get(doubanSearchLink).then(res => {
+        const $ = cheerio.load(res.data)
+        // 比较第一和第二给豆瓣搜索结果, 看名字是否相符
+        var link = ''
+        var linkInDouban = $($('div.result')[0]).find('div>div>h3>a').first()
+        var nameInDouban = linkInDouban.text().replace(/\s/g, '')
+        if (nameToSearch.includes(nameInDouban) || nameInDouban.includes(nameToSearch)) {
+          link = linkInDouban.attr('href')
+        } else {
+          linkInDouban = $($('div.result')[1]).find('div>div>h3>a').first()
+          nameInDouban = linkInDouban.text().replace(/\s/g, '')
+          if (nameToSearch.includes(nameInDouban) || nameInDouban.includes(nameToSearch)) {
+            link = linkInDouban.attr('href')
+          }
+        }
+        // 如果找到链接，就打开该链接获取评分
+        if (link) {
+          axios.get(link).then(response => {
+            const parsedHtml = cheerio.load(response.data)
+            var rating = parsedHtml('body').find('#interest_sectl').first().find('strong').first()
+            if (rating.text()) {
+              resolve(rating.text())
+            } else {
+              resolve('暂无评分')
+            }
+          }).catch(err => {
+            reject(err)
+          })
+        } else {
+          resolve('暂无评分')
+        }
+      }).catch(err => {
+        reject(err)
+      })
+    })
   }
 }
 

src/mini/Mini.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mini">
-    <div class="top">
+    <div class="header">
       <div class="left">
         <span class="title">
           <span v-if="m3u8Arr.length > 1">『第 {{(video.index + 1)}} 集』</span>{{name}}
@@ -22,7 +22,7 @@
         <span class="progress" v-show="progress > 0">播放进度: {{progress}}%</span>
       </div>
       <div class="right">
-        <span class="top" @click="frameClickEvent('top')" title="置顶">
+        <span class="topping" @click="frameClickEvent('top')" title="置顶">
           <svg t="1595919317571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1188" style="width:10px;height:14px"><path d="M43.072 974.72l380.864-301.952 151.936 161.6c0 0 63.424 17.28 67.328-30.72l-3.904-163.584 225.088-259.648 98.048-5.696c0 0 76.928-15.488 21.184-82.752l-275.072-276.928c0 0-74.944-9.6-69.248 59.584l0 75.008L383.552 367.104 225.856 376.64c0 0-57.728 19.2-36.608 69.248l148.16 146.176L43.072 974.72 43.072 974.72z" p-id="1189" :fill="isAlwaysOnTop ? '#555555' : '#ffffff'"></path></svg>
         </span>
         <span class="min" @click="frameClickEvent('min')" title="最小化">
@@ -31,12 +31,12 @@
         <span class="max" @click="frameClickEvent('max')" title="最大化">
           <svg t="1595917343956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1540" style="width:8px;height:14px"><path d="M416 416 64.064 416C28.448 416 0 444.64 0 479.936L0 544.064C0 579.264 28.672 608 64.064 608L416 608 416 959.936C416 995.552 444.64 1024 479.936 1024L544.064 1024C579.264 1024 608 995.328 608 959.936L608 608 959.936 608C995.552 608 1024 579.36 1024 544.064L1024 479.936C1024 444.736 995.328 416 959.936 416L608 416 608 64.064C608 28.448 579.36 0 544.064 0L479.936 0C444.736 0 416 28.672 416 64.064L416 416Z" p-id="1541" fill="#ffffff"></path></svg>
         </span>
-        <span class="close" @click="frameClickEvent('close')" title="关闭">
+        <span class="close" @click="frameClickEvent('close')" title="退出精简模式">
           <svg t="1595917372551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1685" style="width:8px;height:14px"><path d="M511.968 376.224 796.096 92.096C833.536 54.624 894.4 54.624 931.84 92.096 969.312 129.568 969.312 190.4 931.84 227.872L647.744 512 931.84 796.096C969.312 833.568 969.312 894.4 931.84 931.872 894.4 969.344 833.536 969.344 796.096 931.872L511.968 647.744 227.84 931.872C190.4 969.344 129.536 969.344 92.096 931.872 54.624 894.4 54.624 833.568 92.096 796.096L376.224 512 92.096 227.872C54.624 190.4 54.624 129.568 92.096 92.096 129.536 54.624 190.4 54.624 227.84 92.096L511.968 376.224Z" p-id="1686" fill="#ffffff"></path></svg>
         </span>
       </div>
     </div>
-    <div class="bottom">
+    <div class="footer">
       <div id="xg"></div>
     </div>
   </div>
@@ -419,9 +419,10 @@ html,body{
   justify-content: center;
   align-items: flex-start;
   flex-direction: column;
-  .top{
+  .header{
     width: 100%;
     height: 30px;
+    min-height: 30px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -455,22 +456,27 @@ html,body{
       }
     }
     .right{
-      width: 80px;
+      width: 100px;
       height: 100%;
       display: flex;
       justify-content: flex-end;
       align-items: center;
       span{
         -webkit-app-region: no-drag;
-        display: inline-block;
-        width: 14px;
-        height: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 15px;
+        height: 15px;
         text-align: center;
-        line-height: 14px;
+        line-height: 15px;
         border-radius: 50%;
         margin-right: 10px;
         cursor: pointer;
         opacity: 0.4;
+        &.topping{
+          background-color: #f3bab7;
+        }
         &.min{
           background-color: #32dc36;
         }
@@ -480,9 +486,6 @@ html,body{
         &.close{
           background-color: #ff5f56;
         }
-        &.top{
-          background-color: #f3bab7;
-        }
         &:hover{
           animation: heartbeat 3s ease-in-out infinite both;
         }
@@ -513,7 +516,7 @@ html,body{
       }
     }
   }
-  .bottom{
+  .footer{
     width: 100%;
     flex: 1;
     .xgplayer-start{