✨ Feature: support "tips" option for uploader

Author: Molunerfinn

package.json

@@ -32,8 +32,9 @@
     "keycode": "^2.2.0",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",
+    "marked": "^7.0.4",
     "mitt": "^3.0.0",
-    "picgo": "^1.5.4",
+    "picgo": "^1.5.5",
     "qrcode.vue": "^3.3.3",
     "shell-path": "2.1.0",
     "uuid": "^9.0.0",

src/renderer/App.vue

@@ -11,6 +11,9 @@ import { getConfig } from './utils/dataSender'
 import type { IConfig } from 'picgo'
 import bus from './utils/bus'
 import { FORCE_UPDATE } from '~/universal/events/constants'
+import { useATagClick } from './hooks/useATagClick'
+
+useATagClick()
 
 const store = useStore()
 onBeforeMount(async () => {

src/renderer/components/ConfigForm.vue

@@ -25,10 +25,31 @@
       <el-form-item
         v-for="(item, index) in configList"
         :key="item.name + index"
-        :label="item.alias || item.name"
         :required="item.required"
         :prop="item.name"
       >
+        <template #label>
+          <el-row align="middle">
+            {{ item.alias || item.name }}
+            <template v-if="item.tips">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                placement="right"
+              >
+                <template #content>
+                  <span
+                    class="config-form-common-tips"
+                    v-html="transformMarkdownToHTML(item.tips)"
+                  />
+                </template>
+                <el-icon class="ml-[4px] cursor-pointer hover:text-blue">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </template>
+          </el-row>
+        </template>
         <el-input
           v-if="item.type === 'input' || item.type === 'password'"
           v-model="ruleForm[item.name]"
@@ -67,17 +88,6 @@
           :active-text="item.confirmText || 'yes'"
           :inactive-text="item.cancelText || 'no'"
         />
-        <div v-if="item.tips" class="common-tips" @mouseenter="() => isHoverTips = true" @mouseleave="() => isHoverTips = false">
-            <el-tooltip
-              :content="item.tips"
-              placement="top"
-              raw-content
-              effect="light"
-            >
-              <el-button v-if="isHoverTips" type="primary" :icon="Warning" circle />
-              <el-button v-if="!isHoverTips" type="info" :icon="Warning" circle />
-            </el-tooltip>
-          </div>
       </el-form-item>
       <slot />
     </el-form>
@@ -89,7 +99,8 @@ import { cloneDeep, union } from 'lodash'
 import { getConfig } from '@/utils/dataSender'
 import { useRoute } from 'vue-router'
 import type { FormInstance } from 'element-plus'
-import { Warning } from '@element-plus/icons-vue'
+import { QuestionFilled } from '@element-plus/icons-vue'
+import { marked } from 'marked'
 
 interface IProps {
   config: any[]
@@ -101,7 +112,6 @@ interface IProps {
 const props = defineProps<IProps>()
 const $route = useRoute()
 const $form = ref<FormInstance>()
-const isHoverTips = ref(false)
 const configList = ref<IPicGoPluginConfig[]>([])
 const ruleForm = reactive<IStringKeyMap>({})
 
@@ -145,6 +155,14 @@ function getConfigType () {
   }
 }
 
+function transformMarkdownToHTML (markdown: string) {
+  try {
+    return marked.parse(markdown)
+  } catch (e) {
+    return markdown
+  }
+}
+
 async function handleConfig (val: IPicGoPluginConfig[]) {
   const config = await getCurConfigFormData()
   const configId = $route.params.configId
@@ -184,6 +202,10 @@ defineExpose({
 })
 </script>
 <style lang='stylus'>
+.config-form-common-tips
+  a
+    color #409EFF
+    text-decoration none
 #config-form
   .el-form
     label
@@ -210,7 +232,4 @@ defineExpose({
   &.white
     .el-form-item
       border-bottom 1px solid #ddd
-  .common-tips
-    margin-left 10px
-    display inline-block
 </style>

src/renderer/hooks/useATagClick.ts

@@ -0,0 +1,19 @@
+import { openURL } from '@/utils/common'
+import { onMounted, onUnmounted } from 'vue'
+
+export function useATagClick () {
+  const handleATagClick = (e: MouseEvent) => {
+    if (e.target instanceof HTMLAnchorElement) {
+      if (e.target.href) {
+        e.preventDefault()
+        openURL(e.target.href)
+      }
+    }
+  }
+  onMounted(() => {
+    document.addEventListener('click', handleATagClick)
+  })
+  onUnmounted(() => {
+    document.removeEventListener('click', handleATagClick)
+  })
+}

src/universal/types/extra-vue.d.ts

@@ -15,7 +15,7 @@ declare module 'vue/types/vue' {
   }
 }
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   interface ComponentCustomProperties {
     $http: typeof axios
     $builtInPicBed: string[]

src/universal/types/types.d.ts

@@ -165,6 +165,8 @@ interface IPicGoPluginConfig {
     name?: string
     value?: any
   }[]
+  /** support markdown */
+  tips?: string
   [propName: string]: any
 }
 

yarn.lock

@@ -8980,6 +8980,11 @@ map-obj@^4.0.0:
   resolved "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
+marked@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.npmmirror.com/marked/-/marked-7.0.4.tgz#e2558ee2d535b9df6a27c6e282dc603a18388a6d"
+  integrity sha512-t8eP0dXRJMtMvBojtkcsA7n48BkauktUKzfkPSCq85ZMTJ0v76Rke4DYz01omYpPTUh4p/f7HePgRo3ebG8+QQ==
+
 matcher@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz#bd9060f4c5b70aa8041ccc6f80368760994f30ca"
@@ -9965,10 +9970,10 @@ pend@~1.2.0:
   resolved "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
 
-picgo@^1.5.4:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/picgo/-/picgo-1.5.4.tgz#3c15b8a82b7941db2aa9535d7acf8384be4c47d5"
-  integrity sha512-lU4WmYsqyhIiXvSlROv+iPxgGzupbMJENYhsHNtnScMogH4DHnmiqCWTylVsW2EqW7qQANDv9G9vgnuUkNShYA==
+picgo@^1.5.5:
+  version "1.5.5"
+  resolved "https://registry.npmmirror.com/picgo/-/picgo-1.5.5.tgz#fa9a5d07d3552036c2cc8b1455bec1c3a2086183"
+  integrity sha512-GSfDVR+b6SgibYDQ0eqNKmhmiMWDyNVppq+qKNKyf38VATX/U0ompSS2XgoPAn8Lr7pTddbXgqxfmFiLLXN7LA==
   dependencies:
     "@picgo/i18n" "^1.0.0"
     "@picgo/store" "^2.0.2"