src/App.vue

@@ -4,22 +4,22 @@
       <Home />
     </el-main>
     <el-footer id="app-footer">
-      <div>
+      <el-row>
         <a href="https://git.unlock-music.dev/um/web" target="_blank">音乐解锁</a>({{ version }})
         ：移除已购音乐的加密保护。
         <a href="https://git.unlock-music.dev/um/web/wiki/使用提示" target="_blank">使用提示</a>
-      </div>
+      </el-row>
-      <div>
+      <el-row>
         目前支持 网易云音乐(ncm), QQ音乐(qmc, mflac, mgg), 酷狗音乐(kgm), 虾米音乐(xm), 酷我音乐(.kwm)
         <a href="https://git.unlock-music.dev/um/web/src/branch/master/README.md" target="_blank">更多</a>。
-      </div>
+      </el-row>
-      <div>
+      <el-row>
         <!--如果进行二次开发，此行版权信息不得移除且应明显地标注于页面上-->
         <span>Copyright &copy; 2019 - {{ new Date().getFullYear() }} MengYX</span>
         音乐解锁使用
         <a href="https://git.unlock-music.dev/um/web/src/branch/master/LICENSE" target="_blank">MIT许可协议</a>
         开放源代码
-      </div>
+      </el-row>
     </el-footer>
   </el-container>
 </template>

src/component/ConfigDialog.vue

@@ -4,6 +4,16 @@ label {
   line-height: 1.2;
   display: block;
 }
