chore: bump version v1.6.11

feat: improve task detail

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Motrix",
-  "version": "1.6.9",
+  "version": "1.6.11",
   "description": "A full-featured download manager",
   "homepage": "https://motrix.app",
   "author": {
@@ -204,9 +204,9 @@
     "electron-is": "^3.0.0",
     "electron-log": "^4.3.5",
     "electron-store": "^8.0.0",
-    "electron-updater": "^4.3.8",
+    "electron-updater": "^4.3.9",
     "element-ui": "^2.15.1",
-    "i18next": "^20.2.2",
+    "i18next": "^20.2.4",
     "lodash": "^4.17.21",
     "node-fetch": "^2.6.1",
     "normalize.css": "^8.0.1",
@@ -221,24 +221,24 @@
     "ws": "^7.4.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.0",
+    "@babel/core": "^7.14.2",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.14.1",
+    "@babel/plugin-transform-runtime": "^7.14.2",
+    "@babel/preset-env": "^7.14.2",
     "@babel/register": "^7.13.16",
     "@electron/remote": "^1.1.0",
     "@motrix/multispinner": "^0.2.2",
     "@vue/eslint-config-standard": "^6.0.0",
-    "ajv": "^8.2.0",
+    "ajv": "^8.4.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-component": "^1.1.1",
-    "cfonts": "^2.9.1",
+    "cfonts": "^2.9.2",
     "chalk": "^4.1.1",
     "copy-webpack-plugin": "^8.1.1",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.4",
-    "css-minimizer-webpack-plugin": "^2.0.0",
+    "css-minimizer-webpack-plugin": "^3.0.0",
     "del": "^6.0.0",
     "electron": "^11.4.5",
     "electron-builder": "22.10.5",
@@ -246,9 +246,9 @@
     "electron-devtools-installer": "^3.2.0",
     "electron-notarize": "^1.0.0",
     "electron-osx-sign": "^0.5.0",
-    "eslint": "^7.25.0",
+    "eslint": "^7.26.0",
     "eslint-friendly-formatter": "^4.0.1",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.23.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-vue": "^7.9.0",
@@ -257,15 +257,15 @@
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "1.6.0",
     "node-loader": "^2.0.0",
-    "sass": "^1.32.12",
-    "sass-loader": "^11.0.1",
+    "sass": "^1.32.13",
+    "sass-loader": "^11.1.1",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.1",
+    "terser-webpack-plugin": "^5.1.2",
     "url-loader": "^4.1.1",
-    "vue-loader": "^15.9.6",
+    "vue-loader": "^15.9.7",
     "vue-style-loader": "^4.1.3",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "^5.36.2",
+    "webpack": "^5.37.0",
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-hot-middleware": "^2.25.0",

src/main/Application.js

@@ -557,8 +557,9 @@ export default class Application extends EventEmitter {
       win.setProgressBar(0)
     })
 
