添加帮助图标

src/renderer/assets/svgs/help-circle-outline.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" /></svg>

src/renderer/plugins/SvgIcon/SvgIcon.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg class="svg-icon" aria-hidden="true">
+    <use :xlink:href="id" />
+  </svg>
+</template>
+
+<script>
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    id() {
+      return `#icon-${this.name}`
+    },
+  },
+}
+</script>
+
+<style>
+.svg-icon {
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: -0.25em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

src/renderer/plugins/SvgIcon/index.js

@@ -0,0 +1,9 @@
+import SvgIcon from './SvgIcon'
+
+const req = require.context('@renderer/assets/svgs', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)
+
+export default app => {
+  app.component('svg-icon', SvgIcon)
+}

src/renderer/plugins/index.js

@@ -1,7 +1,10 @@
 // import './axios'
 import dialog from './Dialog'
 import './Tips'
+import svgIcon from './SvgIcon'
 
 export default app => {
   app.use(dialog)
+
+  svgIcon(app)
 }

src/renderer/views/setting/Setting.vue

@@ -247,6 +247,22 @@ export default {
         }
       }
     }
+
+    .help-btn {
+      padding: 0;
+      margin: 0 0.4em;
+      border: none;
+      background: none;
+      color: @color-theme;
+      cursor: pointer;
+      transition: opacity 0.2s ease;
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+    .help-icon {
+      margin: 0 0.4em;
+    }
   }
 }
 
@@ -292,6 +308,12 @@ each(@themes, {
       dt {
         border-left-color: ~'@{color-@{value}-theme}';
       }
+
+      :global {
+        .help-btn {
+          color: ~'@{color-@{value}-theme}';
+        }
+      }
     }
   }
 })

src/renderer/views/setting/components/SettingDownload.vue

@@ -11,7 +11,9 @@ dd(:tips="$t('setting__download_path_title')")
     p
       base-btn.btn(min @click="handleChangeSavePath") {{$t('setting__download_path_change_btn')}}
 dd
-  h3#download_use_other_source {{$t('setting__download_use_other_source')}}
+  h3#download_use_other_source
+    | {{$t('setting__download_use_other_source')}}
+    svg-icon(class="help-icon" name="help-circle-outline" :tips="$t('setting__download_use_other_source_tip')")
   div
     base-checkbox(id="setting_download_isUseOtherSource" v-model="currentStting.download.isUseOtherSource" :label="$t('setting__is_enable')")
   div

src/renderer/views/setting/components/SettingOther.vue

@@ -6,7 +6,9 @@ dd
     base-checkbox.gap-left(:id="'setting_tray_theme_' + item.id" v-model="currentStting.tray.themeId" name="setting_tray_theme" need
       :label="item.label" :key="item.id" :value="item.id" v-for="item in trayThemeList")
 dd
-  h3#other_resource_cache {{$t('setting__other_resource_cache')}}
+  h3#other_resource_cache
+    | {{$t('setting__other_resource_cache')}}
+    svg-icon(class="help-icon" name="help-circle-outline" :tips="$t('setting__other_resource_cache_tip')")
   div
     p
       | {{$t('setting__other_resource_cache_label')}}
@@ -14,7 +16,10 @@ dd
     p
       base-btn.btn(min :disabled="isDisabledResourceCacheClear" @click="clearResourceCache") {{$t('setting__other_resource_cache_clear_btn')}}
 dd
-  h3#other_play_list_cache {{$t('setting__other_play_list_cache')}}
+  h3#other_play_list_cache
+    | {{$t('setting__other_play_list_cache')}}
+    svg-icon(class="help-icon" name="help-circle-outline" :tips="$t('setting__other_play_list_cache_tip')")
+
   div
     base-btn.btn(min :disabled="isDisabledListCacheClear" @click="clearListCache") {{$t('setting__other_play_list_cache_clear_btn')}}
 </template>
@@ -22,6 +27,7 @@ dd
 <script>
 import { ref, computed, useI18n, useCommit } from '@renderer/utils/vueTools'
 import { sizeFormate, clearCache, getCacheSize } from '@renderer/utils'
+import { dialog } from '@renderer/plugins/Dialog'
 
 import { currentStting } from '../setting'
 
@@ -46,7 +52,12 @@ export default {
         cacheSize.value = sizeFormate(size)
       })
     }
-    const clearResourceCache = () => {
+    const clearResourceCache = async() => {
+      if (!await dialog.confirm({
+        message: t('setting__other_resource_cache_tip_confirm'),
+        cancelButtonText: t('cancel_button_text'),
+        confirmButtonText: t('setting__other_resource_cache_confirm'),
+      })) return
       isDisabledResourceCacheClear.value = true
       clearCache().then(() => {
         refreshCacheSize()
@@ -56,7 +67,13 @@ export default {
     refreshCacheSize()
 
     const clearMyListCache = useCommit('list', 'clearCache')
-    const clearListCache = () => {
+    const clearListCache = async() => {
+      if (!await dialog.confirm({
+        message: t('setting__other_play_list_cache_tip_confirm'),
+        cancelButtonText: t('cancel_button_text'),
+        confirmButtonText: t('setting__other_resource_cache_confirm'),
+      })) return
+
       isDisabledListCacheClear.value = true
       clearMyListCache()
       isDisabledListCacheClear.value = false

src/renderer/views/setting/components/SettingSync.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-dt#sync {{$t('setting__sync')}}
+dt#sync
+  | {{$t('setting__sync')}}
+  button(class="help-btn" @click="openUrl('https://github.com/lyswhut/lx-music-desktop/blob/master/FAQ.md#%E5%90%8C%E6%AD%A5%E5%8A%9F%E8%83%BD%E7%9A%84%E4%BD%BF%E7%94%A8%E5%AE%9E%E9%AA%8C%E6%80%A7%E9%A6%96%E6%AC%A1%E4%BD%BF%E7%94%A8%E5%89%8D%E5%BB%BA%E8%AE%AE%E5%85%88%E5%A4%87%E4%BB%BD%E4%B8%80%E6%AC%A1%E5%88%97%E8%A1%A8')" :tips="$t('setting__sync_tip')")
+    svg-icon(name="help-circle-outline")
 dd
   base-checkbox(id="setting_sync_enable" v-model="currentStting.sync.enable" :label="syncEnableTitle")
   div
@@ -19,7 +22,7 @@ dd
 import { computed, useI18n, watch } from '@renderer/utils/vueTools'
 import { sync } from '@renderer/core/share'
 import { refreshSyncCode, syncEnable } from '@renderer/utils/tools'
-import { debounce } from '@renderer/utils'
+import { debounce, openUrl } from '@renderer/utils'
 import { currentStting } from '../setting'
 
 export default {
@@ -68,6 +71,7 @@ export default {
       syncEnableTitle,
       syncDevices,
       refreshSyncCode,
+      openUrl,
     }
   },
 }