docs(sites): add faq doc in guidance (#716)

* docs(sites): add faq doc in guidance

* docs(sites): faq doc content change

examples/sites/demos/pc/menus.js

@@ -19,7 +19,8 @@ export const docMenus = [
       { 'title': '开发示例', 'titleEn': 'developDemo', 'key': 'develop-demo' },
       { 'title': '国际化', 'titleEn': 'i18n', 'key': 'i18n' },
       { 'title': '主题配置', 'titleEn': 'theme', 'key': 'theme' },
-      { 'title': '表单校验配置', 'titleEn': 'formValid', 'key': 'form-valid' }
+      { 'title': '表单校验配置', 'titleEn': 'formValid', 'key': 'form-valid' },
+      { 'title': '常见问题', 'titleEn': 'faq', 'key': 'faq' }
     ]
   }
 ]

examples/sites/demos/pc/webdoc/faq-en.md

@@ -0,0 +1,18 @@
+## FAQ
+
+### 1、Popup element misaligned and flipped in wujie micro front-end
+
+_Reason:_ The popup element has a boundary detection logic, and in sub applications, the width and height of 'window' may be much smaller than that of the viewport,
+therefore, it can misjudge boundaries, leading to issues such as flipping and misalignment.
+
+_Solution:_ Introducing popup global configuration, assigning the 'window' of the main application to the 'viewportWindow' of the global configuration for boundary judgment
+
+```js
+import globalConfig from '@opentiny/vue-renderless/common/global'
+
+// Determine if the app run in the sub application
+if (window.__POWERED_BY_WUJIE__) {
+  // In sub applications, the window of the main application can be obtained through window. parent
+  globalConfig.viewportWindow = window.parent
+}
+```

examples/sites/demos/pc/webdoc/faq.md

@@ -0,0 +1,18 @@
+## 常见问题
+
+### 1、弹出元素在无界微前端中发生错位、翻转
+
+_原因：_ 弹出类的元素，存在一个边界检测逻辑，在子应用中，`window` 的宽高可能会比视口小得多，
+因此会错误判断边界，导致翻转和错位等问题。
+
+_解决方案:_ 引入 popup 全局配置，将主应用的 `window` 赋值给全局配置的 `viewportWindow` 用于边界判断
+
+```js
+import globalConfig from '@opentiny/vue-renderless/common/global'
+
+// 需要判断是否在子应用当中
+if (window.__POWERED_BY_WUJIE__) {
+  // 子应用中可以通过window.parent获取主应用的window
+  globalConfig.viewportWindow = window.parent
+}
+```