feat(packages/external): 点击按钮新增跳转提示

@@ -28,17 +28,28 @@
         <n-input-number v-model:value="optionData.buttonTextSize" />
       </setting-item>
     </setting-item-box>
-    <setting-item-box name="跳转配置" :alone="true">
+    <setting-item-box :alone="true">
+      <template #name>
+        <n-text>跳转</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <span class="help-span">{{ threeFileHelpMessgae }}</span>
+        </n-tooltip>
+      </template>
       <setting-item v-for="(item, index) in optionData.dataset" :key="index">
-        <n-input v-model:value="item.label" size="small" placeholder="按钮文字id"></n-input>
+        <n-input v-model:value="item.label" size="small" placeholder="按钮文字"></n-input>
         <div style="height: 5px"></div>
-        <n-input v-model:value="item.currentButton" size="small" placeholder="当前按钮id"></n-input>
+        <n-input v-model:value="item.currentButton" size="small" placeholder="填写当前按钮id（事件里面）"></n-input>
         <div style="height: 5px"></div>
-        <n-input v-model:value="item.targetButton" size="small" placeholder="目标按钮id"></n-input>
+        <n-input v-model:value="item.targetButton" size="small" placeholder="填写目标按钮id（事件里面）"></n-input>
         <div style="height: 5px"></div>
-        <n-input v-model:value="item.current" size="small" placeholder="当前页面id"></n-input>
+        <n-input v-model:value="item.current" size="small" placeholder="填写当前页面id（事件里面）"></n-input>
         <div style="height: 5px"></div>
-        <n-input v-model:value="item.target" size="small" placeholder="目标页面id"></n-input>
+        <n-input v-model:value="item.target" size="small" placeholder="填写目标页面id（事件里面）"></n-input>
         <div style="height: 5px"></div>
       </setting-item>
     </setting-item-box>
@@ -46,9 +57,10 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue'
+import { PropType, ref } from 'vue'
 import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
+import { icon } from '@/plugins'
 
 defineProps({
   optionData: {
@@ -57,6 +69,12 @@ defineProps({
   }
 })
 
+const { HelpOutlineIcon } = icon.ionicons5
+
+const threeFileHelpMessgae = ref(`
+在事件里面复制对应组件id，填写你要跳转的目标，相当于一个按钮就绑定了一个页面（分组），然后跳转到另一个页面，其实就是点击当前页隐藏，目标页显示
+`)
+
 const buttonTypeOptions = [
   {
     label: 'default',
@@ -88,3 +106,11 @@ const buttonTypeOptions = [
   }
 ]
 </script>
+<style lang="scss" scoped>
+.help-span {
+  display: flex;
+  flex-wrap: wrap;
+  width: 8vw;
+  color: white;
+}
+</style>