feat: choose dir from history directory

.gitignore

@@ -1,12 +1,25 @@
+!.gitkeep
 .DS_Store
-dist/electron/*
-dist/web/*
-*.provisionprofile
-build/*.plist
+.env
+.idea/
+.vs/
+.vscode/
+*.log
 node_modules/
-npm-debug.log
-npm-debug.log.*
 thumbs.db
-!.gitkeep
+
+# npm package
+.npmrc
+npm-debug.log.*
+
+# Eslint Cache
+.eslintcache*
+
+# electron builder
+*.provisionprofile
+build/*.plist
+dist/electron/*
+dist/web/*
+
+# release
 release/*
-.idea/

package.json

@@ -48,7 +48,7 @@
     "@electron/osx-sign": "^1.0.4",
     "@electron/remote": "^2.0.9",
     "@motrix/multispinner": "^0.2.4",
-    "@motrix/nat-api": "^0.3.3",
+    "@motrix/nat-api": "^0.3.4",
     "@panter/vue-i18next": "^0.15.2",
     "@vue/eslint-config-standard": "^6.1.0",
     "ajv": "^8.12.0",
@@ -79,7 +79,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.10.0",
-    "eslint-webpack-plugin": "^4.0.0",
+    "eslint-webpack-plugin": "^4.0.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "i18next": "^22.4.14",
@@ -89,7 +89,7 @@
     "normalize.css": "^8.0.1",
     "parse-torrent": "^9.1.5",
     "randomatic": "^3.1.1",
-    "sass": "1.61.0",
+    "sass": "1.62.0",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.2",
     "terser-webpack-plugin": "^5.3.7",
@@ -102,7 +102,7 @@
     "vue-template-compiler": "^2.7.14",
     "vuex": "^3.6.2",
     "vuex-router-sync": "^5.0.0",
-    "webpack": "^5.78.0",
+    "webpack": "^5.79.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.13.2",
     "webpack-hot-middleware": "^2.25.3",

src/main/core/ConfigManager.js

@@ -52,8 +52,8 @@ export default class ConfigManager {
         'all-proxy': EMPTY_STRING,
         'allow-overwrite': false,
         'auto-file-renaming': true,
-        'bt-force-encryption': false,
         'bt-exclude-tracker': EMPTY_STRING,
+        'bt-force-encryption': false,
         'bt-load-saved-metadata': true,
         'bt-save-metadata': true,
         'bt-tracker': EMPTY_STRING,
@@ -72,8 +72,8 @@ export default class ConfigManager {
         'max-overall-download-limit': 0,
         'max-overall-upload-limit': '1M',
         'no-proxy': EMPTY_STRING,
-        'pause': true,
         'pause-metadata': false,
+        'pause': true,
         'rpc-listen-port': 16800,
         'rpc-secret': EMPTY_STRING,
         'seed-ratio': 1,
@@ -105,7 +105,9 @@ export default class ConfigManager {
         'auto-sync-tracker': true,
         'enable-upnp': true,
         'engine-max-connection-per-server': getMaxConnectionPerServer(),
+        'favorite-directories': [],
         'hide-app-menu': is.windows() || is.linux(),
+        'history-directories': [],
         'keep-seeding': false,
         'keep-window-state': false,
         'last-check-update-time': 0,

src/renderer/components/Native/EngineClient.vue

@@ -57,7 +57,7 @@
       }
     },
     methods: {
-      fetchTaskItem ({ gid }) {
+      async fetchTaskItem ({ gid }) {
         return api.fetchTaskItem({ gid })
           .catch((e) => {
             console.warn(`fetchTaskItem fail: ${e.message}`)
@@ -75,6 +75,8 @@
 
         this.fetchTaskItem({ gid })
           .then((task) => {
+            const { dir } = task
+            this.$store.dispatch('preference/recordHistoryDirectory', dir)
             const taskName = getTaskName(task)
             const message = this.$t('task.download-start-message', { taskName })
             this.$msg.info(message)

src/renderer/components/Preference/Basic.vue

@@ -107,10 +107,14 @@
           :label-width="formLabelWidth"
         >
           <el-input placeholder="" v-model="form.dir" :readonly="isMas">
+            <mo-history-directory
+              slot="prepend"
+              @selected="handleHistoryDirectorySelected"
+            />
             <mo-select-directory
               v-if="isRenderer"
               slot="append"
-              @selected="onDirectorySelected"
+              @selected="handleNativeDirectorySelected"
             />
           </el-input>
           <div class="el-form-item__info" v-if="isMas" style="margin-top: 8px;">
@@ -293,6 +297,7 @@
   import { mapState } from 'vuex'
   import { cloneDeep, extend, isEmpty } from 'lodash'
   import SubnavSwitcher from '@/components/Subnav/SubnavSwitcher'
+  import HistoryDirectory from '@/components/Preference/HistoryDirectory'
   import SelectDirectory from '@/components/Native/SelectDirectory'
   import ThemeSwitcher from '@/components/Preference/ThemeSwitcher'
   import { availableLanguages, getLanguage } from '@shared/locales'
@@ -374,6 +379,7 @@
     name: 'mo-preference-basic',
     components: {
       [SubnavSwitcher.name]: SubnavSwitcher,
+      [HistoryDirectory.name]: HistoryDirectory,
       [SelectDirectory.name]: SelectDirectory,
       [ThemeSwitcher.name]: ThemeSwitcher
     },
@@ -535,6 +541,13 @@
         this.form.seedRatio = enable ? 0 : 1
         this.form.seedTime = enable ? 525600 : 60
       },
+      handleHistoryDirectorySelected (dir) {
+        this.form.dir = dir
+      },
+      handleNativeDirectorySelected (dir) {
+        this.form.dir = dir
+        this.$store.dispatch('preference/recordHistoryDirectory', dir)
+      },
       onDirectorySelected (dir) {
         this.form.dir = dir
       },

src/renderer/components/Preference/HistoryDirectory.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="mo-history-directory">
+    <el-popover
+      popper-class="mo-directory-popper"
+      trigger="hover"
+      :placement="placement"
+      :width="width"
+    >
+      <el-empty class="mo-directory-empty" :image-size="48" v-if="empty" />
+      <ul class="mo-directory-list" v-if="favoriteDirectories.length > 0">
+        <li
+          v-for="directory in favoriteDirectories"
+          :key="directory"
+          @click.stop="() => handleSelectItem(directory)"
+        >
+          <span class="mo-directory-path" :title="directory">{{directory}}</span>
+          <span class="mo-directory-actions">
+            <i
+              class="el-icon-star-off icon-history-favorited"
+              @click.stop="() => handleCancelFavoriteItem(directory)"
+            />
+            <i
+              class="el-icon-delete icon-history-remove"
+              @click.stop="() => handleRemoveItem(directory)"
+            />
+          </span>
+        </li>
+      </ul>
+      <div class="mo-directory-divider" v-if="showDivider" />
+      <ul class="mo-directory-list" v-if="historyDirectories.length > 0">
+        <li
+          v-for="directory in historyDirectories"
+          :key="directory"
+          @click.stop="() => handleSelectItem(directory)"
+        >
+          <span class="mo-directory-path" :title="directory">{{directory}}</span>
+          <span class="mo-directory-actions">
+            <i
+              v-if="showFavoriteAction"
+              class="el-icon-star-off icon-history-favorite"
+              @click.stop="() => handleFavoriteItem(directory)"
+            />
+            <i
+              class="el-icon-delete icon-history-remove"
+              @click.stop="() => handleRemoveItem(directory)"
+            />
+          </span>
+        </li>
+      </ul>
+      <el-button
+        slot="reference"
+        :disabled="popoverDisabled"
+      >
+        <i class="el-icon-time" />
+      </el-button>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  import { MAX_NUM_OF_DIRECTORIES } from '@shared/constants'
+  import { cloneArray } from '@shared/utils'
+
+  export default {
+    name: 'mo-history-directory',
+    components: {
+    },
+    props: {
+      width: {
+        type: Number,
+        default: 360
+      },
+      placement: {
+        type: String,
+        default: 'bottom-start'
+      }
+    },
+    data () {
+      return {
+        visible: false
+      }
+    },
+    computed: {
+      ...mapState('preference', {
+        historyDirectories: state => {
+          return cloneArray(state.config.historyDirectories, true)
+        },
+        favoriteDirectories: state => {
+          return cloneArray(state.config.favoriteDirectories, true)
+        }
+      }),
+      empty () {
+        const { favoriteDirectories, historyDirectories } = this
+        return favoriteDirectories.length + historyDirectories.length === 0
+      },
+      popoverDisabled () {
+        const { favoriteDirectories, historyDirectories } = this
+        return favoriteDirectories.length === 0 &&
+          historyDirectories.length === 0
+      },
+      showDivider () {
+        const { favoriteDirectories, historyDirectories } = this
+        return favoriteDirectories.length > 0 &&
+          historyDirectories.length > 0
+      },
+      showFavoriteAction () {
+        const { favoriteDirectories } = this
+        return favoriteDirectories.length < MAX_NUM_OF_DIRECTORIES
+      }
+    },
+    methods: {
+      handleIconClick () {
+        if (this.popoverDisabled) {
+          return
+        }
+
+        const { visible } = this
+        this.visible = !visible
+      },
+      handleSelectItem (directory) {
+        this.$emit('selected', directory.trim())
+        this.visible = false
+      },
+      handleFavoriteItem (directory) {
+        console.log('handleFavoriteItem==>', directory)
+        this.$store.dispatch('preference/favoriteDirectory', directory)
+      },
+      handleCancelFavoriteItem (directory) {
+        console.log('handleCancelFavoriteItem==>', directory)
+        this.$store.dispatch('preference/cancelFavoriteDirectory', directory)
+      },
+      handleRemoveItem (directory) {
+        console.log('handleRemoveItem==>', directory)
+        this.$store.dispatch('preference/removeDirectory', directory)
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+.el-popover.mo-directory-popper {
+  padding: $--popover-padding 0;
+}
+
+.el-empty.mo-directory-empty {
+  padding: 20px 0;
+}
+
+.mo-directory-divider {
+  padding: 0 $--popover-padding;
+  margin: 6px 0;
+  &::after {
+    content: ' ';
+    display: block;
+    height: 1px;
+    width: 100%;
+    background: $--border-color-base;
+  }
+}
+
+.mo-directory-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  &> li {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    line-height: $--font-line-height-primary;
+    margin: 0;
+    font-size: $--font-size-small;
+    color: $--color-text-regular;
+    cursor: pointer;
+    outline: none;
+    padding: 6px 6px 6px $--popover-padding;
+    &:focus, &:hover {
+      background-color: $--background-color-base;
+      color: $--color-primary-light-2;
+    }
+  }
+  .mo-directory-path {
+    display: inline-block;
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .mo-directory-actions {
+    min-width: 40px;
+    text-align: right;
+    &> i {
+      padding: 3px;
+      margin-right: 3px;
+      display: inline-block;
+    }
+  }
+  .icon-history-favorite {
+    &:focus, &:hover {
+      color: $--color-warning;
+    }
+  }
+  .icon-history-favorited {
+    color: $--color-warning;
+  }
+  .icon-history-remove {
+    &:focus, &:hover {
+      color: $--color-danger;
+    }
+  }
+}
+
+.theme-dark {
+  .mo-directory-divider {
+    &::after {
+      background: $--dk-border-color-base;
+    }
+  }
+  .mo-directory-list {
+    &> li {
+      color: $--dk-font-color-base;
+      &:focus, &:hover {
+        background-color: $--color-primary;
+        color: $--color-white;
+      }
+    }
+  }
+}
+</style>