lx-music-desktop/src/renderer/components/material/UserApiModal.vue

<template lang="pug">
material-modal(:show="visible" bg-close @close="handleClose")
  main(:class="$style.main")
    h2 {{$t('material.user_api_modal.title')}}
    ul.scroll(v-if="apiList.length" :class="$style.content")
      li(:class="[$style.listItem, setting.apiSource == api.id ? $style.active : null]" v-for="(api, index) in apiList" :key="api.id")
        div(:class="$style.listLeft")
          h3 {{api.name}}
          p {{api.description}}
        material-btn(:class="$style.listBtn" outline :tips="$t('material.user_api_modal.btn_remove')" @click.stop="handleRemove(index)")
          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 212.982 212.982' space='preserve' v-once)
            use(xlink:href='#icon-delete')
    div(v-else :class="$style.content")
      div(:class="$style.noitem") {{$t('material.user_api_modal.noitem')}}
    div(:class="$style.note")
      p(:class="[$style.ruleLink]")
        | {{$t('material.user_api_modal.readme')}}
        span.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/blob/master/FAQ.md#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%BA%90%E8%84%9A%E6%9C%AC%E7%BC%96%E5%86%99%E8%AF%B4%E6%98%8E')" tips="https://github.com/lyswhut/lx-music-desktop/blob/master/FAQ.md") FAQ.md
      p {{$t('material.user_api_modal.note')}}
    div(:class="$style.footer")
      material-btn(:class="$style.footerBtn" @click="handleImport") {{$t('material.user_api_modal.btn_import')}}
      //- material-btn(:class="$style.footerBtn" @click="handleExport") {{$t('material.user_api_modal.btn_export')}}
</template>

<script>
import { mapGetters } from 'vuex'
import { rendererInvoke, NAMES } from '@common/ipc'
import { promises as fsPromises } from 'fs'
import {
  selectDir,
  openUrl,
} from '../../utils'
import apiSourceInfo from '../../utils/music/api-source-info'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    prop: 'visible',
    event: 'toggle',
  },
  data() {
    return {
      globalObj: window.globalObj,
    }
  },
  computed: {
    ...mapGetters(['setting']),
    apiList() {
      return this.globalObj.userApi.list
    },
  },
  methods: {
    handleImport() {
      selectDir({
        title: this.$t('material.user_api_modal.import_file'),
        properties: ['openFile'],
        filters: [
          { name: 'LX API File', extensions: ['js'] },
          { name: 'All Files', extensions: ['*'] },
        ],
      }).then(result => {
        if (result.canceled) return
        return fsPromises.readFile(result.filePaths[0]).then(data => {
          return rendererInvoke(NAMES.mainWindow.import_user_api, data.toString()).then(({ apiList }) => {
            window.globalObj.userApi.list = apiList
          })
        })
      })
    },
    handleExport() {

    },
    async handleRemove(index) {
      const api = this.apiList[index]
      if (!api) return
      if (this.setting.apiSource == api.id) {
        let backApi = apiSourceInfo.find(api => !api.disabled)
        if (backApi) window.globalObj.apiSource = backApi.id
      }
      window.globalObj.userApi.list = await rendererInvoke(NAMES.mainWindow.remove_user_api, [api.id])
    },
    handleClose() {
      this.$emit('toggle', false)
    },
    handleOpenUrl(url) {
      openUrl(url)
    },
  },
}
</script>


<style lang="less" module>
@import '../../assets/styles/layout.less';

.main {
  padding: 15px;
  max-width: 400px;
  min-width: 300px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  min-height: 0;
  // max-height: 100%;
  // overflow: hidden;
  h2 {
    font-size: 16px;
    color: @color-theme_2-font;
    line-height: 1.3;
    text-align: center;
  }
}

.name {
  color: @color-theme;
}

.content {
  flex: auto;
  min-height: 100px;
  max-height: 100%;
  margin-top: 15px;
}
.listItem {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  transition: background-color 0.2s ease;
  padding: 10px;
  border-radius: @radius-border;
  &:hover {
    background-color: @color-theme_2-hover;
  }
  &.active {
    background-color: @color-theme_2-active;
  }
  h3 {
    font-size: 15px;
    color: @color-theme_2-font;
    word-break: break-all;
  }
  p {
    margin-top: 5px;
    font-size: 14px;
    color: @color-theme_2-font-label;
    word-break: break-all;
  }
}
.noitem {
  height: 100px;
  font-size: 18px;
  color: @color-theme_2-font-label;
  display: flex;
  justify-content: center;
  align-items: center;
}
.listLeft {
  flex: auto;
  min-width: 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
.listBtn {
  flex: none;
  height: 30px;
  width: 30px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  svg {
    width: 60%;
  }
}
.note {
  margin-top: 15px;
  font-size: 12px;
  line-height: 1.25;
  color: @color-theme_2-font;
  p {
    + p {
      margin-top: 5px;
    }
  }
}
.footer {
  margin-top: 15px;
  display: flex;
  flex-flow: row nowrap;
}
.footerBtn {
  flex: auto;
  height: 36px;
  line-height: 36px;
  padding: 0 10px !important;
  width: 150px;
  .mixin-ellipsis-1;
  + .footerBtn {
    margin-left: 15px;
  }
}
.ruleLink {
  .mixin-ellipsis-1;
}


each(@themes, {
  :global(#container.@{value}) {
    .main {
      h2 {
        color: ~'@{color-@{value}-theme_2-font}';
      }
    }
    .listItem {
      &:hover {
        background-color: ~'@{color-@{value}-theme_2-hover}';
      }
      &.active {
        background-color: ~'@{color-@{value}-theme_2-active}';
      }
      h3 {
        color: ~'@{color-@{value}-theme_2-font}';
      }
      p {
        color: ~'@{color-@{value}-theme_2-font-label}';
      }
    }
    .noitem {
      color: ~'@{color-@{value}-theme_2-font-label}';
    }
  }
})

</style>