😡 解决冲突

src/assets/scss/theme.scss

@@ -34,9 +34,28 @@
   --d-bsc-2: 0 -4px 23px 0 #38dd7733;
   --d-bsc-hover: 0 14px 26px -12px #38dd7733, 0 4px 23px 0 #38dd7722, 0 8px 10px -5px #38dd7711;
   --d-bsc-scroll: inset 0 0 5px #38dd7705;
+
+  // green
+  --g-c-0: #EAEF9D;
+  --g-c-1: #EAEF9D11;
+  --g-c-2: #EAEF9D22;
+  --g-c-3: #EAEF9D33;
+  --g-c-5: #EAEF9D55;
+  --g-c-8: #EAEF9D88;
+  --g-c-9: #EAEF9D99;
+  --g-fc-1: #80B155;
+  --g-fc-2: #C1D95CAA;
+  --g-fc-3: #C1D95C;
+  --g-bgc-1: #336A29;
+  --g-bgc-2: #498428;
+  --g-bsc: 0 3px 1px -2px #C1D95C33, 0 2px 2px 0 #C1D95C22, 0 1px 5px 0 #C1D95C11;
+  --g-bsc-2: 0 -4px 23px 0 #C1D95C33;
+  --g-bsc-hover: 0 14px 26px -12px #C1D95C33, 0 4px 23px 0 #C1D95C22, 0 8px 10px -5px #C1D95C11;
+  --g-bsc-scroll: inset 0 0 5px #C1D95C05;
 }
 
 @import './theme/light.scss';
 @import './theme/dark.scss';
+@import './theme/green.scss';
 
 @import './style.scss';

src/assets/scss/theme/green.scss

