From f87fa7633590ad430853e01ac5e23eb7824f5665 Mon Sep 17 00:00:00 2001
From: lichunn <46984087+lichunn@users.noreply.github.com>
Date: Tue, 26 Dec 2023 03:50:39 -0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=AE=BE=E8=AE=A1=E5=99=A8?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B8=AE=E5=8A=A9=E6=96=87=E6=A1=A3=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E=20(#100)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/component/LinkButton.vue   |  41 +++++
 packages/common/index.js                   |   2 +
 packages/controller/src/index.js           |  24 +--
 packages/controller/src/useHelp.js         |  34 ++++
 packages/design-core/src/DesignPlugins.vue |   2 +
 packages/plugins/block/src/Main.vue        |  16 +-
 packages/plugins/bridge/src/Main.vue       |  24 ++-
 packages/plugins/data/src/Main.vue         |  18 ++-
 packages/plugins/datasource/src/Main.vue   |  28 ++--
 packages/plugins/help/index.js             |  22 +--
 packages/plugins/help/src/HelpIcon.vue     | 176 ++++++++++++++++++---
 packages/plugins/i18n/src/Main.vue         |  17 +-
 packages/plugins/page/src/Main.vue         |  20 ++-
 packages/plugins/script/src/Main.vue       |  19 ++-
 packages/theme/dark/help.less              |   8 +
 packages/theme/light/help.less             |   8 +
 16 files changed, 376 insertions(+), 83 deletions(-)
 create mode 100644 packages/common/component/LinkButton.vue
 create mode 100644 packages/controller/src/useHelp.js

diff --git a/packages/common/component/LinkButton.vue b/packages/common/component/LinkButton.vue
new file mode 100644
index 000000000..11a80d684
--- /dev/null
+++ b/packages/common/component/LinkButton.vue
@@ -0,0 +1,41 @@
+<template>
+  <a class="help-box" :href="href" target="_blank">
+    <svg-button id="help-icon" :name="iconName" :tips="tips"></svg-button>
+  </a>
+</template>
+
+<script>
+import SvgButton from './SvgButton.vue'
+export default {
+  components: {
+    SvgButton
+  },
+  props: {
+    href: {
+      type: String,
+      default: ''
+    },
+    tips: {
+      type: String,
+      default: '帮助'
+    },
+    iconName: {
+      type: String,
+      default: 'plugin-icon-plugin-help'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.help-box {
+  width: 24px;
+  height: 42px;
+
+  #help-icon {
+    :deep(.svg-icon.icon-plugin-icon-plugin-help) {
+      font-size: 16px;
+    }
+  }
+}
+</style>
diff --git a/packages/common/index.js b/packages/common/index.js
index 8582ac8b2..eae061faa 100644
--- a/packages/common/index.js
+++ b/packages/common/index.js
@@ -13,6 +13,7 @@
 import PluginSetting from './component/PluginSetting.vue'
 import PluginPanel from './component/PluginPanel.vue'
 import SvgButton from './component/SvgButton.vue'
+import LinkButton from './component/LinkButton.vue'
 
 import ConfigCollapse from './component/ConfigCollapse.vue'
 import ConfigGroup from './component/ConfigGroup.vue'
@@ -169,6 +170,7 @@ export {
   PluginPanel,
   VideoGuide,
   SvgButton,
+  LinkButton,
   BlockHistoryList,
   BlockHistoryTemplate,
   BlockLinkField,
diff --git a/packages/controller/src/index.js b/packages/controller/src/index.js
index 10edd8ba5..322c248ed 100644
--- a/packages/controller/src/index.js
+++ b/packages/controller/src/index.js
@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 import useLayout from './useLayout'
 import useCanvas from './useCanvas'
@@ -30,6 +30,7 @@ import { getGlobalConfig, setGlobalConfig } from './globalConfig'
 import useNotify from './useNotify'
 import useData from './useData'
 import useMessage from './useMessage'
+import useHelp from './useHelp'
 
 export const getExample = example
 
@@ -53,5 +54,6 @@ export {
   setGlobalConfig,
   useNotify,
   useData,
-  useMessage
+  useMessage,
+  useHelp
 }
diff --git a/packages/controller/src/useHelp.js b/packages/controller/src/useHelp.js
new file mode 100644
index 000000000..72238fc20
--- /dev/null
+++ b/packages/controller/src/useHelp.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+const getBaseUrl = () => 'https://opentiny.design/tiny-engine#/help-center/course/engine/'
+
+const helpState = {
+  docsUrl: {
+    block: 3,
+    bridge: 13,
+    data: 7,
+    datasource: 11,
+    i18n: 12,
+    page: 2,
+    script: 8
+  }
+}
+
+const getDocsUrl = (plugin) => {
+  return `${getBaseUrl()}${helpState.docsUrl[plugin]}`
+}
+
+export default () => ({
+  getBaseUrl,
+  getDocsUrl
+})
diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue
index a1b6626ab..879e437a1 100644
--- a/packages/design-core/src/DesignPlugins.vue
+++ b/packages/design-core/src/DesignPlugins.vue
@@ -118,6 +118,7 @@ export default {
     const robotVisible = ref(false)
     const robotComponent = ref(null)
     const { isTemporaryPage } = usePage()
+    const HELP_PLUGIN_ID = 'EditorHelp'
 
     const {
       pluginState,
@@ -152,6 +153,7 @@ export default {
     }
 
     const clickMenu = ({ item, index }) => {
+      if (item.id === HELP_PLUGIN_ID) return
       state.prevIdex = index
 
       // 切换插件与关闭插件时确认
diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue
index b2ac20141..f4531d5b3 100644
--- a/packages/plugins/block/src/Main.vue
+++ b/packages/plugins/block/src/Main.vue
@@ -1,6 +1,7 @@
 <template>
   <plugin-panel class="block-manage" title="区块管理" :isCloseLeft="false" @close="closePanel">
     <template #header>
+      <link-button :href="docsUrl"></link-button>
       <svg-button name="add-page" placement="bottom" tips="新建区块" style="cursor: not-allowed"></svg-button>
     </template>
     <template #content>
@@ -112,8 +113,8 @@ import {
   Popover as TinyPopover,
   Button as TinyButton
 } from '@opentiny/vue'
-import { PluginPanel, PluginBlockList, SvgButton, SaveNewBlock } from '@opentiny/tiny-engine-common'
-import { useBlock, useModal, useLayout, useCanvas } from '@opentiny/tiny-engine-controller'
+import { PluginPanel, PluginBlockList, SvgButton, SaveNewBlock, LinkButton } from '@opentiny/tiny-engine-common'
+import { useBlock, useModal, useLayout, useCanvas, useHelp } from '@opentiny/tiny-engine-controller'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { iconChevronDown } from '@opentiny/vue-icon'
 import BlockSetting, { openPanel, closePanel } from './BlockSetting.vue'
@@ -134,6 +135,7 @@ import {
 } from './js/blockSetting'
 import { fetchBlockList, requestBlocks, requestInitBlocks, fetchBlockContent } from './js/http'
 
+const docsUrl = useHelp().getDocsUrl('block')
 const { SORT_TYPE } = constants
 const externalBlock = ref(null) // 外部区块信息，用作激活外部传入的区块样式
 
@@ -174,6 +176,7 @@ export default {
     TinySelect,
     TinyOption,
     SvgButton,
+    LinkButton,
     TinyDropdown,
     TinyDropdownMenu,
     PluginPanel,
@@ -406,7 +409,8 @@ export default {
       delCategory,
       handleChangeDeletePopoverVisible,
       handleSelectVisibleChange,
-      externalBlock
+      externalBlock,
+      docsUrl
     }
   }
 }
@@ -483,6 +487,12 @@ export default {
     margin-left: 8px;
   }
 }
+
+:deep(.help-box) {
+  position: absolute;
+  left: 72px;
+  top: 3px;
+}
 </style>
 
 <style lang="less">
diff --git a/packages/plugins/bridge/src/Main.vue b/packages/plugins/bridge/src/Main.vue
index 7971120d2..7cfadb0f3 100644
--- a/packages/plugins/bridge/src/Main.vue
+++ b/packages/plugins/bridge/src/Main.vue
@@ -1,12 +1,13 @@
 <template>
   <plugin-panel title="资源管理" :isCloseLeft="false" @close="closePanel">
     <template #header>
+      <link-button :href="docsUrl"></link-button>
       <svg-button name="add-utils" placement="left" :tips="tips" @click="addResource('npm')"></svg-button>
     </template>
     <template #content>
       <tiny-tabs v-model="activedName" class="tabs full-width-tabs" tab-style="button-card" @click="switchTab">
         <tiny-tab-item :name="RESOURCE_TYPE.Util" title="工具类">
-          <bridge-manage ref="utils" :name="RESOURCE_TYPE.Util" @open="openBridgePanel"></bridge-manage>
+          <bridge-manage ref="utilsRef" :name="RESOURCE_TYPE.Util" @open="openBridgePanel"></bridge-manage>
         </tiny-tab-item>
         <tiny-tab-item v-if="isVsCodeEnv" :name="RESOURCE_TYPE.Bridge" title="桥接源">
           <bridge-manage ref="bridge" :name="RESOURCE_TYPE.Bridge" @open="openBridgePanel"></bridge-manage>
@@ -20,7 +21,8 @@
 <script>
 import { ref, computed } from 'vue'
 import { Tabs, TabItem } from '@opentiny/vue'
-import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
+import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
+import { useHelp } from '@opentiny/tiny-engine-controller'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import { RESOURCE_TYPE } from './js/resource'
 import BridgeManage from './BridgeManage.vue'
@@ -34,13 +36,15 @@ export default {
     PluginPanel,
     SvgButton,
     BridgeManage,
-    BridgeSetting
+    BridgeSetting,
+    LinkButton
   },
   setup() {
     const activedName = ref(RESOURCE_TYPE.Util)
     const bridge = ref(null)
-    const utils = ref(null)
+    const utilsRef = ref(null)
     const tips = computed(() => RESOURCE_TIP[activedName.value])
+    const docsUrl = useHelp().getDocsUrl('bridge')
 
     const switchTab = (tab) => {
       closePanel()
@@ -56,11 +60,11 @@ export default {
     }
 
     const refreshList = (type) => {
-      type === RESOURCE_TYPE.Util ? utils.value.refresh(type) : bridge.value.refresh(type)
+      type === RESOURCE_TYPE.Util ? utilsRef.value.refresh(type) : bridge.value.refresh(type)
     }
 
     const addResource = (type) => {
-      activedName.value === RESOURCE_TYPE.Util ? utils.value.add(type) : bridge.value.add(type)
+      activedName.value === RESOURCE_TYPE.Util ? utilsRef.value.add(type) : bridge.value.add(type)
     }
 
     return {
@@ -73,7 +77,8 @@ export default {
       openUtilPanel,
       refreshList,
       bridge,
-      utils,
+      docsUrl,
+      utilsRef,
       tips,
       isVsCodeEnv
     }
@@ -98,4 +103,9 @@ export default {
     height: 100%;
   }
 }
+:deep(.help-box) {
+  position: absolute;
+  left: 72px;
+  top: 3px;
+}
 </style>
diff --git a/packages/plugins/data/src/Main.vue b/packages/plugins/data/src/Main.vue
index 4143fdf89..cdef55d8c 100644
--- a/packages/plugins/data/src/Main.vue
+++ b/packages/plugins/data/src/Main.vue
@@ -3,6 +3,7 @@
     <div class="data-source-left-panel">
       <div class="title">
         <span>状态管理</span>
+        <link-button :href="docsUrl"></link-button>
         <close-icon @close="closePanel"></close-icon>
       </div>
       <tiny-tabs v-model="activeName" @click="tabClick" tab-style="button-card">
@@ -70,10 +71,11 @@ import {
   useResource,
   useNotify,
   useData,
-  useLayout
+  useLayout,
+  useHelp
 } from '@opentiny/tiny-engine-controller'
 import { setState, getSchema, deleteState, setGlobalState, getGlobalState } from '@opentiny/tiny-engine-canvas'
-import { CloseIcon } from '@opentiny/tiny-engine-common'
+import { CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
 import DataSourceList from './DataSourceList.vue'
 import CreateVariable from './CreateVariable.vue'
 import CreateStore from './CreateStore.vue'
@@ -90,7 +92,8 @@ export default {
     CloseIcon,
     TinyTabs: Tabs,
     TinyTabItem: TabItem,
-    CreateStore
+    CreateStore,
+    LinkButton
   },
   setup(props, { emit }) {
     const variableRef = ref(null)
@@ -106,6 +109,7 @@ export default {
     const { setSaved } = useCanvas()
     const { PLUGIN_NAME, getPluginApi } = useLayout()
     const { openCommon } = getPluginApi(PLUGIN_NAME.save)
+    const docsUrl = useHelp().getDocsUrl('data')
     const state = reactive({
       dataSource: {},
       createData: {
@@ -346,7 +350,8 @@ export default {
       removeStore,
       storeRef,
       OPTION_TYPE,
-      open
+      open,
+      docsUrl
     }
   }
 }
@@ -467,5 +472,10 @@ export default {
       height: 100%;
     }
   }
+  :deep(.help-box) {
+    position: absolute;
+    left: 70px;
+    top: 11px;
+  }
 }
 </style>
diff --git a/packages/plugins/datasource/src/Main.vue b/packages/plugins/datasource/src/Main.vue
index 8c53deb61..1ec29d6c8 100644
--- a/packages/plugins/datasource/src/Main.vue
+++ b/packages/plugins/datasource/src/Main.vue
@@ -1,6 +1,7 @@
 <template>
   <plugin-panel title="数据源">
     <template #header>
+      <link-button :href="docsUrl"></link-button>
       <svg-button
         class="add-page"
         tips="新建数据源"
@@ -51,12 +52,12 @@ import DataSourceRemotePanel, {
   close as closeRemotePanel,
   isOpen as isOpenRemotePanel
 } from './DataSourceRemotePanel.vue'
-import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
+import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
 import DataSourceForm, { open as openDataSourceForm, close as closeDataSourceForm } from './DataSourceForm.vue'
 import { close as closeRecordList } from './DataSourceRecordList.vue'
 import { close as closeRecordForm } from './DataSourceRecordForm.vue'
 import DataSourceRemoteMapping, { isOpen as isOpenSourceRemoteMapping } from './DataSourceRemoteMapping.vue'
-import { useDataSource } from '@opentiny/tiny-engine-controller'
+import { useDataSource, useHelp } from '@opentiny/tiny-engine-controller'
 import { requestUpdateDataSource } from './js/http'
 import DataSourceGlobalDataHandler, {
   open as openGlobalDataHander,
@@ -71,9 +72,11 @@ export default {
     DataSourceGlobalDataHandler,
     PluginPanel,
     DataSourceForm,
-    SvgButton
+    SvgButton,
+    LinkButton
   },
   setup() {
+    const docsUrl = useHelp().getDocsUrl('datasource')
     const state = reactive({
       editable: true,
       currentDataSource: { name: 'untitled', data: { type: 'array', columns: [] } },
@@ -138,20 +141,23 @@ export default {
       openDataSourceFormPanel,
       getRomoteReponseData,
       refreshDataSource,
-      openGlobalDataHanderPanel
+      openGlobalDataHanderPanel,
+      docsUrl
     }
   }
 }
 </script>
 <style lang="less" scoped>
-.add-page {
-  color: var(--ti-lowcode-datasource-btn-click-color);
-}
-.set-page {
-  font-size: 18px;
-  color: var(--ti-lowcode-datasource-btn-click-color);
-}
+.add-page,
+.set-page,
 .refresh-page {
+  width: 16px;
+  margin-right: 6px !important;
   color: var(--ti-lowcode-datasource-btn-click-color);
 }
+:deep(.help-box) {
+  position: absolute;
+  left: 58px;
+  top: 3px;
+}
 </style>
diff --git a/packages/plugins/help/index.js b/packages/plugins/help/index.js
index d14ba8a73..208f00be0 100644
--- a/packages/plugins/help/index.js
+++ b/packages/plugins/help/index.js
@@ -1,20 +1,20 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 import HelpIcon from './src/HelpIcon.vue'
 
 export default {
   id: 'EditorHelp',
-  title: '帮助',
+  title: '',
   icon: HelpIcon,
   align: 'bottom'
 }
diff --git a/packages/plugins/help/src/HelpIcon.vue b/packages/plugins/help/src/HelpIcon.vue
index c854a1460..f285fdf2b 100644
--- a/packages/plugins/help/src/HelpIcon.vue
+++ b/packages/plugins/help/src/HelpIcon.vue
@@ -1,21 +1,47 @@
 <template>
-  <tiny-tooltip v-model="state.showTooltip" :manual="true" effect="light" placement="right-end">
-    <template #content>
-      <div>
-        <span>{{ toolTipContent }}</span>
-        <svg-icon name="close" class="help-plugin-tooltip-close" @click="closeToolTip"></svg-icon>
-      </div>
-    </template>
-    <div id="help-plugin" @click.stop="onOpen">
-      <svg-icon name="plugin-icon-plugin-help"></svg-icon>
-      <tiny-guide
-        ref="tinyGuideRef"
-        :show-step="state.showStep"
-        :dom-data="domData"
-        :width="state.guideWidth"
-      ></tiny-guide>
+  <div id="help-plugin">
+    <div title="帮助">
+      <svg-icon name="plugin-icon-plugin-help" @click.stop="openHelpBox"></svg-icon>
     </div>
-  </tiny-tooltip>
+    <div v-if="state.helpBox" class="help-plugin-box">
+      <div class="help-plugin-box-top">
+        <svg-icon name="close" class="help-plugin-close" @click.stop="closeHelpBox"></svg-icon>
+      </div>
+      <div class="help-plugin-box-title">
+        {{ helpTitle }}
+      </div>
+      <div class="help-plugin-box-body">
+        <a class="help-plugin-box-body-item" :href="courseUrl" target="_blank">使用手册</a>
+        <tiny-tooltip v-model="state.showTooltip" :manual="true" effect="light" placement="right-end">
+          <template #content>
+            <div>
+              <span>{{ toolTipContent }}</span>
+              <svg-icon name="close" class="help-plugin-tooltip-close" @click="closeToolTip"></svg-icon>
+            </div>
+          </template>
+          <div class="help-plugin-box-body-item help-plugin-box-body-guide" @click="toShowStep">新手引导</div>
+        </tiny-tooltip>
+      </div>
+      <div class="help-plugin-box-ques">
+        <div class="help-plugin-box-ques-title">{{ questionTitle }}</div>
+        <a
+          v-for="(item, idx) in questionList"
+          :key="idx"
+          :href="item.url"
+          target="_blank"
+          class="help-plugin-box-ques-item"
+        >
+          {{ idx + 1 }}.{{ item.label }}
+        </a>
+      </div>
+    </div>
+    <tiny-guide
+      ref="tinyGuideRef"
+      :show-step="state.showStep"
+      :dom-data="domData"
+      :width="state.guideWidth"
+    ></tiny-guide>
+  </div>
 </template>
 
 <script>
@@ -34,13 +60,32 @@ export default {
   },
   setup() {
     const { activePlugin, PLUGIN_NAME, pluginState } = useLayout()
-    const toolTipContent = '点击这里，再次查看新手指引'
     const tinyGuideRef = ref()
+    const toolTipContent = '点击这里，再次查看新手指引'
+    const helpTitle = '帮助'
+    const questionTitle = '常见问题'
+    const courseUrl = 'https://opentiny.design/tiny-engine#/help-center/course/engine'
+    const questionList = [
+      {
+        label: '如何引入第三方组件库',
+        url: 'https://opentiny.design/tiny-engine#/help-center/course/engine/15'
+      },
+      {
+        label: '如何使用AI功能创建页面',
+        url: 'https://opentiny.design/tiny-engine#/help-center/course/engine/16'
+      },
+      {
+        label: '答疑视频回放',
+        url: 'https://opentiny.design/tiny-engine#/help-center/course/video/38'
+      }
+    ]
 
     const state = reactive({
       showStep: false,
       guideWidth: 360,
-      showTooltip: false
+      showTooltip: false,
+      showHelpDialog: false,
+      helpBox: false
     })
 
     let toolTipTimer
@@ -58,6 +103,20 @@ export default {
         closeToolTip()
       }, 8000)
     }
+    const closeHelpBox = () => {
+      state.helpBox = false
+    }
+
+    const openHelpBox = () => {
+      state.helpBox = !state.helpBox
+    }
+
+    const toShowStep = () => {
+      if (!tinyGuideRef.value?.state?.tour?.isActive()) {
+        state.showStep = !state.showStep
+        state.helpBox = false
+      }
+    }
 
     const domData = [
       {
@@ -73,6 +132,7 @@ export default {
           }
         ],
         beforeShow: () => {
+          closeHelpBox()
           activePlugin(PLUGIN_NAME.Materials)
           closeToolTip()
           pluginState.pluginEvent = 'none'
@@ -154,18 +214,12 @@ export default {
       }
     ]
 
-    const onOpen = () => {
-      if (!tinyGuideRef.value?.state?.tour?.isActive()) {
-        state.showStep = !state.showStep
-      }
-    }
-
     onMounted(() => {
       // 需要注意，同一个平台，有可能会同时出现多个不同版本的设计器。
       const localStorageVersion = window.localStorage.getItem(GUIDE_STORAGE_KEY)
 
       if (!localStorageVersion || localStorageVersion < GUIDE_VERSION) {
-        onOpen()
+        toShowStep()
       }
     })
 
@@ -173,10 +227,16 @@ export default {
       tinyGuideRef,
       IconClose: IconClose(),
       toolTipContent,
+      helpTitle,
+      questionTitle,
+      questionList,
+      courseUrl,
       domData,
       state,
       closeToolTip,
-      onOpen
+      closeHelpBox,
+      openHelpBox,
+      toShowStep
     }
   }
 }
@@ -187,6 +247,15 @@ export default {
   margin-left: 20px;
   cursor: pointer;
 }
+.help-plugin-close {
+  cursor: pointer;
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
+a:hover {
+  text-decoration: underline;
+}
 </style>
 
 <!-- tiny-guide在body元素上，所以不使用scoped -->
@@ -255,4 +324,59 @@ div.tiny-guide.shepherd-element {
 .shepherd-modal-overlay-container.shepherd-modal-is-visible {
   fill: var(--ti-lowcode-help-guide-mask-bg-color);
 }
+
+.help-plugin-box {
+  cursor: auto;
+  position: absolute;
+  left: var(--base-nav-panel-width);
+  bottom: 68px;
+  width: 260px;
+  background-color: var(--ti-lowcode-help-box-bg-color);
+  border-radius: 6px;
+  box-shadow: var(--ti-lowcode-help-box-shadow);
+  padding: 28px 32px;
+  &-top {
+    text-align: right;
+  }
+  &-title {
+    color: var(--ti-lowcode-help-box-title-text-color);
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+  &-body {
+    &-item {
+      display: block;
+      cursor: pointer;
+      width: 60px;
+      font-size: 14px;
+      color: var(--ti-lowcode-help-box-item-text-color);
+      margin-bottom: 12px;
+    }
+    &-item:hover {
+      text-decoration: underline;
+    }
+    &-guide:hover {
+      text-decoration: none;
+    }
+  }
+
+  &-ques {
+    border-top: 1px solid var(--ti-lowcode-help-box-question-border-top);
+    padding-top: 12px;
+    &-title {
+      color: var(--ti-lowcode-help-box-title-text-color);
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 16px;
+    }
+    &-item {
+      display: inline-block;
+      color: var(--ti-lowcode-help-box-question-item-text-color);
+      cursor: pointer;
+      font-size: 14px;
+      margin-bottom: 12px;
+    }
+  }
+}
 </style>
diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index 7f875b4d8..eaeda9605 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -1,5 +1,8 @@
 <template>
   <plugin-panel title="国际化资源" :isCloseLeft="false" class="plugin-panel-i18n">
+    <template #header>
+      <link-button :href="docsUrl"></link-button>
+    </template>
     <template #content>
       <div class="btn-box">
         <tiny-button @click="openEditor($event, {})">新增词条</tiny-button>
@@ -123,8 +126,8 @@ import { computed, ref, watchEffect, reactive, onMounted, nextTick, resolveCompo
 import useClipboard from 'vue-clipboard3'
 import { Grid, GridColumn, Input, Popover, Button, FileUpload, Loading, Tooltip, Select } from '@opentiny/vue'
 import { iconLoadingShadow } from '@opentiny/vue-icon'
-import { PluginPanel } from '@opentiny/tiny-engine-common'
-import { useTranslate, useApp, useModal, getGlobalConfig } from '@opentiny/tiny-engine-controller'
+import { PluginPanel, LinkButton } from '@opentiny/tiny-engine-common'
+import { useTranslate, useApp, useModal, getGlobalConfig, useHelp } from '@opentiny/tiny-engine-controller'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { BASE_URL } from '@opentiny/tiny-engine-common/js/environments'
@@ -138,6 +141,7 @@ export default {
     TinyGrid: Grid,
     TinyGridColumn: GridColumn,
     PluginPanel,
+    LinkButton,
     TinySelect: Select,
     TinyFileUpload: FileUpload
   },
@@ -174,6 +178,7 @@ export default {
         label: '按英文排序'
       }
     ]
+    const docsUrl = useHelp().getDocsUrl('i18n')
     const currentSearchType = ref('')
     const copyTipContent = ref('')
     const searchKey = ref('')
@@ -418,7 +423,8 @@ export default {
       downloadFile,
       isEditMode,
       editingRow,
-      batchDelete
+      batchDelete,
+      docsUrl
     }
   }
 }
@@ -634,4 +640,9 @@ export default {
     color: var(--ti-lowcode-base-text-color);
   }
 }
+:deep(.help-box) {
+  position: absolute;
+  left: 86px;
+  top: 3px;
+}
 </style>
diff --git a/packages/plugins/page/src/Main.vue b/packages/plugins/page/src/Main.vue
index 7e81b0f6d..b539649c0 100644
--- a/packages/plugins/page/src/Main.vue
+++ b/packages/plugins/page/src/Main.vue
@@ -1,6 +1,7 @@
 <template>
   <plugin-panel :title="title" @close="pluginPanelClosed">
     <template #header>
+      <link-button :href="docsUrl"></link-button>
       <svg-button
         class="add-folder-icon"
         name="add-folder"
@@ -34,8 +35,8 @@
 
 <script lang="jsx">
 import { reactive, ref, watchEffect } from 'vue'
-import { useCanvas, useApp, useResource, usePage } from '@opentiny/tiny-engine-controller'
-import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
+import { useCanvas, useApp, useResource, usePage, useHelp } from '@opentiny/tiny-engine-controller'
+import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import PageSetting, { openPageSettingPanel, closePageSettingPanel } from './PageSetting.vue'
 import PageFolderSetting, { openFolderSettingPanel, closeFolderSettingPanel } from './PageFolderSetting.vue'
@@ -59,7 +60,8 @@ export default {
     PluginPanel,
     SvgButton,
     PageFolderSetting,
-    PageTree
+    PageTree,
+    LinkButton
   },
   props: {
     title: {
@@ -74,6 +76,7 @@ export default {
     const { resState } = useResource()
     const pageTreeRef = ref(null)
     const ROOT_ID = pageSettingState.ROOT_ID
+    const docsUrl = useHelp().getDocsUrl('page')
 
     const state = reactive({
       isFolder: false
@@ -148,8 +151,17 @@ export default {
       pluginPanelClosed,
       openSettingPanel,
       createNewFolder,
-      createNewPage
+      createNewPage,
+      docsUrl
     }
   }
 }
 </script>
+
+<style lang="less" scoped>
+:deep(.help-box) {
+  position: absolute;
+  left: 72px;
+  top: 3px;
+}
+</style>
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index f5a282dc0..c1f35bf1a 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -3,6 +3,7 @@
     <div class="code-edit-head">
       <div class="head-left">
         <span class="title">页面 JS</span>
+        <link-button :href="docsUrl"></link-button>
       </div>
       <div class="head-right">
         <tiny-button type="primary" class="save-btn" @click="saveMethods">
@@ -27,7 +28,8 @@
 <script>
 import { onBeforeUnmount } from 'vue'
 import { Button } from '@opentiny/vue'
-import { VueMonaco, CloseIcon } from '@opentiny/tiny-engine-common'
+import { VueMonaco, CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
+import { useHelp } from '@opentiny/tiny-engine-controller'
 import { initCompletion } from '@opentiny/tiny-engine-common/js/completion'
 import { initLinter } from '@opentiny/tiny-engine-common/js/linter'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
@@ -44,10 +46,12 @@ export default {
   components: {
     MonacoEditor: VueMonaco,
     TinyButton: Button,
-    CloseIcon
+    CloseIcon,
+    LinkButton
   },
   emits: ['close'],
   setup(props, { emit }) {
+    const docsUrl = useHelp().getDocsUrl('script')
     const { state, monaco, change, close, saveMethods } = useMethod({ emit })
 
     const options = {
@@ -90,7 +94,8 @@ export default {
       close,
       change,
       saveMethods,
-      editorDidMount
+      editorDidMount,
+      docsUrl
     }
   }
 }
@@ -117,6 +122,8 @@ export default {
 
     .head-left {
       padding-left: 15px;
+      display: flex;
+      align-items: center;
       .title {
         color: var(--ti-lowcode-plugin-panel-title-color);
         font-weight: var(--ti-lowcode-plugin-panel-title-font-weight);
@@ -165,4 +172,10 @@ export default {
     }
   }
 }
+:deep(.help-box) {
+  height: auto;
+  #help-icon {
+    margin-left: 8px;
+  }
+}
 </style>
diff --git a/packages/theme/dark/help.less b/packages/theme/dark/help.less
index 7e11ce5ff..e3457c2ec 100644
--- a/packages/theme/dark/help.less
+++ b/packages/theme/dark/help.less
@@ -5,3 +5,11 @@
   --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-text-color-4);
   --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-base-bg-3);
 }
+.help-plugin-box {
+  --ti-lowcode-help-box-bg-color: #3c3c3c;
+  --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
+  --ti-lowcode-help-box-title-text-color: #ffffff;
+  --ti-lowcode-help-box-item-text-color: #adb0b8;
+  --ti-lowcode-help-box-question-border-top: rgba(255, 255, 255, 0.1);
+  --ti-lowcode-help-box-question-item-text-color: #4f77ff;
+}
diff --git a/packages/theme/light/help.less b/packages/theme/light/help.less
index 58ae9d97f..e53a7e3e8 100644
--- a/packages/theme/light/help.less
+++ b/packages/theme/light/help.less
@@ -5,3 +5,11 @@
   --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-primary-color-1);
   --ti-lowcode-help-guide-mask-bg-color: inherit;
 }
+.help-plugin-box {
+  --ti-lowcode-help-box-bg-color: #ffffff;
+  --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
+  --ti-lowcode-help-box-title-text-color: #191919;
+  --ti-lowcode-help-box-item-text-color: #191919;
+  --ti-lowcode-help-box-question-border-top: #ebebeb;
+  --ti-lowcode-help-box-question-item-text-color: #1476ff;
+}