Repository: marktext/marktext
File: src/renderer/prefComponents/imageUploader/index.vue (Vue)

Code before:
<template>
  <div class="pref-image-uploader">
    <h4>Image Uploader</h4>
    <section class="configration">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="Overview" name="none">
          <div v-if="currentUploader !== 'none'">
            <div>The current image uploader is {{ getServiceNameById(currentUploader) }}.</div>

            <!-- TODO: Reset all uploader settings and secret values. -->
            <el-button class="btn-reset" size="mini" disabled>Reset</el-button>
          </div>
          <span v-else>Currently is no uploader selected. Please select an uploader and click on "Set as default".</span>
        </el-tab-pane>
        <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>
          <legal-notices-checkbox class="smms" :uploaderService="uploadServices.smms"></legal-notices-checkbox>
          <el-button size="mini" @click="setCurrentUploader('smms')">Set as default</el-button>
        </el-tab-pane>
        <el-tab-pane label="GitHub" name="github">
          <div class="form-group">
            <div class="label">
              GitHub token:
              <i class="el-icon-info" title="Tokens are saved by Keychain on macOS, Secret Service API/libsecret on Linux and Credential Vault on Windows."></i>
            </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>
          <legal-notices-checkbox class="github" :uploaderService="uploadServices.github"></legal-notices-checkbox>
          <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</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </section>
  </div>
</template>

<script>
import { shell } from 'electron'
import services from './services.js'

Review comment (suggestion):
How about use `el-tooltip` like in image setting.

```html
        <el-tooltip class='item' effect='dark' content='Mark Text can not get image path from paste event in Linux system.' placement='top-start'>
          <i class="el-icon-info"></i>
        </el-tooltip>
```

Code after:
<template>
  <div class="pref-image-uploader">
    <h4>Image Uploader</h4>
    <section class="current-uploader">
      <div v-if="currentUploader !== 'none'">The current image uploader is {{ getServiceNameById(currentUploader) }}.</div>
      <span v-else>Currently is no uploader selected. Please select an uploader and click on "Set as default".</span>
    </section>
    <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>
          <legal-notices-checkbox
            class="smms"
            :class="[{ 'error': legalNoticesErrorStates.smms }]"
            :uploaderService="uploadServices.smms"
          ></legal-notices-checkbox>
          <el-button size="mini" @click="setCurrentUploader('smms')">Set as default</el-button>
        </el-tab-pane>
        <el-tab-pane label="GitHub" name="github">
          <div class="form-group">
            <div class="label">
              GitHub token:
              <el-tooltip
                class="item"
                effect="dark"
                content="The token is saved by Keychain on macOS, Secret Service API/libsecret on Linux and Credential Vault on Windows."
                placement="top-start"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </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>
          <legal-notices-checkbox
            class="github"
            :class="[{ 'error': legalNoticesErrorStates.github }]"
            :uploaderService="uploadServices.github"
          ></legal-notices-checkbox>
          <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</el-button>