feat：设计器增加帮助文档说明 (#100)

2023-12-26 03:50:39 -08:00 · 2023-12-26 03:50:39 -08:00 · f87fa76335
parent 2cc1071e4d
commit f87fa76335
16 changed files with 376 additions and 83 deletions
--- a/packages/common/component/LinkButton.vue
+++ 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>
--- 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,
--- 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
 }
--- a/packages/controller/src/useHelp.js
+++ 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
+})
--- 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

      // 切换插件与关闭插件时确认
--- 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">
--- 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>
--- 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>
--- 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>
--- 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'
 }
--- 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>
--- 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>
--- 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>
--- 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>
--- 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;
+}
--- 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;
+}