marktext/src/renderer/prefComponents/imageUploader/index.vue

<template>
  <div class="pref-image-uploader">
    <h4>Image Uploader</h4>
    <section class="current-uploader">
      <div>The current image uploader is <span class="uploader">{{currentUploader}}</span>.</div>
    </section>
    <separator></separator>
    <section class="configration">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="SM.MS" name="smms">
          <div class="description">Thank you <span class="link" @click="open('https://sm.ms/')">SM.MS</span> for providing free uploading services.</div>
          <el-button size="mini" @click="setCurrentUploader('smms')">Set As default Uploader</el-button>
        </el-tab-pane>
        <el-tab-pane label="Github" name="github">
          <div class="form-group">
            <div class="label">GitHub token:</div>
            <el-input v-model="githubToken" placeholder="Input token" size="mini"></el-input>
          </div>
          <div class="form-group">
            <div class="label">Owner name:</div>
            <el-input v-model="github.owner" placeholder="owner" size="mini"></el-input>
          </div>
          <div class="form-group">
            <div class="label">Repo name:</div>
            <el-input v-model="github.repo" placeholder="repo" size="mini"></el-input>
          </div>
          <div class="form-group button-group">
            <el-button size="mini" :disabled="githubDisable" @click="save('github')">Save</el-button>
            <el-button size="mini" :disabled="githubDisable" @click="setCurrentUploader('github')">Set As default Uploader</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </section>
  </div>
</template>

<script>
import Separator from '../common/separator'
import { shell } from 'electron'
export default {
  components: {
    Separator
  },
  data () {
    return {
      activeTab: 'smms',
      githubToken: '',
      github: {
        owner: '',
        repo: ''
      }
    }
  },
  computed: {
    currentUploader: {
      get: function () {
        return this.$store.state.preferences.currentUploader
      }
    },
    imageBed: {
      get: function () {
        return this.$store.state.preferences.imageBed
      }
    },
    prefGithubToken: {
      get: function () {
        return this.$store.state.preferences.githubToken
      }
    },
    githubDisable () {
      return !this.githubToken || !this.github.owner || !this.github.repo
    }
  },
  watch: {
    imageBed: function (value, oldValue) {
      if (value !== oldValue) {
        this.github = value.github
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.github = this.imageBed.github
      this.githubToken = this.prefGithubToken
    })
  },
  methods: {
    handleImageChange (value) {
      // console.log(value)
    },
    open (link) {
      shell.openExternal(link)
    },
    save (type) {
      const newImageBedConfig = Object.assign({}, this.imageBed, {[type]: this[type]})
      this.$store.dispatch('SET_USER_DATA', {
        type: 'imageBed',
        value: newImageBedConfig
      })
      if (type === 'github') {
        this.$store.dispatch('SET_USER_DATA', {
          type: 'githubToken',
          value: this.githubToken
        })
      }
      new Notification('Save Image Uploader', {
        body: `The Github configration has been saved.`
      })
    },
    setCurrentUploader (value) {
      const type = 'currentUploader'
      this.$store.dispatch('SET_USER_DATA', { type, value })

      new Notification('Set Image Uploader', {
        body: `Set ${value} as the default image uploader successfully.`
      })
    }
  }
}
</script>

<style>
.pref-image-uploader {
  & h4 {
    text-transform: uppercase;
    margin: 0;
    font-weight: 100;
  }
  & .current-uploader {
    font-size: 14px;
    margin: 20px 0;
    color: var(--editorColor);
    & .uploader {
      color: var(--editorColor80);
      font-size: 600;
    }
  }
  & .link {
    color: var(--themeColor);
    cursor: pointer;
  }
  & .description {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  & .form-group {
    margin: 20px 0 0 0;
  }
  & .label {
    margin-bottom: 10px;
  }
  & .el-input {
    max-width: 242px;
  }
  & .button-group {
    margin-top: 30px;
  }
}
</style>