🐱‍👤 新增一键同步所有收藏, 优化样式 🐱‍🏍

package.json

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

src/assets/scss/style.scss

@@ -85,9 +85,25 @@
   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;

src/assets/scss/theme/dark.scss

@@ -34,6 +34,14 @@
   }
   .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 +207,7 @@
           }
           &.last-tip {
             color: var(--d-fc-1);
+            font-size: 14px;
           }
         }
       }
@@ -229,6 +238,9 @@
               background-color: var(--d-c-2);
               color: var(--d-fc-3);
             }
+            &:hover{
+              background-color: var(--d-c-3);
+            }
           }
         }
         .list-history{
@@ -324,4 +336,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

@@ -34,6 +34,14 @@
   }
   .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 +207,7 @@
           }
           &.last-tip {
             color: var(--g-fc-1);
+            font-size: 14px;
           }
         }
       }
@@ -229,6 +238,9 @@
               background-color: var(--g-c-2);
               color: var(--g-fc-3);
             }
+            &:hover{
+              background-color: var(--d-c-3);
+            }
           }
         }
         .list-history{

src/assets/scss/theme/light.scss

@@ -34,6 +34,14 @@
   }
   .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 +207,7 @@
           }
           &.last-tip {
             color: var(--l-fc-1);
+            font-size: 14px;
           }
         }
       }
@@ -229,6 +238,9 @@
               background-color: var(--l-c-2);
               color: var(--l-fc-3);
             }
+            &:hover{
+              background-color: var(--d-c-3);
+            }
           }
         }
         .list-history{

src/assets/scss/theme/pink.scss

@@ -34,6 +34,14 @@
   }
   .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 +207,7 @@
           }
           &.last-tip {
             color: var(--p-fc-1);
+            font-size: 14px;
           }
         }
       }
@@ -229,6 +238,9 @@
               background-color: var(--p-c-2);
               color: var(--p-fc-3);
             }
+            &:hover{
+              background-color: var(--d-c-3);
+            }
           }
         }
         .list-history{

src/components/History.vue

@@ -2,9 +2,11 @@
   <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>
@@ -171,7 +173,6 @@ export default {
   .body{
     width: 100%;
     height: 100%;
-    overflow: auto;
   }
 }
 </style>

src/components/Play.vue

@@ -577,17 +577,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/Star.vue

@@ -1,12 +1,12 @@
 <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 style="display: flex; flex-direction: row-reverse">
-              <span class="btn"  @click.stop="updateAllEvent(list)">同步所有收藏</span>
-            </li>
             <li v-for="(i, j) in list" :key="j" @click="detailEvent(i)">
               <span class="name">{{i.name}}</span>
               <span class="type">{{i.type}}</span>
@@ -197,7 +197,6 @@ export default {
   .body{
     width: 100%;
     height: 100%;
-    overflow: auto;
   }
 }
 </style>