docs: 完善各端使用&tooltip文档 (#1732)

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>

site/.dumirc.ts

@@ -58,6 +58,14 @@ export default defineConfig({
         },
         order: 4,
       },
+      {
+        slug: 'tutorial/framework',
+        title: {
+          zh: '多端/框架 - Framework',
+          en: 'Framework',
+        },
+        order: 70,
+      },
       {
         slug: 'tutorial/advanced',
         title: {
@@ -67,7 +75,7 @@ export default defineConfig({
         order: 80,
       },
       {
-        slug: 'docstutorial/question',
+        slug: 'tutorial/question',
         title: {
           zh: '常见问题 - Question',
           en: 'Question',

site/docs/api/chart/tooltip.zh.md

@@ -24,19 +24,23 @@ const data = [
 </Canvas>;
 ```
 
+## 组成
+
+![](https://mdn.alipayobjects.com/huamei_khb4xj/afts/img/A*CdXbTJnr2v4AAAAAAAAAAAAADq2NAQ/original)
+
 ## Props
 
 ### padding: number ｜ string
 
 边距
 
-### triggerOn: string
+### triggerOn: 'click' | 'press'
 
-触发tooltip显示事件，默认为 press, 可以为 touchstart 等
+触发 tooltip 显示事件，默认为 press
 
-### triggerOff: string
+### triggerOff: 'pressend'
 
-触发tooltip消失事件，默认为 pressend, 可以为 touchend 等
+触发 tooltip 消失事件，默认为 pressend
 
 ### alwaysShow: boolean
 
@@ -45,39 +49,67 @@ const data = [
 ### showCrosshairs: boolean
 
 是否显示十字线
+
 ### crosshairsType: 'x' | 'y' | 'xy'
 
 十字线类型
 
 ### crosshairsStyle: LineAttrs
-> 类型为绘图属性：[线条属性](/zh/docs/tutorial/shape-attrs#线条属性) 
+
+> 类型为绘图属性：[线条属性](/zh/docs/tutorial/shape-attrs#线条属性)
 
 十字线样式
 
 ### nameStyle: TextAttrs
-> 类型为绘图属性：[文本属性](/zh/docs/tutorial/shape-attrs#文本属性) 
 
-名称样式
+> 类型为绘图属性：[文本属性](/zh/docs/tutorial/shape-attrs#文本属性)
+
+主体名称样式
 
 ### valueStyle: TextAttrs
-> 类型为绘图属性：[文本属性](/zh/docs/tutorial/shape-attrs#文本属性) 
 
-值样式
+> 类型为绘图属性：[文本属性](/zh/docs/tutorial/shape-attrs#文本属性)
+
+主体值样式
 
 ### background: RectAttrs
+
+> 类型为绘图属性：[通用属性](/zh/docs/tutorial/shape-attrs#通用属性)
+
+主体背景样式
+
+### xTip： string ｜ function
+
+xTip 中显示的 text 定义
+
+### xTipTextStyle：TextAttrs
+
+> 类型为绘图属性：[文本属性](/zh/docs/tutorial/shape-attrs#文本属性)
+
+xTip 中字体样式
+
+### xTipBackground：RectAttrs
+
 > 类型为绘图属性：[通用属性](/zh/docs/tutorial/shape-attrs#通用属性)
 
-背景样式
+xTip 中背景样式
 
 ### showItemMarker: boolean
 
 是否显示
 
+### onChange：function
+
+tooltip 选中数据发生改变时的回调函数
 
 ## 方法
 
+可通过获取 ref 调用
+
 ### show(point: {x: number, y: number})
+
 在 x，y 处显示 tooltip 组件
+
 ### hide()
-隐藏 tooltip 组件
 
+隐藏 tooltip 组件

site/docs/tutorial/jsx-transform.zh.md → site/docs/tutorial/framework/jsx-transform.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 配置 jsx transform
-order: 10
+order: 15
 ---
 
 F2 使用 JSX 语法来构建图表，所以需要在运行前对 JSX 语法进行编译， JSX 更多细节可参考 React 的官方文档 [JSX 简介](https://zh-hans.reactjs.org/docs/introducing-jsx.html)

site/docs/tutorial/miniprogram.zh.md → site/docs/tutorial/framework/miniprogram.zh.md

@@ -12,10 +12,10 @@ order: 13
 npm i @antv/f2 --save
 
 # 安装小程序组件
-npm i @antv/f2-my --save
+npm i @antv/f-my --save
 
 # 微信小程序
-npm i @antv/f2-wx --save
+npm i @antv/f-wx --save
 
 ```
 
@@ -56,7 +56,7 @@ page.json
 ```json
 {
   "usingComponents": {
-    "f2": "@antv/f2-my"
+    "f2": "@antv/f-my"
   }
 }
 ```
@@ -145,7 +145,7 @@ Page({
 
 ### demo
 
-- 参考示例：https://github.com/antvis/F2/tree/master/packages/my/examples
+- 参考示例：https://github.com/antvis/FEngine/tree/master/packages/f-my/examples
 
 ## 微信小程序
 
@@ -156,7 +156,7 @@ page.json
 ```json
 {
   "usingComponents": {
-    "f2": "@antv/f2-wx"
+    "f2": "@antv/f-wx"
   }
 }
 ```
@@ -245,12 +245,4 @@ Page({
 
 ### demo
 
-- 参考示例：https://github.com/antvis/F2/tree/master/packages/wx/examples
-
-## 更多
-
-F2 是基于 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) 的标准接口绘制的，所以只要能提供标准 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) 接口的实现对象，F2 就能进行图表绘制
-
-### 封装思路
-
-因为在小程序中给的 `context` 对象不是标准的 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) , 所以封装的核心思路是将 `context` 和 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) 对齐，所以 F2 针对支付宝和微信这 2 个常见的场景做了一层 `context` 的对齐，详情可见: https://github.com/antvis/f2-context, 其他小程序也可以按同样的思路封装
+- 参考示例：https://github.com/antvis/FEngine/tree/master/packages/f-wx/examples

site/docs/tutorial/framework/overview.zh.md

@@ -0,0 +1,28 @@
+---
+title: 多端适配
+order: 10
+---
+
+在 5.0 中，F 系列基于移动端特点和共性进行了移动端底层架构（Fengine）的统一，对接于最新的 G 5.0 之上。我们利用 Fengine 提供的多端适配，可以快速适配各种框架/端。
+
+## 说明
+
+![](https://mdn.alipayobjects.com/huamei_khb4xj/afts/img/A*eihISab7e24AAAAAAAAAAAAADq2NAQ/original)
+
+其中：
+
+- @antv/f-engine ---- 无框架
+- @antv/f-react ---- react 框架
+- @antv/f-vue ---- vue 框架
+- @antv/f-my ---- 支付宝小程序端
+- @antv/f-wx ---- 微信小程序端
+
+## 使用方式
+
+F2 默认引入 @antv/f-engine 中的 canvas。使用者根据框架/端，引入不同端的 canvas 以及 F2， 即可快速搭建可视化图表。具体使用方式可查看对应文档。
+
+## 封装思路
+
+F2 是基于 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) 的标准接口绘制的，所以只要能提供标准 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) 接口的实现对象，F2 就能进行图表绘制
+
+因为在小程序中给的 `context` 对象不是标准的 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) , 所以封装的核心思路是将 `context` 和 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) 对齐，所以 F2 针对支付宝和微信这 2 个常见的场景做了一层 `context` 的对齐，详情可见: https://github.com/antvis/f2-context, 其他小程序也可以按同样的思路封装

site/docs/tutorial/react.zh.md → site/docs/tutorial/framework/react.zh.md

@@ -9,15 +9,15 @@ order: 11
 
 ```bash
 npm install @antv/f2 --save
-npm install @antv/f2-react --save
+npm install @antv/f-react --save
 ```
 
 2. **完整示例**
 
 ```jsx
 import React from 'react';
 import ReactDOM from 'react';
-import Canvas from '@antv/f2-react';
+import Canvas from '@antv/f-react';
 import { Chart, Interval } from '@antv/f2';
 
 const data = [
@@ -42,5 +42,5 @@ ReactDOM.render(
 
 **完整示例可参考**
 
-- codesandbox: https://codesandbox.io/s/f2-react-gd3e84
-- https://github.com/antvis/F2/tree/master/packages/react/examples
+- codesandbox: https://codesandbox.io/s/f-react-forked-lcrxqf
+- https://github.com/antvis/FEngine/tree/master/packages/f-react/examples

site/docs/tutorial/vue.zh.md → site/docs/tutorial/framework/vue.zh.md

@@ -3,15 +3,15 @@ title: 如何在 Vue 中使用
 order: 12
 ---
 
-为了方便 Vue 项目的使用，F2 也封装了一个 vue 的组件
+为了方便 Vue 项目的使用，Fengine 也封装了一个 vue 的组件
 
 ## Usage
 
 ### 1. 安装依赖
 
 ```bash
 npm install @antv/f2 --save
-npm install @antv/f2-vue --save
+npm install @antv/f-vue --save
 ```
 
 ### 2. 配置 F2 的 JSX 编译
@@ -84,7 +84,7 @@ export default defineConfig({
 ```vue
 <script>
 import { toRaw } from 'vue';
-import Canvas from '@antv/f2-vue';
+import Canvas from '@antv/f-vue';
 import { Chart, Interval, Axis } from '@antv/f2';
 
 const data1 = [
@@ -142,5 +142,5 @@ export default {
 
 **完整示例可参考**
 
-- codesandbox: https://codesandbox.io/s/f2-vue-9yywsh?file=/src/App.vue
-- https://github.com/antvis/F2/tree/master/packages/vue/examples
+- codesandbox: https://codesandbox.io/s/f-vue-wlwtkb?file=/src/App.vue
+- https://github.com/antvis/FEngine/tree/master/packages/f-vue/examples

site/docs/tutorial/getting-started.zh.md

@@ -13,7 +13,7 @@ F2 4.0 开始，我们将以声明式编写图表，声明式可以让你的代
 
 ## 快速开始
 
-> 下面示例是以非 React 为演示的，如果项目已经是 React， 可以参考 [如何在 React 中使用](./react)
+> 下面示例是以非 React 为演示的，如果项目已经是 React， 可以参考 [如何在 React 中使用](./framework/react)
 
 ### 配置 jsx transform