-    this.updateManager.on('will-updated', (event) => {
+    this.updateManager.on('will-updated', async (event) => {
       this.windowManager.setWillQuit(true)
+      await this.stop()
     })
 
     this.updateManager.on('update-error', (event) => {
@@ -651,7 +652,7 @@ export default class Application extends EventEmitter {
     })
 
     this.on('application:change-theme', (theme) => {
-      this.themeManager.updateAppAppearance(theme)
+      this.themeManager.updateSystemTheme(theme)
       this.sendCommandToAll('application:update-theme', { theme })
     })
 

src/main/core/UpdateManager.js

@@ -17,8 +17,10 @@ export default class UpdateManager extends EventEmitter {
     this.options = options
     this.i18n = getI18n()
 
+    this.isChecking = false
     this.updater = autoUpdater
     this.updater.autoDownload = false
+    this.updater.autoInstallOnAppQuit = false
     this.updater.logger = logger
     this.autoCheckData = {
       checkEnable: this.options.autoCheck,
@@ -40,9 +42,10 @@ export default class UpdateManager extends EventEmitter {
     this.updater.on('update-not-available', this.updateNotAvailable.bind(this))
     this.updater.on('download-progress', this.updateDownloadProgress.bind(this))
     this.updater.on('update-downloaded', this.updateDownloaded.bind(this))
+    this.updater.on('update-cancelled', this.updateCancelled.bind(this))
     this.updater.on('error', this.updateError.bind(this))
 
-    if (this.autoCheckData.checkEnable) {
+    if (this.autoCheckData.checkEnable && !this.isChecking) {
       this.autoCheckData.userCheck = false
       this.updater.checkForUpdates()
     }
@@ -54,6 +57,7 @@ export default class UpdateManager extends EventEmitter {
   }
 
   checkingForUpdate () {
+    this.isChecking = true
     this.emit('checking')
   }
 
@@ -73,6 +77,7 @@ export default class UpdateManager extends EventEmitter {
   }
 
   updateNotAvailable (event, info) {
+    this.isChecking = false
     this.emit('update-not-available', info)
     if (this.autoCheckData.userCheck) {
       dialog.showMessageBox({
@@ -102,20 +107,26 @@ export default class UpdateManager extends EventEmitter {
       title: this.i18n.t('app.check-for-updates-title'),
       message: this.i18n.t('app.update-downloaded-message')
     }).then(_ => {
+      this.isChecking = false
       this.emit('will-updated')
-      setImmediate(() => {
+      setTimeout(() => {
         this.updater.quitAndInstall()
-      })
+      }, 200)
     })
   }
 
+  updateCancelled () {
+    this.isChecking = false
+  }
+
   updateError (event, error) {
+    this.isChecking = false
     this.emit('update-error', error)
     const msg = (error == null)
-      ? this.i18n.t('update-error-message')
+      ? this.i18n.t('app.update-error-message')
       : (error.stack || error).toString()
 
     this.updater.logger.warn(`[Motrix] update-error: ${msg}`)
-    dialog.showErrorBox(msg)
+    dialog.showErrorBox('Error', msg)
   }
 }

src/main/ui/ThemeManager.js

@@ -1,8 +1,9 @@
 import { EventEmitter } from 'events'
-import { nativeTheme, systemPreferences } from 'electron'
+import { nativeTheme } from 'electron'
 import is from 'electron-is'
 
 import { APP_THEME } from '@shared/constants'
+import logger from '../core/Logger'
 import { getSystemTheme } from '../utils'
 
 export default class ThemeManager extends EventEmitter {
@@ -31,19 +32,13 @@ export default class ThemeManager extends EventEmitter {
     nativeTheme.on('updated', () => {
       const theme = getSystemTheme()
       this.systemTheme = theme
-      console.log('nativeTheme updated===>', theme)
+      logger.info('[Motrix] nativeTheme updated===>', theme)
       this.emit('system-theme-change', theme)
     })
   }
 
-  /**
-   * deprecated
-   * @see https://www.electronjs.org/docs/all#systempreferencessetapplevelappearanceappearance-macos-deprecated
-   */
-  updateAppAppearance (theme) {
-    if (!is.macOS() || theme !== APP_THEME.LIGHT || theme !== APP_THEME.DARK) {
-      return
-    }
-    systemPreferences.setAppLevelAppearance(theme)
+  updateSystemTheme (theme) {
+    theme = theme === APP_THEME.AUTO ? 'system' : theme
+    nativeTheme.themeSource = theme
   }
 }

src/renderer/components/About/AboutPanel.vue

@@ -54,12 +54,12 @@
 </script>
 
 <style lang="scss">
-  .app-about-dialog {
-    max-width: 632px;
-    min-width: 380px;
-    .el-dialog__header {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
+.app-about-dialog {
+  max-width: 632px;
+  min-width: 380px;
+  .el-dialog__header {
+    padding-top: 0;
+    padding-bottom: 0;
   }
+}
 </style>

src/renderer/components/About/AppInfo.vue

@@ -49,45 +49,45 @@
 </script>
 
 <style lang="scss">
-  .app-info {
-    position: relative;
-    margin: 8px 0;
-    .app-version span {
-      display: inline-block;
-      vertical-align: bottom;
-      font-size: $--font-size-large;
-      margin-left: 20px;
-      color: $--app-version-color;
-      line-height: 18px;
+.app-info {
+  position: relative;
+  margin: 8px 0;
+  .app-version span {
+    display: inline-block;
+    vertical-align: bottom;
+    font-size: $--font-size-large;
+    margin-left: 20px;
+    color: $--app-version-color;
+    line-height: 18px;
+  }
+  .app-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: transparent url('~@/assets/app-icon.png') center center no-repeat;
+    background-size: 128px 128px;
+    width: 128px;
+    height: 128px;
+  }
+  .engine-info {
+    margin: 50px 35% 0 8px;
+    h4 {
+      font-size: $--font-size-base;
+      font-weight: normal;
+      color: $--app-engine-title-color;
     }
-    .app-icon {
-      position: absolute;
-      top: 0;
-      right: 0;
-      background: transparent url('~@/assets/app-icon.png') center center no-repeat;
-      background-size: 128px 128px;
-      width: 128px;
-      height: 128px;
-    }
-    .engine-info {
-      margin: 50px 35% 0 8px;
-      h4 {
-        font-size: $--font-size-base;
-        font-weight: normal;
-        color: $--app-engine-title-color;
-      }
-      ul {
-        font-size: 12px;
-        color: $--app-engine-info-color;
-        list-style: none;
-        padding: 0;
-        line-height: 20px;
-        @include clearfix();
-        li {
-          float: left;
-          width: 50%;
-        }
+    ul {
+      font-size: 12px;
+      color: $--app-engine-info-color;
+      list-style: none;
+      padding: 0;
+      line-height: 20px;
+      @include clearfix();
+      li {
+        float: left;
+        width: 50%;
       }
     }
   }
+}
 </style>

src/renderer/components/About/Copyright.vue

@@ -29,22 +29,22 @@
 </script>
 
 <style lang="scss">
-  .copyright {
-    width: 100%;
-    font-size: $--font-size-small;
-    a {
-      color: $--app-copyright-color;
-      text-decoration: none;
-    }
-  }
-  .copyright-left {
-    text-align: left;
+.copyright {
+  width: 100%;
+  font-size: $--font-size-small;
+  a {
+    color: $--app-copyright-color;
+    text-decoration: none;
   }
+}
+.copyright-left {
+  text-align: left;
+}
 
-  .copyright-right {
-    text-align: right;
-    a {
-      margin-left: 30px;
-    }
+.copyright-right {
+  text-align: right;
+  a {
+    margin-left: 30px;
   }
+}
 </style>

src/renderer/components/Aside/Index.vue

@@ -64,40 +64,40 @@
 </script>
 
 <style lang="scss">
-  .aside-inner {
-    display: flex;
-    height: 100%;
-    flex-flow: column;
-  }
-  .logo-mini {
-    margin-top: 40px;
-  }
-  .menu {
-    list-style: none;
-    padding: 0;
-    margin: 0 auto;
-    user-select: none;
-    cursor: default;
-    > li {
-      width: 32px;
-      height: 32px;
-      margin-top: 24px;
-      cursor: pointer;
-      border-radius: 16px;
-      transition: background-color 0.25s;
-      &:hover {
-        background-color: rgba(255, 255, 255, 0.15);
-      }
-    }
-    svg {
-      padding: 6px;
-      color: #fff;
+.aside-inner {
+  display: flex;
+  height: 100%;
+  flex-flow: column;
+}
+.logo-mini {
+  margin-top: 40px;
+}
+.menu {
+  list-style: none;
+  padding: 0;
+  margin: 0 auto;
+  user-select: none;
+  cursor: default;
+  > li {
+    width: 32px;
+    height: 32px;
+    margin-top: 24px;
+    cursor: pointer;
+    border-radius: 16px;
+    transition: background-color 0.25s;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
     }
   }
-  .top-menu {
-    flex: 1;
-  }
-  .bottom-menu {
-    margin-bottom: 24px;
+  svg {
+    padding: 6px;
+    color: #fff;
   }
+}
+.top-menu {
+  flex: 1;
+}
+.bottom-menu {
+  margin-bottom: 24px;
+}
 </style>

src/renderer/components/Icons/Icon.vue

@@ -1,5 +1,6 @@
 <template>
-  <svg version="1.1"
+  <svg
+    version="1.1"
     :class="klass"
     :role="label ? 'img' : 'presentation'"
     :aria-label="label"
@@ -8,60 +9,25 @@
     :width="width"
     :height="height"
     :viewBox="box"
-    :style="style">
+    :style="style"
+  >
     <slot>
       <template v-if="icon && icon.paths">
-        <path v-for="(path, i) in icon.paths" :key="`path-${i}`" v-bind="path"/>
+        <path v-for="(path, i) in icon.paths" :key="`path-${i}`" v-bind="path" />
       </template>
       <template v-if="icon && icon.polygons">
-        <polygon v-for="(polygon, i) in icon.polygons" :key="`polygon-${i}`" v-bind="polygon"/>
+        <polygon v-for="(polygon, i) in icon.polygons" :key="`polygon-${i}`" v-bind="polygon" />
       </template>
-      <template v-if="icon && icon.raw"><g v-html="raw" v-bind="icon.g"></g></template>
+      <template v-if="icon && icon.raw"><g v-bind="icon.g" v-html="raw" /></template>
     </slot>
   </svg>
 </template>
 
-<style>
-.fa-icon {
-  display: inline-block;
-  fill: currentColor;
-}
-
-.fa-flip-horizontal {
-  transform: scale(-1, 1);
-}
-
-.fa-flip-vertical {
-  transform: scale(1, -1);
-}
-
-.fa-spin {
-  animation: fa-spin 0.5s 0s infinite linear;
-}
-
-.fa-inverse {
-  color: #fff;
-}
-
-.fa-pulse {
-  animation: fa-spin 1s infinite steps(8);
-}
-
-@keyframes fa-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
-
 <script>
   const icons = {}
 
   export default {
-    name: 'fa-icon',
+    name: 'mo-icon',
     props: {
       name: {
         type: String,
@@ -106,12 +72,12 @@
       },
       klass () {
         return {
-          'fa-icon': true,
-          'fa-spin': this.spin,
-          'fa-flip-horizontal': this.flip === 'horizontal',
-          'fa-flip-vertical': this.flip === 'vertical',
-          'fa-inverse': this.inverse,
-          'fa-pulse': this.pulse,
+          'mo-icon': true,
+          'mo-spin': this.spin,
+          'mo-flip-horizontal': this.flip === 'horizontal',
+          'mo-flip-vertical': this.flip === 'vertical',
+          'mo-inverse': this.inverse,
+          'mo-pulse': this.pulse,
           [this.$options.name]: true
         }
       },
@@ -184,7 +150,7 @@
 
       let width = 0
       let height = 0
-      this.$children.forEach(child => {
+      this.$children.forEach((child) => {
         child.outerScale = this.normalizedScale
 
         width = Math.max(width, child.width)
@@ -192,7 +158,7 @@
       })
       this.childrenWidth = width
       this.childrenHeight = height
-      this.$children.forEach(child => {
+      this.$children.forEach((child) => {
         child.x = (width - child.width) / 2
         child.y = (height - child.height) / 2
       })
@@ -221,8 +187,44 @@
     icons
   }
 
-  let cursor = 0xd4937
+  let cursor = 0xD4937
   function getId () {
-    return `fa-${(cursor++).toString(16)}`
+    return `mo-${(cursor++).toString(16)}`
   }
 </script>
+
+<style>
+.mo-icon {
+  display: inline-block;
+  fill: currentColor;
+}
+
+.mo-flip-horizontal {
+  transform: scale(-1, 1);
+}
+
+.mo-flip-vertical {
+  transform: scale(1, -1);
+}
+
+.mo-spin {
+  animation: mo-spin 0.5s 0s infinite linear;
+}
+
+.mo-inverse {
+  color: #fff;
+}
+
+.mo-pulse {
+  animation: mo-spin 1s infinite steps(8);
+}
+
+@keyframes mo-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/renderer/components/Logo/LogoMini.vue

@@ -10,11 +10,7 @@
 
 <script>
   export default {
-    name: 'mo-logo-mini',
-    components: {
-    },
-    methods: {
-    }
+    name: 'mo-logo-mini'
   }
 </script>
 

src/renderer/components/Native/SelectDirectory.vue

@@ -32,6 +32,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-</style>

src/renderer/components/Native/ShowInFolder.vue

@@ -31,6 +31,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-</style>

src/renderer/components/Preference/Advanced.vue

@@ -255,6 +255,7 @@
               v-model="form.userAgent">
             </el-input>
             <el-button-group class="ua-group">
+              <el-button @click="() => changeUA('aria2')">Aria2</el-button>
               <el-button @click="() => changeUA('transmission')">Transmission</el-button>
               <el-button @click="() => changeUA('chrome')">Chrome</el-button>
               <el-button @click="() => changeUA('du')">du</el-button>

src/renderer/components/Preference/Basic.vue

@@ -392,6 +392,10 @@
             label: '5 MB/s',
             value: '5M'
           },
+          {
+            label: '8 MB/s',
+            value: '8M'
+          },
           {
             label: '10 MB/s',
             value: '10M'
@@ -399,6 +403,10 @@
           {
             label: '20 MB/s',
             value: '20M'
+          },
+          {
+            label: '30 MB/s',
+            value: '30M'
           }
         ]
       },
@@ -505,6 +513,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-</style>

src/renderer/components/Preference/Index.vue

@@ -17,59 +17,59 @@
 </script>
 
 <style lang="scss">
-  .form-preference {
-    padding: 16px 7% 64px 0;
-    .el-switch__label {
-      font-weight: normal;
+.form-preference {
+  padding: 16px 7% 64px 0;
+  .el-switch__label {
+    font-weight: normal;
+    color: $--color-text-regular;
+    &.is-active {
       color: $--color-text-regular;
-      &.is-active {
-        color: $--color-text-regular;
+    }
+  }
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: $--color-text-regular;
+  }
+  .el-form-item {
+    a {
+      color: $--color-text-regular;
+      text-decoration: none;
+      &:hover {
+        color: $--color-text-primary;
+        text-decoration: underline;
       }
-    }
-    .el-checkbox__input.is-checked + .el-checkbox__label {
-      color: $--color-text-regular;
-    }
-    .el-form-item {
-      a {
-        color: $--color-text-regular;
-        text-decoration: none;
-        &:hover {
-          color: $--color-text-primary;
-          text-decoration: underline;
-        }
-        &:active {
-          color: $--color-text-primary;
-        }
-      }
-    }
-    .el-form-item.el-form-item--mini {
-      margin-bottom: 32px;
-    }
-    .el-form-item__content {
-      color: $--color-text-regular;
-    }
-    .form-item-sub {
-      margin-bottom: 8px;
-      &:last-of-type {
-        margin-bottom: 0;
+      &:active {
+        color: $--color-text-primary;
       }
     }
   }
-  .form-actions {
-    position: sticky;
-    bottom: 0;
-    left: auto;
-    z-index: 10;
-    width: -webkit-fill-available;
-    box-sizing: border-box;
-    padding: 24px 36px 24px 0;
+  .el-form-item.el-form-item--mini {
+    margin-bottom: 32px;
   }
-  .action-link {
-    cursor: pointer;
-    color: $--link-color;
-    &:hover {
-      color: $--link-hover-color;
-      text-decoration: underline;
+  .el-form-item__content {
+    color: $--color-text-regular;
+  }
+  .form-item-sub {
+    margin-bottom: 8px;
+    &:last-of-type {
+      margin-bottom: 0;
     }
   }
+}
+.form-actions {
+  position: sticky;
+  bottom: 0;
+  left: auto;
+  z-index: 10;
+  width: -webkit-fill-available;
+  box-sizing: border-box;
+  padding: 24px 36px 24px 0;
+}
+.action-link {
+  cursor: pointer;
+  color: $--link-color;
+  &:hover {
+    color: $--link-hover-color;
+    text-decoration: underline;
+  }
+}
 </style>

src/renderer/components/Preference/Lab.vue

@@ -11,7 +11,7 @@
     <mo-browser
       v-if="isRenderer"
       class="lab-webview"
-      :src="src"
+      :src="url"
     />
   </el-container>
 </template>
@@ -20,6 +20,7 @@
   import is from 'electron-is'
   import { mapState } from 'vuex'
 
+  import { APP_THEME } from '@shared/constants'
   import SubnavSwitcher from '@/components/Subnav/SubnavSwitcher'
   import Browser from '@/components/Browser'
   import '@/components/Icons/info-square'
@@ -33,11 +34,30 @@
     data () {
       const { locale } = this.$store.state.preference.config
       return {
-        src: `https://motrix.app/lab?lite=true&lang=${locale}`
+        locale
       }
     },
     computed: {
       isRenderer: () => is.renderer(),
+      ...mapState('app', {
+        systemTheme: state => state.systemTheme
+      }),
+      ...mapState('preference', {
+        config: state => state.config,
+        theme: state => state.config.theme
+      }),
+      currentTheme () {
+        if (this.theme === APP_THEME.AUTO) {
+          return this.systemTheme
+        } else {
+          return this.theme
+        }
+      },
+      url () {
+        const { currentTheme, locale } = this
+        const result = `https://motrix.app/lab?lite=true&theme=${currentTheme}&lang=${locale}`
+        return result
+      },
       title () {
         return this.$t('preferences.lab')
       },
@@ -59,10 +79,7 @@
             route: '/preference/lab'
           }
         ]
-      },
-      ...mapState('preference', {
-        config: state => state.config
-      })
+      }
     }
   }
 </script>

src/renderer/components/Preference/ThemeSwitcher.vue

@@ -19,8 +19,6 @@
 
   export default {
     name: 'mo-theme-switcher',
-    components: {
-    },
     props: {
       value: {
         type: String,

src/renderer/components/Speedometer/Speedometer.vue

@@ -10,7 +10,7 @@
       <em>{{ engineMode }}</em>
     </div>
     <div class="value" v-if="stat.numActive > 0">
-      <em >{{ stat.uploadSpeed | bytesToSize }}/s</em>
+      <em>{{ stat.uploadSpeed | bytesToSize }}/s</em>
       <span>{{ stat.downloadSpeed | bytesToSize }}/s</span>
     </div>
   </div>
@@ -18,15 +18,11 @@
 
 <script>
   import { mapState, mapActions } from 'vuex'
+  import { bytesToSize } from '@shared/utils'
   import '@/components/Icons/speedometer'
-  import {
-    bytesToSize
-  } from '@shared/utils'
 
   export default {
     name: 'mo-speedometer',
-    components: {
-    },
     computed: {
       ...mapState('app', [
         'stat'

src/renderer/components/Subnav/PreferenceSubnav.vue

@@ -62,6 +62,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-</style>

src/renderer/components/Subnav/TaskSubnav.vue

@@ -62,6 +62,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-</style>

src/renderer/components/Task/Index.vue

@@ -410,6 +410,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-</style>

src/renderer/components/Task/TaskActions.vue

@@ -160,31 +160,31 @@
 </script>
 
 <style lang="scss">
-  .task-actions {
-    position: absolute;
-    top: 44px;
-    right: 0;
-    height: 24px;
-    padding: 0;
-    overflow: hidden;
-    user-select: none;
-    cursor: default;
-    text-align: right;
-    color: $--task-action-color;
-    transition: all 0.25s;
-    .task-action {
-      display: inline-block;
-      padding: 5px;
-      margin: 0 4px;
-      font-size: 0;
-      cursor: pointer;
-      outline: none;
-      &:hover {
-        color: $--task-action-hover-color;
-      }
-      &.disabled {
-        color: $--task-action-disabled-color;
-      }
+.task-actions {
+  position: absolute;
+  top: 44px;
+  right: 0;
+  height: 24px;
+  padding: 0;
+  overflow: hidden;
+  user-select: none;
+  cursor: default;
+  text-align: right;
+  color: $--task-action-color;
+  transition: all 0.25s;
+  .task-action {
+    display: inline-block;
+    padding: 5px;
+    margin: 0 4px;
+    font-size: 0;
+    cursor: pointer;
+    outline: none;
+    &:hover {
+      color: $--task-action-hover-color;
+    }
+    &.disabled {
+      color: $--task-action-disabled-color;
     }
   }
+}
 </style>

src/renderer/components/Task/TaskItem.vue

@@ -75,41 +75,41 @@
 </script>
 
 <style lang="scss">
-  .task-item {
-    position: relative;
-    min-height: 88px;
-    padding: 16px 12px;
-    background-color: $--task-item-background;
-    border: 1px solid $--task-item-border-color;
-    border-radius: 6px;
-    margin-bottom: 16px;
-    transition: $--border-transition-base;
-    &:hover {
-      border-color: $--task-item-hover-border-color;
-    }
-    .task-item-actions {
-      position: absolute;
-      top: 16px;
-      right: 12px;
-    }
-  }
-  .selected .task-item {
+.task-item {
+  position: relative;
+  min-height: 78px;
+  padding: 16px 12px;
+  background-color: $--task-item-background;
+  border: 1px solid $--task-item-border-color;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  transition: $--border-transition-base;
+  &:hover {
     border-color: $--task-item-hover-border-color;
   }
-  .task-name {
-    color: #505753;
-    margin-bottom: 1.5rem;
-    margin-right: 220px;
-    word-break: break-all;
-    min-height: 26px;
-    &> span {
-      font-size: 14px;
-      line-height: 26px;
-      overflow : hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-    }
+  .task-item-actions {
+    position: absolute;
+    top: 16px;
+    right: 12px;
   }
+}
+.selected .task-item {
+  border-color: $--task-item-hover-border-color;
+}
+.task-name {
+  color: #505753;
+  margin-bottom: 1.5rem;
+  margin-right: 220px;
+  word-break: break-all;
+  min-height: 26px;
+  &> span {
+    font-size: 14px;
+    line-height: 26px;
+    overflow : hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
 </style>

src/renderer/components/Task/TaskList.vue

@@ -68,24 +68,24 @@
 </script>
 
 <style lang="scss">
-  .task-list {
-    padding: 16px 0 64px 0;
-    min-height: 100%;
-    box-sizing: border-box;
-  }
-  .no-task {
-    display: flex;
-    height: 100%;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    color: #555;
-    user-select: none;
-  }
-  .no-task-inner {
-    width: 100%;
-    padding-top: 360px;
-    background: transparent url('~@/assets/no-task.svg') top center no-repeat;
-  }
+.task-list {
+  padding: 16px 0 64px 0;
+  min-height: 100%;
+  box-sizing: border-box;
+}
+.no-task {
+  display: flex;
+  height: 100%;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #555;
+  user-select: none;
+}
+.no-task-inner {
+  width: 100%;
+  padding-top: 360px;
+  background: transparent url('~@/assets/no-task.svg') top center no-repeat;
+}
 </style>

src/renderer/components/TaskDetail/Index.vue

@@ -6,6 +6,7 @@
     :title="$t('task.task-detail-title')"
     :with-header="true"
     :show-close="true"
+    :destroy-on-close="true"
     :visible.sync="visible"
     :before-close="handleClose"
     @closed="handleClosed"
@@ -44,7 +45,19 @@
       </el-tab-pane>
     </el-tabs>
     <div class="task-detail-actions">
-      <mo-task-item-actions mode="DETAIL" :task="task" />
+      <div class="action-wrapper action-wrapper-left" v-if="optionsChanged">
+        <el-button @click="resetChanged">
+          {{$t('app.reset')}}
+        </el-button>
+      </div>
+      <div class="action-wrapper action-wrapper-center">
+        <mo-task-item-actions mode="DETAIL" :task="task" />
+      </div>
+      <div class="action-wrapper action-wrapper-right" v-if="optionsChanged">
+        <el-button type="primary" @click="saveChanged">
+          {{$t('app.save')}}
+        </el-button>
+      </div>
     </div>
   </el-drawer>
 </template>
@@ -59,7 +72,12 @@
     getFileName,
     getFileExtension
   } from '@shared/utils'
-  import { EMPTY_STRING, TASK_STATUS } from '@shared/constants'
+  import {
+    EMPTY_STRING,
+    NONE_SELECTED_FILES,
+    SELECTED_ALL_FILES,
+    TASK_STATUS
+  } from '@shared/constants'
   import TaskItemActions from '@/components/Task/TaskItemActions'
   import TaskGeneral from './TaskGeneral'
   import TaskActivity from './TaskActivity'
@@ -112,7 +130,10 @@
         formLabelWidth: calcFormLabelWidth(locale),
         locale,
         activeTab: 'general',
-        graphicWidth: 0
+        graphicWidth: 0,
+        optionsChanged: false,
+        filesSelection: EMPTY_STRING,
+        selectionChangedCount: 0
       }
     },
     computed: {
@@ -141,8 +162,8 @@
             selected: item.selected === 'true',
             path: item.path,
             name,
-            extension,
-            length: item.length,
+            extension: `.${extension}`,
+            length: parseInt(item.length, 10),
             completedLength: item.completedLength
           }
         })
@@ -158,35 +179,37 @@
       }
     },
     mounted () {
-      window.addEventListener('resize', debounce(() => {
-        console.log('resize===>', this.activeTab, this.$refs.taskGraphic)
-        if (this.activeTab === 'activity' && this.$refs.taskGraphic) {
-          this.$refs.taskGraphic.updateGraphicWidth()
-        }
-      }, 300))
+      window.addEventListener('resize', this.handleAppResize)
     },
     destroyed () {
+      window.removeEventListener('resize', this.handleAppResize)
       cached.files = []
-      window.removeEventListener('resize')
     },
     methods: {
       handleClose (done) {
+        window.removeEventListener('resize', this.handleAppResize)
         this.$store.dispatch('task/hideTaskDetail')
       },
       handleClosed (done) {
         this.$store.dispatch('task/updateCurrentTaskGid', EMPTY_STRING)
         this.$store.dispatch('task/updateCurrentTaskItem', null)
+        this.optionsChanged = false
+        this.resetFaskFilesSelection()
       },
       handleTabBeforeLeave (activeName, oldActiveName) {
         this.activeTab = activeName
-        if (oldActiveName !== 'peers') {
-          return
+        this.optionsChanged = false
+        switch (oldActiveName) {
+        case 'peers':
+          this.$store.dispatch('task/toggleEnabledFetchPeers', false)
+          break
+        case 'files':
+          this.resetFaskFilesSelection()
+          break
         }
-        this.$store.dispatch('task/toggleEnabledFetchPeers', false)
       },
       handleTabClick (tab) {
         const { name } = tab
-
         switch (name) {
         case 'peers':
           this.$store.dispatch('task/toggleEnabledFetchPeers', true)
@@ -198,6 +221,33 @@
           break
         }
       },
+      resetChanged () {
+        const { activeTab } = this
+        switch (activeTab) {
+        case 'files':
+          this.resetFaskFilesSelection()
+          this.updateFilesListSelection()
+          break
+        }
+        this.optionsChanged = false
+      },
+      saveChanged () {
+        const { activeTab } = this
+        switch (activeTab) {
+        case 'files':
+          this.saveFaskFilesSelection()
+          break
+        }
+        this.optionsChanged = false
+      },
+      handleAppResize () {
+        debounce(() => {
+          console.log('resize===>', this.activeTab, this.$refs.taskGraphic)
+          if (this.activeTab === 'activity' && this.$refs.taskGraphic) {
+            this.$refs.taskGraphic.updateGraphicWidth()
+          }
+        }, 250)
+      },
       updateFilesListSelection () {
         if (!this.$refs.detailFileList) {
           return
@@ -207,7 +257,27 @@
         this.$refs.detailFileList.toggleSelection(selectedFileList)
       },
       handleSelectionChange (val) {
-        console.log('task detail handleSelectionChange==>', val)
+        this.filesSelection = val
+        this.selectionChangedCount += 1
+        if (this.selectionChangedCount > 1) {
+          this.optionsChanged = true
+        }
+      },
+      resetFaskFilesSelection () {
+        this.filesSelection = EMPTY_STRING
+        this.selectionChangedCount = 0
+      },
+      saveFaskFilesSelection () {
+        const { gid, filesSelection } = this
+        if (filesSelection === NONE_SELECTED_FILES) {
+          this.$msg.warning(this.$t('task.select-at-least-one'))
+          return
+        }
+
+        const options = {
+          selectFile: filesSelection !== SELECTED_ALL_FILES ? filesSelection : EMPTY_STRING
+        }
+        this.$store.dispatch('task/changeTaskOption', { gid, options })
       }
     }
   }
@@ -216,6 +286,7 @@
 <style lang="scss">
 .task-detail-drawer {
   .el-drawer__header {
+    padding-top: 2rem;
     margin-bottom: 0;
   }
   .el-drawer__body {
@@ -229,6 +300,10 @@
     width: 100%;
     text-align: center;
     font-size: 0;
+    padding: 0 1.25rem;
+    display: flex;
+    align-content: space-between;
+    justify-content: space-between;
     .task-item-actions {
       display: inline-block;
       &> .task-item-action {
@@ -241,6 +316,21 @@
       vertical-align: middle;
     }
   }
+  .action-wrapper {
+    flex: 1;
+  }
+  .action-wrapper-left {
+    text-align: left;
+  }
+  .action-wrapper-center {
+    padding: 1px 0;
+    &> .task-item-actions {
+      margin: 0 auto;
+    }
+  }
+  .action-wrapper-right {
+    text-align: right;
+  }
 }
 
 .task-detail-tab {
@@ -265,4 +355,13 @@
     bottom: 0;
   }
 }
+
+.tab-panel-actions {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  bottom: -28px;
+  left: 0;
+  width: 100%;
+}
 </style>

src/renderer/components/TaskDetail/TaskActivity.vue

@@ -8,7 +8,7 @@
   >
     <div class="graphic-box" ref="graphicBox">
       <mo-task-graphic
-        :width="graphicWidth"
+        :outerWidth="graphicWidth"
         :bitfield="task.bitfield"
         v-if="graphicWidth > 0"
       />
@@ -190,7 +190,6 @@
         if (!this.$refs.graphicBox) {
           return
         }
-        console.log('updateGraphicWidth===>', this.$refs.graphicBox)
         this.graphicWidth = this.calcInnerWidth(this.$refs.graphicBox)
       },
       calcInnerWidth (ele) {
@@ -199,8 +198,10 @@
         }
 
         const style = getComputedStyle(ele, null)
-        const width = style.getPropertyValue('width')
-        return parseInt(width, 10)
+        const width = parseInt(style.width, 10)
+        const paddingLeft = parseInt(style.paddingLeft, 10)
+        const paddingRight = parseInt(style.paddingRight, 10)
+        return width - paddingLeft - paddingRight
       }
     }
   }

src/renderer/components/TaskDetail/TaskFiles.vue

@@ -40,7 +40,7 @@
         </el-table-column>
       </el-table>
     </div>
-    <el-row class="file-filters" :gutter="12" v-if="mode === 'ADD'">
+    <el-row class="file-filters" :gutter="12">
       <el-col class="quick-filters" :span="8">
         <el-button-group>
           <el-button @click="toggleVideoSelection()">
@@ -54,7 +54,7 @@
           </el-button>
         </el-button-group>
       </el-col>
-      <el-col :span="16" style="text-align: right">
+      <el-col :span="16" class="files-summary">
         {{ $t('task.selected-files-sum', { selectedFilesCount, selectedFilesTotalSize }) }}
       </el-col>
     </el-row>
@@ -113,7 +113,7 @@
       },
       selectedFilesTotalSize () {
         const result = this.selectedFiles.reduce((acc, cur) => {
-          return acc + cur.length
+          return acc + parseInt(cur.length, 10)
         }, 0)
         return bytesToSize(result)
       },
@@ -189,5 +189,11 @@
       font-size: 0;
     }
   }
+  .files-summary {
+    text-align: right;
+    font-size: $--font-size-base;
+    color: $--color-text-regular;
+    line-height: 1.75rem;
+  }
 }
 </style>

src/renderer/components/TaskDetail/TaskGeneral.vue

@@ -111,6 +111,7 @@
       }
     },
     computed: {
+      isRenderer: () => is.renderer(),
       ...mapState('app', {
         systemTheme: state => state.systemTheme
       }),
@@ -124,7 +125,6 @@
           return this.theme
         }
       },
-      isRenderer: () => is.renderer(),
       taskFullName () {
         return getTaskName(this.task, {
           defaultName: this.$t('task.get-task-name'),

src/renderer/components/TaskGraphic/Index.vue

@@ -33,7 +33,7 @@
         type: String,
         default: ''
       },
-      width: {
+      outerWidth: {
         type: Number,
         default: 240
       },
@@ -65,8 +65,8 @@
         return this.atomHeight + this.atomGutter
       },
       columnCount () {
-        const { width, atomWidth, atomWG } = this
-        const result = parseInt((width - atomWidth) / atomWG, 10) + 1
+        const { outerWidth, atomWidth, atomWG } = this
+        const result = parseInt((outerWidth - atomWidth) / atomWG, 10) + 1
         return result
       },
       rowCount () {
@@ -75,9 +75,14 @@
         return result
       },
       offset () {
-        const { width, atomWidth, atomWG, columnCount } = this
+        const { outerWidth, atomWidth, atomWG, columnCount } = this
         const totalWidth = atomWG * (columnCount - 1) + atomWidth
-        const result = (width - totalWidth) / 2
+        const result = (outerWidth - totalWidth) / 2
+        return parseFloat(result.toFixed(2))
+      },
+      width () {
+        const { atomWidth, atomWG, columnCount } = this
+        const result = atomWG * (columnCount - 1) + atomWidth
         return parseInt(result, 10)
       },
       height () {
@@ -116,7 +121,7 @@
         const result = {
           id: `${hIndex}`,
           status: Math.floor(parseInt(bitfield[index], 16) / 4),
-          x: offset + chIndex * atomWG,
+          x: chIndex * atomWG,
           y: offset + rhIndex * atomHG
         }
 

src/renderer/components/Theme/Default.scss

@@ -9,6 +9,7 @@ body {
     BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB",
     "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-variant: tabular-nums;
+  font-size: $--font-size-medium;
 }
 
 ::-webkit-scrollbar {
@@ -265,13 +266,16 @@ iframe {
 }
 
 .graphic-box {
-  padding: 0.5rem;
+  padding: 0.5rem 0.375rem;
   margin-bottom: 1.5rem;
   font-size: 0;
   line-height: 0;
   border: 1px solid $--task-detail-box-border;
   border-radius: $--border-radius-base;
-  box-sizing: content-box;
+  &> svg {
+    display: block;
+    margin: 0 auto;
+  }
 }
 
 .form-static-value {

src/renderer/components/Theme/Variables.scss

@@ -133,7 +133,7 @@ $--size-base: 14px !default;
 -------------------------- */
 $--index-normal: 1 !default;
 $--index-top: 1000 !default;
-$--index-popper: 2000 !default;
+$--index-popper: 2100 !default;
 
 /* Disable base
 -------------------------- */

src/renderer/store/modules/task.js

@@ -148,8 +148,12 @@ const actions = {
     const { gid, options } = payload
     return api.changeOption({ gid, options })
   },
-  removeTask ({ dispatch }, task) {
+  removeTask ({ state, dispatch }, task) {
     const { gid } = task
+    if (gid === state.currentTaskGid) {
+      dispatch('hideTaskDetail')
+    }
+
     return api.removeTask({ gid })
       .finally(() => {
         dispatch('fetchList')
@@ -231,8 +235,12 @@ const actions = {
     }
     return dispatch('changeTaskOption', { gid, options })
   },
-  removeTaskRecord ({ dispatch }, task) {
+  removeTaskRecord ({ state, dispatch }, task) {
     const { gid, status } = task
+    if (gid === state.currentTaskGid) {
+      dispatch('hideTaskDetail')
+    }
+
     const { ERROR, COMPLETE, REMOVED } = TASK_STATUS
     if ([ERROR, COMPLETE, REMOVED].indexOf(status) === -1) {
       return

src/shared/locales/ar/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'عذراً، هذه الميزة قيد التطوير...',
   'yes': 'نعم',
   'no': 'لا',
+  'save': 'يحفظ',
+  'reset': 'ينبذ',
   'cancel': 'إلغاء',
   'submit': 'إرسال',
   'gt1d': 'أكثر من يوم',

src/shared/locales/ar/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'حجم الملف',
   'file-completed-size': 'تم التنزيل',
   'selected-files-sum': 'الملف المختار: {{selectedFilesCount}} ملف, الحجم الكلي {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'الرجاء تحديد ملف واحد على الأقل',
   'task-name': 'اسم التحميل',
   'task-out': 'إعادة تسمية',
   'task-out-tips': 'اختياري',

src/shared/locales/bg/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'За съжаление тази функция все още е в процес на разработка...',
   'yes': 'Да',
   'no': 'Не',
+  'save': 'Запазете',
+  'reset': 'Изхвърлете',
   'cancel': 'Отказ',
   'submit': 'Потвърдя',
   'gt1d': '> 1 ден',

src/shared/locales/bg/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Размер',
   'file-completed-size': 'Изтеглено',
   'selected-files-sum': 'избрано: {{selectedFilesCount}} файлове, общ размер {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Моля, изберете поне един файл',
   'task-name':'Име на изтегляне',
   'task-out': 'Преименуване',
   'task-out-tips':'незадължителен',

src/shared/locales/ca/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Ho sentim, aquesta característica està en desenvolupament...',
   'yes': 'Sí',
   'no': 'No',
+  'save': 'Desa',
+  'reset': 'Descarta',
   'cancel': 'Cancel·lar',
   'submit': 'Enviar',
   'gt1d': '> 1 dia',

src/shared/locales/ca/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Mida',
   'file-completed-size': 'Descarregat',
   'selected-files-sum': 'Seleccionat: {{selectedFilesCount}} arxius, mida total: {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Seleccioneu com a mínim un fitxer',
   'task-name': 'Nom de la tasca',
   'task-out': 'Canviar nom',
   'task-out-tips': 'Opcional',

src/shared/locales/de/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Entschuldigung, diese Funktion befindet sich in der Entwicklung...',
   'yes': 'Ja',
   'no': 'Nein',
+  'save': 'Speichern',
+  'reset': 'Verwerfen',
   'cancel': 'Abbrechen',
   'submit': 'Übernehmen',
   'gt1d': '> 1 Tag',

src/shared/locales/de/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Dateigröße',
   'file-completed-size': 'Heruntergeladen',
   'selected-files-sum': 'Ausgewählt: {{selectedFilesCount}} Dateien, insgesamt {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Bitte wählen Sie mindestens eine Datei aus',
   'task-name': 'Aufgaben Name',
   'task-out': 'Dateiname',
   'task-out-tips': 'Optional',

src/shared/locales/el/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Συγγνώμη, αυτή η λειτουργία είναι υπό ανάπτυξη...',
   'yes': 'Ναι',
   'no': 'Όχι',
+  'save': 'Σώσει',
+  'reset': 'Απορρίπτω',
   'cancel': 'Ακύρωση',
   'submit': 'Υποβολή',
   'gt1d': '> 1 μέρα',

src/shared/locales/el/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Μέγεθος αρχείου',
   'file-completed-size': 'Έγινε λήψη',
   'selected-files-sum': 'Επιλεγμένα: {{selectedFilesCount}} αρχεία, συνολικό μέγεθος {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Επιλέξτε τουλάχιστον ένα αρχείο',
   'task-name': 'Όνομα εργασίας',
   'task-out': 'Άλλο Όνομα',
   'task-out-tips': 'Προαιρετικό',

src/shared/locales/en-US/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Sorry, this feature is under development...',
   'yes': 'Yes',
   'no': 'No',
+  'save': 'Save',
+  'reset': 'Discard',
   'cancel': 'Cancel',
   'submit': 'Submit',
   'gt1d': '> 1 day',

src/shared/locales/en-US/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Size',
   'file-completed-size': 'Completed',
   'selected-files-sum': 'Selected: {{selectedFilesCount}} files, total size {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Please select at least one file',
   'task-name': 'Task Name',
   'task-out': 'Rename',
   'task-out-tips': 'Optional',

src/shared/locales/es/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Disculpa, esta función está en desarrollo...',
   'yes': 'Sí',
   'no': 'No',
+  'save': 'Ahorrar',
+  'reset': 'Descarte',
   'cancel': 'Cancelar',
   'submit': 'Enviar',
   'gt1d': '> 1 día',

src/shared/locales/es/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Tamaño',
   'file-completed-size': 'Terminado',
   'selected-files-sum': 'Seleccionado: {{selectedFilesCount}} files, total size {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Seleccione al menos un archivo',
   'task-name': 'Nombre de la tarea',
   'task-out': 'Renombrar',
   'task-out-tips': 'Opcional',

src/shared/locales/fa/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'ببخشید، این قابلیت در حال توسعه است...',
   'yes': 'بله',
   'no': 'خیر',
+  'save': 'صرفه جویی',
+  'reset': 'دور انداختن',
   'cancel': 'لغو',
   'submit': 'ثبت',
   'gt1d': '> یک روز',

src/shared/locales/fa/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'اندازه',
   'file-completed-size': 'بارگیری شد',
   'selected-files-sum': 'انتخاب شده: {{selectedFilesCount}} فایلها، مجموع {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'لطفا حداقل یک فایل را انتخاب کنید',
   'task-name': 'اسم تسک',
   'task-out': 'تغییرنام',
   'task-out-tips': 'اختیاری',

src/shared/locales/fr/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Désolé, cette fonctionnalité est en cours de développement...',
   'yes': 'Oui',
   'no': 'Non',
+  'save': 'Sauvegarder',
+  'reset': 'Jeter',
   'cancel': 'Annuler',
   'submit': 'Envoyer',
   'gt1d': '> 1 jour',

src/shared/locales/fr/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Taille',
   'file-completed-size': 'Téléchargé',
   'selected-files-sum': 'Sélectionné: {{selectedFilesCount}} fichiers, total {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Veuillez sélectionner au moins un fichier',
   'task-name': 'Nom de la tâche',
   'task-out': 'Renommer',
   'task-out-tips': 'Optionel',

src/shared/locales/hu/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Sájnaljuk, de ez a funkció feljesztés allat...',
   'yes': 'Igen',
   'no': 'Nem',
+  'save': 'Mentés',
+  'reset': 'Eldobni',
   'cancel': 'Mégse',
   'submit': 'Beküldés',
   'gt1d': '> 1 nap',

src/shared/locales/hu/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Méret',
   'file-completed-size': 'Letöltött',
   'selected-files-sum': 'Kijelölve: {{selectedFilesCount}} fájl, teljes méret {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Válasszon legalább egy fájlt',
   'task-name': 'Feladat név',
   'task-out': 'Átnevezés',
   'task-out-tips': 'Opcionális',

src/shared/locales/id/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Maaf, fitur ini dalam tahap development...',
   'yes': 'Ya',
   'no': 'Tidak',
+  'save': 'Menyimpan',
+  'reset': 'Membuang',
   'cancel': 'Batal',
   'submit': 'Kirim',
   'gt1d': '> 1 hari',

src/shared/locales/id/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Ukuran',
   'file-completed-size': 'Ukuran domplet',
   'selected-files-sum': 'Terpilih: {{selectedFilesCount}} berkas, total ukuran {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Pilih setidaknya satu file',
   'task-name': 'Nama Tugas',
   'task-out': 'Ubah Nama',
   'task-out-tips': 'Opsional',

src/shared/locales/it/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Scusa, questa funzioe è in fase di sviluppo...',
   'yes': 'Si',
   'no': 'No',
+  'save': 'Salva',
+  'reset': 'Scartare',
   'cancel': 'Annulla',
   'submit': 'Invia',
   'gt1d': '> 1 giorno',

src/shared/locales/it/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Dimensione',
   'file-completed-size': 'Completato',
   'selected-files-sum': 'Selezionati: {{selectedFilesCount}} files, dimensione totale {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Seleziona almeno un file',
   'task-name': 'Nome attività',
   'task-out': 'Rinomina',
   'task-out-tips': '(opzionale)',

src/shared/locales/ja/app.js

@@ -22,6 +22,8 @@ export default {
   'under-development-message': 'この機能は開発中です...',
   'yes': 'はい',
   'no': 'いいえ',
+  'save': 'セーブ',
+  'reset': '放棄',
   'cancel': 'キャンセル',
   'submit': '確認',
   'gt1d': '一日を超える',

src/shared/locales/ja/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'サイズ',
   'file-completed-size': '完成サイズ',
   'selected-files-sum': '選択済み：{{selectedFilesCount}}ファイル、合計{{selectedFilesTotalSize}}',
+  'select-at-least-one': '少なくとも1つのファイルを選択してください',
   'task-name': 'タスク名',
   'task-out': '名前を変更',
   'task-out-tips': 'オプション',

src/shared/locales/ko/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': '죄송합니다, 이 기능은 개발 중입니다...',
   'yes': '예',
   'no': '아니요',
+  'save': '저장',
+  'reset': '포기',
   'cancel': '취소',
   'submit': '제출',
   'gt1d': '> 1 일',

src/shared/locales/ko/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': '파일 크기',
   'file-completed-size': '완성 된 크기',
   'selected-files-sum': '선택됨: {{selectedFilesCount}} 개의 파일, 총 {{selectedFilesTotalSize}}',
+  'select-at-least-one': '하나 이상의 파일을 선택하십시오',
   'task-name': '작업 이름',
   'task-out': '이름 변경',
   'task-out-tips': '선택적',

src/shared/locales/pl/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Przepraszamy ale ta funkcja nie jest jeszcze gotowa...',
   'yes': 'Tak',
   'no': 'Nie',
+  'save': 'Zapisać',
+  'reset': 'Odrzucać',
   'cancel': 'Anuluj',
   'submit': 'Dodaj',
   'gt1d': '> 1 dzień',

src/shared/locales/pl/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Rozmiar',
   'file-completed-size': 'Pobrano',
   'selected-files-sum': 'Wybrano: {{selectedFilesCount}} plików, Wspólny rozmiar {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Wybierz co najmniej jeden plik',
   'task-name': 'Nazwa zadania',
   'task-out': 'Zmień nazwę',
   'task-out-tips': 'Opcjonalne',

src/shared/locales/pt-BR/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Desculpe, essa funcionalidade está em desenvolvimento...',
   'yes': 'Sim',
   'no': 'Não',
+  'save': 'Salvar',
+  'reset': 'Descartar',
   'cancel': 'Cancelar',
   'submit': 'Enviar',
   'gt1d': '> 1 dia',

src/shared/locales/pt-BR/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Tamanho',
   'file-completed-size': 'Baixado',
   'selected-files-sum': 'Selecionado: {{selectedFilesCount}} arquivos, total {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Selecione pelo menos um arquivo',
   'task-name': 'Nome da Tarefa',
   'task-out': 'Renomear',
   'task-out-tips': 'Opcional',

src/shared/locales/ro/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Scuze, această caracteristică este în curs de dezvoltare...',
   'yes': 'Da',
   'no': 'Nu',
+  'save': 'Salvați',
+  'reset': 'Aruncați',
   'cancel': 'Anuleaza',
   'submit': 'Trimite',
   'gt1d': '> 1 zi',

src/shared/locales/ro/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Dimensiune',
   'file-completed-size': 'Descărcat',
   'selected-files-sum': 'Selectate: {{selectedFilesCount}} fișiere, dimensiune totală {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Vă rugăm să selectați cel puțin un fișier',
   'task-name': 'Nume sarcină',
   'task-out': 'Redenumeşte',
   'task-out-tips': 'Opțional',

src/shared/locales/ru/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'К сожалению, эта функция все еще в разработке...',
   'yes': 'Да',
   'no': 'Нет',
+  'save': 'Сохранить',
+  'reset': 'Отмена',
   'cancel': 'Отмена',
   'submit': 'Подтвердить',
   'gt1d': '> 1 день',

src/shared/locales/ru/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Размер',
   'file-completed-size': 'Завершенный',
   'selected-files-sum': 'Выбрано: {{selectedFilesCount}} файлов, общий размер {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Пожалуйста, выберите хотя бы один файл',
   'task-name': 'Имя загрузки',
   'task-out': 'Переименовать',
   'task-out-tips': 'Необязательный',

src/shared/locales/tr/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Üzgünüz, bu özellik geliştirme aşamasında...',
   'yes': 'Evet',
   'no': 'Hayır',
+  'save': 'Kayıt etmek',
+  'reset': 'İptal Et',
   'cancel': 'İptal',
   'submit': 'Gönder',
   'gt1d': '> 1 gün',

src/shared/locales/tr/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Boyut',
   'file-completed-size': 'İndirildi',
   'selected-files-sum': 'Seçildi: {{selectedFilesCount}} dosya sayısı, total {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Lütfen en az bir dosya seçin',
   'task-name': 'Görev Adı',
   'task-out': 'Dosya Adı',
   'task-out-tips': 'Opsiyonel',

src/shared/locales/uk/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'На жаль, ця функція розробляється...',
   'yes': 'Так',
   'no': 'Ні',
+  'save': 'Зберегти',
+  'reset': 'Відмінити',
   'cancel': 'Відмінити',
   'submit': 'Підтвердити',
   'gt1d': '> 1 день',

src/shared/locales/uk/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Розмір',
   'file-completed-size': 'Завершений',
   'selected-files-sum': 'Обрано: {{selectedFilesCount}} файлів, загальний розмір {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Виберіть принаймні один файл',
   'task-name': 'Ім\'я завдання',
   'task-out': 'Перейменувати',
   'task-out-tips': 'Необов\'язковий',

src/shared/locales/vi/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': 'Xin lỗi, tính năng này đang được phát triển...',
   'yes': 'Có',
   'no': 'Không',
+  'save': 'Tiết kiệm',
+  'reset': 'Loại bỏ',
   'cancel': 'Huỷ',
   'submit': 'Tải về',
   'gt1d': '> 1 ngày',

src/shared/locales/vi/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': 'Kích thước tập tin',
   'file-completed-size': 'Đã hoàn thành',
   'selected-files-sum': 'Đã lựa chọn: {{selectedFilesCount}} tập tin, tổng kích thước {{selectedFilesTotalSize}}',
+  'select-at-least-one': 'Vui lòng chọn ít nhất một tệp',
   'task-name': 'Tên Tác vụ',
   'task-out': 'Đổi tên',
   'task-out-tips': 'Không bắt buộc',

src/shared/locales/zh-CN/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': '该功能开发中...',
   'yes': '是',
   'no': '否',
+  'save': '保存',
+  'reset': '放弃',
   'cancel': '取 消',
   'submit': '提 交',
   'gt1d': '超过一天',

src/shared/locales/zh-CN/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': '大小',
   'file-completed-size': '已完成',
   'selected-files-sum': '已选：{{selectedFilesCount}}个文件，共 {{selectedFilesTotalSize}}',
+  'select-at-least-one': '请选择至少一个文件',
   'task-name': '任务名称',
   'task-out': '重命名',
   'task-out-tips': '选填',

src/shared/locales/zh-TW/app.js

@@ -23,6 +23,8 @@ export default {
   'under-development-message': '該功能開發中...',
   'yes': '是',
   'no': '否',
+  'save': '儲存',
+  'reset': '捨棄',
   'cancel': '取 消',
   'submit': '送 出',
   'gt1d': '超過一天',

src/shared/locales/zh-TW/task.js

@@ -16,6 +16,7 @@ export default {
   'file-size': '大小',
   'file-completed-size': '已下載',
   'selected-files-sum': '選中：{{selectedFilesCount}}個文件，總計 {{selectedFilesTotalSize}}',
+  'select-at-least-one': '請選擇至少一個文件',
   'task-name': '任務名稱',
   'task-out': '重新命名',
   'task-out-tips': '選填',

src/shared/ua.js

@@ -1,5 +1,6 @@
 export default {
+  aria2: 'aria2/1.35.0',
   transmission: 'Transmission/2.94',
-  chrome: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36',
+  chrome: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36',
   du: 'netdisk;6.0.0.12;PC;PC-Windows;10.0.16299;WindowsBaiduYunGuanJia'
 }

src/shared/utils/index.js

@@ -14,7 +14,14 @@ import {
 import bitTorrentPeerId from 'bittorrent-peerid'
 
 import { userKeys, systemKeys, needRestartKeys } from '@shared/configKeys'
-import { APP_THEME, ENGINE_RPC_HOST, GRAPHIC, UNKNOWN_PEERID } from '@shared/constants'
+import {
+  APP_THEME,
+  ENGINE_RPC_HOST,
+  GRAPHIC,
+  NONE_SELECTED_FILES,
+  SELECTED_ALL_FILES,
+  UNKNOWN_PEERID
+} from '@shared/constants'
 
 export function bytesToSize (bytes) {
   const b = parseInt(bytes, 10)
@@ -174,6 +181,25 @@ export function ellipsis (str = '', maxLen = 64) {
   return result
 }
 
+export function getFileSelection (files = []) {
+  console.log('getFileSelection===>', files)
+  const selectedFiles = files.filter((file) => file.selected)
+  if (files.length === 0 || selectedFiles.length === 0) {
+    return NONE_SELECTED_FILES
+  }
+
+  if (files.length === selectedFiles.length) {
+    return SELECTED_ALL_FILES
+  }
+
+  const indexArr = []
+  files.forEach((_, index) => {
+    indexArr.push(index)
+  })
+  const result = indexArr.join(',')
+  return result
+}
+
 export function getTaskName (task, options = {}) {
   const o = {
     defaultName: '',

src/shared/utils/rename.js

@@ -49,6 +49,10 @@ export const buildOuts = (uris = [], out = '') => {
     return result
   }
 
+  if (count === 1) {
+    return [out]
+  }
+
   const ruleStr = getRuleString(out)
   if (!ruleStr) {
     return result