+.item-desc {
+  color: #aaa;
+  font-size: small;
+  display: block;
+  line-height: 1.2;
+  margin-top: 0.2em;
+}
+.item-desc a {
+  color: #aaa;
+}
 
 form >>> input {
   font-family: 'Courier New', Courier, monospace;
@@ -29,7 +39,7 @@ form >>> input {
           </el-form-item>
         </label>
 
-        <p class="tip">
+        <p class="item-desc">
           下载该加密文件的 JOOX 应用所记录的设备唯一识别码。
           <br />
           参见：

src/component/EditDialog.vue

@@ -1,4 +1,24 @@
 <style scoped>
+label {
+  cursor: pointer;
+  line-height: 1.2;
+  display: block;
+}
+.item-desc {
+  color: #aaa;
+  font-size: small;
+  display: block;
+  line-height: 1.2;
+  margin-top: 0.2em;
+}
+.item-desc a {
+  color: #aaa;
+}
+
+form >>> input {
+  font-family: 'Courier New', Courier, monospace;
+}
+
 * >>> .um-edit-dialog {
   max-width: 90%;
   width: 30em;
@@ -9,62 +29,57 @@
   <el-dialog @close="cancel()" title="音乐标签编辑" :visible="show" custom-class="um-edit-dialog" center>
     <el-form ref="form" status-icon :model="form" label-width="0">
       <section>
-        <div class="music-cover">
+        <el-image v-show="!editPicture" :src="imgFile.url || picture" style="width: 100px; height: 100px">
-          <el-image v-show="!editPicture" :src="imgFile.url || picture">
+          <div slot="error" class="image-slot el-image__error">暂无封面</div>
-            <div slot="error" class="image-slot el-image__error">暂无封面</div>
+        </el-image>
-          </el-image>
+        <el-upload v-show="editPicture" :auto-upload="false" :on-change="addFile" :on-remove="rmvFile" :show-file-list="true" :limit="1" list-type="picture" action="" drag>
-          <el-upload v-show="editPicture" :auto-upload="false" :on-change="addFile" :on-remove="rmvFile" :show-file-list="true" :limit="1" list-type="picture" action="" drag>
+          <i class="el-icon-upload" />
-            <i class="el-icon-upload" />
+          <div class="el-upload__text">将新图片拖到此处，或<em>点击选择</em><br />以替换自动匹配的图片</div>
-            <div class="el-upload__text">将新图片拖到此处，或<em>点击选择</em><br />以替换自动匹配的图片</div>
+          <div slot="tip" class="el-upload__tip">
-            <div slot="tip" class="el-upload__tip">
+            新拖到此处的图片将覆盖原始图片
-              新拖到此处的图片将覆盖原始图片
+          </div>
-            </div>
+        </el-upload> 
-          </el-upload>
+        <i
-          <i :class="{'el-icon-edit': !editPicture, 'el-icon-check': editPicture}"
+          :class="{'el-icon-edit': !editPicture, 'el-icon-check': editPicture}"
-               @click="changeCover"></i>
+          @click="changeCover"
-        </div>
+        ></i><br />
+        标题: 
+        <span v-show="!editTitle">{{title}}</span>
+        <el-input v-show="editTitle" v-model="title"></el-input>
+        <i
+          :class="{'el-icon-edit': !editTitle, 'el-icon-check': editTitle}"
+          @click="editTitle = !editTitle"
+        ></i><br />
+        艺术家: 
+        <span v-show="!editArtist">{{artist}}</span>
+        <el-input v-show="editArtist" v-model="artist"></el-input>
+        <i
+          :class="{'el-icon-edit': !editArtist, 'el-icon-check': editArtist}"
+          @click="editArtist = !editArtist"
+        ></i><br />
+        专辑: 
+        <span v-show="!editAlbum">{{album}}</span>
+        <el-input v-show="editAlbum" v-model="album"></el-input>
+        <i
+          :class="{'el-icon-edit': !editAlbum, 'el-icon-check': editAlbum}"
+          @click="editAlbum = !editAlbum"
+        ></i><br />
+        专辑艺术家: 
+        <span v-show="!editAlbumartist">{{albumartist}}</span>
+        <el-input v-show="editAlbumartist" v-model="albumartist"></el-input>
+        <i
+          :class="{'el-icon-edit': !editAlbumartist, 'el-icon-check': editAlbumartist}"
+          @click="editAlbumartist = !editAlbumartist"
+        ></i><br />
+        风格: 
+        <span v-show="!editGenre">{{genre}}</span>
+        <el-input v-show="editGenre" v-model="genre"></el-input>
+        <i
+          :class="{'el-icon-edit': !editGenre, 'el-icon-check': editGenre}"
+          @click="editGenre = !editGenre"
+        ></i><br />
 
-        <div class="edit-item">
+        <p class="item-desc">
-          <div class="label">标题</div>
-          <div class="value" v-show="!editTitle">{{title}}</div>
-          <el-input class="input" size="small" v-show="editTitle" v-model="title"/>
-          <i :class="{'el-icon-edit': !editTitle, 'el-icon-check': editTitle}"
-             @click="editTitle = !editTitle"/>
-        </div>
-        <div class="edit-item">
-          <div class="label">艺术家</div>
-          <div class="value" v-show="!editArtist">{{artist}}</div>
-          <el-input class="input" size="small" v-show="editArtist" v-model="artist"/>
-          <i :class="{'el-icon-edit': !editArtist, 'el-icon-check': editArtist}"
-             @click="editArtist = !editArtist"
-          />
-        </div>
-        <div class="edit-item">
-          <div class="label">专辑</div>
-          <div class="value" v-show="!editAlbum">{{album}}</div>
-          <el-input class="input" size="small" v-show="editAlbum" v-model="album"/>
-          <i :class="{'el-icon-edit': !editAlbum, 'el-icon-check': editAlbum}"
-             @click="editAlbum = !editAlbum"
-          />
-        </div>
-        <div class="edit-item">
-          <div class="label">专辑艺术家</div>
-          <div class="value" v-show="!editAlbumartist">{{albumartist}}</div>
-          <el-input class="input" size="small" v-show="editAlbumartist" v-model="albumartist"/>
-          <i :class="{'el-icon-edit': !editAlbumartist, 'el-icon-check': editAlbumartist}"
-             @click="editAlbumartist = !editAlbumartist"
-          />
-        </div>
-        <div class="edit-item">
-          <div class="label">风格</div>
-          <div class="value" v-show="!editGenre">{{genre}}</div>
-          <el-input class="input" size="small" v-show="editGenre" v-model="genre"/>
-          <i :class="{'el-icon-edit': !editGenre, 'el-icon-check': editGenre}"
-             @click="editGenre = !editGenre"
-          />
-        </div>
-
-        <p class="tip">
           为了节省您设备的资源，请在确定前充分检查，避免反复修改。<br />
           直接关闭此对话框不会保留所作的更改。
         </p>

src/component/PreviewTable.vue

@@ -9,7 +9,7 @@
     </el-table-column>
     <el-table-column label="歌曲">
       <template #default="scope">
-        <p>{{ scope.row.title }}</p>
+        <span>{{ scope.row.title }}</span>
       </template>
     </el-table-column>
     <el-table-column label="歌手">

src/scss/_dark-mode.scss

@@ -10,46 +10,236 @@
     background-color: $dark-bg;
   }
 
-  // 编辑歌曲信息
+  // FORM
-  .music-cover{
+  .el-radio{
-    i{
+    &__label{
-      &:hover{
+      color: $dark-text-main;
-        color: $color-checkbox;
+    }
+    &__input{
+      color: $dark-text-info;
+      .el-radio__inner{
+        border-color: $dark-border;
+        background-color: $dark-btn-bg;
       }
     }
-    .el-image{
+
-      border: 1px solid $dark-border;
+    &.is-checked{
+      .el-radio__inner{
+        background-color: $blue;
+      }
+      .el-radio__label{
+        font-weight: bold;
+      }
     }
   }
-  .edit-item{
+
-    .label{
+  .el-checkbox.is-bordered{
+    border-color: $dark-border;
+    color: $dark-text-main;
+    background-color: $dark-btn-bg;
+    .el-checkbox__inner{
+      background-color: $dark-btn-bg-highlight;
+      border-color: $dark-border-highlight;
     }
-    .value{
+    &:hover{
-    }
+      border-color: $dark-border-highlight;
-    .input{
+      .el-checkbox__inner{
-      input{
+        background-color: $dark-btn-bg-highlight;
-        background-color: transparent !important;
+        border-color: $dark-border-highlight;
-        border-bottom: 1px solid $dark-border;
+      }
+      .el-checkbox__label{
+        color: $dark-text-info;
       }
     }
-    i{
+    &.is-checked{
+      background-color: $blue;
+      .el-checkbox__inner{
+        border-color: white;
+      }
+      .el-checkbox__label{
+        color: white;
+        font-weight: bold;
+      }
       &:hover{
-        color: $color-checkbox;
+        border-color: $blue;
+        .el-checkbox__inner{
+          background-color: white;
+        }
       }
     }
   }
 
 
-  // footer
+
-  #app-footer {
+  // BUTTON
-    a {
+  .el-button{
-      color: lighten($text-comment, 5%);
+    background-color: $dark-btn-bg;
-      &:hover{
+    border-color: $dark-border;
-        color: $color-link;
+    color: $dark-text-main;
+
+    &:active{
+      transform: translateY(2px);
+    }
+
+    &--default{
+      &.is-plain {
+        background-color: $dark-btn-bg;
+        &:hover {
+          background-color: $blue;
+          border-color: $blue;
+          color: white;
+        }
+      }
+      &.is-circle {
+        background-color: $dark-blue;
+        border-color: $dark-blue;
+        &:hover {
+          background-color: $blue;
+          border-color: $blue;
+          color: white;
+        }
+      }
+    }
+
+    &--success{
+      &.is-plain {
+        background-color: $dark-btn-bg;
+        &:hover {
+          background-color: $green;
+          border-color: $green;
+          color: white;
+        }
+      }
+      &.is-circle {
+        background-color: $dark-green;
+        border-color: $dark-green;
+        &:hover {
+          background-color: $green;
+          border-color: $green;
+          color: white;
+        }
+      }
+    }
+    &--danger{
+      &.is-plain{
+        border-color: $dark-border;
+        background-color: $dark-btn-bg;
+        &:hover{
+          background-color: $red;
+          border-color: $red;
+        }
+      }
+      &.is-circle {
+        background-color: $dark-red;
+        border-color: $dark-red;
+        &:hover {
+          background-color: $red;
+          border-color: $red;
+          color: white;
+        }
       }
     }
   }
 
+  // 文件拖放区
+  .el-upload__tip{
+    color: $dark-text-info;
+  }
+  .el-upload-dragger{
+    background-color: $dark-uploader-bg;
+    border-color: $dark-border;
+    .el-upload__text{
+      color: $dark-text-info;
+    }
+    &:hover{
+      background: $dark-uploader-bg-highlight;
+      border-color: $dark-border-highlight;
+    }
+  }
+
+  // TABLE
+  .el-table{
+    background-color: $dark-bg-td;
+    &:before{ // 去除表格末尾的横线
+      content: none;
+    }
+    &__header{
+      th{
+        border-bottom-color: $dark-border !important;
+      }
+    }
+    th.el-table__cell{
+      background-color: $dark-bg-th;
+      color: $dark-text-info;
+    }
+    td{
+      border-bottom-color: $dark-border !important;
+    }
+    tr{
+      background-color: $dark-bg-td;
+      color: $dark-text-main;
+      &:hover{
+        td{
+          background-color: $dark-bg-th !important;
+        }
+      }
+    }
+  }
+
+  // LINKS
+  a{
+    text-decoration: none;
+    color: darken($dark-color-link, 15%);
+    &:hover{
+      color: $dark-color-link;
+    }
+  }
+
+  // ALERT
+  .el-notification{
+    background-color: $dark-btn-bg-highlight;
+    border-color: $dark-border;
+    &__title{
+      color: white;
+    }
+    &__content{
+      color: $dark-text-info;
+    }
+  }
+
+  // DIALOG
+  .el-dialog{
+    background-color: $dark-dialog-bg;
+    .el-dialog__header{
+      .el-dialog__title{
+        color: $dark-text-main;
+      }
+    }
+    .el-dialog__body{
+      color: $dark-text-main;
+      .el-input{
+        .el-input__inner{
+          color: $dark-text-main;
+          background-color: $dark-btn-bg;
+        }
+        .el-input__suffix{
+          .el-input__suffix-inner{
+          }
+        }
+        .el-input__count{
+          .el-input__count-inner{
+            background-color: transparent;
+          }
+        }
+      }
+    }
+    .item-desc{
+      color: $dark-text-info;
+    }
+  }
+
+
+
   // 自定义样式
   // 首页弹窗提示信息的 更新信息 面板
   .update-info{

src/scss/_element-ui-overrite.scss

@@ -0,0 +1,39 @@
+$color-checkbox: $blue;
+$color-border-el: #DCDFE6;
+
+$btn-radius: 6px;
+
+/* FORM */
+// checkbox
+.el-checkbox.is-bordered{
+  @include border-radius($btn-radius) ;
+  &:hover{
+    border-color: $color-checkbox;
+    .el-checkbox__label{
+      color: $color-checkbox;
+    }
+  }
+  .el-checkbox__input.is-focus{
+    .el-checkbox__inner{
+      border-color: $color-border-el;
+    }
+  }
+  &.is-checked{
+    background-color: $color-checkbox;
+    .el-checkbox__label{
+      color: white;
+    }
+    .el-checkbox__inner{
+      border-color: white;
+      background-color: white;
+      &:after{
+        border-color: $color-checkbox;
+      }
+    }
+  }
+}
+
+// el-button
+.el-button{
+  @include border-radius($btn-radius) ;
+}

src/scss/_element-ui-overwrite.scss

@@ -1,291 +0,0 @@
-$color-checkbox: $blue;
-$color-border-el: #DCDFE6;
-
-$btn-radius: 6px;
-
-/* FORM */
-// checkbox
-.el-checkbox.is-bordered{
-  @include border-radius($btn-radius) ;
-  &:hover{
-    border-color: $color-checkbox;
-    .el-checkbox__label{
-      color: $color-checkbox;
-    }
-  }
-  .el-checkbox__input.is-focus{
-    .el-checkbox__inner{
-      border-color: $color-border-el;
-    }
-  }
-  &.is-checked{
-    background-color: $color-checkbox;
-    .el-checkbox__label{
-      color: white;
-    }
-    .el-checkbox__inner{
-      border-color: white;
-      background-color: white;
-      &:after{
-        border-color: $color-checkbox;
-      }
-    }
-  }
-}
-
-// el-button
-.el-button{
-  @include border-radius($btn-radius) ;
-}
-
-// upload
-.el-upload-dragger{
-  &:hover{
-    background-color: transparentize($color-checkbox, 0.9);
-  }
-}
-.el-upload__tip{
-  text-align: center;
-  color: $text-comment;
-}
-
-
-// dialog
-.el-dialog{
-  @include border-radius(5px);
-  &.el-dialog--center{
-    .el-dialog__body{
-      padding: 25px 25px 15px;
-    }
-    .el-dialog__footer{
-      padding: 10px 20px 30px;
-    }
-  }
-}
-
-
-
-@media (prefers-color-scheme: dark) {
-
-  // FORM
-  .el-radio{
-    &__label{
-      color: $dark-text-main;
-    }
-    &__input{
-      color: $dark-text-info;
-      .el-radio__inner{
-        border-color: $dark-border;
-        background-color: $dark-btn-bg;
-      }
-    }
-
-    &.is-checked{
-      .el-radio__inner{
-        background-color: $blue;
-      }
-      .el-radio__label{
-        font-weight: bold;
-      }
-    }
-  }
-
-  .el-checkbox.is-bordered{
-    border-color: $dark-border;
-    color: $dark-text-main;
-    background-color: $dark-btn-bg;
-    .el-checkbox__inner{
-      background-color: $dark-btn-bg-highlight;
-      border-color: $dark-border-highlight;
-    }
-    &:hover{
-      border-color: $dark-border-highlight;
-      .el-checkbox__inner{
-        background-color: $dark-btn-bg-highlight;
-        border-color: $dark-border-highlight;
-      }
-      .el-checkbox__label{
-        color: $dark-text-info;
-      }
-    }
-    &.is-checked{
-      background-color: $blue;
-      .el-checkbox__inner{
-        border-color: white;
-      }
-      .el-checkbox__label{
-        color: white;
-        font-weight: bold;
-      }
-      &:hover{
-        border-color: $blue;
-        .el-checkbox__inner{
-          background-color: white;
-        }
-      }
-    }
-  }
-
-
-
-  // BUTTON
-  .el-button{
-    background-color: $dark-btn-bg;
-    border-color: $dark-border;
-    color: $dark-text-main;
-
-    &:active{
-      transform: translateY(2px);
-    }
-
-    &--default{
-      &.is-plain {
-        background-color: $dark-btn-bg;
-        &:hover {
-          background-color: $blue;
-          border-color: $blue;
-          color: white;
-        }
-      }
-      &.is-circle {
-        background-color: $dark-blue;
-        border-color: $dark-blue;
-        &:hover {
-          background-color: $blue;
-          border-color: $blue;
-          color: white;
-        }
-      }
-    }
-
-    &--success{
-      &.is-plain {
-        background-color: $dark-btn-bg;
-        &:hover {
-          background-color: $green;
-          border-color: $green;
-          color: white;
-        }
-      }
-      &.is-circle {
-        background-color: $dark-green;
-        border-color: $dark-green;
-        &:hover {
-          background-color: $green;
-          border-color: $green;
-          color: white;
-        }
-      }
-    }
-    &--danger{
-      &.is-plain{
-        border-color: $dark-border;
-        background-color: $dark-btn-bg;
-        &:hover{
-          background-color: $red;
-          border-color: $red;
-        }
-      }
-      &.is-circle {
-        background-color: $dark-red;
-        border-color: $dark-red;
-        &:hover {
-          background-color: $red;
-          border-color: $red;
-          color: white;
-        }
-      }
-    }
-  }
-
-  // 文件拖放区
-  .el-upload__tip{
-    color: $dark-text-info;
-  }
-  .el-upload-dragger{
-    background-color: $dark-uploader-bg;
-    border-color: $dark-border;
-    .el-upload__text{
-      color: $dark-text-info;
-    }
-    &:hover{
-      background: $dark-uploader-bg-highlight;
-      border-color: $dark-border-highlight;
-    }
-  }
-
-  // TABLE
-  .el-table{
-    background-color: $dark-bg-td;
-    &:before{ // 去除表格末尾的横线
-      content: none;
-    }
-    &__header{
-      th{
-        border-bottom-color: $dark-border !important;
-      }
-    }
-    th.el-table__cell{
-      background-color: $dark-bg-th;
-      color: $dark-text-info;
-    }
-    td{
-      border-bottom-color: $dark-border !important;
-    }
-    tr{
-      background-color: $dark-bg-td;
-      color: $dark-text-main;
-      &:hover{
-        td{
-          background-color: $dark-bg-th !important;
-        }
-      }
-    }
-  }
-
-
-  // ALERT
-  .el-notification{
-    background-color: $dark-btn-bg-highlight;
-    border-color: $dark-border;
-    &__title{
-      color: white;
-    }
-    &__content{
-      color: $dark-text-info;
-    }
-  }
-
-  // DIALOG
-  .el-dialog{
-    background-color: $dark-dialog-bg;
-    .el-dialog__header{
-      .el-dialog__title{
-        color: $dark-text-main;
-      }
-    }
-    .el-dialog__body{
-      color: $dark-text-main;
-      .el-input{
-        .el-input__inner{
-          border-color: $dark-border;
-          color: $dark-text-main;
-          background-color: $dark-btn-bg;
-        }
-        .el-input__suffix{
-          .el-input__suffix-inner{
-          }
-        }
-        .el-input__count{
-          .el-input__count-inner{
-            background-color: transparent;
-          }
-        }
-      }
-    }
-    .item-desc{
-      color: $dark-text-info;
-    }
-  }
-
-}

src/scss/_normal.scss

@@ -0,0 +1,38 @@
+body{
+  font-family: $font-family;
+  font-size: $fz-main;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  text-align: center;
+  color: $text-main;
+  padding-top: 30px;
+}
+
+#app-footer a {
+  padding-left: 0.2em;
+  padding-right: 0.2em;
+}
+
+#app-footer {
+  text-align: center;
+  font-size: small;
+}
+
+#app-control {
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+audio{
+  margin-bottom: 15px; // 播放控件与表格间隔
+}
+
+a{
+  color: darken($color-link, 15%);
+  &:hover{
+    color: $color-link;
+  }
+}

src/scss/_utility.scss

@@ -66,7 +66,6 @@
 }
 
 .btn-like{
-  cursor: pointer;
   &:active{
     @include transform(translateY(2px))
   }

src/scss/_variables.scss

@@ -3,17 +3,18 @@ $blue      : #409EFF;
 $red       : #F56C6C;
 $green     : #85ce61;
 
-// TEXT COLOR
+// TEXT
-$text-main      : #2C3E50;
+$text-main : #2C3E50;
-$text-copyright : #777;
+$color-link: $blue;
-$text-comment   : #999;
-$color-link     : $blue;
 
-// FONT SIZE
 $fz-main: 14px;
 $fz-mini-title: 13px;
 $fz-mini-content: 12px;
 
+$font-family: "Helvetica Neue", Helvetica, "PingFang SC",
+"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+
+
 // DARK MODE
 $dark-border                : lighten(black, 25%);
 $dark-border-highlight      : lighten(black, 55%);

src/scss/unlock-music.scss

@@ -1,127 +1,11 @@
 @import "variables";
 @import "utility";
 @import "gaps";
-@import "element-ui-overwrite";
+@import "element-ui-overrite";
 
-// MAIN CONTENT
+@import "normal";
-body{
+@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级
-  margin: 0;
-  padding: 0;
-  border: 0;
-  box-sizing: border-box;
-  font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
-  font-size: $fz-main;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 
-#app {
-  text-align: center;
-  color: $text-main;
-  padding: 30px;
-}
-
-// 音频文件操作
-#app-control {
-  margin-top: 20px;
-}
-
-// 音频播放
-audio{
-  margin-top: 20px;
-}
-
-.table-content{
-  margin-top: 20px;
-}
-
-// 编辑歌曲信息
-.music-cover{
-  margin-bottom: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-flow: column nowrap;
-  i{
-    margin-top: 10px;
-    @extend .btn-like;
-    &:hover{
-      color: $color-checkbox;
-    }
-  }
-  .el-image{
-    padding: 5px;
-    @include border-radius(5px);
-    border: 1px solid $color-border-el;
-    width: 150px;
-    height: 150px;
-  }
-}
-.edit-item{
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  .label{
-    font-weight: bold;
-    width: 80px;
-    text-align: right;
-    flex-shrink: 0;
-  }
-  .value{
-    padding: 5px 0;
-    height: 20px;
-    line-height: 20px;
-    margin-left: 10px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .input{
-    margin-left: 10px;
-    input{
-      font-family: inherit;
-      height: 30px;
-      line-height: 20px;
-      @include border-radius(0);
-      border: none;
-      border-bottom: 1px solid $color-border-el;
-      padding: 5px 5px;
-    }
-  }
-  i{
-    margin-left: 10px;
-    @extend .btn-like;
-    &:hover{
-      color: $color-checkbox;
-    }
-  }
-}
-
-.tip{
-  margin-top: 20px;
-  color: $text-comment;
-  font-size: $fz-mini-content;
-  a{
-    color: inherit;
-  }
-}
-
-// footer
-#app-footer {
-  margin-top: 40px;
-  text-align: center;
-  color: $text-copyright;
-  line-height: 1.3;
-  font-size: $fz-mini-content;
-  a {
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
-    color: darken($text-copyright, 10%);
-    &:hover{
-      color: $color-link;
-    }
-  }
-}
 
 // 首页弹窗提示信息的 更新信息 面板
 .update-info{
@@ -131,14 +15,12 @@ audio{
   margin: 10px 0;
   .update-title{
     font-size: $fz-mini-title;
-    padding: 3px 10px;
+    padding: 5px 10px;
     background-color: $color-border-el;
   }
   .update-content{
     font-size: $fz-mini-content;
     line-height: 1.5;
-    padding: 5px 8px;
+    padding: 10px;
   }
 }
-
-@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级

src/view/Home.vue

@@ -47,12 +47,12 @@
     <audio :autoplay="playing_auto" :src="playing_url" controls />
 
     <PreviewTable
-      class="table-content"
       :policy="filename_policy"
       :table-data="tableData"
       @download="saveFile"
       @edit="editFile"
-      @play="changePlaying" />
+      @play="changePlaying"
+    />
   </div>
 </template>