@@ -0,0 +1,349 @@
+.theme-green{
+  background-color: var(--g-bgc-1);
+  .xgplayer-skin-default video{
+    background-color: var(--g-bgc-2);
+  }
+  .el-pagination{
+    background-color: var(--g-bgc-1);
+    color: var(--g-fc-1);
+    .el-pagination__total, .el-pagination__jump, .el-input__inner{
+      color: var(--g-fc-1);
+      background-color: var(--g-bgc-1);
+    }
+    .el-input__inner{
+      border-color: var(--g-c-3);
+    }
+    .el-pager{
+      .number{
+        background-color: var(--g-bgc-1);
+      }
+      .number:hover{
+        color: var(--g-c-8);
+      }
+      .active{
+        color: var(--g-c-9);
+      }
+    }
+    .more, .btn-next, .btn-prev{
+      background-color: var(--g-bgc-1);
+      &:hover{
+        color: var(--g-c-8);
+      }
+    }
+  }
+  .zy-select{
+    color: var(--g-fc-1);
+    background-color: var(--g-bgc-1);
+    box-shadow: var(--g-bsc);
+    &:hover{
+      box-shadow: var(--g-bsc-hover);
+    }
+    .vs-options{
+      background-color: var(--g-bgc-1);
+      box-shadow: var(--g-bsc);
+      ul{
+        li{
+          &:hover{
+            background-color: var(--g-c-1);
+          }
+          &.active{
+            background-color: var(--g-c-3);
+          }
+        }
+      }
+    }
+  }
+  .zy-table{
+    color: var(--g-fc-2);
+    .tHead{
+      background-color: var(--g-bgc-1);
+      border-bottom-color: var(--g-c-3);
+    }
+    .tBody{
+      border-bottom-color: var(--g-c-3);
+      ul{
+        li{
+          border-bottom-color: var(--g-c-2);
+          &:hover{
+            animation: d-tableHoverAni 0.2s ease both;
+            @keyframes d-tableHoverAni {
+              to{
+                box-shadow: var(--g-bsc-hover);
+              }
+            }
+          }
+          span{
+            &.btn:hover{
+              color: var(--g-fc-3)
+            }
+          }
+        }
+      }
+    }
+    .tFooter{
+      .tFooter-span{
+        color: var(--g-fc-1);
+      }
+    }
+  }
+  .zy-scroll{
+    &:hover{
+      &::-webkit-scrollbar-thumb {
+        box-shadow: var(--g-bsc-scroll);
+        background: var(--g-c-3);
+      }
+      &::-webkit-scrollbar-track {
+        box-shadow: var(--g-bsc-scroll);
+        background: var(--bgc);
+      }
+    }
+  }
+  .zy-loading{
+    .loader{
+      color: var(--g-c-3);
+    }
+  }
+  .zy-body{
+    background-color: var(--g-bgc-2);
+  }
+  .aside{
+    .zy-svg{
+      svg{
+        stroke: var(--g-c-0);
+      }
+      &:hover{
+        background-color: var(--g-c-2);
+      }
+      &.active{
+        svg{
+          stroke: var(--g-c-0);
+          stroke-width: 2;
+          fill: var(--g-c-2);
+        }
+      }
+    }
+  }
+  .frame{
+    span{
+      &.min{
+        background-color: #ffbe2a;
+      }
+      &.close{
+        background-color: #ff5f56;
+      }
+    }
+  }
+  .detail{
+    color: var(--g-fc-1);
+    background-color:var(--g-bgc-1);
+    box-shadow: var(--g-bsc-2);
+    .detail-content{
+      .detail-close{
+        svg{
+          stroke-width: 1;
+          stroke: var(--g-c-8);
+          &:hover{
+            stroke-width: 2px;
+            stroke: var(--g-c-9);
+          }
+        }
+      }
+      .detail-body{
+        .info, .desc, .m3u8_urls, .mp4_urls{
+          border-color: var(--g-c-2);
+        }
+        .m3u8_urls, .mp4_urls{
+          .box{
+            span{
+              border-color: var(--g-c-5);
+              &:hover{
+                color: var(--g-fc-2);
+                background-color: var(--g-c-1);
+                border-color: var(--g-c-8);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .film{
+    .top{
+      .search{
+        background-color: var(--g-bgc-1);
+        box-shadow: var(--g-bsc);
+        &:hover{
+          box-shadow: var(--g-bsc-hover);
+        }
+        svg{
+          stroke: var(--g-c-0);
+          stroke-width: 1;
+          fill: none;
+        }
+        .search-box{
+          background-color: var(--g-bgc-1);
+        }
+        &.active{
+          box-shadow: var(--g-bsc-hover);
+          svg{
+            stroke-width: 1.5;
+            fill: var(--g-c-2);
+          }
+        }
+        input{
+          color: var(--g-fc-1);
+        }
+      }
+    }
+    .middle{
+      background-color: var(--g-bgc-1);
+      box-shadow: var(--g-bsc);
+    }
+  }
+  .play{
+    background-color: var(--g-bgc-1);
+    box-shadow: var(--g-bsc);
+    .title{
+      color: var(--g-fc-1);
+    }
+    .box{
+      .more{
+        span{
+          svg{
+            stroke: var(--g-c-5);
+            stroke-width: 1;
+            fill: none;
+          }
+          &:hover{
+            svg{
+              stroke: var(--g-c-8);
+              stroke-width: 1.5;
+              fill: var(--g-c-2);
+            }
+          }
+          &.active{
+            svg{
+              stroke: var(--g-c-9);
+              stroke-width: 2;
+              fill: var(--g-c-3);
+            }
+          }
+        }
+      }
+    }
+    .list{
+      border: 1px solid var(--g-c-3);
+      background-color: var(--g-bgc-2);
+      .list-top{
+        color: var(--g-fc-2);
+        .list-top-close{
+          svg{
+            stroke: var(--g-c-5);
+            stroke-width: 1;
+            fill: none;
+            &:hover{
+              stroke: var(--g-c-8);
+              stroke-width: 1.5;
+              fill: var(--g-c-2);
+            }
+          }
+        }
+      }
+      .list-body{
+        .list-item{
+          li{
+            color: var(--g-fc-1);
+            &.active{
+              background-color: var(--g-c-2);
+              color: var(--g-fc-3);
+            }
+          }
+        }
+        .list-history{
+          li{
+            .title{
+              color: var(--g-fc-1);
+            }
+            &.active{
+              background-color: var(--g-c-2);
+              .title{
+                color: var(--g-fc-3);
+              }
+            }
+            &:hover{
+              background-color: var(--g-c-3);
+              .detail-delete{
+                display: inline-block;
+                color: var(--g-fc-2);
+              }
+            }
+            .detail-delete{
+              &:hover{
+                background-color: var(--g-c-2);
+              }
+            }
+          }
+        }
+      }
+    }
+    .play-mask{
+      background-color: var(--g-bgc-1);
+      color: var(--g-fc-1);
+    }
+  }
+  .star{
+    background-color: var(--g-bgc-1);
+    box-shadow: var(--g-bsc);
+  }
+  .setting{
+    background-color: var(--g-bgc-1);
+    box-shadow: var(--g-bsc);
+    .info{
+      a{
+        color: var(--g-fc-1);
+        &:hover{
+          color: var(--g-fc-2);
+        }
+      }
+    }
+    .theme{
+      .title{
+        color: var(--g-fc-1);
+      }
+      .theme-item{
+        box-shadow: var(--g-bsc);
+        &:hover{
+          box-shadow: var(--g-bsc-hover);
+          .theme-name{
+            color: var(--g-fc-2)
+          }
+        }
+        .theme-name{
+          color: var(--g-fc-1);
+        }
+      }
+    }
+    .qrcode{
+      .title{
+        color: var(--g-fc-1);
+      }
+      .qrcode-item{
+        box-shadow: var(--g-bsc);
+      }
+    }
+  }
+  .share{
+    background-color: var(--g-bgc-1);
+    color: var(--g-fc-1);
+    border: 1px solid var(--g-c-8);
+    .right{
+      color: var(--g-fc-1);
+      .tops{
+        color: var(--g-fc-2);
+      }
+    }
+    .share-mask{
+      background-color: var(--g-bgc-1);
+    }
+  }
+}

src/components/Play.vue

@@ -228,6 +228,7 @@ export default {
         this.onPlayVideo()
         this.xg.once('ended', () => {
           if (res.m3u8_urls.length > 1 && (res.m3u8_urls.length - 1 > this.video.index)) {
+            this.video.currentTime = 0
             this.video.index++
           }
           this.xg.off('ended')

src/components/Setting.vue

@@ -2,7 +2,10 @@
   <div class="setting">
     <div class="setting-box zy-scroll" v-if="show.setting">
       <div class="logo"><img src="@/assets/image/logo.png"></div>
-      <div class="info"><a href="https://github.com/Hunlongyu/ZY-Player">{{$t('website')}}</a><a href="https://github.com/Hunlongyu/ZY-Player/issues/24">{{$t('issues')}}</a></div>
+      <div class="info">
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player')">{{$t('website')}}</a>
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">{{$t('issues')}}</a>
+      </div>
       <div class="change">
         <div class="zy-select" @mouseleave="show.language = false">
           <div class="vs-placeholder" @click="show.language = true">{{$t('language')}}</div>
@@ -36,6 +39,12 @@
             </div>
             <div class="theme-name">Dark</div>
           </div>
+          <div @click="changeTheme('green')" class="theme-item green">
+            <div class="theme-image">
+              <img src="../assets/image/green.png" alt="">
+            </div>
+            <div class="theme-name">Green</div>
+          </div>
         </div>
       </div>
       <div class="qrcode">
@@ -53,6 +62,7 @@ import { mapMutations } from 'vuex'
 import setting from '../lib/dexie/setting'
 import { sites } from '../lib/site/sites'
 import '../lib/cloud/index.js'
+import { shell } from 'electron'
 export default {
   name: 'setting',
   data () {
@@ -104,6 +114,9 @@ export default {
   },
   methods: {
     ...mapMutations(['SET_THEME', 'SET_LANGUAGE', 'SET_SITE']),
+    linkOpen (e) {
+      shell.openExternal(e)
+    },
     languageClick (e) {
       this.language = e
       this.show.language = false
@@ -169,6 +182,7 @@ export default {
       text-decoration: none;
       margin: 0 10px;
       font-size: 14px;
+      cursor: pointer;
     }
   }
   .change{