Merge branch 'plus/markdownRender' of github.com:DouyinFE/semi-design into plus/markdownRender

content/other/configprovider/index-en-US.md

@@ -383,7 +383,7 @@ function Demo(props = {}) {
 |------------|-------------------------------------------------------------------------------------------------------------------|---------------|---------|
 | direction  | Sets the direction of the text                                                                                    | `ltr`\| `rtl` | `ltr`   |
 | getPopupContainer | Specifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set 'position: relative`  This will change the DOM tree position, but not the view's rendering position.  | function():HTMLElement | () => document.body    |
-| locale     | Multi-language configuration, same as the [usage](/en-US/other/locale) of `locale` parameter in `LocaleProvider`  | object         |         |
+| locale     | Multi-language configuration, same as the [usage](/en-US/other/locale) of `locale` parameter in `LocaleProvider`(If `locale` is configured in `ConfigProvider` and `LocaleProvider` at the same time, the former has higher priority than the latter)  | object         |         |
 | timeZone   | [Time zone identifier](#Time_Zone_Identifier)                                                                     | string\|number |         |
 
 

content/other/configprovider/index.md

@@ -385,7 +385,7 @@ function Demo(props = {}) {
 |-------------------|-----------------------------------------------------------------|------------------------|---------------------|
 | direction         | 设置文本的方向                                                         | `ltr`\| `rtl`          | `ltr`               |
 | getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative` 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。            | function():HTMLElement | () => document.body |
-| locale            | 多语言配置，同`LocaleProvider`中`locale`参数的[用法](/zh-CN/other/locale#使用) | object                 |                     |
+| locale            | 多语言配置，同`LocaleProvider`中`locale`参数的[用法](/zh-CN/other/locale#使用)（如果同时在`ConfigProvider`和`LocaleProvider`中配置`locale`，前者优先级高于后者） | object                 |                     |
 | timeZone          | [时区标识](#时区标识)                                                   | string\|number         |                     |
 
 

content/plus/MarkdownRender/index.md

@@ -1,44 +0,0 @@
----
-localeCode: zh-CN
-order: 0
-category: Plus
-title:  Markdown 渲染器
-icon: doc-configprovider
-dir: column
-brief: 在网页中即时渲染 Markdown 和 MDX
----
-
-
-
-## 代码演示
-
-### 如何引入
-
-```jsx live=true dir="column"
-import { MarkdownRender } from '@douyinfe/semi-ui';
-import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
-
-
-function Demo(){
-    return <MarkdownRender mdxRaw={`
-    
-    `} components={SemiMarkdownComponents}/>
-}
-
-```
-
-### 基本示例
-导入 MarkdownRender 后，直接传入 Markdown 或 MDX 纯文本即可。
-
-引入 SemiMarkdownComponents 并传入 MarkdownRender 可以美化文档，文档中的基础元素例如文本、标题、超链接、图片、表格等会使用 Semi 组件渲染，因为这些文档组件不是每个开发者必须，为了减少包体积，需要手动引入。
-
-
-### 文档中的自定义渲染
-
-你可以任意替换 Markdown 或 MDX 文档中的文档元素的显示效果，只需向 `components` props 中传入对于组件名称和你的渲染组件即可
-
-比如，现在需要将所有文本的颜色设置成蓝色
-
-```jsx
-
-```

content/plus/markdownrender/index-en-US.md

@@ -0,0 +1,147 @@
+---
+localeCode: en-US
+order: 20
+category: Plus
+title:  Markdown Render
+icon: doc-configprovider
+dir: column
+brief: Instantly render Markdown and MDX in web pages
+---
+
+## When to use
+
+Markdown is a document markup language that can implement basic common rich text functions such as titles, pictures, tables, links, bolding, etc. through simple tags.
+MDX is based on Markdown and allows the introduction of JSX to achieve more complex and customized document writing and display requirements.
+
+The MarkdownRender component provided by Semi supports rendering Markdown and MDX. No special configuration is required. By passing in plain text, rich text content that conforms to Semi style specifications can be rendered.
+
+
+Usually used in the following scenarios:
+- Document station writing and rendering
+- Front-end rendering when the server dynamically generates rich text content
+- A light interactive website that focuses on content display
+
+
+## Demos
+
+### How to import
+
+```jsx
+import { MarkdownRender } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+```
+
+
+
+### Basic usage
+After importing MarkdownRender, just pass in Markdown or MDX plain text directly.
+
+Introducing SemiMarkdownComponents and passing it into MarkdownRender, basic elements in the document such as text, titles, hyperlinks, pictures, tables, etc. will be rendered using Semi components. Not everyone needs these document elements, so in order to reduce the package size, they need to be introduced manually.
+
+```jsx live=true dir="column"
+import { MarkdownRender } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo(){
+    return <MarkdownRender components={SemiMarkdownComponents} mdxRaw={`
+# Title No. 1
+## Title No. 2
+### Title No. 3
+
+The main text content is ordinary text, and it can also be **bold**~~strikethrough~~ and <u>underline</u> [Hyperlink](https://semi.design) etc. Basic syntax of Markdown and HTML Supported rich text
+
+#### List syntax support
+- Eat well
+- sleep well
+- Have fun
+- Study hard
+- have a good chat
+- Have a good argument
+- Live an ordinary day
+
+![Colorful World](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg)
+    
+| Support | Markdown tables | c | d |
+| - | :- | -: | :-: |
+| 1 | 2 | 3 | 4 |
+| 21 | 22 | 23 | 24 |
+| 31 | 32 | 33 | 34 |
+| 41 | 42 | 43 | 44 |
+    `}/>
+}
+
+```
+
+### Modify element style
+
+You can arbitrarily replace the display effect of document elements in Markdown or MDX documents. Just pass your rendering component override to the `components` props.
+
+For example, now you need to set the color of all headings No. 1 to the main color
+
+```jsx live=true
+import { MarkdownRender, Typography } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo() {
+    const components ={...SemiMarkdownComponents};
+    
+    components['h1'] = ({children}) => <Typography.Title heading={1} style={{color:"var(--semi-color-primary)"}}>{children}</Typography.Title>
+    
+    return <MarkdownRender mdxRaw={`# Primary Color Title`} components={components} />
+}
+
+
+```
+
+Basic element tag support that can be overridden `a blockquote br code em h1 h2 h3 h4 h5 hr img li ol p pre strong ul table`
+
+
+
+### Add custom components
+
+By passing in custom components to `components` Props, you can write JSX directly in Markdown, and the component will be rendered to the final page, supporting JS events.
+
+<Notice type="primary" title="Note">
+   <div>Try to ensure that the JSX code in the rendered Markdown is trustworthy to prevent XSS. </div>
+</Notice>
+
+
+```jsx live=true
+import { Button, MarkdownRender, Typography } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo() {
+    const components = { ...SemiMarkdownComponents };
+
+    components['MyButton'] = ({ children,onClick }) => {
+        return <Button type={"primary"} onClick={onClick} style={{marginBottom:"12px"}}> {children} </Button>
+    }
+
+    return <MarkdownRender 
+        mdxRaw={`
+#### Below is a button rendered in Markdown
+<MyButton onClick={()=>alert("MyButton is clicked")}>MyButton click me</MyButton>
+
+Just write JSX directly in Markdown
+        `} 
+        components={components} />
+}
+
+
+```
+
+
+### MarkdownRender
+
+| PROPERTIES         | INSTRUCTIONS                         | TYPE                                    | DEFAULT |
+|------------|----------------------------|---------------------------------------| --- |
+| mdxRaw     | Plain text in Markdown or MDX        | string                                | - |
+| components | Used to cover Markdown elements and also add custom components | Record<string, JSXElementConstructor> | - |
+
+## Design Token
+
+<DesignToken/>
+

content/plus/markdownrender/index.md

@@ -0,0 +1,147 @@
+---
+localeCode: zh-CN
+order: 20
+category: Plus
+title:  Markdown 渲染器
+icon: doc-configprovider
+dir: column
+brief: 在网页中即时渲染 Markdown 和 MDX
+---
+
+## 使用场景
+
+Markdown 是一种文档标记语言，可以通过简单的标记实现例如标题，图片，表格，链接，加粗等基本常用富文本功能。
+MDX 是在 Markdown 基础上，允许引入 JSX 实现更加复杂定制化的文档撰写与展示需求。
+
+Semi 提供的 MarkdownRender 组件支持渲染 Markdown 和 MDX，无需特别配置，传入纯文本即可渲染出符合 Semi 样式规范的富文本内容。
+
+
+通常用于下列场景：
+- 文档站编写与渲染
+- 服务端动态生成富文本内容时，前端渲染
+- 偏内容展示的轻交互网站
+
+
+## 代码演示
+
+### 如何引入
+
+```jsx
+import { MarkdownRender } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+```
+
+
+
+### 基本用法
+导入 MarkdownRender 后，直接传入 Markdown 或 MDX 纯文本即可。
+
+引入 SemiMarkdownComponents 并传入 MarkdownRender，文档中的基础元素例如文本、标题、超链接、图片、表格等会使用 Semi 组件渲染，这些文档元素并非所有人都需要，因此为了减少包体积，需要手动引入。
+```jsx live=true dir="column"
+import { MarkdownRender } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo(){
+    return <MarkdownRender components={SemiMarkdownComponents} mdxRaw={`
+# 1号标题
+## 2号标题
+### 3号标题
+
+正文内容是普通的文本，也可以**加粗**~~删除线~~和<u>下划线</u> [超链接](https://semi.design) 等 Markdown 与 HTML 的基本语法所支持的富文本
+
+#### 列表语法支持
+- 好好地吃饭
+- 好好地睡觉
+- 好好地游玩
+- 好好地学习
+- 好好地聊天
+- 好好地吵架
+- 过着平凡普通的每日 
+
+![Colorful World](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg)
+    
+| 支持 | Markdown 表格 |  c |  d  |
+| - | :- | -: | :-: |
+| 1 | 2 | 3 | 4 |
+| 21 | 22 | 23 | 24 |
+| 31 | 32 | 33 | 34 |
+| 41 | 42 | 43 | 44 |
+
+    `}/>
+}
+
+```
+
+### 修改元素样式
+
+你可以任意替换 Markdown 或 MDX 文档中的文档元素的显示效果，只需向 `components` props 中传入你的渲染组件覆盖即可
+
+比如，现在需要将所有1号标题的颜色设置成主色
+
+```jsx live=true
+import { MarkdownRender, Typography } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo() {
+    const components ={...SemiMarkdownComponents};
+    
+    components['h1'] = ({children}) => <Typography.Title heading={1} style={{color:"var(--semi-color-primary)"}}>{children}</Typography.Title>
+    
+    return <MarkdownRender mdxRaw={`# 主色标题`} components={components} />
+}
+
+
+```
+
+可以覆盖的基本元素 tag 支持 `a blockquote br code em h1 h2 h3 h4 h5 hr img li ol p pre strong ul table`
+
+
+
+### 添加自定义组件
+
+通过传入自定义组件到 `components` Props，能够实现在 Markdown 中直接书写 JSX，组件会被渲染到最终页面上，支持 JS 事件。
+
+<Notice type="primary" title="注意事项">
+  <div>注意尽量确保被渲染的 Markdown 内 JSX 代码可信，防止 XSS。</div>
+</Notice>
+
+
+```jsx live=true
+import { Button, MarkdownRender, Typography } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo() {
+    const components = { ...SemiMarkdownComponents };
+
+    components['MyButton'] = ({ children,onClick }) => {
+        return <Button type={"primary"} onClick={onClick} style={{marginBottom:"12px"}}> {children} </Button>
+    }
+
+    return <MarkdownRender 
+        mdxRaw={`
+#### 下面是一个渲染在 Markdown 中的按钮
+<MyButton onClick={()=>alert("点击了 MyButton")}>MyButton 点我</MyButton>
+
+直接在 Markdown 中书写 JSX 即可
+        `} 
+        components={components} />
+}
+
+
+```
+
+
+### MarkdownRender
+
+| 属性         | 说明                         | 类型                                    | 默认值 |
+|------------|----------------------------|---------------------------------------| --- |
+| mdxRaw     | Markdown 或 MDX 的纯文本        | string                                | - |
+| components | 用于覆盖 Markdown 元素，也可添加自定义组件 | Record<string, JSXElementConstructor> | - |
+
+## 设计变量
+
+<DesignToken/>
+

content/show/chart/index-en-US.md

@@ -1,43 +1,37 @@
 ---
 localeCode: en-US
 order: 68
-category: Other
-title: VChart
+category: Show
+title: Data Visualization
 icon: doc-vchart
 dir: column
 brief: Out-of-the-box multi-terminal charting library.
 ---
 
-For charting scenarios, we recommend using [VChart](https://visactor.io/vchart). VChart is the core chart component library of [VisActor](https://visactor.io), an open-source visualization solution by ByteDance. It supports various types of charts, is easy to use, and offers powerful functionality. Utilizing the VChart charting library in a project based on Semi framework provides the following advantages:
+[VisActor](https://visactor.io) is an open-source visualization solution by ByteDance, and we recommend using its core chart component library called [VChart](https://visactor.io/vchart) for data visualization scenarios. It supports various types of charts, making it simple to use while offering powerful functionality.
 
-- Out-of-the-box experience: with simple configuration, VChart seamlessly integrates with the Semi design language, automatically adapting to the default Semi theme or a custom theme.
-- Responsive: VChart supports monitoring changes between light and dark modes on the page, and automatically applies hot updates to VChart charts on the page.
+Based on VChart, we have developed a customized chart library that adheres to the Semi style. The advantages are as follows:
 
-## Introducing VChart
+- 🧩 Out-of-the-box experience: It provides easy configuration and initialization, allowing you to start using it quickly.
+- 🎨 Consistent style: VChart has been customized to match the Semi design style. It is directly integrated with Semi Design Tokens. The default styles have undergone extensive verification, ensuring high readability and precision. Additionally, it supports user-defined chart styles.
+- 🌗 Responsive: VChart detects changes in the light and dark mode of the page and automatically updates the VChart charts on the page. It also synchronizes with the theme changes.
 
-VChart is not just a ready-to-use multi-platform charting library, but also a vivid and flexible storyteller of data.
 
-VChart is built on top of the visualization grammar library [VGrammar](https://visactor.io/vgrammar) and the rendering engine [VRender](https://visactor.io/vrender). Along with data presentation, VChart also supports animated storytelling, rich interactivity, and customizable chart styles. Its easy-to-use configuration greatly reduces the learning curve for users.
+## Installation and Usage
 
-VChart supports various different chart types, allowing users to visualize abstract data through simple configuration, including <strong>combination chart, line chart, area chart, bar/column chart, pie/doughnut chart, scatter plot, heat map, histogram, box plot, waterfall chart, progress bar, funnel chart, time series chart, interval column chart, interval area chart, word cloud, dashboard, treemap, Sankey diagram, rose chart, radar chart, map, Circle Packing, sunburst diagram</strong>, etc. For detailed chart examples, please refer to [VChart Examples](https://visactor.io/vchart/example). Below are some showcases of VChart with Semi Design's default theme:
+### 1、Installation
 
-```chart
-```
-
-## Installing and Using VChart
-
-### 1.Installation
-
-In a React project, you can use the following command to install `@visactor/react-vchart`:
+To install `@visactor/react-vchart` in a React project, you can use the following command:
 
 ```bash
 # npm
 npm i @visactor/react-vchart
+
 # yarn
 yarn add @visactor/react-vchart
 ```
 
-Additionally, you need to install `@visactor/vchart-semi-theme` to enable compatibility with the default Semi theme or user-configured themes
+Additionally, you need to install `@visactor/vchart-semi-theme` to adapt to the default theme of Semi or custom themes published through Semi DSM.
 
 ```bash
 # npm
@@ -47,9 +41,9 @@ npm i @visactor/vchart-semi-theme
 yarn add @visactor/vchart-semi-theme
 ```
 
-### 2.Usage
+### 2、Usage
 
-To adapt VChart to the Semi theme/user-defined themes, you only need to execute the `initVChartSemiTheme` method once globally for initialization. This statement is typically placed in the entry file of your React project. Here's an example:
+Starting from version v2.47.0, Semi introduced relevant Design Tokens to facilitate the adaptation of VChart to Semi themes or custom themes published through Semi DSM. Therefore, for version v2.47.0 and above, you only need to execute the `initVChartSemiTheme` method once globally for initialization. This statement is typically placed in the entry file of your React project. For example:
 
 ```javascript
 //index.jsx
@@ -66,102 +60,1018 @@ const root = createRoot(dom);
 root.render(<App />);
 ```
 
-The `initVChartSemiTheme` method supports accepting an object as an option, which is declared as follows:
+The `initVChartSemiTheme` method supports accepting an object as an option, with the following type declaration:
 
 ```typescript
 interface IInitVChartSemiThemeOption {
-  /** initial theme mode */
+  /** default mode */
   defaultMode?: 'light' | 'dark';
 }
 ```
 
-You don't need to perform any additional steps apart from the initialization statement. You can directly use the VChart chart components. Here's an example of using a pie chart:
+For versions of Semi below v2.47.0, although there are no corresponding Design Tokens, you can still utilize the default values of the built-in theme styles provided by `@visactor/vchart-semi-theme`. <strong>Please note that this usage does not support automatic switching between light and dark modes</strong>. Users can manually set the current chart mode as needed. Here's an example:
 
-```javascript
-// app.jsx
+```js
+import semiDesignLight from '@visactor/vchart-semi-theme/public/semiDesignLight.json';
+import semiDesignDark from '@visactor/vchart-semi-theme/public/semiDesignDark.json';
+import VChart from '@visactor/vchart';
+// register the theme
+VChart.ThemeManager.registerTheme('semiDesignLight', semiDesignLight);
+VChart.ThemeManager.registerTheme('semiDesignDark', semiDesignDark);
+// apply the light theme
+VChart.ThemeManager.setCurrentTheme('semiDesignLight');
+// apply the dark theme
+VChart.ThemeManager.setCurrentTheme('semiDesignDark');
+```
+
+>For more information about the theme package, please refer to [@visactor/vchart-semi-theme](https://www.npmjs.com/package/@visactor/vchart-semi-theme) <br />
+For drawing charts and more detailed instructions, please refer to [VChart tutorial](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react)
+
+
+## Common Chart Types Examples
+
+VChart is built on the visual grammar library VGrammar and the rendering engine VRender. It provides not only data presentation capabilities but also supports animated storytelling, rich interactivity, and customizable chart styles. The user-friendly configuration greatly reduces the learning curve.
+
+VChart supports various different chart types, allowing users to visualize abstract data through simple configuration, including <strong>combination chart, line chart, area chart, bar/column chart, pie/doughnut chart, scatter plot, heat map, histogram, box plot, waterfall chart, progress bar, funnel chart, time series chart, interval column chart, interval area chart, word cloud, dashboard, treemap, Sankey diagram, rose chart, radar chart, map, circle packing, sunburst diagram</strong>, etc. For detailed chart examples, please refer to [VChart Examples](https://visactor.io/vchart/example). Below are some showcases of VChart with Semi Design's default theme.
+
+### Bar chart
+
+<h4>Basic bar chart</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
+
+initVChartSemiTheme();
+
+const commonSpec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { type:'Date', month: 'Monday', sales: 22 },
+        { type:'Date', month: 'Tuesday', sales: 13 },
+        { type:'Date', month: 'Wednesday', sales: 25 },
+        { type:'Date', month: 'Thursday', sales: 29 },
+        { type:'Date', month: 'Friday', sales: 38 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Bar chart',
+    subtext: 'This is a bar chart',
+  },
+  legends: {
+    visible: true,
+  },
+  xField: 'month',
+  yField: 'sales',
+  seriesField: 'type',
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? 'month' : 'sales',
+      yField: isVertical ? 'sales' : 'month',
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+          key={direction}
+          spec={spec}
+          option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>Grouped bar chart</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { type: 'Autocracies', year: '1930', value: 129 },
+        { type: 'Autocracies', year: '1940', value: 133 },
+        { type: 'Autocracies', year: '1950', value: 130 },
+        { type: 'Autocracies', year: '1960', value: 126 },
+        { type: 'Autocracies', year: '1970', value: 117 },
+        { type: 'Autocracies', year: '1980', value: 114 },
+        { type: 'Autocracies', year: '1990', value: 111 },
+        { type: 'Autocracies', year: '2000', value: 89 },
+        { type: 'Autocracies', year: '2010', value: 80 },
+        { type: 'Autocracies', year: '2018', value: 80 },
+        { type: 'Democracies', year: '1930', value: 22 },
+        { type: 'Democracies', year: '1940', value: 13 },
+        { type: 'Democracies', year: '1950', value: 25 },
+        { type: 'Democracies', year: '1960', value: 29 },
+        { type: 'Democracies', year: '1970', value: 38 },
+        { type: 'Democracies', year: '1980', value: 41 },
+        { type: 'Democracies', year: '1990', value: 57 },
+        { type: 'Democracies', year: '2000', value: 87 },
+        { type: 'Democracies', year: '2010', value: 98 },
+        { type: 'Democracies', year: '2018', value: 99 }
+      ]
+    }
+  ],
+  seriesField: 'type',
+  title: {
+    visible: true,
+    text: 'Grouped bar chart',
+    subtext: 'This is a grouped bar chart',
+  },
+  legends: {
+    visible: true,
+  }
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? ['year', 'type'] : 'value',
+      yField: isVertical ? 'value' : ['year', 'type'],
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>Stacked bar chart</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  stack: true,
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { State: 'WY', Age: 'Under 5 Years', Population: 25635 },
+        { State: 'WY', Age: '5 to 13 Years', Population: 1890 },
+        { State: 'WY', Age: '14 to 17 Years', Population: 9314 },
+        { State: 'DC', Age: 'Under 5 Years', Population: 30352 },
+        { State: 'DC', Age: '5 to 13 Years', Population: 20439 },
+        { State: 'DC', Age: '14 to 17 Years', Population: 10225 },
+        { State: 'VT', Age: 'Under 5 Years', Population: 38253 },
+        { State: 'VT', Age: '5 to 13 Years', Population: 42538 },
+        { State: 'VT', Age: '14 to 17 Years', Population: 15757 },
+        { State: 'ND', Age: 'Under 5 Years', Population: 51896 },
+        { State: 'ND', Age: '5 to 13 Years', Population: 67358 },
+        { State: 'ND', Age: '14 to 17 Years', Population: 18794 },
+        { State: 'AK', Age: 'Under 5 Years', Population: 72083 },
+        { State: 'AK', Age: '5 to 13 Years', Population: 85640},
+        { State: 'AK', Age: '14 to 17 Years', Population: 22153 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Stacked bar chart',
+    subtext: 'This is a stacked bar chart',
+  },
+  seriesField: 'Age',
+  legends: {
+    visible: true
+  },
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? 'State' : 'Population',
+      yField: isVertical ? 'Population' : 'State',
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>Percentage stacked bar chart</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  percent: true,
+  stack: true,
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { State: 'WY', Age: 'Under 5 Years', Population: 25635 },
+        { State: 'WY', Age: '5 to 13 Years', Population: 1890 },
+        { State: 'WY', Age: '14 to 17 Years', Population: 9314 },
+        { State: 'DC', Age: 'Under 5 Years', Population: 30352 },
+        { State: 'DC', Age: '5 to 13 Years', Population: 20439 },
+        { State: 'DC', Age: '14 to 17 Years', Population: 10225 },
+        { State: 'VT', Age: 'Under 5 Years', Population: 38253 },
+        { State: 'VT', Age: '5 to 13 Years', Population: 42538 },
+        { State: 'VT', Age: '14 to 17 Years', Population: 15757 },
+        { State: 'ND', Age: 'Under 5 Years', Population: 51896 },
+        { State: 'ND', Age: '5 to 13 Years', Population: 67358 },
+        { State: 'ND', Age: '14 to 17 Years', Population: 18794 },
+        { State: 'AK', Age: 'Under 5 Years', Population: 72083 },
+        { State: 'AK', Age: '5 to 13 Years', Population: 85640},
+        { State: 'AK', Age: '14 to 17 Years', Population: 22153 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Percentage stacked bar chart',
+    subtext: 'This is a percentage stacked bar chart',
+  },
+  seriesField: 'Age',
+  legends: { visible: true },
+  axes: [
+    {
+      orient: 'left',
+      label: {
+        formatMethod: val => {
+          return `${(val * 100).toFixed(2)}%`;
+        }
+      }
+    }
+  ],
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+     const spec = {
+      ...commonSpec,
+      xField: isVertical ? 'State' : 'Population',
+      yField: isVertical ? 'Population' : 'State',
+      direction: direction,
+    };
+    spec.axes[0].orient = isVertical ? 'left': 'top';
+    return spec;
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+### Line chart
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'line',
+  xField: 'year',
+  yField: 'count',
+  seriesField: 'medalType',
+  legends: { visible: true }
+};
+
+const data = [[40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
+  [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
+  [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29]].map((arr, outer) => {
+  const type = ['Gold', 'Silver', 'Bronze'][outer];
+  return arr.map((item, inner) => ({
+    year: `${inner * 4 + 1952}`,
+    count: item,
+    medalType: type,
+  }));
+});
+
+function App() {
+  const [type, setType] = useState('multiple');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  const spec = useMemo(() => {
+    return {
+      ...commonSpec,
+      title: {
+        visible: true,
+        text: `${type === "multiple" ? "Multi-series" : "Basic"} line chart`,
+        subtext: `This is a ${type === "multiple" ? "multi-series" : "basic"} line chart`,
+      },
+      data: { values: type === 'multiple' ? data[0].concat(data[1]).concat(data[2]) : data[0] }
+    };
+  }, [type])
+
+  return (
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'multiple'}>multiple</Radio>
+        <Radio value={'single'}>single</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={type}
+            spec={spec}
+            option={{ mode: "desktop-browser"}}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+### Area chart
+
+```jsx live=true dir="row" noInline=true half=true
 import React from "react";
 import { VChart } from "@visactor/react-vchart";
 
-const chart = {
-  spec: {
-    type: 'pie',
-    data: [
-      {
-        id: 'id0',
-        values: [
-          { type: 'oxygen', value: '46.60' },
-          { type: 'silicon', value: '27.72' },
-          { type: 'aluminum', value: '8.13' },
-          { type: 'iron', value: '5' },
-          { type: 'calcium', value: '3.63' },
-          { type: 'sodium', value: '2.83' },
-          { type: 'potassium', value: '2.59' },
-          { type: 'others', value: '3.5' }
-        ]
+const commonSpec = {
+  type: 'area',
+  stack: true,
+  title: {
+    visible: true,
+    text: 'Stacked area chart',
+    subtext: 'This is a stacked area chart',
+  },
+  xField: 'type',
+  yField: 'value',
+  seriesField: 'country',
+  legends: { visible: true },
+  tooltip: {
+    dimension: {
+      updateContent: data => {
+        let sum = 0;
+        data.forEach(datum => {
+          sum += +datum.value;
+        });
+        data.push({
+          hasShape: 'false',
+          key: 'Total',
+          value: sum
+        });
+        return data;
       }
-    ],
-    valueField: 'value',
-    categoryField: 'type',
+    }
+  }
+};
+
+const values = [[4229, 4376, 3054, 12814], [3932, 3987, 5067, 13012], 
+ [5221, 3574, 7004, 11624], [9256, 4376, 9054, 8814],[3308, 4572, 12043, 12998], 
+ [5432, 3417, 15067, 12321],[13701, 5231, 10119, 10342],[4008, 4572, 12043, 22998], 
+ [18712, 6134, 10419, 11261]].reduce((acc, arr, index) => {
+  const type = ['Nail polish', 'Eyebrow pencil', 'Rouge', 'Lipstick', 'Eyeshadows', 
+ 'Eyeliner', 'Foundation', 'Lip gloss', 'Mascara'][index];
+  const result = ['Africa', 'EU', 'China', 'USA'].map((item, innerIndex) => ({
+      country: item,
+      type: type,
+      value: arr[innerIndex],
+    }));
+    return acc.concat(result);
+ }, []);
+
+const data = {
+  fields: {
+    country: {
+      domain: ['Africa', 'EU', 'China', 'USA'].reverse(),
+      lockStatisticsByDomain: true
+    }
+  },
+  values: values,
+}
+
+function App() {
+  return (
+    <div style={{ height: 460 }}>
+      <VChart
+          spec={{ ...commonSpec,  data: data }}
+          option={{ mode: "desktop-browser"}}
+      />
+    </div>
+  )
+}
+
+render(App);
+```
+
+### Pie Chart
+
+```jsx live=true dir="column" noInline=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'pie',
+  data: [
+    {
+      id: 'id0',
+      values: [{ type: 'oxygen', value: '46.60' }, { type: 'silicon', value: '27.72' },
+        { type: 'aluminum', value: '8.13' }, { type: 'iron', value: '5' },
+        { type: 'calcium', value: '3.63' }, { type: 'sodium', value: '2.83' },
+        { type: 'potassium', value: '2.59' }, { type: 'others', value: '3.5' }]
+    }
+  ],
+  valueField: 'value',
+  categoryField: 'type',
+  label: {
+    visible: true
+  },
+  tooltip: {
+    mark: {
+      content: [
+        {
+          key: datum => datum['type'],
+          value: datum => datum['value'] + '%'
+        }
+      ]
+    }
+  }
+};
+
+const donutChart = {
+  title: {
+    visible: true,
+    text: 'Pie chart',
+    subtext: 'This is a pie chart',
+  },
+  legends: {
+    visible: true,
+    orient: 'right'
+  },
+}
+
+const donutWithIndicator = {
+  title: {
+    visible: true,
+    text: 'Donut chart with indicator',
+    subtext: 'This is a donut chart with indicator',
+  },
+  legends: {
+    visible: true,
+    orient: 'right'
+  },
+  indicator: {
+    visible: true,
+    trigger: 'select',
     title: {
       visible: true,
-      text: 'Statistics of Surface Element Content'
+      style: {
+        fontSize: 12,
+        fontWeight: 'normal',
+        text: data => {
+          if (data) {
+            const value = data['type'];
+            return value ? value : null;
+          }
+          return 'Sum';
+        }
+      }
     },
-    legends: {
-      visible: true,
-      orient: 'left',
-      title: {
+    content: [
+      {
         visible: true,
-        text: 'Elements'
+        fontWeight: 'bold',
+        style: {
+          fontSize: 20,
+          text: data => {
+            if (data) {
+              const value = data['value'];
+              return value ? `${value}%` : null;
+            }
+            return 1234;
+          }
+        }
       }
+    ]
+  }
+}
+
+function App() {
+  const [type, setType] = useState('donut');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  return (
+     <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'donut'}>饼图</Radio>
+        <Radio value={'donutWithIndicator'}>带指标卡饼图</Radio>
+      </RadioGroup>
+      <div style={{ display: 'flex', alignItem: 'center', justifyContent: 'center'}}>
+        <VChart
+            spec={{
+                ...commonSpec,
+                ...(type === 'donut' ? donutChart : donutWithIndicator),
+            }}
+            option={{ mode: "desktop-browser" }}
+            style={{ height: 440, width:680 }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<!-- ### Funnel chart
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const basicSpec = {
+  type: 'funnel',
+  categoryField: 'name',
+  valueField: 'value',
+  data: [
+    {
+      id: 'funnel',
+      values: [
+        { value: 100, name: 'Step1' },
+        { value: 80, name: 'Step2' },
+        { value: 60, name: 'Step3' },
+        { value: 40, name: 'Step4'},
+        { value: 20, name: 'Step5' }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Basic funnel chart',
+    subtext: 'This is a basic funnel chart',
+  },
+  label: { visible: true },
+  legends: { visible: true }
+};
+
+const RectangularSpec = {
+  type: 'funnel',
+  maxSize: '75%',
+  minSize: '10%',
+  isTransform: true,
+  shape: 'rect',
+  funnel: {
+    style: { cornerRadius: 4, stroke: 'white', lineWidth: 2 },
+    state: {
+      hover: { stroke: '#4e83fd', lineWidth: 1 }
+    }
+  },
+  transform: {
+    style: { stroke: 'white', lineWidth: 2 },
+    state: {
+      hover: { stroke: '#4e83fd', lineWidth: 1 }
+    }
+  },
+  label: {
+    visible: true,
+    style: {
+      lineHeight: 16,
+      limit: Infinity,
+      text: datum => [`${datum.name}`, `${datum.value}`]
+    }
+  },
+  outerLabel: {
+    visible: true,
+    position: 'right',
+    alignLabel: false,
+    style: {
+      text: datum => `${datum.percent * 100}%`
     },
-    label: {
-      visible: true
+    line: { style: { lineDash: [2, 2] } }
+  },
+  transformLabel: {
+    visible: true,
+    style: { fill: 'black' }
+  },
+  data: [
+    {
+      name: 'funnel',
+      values: [
+        { value: 100, name: 'Resume Screening',  percent: 1},
+        { value: 80, name: 'Resume Evaluation', percent: 0.8 },
+        { value: 50, name: 'Evaluation Passed', percent: 0.5 },
+        { value: 30, name: 'Interview', percent: 0.3 },
+        { value: 10, name: 'Final Pass', percent: 0.1 }
+      ]
     }
+  ],
+  categoryField: 'name',
+  valueField: 'value',
+  title: {
+    visible: true,
+    text: 'Rectangular conversion funnel chart',
+    subtext: 'This is a rectangular conversion funnel chart',
+  },
+  legends: {
+    visible: true,
   }
+};
+
+function App() {
+  const [type, setType] = useState('rectangular');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  return (
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'basic'}>Basic funnel chart</Radio>
+        <Radio value={'rectangular'}>Rectangular conversion funnel chart</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            spec={type === 'basic' ? basicSpec : RectangularSpec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+``` -->
+
+### Radar chart
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const basicSpec = {
+  type: 'radar',
+  data: [
+    {
+      id: 'radarData',
+      values: [
+        { key: 'Strength', value: 5 },
+        { key: 'Speed', value: 5 },
+        { key: 'Shooting', value: 3 },
+        { key: 'Endurance', value: 5 },
+        { key: 'Precision', value: 5 },
+        { key: 'Growth', value: 5 }
+      ]
+    }
+  ],
+  categoryField: 'key',
+  valueField: 'value',
+  point: { visible: true },
+  area: { visible: true },
+  axes: [
+    {
+      orient: 'radius', // radius axis
+      zIndex: 100,
+      min: 0,
+      max: 8,
+      domainLine: { visible: false },
+      label: {
+        visible: true,
+        space: 0,
+        style: { textAlign: 'center', stroke: '#fff', lineWidth: 4 }
+      },
+      grid: { smooth: false },
+    },
+    {
+      orient: 'angle', // angle axis
+      zIndex: 50,
+      tick: { visible: false },
+      domainLine: { visible: false },
+      label: { space: 20 },
+    }
+  ]
+};
+
+const groupSpec = {
+  type: 'radar',
+  data: [{
+    values: [[45, 61, 92, 57, 46, 36, 33, 63, 57, 53, 69, 40], 
+            [31, 39, 81, 39, 64, 21, 58, 72, 47, 37, 80, 74],
+            [90, 95, 62, 52, 74, 87, 80, 69, 74, 84, 94, 23]]
+            .reduce((acc, cur, index) => {
+              const type = ['A', 'B', 'C'];
+              const month = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 
+              'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.']
+              const result = cur.map((item, innerIndex) => ({
+                month: month[innerIndex],
+                value: item,
+                type: type[index]
+              }))
+              return acc.concat(result);
+            }, []),
+  }],
+  categoryField: 'month',
+  valueField: 'value',
+  seriesField: 'type',
+  stack: true,
+  area: { visible: true },
+  legends: { visible: true, orient: 'right'}
 }
 
-const App = () => {
+function App() {
+  const [type, setType] = useState('group');
+  const onChange = useCallback((e) => setType(e.target.value), []);
   return (
-    <VChart
-        spec={{
-            height: 400,
-            ...chart.spec,
-        }}
-        option={{
-            mode: "desktop-browser",
-        }}
-    />
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'basic'}>Basic radar chart</Radio>
+        <Radio value={'group'}>Grouped radar chart</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            spec={type === 'basic' ? basicSpec : groupSpec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
   )
 }
+
+render(App);
 ```
 
-## Configuring VChart Theme
+### Scatter chart
+
+```jsx live=true dir="row" noInline=true half=true
+import React from "react";
+import { VChart } from "@visactor/react-vchart";
+
+const data = [
+  { continent: 'Americas', Country: 'Argentina', LifeExpectancy: 75.32, GDP: 12779.37964, Population: 40301927 },
+  { continent: 'Americas', Country: 'Brazil', LifeExpectancy: 72.39, GDP: 9065.800825, Population: 190010647 },
+  { continent: 'Americas', Country: 'Canada', LifeExpectancy: 80.653, GDP: 36319.23501, Population: 33390141 },
+  { continent: 'Americas', Country: 'Chile', LifeExpectancy: 78.553, GDP: 13171.63885, Population: 16284741 },
+  { continent: 'Americas', Country: 'Colombia', LifeExpectancy: 72.889, GDP: 7006.580419, Population: 44227550 },
+  { continent: 'Americas', Country: 'Costa Rica', LifeExpectancy: 78.782, GDP: 9645.06142, Population: 4133884 },
+  { continent: 'Americas', Country: 'Cuba', LifeExpectancy: 78.273, GDP: 8948.102923, Population: 11416987 },
+  { continent: 'Americas', Country: 'Dominican Republic', LifeExpectancy: 72.235, GDP: 6025.374752, Population: 9319622 },
+  { continent: 'Americas', Country: 'Ecuador', LifeExpectancy: 74.994, GDP: 6873.262326, Population: 13755680 },
+  { continent: 'Americas', Country: 'El Salvador', LifeExpectancy: 71.878, GDP: 5728.353514, Population: 6939688 },
+  { continent: 'Americas', Country: 'Guatemala', LifeExpectancy: 70.259, GDP: 5186.050003, Population: 12572928 },
+  { continent: 'Americas', Country: 'Honduras', LifeExpectancy: 70.198, GDP: 3548.330846, Population: 7483763 },
+  { continent: 'Americas', Country: 'Jamaica', LifeExpectancy: 72.567, GDP: 7320.880262, Population: 2780132 },
+  { continent: 'Americas', Country: 'Mexico', LifeExpectancy: 76.195, GDP: 11977.57496, Population: 108700891 },
+  { continent: 'Americas', Country: 'Nicaragua', LifeExpectancy: 72.899, GDP: 2749.320965, Population: 5675356 },
+  { continent: 'Americas', Country: 'Panama', LifeExpectancy: 75.537, GDP: 9809.185636, Population: 3242173 },
+  { continent: 'Americas', Country: 'Paraguay', LifeExpectancy: 71.752, GDP: 4172.838464, Population: 6667147 },
+  { continent: 'Americas', Country: 'Peru', LifeExpectancy: 71.421, GDP: 7408.905561, Population: 28674757 },
+  { continent: 'Americas', Country: 'Puerto Rico', LifeExpectancy: 78.746, GDP: 19328.70901, Population: 3942491 },
+  { continent: 'Americas', Country: 'Trinidad and Tobago', LifeExpectancy: 69.819, GDP: 18008.50924, Population: 1056608 },
+  { continent: 'Americas', Country: 'United States', LifeExpectancy: 78.242, GDP: 42951.65309, Population: 301139947 },
+  { continent: 'Americas', Country: 'Uruguay', LifeExpectancy: 76.384, GDP: 10611.46299, Population: 3447496 },
+  { continent: 'Americas', Country: 'Venezuela', LifeExpectancy: 73.747, GDP: 11415.80569, Population: 26084662 },
+  { continent: 'Asia', Country: 'China', LifeExpectancy: 72.961, GDP: 4959.114854, Population: 1318683096 },
+  { continent: 'Asia', Country: 'Hong Kong, China', LifeExpectancy: 82.208, GDP: 39724.97867, Population: 6980412 },
+  { continent: 'Asia', Country: 'Japan', LifeExpectancy: 82.603, GDP: 31656.06806, Population: 127467972 },
+  { continent: 'Asia', Country: 'Korea, Dem. Rep.', LifeExpectancy: 67.297, GDP: 1593.06548, Population: 23301725 },
+  { continent: 'Asia', Country: 'Korea, Rep.', LifeExpectancy: 78.623, GDP: 23348.13973, Population: 49044790 },
+  { continent: 'Europe', Country: 'Albania', LifeExpectancy: 76.423, GDP: 5937.029526, Population: 3600523 },
+  { continent: 'Europe', Country: 'Austria', LifeExpectancy: 79.829, GDP: 36126.4927, Population: 8199783 },
+  { continent: 'Europe', Country: 'Belgium', LifeExpectancy: 79.441, GDP: 33692.60508, Population: 10392226 },
+  { continent: 'Europe', Country: 'Bosnia and Herzegovina', LifeExpectancy: 74.852, GDP: 7446.298803, Population: 4552198 },
+  { continent: 'Europe', Country: 'Bulgaria', LifeExpectancy: 73.005, GDP: 10680.79282, Population: 7322858 },
+  { continent: 'Europe', Country: 'Croatia', LifeExpectancy: 75.748, GDP: 14619.22272, Population: 4493312 },
+  { continent: 'Europe', Country: 'Czech Republic', LifeExpectancy: 76.486, GDP: 22833.30851, Population: 10228744 },
+  { continent: 'Europe', Country: 'Denmark', LifeExpectancy: 78.332, GDP: 35278.41874, Population: 5468120 },
+  { continent: 'Europe', Country: 'Finland', LifeExpectancy: 79.313, GDP: 33207.0844, Population: 5238460 },
+  { continent: 'Europe', Country: 'France', LifeExpectancy: 80.657, GDP: 30470.0167, Population: 61083916 },
+  { continent: 'Europe', Country: 'Germany', LifeExpectancy: 79.406, GDP: 32170.37442, Population: 82400996 },
+  { continent: 'Europe', Country: 'Greece', LifeExpectancy: 79.483, GDP: 27538.41188, Population: 10706290 },
+  { continent: 'Europe', Country: 'Hungary', LifeExpectancy: 73.338, GDP: 18008.94444, Population: 9956108 },
+  { continent: 'Europe', Country: 'Iceland', LifeExpectancy: 81.757, GDP: 36180.78919, Population: 301931 },
+  { continent: 'Europe', Country: 'Ireland', LifeExpectancy: 78.885, GDP: 40675.99635, Population: 4109086 },
+  { continent: 'Europe', Country: 'Italy', LifeExpectancy: 80.546, GDP: 28569.7197, Population: 58147733 },
+  { continent: 'Europe', Country: 'Montenegro', LifeExpectancy: 74.543, GDP: 9253.896111, Population: 684736 },
+  { continent: 'Europe', Country: 'Netherlands', LifeExpectancy: 79.762, GDP: 36797.93332, Population: 16570613 },
+  { continent: 'Europe', Country: 'Norway', LifeExpectancy: 80.196, GDP: 49357.19017, Population: 4627926 },
+  { continent: 'Europe', Country: 'Poland', LifeExpectancy: 75.563, GDP: 15389.92468, Population: 38518241 },
+  { continent: 'Europe', Country: 'Portugal', LifeExpectancy: 78.098, GDP: 20509.64777, Population: 10642836 },
+  { continent: 'Europe', Country: 'Romania', LifeExpectancy: 72.476, GDP: 10808.47561, Population: 22276056 },
+  { continent: 'Europe', Country: 'Serbia', LifeExpectancy: 74.002, GDP: 9786.534714, Population: 10150265 },
+  { continent: 'Europe', Country: 'Slovak Republic', LifeExpectancy: 74.663, GDP: 18678.31435, Population: 5447502 },
+  { continent: 'Europe', Country: 'Slovenia', LifeExpectancy: 77.926, GDP: 25768.25759, Population: 2009245 },
+  { continent: 'Europe', Country: 'Spain', LifeExpectancy: 80.941, GDP: 28821.0637, Population: 40448191 },
+  { continent: 'Europe', Country: 'Sweden', LifeExpectancy: 80.884, GDP: 33859.74835, Population: 9031088 },
+  { continent: 'Europe', Country: 'Switzerland', LifeExpectancy: 81.701, GDP: 37506.41907, Population: 7554661 },
+  { continent: 'Europe', Country: 'Turkey', LifeExpectancy: 71.777, GDP: 8458.276384, Population: 71158647 },
+  { continent: 'Europe', Country: 'United Kingdom', LifeExpectancy: 79.425, GDP: 33203.26128, Population: 60776238 },
+  { continent: 'Oceania', Country: 'Australia', LifeExpectancy: 81.235, GDP: 34435.36744, Population: 20434176 },
+  { continent: 'Oceania', Country: 'New Zealand', LifeExpectancy: 80.204, GDP: 25185.00911, Population: 4115771 }
+];
+
+function logScale(value, domain, range) {
+  // Calculate the logarithm of the domain and range
+  const logDomain = domain.map(x => (x !== 0 ? Math.log10(x) : 0));
+  const logRange = range.map(x => Math.log10(x));
+  // Calculate the position of the value in the domain, map it to the range
+  const t = (Math.log10(value) - logDomain[0]) / (logDomain[1] - logDomain[0]);
+  const newValue = (logRange[1] - logRange[0]) * t + logRange[0];
+  // Return the mapped value and restore the logarithmic scaling
+  return Math.pow(10, newValue);
+}
+
+// chart spec
+const spec = {
+  type: 'common',
+  series: [
+    {
+      type: 'scatter',
+      xField: 'GDP',
+      yField: 'LifeExpectancy',
+      seriesField: 'continent',
+      sizeField: 'Population',
+      size: d => logScale(d.Population, [0, Math.max(...data.map(d => d.Population))], [1, 20])
+    }
+  ],
+  crosshair: {
+    yField: {
+      visible: true,
+      line: { visible: true, type: 'line' },
+      label: { visible: true }
+    },
+    xField: {
+      visible: true,
+      line: { visible: true, type: 'line' },
+      label: { visible: true }
+    }
+  },
+  data: [{ id: 'data', values: data }],
+  title: {
+    visible: true,
+    text: 'Basic scatter chart',
+    subtext: 'This is a basic scatter chart',
+  },
+  axes: [
+    {
+      orient: 'left',
+      type: 'linear',
+      range: {
+        min: Math.min(...data.map(d => d.LifeExpectancy)),
+        max: Math.max(...data.map(d => d.LifeExpectancy))
+      },
+      domainLine: { visible: true }
+    },
+    {
+      orient: 'bottom',
+      type: 'linear',
+      domainLine: { visible: true }
+    }
+  ],
+  legends: [{ visible: true,}]
+};
+
+function App() {
+  return (
+    <div style={{ height: 460 }}>
+      <VChart
+        spec={spec}
+        option={{ mode: "desktop-browser" }}
+      />
+    </div>
+  )
+}
+
+render(App);
+```
+
+## Design Guidelines
+
+### Usage Guide
+
+In order to assist designers in selecting charts, we have conducted in-depth analyses of 11 commonly used chart types and summarized chart selection guidelines. Please refer to the [Chart Selection Guidelines](https://bytedance.sg.larkoffice.com/docx/N10zdVn7AovY2kxFj8ulPiFYgUh). for more details.
+
+### Color Specifications
+
+`@visactor/vchart-semi-theme` defines color values for 20 discrete data palettes. The color values are sorted based on the principles of split complementary color schemes and alternating dark and light tones from the existing Semi color palette. For discrete data palettes, Semi Design has declared 20 tokens. If users need to customize the discrete data palettes, they can configure these tokens in the [DSM](https://semi.design/dsm)  when customizing the theme. The specific steps for generating color values are as follows:
+
+<h4>Step1: Follow the split complementary color, generate the first version of the color palette</h4>
+
+We refer to the classic color scheme theory and adopt the principle of <strong>split complementary</strong> color picking, and color picking is carried out in a group of three.
+
+![分裂取色](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/slitColor.png)
+
+<h4>Step2: Base line correction, reduce ambiguity and improve contrast</h4>
+
+1. Avoid ambiguous colors such as red and green.
+2. To ensure discrimination and enhance color contrast, adjacent colors are adjusted to canary release according to the rhythm of "<strong>dark-light-dark-light</strong>".
+
+![基线矫正](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/betterColor.png)
+
 
-VChart supports overall configuration and reuse of chart themes. For more details, please refer to [VChart Theme Concept and Design Guidelines](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Concept_and_Design_Rules). The most important aspect of theme configuration is the color palette. VChart supports two types of palettes: data palettes and semantic palettes. VChart retrieves tokens from the Semi theme/user-defined theme through `@visactor/vchart-semi-theme` and maps them to the data and semantic palettes of VChart themes, achieving compatibility with the Semi default theme/user-defined theme. If you want to configure VChart themes in a project based on Semi, you can use [DSM](https://semi.design/dsm/) to set the corresponding tokens for data palettes and semantic palettes.
+<h4>Step3: Sensible adjustment to enhance visual aesthetics</h4>
 
-### Data Palette
+In order to make the color system more harmonious, in addition to scientific theoretical support, aesthetic corrections need to be made in real business scenarios.
 
-The data palette is a discrete color palette used in charts to differentiate between data groups, often utilized for distinguishing legend items as well. In the following two charts, the data groups are assigned colors from the color queue in sequential order:
+![视觉美学](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/beautyColor.png)
 
-![demo](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/vchart-demo.png)
+<h4>Step4: Expand the color palette to adapt to a wide range of scenarios</h4>
 
-The data palette in VChart can also be dynamic and progressive. In general, the palette is adjusted dynamically based on the range of data items. When the number of data groups is less than or equal to 10, a 10-color palette is used. When the number of data groups exceeds 10, a 20-color palette is used. If the number of data groups exceeds 20, the colors from the palette will be repeated starting from the first color.
+Based on the 10-color palette, we have expanded to 20-color palettes to adapt to a wider range of business scenarios.
 
-![data palette](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/vchart-data-color-en.png)
+![Data Palettes](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/data-chart.png)
 
-Semi Design has defined 20 tokens corresponding to the data palette for VChart, as shown in the table below. Users can customize the data palette of VChart by configuring these tokens when customizing themes in DSM. These 20 tokens represent a palette of 20 colors, and the tokens with names like --semi-color-data-n(where n is 0, 2, 4, 6, 8, 10, 12, 14, 16, 18) represent a palette of 10 colors.
+In VChart, there are various semantic colors applied to chart components, such as background color, border, slider, overlay, font, and text color. The @visactor/vchart-semi-theme package reads the token values of Semi CSS Variables on the body to automatically generate VChart chart themes. <strong>Generally, there is no need to consider this part of the specification separately</strong>. If you need to understand the detailed mapping of semantic colors, you can refer to the following two documents:
 
-<DesignToken componentName='global' reg={/--semi-color-data/} hasTab={false}/>
+- [VChart Theme Concept and Design Guidelines](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Concept_and_Design_Rules)
+- [VChart Theme Extension](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Extension)
 
-#### Semantic Color Palette
+## Design Token
 
-The semantic Color palette primarily defines the common styles for chart components, such as background color, border, sliders, pop-ups, fonts, and text color. The `@visactor/vchart-semi-theme` package automatically crawls the token values of similar scenarios in the current Semi theme in the page environment to generate the VChart chart theme. <strong>Users who configure themes in the DSM usually do not need to consider additional configurations in this aspect</strong>.
+Semi Design has declared 20 tokens for VChart, as shown in the table below.
 
-For more information, please refer to the following two documents:
+<DesignToken componentName='global' reg={/--semi-color-data/} sameWidth={true}/>
 
-- [VChart Theme Concept and Design Rules](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Concept_and_Design_Rules)
-- [VChart Theme Extension Package](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Extension)
+<Notice title='Note'>
+Prior to version 1.10.2 of @visactor/vchart-semi-theme, the tokens with names --semi-color-data-n (where n is 0, 2, 4, 6, 8, 10, 12, 14, 16, 18) were used as a 10-color palette.
+Starting from version 1.10.2 of @visactor/vchart-semi-theme, the tokens with names --semi-color-data-n (where n ranges from 0 to 9) are used as a 10-color palette.
+</Notice>
 
-Contact VChart:
-```chartcontact 
-```
+For any questions, inquiries, or suggestions, you can join the VChart user group to provide feedback.
+<ChartContact
+  name1="WeChat Official Account"
+  name2="Lark user group"
+></ChartContact>

content/show/chart/index.md

@@ -1,30 +1,22 @@
 ---
 localeCode: zh-CN
 order: 68
-category: 其他
-title:  VChart 图表
+category: 展示类
+title:  Data Visualization 数据可视化
 icon: doc-vchart
 dir: column
 brief: 开箱即用的多端图表库。
 ---
 
-对于图表场景，我们推荐使用 [VChart](https://visactor.io/vchart)。VChart 是字节跳动开源可视化解决方案 [VisActor](https://visactor.io) 的核心图表组件库，支持多种图表，简单易用，功能强大。在基于 Semi 的项目中使用 VChart 图表库具有以下优势：
+对于数据可视化场景，我们推荐使用 [VChart](https://visactor.io/vchart)。VChart 是字节跳动开源可视化解决方案 [VisActor](https://visactor.io) 的核心图表组件库，支持多种图表，简单易用，功能强大。<br />
+基于 VChart，我们定制了一套符合 Semi 风格的图表库，优势如下：
 
-- 开箱即用：经过简单的配置，就可以使 VChart 样式自动融入 Semi 设计语言，自动适配 Semi 默认主题或用户自定义主题。
-- 响应式：支持监听页面上的亮暗模式变化，自动对页面上的 VChart 图表进行热更新。
+- 🧩 开箱即用：简单配置及初始化即可使用
+- 🎨 风格统一：基于 VChart 定制了符合 Semi 风格的图表库样式，直接和 Semi Design Token 挂钩；默认样式经过多方验证，可读性和精确性高；支持用户自定义图表样式
+- 🌗 响应式：支持监听页面上的亮暗模式变化，自动对页面上的 VChart 图表进行热更新，同步换肤
 
-## 什么是 VChart
 
-VChart 不只是开箱即用的多端图表库，更是生动灵活的数据故事讲述者。
-
-VChart 基于可视化语法库 [VGrammar](https://visactor.io/vgrammar) 和渲染引擎 [VRender](https://visactor.io/vrender) 进行封装，在满足数据呈现的同时，还支持面向叙事场景的动画编排、丰富的交互能力和定制化的图表风格，简单易用的配置大大降低了用户的学习成本。
-
-VChart 支持多种不同的图表类型，包括<strong>组合图、折线图、面积图、柱状图/条形图、饼/环图、散点图、色块图、直方图、箱形图、瀑布图、进度条、漏斗图、时序图、区间柱图、区间面积图、词云、仪表盘、矩形树图、桑基图、玫瑰图、雷达图、地图、Circle Packing、旭日图</strong>等，图表示例详情见 [VChart 图表示例](https://visactor.io/vchart/example)。以下是基于 Semi Design 默认主题的 VChart 部分图表能力展示：
-
-```chart zh
-```
-
-## 安装和使用 VChart
+## 安装和使用
 
 ### 1、安装
 
@@ -38,7 +30,7 @@ npm i @visactor/react-vchart
 yarn add @visactor/react-vchart
 ```
 
-此外，还需安装 `@visactor/vchart-semi-theme` 来适配 Semi 默认主题或用户自定义主题。
+此外，还需安装 `@visactor/vchart-semi-theme` 来适配 Semi 默认主题或通过 Semi DSM 发布的自定义主题。
 
 ```bash
 # npm
@@ -50,7 +42,7 @@ yarn add @visactor/vchart-semi-theme
 
 ### 2、使用
 
-实现 VChart 对 Semi 主题/用户自定义主题的适配，只需要在全局执行一次 `initVChartSemiTheme` 方法进行初始化。该语句通常可以放在 React 项目的入口文件中。如：
+Semi 自 v2.47.0 版本增加相关的 Design Token 用于实现 VChart 对 Semi 主题或通过 Semi DSM 发布的自定义主题的适配。因此对于 v2.47.0 及以上版本，只需要在全局执行一次 `initVChartSemiTheme` 方法进行初始化。该语句通常可以放在 React 项目的入口文件中。如：
 
 ```javascript
 //index.jsx
@@ -76,97 +68,1011 @@ interface IInitVChartSemiThemeOption {
 }
 ```
 
-除去初始化语句外，无需其他操作，直接使用 VChart 图表组件即可。以下是一个饼图的使用代码示例：
+对于 v2.47.0 以下版本的 Semi，虽然没有相应的 Design Token，但是可以借助 `@visactor/vchart-semi-theme` 中的内置主题包样式默认值。<strong>注意：此使用方式不支持明暗模式自动切换，用户可按需设置当前图表模式</strong>，代码示例如下：
 
-```javascript
-// app.jsx
+```js
+import semiDesignLight from '@visactor/vchart-semi-theme/public/semiDesignLight.json';
+import semiDesignDark from '@visactor/vchart-semi-theme/public/semiDesignDark.json';
+import VChart from '@visactor/vchart';
+// register the theme
+VChart.ThemeManager.registerTheme('semiDesignLight', semiDesignLight);
+VChart.ThemeManager.registerTheme('semiDesignDark', semiDesignDark);
+// apply the light theme
+VChart.ThemeManager.setCurrentTheme('semiDesignLight');
+// apply the dark theme
+VChart.ThemeManager.setCurrentTheme('semiDesignDark');
+```
+
+>主题包的更多信息见 [@visactor/vchart-semi-theme](https://www.npmjs.com/package/@visactor/vchart-semi-theme) <br />
+绘制图表以及更详细的指引详见 [VChart 教程文档](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react)。
+
+
+## 常用图表类型示例
+
+VChart 基于可视化语法库 [VGrammar](https://visactor.io/vgrammar) 和渲染引擎 [VRender](https://visactor.io/vrender) 进行封装，在满足数据呈现的同时，还支持面向叙事场景的动画编排、丰富的交互能力和定制化的图表风格，简单易用的配置大大降低了用户的学习成本。
+
+VChart 支持多种不同的图表类型，包括<strong>组合图、折线图、面积图、柱状图/条形图、饼/环图、散点图、色块图、直方图、箱形图、瀑布图、进度条、漏斗图、时序图、区间柱图、区间面积图、词云、仪表盘、矩形树图、桑基图、玫瑰图、雷达图、地图、Circle Packing、旭日图</strong>等，图表示例详情见 [VChart 图表示例](https://visactor.io/vchart/example)。以下是基于 Semi Design 默认主题的 VChart 常用图表使用示例：
+
+### 柱状图
+
+<h4>基础柱状图</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
+
+initVChartSemiTheme();
+
+const commonSpec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { type:'Date', month: 'Monday', sales: 22 },
+        { type:'Date', month: 'Tuesday', sales: 13 },
+        { type:'Date', month: 'Wednesday', sales: 25 },
+        { type:'Date', month: 'Thursday', sales: 29 },
+        { type:'Date', month: 'Friday', sales: 38 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Bar chart',
+    subtext: 'This is a bar chart',
+  },
+  legends: {
+    visible: true,
+  },
+  xField: 'month',
+  yField: 'sales',
+  seriesField: 'type',
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? 'month' : 'sales',
+      yField: isVertical ? 'sales' : 'month',
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+          key={direction}
+          spec={spec}
+          option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>分组柱状图</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { type: 'Autocracies', year: '1930', value: 129 },
+        { type: 'Autocracies', year: '1940', value: 133 },
+        { type: 'Autocracies', year: '1950', value: 130 },
+        { type: 'Autocracies', year: '1960', value: 126 },
+        { type: 'Autocracies', year: '1970', value: 117 },
+        { type: 'Autocracies', year: '1980', value: 114 },
+        { type: 'Autocracies', year: '1990', value: 111 },
+        { type: 'Autocracies', year: '2000', value: 89 },
+        { type: 'Autocracies', year: '2010', value: 80 },
+        { type: 'Autocracies', year: '2018', value: 80 },
+        { type: 'Democracies', year: '1930', value: 22 },
+        { type: 'Democracies', year: '1940', value: 13 },
+        { type: 'Democracies', year: '1950', value: 25 },
+        { type: 'Democracies', year: '1960', value: 29 },
+        { type: 'Democracies', year: '1970', value: 38 },
+        { type: 'Democracies', year: '1980', value: 41 },
+        { type: 'Democracies', year: '1990', value: 57 },
+        { type: 'Democracies', year: '2000', value: 87 },
+        { type: 'Democracies', year: '2010', value: 98 },
+        { type: 'Democracies', year: '2018', value: 99 }
+      ]
+    }
+  ],
+  seriesField: 'type',
+  title: {
+    visible: true,
+    text: 'Grouped bar chart',
+    subtext: 'This is a grouped bar chart',
+  },
+  legends: {
+    visible: true,
+  }
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? ['year', 'type'] : 'value',
+      yField: isVertical ? 'value' : ['year', 'type'],
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>堆叠柱状图</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  stack: true,
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { State: 'WY', Age: 'Under 5 Years', Population: 25635 },
+        { State: 'WY', Age: '5 to 13 Years', Population: 1890 },
+        { State: 'WY', Age: '14 to 17 Years', Population: 9314 },
+        { State: 'DC', Age: 'Under 5 Years', Population: 30352 },
+        { State: 'DC', Age: '5 to 13 Years', Population: 20439 },
+        { State: 'DC', Age: '14 to 17 Years', Population: 10225 },
+        { State: 'VT', Age: 'Under 5 Years', Population: 38253 },
+        { State: 'VT', Age: '5 to 13 Years', Population: 42538 },
+        { State: 'VT', Age: '14 to 17 Years', Population: 15757 },
+        { State: 'ND', Age: 'Under 5 Years', Population: 51896 },
+        { State: 'ND', Age: '5 to 13 Years', Population: 67358 },
+        { State: 'ND', Age: '14 to 17 Years', Population: 18794 },
+        { State: 'AK', Age: 'Under 5 Years', Population: 72083 },
+        { State: 'AK', Age: '5 to 13 Years', Population: 85640},
+        { State: 'AK', Age: '14 to 17 Years', Population: 22153 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Stacked bar chart',
+    subtext: 'This is a stacked bar chart',
+  },
+  seriesField: 'Age',
+  legends: {
+    visible: true
+  },
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? 'State' : 'Population',
+      yField: isVertical ? 'Population' : 'State',
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>百分比堆叠柱状图</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  percent: true,
+  stack: true,
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { State: 'WY', Age: 'Under 5 Years', Population: 25635 },
+        { State: 'WY', Age: '5 to 13 Years', Population: 1890 },
+        { State: 'WY', Age: '14 to 17 Years', Population: 9314 },
+        { State: 'DC', Age: 'Under 5 Years', Population: 30352 },
+        { State: 'DC', Age: '5 to 13 Years', Population: 20439 },
+        { State: 'DC', Age: '14 to 17 Years', Population: 10225 },
+        { State: 'VT', Age: 'Under 5 Years', Population: 38253 },
+        { State: 'VT', Age: '5 to 13 Years', Population: 42538 },
+        { State: 'VT', Age: '14 to 17 Years', Population: 15757 },
+        { State: 'ND', Age: 'Under 5 Years', Population: 51896 },
+        { State: 'ND', Age: '5 to 13 Years', Population: 67358 },
+        { State: 'ND', Age: '14 to 17 Years', Population: 18794 },
+        { State: 'AK', Age: 'Under 5 Years', Population: 72083 },
+        { State: 'AK', Age: '5 to 13 Years', Population: 85640},
+        { State: 'AK', Age: '14 to 17 Years', Population: 22153 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Percentage stacked bar chart',
+    subtext: 'This is a percentage stacked bar chart',
+  },
+  seriesField: 'Age',
+  legends: { visible: true },
+  axes: [
+    {
+      orient: 'left',
+      label: {
+        formatMethod: val => {
+          return `${(val * 100).toFixed(2)}%`;
+        }
+      }
+    }
+  ],
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    const spec = {
+      ...commonSpec,
+      xField: isVertical ? 'State' : 'Population',
+      yField: isVertical ? 'Population' : 'State',
+      direction: direction,
+    };
+    spec.axes[0].orient = isVertical ? 'left': 'top';
+    return spec;
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+### 折线图
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'line',
+  xField: 'year',
+  yField: 'count',
+  seriesField: 'medalType',
+  legends: { visible: true }
+};
+
+const data = [[40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
+  [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
+  [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29]].map((arr, outer) => {
+  const type = ['Gold', 'Silver', 'Bronze'][outer];
+  return arr.map((item, inner) => ({
+    year: `${inner * 4 + 1952}`,
+    count: item,
+    medalType: type,
+  }));
+});
+
+function App() {
+  const [type, setType] = useState('multiple');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  const spec = useMemo(() => {
+    return {
+      ...commonSpec,
+      title: {
+        visible: true,
+        text: `${type === "multiple" ? "Multi-series" : "Basic"} line chart`,
+        subtext: `This is a ${type === "multiple" ? "multi-series" : "basic"} line chart`,
+      },
+      data: { values: type === 'multiple' ? data[0].concat(data[1]).concat(data[2]) : data[0] }
+    };
+  }, [type])
+
+  return (
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'multiple'}>multiple</Radio>
+        <Radio value={'single'}>single</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={type}
+            spec={spec}
+            option={{ mode: "desktop-browser"}}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+### 面积图
+
+```jsx live=true dir="row" noInline=true half=true
 import React from "react";
 import { VChart } from "@visactor/react-vchart";
 
-const chart = {
-  spec: {
-    type: 'pie',
-    data: [
-      {
-        id: 'id0',
-        values: [
-          { type: 'oxygen', value: '46.60' },
-          { type: 'silicon', value: '27.72' },
-          { type: 'aluminum', value: '8.13' },
-          { type: 'iron', value: '5' },
-          { type: 'calcium', value: '3.63' },
-          { type: 'sodium', value: '2.83' },
-          { type: 'potassium', value: '2.59' },
-          { type: 'others', value: '3.5' }
-        ]
+const commonSpec = {
+  type: 'area',
+  stack: true,
+  title: {
+    visible: true,
+    text: 'Stacked area chart',
+    subtext: 'This is a stacked area chart',
+  },
+  xField: 'type',
+  yField: 'value',
+  seriesField: 'country',
+  legends: { visible: true },
+  tooltip: {
+    dimension: {
+      updateContent: data => {
+        let sum = 0;
+        data.forEach(datum => {
+          sum += +datum.value;
+        });
+        data.push({
+          hasShape: 'false',
+          key: 'Total',
+          value: sum
+        });
+        return data;
       }
-    ],
-    valueField: 'value',
-    categoryField: 'type',
+    }
+  }
+};
+
+const values = [[4229, 4376, 3054, 12814], [3932, 3987, 5067, 13012], 
+ [5221, 3574, 7004, 11624], [9256, 4376, 9054, 8814],[3308, 4572, 12043, 12998], 
+ [5432, 3417, 15067, 12321],[13701, 5231, 10119, 10342],[4008, 4572, 12043, 22998], 
+ [18712, 6134, 10419, 11261]].reduce((acc, arr, index) => {
+  const type = ['Nail polish', 'Eyebrow pencil', 'Rouge', 'Lipstick', 'Eyeshadows', 
+ 'Eyeliner', 'Foundation', 'Lip gloss', 'Mascara'][index];
+  const result = ['Africa', 'EU', 'China', 'USA'].map((item, innerIndex) => ({
+      country: item,
+      type: type,
+      value: arr[innerIndex],
+    }));
+    return acc.concat(result);
+ }, []);
+
+const data = {
+  fields: {
+    country: {
+      domain: ['Africa', 'EU', 'China', 'USA'].reverse(),
+      lockStatisticsByDomain: true
+    }
+  },
+  values: values,
+}
+
+function App() {
+  return (
+    <div style={{ height: 460 }}>
+      <VChart
+          spec={{ ...commonSpec,  data: data }}
+          option={{ mode: "desktop-browser"}}
+      />
+    </div>
+  )
+}
+
+render(App);
+```
+
+### 饼图
+
+```jsx live=true dir="column" noInline=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'pie',
+  data: [
+    {
+      id: 'id0',
+      values: [{ type: 'oxygen', value: '46.60' }, { type: 'silicon', value: '27.72' },
+        { type: 'aluminum', value: '8.13' }, { type: 'iron', value: '5' },
+        { type: 'calcium', value: '3.63' }, { type: 'sodium', value: '2.83' },
+        { type: 'potassium', value: '2.59' }, { type: 'others', value: '3.5' }]
+    }
+  ],
+  valueField: 'value',
+  categoryField: 'type',
+  label: {
+    visible: true
+  },
+  tooltip: {
+    mark: {
+      content: [
+        {
+          key: datum => datum['type'],
+          value: datum => datum['value'] + '%'
+        }
+      ]
+    }
+  }
+};
+
+const donutChart = {
+  title: {
+    visible: true,
+    text: 'Pie chart',
+    subtext: 'This is a pie chart',
+  },
+  legends: {
+    visible: true,
+    orient: 'right'
+  },
+}
+
+const donutWithIndicator = {
+  title: {
+    visible: true,
+    text: 'Donut chart with indicator',
+    subtext: 'This is a donut chart with indicator',
+  },
+  legends: {
+    visible: true,
+    orient: 'right'
+  },
+  indicator: {
+    visible: true,
+    trigger: 'select',
     title: {
       visible: true,
-      text: 'Statistics of Surface Element Content'
+      style: {
+        fontSize: 12,
+        fontWeight: 'normal',
+        text: data => {
+          if (data) {
+            const value = data['type'];
+            return value ? value : null;
+          }
+          return '总和';
+        }
+      }
     },
-    legends: {
-      visible: true,
-      orient: 'left',
-      title: {
+    content: [
+      {
         visible: true,
-        text: 'Elements'
+        fontWeight: 'bold',
+        style: {
+          fontSize: 20,
+          text: data => {
+            if (data) {
+              const value = data['value'];
+              return value ? `${value}%` : null;
+            }
+            return 1234;
+          }
+        }
       }
+    ]
+  }
+}
+
+function App() {
+  const [type, setType] = useState('donut');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  return (
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'donut'}>饼图</Radio>
+        <Radio value={'donutWithIndicator'}>带指标卡饼图</Radio>
+      </RadioGroup>
+      <div style={{ display: 'flex', alignItem: 'center', justifyContent: 'center'}}>
+        <VChart
+            spec={{
+                ...commonSpec,
+                ...(type === 'donut' ? donutChart : donutWithIndicator),
+            }}
+            option={{ mode: "desktop-browser" }}
+            style={{ height: 440, width:680 }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<!-- ### 漏斗图
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const basicSpec = {
+  type: 'funnel',
+  categoryField: 'name',
+  valueField: 'value',
+  data: [
+    {
+      id: 'funnel',
+      values: [
+        { value: 100, name: 'Step1' },
+        { value: 80, name: 'Step2' },
+        { value: 60, name: 'Step3' },
+        { value: 40, name: 'Step4'},
+        { value: 20, name: 'Step5' }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Basic funnel chart',
+    subtext: 'This is a basic funnel chart',
+  },
+  label: { visible: true },
+  legends: { visible: true }
+};
+
+const RectangularSpec = {
+  type: 'funnel',
+  maxSize: '75%',
+  minSize: '10%',
+  isTransform: true,
+  shape: 'rect',
+  funnel: {
+    style: { cornerRadius: 4, stroke: 'white', lineWidth: 2 },
+    state: {
+      hover: { stroke: '#4e83fd', lineWidth: 1 }
+    }
+  },
+  transform: {
+    style: { stroke: 'white', lineWidth: 2 },
+    state: {
+      hover: { stroke: '#4e83fd', lineWidth: 1 }
+    }
+  },
+  label: {
+    visible: true,
+    style: {
+      lineHeight: 16,
+      limit: Infinity,
+      text: datum => [`${datum.name}`, `${datum.value}`]
+    }
+  },
+  outerLabel: {
+    visible: true,
+    position: 'right',
+    alignLabel: false,
+    style: {
+      text: datum => `${datum.percent * 100}%`
     },
-    label: {
-      visible: true
+    line: { style: { lineDash: [2, 2] } }
+  },
+  transformLabel: {
+    visible: true,
+    style: { fill: 'black' }
+  },
+  data: [
+    {
+      name: 'funnel',
+      values: [
+        { value: 100, name: 'Resume Screening',  percent: 1},
+        { value: 80, name: 'Resume Evaluation', percent: 0.8 },
+        { value: 50, name: 'Evaluation Passed', percent: 0.5 },
+        { value: 30, name: 'Interview', percent: 0.3 },
+        { value: 10, name: 'Final Pass', percent: 0.1 }
+      ]
     }
+  ],
+  categoryField: 'name',
+  valueField: 'value',
+  title: {
+    visible: true,
+    text: 'Rectangular conversion funnel chart',
+    subtext: 'This is a rectangular conversion funnel chart',
+  },
+  legends: {
+    visible: true,
   }
+};
+
+function App() {
+  const [type, setType] = useState('rectangular');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  return (
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'basic'}>基础漏斗图</Radio>
+        <Radio value={'rectangular'}>矩形转化漏斗图</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            spec={type === 'basic' ? basicSpec : RectangularSpec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
 }
 
-const App = () => {
+render(App);
+``` -->
+
+### 雷达图
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const basicSpec = {
+  type: 'radar',
+  data: [
+    {
+      id: 'radarData',
+      values: [
+        { key: 'Strength', value: 5 },
+        { key: 'Speed', value: 5 },
+        { key: 'Shooting', value: 3 },
+        { key: 'Endurance', value: 5 },
+        { key: 'Precision', value: 5 },
+        { key: 'Growth', value: 5 }
+      ]
+    }
+  ],
+  categoryField: 'key',
+  valueField: 'value',
+  point: { visible: true },
+  area: { visible: true },
+  axes: [
+    {
+      orient: 'radius', // radius axis
+      zIndex: 100,
+      min: 0,
+      max: 8,
+      domainLine: { visible: false },
+      label: {
+        visible: true,
+        space: 0,
+        style: { textAlign: 'center', stroke: '#fff', lineWidth: 4 }
+      },
+      grid: { smooth: false },
+    },
+    {
+      orient: 'angle', // angle axis
+      zIndex: 50,
+      tick: { visible: false },
+      domainLine: { visible: false },
+      label: { space: 20 },
+    }
+  ]
+};
+
+const groupSpec = {
+  type: 'radar',
+  data: [{
+    values: [[45, 61, 92, 57, 46, 36, 33, 63, 57, 53, 69, 40], 
+            [31, 39, 81, 39, 64, 21, 58, 72, 47, 37, 80, 74],
+            [90, 95, 62, 52, 74, 87, 80, 69, 74, 84, 94, 23]]
+            .reduce((acc, cur, index) => {
+              const type = ['A', 'B', 'C'];
+              const month = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 
+              'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.']
+              const result = cur.map((item, innerIndex) => ({
+                month: month[innerIndex],
+                value: item,
+                type: type[index]
+              }))
+              return acc.concat(result);
+            }, []),
+  }],
+  categoryField: 'month',
+  valueField: 'value',
+  seriesField: 'type',
+  stack: true,
+  area: { visible: true },
+  legends: { visible: true, orient: 'right'}
+}
+
+function App() {
+  const [type, setType] = useState('group');
+  const onChange = useCallback((e) => setType(e.target.value), []);
   return (
-    <VChart
-        spec={{
-            height: 400,
-            ...chart.spec,
-        }}
-        option={{
-            mode: "desktop-browser",
-        }}
-    />
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'basic'}>基础雷达图</Radio>
+        <Radio value={'group'}>分组雷达图</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            spec={type === 'basic' ? basicSpec : groupSpec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
   )
 }
+
+render(App);
 ```
 
->主题包的更多信息见 [@visactor/vchart-semi-theme](https://www.npmjs.com/package/@visactor/vchart-semi-theme) <br />
-绘制图表以及更详细的指引详见 [VChart 教程文档](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react)。
+### 散点图
+
+```jsx live=true dir="row" noInline=true half=true
+import React from "react";
+import { VChart } from "@visactor/react-vchart";
+
+const data = [
+  { continent: 'Americas', Country: 'Argentina', LifeExpectancy: 75.32, GDP: 12779.37964, Population: 40301927 },
+  { continent: 'Americas', Country: 'Brazil', LifeExpectancy: 72.39, GDP: 9065.800825, Population: 190010647 },
+  { continent: 'Americas', Country: 'Canada', LifeExpectancy: 80.653, GDP: 36319.23501, Population: 33390141 },
+  { continent: 'Americas', Country: 'Chile', LifeExpectancy: 78.553, GDP: 13171.63885, Population: 16284741 },
+  { continent: 'Americas', Country: 'Colombia', LifeExpectancy: 72.889, GDP: 7006.580419, Population: 44227550 },
+  { continent: 'Americas', Country: 'Costa Rica', LifeExpectancy: 78.782, GDP: 9645.06142, Population: 4133884 },
+  { continent: 'Americas', Country: 'Cuba', LifeExpectancy: 78.273, GDP: 8948.102923, Population: 11416987 },
+  { continent: 'Americas', Country: 'Dominican Republic', LifeExpectancy: 72.235, GDP: 6025.374752, Population: 9319622 },
+  { continent: 'Americas', Country: 'Ecuador', LifeExpectancy: 74.994, GDP: 6873.262326, Population: 13755680 },
+  { continent: 'Americas', Country: 'El Salvador', LifeExpectancy: 71.878, GDP: 5728.353514, Population: 6939688 },
+  { continent: 'Americas', Country: 'Guatemala', LifeExpectancy: 70.259, GDP: 5186.050003, Population: 12572928 },
+  { continent: 'Americas', Country: 'Honduras', LifeExpectancy: 70.198, GDP: 3548.330846, Population: 7483763 },
+  { continent: 'Americas', Country: 'Jamaica', LifeExpectancy: 72.567, GDP: 7320.880262, Population: 2780132 },
+  { continent: 'Americas', Country: 'Mexico', LifeExpectancy: 76.195, GDP: 11977.57496, Population: 108700891 },
+  { continent: 'Americas', Country: 'Nicaragua', LifeExpectancy: 72.899, GDP: 2749.320965, Population: 5675356 },
+  { continent: 'Americas', Country: 'Panama', LifeExpectancy: 75.537, GDP: 9809.185636, Population: 3242173 },
+  { continent: 'Americas', Country: 'Paraguay', LifeExpectancy: 71.752, GDP: 4172.838464, Population: 6667147 },
+  { continent: 'Americas', Country: 'Peru', LifeExpectancy: 71.421, GDP: 7408.905561, Population: 28674757 },
+  { continent: 'Americas', Country: 'Puerto Rico', LifeExpectancy: 78.746, GDP: 19328.70901, Population: 3942491 },
+  { continent: 'Americas', Country: 'Trinidad and Tobago', LifeExpectancy: 69.819, GDP: 18008.50924, Population: 1056608 },
+  { continent: 'Americas', Country: 'United States', LifeExpectancy: 78.242, GDP: 42951.65309, Population: 301139947 },
+  { continent: 'Americas', Country: 'Uruguay', LifeExpectancy: 76.384, GDP: 10611.46299, Population: 3447496 },
+  { continent: 'Americas', Country: 'Venezuela', LifeExpectancy: 73.747, GDP: 11415.80569, Population: 26084662 },
+  { continent: 'Asia', Country: 'China', LifeExpectancy: 72.961, GDP: 4959.114854, Population: 1318683096 },
+  { continent: 'Asia', Country: 'Hong Kong, China', LifeExpectancy: 82.208, GDP: 39724.97867, Population: 6980412 },
+  { continent: 'Asia', Country: 'Japan', LifeExpectancy: 82.603, GDP: 31656.06806, Population: 127467972 },
+  { continent: 'Asia', Country: 'Korea, Dem. Rep.', LifeExpectancy: 67.297, GDP: 1593.06548, Population: 23301725 },
+  { continent: 'Asia', Country: 'Korea, Rep.', LifeExpectancy: 78.623, GDP: 23348.13973, Population: 49044790 },
+  { continent: 'Europe', Country: 'Albania', LifeExpectancy: 76.423, GDP: 5937.029526, Population: 3600523 },
+  { continent: 'Europe', Country: 'Austria', LifeExpectancy: 79.829, GDP: 36126.4927, Population: 8199783 },
+  { continent: 'Europe', Country: 'Belgium', LifeExpectancy: 79.441, GDP: 33692.60508, Population: 10392226 },
+  { continent: 'Europe', Country: 'Bosnia and Herzegovina', LifeExpectancy: 74.852, GDP: 7446.298803, Population: 4552198 },
+  { continent: 'Europe', Country: 'Bulgaria', LifeExpectancy: 73.005, GDP: 10680.79282, Population: 7322858 },
+  { continent: 'Europe', Country: 'Croatia', LifeExpectancy: 75.748, GDP: 14619.22272, Population: 4493312 },
+  { continent: 'Europe', Country: 'Czech Republic', LifeExpectancy: 76.486, GDP: 22833.30851, Population: 10228744 },
+  { continent: 'Europe', Country: 'Denmark', LifeExpectancy: 78.332, GDP: 35278.41874, Population: 5468120 },
+  { continent: 'Europe', Country: 'Finland', LifeExpectancy: 79.313, GDP: 33207.0844, Population: 5238460 },
+  { continent: 'Europe', Country: 'France', LifeExpectancy: 80.657, GDP: 30470.0167, Population: 61083916 },
+  { continent: 'Europe', Country: 'Germany', LifeExpectancy: 79.406, GDP: 32170.37442, Population: 82400996 },
+  { continent: 'Europe', Country: 'Greece', LifeExpectancy: 79.483, GDP: 27538.41188, Population: 10706290 },
+  { continent: 'Europe', Country: 'Hungary', LifeExpectancy: 73.338, GDP: 18008.94444, Population: 9956108 },
+  { continent: 'Europe', Country: 'Iceland', LifeExpectancy: 81.757, GDP: 36180.78919, Population: 301931 },
+  { continent: 'Europe', Country: 'Ireland', LifeExpectancy: 78.885, GDP: 40675.99635, Population: 4109086 },
+  { continent: 'Europe', Country: 'Italy', LifeExpectancy: 80.546, GDP: 28569.7197, Population: 58147733 },
+  { continent: 'Europe', Country: 'Montenegro', LifeExpectancy: 74.543, GDP: 9253.896111, Population: 684736 },
+  { continent: 'Europe', Country: 'Netherlands', LifeExpectancy: 79.762, GDP: 36797.93332, Population: 16570613 },
+  { continent: 'Europe', Country: 'Norway', LifeExpectancy: 80.196, GDP: 49357.19017, Population: 4627926 },
+  { continent: 'Europe', Country: 'Poland', LifeExpectancy: 75.563, GDP: 15389.92468, Population: 38518241 },
+  { continent: 'Europe', Country: 'Portugal', LifeExpectancy: 78.098, GDP: 20509.64777, Population: 10642836 },
+  { continent: 'Europe', Country: 'Romania', LifeExpectancy: 72.476, GDP: 10808.47561, Population: 22276056 },
+  { continent: 'Europe', Country: 'Serbia', LifeExpectancy: 74.002, GDP: 9786.534714, Population: 10150265 },
+  { continent: 'Europe', Country: 'Slovak Republic', LifeExpectancy: 74.663, GDP: 18678.31435, Population: 5447502 },
+  { continent: 'Europe', Country: 'Slovenia', LifeExpectancy: 77.926, GDP: 25768.25759, Population: 2009245 },
+  { continent: 'Europe', Country: 'Spain', LifeExpectancy: 80.941, GDP: 28821.0637, Population: 40448191 },
+  { continent: 'Europe', Country: 'Sweden', LifeExpectancy: 80.884, GDP: 33859.74835, Population: 9031088 },
+  { continent: 'Europe', Country: 'Switzerland', LifeExpectancy: 81.701, GDP: 37506.41907, Population: 7554661 },
+  { continent: 'Europe', Country: 'Turkey', LifeExpectancy: 71.777, GDP: 8458.276384, Population: 71158647 },
+  { continent: 'Europe', Country: 'United Kingdom', LifeExpectancy: 79.425, GDP: 33203.26128, Population: 60776238 },
+  { continent: 'Oceania', Country: 'Australia', LifeExpectancy: 81.235, GDP: 34435.36744, Population: 20434176 },
+  { continent: 'Oceania', Country: 'New Zealand', LifeExpectancy: 80.204, GDP: 25185.00911, Population: 4115771 }
+];
+
+function logScale(value, domain, range) {
+  // Calculate the logarithm of the domain and range
+  const logDomain = domain.map(x => (x !== 0 ? Math.log10(x) : 0));
+  const logRange = range.map(x => Math.log10(x));
+  // Calculate the position of the value in the domain, map it to the range
+  const t = (Math.log10(value) - logDomain[0]) / (logDomain[1] - logDomain[0]);
+  const newValue = (logRange[1] - logRange[0]) * t + logRange[0];
+  // Return the mapped value and restore the logarithmic scaling
+  return Math.pow(10, newValue);
+}
+
+// chart spec
+const spec = {
+  type: 'common',
+  series: [
+    {
+      type: 'scatter',
+      xField: 'GDP',
+      yField: 'LifeExpectancy',
+      seriesField: 'continent',
+      sizeField: 'Population',
+      size: d => logScale(d.Population, [0, Math.max(...data.map(d => d.Population))], [1, 20])
+    }
+  ],
+  crosshair: {
+    yField: {
+      visible: true,
+      line: { visible: true, type: 'line' },
+      label: { visible: true }
+    },
+    xField: {
+      visible: true,
+      line: { visible: true, type: 'line' },
+      label: { visible: true }
+    }
+  },
+  data: [{ id: 'data', values: data }],
+  title: {
+    visible: true,
+    text: 'Basic scatter chart',
+    subtext: 'This is a basic scatter chart',
+  },
+  axes: [
+    {
+      orient: 'left',
+      type: 'linear',
+      range: {
+        min: Math.min(...data.map(d => d.LifeExpectancy)),
+        max: Math.max(...data.map(d => d.LifeExpectancy))
+      },
+      domainLine: { visible: true }
+    },
+    {
+      orient: 'bottom',
+      type: 'linear',
+      domainLine: { visible: true }
+    }
+  ],
+  legends: [{ visible: true,}]
+};
+
+function App() {
+  return (
+    <div style={{ height: 460 }}>
+      <VChart
+        spec={spec}
+        option={{ mode: "desktop-browser" }}
+      />
+    </div>
+  )
+}
+
+render(App);
+```
+
+## 设计规范
 
+### 选用指南
 
-## 配置 VChart 主题
+为了帮助设计师进行图表选择，我们对常用的 11 种图表进行了深度解析，并归纳出图表选用方案，见[图表选用规范](https://bytedance.sg.larkoffice.com/docx/N10zdVn7AovY2kxFj8ulPiFYgUh)。
 
-VChart 支持对图表主题的整体配置和复用，详见 [VChart 主题概念和设计规范](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Concept_and_Design_Rules)。 主题配置中最主要的是色板的配置。VChart 支持的色板分为两大类，数据色板和语义色板。VChart 通过 `@visactor/vchart-semi-theme` 获取 Semi 主题/用户自定义主题中的 token，并映射到 VChart 主题的数据色板和语义色板中，从而实现和 Semi 默认主题/用户自定义主题的适配。基于 Semi 的项目如果想要配置 VCharts 主题，可以通过 [DSM](https://semi.design/dsm/) 设置数据色板和语义色板相应的 token。
+### 颜色规范
 
-### 数据色板
+`@visactor/vchart-semi-theme` 中定义了 20 个离散数据色板的色值。色值从已有的 Semi 色板中按照分裂互补配色和暗亮交替的原则进行排序。对于离散数据色板，Semi Design 侧已声明了 20 个 Token，如果需要自定义离散数据色板，用户可以在 [DSM](https://semi.design/dsm) 自定义主题时配置这些 Token。色值的具体生成步骤如下：
 
-数据色板是在图表中用于区分数据组的离散色板，也通常用于区分图例项。如以下两个图表中不同数据组的色板，在颜色队列中按顺序取色：
+<h4>Step1: 遵从分裂互补取色，生成初版色稿</h4>
 
-![demo](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/vchart-demo.png)
+我们参考了经典配色理论，采用<strong>分裂互补</strong>取色原则，按照三个一组的方式进行取色。
 
-VChart 数据色板也可以是动态的、渐进式的。在一般情况下，色板会根据数据项数量的范围来动态调整。数据组不超过 10 个时，采用 10 色的色板；数据组超过 10 个时，采用 20 色的色板。如果数据组超过 20 个，则会从第 1 个色值开始重复应用色板颜色。
+![分裂取色](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/slitColor.png)
 
-![数据色板](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/vchart-data-color.png)
+<h4>Step2: 基线矫正，降低歧义提升对比</h4>
 
-Semi Design 为 VChart 声明了数据色板对应的 20 个 token， 详见下表。用户可以在 DSM 自定义主题时配置这些 token，来自定义 VChart 的数据色板。这 20 个 token 值是 20 色的色板，其中的名称为 --semi-color-data-n(n 为 0, 2, 4, 6, 8, 10, 12, 14, 16, 18)的 token 值是 10 色的色板。
+1. 规避红绿等易引起歧义的色彩。
+2. 为保证区分度， 增强色彩对比，相邻颜色按照“<strong>暗-亮-暗-亮</strong>”的节奏进行灰度调整。
 
-<DesignToken componentName='global' reg={/--semi-color-data/} hasTab={false}/>
+![基线矫正](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/betterColor.png)
 
-### 语义色板
 
-语义色板中主要定义了图表组件的公共样式，比如背景色、边框、滑块、弹层、字体、字色等。`@visactor/vchart-semi-theme` 也会自动在页面环境爬取当前 Semi 主题的类似场景的 token 值来自动生成 VChart 图表主题。在 DSM 配置主题的用户，<strong>通常无需额外考虑此部分的配置</strong>。
+<h4>Step3: 感性调整，提升视觉美学</h4>
 
-更多信息可以参阅以下两篇文档：
+为了让色彩体系更加和谐，在科学理论支撑之外，还需在真实业务场景下进行美学修正。
+
+![视觉美学](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/beautyColor.png)
+
+<h4>Step4: 色板延展，适应广泛场景</h4>
+
+在 10 色色板的基础上，我们拓展到 20 色色板以适应更为广泛的业务场景。
+
+![数据色板](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/data-chart.png)
+
+在 VChart 中，还有许多应用于图表组件的语义颜色，比如背景色、边框、滑块、弹层、字体、字色等。`@visactor/vchart-semi-theme` 会读取 body 上的 Semi CSS Variables 的 Token 值来自动生成 VChart 图表主题，<strong>通常无需额外考虑此部分的规范</strong>。如果需要了解详细的语义颜色映射关系可以参阅以下两篇文档：
 
 - [VChart 主题概念和设计规范](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Concept_and_Design_Rules)
 - [VChart 扩展主题包](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Extension)
 
-联系 VChart：
-```chartcontact 
-```
+## Design Token
+
+Semi Design 为 VChart 声明的 20 个 Token 详见下表。
+
+<DesignToken componentName='global' reg={/--semi-color-data/} sameWidth={true}/>
+
+<Notice title='Note'>
+    在 @visactor/vchart-semi-theme 1.10.2 版本前，其中的名称为 --semi-color-data-n(n 为 0, 2, 4, 6, 8, 10, 12, 14, 16, 18)的 Token 值作为 10 色的色板。
+    在 @visactor/vchart-semi-theme 1.10.2 版本后，其中的名称为 --semi-color-data-n(n 从 0 到 9)的 Token 作为 10 色的色板。
+</Notice>
+
+
+
+使用问题咨询/建议，可加入 VChart 用户群进行反馈
+<ChartContact
+  name1="微信号"
+  name2="飞书用户群"
+></ChartContact>

content/start/changelog/index-en-US.md

@@ -16,6 +16,21 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.56.3 (2024-04-19)
+- 【Fix】
+    - Fixed the issue where the Cancel button has a left margin after Modal footerFill is opened.[#2177](https://github.com/DouyinFE/semi-design/pull/2177)
+    - Fix abnormal expansion status of TreeSelect which is single selection, searchable,  loaded data from remote [#2178](https://github.com/DouyinFE/semi-design/issues/2178)
+    - Fixed the problem that after Upload switches addOnPasting to false, paste upload is still triggered.[#2176](https://github.com/DouyinFE/semi-design/pull/2176)
+    - Fixed the problem that TreeSelect options changed after searching and the panel position was not automatically adjusted.[#2181](https://github.com/DouyinFE/semi-design/pull/2181)
+    - Modify inaccurate expressions in locale vi-VN translation [@ruaruababa](https://github.com/ruaruababa)[#2154](https://github.com/DouyinFE/semi-design/pull/2154)
+- 【Docs】
+    - Data visualization documentation updates
+
+#### 🎉 2.56.2 (2024-04-17)
+- 【Design Token】
+  - Button change splitButton radius token name to `$radius-button_splitButtonGroup_first_topLeft`、`$radius-button_splitButtonGroup_first_bottomLeft`、`$radius-button_splitButtonGroup_last_topRight`、`$radius-button_splitButtonGroup_last_bottomRight` Token
+
+
 #### 🎉 2.56.1 (2024-04-15)
 - 【Design Token】
   - Button Add `$radius-splitButtonGroup_first_topLeft`、`$radius-splitButtonGroup_first_bottomLeft`、`$radius-splitButtonGroup_last_topRight`、`$radius-splitButtonGroup_last_bottomRight` Token

content/start/changelog/index.md

@@ -13,6 +13,21 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 -   修订版本号（patch）：仅会进行 bugfix，发布时间不限
 -   不同版本间的详细关系，可查阅 [FAQ](/zh-CN/start/faq)
 
+#### 🎉 2.56.3 (2024-04-19)
+- 【Fix】
+    - 修复 Modal footerFill 打开后，取消按钮带有左边距的问题 [#2177](https://github.com/DouyinFE/semi-design/pull/2177)
+    - 修复单选，可搜索，远程加载的 TreeSelect 在选择选项后，选项展开状态异常问题 [#2178](https://github.com/DouyinFE/semi-design/issues/2178) [#2179](https://github.com/DouyinFE/semi-design/pull/2179)
+    - 修复 Upload 将 addOnPasting 切换为 false 后，粘贴上传依然触发的问题 [#2176](https://github.com/DouyinFE/semi-design/pull/2176)
+    - 修复 TreeSelect 在搜索后选项变化，面板位置未自动调整问题 [#2181](https://github.com/DouyinFE/semi-design/pull/2181)
+    - 修改 locale 越南语翻译中不准确的表达 [@ruaruababa](https://github.com/ruaruababa) [#2154](https://github.com/DouyinFE/semi-design/pull/2154)
+- 【Docs】
+    - 数据可视化文档更新 [#2182](https://github.com/DouyinFE/semi-design/pull/2182)
+
+#### 🎉 2.56.2 (2024-04-17)
+- 【Design Token】
+  - Button 修改 splitButton radius token 名称为 `$radius-button_splitButtonGroup_first_topLeft`、`$radius-button_splitButtonGroup_first_bottomLeft`、`$radius-button_splitButtonGroup_last_topRight`、`$radius-button_splitButtonGroup_last_bottomRight` Token
+
+
 #### 🎉 2.56.1 (2024-04-15)
 - 【Design Token】
   - Button 增加 `$radius-splitButtonGroup_first_topLeft`、`$radius-splitButtonGroup_first_bottomLeft`、`$radius-splitButtonGroup_last_topRight`、`$radius-splitButtonGroup_last_bottomRight` Token

cypress/e2e/treeSelect.spec.js

@@ -146,9 +146,20 @@ describe('treeSelect', () => {
         cy.get('.semi-tree-select-selection').eq(0).trigger('click');
         cy.wait(1000);
         // 此时展开项目由选中项和原来的 state 中的 expandedKeys 决定
-        cy.get('.semi-tree-option').should('have.length', 4);
+        cy.get('.semi-tree-option').should('have.length', 2);
         cy.get('.semi-icon-tree_triangle_down').eq(0).trigger('click');
-        cy.get('.semi-tree-option').should('have.length', 6);
+        cy.get('.semi-tree-option').should('have.length', 4);
     });
+
+    it.only('filterTreeNode + loadData', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--load-data');
+        cy.get('.semi-tree-select-selection').eq(0).trigger('click');
+        cy.wait(1000);
+        cy.get('.semi-tree-option').eq(0).trigger('click');
+        cy.get('.semi-tree-option-list').should('not.exist');
+        cy.get('.semi-tree-select-selection').eq(0).trigger('click');
+        cy.wait(1000);
+        cy.get('.semi-tree-option.semi-tree-option-level-1.semi-tree-option-selected.semi-tree-option-collapsed').should('exist');
+    })
 });
 

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.56.0"
+    "version": "2.56.3"
 }

package.json

@@ -46,7 +46,7 @@
         "node": ">= 16.0.0"
     },
     "dependencies": {
-        "@douyinfe/semi-site-banner": "^0.1.3",
+        "@douyinfe/semi-site-banner": "^0.1.5",
         "@douyinfe/semi-site-doc-style": "0.0.1",
         "@douyinfe/semi-site-header": "^0.0.29",
         "@douyinfe/semi-site-markdown-blocks": "^0.0.9",
@@ -55,8 +55,8 @@
         "@storybook/react-webpack5": "^7.0.7",
         "@svgr/core": "^5.5.0",
         "@types/react-window": "^1.8.5",
-        "@visactor/react-vchart": "^1.7.2",
-        "@visactor/vchart-semi-theme": "^1.7.2",
+        "@visactor/react-vchart": "^1.10.4",
+        "@visactor/vchart-semi-theme": "^1.10.4",
         "aos": "^2.3.4",
         "camelcase": "^6.2.0",
         "chroma-js": "^2.1.2",

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-react",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "motion library for semi-ui-react",
     "keywords": [
         "motion",
@@ -25,8 +25,8 @@
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.56.0",
-        "@douyinfe/semi-animation-styled": "2.56.0",
+        "@douyinfe/semi-animation": "2.56.3",
+        "@douyinfe/semi-animation-styled": "2.56.3",
         "classnames": "^2.2.6"
     },
     "devDependencies": {

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-styled",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "semi styled animation",
     "keywords": [
         "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "animation base library for semi-ui",
     "keywords": [
         "animation",

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-semi-design",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "semi ui eslint plugin",
     "keywords": [
         "semi",

packages/semi-foundation/button/splitButtonGroup.scss

@@ -12,13 +12,13 @@ $icon: #{$module}-with-icon;
         margin-right: 1px;
 
         &-first {
-            border-top-left-radius: $radius-splitButtonGroup_first_topLeft;
-            border-bottom-left-radius: $radius-splitButtonGroup_first_bottomLeft;
+            border-top-left-radius: $radius-button_splitButtonGroup_first_topLeft;
+            border-bottom-left-radius: $radius-button_splitButtonGroup_first_bottomLeft;
         }
 
         &-last {
-            border-top-right-radius: $radius-splitButtonGroup_last_topRight;
-            border-bottom-right-radius: $radius-splitButtonGroup_last_bottomRight;
+            border-top-right-radius: $radius-button_splitButtonGroup_last_topRight;
+            border-bottom-right-radius: $radius-button_splitButtonGroup_last_bottomRight;
             margin-right: unset;
         }
     }

packages/semi-foundation/button/variables.scss

@@ -162,7 +162,7 @@ $radius-button_group: $radius-button; // 按钮组圆角大小
 $width-button-outline: 2px; // 按钮轮廓宽度
 
 
-$radius-splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
-$radius-splitButtonGroup_first_bottomLeft:var(--semi-border-radius-small); // split button 左下圆角
-$radius-splitButtonGroup_last_topRight:var(--semi-border-radius-small); // split button 右上圆角
-$radius-splitButtonGroup_last_bottomRight:var(--semi-border-radius-small); // split button 右下圆角
+$radius-button_splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
+$radius-button_splitButtonGroup_first_bottomLeft:var(--semi-border-radius-small); // split button 左下圆角
+$radius-button_splitButtonGroup_last_topRight:var(--semi-border-radius-small); // split button 右上圆角
+$radius-button_splitButtonGroup_last_bottomRight:var(--semi-border-radius-small); // split button 右下圆角

packages/semi-foundation/markdownRender/markdownRender.scss

@@ -3,7 +3,39 @@
 $module: #{$prefix}-markdownRender;
 
 .#{$module} {
+
     ul,li {
-        color:var(--semi-color-text-0)
+        color:$color-markdownRender_component_list
+    }
+
+    &-component-image{
+        margin: $spacing-markdownRender_component_image-marginTop $spacing-markdownRender_component_image-marginRight $spacing-markdownRender_component_image-marginBottom $spacing-markdownRender_component_image-marginLeft;
+        max-width: $width-markdownRender_component_image-maxWidth;
+        max-height: $width-markdownRender_component_image-maxHeight;
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+
+        &-alt{
+            margin-top: $spacing-markdownRender_component_image_alt-marginTop;
+            text-align: center;
+            color:$color-markdownRender_component_image_alt;
+        }
     }
+
+    & &-component-header{
+        margin-top: $spacing-markdownRender_component_header-marginTop;
+        margin-bottom: $spacing-markdownRender_component_header-marginBottom;
+    }
+
+    &-component-p{
+        strong{
+            font-weight: $font-weight-bold;
+        }
+    }
+
+
+
+
+
 }

packages/semi-foundation/markdownRender/variables.scss

@@ -0,0 +1,15 @@
+$spacing-markdownRender_component_image-marginLeft:16px;
+$spacing-markdownRender_component_image-marginRight:16px;
+$spacing-markdownRender_component_image-marginTop:16px;
+$spacing-markdownRender_component_image-marginBottom:16px;
+$width-markdownRender_component_image-maxWidth: 50%;
+$width-markdownRender_component_image-maxHeight: 500px;
+$spacing-markdownRender_component_image_alt-marginTop: 8px;
+
+
+$spacing-markdownRender_component_header-marginTop: 16px;
+$spacing-markdownRender_component_header-marginBottom: 16px;
+
+
+$color-markdownRender_component_list: var(--semi-color-text-0);
+$color-markdownRender_component_image_alt:var(--semi-color-tertiary);

packages/semi-foundation/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.56.0",
+        "@douyinfe/semi-animation": "2.56.3",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",

packages/semi-foundation/treeSelect/foundation.ts

@@ -199,7 +199,9 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     notifyLoad: (newLoadedKeys: Set<string>, data: BasicTreeNodeData) => void;
     updateInputFocus: (bool: boolean) => void;
     updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void;
-    updateIsFocus: (bool: boolean) => void
+    updateIsFocus: (bool: boolean) => void;
+    setClearInputFlag: (flag: boolean) => void;
+    getClearInputFlag: () => boolean
 }
 
 export default class TreeSelectFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TreeSelectAdapter<P, S>, P, S> {
@@ -588,7 +590,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         const { keyMaps } = this.getProps();
         const newExpandedKeys: Set<string> = new Set(expandedKeys);
         const isExpandControlled = this._isExpandControlled();
-        const expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
+        const expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities, false);
         expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
         const newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
 
@@ -601,6 +603,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             filteredExpandedKeys: new Set(expandedOptsKeys),
             filteredShownKeys: new Set([])
         });
+        this._adapter.rePositionDropdown();
     }
 
     handleInputChange(sugInput: string) {
@@ -615,7 +618,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         let newFlattenNodes = [];
         let filteredShownKeys = new Set([]);
         if (!sugInput) {
-            expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
+            expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities, false);
             expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
             newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
         } else {
@@ -640,6 +643,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             filteredExpandedKeys: newFilteredExpandedKeys,
             filteredShownKeys,
         });
+        this._adapter.rePositionDropdown();
     }
 
     handleNodeSelect(e: any, treeNode: BasicTreeNodeProps) {
@@ -871,7 +875,8 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
      * When the search box is on the trigger, the focus event processing method
      */
     handleInputTriggerFocus() {
-        this.clearInput();
+        const inputValue = this.getState('inputValue');
+        inputValue && this.clearInput();
         this._adapter.updateState({
             inputTriggerFocus: true
         });
@@ -880,4 +885,30 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     setLoadKeys(data: BasicTreeNodeData, resolve: (value?: any) => void) {
         this._adapter.updateLoadKeys(data, resolve);
     }
+
+    handlePopoverVisibleChange(isVisible: boolean) {
+        const { filterTreeNode, searchAutoFocus, searchPosition } = this.getProps();
+        const inputValue = this.getState('inputValue');
+        // 将 inputValue 清空，如果有选中值的话，选中项能够快速回显
+        // Clear the inputValue. If there is a selected value, the selected item can be quickly echoed.
+        if (isVisible === false && filterTreeNode) {
+            inputValue && this._adapter.setClearInputFlag(true);
+            this.clearInputValue(); 
+        }
+        if (filterTreeNode && searchPosition === strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
+            this.focusInput(true);
+        }
+    }
+
+    handleAfterClose() {
+        // flattenNode 的变化将导致弹出层面板中的选项数目变化
+        // 在弹层完全收起之后，再通过 clearInput 重新计算 state 中的 expandedKey， flattenNode
+        // 防止在弹出层未收起时弹层面板中选项数目变化导致视觉上出现弹层闪动问题
+        // Changes to flattenNode will cause the number of options in the popup panel to change
+        // After the pop-up layer is completely closed, recalculate the expandedKey and flattenNode in the state through clearInput.
+        // Prevent the pop-up layer from flickering visually due to changes in the number of options in the pop-up panel when the pop-up layer is not collapsed.
+        const { filterTreeNode } = this.getProps();
+        const shouldClear = this._adapter.getClearInputFlag();
+        filterTreeNode && shouldClear && this.clearInput();
+    }
 }

packages/semi-foundation/upload/foundation.ts

@@ -107,7 +107,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     destroy() {
         const { disabled, addOnPasting } = this.getProps();
         this.releaseMemory();
-        if (addOnPasting && !disabled) {
+        if (!disabled) {
             this.unbindPastingHandler();
         }
     }
@@ -884,31 +884,31 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     handlePasting(e: any) {
         const isMac = this._adapter.isMac();
         const isCombineKeydown = isMac ? e.metaKey : e.ctrlKey;
-
-        if (isCombineKeydown && e.code === 'KeyV' && e.target === document.body) {
-            // https://github.com/microsoft/TypeScript/issues/33923
-            const permissionName = "clipboard-read" as PermissionName;
-            // The main thread should not be blocked by clipboard, so callback writing is required here. No await here
-            navigator.permissions
-                .query({ name: permissionName })
-                .then(result => {
-                    console.log(result);
-                    if (result.state === 'granted' || result.state === 'prompt') {
-                        // user has authorized or will authorize
-                        navigator.clipboard
-                            .read()
-                            .then(clipboardItems => {
+        const { addOnPasting } = this.getProps();
+
+        if (addOnPasting) {
+            if (isCombineKeydown && e.code === 'KeyV' && e.target === document.body) {
+                // https://github.com/microsoft/TypeScript/issues/33923
+                const permissionName = 'clipboard-read' as PermissionName;
+                // The main thread should not be blocked by clipboard, so callback writing is required here. No await here
+                navigator.permissions
+                    .query({ name: permissionName })
+                    .then(result => {
+                        if (result.state === 'granted' || result.state === 'prompt') {
+                            // user has authorized or will authorize
+                            navigator.clipboard.read().then(clipboardItems => {
                                 // Process the data read from the pasteboard
                                 // Check the returned data type to determine if it is image data, and process accordingly
                                 this.readFileFromClipboard(clipboardItems);
                             });
-                    } else {
-                        this._adapter.notifyPastingError(result);
-                    }
-                })
-                .catch(error => {
-                    this._adapter.notifyPastingError(error);
-                });
+                        } else {
+                            this._adapter.notifyPastingError(result);
+                        }
+                    })
+                    .catch(error => {
+                        this._adapter.notifyPastingError(error);
+                    });
+            }
         }
     }
 

packages/semi-icons-lab/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons-lab",
-  "version": "2.56.0",
+  "version": "2.56.3",
   "description": "semi icons lab",
   "keywords": [
     "semi",

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-icons",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "semi icons",
     "keywords": [
         "semi",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-illustrations",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "semi illustrations",
     "keywords": [
         "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -23,7 +23,7 @@
         "typescript": "^4"
     },
     "dependencies": {
-        "@douyinfe/semi-webpack-plugin": "2.56.0"
+        "@douyinfe/semi-webpack-plugin": "2.56.3"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-rspack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-rspack-plugin",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "",
     "homepage": "",
     "license": "MIT",

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-scss-compile",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "compile semi scss to css",
     "author": "[email protected]",
     "license": "MIT",

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/locale/source/vi_VN.ts

@@ -17,16 +17,16 @@ const local: Locale = {
     TimePicker: {
         placeholder: {
             time: 'Chọn thời gian',
-            timeRange: 'Chọn một phạm vi thời gian',
+            timeRange: 'Chọn phạm vi thời gian',
         },
         begin: 'Thời gian bắt đầu',
         end: 'Thời gian kết thúc',
-        // hour: 'giờ',
-        // minute: 'phút',
-        // second: 'thứ hai',
-        hour: '',
-        minute: '',
-        second: '',
+        hour: 'giờ',
+        minute: 'phút',
+        second: 'giây',
+        // hour: '',
+        // minute: '',
+        // second: '',
         AM: 'buổi sáng',
         PM: 'vào buổi chiều',
     },
@@ -43,48 +43,48 @@ const local: Locale = {
             confirm: 'Xác nhận',
             cancel: 'Huỷ bỏ',
         },
-        selectDate: 'Quay lại ngày đã chọn',
-        selectTime: 'thời gian lựa chọn',
+        selectDate: 'Chọn ngày',
+        selectTime: 'Chọn thời gian',
         year: 'năm',
         month: 'tháng',
         day: 'ngày',
         monthText: '${month} ${year}',
         months: {
-            1: 'Giêng',
-            2: 'hai',
+            1: 'Một',
+            2: 'Hai',
             3: 'Ba',
-            4: 'tư',
-            5: 'có thể',
-            6: 'sáu',
-            7: 'bảy',
+            4: 'Tư',
+            5: 'Năm',
+            6: 'Sáu',
+            7: 'Bảy',
             8: 'Tám',
             9: 'Chín',
             10: 'Mười',
-            11: 'mười một',
-            12: 'mười hai',
+            11: 'Mười một',
+            12: 'Mười hai',
         },
         fullMonths: {
-            1: 'tháng Giêng',
-            2: 'Tháng hai',
-            3: 'tháng Ba',
-            4: 'Tháng tư',
-            5: 'có thể',
-            6: 'Tháng sáu',
-            7: 'Tháng bảy',
+            1: 'Tháng Một',
+            2: 'Tháng Hai',
+            3: 'Tháng Ba',
+            4: 'Tháng Tư',
+            5: 'Tháng Năm',
+            6: 'Tháng Sáu',
+            7: 'Tháng Bảy',
             8: 'Tháng Tám',
             9: 'Tháng Chín',
             10: 'Tháng Mười',
-            11: 'Tháng mười một',
-            12: 'Tháng mười hai',
+            11: 'Tháng Mười một',
+            12: 'Tháng Mười hai',
         },
         weeks: {
-            Mon: 'Thứ hai',
-            Tue: 'Thứ ba',
-            Wed: 'Thứ tư',
-            Thu: 'Thứ năm',
-            Fri: 'Thứ sáu',
-            Sat: 'ngày thứ bảy',
-            Sun: 'chủ nhật',
+            Mon: 'Thứ Hai',
+            Tue: 'Thứ Ba',
+            Wed: 'Thứ Tư',
+            Thu: 'Thứ Năm',
+            Fri: 'Thứ Sáu',
+            Sat: 'Thứ bảy',
+            Sun: 'Chủ nhật',
         },
         localeFormatToken: {
             FORMAT_SWITCH_DATE: 'dd/MM/yyyy',
@@ -100,7 +100,7 @@ const local: Locale = {
     },
     Table: {
         emptyText: 'Không kết quả',
-        pageText: 'Hiển thị ${currentStart} đến ${currentEnd} trong tổng số ${total}}',
+        pageText: 'Hiển thị ${currentStart} đến ${currentEnd} trong tổng số ${total}',
     },
     Select: {
         emptyText: 'Không kết quả',
@@ -119,7 +119,7 @@ const local: Locale = {
     Calendar: {
         allDay: 'Cả ngày',
         AM: 'buổi sáng ${time}',
-        PM: 'vào buổi chiều ${time}',
+        PM: 'buổi chiều ${time}',
         datestring: '',
         remaining: '${remained} mặt hàng',
     },
@@ -129,7 +129,7 @@ const local: Locale = {
         legalTips: 'Phát hành và bắt đầu tải lên',
         retry: 'Thử lại',
         replace: 'Thay thế tệp',
-        clear: 'rõ ràng',
+        clear: 'Xoá',
         selectedFiles: 'Tệp đã chọn',
         illegalSize: 'Kích thước tệp không hợp lệ',
         fail: 'Tải lên không thành công',
@@ -149,7 +149,7 @@ const local: Locale = {
         emptyRight: 'Không có nội dung, kiểm tra từ bên trái',
         placeholder: 'Tìm kiếm',
         clear: 'Clear',
-        selectAll: 'Thông thoáng',
+        selectAll: 'Chọn tất cả',
         clearSelectAll: 'Bỏ chọn tất cả',
         total: 'Tổng số mục: ${total}',
         selected: 'Số mục đã chọn: ${total}',
@@ -158,15 +158,15 @@ const local: Locale = {
         optional: '(không bắt buộc)',
     },
     Image: {
-        preview: 'xem trước',
+        preview: 'Xem trước',
         loading: 'Đang tải',
         loadError: 'Không tải được',
         prevTip: 'Trước đó',
-        nextTip: 'Next',
+        nextTip: 'Tiếp theo',
         zoomInTip: 'Phóng to',
-        zoomOutTip: 'thu nhỏ',
+        zoomOutTip: 'Thu nhỏ',
         rotateTip: 'Xoay',
-        downloadTip: 'download',
+        downloadTip: 'Download',
         adaptiveTip: 'Thích ứng với trang',
         originTip: 'Kích thước ban đầu',
     },

packages/semi-ui/markdownRender/components/h1.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={1} {...props}/>;
+    return <Typography.Title heading={1} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/h2.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={2} {...props}/>;
+    return <Typography.Title heading={2} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/h3.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={3} {...props}/>;
+    return <Typography.Title heading={3} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/h4.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={4} {...props}/>;
+    return <Typography.Title heading={4} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/h5.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={5} {...props}/>;
+    return <Typography.Title heading={5} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/h6.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={6} {...props}/>;
+    return <Typography.Title heading={6} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/img.tsx

@@ -3,7 +3,20 @@ import { PropsWithChildren } from 'react';
 import Image, { ImageProps } from '../../image';
 import { IconUploadError } from "@douyinfe/semi-icons";
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
+
 
 export default (props: PropsWithChildren<ImageProps>)=>{
-    return <Image fallback={<IconUploadError />} width={"50%"} {...omit(props, 'children')}/>;
+
+    return <div className={`${cssClasses.PREFIX}-component-image`} style={{
+        maxWidth: "50%",
+        maxHeight: "500px",
+        display: 'flex',
+        "flexDirection": "column",
+        "justifyContent": "center"
+    }}>
+
+        <Image fallback={<IconUploadError />} width={"100%"} {...omit(props, 'children')}/>
+        <div className={`${cssClasses.PREFIX}-component-image-alt`}>{props.alt}</div>
+    </div>;
 };

packages/semi-ui/markdownRender/components/index.tsx

@@ -7,5 +7,6 @@ export { default as h6 } from "./h6";
 export { default as a } from "./a";
 export { default as img } from "./img";
 export { default as table } from "./table";
+export { default as p } from "./p";
 
 

packages/semi-ui/markdownRender/components/p.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import Typography, { TitleProps } from '../../typography';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
+
+export default (props: PropsWithChildren<TitleProps>)=>{
+    return <Typography.Paragraph className={`${cssClasses.PREFIX}-component-p`} {...props}/>;
+};

packages/semi-ui/markdownRender/index.tsx

@@ -5,8 +5,10 @@ import MarkdownRenderFoundation, {
     MarkdownRenderBaseProps,
     MarkdownRenderBaseState,
 } from '@douyinfe/semi-foundation/markdownRender/foundation';
+import "@douyinfe/semi-foundation/markdownRender/markdownRender.scss";
 import { CSSProperties } from 'react';
 import * as runtime from 'react/jsx-runtime';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export interface MarkdownRenderProps extends MarkdownRenderBaseProps{
     style?: CSSProperties;
@@ -43,7 +45,9 @@ class MarkdownRender extends BaseComponent<MarkdownRenderProps, MarkdownRenderSt
 
     render() {
         const ComponentConstructor = this.state.MDXContentComponent;
-        return <ComponentConstructor components={this.props.components} />;
+        return <div className={`${cssClasses.PREFIX}`}>
+            <ComponentConstructor components={this.props.components} />
+        </div>;
     }
 }
 

packages/semi-ui/modal/Modal.tsx

@@ -285,6 +285,10 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                         block={footerFill}
                         autoFocus={true}
                         {...this.props.cancelButtonProps}
+                        style={{
+                            ...footerFill ? { marginLeft: "unset" }:{},
+                            ...this.props.cancelButtonProps?.style
+                        }}
                         x-semi-children-alias="cancelText"
                     >
                         {cancelText || locale.cancel}

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.56.0",
-        "@douyinfe/semi-animation-react": "2.56.0",
-        "@douyinfe/semi-foundation": "2.56.0",
-        "@douyinfe/semi-icons": "2.56.0",
-        "@douyinfe/semi-illustrations": "2.56.0",
-        "@douyinfe/semi-theme-default": "2.56.0",
+        "@douyinfe/semi-animation": "2.56.3",
+        "@douyinfe/semi-animation-react": "2.56.3",
+        "@douyinfe/semi-foundation": "2.56.3",
+        "@douyinfe/semi-icons": "2.56.3",
+        "@douyinfe/semi-illustrations": "2.56.3",
+        "@douyinfe/semi-theme-default": "2.56.3",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",

packages/semi-ui/treeSelect/index.tsx

@@ -316,6 +316,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     onMotionEnd: any;
     treeSelectID: string;
     context: ContextValue;
+    clearInputFlag: boolean;
 
     constructor(props: TreeSelectProps) {
         super(props);
@@ -353,6 +354,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         this.triggerRef = React.createRef();
         this.optionsRef = React.createRef();
         this.clickOutsideHandler = null;
+        this.clearInputFlag = false;
         this.foundation = new TreeSelectFoundation(this.adapter);
         this.treeSelectID = Math.random().toString(36).slice(2);
         this.onMotionEnd = () => {
@@ -765,6 +767,12 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             },
             updateIsFocus: bool => {
                 this.setState({ isFocus: bool });
+            },
+            setClearInputFlag: (flag: boolean) => {
+                this.clearInputFlag = flag;
+            },
+            getClearInputFlag: () => {
+                return this.clearInputFlag;
             }
         };
     }
@@ -1400,28 +1408,13 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         return key;
     };
 
-    /* Event handler function after popover is closed */
-    handlePopoverClose = isVisible => {
-        const { filterTreeNode, searchAutoFocus, searchPosition } = this.props;
-        // 将 inputValue 清空，如果有选中值的话，选中项能够快速回显
-        // Clear the inputValue. If there is a selected value, the selected item can be quickly echoed.
-        if (isVisible === false && filterTreeNode) {
-            this.foundation.clearInputValue();
-        }
-        if (filterTreeNode && searchPosition === strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
-            this.foundation.focusInput(true);
-        }
+    /* Event handler function after popover visible change */
+    handlePopoverVisibleChange = isVisible => {
+        this.foundation.handlePopoverVisibleChange(isVisible);
     }
 
     afterClose = () => {
-        // flattenNode 的变化将导致弹出层面板中的选项数目变化
-        // 在弹层完全收起之后，再通过 clearInput 重新计算 state 中的 expandedKey， flattenNode
-        // 防止在弹出层未收起时弹层面板中选项数目变化导致视觉上出现弹层闪动问题
-        // Changes to flattenNode will cause the number of options in the popup panel to change
-        // After the pop-up layer is completely closed, recalculate the expandedKey and flattenNode in the state through clearInput.
-        // Prevent the pop-up layer from flickering visually due to changes in the number of options in the pop-up panel when the pop-up layer is not collapsed.
-        const { filterTreeNode } = this.props;
-        filterTreeNode && this.foundation.clearInput();
+        this.foundation.handleAfterClose();
     }
 
     renderTreeNode = (treeNode: FlattenNode, ind: number, style: React.CSSProperties) => {
@@ -1605,7 +1598,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 autoAdjustOverflow={autoAdjustOverflow}
                 mouseLeaveDelay={mouseLeaveDelay}
                 mouseEnterDelay={mouseEnterDelay}
-                onVisibleChange={this.handlePopoverClose}
+                onVisibleChange={this.handlePopoverVisibleChange}
                 afterClose={this.afterClose}
             >
                 {selection}

packages/semi-ui/upload/_story/upload.stories.jsx

@@ -1,7 +1,7 @@
 /* argus-disable unPkgSensitiveInfo */
 import React, { useState } from 'react';
 import FileCard from '../fileCard';
-import { Button, Upload, Toast, Tag } from '@douyinfe/semi-ui/index';
+import { Button, Upload, Toast, Tag, Switch } from '@douyinfe/semi-ui/index';
 import { withField, Form } from '../../form/index';
 import { IconPlus, IconFile, IconUpload, IconEyeOpened, IconDownload, IconDelete } from '@douyinfe/semi-icons';
 
@@ -1252,10 +1252,12 @@ PreviewFallback.story = {
 
 
 export const PastingDemo = () => {
+  const [addOnPasting, switchAddOnPasting] = useState(true);
+
   return (
     <div style={{ width: 800, height: 500 }}>
       <Upload
-        addOnPasting
+        addOnPasting={addOnPasting}
         action={action}
         // {...commonProps}
         onChange={(e) => console.log(e)}
@@ -1271,6 +1273,12 @@ export const PastingDemo = () => {
           .then(() => alert('clear'))
           .catch(error => console.log(error))
       }}>清空clipboard</Button>
+      <Switch
+        checked={addOnPasting}
+        onChange={e => switchAddOnPasting(e)}
+      >
+
+      </Switch>
     </div>
 
   )

packages/semi-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-webpack-plugin",
-    "version": "2.56.0",
+    "version": "2.56.3",
     "description": "",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",

sitemap.xml

@@ -2,22 +2,22 @@
 <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
         <loc>https://juejin.cn/post/7267418854124699702</loc>
-        <lastmod>2024-04-12T09:40:47.946Z</lastmod>
+        <lastmod>2024-04-19T07:00:38.526Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://medium.com/front-end-weekly/how-we-test-semi-design-component-libraries-64b854f63b65</loc>
-        <lastmod>2024-04-12T09:40:47.627Z</lastmod>
+        <lastmod>2024-04-19T07:00:38.417Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://mp.weixin.qq.com/s/noHoWRuA25PgqFNcurhIUA</loc>
-        <lastmod>2024-04-12T09:40:50.450Z</lastmod>
+        <lastmod>2024-04-19T07:00:40.383Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://mp.weixin.qq.com/s/O3js-SZDNPEOjGxh-aAkbw</loc>
-        <lastmod>2024-04-12T09:40:50.428Z</lastmod>
+        <lastmod>2024-04-19T07:00:50.841Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
@@ -526,7 +526,7 @@
     </url>
     <url>
         <loc>https://semi.design/design/zh-CN/navigation/tree</loc>
-        <lastmod>2024-03-18T12:30:44.749Z</lastmod>
+        <lastmod>2024-04-17T09:31:24.104Z</lastmod>
         <changefreq>weekly</changefreq>
         <scm>1.0.0.133</scm>
     </url>
@@ -562,9 +562,9 @@
     </url>
     <url>
         <loc>https://semi.design/design/zh-CN/show/descriptions</loc>
-        <lastmod>2024-04-12T09:40:54.482Z</lastmod>
+        <lastmod>2024-04-16T06:49:59.191Z</lastmod>
         <changefreq>weekly</changefreq>
-        <scm>1.0.0.130</scm>
+        <scm>1.0.0.133</scm>
     </url>
     <url>
         <loc>https://semi.design/design/zh-CN/show/dropdown</loc>
@@ -646,9 +646,9 @@
     </url>
     <url>
         <loc>https://semi.design/design/zh-CN/visual/iconography</loc>
-        <lastmod>2024-04-03T07:36:20.461Z</lastmod>
+        <lastmod>2024-04-16T06:49:59.841Z</lastmod>
         <changefreq>weekly</changefreq>
-        <scm>1.0.0.130</scm>
+        <scm>1.0.0.133</scm>
     </url>
     <url>
         <loc>https://semi.design/design/zh-CN/visual/layout</loc>
@@ -784,83 +784,83 @@
     </url>
     <url>
         <loc>https://semi.design/dsm/landing</loc>
-        <lastmod>2024-03-29T06:27:45.272Z</lastmod>
+        <lastmod>2024-04-19T07:00:44.167Z</lastmod>
         <changefreq>weekly</changefreq>
-        <scm>1.0.0.169</scm>
+        <scm>1.0.0.172</scm>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/divider</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/grid</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/icon</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/layout</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/space</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/tokens</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/typography</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/banner</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/notification</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/popconfirm</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/progress</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/skeleton</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/spin</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/toast</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/autocomplete</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
@@ -870,362 +870,362 @@
     </url>
     <url>
         <loc>https://semi.design/en-US/input/cascader</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/checkbox</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/datepicker</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/form</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/input</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/inputnumber</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/radio</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/rating</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/select</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/slider</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/switch</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/taginput</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/timepicker</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/transfer</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/treeselect</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/upload</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/anchor</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/backtop</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/breadcrumb</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/navigation</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/pagination</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/steps</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/tabs</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/tree</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/other/configprovider</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/other/locale</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/avatar</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/badge</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/calendar</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/card</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/carousel</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/collapse</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/collapsible</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/descriptions</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/dropdown</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/empty</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/highlight</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/image</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/list</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/modal</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/overflowlist</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/popover</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/scrolllist</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/sidesheet</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/table</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/tag</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/timeline</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/tooltip</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/accessibility</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/changelog</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/customize-theme</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/dark-mode</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/faq</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/getting-started</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/introduction</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/overview</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/update-to-v2</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/divider</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/grid</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/icon</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/layout</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/space</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/tokens</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/typography</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/banner</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/notification</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/popconfirm</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/progress</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/skeleton</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/spin</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/toast</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/autocomplete</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
@@ -1235,287 +1235,287 @@
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/cascader</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/checkbox</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/datepicker</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/form</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/input</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/inputnumber</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/radio</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/rating</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/select</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/slider</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/switch</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/taginput</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/timepicker</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/transfer</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/treeselect</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/upload</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/anchor</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/backtop</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/breadcrumb</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/navigation</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/pagination</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/steps</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/tabs</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/tree</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/other/configprovider</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/other/locale</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/avatar</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/badge</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/calendar</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/card</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/carousel</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/collapse</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/collapsible</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/descriptions</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/dropdown</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/empty</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/highlight</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/image</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/list</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/modal</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/overflowlist</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/popover</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/scrolllist</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/sidesheet</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/table</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/tag</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/timeline</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/tooltip</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/accessibility</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/changelog</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/customize-theme</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/dark-mode</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/faq</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/getting-started</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/introduction</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/overview</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/update-to-v2</loc>
-        <lastmod>2024-04-12T09:38:00.000Z</lastmod>
+        <lastmod>2024-04-19T06:51:06.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
 </urlset>

src/components/ChartContact/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const ChartContact = (props) => {
+    return <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <img src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/contact_wechat.jpeg'} style={{ width: 250, height: 250 }}/>
+            <span>{props.name1}</span>
+        </span>
+        <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <img src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/contact_lark.jpeg'} style={{ width: 250, height: 250 }}/>
+            <span>{props.name2}</span>
+        </span>
+    </div>;};
+
+export default ChartContact;

src/components/DesignToken/index.tsx

@@ -9,7 +9,8 @@ interface Props {
     isColorPalette?: boolean;
     reg?: RegExp;
     isAnimation?: boolean;
-    hasTab?: boolean
+    hasTab?: boolean;
+    sameWidth?: boolean
 }
 
 interface Token {
@@ -60,7 +61,7 @@ const JumpLink = ({ value, availableKeySet }: { value: string; availableKeySet:
     }
 };
 
-const TokenTable = ({ tokenList, designToken, currentTab, mode = 'light' }: { mode?: 'light' | 'dark'; tokenList: TokenMayWithColor[]; designToken: DesignToken; currentTab?: string }): React.ReactElement => {
+const TokenTable = ({ tokenList, designToken, currentTab, mode = 'light', sameWidth }: { mode?: 'light' | 'dark'; tokenList: TokenMayWithColor[]; designToken: DesignToken; currentTab?: string; sameWidth?: boolean }): React.ReactElement => {
     const intl = useIntl();
     const globalTokenJumpAvailableSet = useMemo(() => {
         const global = designToken?.global;
@@ -87,16 +88,19 @@ const TokenTable = ({ tokenList, designToken, currentTab, mode = 'light' }: { mo
                     return <div data-token={lodash.trim(text, '$')} style={{ fontWeight: 600 }}>{text}</div>;
                 }
 
-            }
+            },
+            width: sameWidth ? '33%': 'undefined'
         },
         {
             title: intl.formatMessage({ id: 'designToken.defaultValue' }),
             dataIndex: 'value',
-            render: (text: string): React.ReactElement => <JumpLink availableKeySet={globalTokenJumpAvailableSet} value={text} />
+            render: (text: string): React.ReactElement => <JumpLink availableKeySet={globalTokenJumpAvailableSet} value={text} />,
+            width: sameWidth ? '33%': 'undefined'
         },
         {
             title: intl.formatMessage({ id: 'designToken.usage' }),
             dataIndex: 'comment',
+            width: sameWidth ? '33%': 'undefined',
             render: (text: string): React.ReactElement =>
                 <div>{text || intl.formatMessage({ id: 'designToken.WIP' })}</div>
         },
@@ -129,7 +133,7 @@ const TokenTab = ({ designToken, componentName }: { designToken: DesignToken; co
     );
 };
 
-const GlobalTokenTab = ({ designToken, isColorPalette = false, reg, hasTab: hasTabInProps = true }: { designToken: DesignToken; isColorPalette?: boolean; reg: RegExp; hasTab?: boolean }): React.ReactElement => {
+const GlobalTokenTab = ({ designToken, isColorPalette = false, reg, hasTab: hasTabInProps = true, sameWidth }: { designToken: DesignToken; isColorPalette?: boolean; reg: RegExp; hasTab?: boolean; sameWidth?: boolean }): React.ReactElement => {
     const { global, palette, normal } = designToken.global;
     const [currentTab, setCurrentTab] = useState<'light' | 'dark'>('light');
     const [hasTab, setHasTab] = useState(true);
@@ -155,7 +159,7 @@ const GlobalTokenTab = ({ designToken, isColorPalette = false, reg, hasTab: hasT
         <>
             {hasTab && hasTabInProps? (
                 <Tabs defaultActiveKey={'light'} tabList={[{ tab: 'Light', itemKey: 'light' }, { tab: 'Dark', itemKey: 'dark' }]} onChange={(key: typeof currentTab): void => setCurrentTab(key)}>
-                    <TokenTable designToken={designToken} tokenList={tokenList} mode={currentTab} />
+                    <TokenTable designToken={designToken} tokenList={tokenList} mode={currentTab} sameWidth={sameWidth}/>
                 </Tabs>
             ) : <TokenTable designToken={designToken} tokenList={tokenList} mode={currentTab} />}
         </>
@@ -229,7 +233,7 @@ const DesignToken = (props: Props): React.ReactElement => {
     return (
         <div>
             {designToken && componentName && !props.isAnimation && (props.componentName === 'global' ?
-                <GlobalTokenTab designToken={designToken} reg={props.reg} isColorPalette={props.isColorPalette} hasTab={props?.hasTab}/> :
+                <GlobalTokenTab designToken={designToken} reg={props.reg} isColorPalette={props.isColorPalette} hasTab={props?.hasTab} sameWidth={props?.sameWidth}/> :
                 <TokenTab designToken={designToken} componentName={componentName} />)}
 
             {

src/components/PageAnchor/index.jsx

@@ -31,7 +31,10 @@ const PageAnchor = props => {
             }
             if (Array.isArray(anchorItem.items) && anchorItem.items.length > 0) {
                 if (['Voice and Tone', '语法', 'Grammar and Mechanics',
-                    'Installing and Using VChart', '安装和使用 VChart'].includes(anchorItem.title)) {
+                    'Installation and Usage', '安装和使用',
+                    'Common Chart Types Examples', '常用图表类型示例', 
+                    '设计规范', 'Design Guidelines'
+                ].includes(anchorItem.title)) {
                     anchorList.push(<Anchor.Link
                         href={`#${makeAnchorId(anchorItem.title)}`}
                         title={anchorItem.title}
@@ -39,7 +42,7 @@ const PageAnchor = props => {
                     > 
                         {makeAnchor(anchorItem.items)}
                     </Anchor.Link>);
-                } else if (['与其他方案的差异', 'Comparisons', '配置 VChart 主题', 'Configuring VChart Theme'].includes(anchorItem.title)) {
+                } else if (['与其他方案的差异', 'Comparisons'].includes(anchorItem.title)) {
                     anchorList.push(<Anchor.Link
                         href={`#${makeAnchorId(anchorItem.title)}`}
                         title={anchorItem.title}

src/components/VChartDemo/data/area.js

@@ -1,65 +0,0 @@
-export default {
-    title: 'Area Chart',
-    titleZh: "面积图",
-    spec: {
-        type: 'area',
-        data: {
-            values: [
-                { type: 'Nail polish', country: 'Africa', value: 4229 },
-                { type: 'Nail polish', country: 'EU', value: 4376 },
-                { type: 'Nail polish', country: 'China', value: 3054 },
-                { type: 'Nail polish', country: 'USA', value: 12814 },
-                { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
-                { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
-                { type: 'Eyebrow pencil', country: 'China', value: 5067 },
-                { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
-                { type: 'Rouge', country: 'Africa', value: 5221 },
-                { type: 'Rouge', country: 'EU', value: 3574 },
-                { type: 'Rouge', country: 'China', value: 7004 },
-                { type: 'Rouge', country: 'USA', value: 11624 },
-                { type: 'Lipstick', country: 'Africa', value: 9256 },
-                { type: 'Lipstick', country: 'EU', value: 4376 },
-                { type: 'Lipstick', country: 'China', value: 9054 },
-                { type: 'Lipstick', country: 'USA', value: 8814 },
-                { type: 'Eyeshadows', country: 'Africa', value: 3308 },
-                { type: 'Eyeshadows', country: 'EU', value: 4572 },
-                { type: 'Eyeshadows', country: 'China', value: 12043 },
-                { type: 'Eyeshadows', country: 'USA', value: 12998 },
-                { type: 'Eyeliner', country: 'Africa', value: 5432 },
-                { type: 'Eyeliner', country: 'EU', value: 3417 },
-                { type: 'Eyeliner', country: 'China', value: 15067 },
-                { type: 'Eyeliner', country: 'USA', value: 12321 },
-                { type: 'Foundation', country: 'Africa', value: 13701 },
-                { type: 'Foundation', country: 'EU', value: 5231 },
-                { type: 'Foundation', country: 'China', value: 10119 },
-                { type: 'Foundation', country: 'USA', value: 10342 },
-                { type: 'Lip gloss', country: 'Africa', value: 4008 },
-                { type: 'Lip gloss', country: 'EU', value: 4572 },
-                { type: 'Lip gloss', country: 'China', value: 12043 },
-                { type: 'Lip gloss', country: 'USA', value: 22998 },
-                { type: 'Mascara', country: 'Africa', value: 18712 },
-                { type: 'Mascara', country: 'EU', value: 6134 },
-                { type: 'Mascara', country: 'China', value: 10419 },
-                { type: 'Mascara', country: 'USA', value: 11261 }
-            ]
-        },
-        title: {
-            visible: true,
-            text: 'Stacked area chart of cosmetic products sales',
-            subtext: 'Stacked area chart of cosmetic products sales'
-        },
-        // stack: true,
-        xField: 'type',
-        yField: 'value',
-        seriesField: 'country',
-        legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
-        crosshair: {
-            xField: { visible: true, label: { visible: true } },
-            yField: { visible: true, label: { visible: true } }
-        },
-        axes: [
-            { type: 'band', orient: 'bottom', title: { visible: true } },
-            { type: 'linear', orient: 'left', title: { visible: true } }
-        ]
-    }
-};

src/components/VChartDemo/data/bar.js

@@ -1,49 +0,0 @@
-export default {
-    title: 'Bar Chart',
-    titleZh: "条形图",
-    spec: {
-        type: 'bar',
-        direction: 'horizontal',
-        data: [
-            {
-                id: 'barData',
-                values: [
-                    { type: 'Autocracies', year: '1930', value: 129 },
-                    { type: 'Autocracies', year: '1940', value: 133 },
-                    { type: 'Autocracies', year: '1950', value: 130 },
-                    { type: 'Autocracies', year: '1960', value: 126 },
-                    { type: 'Autocracies', year: '1970', value: 117 },
-                    { type: 'Autocracies', year: '1980', value: 114 },
-                    { type: 'Autocracies', year: '1990', value: 111 },
-                    { type: 'Autocracies', year: '2000', value: 89 },
-                    { type: 'Autocracies', year: '2010', value: 80 },
-                    { type: 'Autocracies', year: '2018', value: 80 },
-                    { type: 'Democracies', year: '1930', value: 22 },
-                    { type: 'Democracies', year: '1940', value: 13 },
-                    { type: 'Democracies', year: '1950', value: 25 },
-                    { type: 'Democracies', year: '1960', value: 29 },
-                    { type: 'Democracies', year: '1970', value: 38 },
-                    { type: 'Democracies', year: '1980', value: 41 },
-                    { type: 'Democracies', year: '1990', value: 57 },
-                    { type: 'Democracies', year: '2000', value: 87 },
-                    { type: 'Democracies', year: '2010', value: 98 },
-                    { type: 'Democracies', year: '2018', value: 99 }
-                ]
-            }
-        ],
-        yField: ['year', 'type'],
-        xField: 'value',
-        seriesField: 'type',
-        label: {
-            visible: true
-        },
-        legends: {
-            visible: true,
-            orient: 'right'
-        },
-        scrollBar: {
-            start: 0,
-            end: 0.5
-        }
-    }
-};

src/components/VChartDemo/data/column.js

@@ -1,99 +0,0 @@
-export default {
-    title: 'Bar Chart',
-    titleZh: "柱状图",
-    spec: {
-        type: 'bar',
-        data: [
-            {
-                id: 'barData',
-                values: [
-                    {
-                        State: 'WY',
-                        Age: 'Under 5 Years',
-                        Population: 25635
-                    },
-                    {
-                        State: 'WY',
-                        Age: '5 to 13 Years',
-                        Population: 1890
-                    },
-                    {
-                        State: 'WY',
-                        Age: '14 to 17 Years',
-                        Population: 9314
-                    },
-                    {
-                        State: 'DC',
-                        Age: 'Under 5 Years',
-                        Population: 30352
-                    },
-                    {
-                        State: 'DC',
-                        Age: '5 to 13 Years',
-                        Population: 20439
-                    },
-                    {
-                        State: 'DC',
-                        Age: '14 to 17 Years',
-                        Population: 10225
-                    },
-                    {
-                        State: 'VT',
-                        Age: 'Under 5 Years',
-                        Population: 38253
-                    },
-                    {
-                        State: 'VT',
-                        Age: '5 to 13 Years',
-                        Population: 42538
-                    },
-                    {
-                        State: 'VT',
-                        Age: '14 to 17 Years',
-                        Population: 15757
-                    },
-                    {
-                        State: 'ND',
-                        Age: 'Under 5 Years',
-                        Population: 51896
-                    },
-                    {
-                        State: 'ND',
-                        Age: '5 to 13 Years',
-                        Population: 67358
-                    },
-                    {
-                        State: 'ND',
-                        Age: '14 to 17 Years',
-                        Population: 18794
-                    },
-                    {
-                        State: 'AK',
-                        Age: 'Under 5 Years',
-                        Population: 72083
-                    },
-                    {
-                        State: 'AK',
-                        Age: '5 to 13 Years',
-                        Population: 85640
-                    },
-                    {
-                        State: 'AK',
-                        Age: '14 to 17 Years',
-                        Population: 22153
-                    }
-                ]
-            }
-        ],
-        xField: 'State',
-        yField: 'Population',
-        seriesField: 'Age',
-        stack: true,
-        legends: {
-            visible: true
-        },
-        dataZoom: {
-            orient: 'bottom'
-        }
-    }
-};

src/components/VChartDemo/data/funnel.js

@@ -1,52 +0,0 @@
-export default {
-    title: 'Funnel Chart',
-    titleZh: "漏斗图",
-    spec: {
-        type: 'funnel',
-        categoryField: 'name',
-        valueField: 'value',
-        isTransform: true,
-        isCone: false,
-        data: [
-            {
-                id: 'funnel',
-                values: [
-                    {
-                        value: 5676,
-                        name: 'Sent'
-                    },
-                    {
-                        value: 3872,
-                        name: 'Viewed'
-                    },
-                    {
-                        value: 1668,
-                        name: 'Clicked'
-                    },
-                    {
-                        value: 610,
-                        name: 'Add to Cart'
-                    },
-                    {
-                        value: 565,
-                        name: 'Purchased'
-                    }
-                ]
-            }
-        ],
-        label: {
-            visible: true
-        },
-        transformLabel: {
-            visible: true
-        },
-        outerLabel: {
-            position: 'right',
-            visible: true
-        },
-        legends: {
-            visible: true,
-            orient: 'top'
-        }
-    }
-};

src/components/VChartDemo/data/gauge.js

@@ -1,89 +0,0 @@
-export default {
-    title: "Gauge Chart",
-    titleZh: "仪表图",
-    spec: {
-        type: "gauge",
-        data: [
-            {
-                id: "pointer",
-                values: [
-                    {
-                        type: "A",
-                        value: 0.6,
-                    },
-                ],
-            },
-            {
-                id: "segment",
-                values: [
-                    {
-                        type: "Level 1",
-                        value: 0.4,
-                    },
-                    {
-                        type: "Level 2",
-                        value: 0.6,
-                    },
-                    {
-                        type: "Level 3",
-                        value: 0.8,
-                    },
-                ],
-            },
-        ],
-        gauge: {
-            type: "gauge",
-            dataIndex: 1,
-            categoryField: "type",
-            valueField: "value",
-            seriesField: "type",
-            label: {
-                visible: true,
-                position: "inside-outer",
-                offsetRadius: 10,
-                style: {
-                    text: (datum) => datum["type"],
-                },
-            },
-        },
-        pointer: {
-            style: {
-                fill: "#666666",
-            },
-        },
-        categoryField: "type",
-        valueField: "value",
-        outerRadius: 0.9,
-        innerRadius: 0.6,
-        startAngle: -225,
-        endAngle: 45,
-        axes: [
-            {
-                type: "linear",
-                orient: "angle",
-                inside: true,
-                outerRadius: 0.9,
-                innerRadius: 0.6,
-                grid: { visible: false },
-            },
-        ],
-        indicator: [
-            {
-                visible: true,
-                offsetY: "65%",
-                title: {
-                    style: {
-                        text: "60%",
-                    },
-                },
-                content: [
-                    {
-                        style: {
-                            text: "Level 2",
-                        },
-                    },
-                ],
-            },
-        ],
-    },
-};

src/components/VChartDemo/data/heatmap.js

@@ -1,111 +0,0 @@
-const items = [
-    'Asset Liability Ratio',
-    'Asset Liability Ratio (Deducting Advance Payments)',
-    'Debt-to-long Capital Ratio',
-    'Long Term Asset Suitability Ratio',
-    'Equity Multiplier',
-    'Equity Ratio of Current Liability',
-    'Interest Bearing Debt / Fully Invested Capital',
-    'Current Liability / Total Liabilities',
-    'Capital Fixation Ratio',
-    'Expected Default Frequency'
-];
-const rawData = [
-    1.0, 0.594527, 0.492963, -0.160995, 0.723664, 0.658646, -0.857474, 0.320706, -0.284634, -0.091423, 0.594527, 1.0,
-    0.724546, -0.099318, 0.540639, 0.49214, -0.554039, 0.17127, -0.265259, 0.068577, 0.492963, 0.724546, 1.0, -0.091338,
-    0.450542, 0.375839, -0.524955, 0.300627, -0.198362, 0.033209, -0.160995, -0.099318, -0.091338, 1.0, -0.049872,
-    -0.028452, 0.157157, 0.009742, -0.162374, 0.155095, 0.723664, 0.540639, 0.450542, -0.049872, 1.0, 0.951933, -0.651767,
-    0.079052, -0.535984, 0.00798, 0.658646, 0.49214, 0.375839, -0.028452, 0.951933, 1.0, -0.543147, -0.106139, -0.52232,
-    0.011466, -0.857474, -0.554039, -0.524955, 0.157157, -0.651767, -0.543147, 1.0, -0.595016, 0.310521, 0.066397,
-    0.320706, 0.17127, 0.300627, 0.009742, 0.079052, -0.106139, -0.595016, 1.0, -0.105199, -0.064886, -0.284634,
-    -0.265259, -0.198362, -0.162374, -0.535984, -0.52232, 0.310521, -0.105199, 1.0, -0.080153, -0.091423, 0.068577,
-    0.033209, 0.155095, 0.00798, 0.011466, 0.066397, -0.064886, -0.080153, 1.0
-];
-const data = [];
-for (let i = 0; i < items.length; i++) {
-    for (let j = 0; j < items.length; j++) {
-        data.push({
-            var1: items[i],
-            var2: items[j],
-            value: rawData[i * items.length + j]
-        });
-    }
-}
-
-const spec = {
-    type: 'heatmap',
-    data: [
-        {
-            id: 'data0',
-            values: data
-        }
-    ],
-    xField: 'var1',
-    yField: 'var2',
-    valueField: 'value',
-    cell: {
-        style: {
-            fill: {
-                field: 'value',
-                scale: 'color'
-            }
-        }
-    },
-    color: {
-        type: 'linear',
-        domain: [
-            {
-                dataId: 'data0',
-                fields: ['value']
-            }
-        ],
-        range: ['#07A35A', '#ffffff', '#E33232']
-    },
-    axes: [
-        {
-            orient: 'bottom',
-            type: 'band',
-            grid: {
-                visible: false
-            },
-            domainLine: {
-                visible: false
-            },
-            label: {
-                visible: false
-            },
-            tick: {
-                visible: false
-            },
-            bandPadding: 0
-        },
-        {
-            orient: 'left',
-            type: 'band',
-            grid: {
-                visible: false
-            },
-            domainLine: {
-                visible: false
-            },
-            bandPadding: 0
-        }
-    ],
-    legends: {
-        visible: true,
-        orient: 'right',
-        position: 'start',
-        type: 'color',
-        field: 'value'
-    },
-    title: {
-        visible: true,
-        text: `Correlation Coefficient`
-    }
-};
-
-export default {
-    title: 'Heatmap Chart',
-    titleZh: "热力图",
-    spec
-};

src/components/VChartDemo/data/index.js

@@ -1,29 +0,0 @@
-import area from "./area";
-import column from "./column";
-import pie from "./pie";
-import bar from "./bar";
-import rose from "./rose";
-import radar from "./radar";
-import scatter from "./scatter";
-import heatmap from "./heatmap";
-import markArea from "./mark-area";
-import markLine from "./mark-line";
-import markPoint from "./mark-point";
-import gauge from "./gauge";
-import funnel from "./funnel";
-
-export const charts = [
-    area,
-    column,
-    pie,
-    bar,
-    rose,
-    radar,
-    scatter,
-    // heatmap,
-    gauge,
-    funnel,
-    markArea,
-    markLine,
-    markPoint
-];

src/components/VChartDemo/data/mark-area.js

@@ -1,200 +0,0 @@
-export default {
-    title: 'Mark Area',
-    titleZh: "数据标注区域",
-    spec: {
-        type: 'line',
-        xField: 'Date',
-        yField: 'Price',
-        point: {
-            visible: false // disable point
-        },
-        axes: [
-            {
-                orient: 'left',
-                min: 0.12,
-                max: 0.18,
-                tick: {
-                    visible: false
-                },
-                domainLine: {
-                    visible: false
-                },
-                label: {
-                    // format tick label, the last label add unit
-                    formatMethod: (value, datum) => {
-                        if (value === 0.18) {
-                            return `$${value}`;
-                        }
-                        return value;
-                    }
-                }
-            }, // configure y-axis 配置 y 轴
-            {
-                orient: 'bottom',
-                label: {
-                    formatMethod: (value, datum) => {
-                        if (value.startsWith('Jan-')) {
-                            return `20${value.split('-')[1]}`;
-                        }
-
-                        return '';
-                    }
-                }
-            }
-        ],
-        markArea: [
-            {
-                coordinates: [
-                    {
-                        Date: 'Jan-20',
-                        Price: 0.18
-                    },
-                    {
-                        Date: 'Mar-23',
-                        Price: 0.18
-                    },
-                    {
-                        Date: 'Mar-23',
-                        Price: 0.12
-                    },
-                    {
-                        Date: 'Jan-20',
-                        Price: 0.12
-                    }
-                ],
-                label: {
-                    text: ['Electricite prices', 'have surged since 2020'],
-                    position: 'insideTop'
-                }
-            }
-        ],
-        data: {
-            id: 'data',
-            values: [
-                { Date: 'Jan-13', Price: 0.129 },
-                { Date: 'Feb-13', Price: 0.129 },
-                { Date: 'Mar-13', Price: 0.128 },
-                { Date: 'Apr-13', Price: 0.128 },
-                { Date: 'May-13', Price: 0.131 },
-                { Date: 'Jun-13', Price: 0.137 },
-                { Date: 'Jul-13', Price: 0.137 },
-                { Date: 'Aug-13', Price: 0.137 },
-                { Date: 'Sep-13', Price: 0.137 },
-                { Date: 'Oct-13', Price: 0.132 },
-                { Date: 'Nov-13', Price: 0.13 },
-                { Date: 'Dec-13', Price: 0.131 },
-                { Date: 'Jan-14', Price: 0.134 },
-                { Date: 'Feb-14', Price: 0.134 },
-                { Date: 'Mar-14', Price: 0.135 },
-                { Date: 'Apr-14', Price: 0.131 },
-                { Date: 'May-14', Price: 0.136 },
-                { Date: 'Jun-14', Price: 0.143 },
-                { Date: 'Jul-14', Price: 0.143 },
-                { Date: 'Aug-14', Price: 0.143 },
-                { Date: 'Sep-14', Price: 0.141 },
-                { Date: 'Oct-14', Price: 0.136 },
-                { Date: 'Nov-14', Price: 0.134 },
-                { Date: 'Dec-14', Price: 0.135 },
-                { Date: 'Jan-15', Price: 0.138 },
-                { Date: 'Feb-15', Price: 0.138 },
-                { Date: 'Mar-15', Price: 0.136 },
-                { Date: 'Apr-15', Price: 0.137 },
-                { Date: 'May-15', Price: 0.137 },
-                { Date: 'Jun-15', Price: 0.143 },
-                { Date: 'Jul-15', Price: 0.142 },
-                { Date: 'Aug-15', Price: 0.142 },
-                { Date: 'Sep-15', Price: 0.141 },
-                { Date: 'Oct-15', Price: 0.136 },
-                { Date: 'Nov-15', Price: 0.134 },
-                { Date: 'Dec-15', Price: 0.133 },
-                { Date: 'Jan-16', Price: 0.134 },
-                { Date: 'Feb-16', Price: 0.134 },
-                { Date: 'Mar-16', Price: 0.134 },
-                { Date: 'Apr-16', Price: 0.134 },
-                { Date: 'May-16', Price: 0.133 },
-                { Date: 'Jun-16', Price: 0.138 },
-                { Date: 'Jul-16', Price: 0.139 },
-                { Date: 'Aug-16', Price: 0.139 },
-                { Date: 'Sep-16', Price: 0.139 },
-                { Date: 'Oct-16', Price: 0.134 },
-                { Date: 'Nov-16', Price: 0.131 },
-                { Date: 'Dec-16', Price: 0.133 },
-                { Date: 'Jan-17', Price: 0.134 },
-                { Date: 'Feb-17', Price: 0.135 },
-                { Date: 'Mar-17', Price: 0.134 },
-                { Date: 'Apr-17', Price: 0.135 },
-                { Date: 'May-17', Price: 0.137 },
-                { Date: 'Jun-17', Price: 0.142 },
-                { Date: 'Jul-17', Price: 0.143 },
-                { Date: 'Aug-17', Price: 0.142 },
-                { Date: 'Sep-17', Price: 0.142 },
-                { Date: 'Oct-17', Price: 0.137 },
-                { Date: 'Nov-17', Price: 0.136 },
-                { Date: 'Dec-17', Price: 0.136 },
-                { Date: 'Jan-18', Price: 0.135 },
-                { Date: 'Feb-18', Price: 0.135 },
-                { Date: 'Mar-18', Price: 0.135 },
-                { Date: 'Apr-18', Price: 0.134 },
-                { Date: 'May-18', Price: 0.136 },
-                { Date: 'Jun-18', Price: 0.139 },
-                { Date: 'Jul-18', Price: 0.139 },
-                { Date: 'Aug-18', Price: 0.139 },
-                { Date: 'Sep-18', Price: 0.138 },
-                { Date: 'Oct-18', Price: 0.136 },
-                { Date: 'Nov-18', Price: 0.134 },
-                { Date: 'Dec-18', Price: 0.135 },
-                { Date: 'Jan-19', Price: 0.135 },
-                { Date: 'Feb-19', Price: 0.136 },
-                { Date: 'Mar-19', Price: 0.135 },
-                { Date: 'Apr-19', Price: 0.135 },
-                { Date: 'May-19', Price: 0.136 },
-                { Date: 'Jun-19', Price: 0.139 },
-                { Date: 'Jul-19', Price: 0.14 },
-                { Date: 'Aug-19', Price: 0.139 },
-                { Date: 'Sep-19', Price: 0.139 },
-                { Date: 'Oct-19', Price: 0.136 },
-                { Date: 'Nov-19', Price: 0.133 },
-                { Date: 'Dec-19', Price: 0.133 },
-                { Date: 'Jan-20', Price: 0.134 },
-                { Date: 'Feb-20', Price: 0.134 },
-                { Date: 'Mar-20', Price: 0.134 },
-                { Date: 'Apr-20', Price: 0.133 },
-                { Date: 'May-20', Price: 0.134 },
-                { Date: 'Jun-20', Price: 0.137 },
-                { Date: 'Jul-20', Price: 0.137 },
-                { Date: 'Aug-20', Price: 0.137 },
-                { Date: 'Sep-20', Price: 0.137 },
-                { Date: 'Oct-20', Price: 0.135 },
-                { Date: 'Nov-20', Price: 0.136 },
-                { Date: 'Dec-20', Price: 0.136 },
-                { Date: 'Jan-21', Price: 0.136 },
-                { Date: 'Feb-21', Price: 0.137 },
-                { Date: 'Mar-21', Price: 0.138 },
-                { Date: 'Apr-21', Price: 0.139 },
-                { Date: 'May-21', Price: 0.14 },
-                { Date: 'Jun-21', Price: 0.142 },
-                { Date: 'Jul-21', Price: 0.143 },
-                { Date: 'Aug-21', Price: 0.144 },
-                { Date: 'Sep-21', Price: 0.144 },
-                { Date: 'Oct-21', Price: 0.142 },
-                { Date: 'Nov-21', Price: 0.142 },
-                { Date: 'Dec-21', Price: 0.142 },
-                { Date: 'Jan-22', Price: 0.147 },
-                { Date: 'Feb-22', Price: 0.148 },
-                { Date: 'Mar-22', Price: 0.15 },
-                { Date: 'Apr-22', Price: 0.151 },
-                { Date: 'May-22', Price: 0.154 },
-                { Date: 'Jun-22', Price: 0.16 },
-                { Date: 'Jul-22', Price: 0.164 },
-                { Date: 'Aug-22', Price: 0.167 },
-                { Date: 'Sep-22', Price: 0.167 },
-                { Date: 'Oct-22', Price: 0.166 },
-                { Date: 'Nov-22', Price: 0.163 },
-                { Date: 'Dec-22', Price: 0.165 },
-                { Date: 'Jan-23', Price: 0.168 },
-                { Date: 'Feb-23', Price: 0.168 },
-                { Date: 'Mar-23', Price: 0.166 }
-            ]
-        }
-    }
-};

src/components/VChartDemo/data/mark-line.js

@@ -1,77 +0,0 @@
-export default {
-    title: 'Mark Line',
-    titleZh: "数据标注线",
-    spec: {
-        type: 'scatter',
-        xField: 'x',
-        yField: 'y',
-        sizeField: 'z',
-        size: {
-            type: 'linear',
-            range: [20, 80]
-        },
-        axes: [
-            { orient: 'bottom', type: 'linear', min: 60, max: 95 },
-            { orient: 'left', type: 'linear', min: 0, max: 200 }
-        ],
-        label: {
-            visible: true,
-            position: 'center',
-            overlap: {
-                avoidBaseMark: false
-            }
-        },
-        markLine: [
-            {
-                x: 65,
-                label: {
-                    visible: true,
-                    position: 'end',
-                    text: 'Safe fat intake 65g/day',
-                    style: {
-                        textAlign: 'left',
-                        textBaseline: 'top',
-                        dx: 15
-                    },
-                    labelBackground: {
-                        style: {
-                            dx: 15
-                        }
-                    }
-                }
-            },
-            {
-                y: 50,
-                label: {
-                    visible: true,
-                    position: 'end',
-                    text: 'Safe sugar intake 50g/day',
-                    style: {
-                        textAlign: 'right',
-                        textBaseline: 'bottom'
-                    }
-                }
-            }
-        ],
-        data: {
-            id: 'data',
-            values: [
-                { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
-                { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
-                { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
-                { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
-                { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
-                { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
-                { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
-                { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
-                { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
-                { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
-                { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
-                { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
-                { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
-                { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
-                { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
-            ]
-        }
-    }
-};

src/components/VChartDemo/data/mark-point.js

@@ -1,772 +0,0 @@
-export default {
-    title: 'Mark Point',
-    titleZh: "数据标注点",
-    spec: {
-        type: 'line',
-        xField: 'year',
-        yField: 'population',
-        axes: [
-            {
-                orient: 'bottom',
-                type: 'linear',
-                min: 1868,
-                max: 2016
-            }
-        ],
-        markPoint: [
-            {
-                coordinate: {
-                    year: '1878',
-                    population: 100
-                },
-                itemContent: {
-                    offsetY: -100,
-                    type: 'text',
-                    autoRotate: false,
-                    text: {
-                        style: {
-                            dx: -50,
-                            dy: -10,
-                            text: ['1878', 'population was 148'],
-                            fill: { type: 'palette', key: 'primaryFontColor' },
-                            textAlign: 'left',
-                            fontSize: 14
-                        }
-                    }
-                },
-                itemLine: {
-                    decorativeLine: {
-                        visible: true
-                    }
-                }
-            },
-            {
-                coordinate: {
-                    year: '2016',
-                    population: 899447
-                },
-                itemContent: {
-                    offsetY: 40,
-                    offsetX: -200,
-                    type: 'text',
-                    autoRotate: false,
-                    position: 'insideBottom',
-                    text: {
-                        style: {
-                            dy: -16,
-                            text: ['2016', 'population was 899447'],
-                            fill: { type: 'palette', key: 'primaryFontColor' },
-                            textAlign: 'right',
-                            fontSize: 14
-                        }
-                    }
-                },
-                itemLine: {
-                    type: 'type-do',
-                    decorativeLine: {
-                        visible: true
-                    }
-                }
-            }
-        ],
-        point: {
-            style: {
-                visible: false
-            }
-        },
-        title: {
-            text: 'Population History - Line Chart'
-        },
-        data: {
-            id: 'data2',
-            values: [
-                {
-                    census_year: true,
-                    year: 2016,
-                    source: 'CoE',
-                    population: 899447
-                },
-                {
-                    census_year: true,
-                    year: 2014,
-                    source: 'CoE',
-                    population: 877926
-                },
-                {
-                    year: 2013,
-                    source: 'CoE 6',
-                    population: 847712
-                },
-                {
-                    census_year: true,
-                    year: 2012,
-                    source: 'CoE',
-                    population: 817498
-                },
-                {
-                    year: 2010,
-                    source: 'CoE 6',
-                    population: 797320
-                },
-                {
-                    census_year: true,
-                    year: 2009,
-                    source: 'CoE',
-                    population: 782439
-                },
-                {
-                    census_year: true,
-                    year: 2008,
-                    source: 'CoE',
-                    population: 752412
-                },
-                {
-                    year: 2007,
-                    source: 'CoE 6',
-                    population: 741392
-                },
-                {
-                    census_year: true,
-                    year: 2005,
-                    source: 'CoE',
-                    population: 712391
-                },
-                {
-                    year: 2004,
-                    source: 'CoE 6',
-                    population: 698631
-                },
-                {
-                    year: 2003,
-                    source: 'CoE 6',
-                    population: 684871
-                },
-                {
-                    year: 2002,
-                    source: 'CoE 6',
-                    population: 671110
-                },
-                {
-                    year: 2000,
-                    source: 'CoE 6',
-                    population: 652817
-                },
-                {
-                    census_year: true,
-                    year: 1999,
-                    source: 'CoE',
-                    population: 648284
-                },
-                {
-                    year: 1998,
-                    source: 'CoE 6',
-                    population: 637625
-                },
-                {
-                    year: 1997,
-                    source: 'CoE 6',
-                    population: 626965
-                },
-                {
-                    year: 1995,
-                    source: 'CoE 6',
-                    population: 619870
-                },
-                {
-                    year: 1994,
-                    source: 'CoE 6',
-                    population: 623435
-                },
-                {
-                    census_year: true,
-                    year: 1993,
-                    source: 'CoE',
-                    population: 626999
-                },
-                {
-                    census_year: true,
-                    year: 1992,
-                    source: 'CoE',
-                    population: 618195
-                },
-                {
-                    census_year: true,
-                    year: 1990,
-                    source: 'CoE',
-                    population: 605538
-                },
-                {
-                    census_year: true,
-                    year: 1989,
-                    source: 'CoE',
-                    population: 583872
-                },
-                {
-                    year: 1988,
-                    source: 'CoE',
-                    population: 580061
-                },
-                {
-                    census_year: true,
-                    year: 1987,
-                    source: 'CoE',
-                    population: 576249
-                },
-                {
-                    year: 1985,
-                    source: 'CoE 6',
-                    population: 567699
-                },
-                {
-                    year: 1984,
-                    source: 'CoE 6',
-                    population: 563892
-                },
-                {
-                    census_year: true,
-                    year: 1983,
-                    source: 'CoE',
-                    population: 560085
-                },
-                {
-                    census_year: true,
-                    year: 1982,
-                    source: 'CoE 1',
-                    population: 551314
-                },
-                {
-                    census_year: true,
-                    year: 1980,
-                    source: 'CoE',
-                    population: 505773
-                },
-                {
-                    census_year: true,
-                    year: 1979,
-                    source: 'CoE',
-                    population: 491359
-                },
-                {
-                    census_year: true,
-                    year: 1978,
-                    source: 'CoE',
-                    population: 478066
-                },
-                {
-                    census_year: true,
-                    year: 1977,
-                    source: 'CoE',
-                    population: 471474
-                },
-                {
-                    census_year: true,
-                    year: 1975,
-                    source: 'CoE',
-                    population: 451635
-                },
-                {
-                    census_year: true,
-                    year: 1974,
-                    source: 'CoE',
-                    population: 445691
-                },
-                {
-                    census_year: true,
-                    year: 1973,
-                    source: 'CoE',
-                    population: 442365
-                },
-                {
-                    census_year: true,
-                    year: 1972,
-                    source: 'CoE',
-                    population: 441530
-                },
-                {
-                    census_year: true,
-                    year: 1970,
-                    source: 'CoE',
-                    population: 429750
-                },
-                {
-                    census_year: true,
-                    year: 1969,
-                    source: 'CoE',
-                    population: 422418
-                },
-                {
-                    census_year: true,
-                    year: 1968,
-                    source: 'CoE',
-                    population: 410105
-                },
-                {
-                    census_year: true,
-                    year: 1967,
-                    source: 'CoE',
-                    population: 393593
-                },
-                {
-                    census_year: true,
-                    year: 1965,
-                    source: 'CoE',
-                    population: 371265
-                },
-                {
-                    census_year: true,
-                    year: 1964,
-                    source: 'CoE 2',
-                    population: 311804
-                },
-                {
-                    census_year: true,
-                    year: 1963,
-                    source: 'CoE',
-                    population: 303756
-                },
-                {
-                    census_year: true,
-                    year: 1962,
-                    source: 'CoE',
-                    population: 294967
-                },
-                {
-                    census_year: true,
-                    year: 1960,
-                    source: 'CoE',
-                    population: 269314
-                },
-                {
-                    census_year: true,
-                    year: 1959,
-                    source: 'CoE',
-                    population: 260733
-                },
-                {
-                    census_year: true,
-                    year: 1958,
-                    source: 'CoE',
-                    population: 252131
-                },
-                {
-                    census_year: true,
-                    year: 1957,
-                    source: 'CoE',
-                    population: 238353
-                },
-                {
-                    census_year: true,
-                    year: 1955,
-                    source: 'CoE',
-                    population: 209353
-                },
-                {
-                    census_year: true,
-                    year: 1954,
-                    source: 'CoE',
-                    population: 197836
-                },
-                {
-                    census_year: true,
-                    year: 1953,
-                    source: 'CoE',
-                    population: 183411
-                },
-                {
-                    census_year: true,
-                    year: 1952,
-                    source: 'CoE',
-                    population: 169196
-                },
-                {
-                    census_year: true,
-                    year: 1950,
-                    source: 'CoE',
-                    population: 148861
-                },
-                {
-                    census_year: true,
-                    year: 1949,
-                    source: 'CoE',
-                    population: 137469
-                },
-                {
-                    census_year: true,
-                    year: 1948,
-                    source: 'CoE',
-                    population: 126609
-                },
-                {
-                    census_year: true,
-                    year: 1947,
-                    source: 'CoE',
-                    population: 118541
-                },
-                {
-                    census_year: true,
-                    year: 1946,
-                    source: 'CoE',
-                    population: 114976
-                },
-                {
-                    census_year: true,
-                    year: 1945,
-                    source: 'CoE',
-                    population: 111745
-                },
-                {
-                    census_year: true,
-                    year: 1944,
-                    source: 'CoE',
-                    population: 108416
-                },
-                {
-                    census_year: true,
-                    year: 1943,
-                    source: 'CoE',
-                    population: 105536
-                },
-                {
-                    census_year: true,
-                    year: 1942,
-                    source: 'CoE',
-                    population: 96725
-                },
-                {
-                    census_year: true,
-                    year: 1940,
-                    source: 'CoE',
-                    population: 91723
-                },
-                {
-                    census_year: true,
-                    year: 1939,
-                    source: 'CoE',
-                    population: 90419
-                },
-                {
-                    census_year: true,
-                    year: 1938,
-                    source: 'CoE',
-                    population: 88887
-                },
-                {
-                    census_year: true,
-                    year: 1937,
-                    source: 'CoE',
-                    population: 87034
-                },
-                {
-                    census_year: true,
-                    year: 1936,
-                    source: 'CoE',
-                    population: 85470
-                },
-                {
-                    census_year: true,
-                    year: 1935,
-                    source: 'CoE',
-                    population: 82634
-                },
-                {
-                    census_year: true,
-                    year: 1934,
-                    source: 'CoE',
-                    population: 79773
-                },
-                {
-                    census_year: true,
-                    year: 1933,
-                    source: 'CoE',
-                    population: 79231
-                },
-                {
-                    census_year: true,
-                    year: 1932,
-                    source: 'CoE',
-                    population: 78387
-                },
-                {
-                    census_year: true,
-                    year: 1930,
-                    source: 'CoE',
-                    population: 77557
-                },
-                {
-                    census_year: true,
-                    year: 1929,
-                    source: 'CoE',
-                    population: 74298
-                },
-                {
-                    census_year: true,
-                    year: 1928,
-                    source: 'CoE',
-                    population: 69744
-                },
-                {
-                    census_year: true,
-                    year: 1927,
-                    source: 'CoE',
-                    population: 67083
-                },
-                {
-                    census_year: true,
-                    year: 1926,
-                    source: 'CoE',
-                    population: 65163
-                },
-                {
-                    census_year: true,
-                    year: 1925,
-                    source: 'CoE',
-                    population: 65378
-                },
-                {
-                    census_year: true,
-                    year: 1924,
-                    source: 'CoE',
-                    population: 63160
-                },
-                {
-                    census_year: true,
-                    year: 1923,
-                    source: 'CoE*',
-                    population: 60000
-                },
-                {
-                    census_year: true,
-                    year: 1922,
-                    source: 'CoE*',
-                    population: 60000
-                },
-                {
-                    census_year: true,
-                    year: 1920,
-                    source: 'CoE',
-                    population: 61045
-                },
-                {
-                    census_year: true,
-                    year: 1919,
-                    source: 'CoE*',
-                    population: 60000
-                },
-                {
-                    census_year: true,
-                    year: 1918,
-                    source: 'CoE*',
-                    population: 53000
-                },
-                {
-                    census_year: true,
-                    year: 1917,
-                    source: 'CoE* 4',
-                    population: 51000
-                },
-                {
-                    census_year: true,
-                    year: 1916,
-                    source: 'CoE',
-                    population: 53846
-                },
-                {
-                    census_year: true,
-                    year: 1915,
-                    source: 'CoE',
-                    population: 59339
-                },
-                {
-                    census_year: true,
-                    year: 1914,
-                    source: 'CoE',
-                    population: 72516
-                },
-                {
-                    census_year: true,
-                    year: 1913,
-                    source: 'CoE',
-                    population: 67243
-                },
-                {
-                    census_year: true,
-                    year: 1912,
-                    source: 'CoE 5',
-                    population: 53611
-                },
-                {
-                    year: 1910,
-                    source: 'CoE 6',
-                    population: 23950
-                },
-                {
-                    census_year: true,
-                    year: 1909,
-                    source: 'CoE*',
-                    population: 23000
-                },
-                {
-                    census_year: true,
-                    year: 1908,
-                    source: 'CoE',
-                    population: 18500
-                },
-                {
-                    year: 1907,
-                    source: 'CoE 6',
-                    population: 16294
-                },
-                {
-                    census_year: true,
-                    year: 1906,
-                    source: 'CoE',
-                    population: 14088
-                },
-                {
-                    year: 1905,
-                    source: 'CoE 6',
-                    population: 11219
-                },
-                {
-                    census_year: true,
-                    year: 1904,
-                    source: 'CoE',
-                    population: 8350
-                },
-                {
-                    census_year: true,
-                    year: 1903,
-                    source: 'CoE',
-                    population: 6995
-                },
-                {
-                    year: 1902,
-                    source: 'CoE 6',
-                    population: 4811
-                },
-                {
-                    year: 1900,
-                    source: 'CoE 6',
-                    population: 2419
-                },
-                {
-                    census_year: true,
-                    year: 1899,
-                    source: 'CoE',
-                    population: 2212
-                },
-                {
-                    year: 1898,
-                    source: 'CoE 6',
-                    population: 2212
-                },
-                {
-                    census_year: true,
-                    year: 1897,
-                    source: 'CoE',
-                    population: 2212
-                },
-                {
-                    year: 1896,
-                    source: 'CoE 6',
-                    population: 1689
-                },
-                {
-                    census_year: true,
-                    year: 1895,
-                    source: 'CoE',
-                    population: 1165
-                },
-                {
-                    year: 1894,
-                    source: 'CoE 6',
-                    population: 1010
-                },
-                {
-                    year: 1893,
-                    source: 'CoE 6',
-                    population: 855
-                },
-                {
-                    census_year: true,
-                    year: 1892,
-                    source: 'CoE',
-                    population: 700
-                },
-                {
-                    year: 1891,
-                    source: 'CoE 6',
-                    population: 630
-                },
-                {
-                    year: 1890,
-                    source: 'CoE 6',
-                    population: 560
-                },
-                {
-                    year: 1889,
-                    source: 'CoE 6',
-                    population: 490
-                },
-                {
-                    year: 1888,
-                    source: 'CoE 6',
-                    population: 420
-                },
-                {
-                    census_year: true,
-                    year: 1887,
-                    source: 'CoE*',
-                    population: 350
-                },
-                {
-                    year: 1886,
-                    source: 'CoE',
-                    population: 307
-                },
-                {
-                    census_year: true,
-                    year: 1885,
-                    source: 'CoE',
-                    population: 263
-                },
-                {
-                    year: 1884,
-                    source: 'CoE 6',
-                    population: 247
-                },
-                {
-                    year: 1883,
-                    source: 'CoE 6',
-                    population: 230
-                },
-                {
-                    year: 1882,
-                    source: 'CoE 6',
-                    population: 214
-                },
-                {
-                    year: 1881,
-                    source: 'CoE 6',
-                    population: 197
-                },
-                {
-                    year: 1880,
-                    source: 'CoE 6',
-                    population: 181
-                },
-                {
-                    year: 1879,
-                    source: 'CoE 6',
-                    population: 164
-                },
-                {
-                    census_year: true,
-                    year: 1878,
-                    source: 'CoE',
-                    population: 148
-                }
-            ].reverse()
-        }
-    }
-};

src/components/VChartDemo/data/pie.js

@@ -1,39 +0,0 @@
-export default {
-    title: 'Pie Chart',
-    titleZh: "饼图",
-    spec: {
-        type: 'pie',
-        data: [
-            {
-                id: 'id0',
-                values: [
-                    { type: 'oxygen', value: '46.60' },
-                    { type: 'silicon', value: '27.72' },
-                    { type: 'aluminum', value: '8.13' },
-                    { type: 'iron', value: '5' },
-                    { type: 'calcium', value: '3.63' },
-                    { type: 'sodium', value: '2.83' },
-                    { type: 'potassium', value: '2.59' },
-                    { type: 'others', value: '3.5' }
-                ]
-            }
-        ],
-        valueField: 'value',
-        categoryField: 'type',
-        title: {
-            visible: true,
-            text: 'Statistics of Surface Element Content'
-        },
-        legends: {
-            visible: true,
-            orient: 'left',
-            title: {
-                visible: true,
-                text: 'Elements'
-            }
-        },
-        label: {
-            visible: true
-        }
-    }
-};

src/components/VChartDemo/data/radar.js

@@ -1,228 +0,0 @@
-export default {
-    title: 'Radar Chart',
-    titleZh: "雷达图",
-    spec: {
-        type: 'radar',
-        data: [
-            {
-                values: [
-                    {
-                        month: 'Jan.',
-                        value: 45,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Feb.',
-                        value: 61,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Mar.',
-                        value: 92,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Apr.',
-                        value: 57,
-                        type: 'A'
-                    },
-                    {
-                        month: 'May.',
-                        value: 46,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Jun.',
-                        value: 36,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Jul.',
-                        value: 33,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Aug.',
-                        value: 63,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Sep.',
-                        value: 57,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Oct.',
-                        value: 53,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Nov.',
-                        value: 69,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Dec.',
-                        value: 40,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Jan.',
-                        value: 31,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Feb.',
-                        value: 39,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Mar.',
-                        value: 81,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Apr.',
-                        value: 39,
-                        type: 'B'
-                    },
-                    {
-                        month: 'May.',
-                        value: 64,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Jun.',
-                        value: 21,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Jul.',
-                        value: 58,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Aug.',
-                        value: 72,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Sep.',
-                        value: 47,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Oct.',
-                        value: 37,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Nov.',
-                        value: 80,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Dec.',
-                        value: 74,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Jan.',
-                        value: 90,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Feb.',
-                        value: 95,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Mar.',
-                        value: 62,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Apr.',
-                        value: 52,
-                        type: 'C'
-                    },
-                    {
-                        month: 'May.',
-                        value: 74,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Jun.',
-                        value: 87,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Jul.',
-                        value: 80,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Aug.',
-                        value: 69,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Sep.',
-                        value: 74,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Oct.',
-                        value: 84,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Nov.',
-                        value: 94,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Dec.',
-                        value: 23,
-                        type: 'C'
-                    }
-                ]
-            }
-        ],
-        categoryField: 'month',
-        valueField: 'value',
-        seriesField: 'type',
-        stack: true,
-        outerRadius: 0.8,
-        area: {
-            visible: true
-        },
-        legends: {
-            visible: true,
-            orient: 'right'
-        }
-        /*
-        crosshair: {
-          categoryField: {
-            visible: true,
-            line: {
-              type: 'rect'
-            },
-            label: {
-              visible: true
-            }
-          },
-          valueField: {
-            visible: true,
-            line: {
-              type: 'line',
-              smooth: true
-            },
-            label: {
-              visible: true
-            }
-          }
-        }
-        */
-    }
-};

src/components/VChartDemo/data/rose.js

@@ -1,122 +0,0 @@
-export default {
-    title: 'Rose Chart',
-    titleZh: "玫瑰图",
-    spec: {
-        type: 'rose',
-        data: {
-            id: '0',
-            values: [
-                {
-                    time: '2:00',
-                    value: 27,
-                    type: 'Sales'
-                },
-                {
-                    time: '6:00',
-                    value: 25,
-                    type: 'Sales'
-                },
-                {
-                    time: '10:00',
-                    value: 18,
-                    type: 'Sales'
-                },
-                {
-                    time: '14:00',
-                    value: 15,
-                    type: 'Sales'
-                },
-                {
-                    time: '18:00',
-                    value: 10,
-                    type: 'Sales'
-                },
-                {
-                    time: '22:00',
-                    value: 5,
-                    type: 'Sales'
-                },
-                {
-                    time: '2:00',
-                    value: 7,
-                    type: 'Discount'
-                },
-                {
-                    time: '6:00',
-                    value: 5,
-                    type: 'Discount'
-                },
-                {
-                    time: '10:00',
-                    value: 38,
-                    type: 'Discount'
-                },
-                {
-                    time: '14:00',
-                    value: 5,
-                    type: 'Discount'
-                },
-                {
-                    time: '18:00',
-                    value: 20,
-                    type: 'Discount'
-                },
-                {
-                    time: '22:00',
-                    value: 15,
-                    type: 'Discount'
-                }
-            ]
-        },
-        categoryField: ['time', 'type'],
-        valueField: 'value',
-        seriesField: 'type',
-        outerRadius: 0.8,
-        axes: [
-            {
-                orient: 'angle',
-                domainLine: { visible: true },
-                grid: { visible: true },
-                label: {
-                    visible: true
-                }
-            },
-            {
-                orient: 'radius',
-                grid: { visible: true, smooth: true },
-                label: {
-                    visible: true
-                }
-            }
-        ],
-        crosshair: {
-            categoryField: {
-                visible: true,
-                line: {
-                    type: 'rect'
-                }
-                /*
-                label: {
-                  visible: true
-                }
-                */
-            },
-            valueField: {
-                visible: true,
-                line: {
-                    type: 'line',
-                    smooth: true
-                }
-                /*
-                label: {
-                  visible: true
-                }
-                */
-            }
-        },
-        legends: {
-            visible: true,
-            orient: 'left'
-        }
-    }
-};

src/components/VChartDemo/data/scatter.js

@@ -1,106 +0,0 @@
-const yearData = {};
-const firstYear = 1950;
-const lastYear = 2023;
-
-for (let year = firstYear; year <= lastYear; year++) {
-    const data = [];
-    yearData[year] = data;
-
-    for (let i = 0; i < 50; i++) {
-        if (year === firstYear) {
-            data.push({
-                x: Math.round(Math.random() * 100 - 90),
-                y: Math.round(Math.random() * 100 - 90),
-                value: Math.round(Math.random() * 1000),
-                index: i
-            });
-        } else {
-            const previous = yearData[year - 1][i];
-            data.push({
-                x: previous.x + Math.round(Math.random() * 5 - 2 + i / 50),
-                y: previous.y + Math.round(Math.random() * 5 - 2 + i / 50),
-                value: Math.abs(previous.value + Math.round(Math.random() * 100 - 45)),
-                index: i
-            });
-        }
-    }
-}
-
-const specs = Object.values(yearData).map((data, index) => {
-    return {
-        data: [
-            {
-                id: 'id',
-                values: data
-            },
-            {
-                id: 'year',
-                values: [{ year: Object.keys(yearData)[index] }]
-            }
-        ]
-    };
-});
-
-const DURATION = 300;
-
-export default {
-    title: 'Scatter Chart',
-    titleZh: "散点图",
-    spec: {
-        type: 'common',
-        player: {
-            orient: 'bottom',
-            auto: true,
-            interval: DURATION,
-            dy: 10,
-            specs
-        },
-        data: specs[0].data,
-        axes: [
-            {
-                orient: 'left',
-                type: 'linear',
-                range: { min: -100, max: 100 }
-            },
-            {
-                orient: 'bottom',
-                type: 'linear',
-                range: { min: -100, max: 100 }
-            }
-        ],
-        series: [
-            {
-                type: 'scatter',
-                // 通过数据中的 index 进行数据匹配
-                dataKey: 'index',
-                // 声明点半径大小
-                sizeField: 'value',
-                size: {
-                    type: 'linear',
-                    range: [5, 30]
-                },
-                xField: 'x',
-                yField: 'y',
-                animationAppear: {
-                    duration: DURATION,
-                    easing: 'linear'
-                },
-                animationUpdate: {
-                    duration: DURATION,
-                    easing: 'linear'
-                }
-            }
-        ],
-        crosshair: {
-            xField: { visible: true },
-            yField: { visible: true }
-        },
-        legends: {
-            visible: true,
-            type: 'size',
-            orient: 'right',
-            field: 'value',
-            width: 100
-        }
-    }
-};

src/components/VChartDemo/index.js

@@ -1,52 +0,0 @@
-import React from "react";
-// import { isMobile } from "react-device-detect";
-import { charts } from "./data/index";
-import { VChart } from "@visactor/react-vchart";
-import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
-
-typeof window !== 'undefined' && initVChartSemiTheme();
-
-const chartHeight = 400;
-
-const Charts = (props) => {
-    return (
-        <div style={{ display: 'flex', flexWrap: 'wrap', columnGap: 30, rowGap: 10, padding: '30px 0 30px 30px' }}>
-            {charts.map((chart, i) => {
-                return (
-                    <div
-                        key={i}
-                        className="card"
-                        style={{
-                            width: 'calc(50% - 30px)',
-                            display: "inline-block",
-                            boxSizing: "border-box"
-                        }}
-                    >
-                        <h4>{props.zh ? chart.titleZh : chart.title}</h4>
-                        <div
-                            className="chartContainer"
-                            style={{ outline: `1px solid #404349` }}
-                        >
-                            <VChart
-                                spec={{
-                                    height: chartHeight,
-                                    ...chart.spec,
-                                }}
-                                option={{
-                                    ...chart.option,
-                                    // mode: isMobile ? "mobile-browser" : "desktop-browser",
-                                    mode: "desktop-browser",
-                                    onError: null,
-                                    logLevel: 5,
-                                }}
-                            />
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-
-    );
-};
-
-export default Charts;

src/components/side-nav.js

@@ -49,7 +49,7 @@ const SideNav = ({ location = null, type = null, itemsArr, edges, style, hasBann
             const { items, ...rest } = category;
             return (
                 <Nav.Sub {...rest} key={rest.itemKey}>
-                    {items.map(item=>{
+                    {items?.map(item=>{
                         return (
                             <Link to={item.itemKey} key={item.itemKey} >
                                 <Nav.Item {...item} tabIndex={-1}/>

src/images/docIcons/doc-vchart.svg

@@ -1,3 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C18.0751 1 23 5.92487 23 12C23 12.9809 22.8716 13.9318 22.6307 14.8367L16.4319 4.60107H16.4246C15.8677 3.75338 14.9083 3.1937 13.8183 3.1937C12.7282 3.1937 11.7688 3.75338 11.2119 4.60107H11.2045L11.1273 4.7374C11.1124 4.76291 11.0977 4.78863 11.0835 4.81459L4.28926 16.8044C4.02032 17.2651 3.86623 17.8011 3.86623 18.3731C3.86623 18.8614 3.97854 19.3235 4.17872 19.7349C2.21346 17.7478 1 15.0156 1 12C1 5.92487 5.92487 1 12 1ZM6.31177 21.417C6.52781 21.4644 6.75226 21.4894 6.98253 21.4894C8.70361 21.4894 10.0989 20.0941 10.0989 18.3731C10.0989 17.821 9.95527 17.3026 9.70354 16.8529L9.70515 16.8523L8.18662 14.2244C7.36844 12.8072 7.85398 10.9951 9.27112 10.177C10.6883 9.35876 12.5003 9.84434 13.3185 11.2615L18.6751 20.3396L18.6772 20.3387C18.7329 20.4294 18.7933 20.517 18.8577 20.6012C16.9772 22.1026 14.5934 23 12 23C9.91821 23 7.97153 22.4217 6.31177 21.417Z" fill="#0040FF"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path d="M21.9052 11.25C22.484 11.25 22.9461 10.7587 22.8514 10.1877C22.085 5.56448 18.4355 1.91497 13.8123 1.14858C13.2414 1.05394 12.75 1.51604 12.75 2.09476V6.19505C12.75 6.68989 13.1168 7.09994 13.5861 7.25681C15.0717 7.75336 16.2467 8.92832 16.7432 10.4139C16.9001 10.8833 17.3101 11.25 17.805 11.25H21.9052Z" fill="#4CC3FA" style="fill:#4CC3FA;fill:color(display-p3 0.2980 0.7647 0.9804);fill-opacity:1;"/>
+<path d="M17.8049 12.75C17.3101 12.75 16.9001 13.1168 16.7432 13.5861C16.08 15.57 14.207 17 12 17C11.1976 17 10.4393 16.811 9.76731 16.475C9.32485 16.2538 8.7759 16.2847 8.42612 16.6345L6.24097 18.8196C5.82968 19.2309 5.85285 19.9094 6.33177 20.2395C7.94275 21.3499 9.89545 22 12 22C16.902 22 20.9802 18.4728 21.8351 13.818C21.9402 13.2462 21.4768 12.75 20.8954 12.75H17.8049Z" fill="#6A6F7F" style="fill:#6A6F7F;fill:color(display-p3 0.4157 0.4353 0.4980);fill-opacity:1;"/>
+<path d="M8.42616 7.36551C8.77594 7.71529 9.32488 7.74614 9.76734 7.52497C9.97507 7.42112 10.1911 7.33132 10.414 7.2568C10.8833 7.09994 11.25 6.68992 11.25 6.19508V3.10463C11.25 2.52321 10.7542 2.05982 10.1823 2.16483C8.7733 2.42357 7.46761 2.97764 6.33179 3.76049C5.85287 4.09058 5.82972 4.76906 6.24101 5.18036L8.42616 7.36551Z" fill="#DDE3E8" style="fill:#DDE3E8;fill:color(display-p3 0.8667 0.8902 0.9098);fill-opacity:1;"/>
+<path d="M7.36546 15.5738C7.71524 15.2241 7.74609 14.6751 7.52492 14.2327C7.189 13.5607 7 12.8024 7 12C7 11.1976 7.18901 10.4394 7.52494 9.76737C7.74612 9.32491 7.71528 8.77597 7.36549 8.42618L5.18034 6.24103C4.76905 5.82974 4.09056 5.85291 3.76047 6.33183C2.65011 7.94281 2 9.89551 2 12C2 14.1046 2.6501 16.0572 3.76043 17.6682C4.09052 18.1471 4.76901 18.1703 5.18031 17.759L7.36546 15.5738Z" fill="#AAB2BF" style="fill:#AAB2BF;fill:color(display-p3 0.6667 0.6980 0.7490);fill-opacity:1;"/>
+</svg>

src/templates/postTemplate.js

@@ -18,6 +18,7 @@ import PageAnchor from 'components/PageAnchor';
 import PrevAndNext from 'components/PrevAndNext';
 import SEO from 'components/seo';
 import DesignToken from 'components/DesignToken';
+import ChartContact from '../components/ChartContact';
 import { makeAnchorId } from '../utils';
 import ComponentOverview from 'components/ComponentOverview';
 import { get, isString, capitalize, noop } from 'lodash-es';
@@ -53,7 +54,6 @@ import './toUEDUtils/toUED.scss';
 import { debounce } from 'lodash';
 import StickyHeaderTable from '../demos/StickyHeaderTable';
 import { useIsIde } from '../components/useIde';
-import Charts from '../components/VChartDemo';
 
 const Text = ({ lang, letterSpacing, size, lineHeight, text }) => {
     letterSpacing = letterSpacing || 'auto';
@@ -117,7 +117,8 @@ const SemiComponents = {
     Card,
     Space,
     Avatar,
-    IconPlus
+    IconPlus,
+    ChartContact
 };
 
 const pre = ({ ...props }) => {
@@ -153,17 +154,6 @@ const code = ({ ...props }) => {
         return <ComponentOverview code={props.children} />;
     }
 
-    if (props.className === 'language-chart') {
-        return <Charts code={props.children} zh={props.zh} />;
-    }
-
-    if (props.className === 'language-chartcontact') {
-        return <>
-        <img src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/contact_wechat.jpeg'} style={{width:250, height:250}}/>
-        <img src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/contact_lark.jpeg'} style={{width:250, height:250}}/>
-     </>;
-    }
-
     const scope = {
         useEffect,
         useMemo,
@@ -186,6 +176,10 @@ const code = ({ ...props }) => {
 
     newProps.lineNumber = false;
 
+    if (props.half) {
+        newProps.width = '50%';
+    }
+
     const Placeholder = () => (
         <>
             <Skeleton

src/templates/scope.js

@@ -36,7 +36,7 @@ import fr from '@douyinfe/semi-ui/locale/source/fr';
 import ro from '@douyinfe/semi-ui/locale/source/ro';
 import { SortableContainer, SortableElement, sortableHandle } from 'react-sortable-hoc';
 import GraphemeSplitter from 'grapheme-splitter';
-export * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+export * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components";
 export * from '@douyinfe/semi-ui';
 export * from '@douyinfe/semi-foundation/utils';
 export * from '@douyinfe/semi-icons';
@@ -227,3 +227,6 @@ export {
     IconVersionTwo,
     IconWheelChair
 } from '@douyinfe/semi-icons-lab';
+
+export { VChart } from "@visactor/react-vchart";
+export { initVChartSemiTheme } from '@visactor/vchart-semi-theme';

yarn.lock

@@ -1588,10 +1588,10 @@
     lodash "^4.17.21"
     sass "^1.54.9"
 
-"@douyinfe/semi-site-banner@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.npmjs.org/@douyinfe/semi-site-banner/-/semi-site-banner-0.1.3.tgz#0d7e26d93431db29475e3c456f36f6fdd60e5362"
-  integrity sha512-Sju1cRqeQPnbzpHYan4CyxsXBPgduvIyEZGBs2xVajCbwKWoJdbScBzrWPlyyMvQGcibqu5hmptw4GHZLrn22w==
+"@douyinfe/semi-site-banner@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.npmjs.org/@douyinfe/semi-site-banner/-/semi-site-banner-0.1.5.tgz#40da848ffc18630229dea4f30b7c8a6a6fbb37a1"
+  integrity sha512-aUrkZA1DJezBEbKvMEuwegKaTd/T/1r8KNosZ6L0iDPe7HvKL+/A/Dboua2ANeJ7Hv9hno/c9ZqRn6NrnvDAUg==
   dependencies:
     "@douyinfe/semi-icons" latest
     "@douyinfe/semi-ui" latest
@@ -5911,52 +5911,59 @@
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@visactor/react-vchart@^1.7.2":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@visactor/react-vchart/-/react-vchart-1.7.2.tgz#c5525713571d67f8ecc23721bc4e7abd531625de"
-  integrity sha512-VB3lnB8/NPCxCzDsCvjeRwK57mhu8/W6z63voJExkbsPH7/NVk0G/Jvh/6Qag792S3d0w3Kr3g8dA2ftm6QikA==
+"@visactor/react-vchart@^1.10.4":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@visactor/react-vchart/-/react-vchart-1.10.4.tgz#ffa77f639269f872443034c27e289557e0693b00"
+  integrity sha512-krmEyY+GXBAbrJ6HGOyhEtnz+R7K9szcfJHVGygs9fOPb779ym/1H1oeuzpC5rOUB5RgRK/fmCVDRlW7U7tgkA==
   dependencies:
-    "@visactor/vchart" "1.7.2"
-    "@visactor/vgrammar-core" "~0.9.4"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vutils" "~0.16.18"
+    "@visactor/vchart" "1.10.4"
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vutils" "~0.18.1"
     react-is "^18.2.0"
 
-"@visactor/vchart-semi-theme@^1.7.2":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@visactor/vchart-semi-theme/-/vchart-semi-theme-1.7.2.tgz#a7371d4275226ed9046d30c285771a4d7a374083"
-  integrity sha512-ypqWX71Q+nnPH38WdWCJJBSkKSBBPqb8EGmchJB3pRjUTQvhT+Rom5iaFylq9+GStFE6Cgfm34Y61T4yd9hQvQ==
-
-"@visactor/[email protected]":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@visactor/vchart/-/vchart-1.7.2.tgz#b918802166b6174341b4edcd92440ba579c14aa2"
-  integrity sha512-ndNZSK/A0XQHrpbZZpYSH3cEeMynyXrSWbuknszojtjLuO21UlVe6pV03a5oKIAcnuQvzkOSHS276sFe0cXUbg==
-  dependencies:
-    "@visactor/vdataset" "~0.16.18"
-    "@visactor/vgrammar-core" "~0.9.4"
-    "@visactor/vgrammar-hierarchy" "~0.9.4"
-    "@visactor/vgrammar-projection" "~0.9.4"
-    "@visactor/vgrammar-sankey" "~0.9.4"
-    "@visactor/vgrammar-util" "~0.9.4"
-    "@visactor/vgrammar-wordcloud" "~0.9.4"
-    "@visactor/vgrammar-wordcloud-shape" "~0.9.4"
-    "@visactor/vrender-components" "~0.16.17"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vscale" "~0.16.18"
-    "@visactor/vutils" "~0.16.18"
-    "@visactor/vutils-extension" "1.7.2"
-
-"@visactor/vdataset@~0.16.18":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vdataset/-/vdataset-0.16.18.tgz#2c8d7e83c5b8a217f568143d0cbbae367dfe6f56"
-  integrity sha512-Ex3tRykogiIcr9KXTSMxcUAXXIBbZnOqM66s/8akydngOTKo+QXn85hKEoPClMES43U0dHt/026P10E2/GEG5Q==
+"@visactor/vchart-semi-theme@^1.10.4":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@visactor/vchart-semi-theme/-/vchart-semi-theme-1.10.4.tgz#bb30f6e12dc8eaf0cec98dfdd8421a43140a1694"
+  integrity sha512-weNpB2o1JPwVfyNdj/V5EuGDwn/KF+8JNOO2sPzCBKXN0JzIlAfiRQ+HcEim+vcXyowGoPff29gQCGNLJ3LwOA==
+  dependencies:
+    "@visactor/vchart-theme-utils" "1.10.4"
+
+"@visactor/[email protected]":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@visactor/vchart-theme-utils/-/vchart-theme-utils-1.10.4.tgz#130de9a04503b3b2b5d3b79f2478ac9499a8eef7"
+  integrity sha512-fiXwbIH3Bc2ieCkqHKHJvYayvlJjm/inGP2OayVLhbv4bDt3Smj6QWiLGQVPaFgBCMGdaauMbJpSwBLEDimkdw==
+
+"@visactor/[email protected]":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@visactor/vchart/-/vchart-1.10.4.tgz#eb56f2814f0725c226afc531c8ed806ecdcaf649"
+  integrity sha512-vKX+y0H/fvWcOsKqxgFThkGQ220cKDod4vuFURo4osR9frnRqjXtrXi5RT6gYpjveDDVMKHy9wD2T898d9IIug==
+  dependencies:
+    "@visactor/vdataset" "~0.18.1"
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-hierarchy" "0.12.8"
+    "@visactor/vgrammar-projection" "0.12.8"
+    "@visactor/vgrammar-sankey" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vgrammar-wordcloud" "0.12.8"
+    "@visactor/vgrammar-wordcloud-shape" "0.12.8"
+    "@visactor/vrender-components" "0.18.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vscale" "~0.18.1"
+    "@visactor/vutils" "~0.18.1"
+    "@visactor/vutils-extension" "1.10.4"
+
+"@visactor/vdataset@~0.18.1":
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/@visactor/vdataset/-/vdataset-0.18.1.tgz#a202af859c7b6111cf9174e657ae25f1c6b2f585"
+  integrity sha512-ByrBt2kgLvYRve+Q+9oo3Ibav5WVSyWPuxdDJHK7kDTJGtTuV8z4qKcqArB86PcAOJS1s5L0TtHlV4Femm2xoA==
   dependencies:
     "@turf/flatten" "^6.5.0"
     "@turf/helpers" "^6.5.0"
     "@turf/rewind" "^6.5.0"
-    "@visactor/vutils" "0.16.18"
+    "@visactor/vutils" "0.18.1"
     d3-dsv "^2.0.0"
     d3-geo "^1.12.1"
     d3-hexbin "^0.2.2"
@@ -5971,139 +5978,157 @@
     simplify-geojson "^1.0.4"
     topojson-client "^3.1.0"
 
-"@visactor/vgrammar-coordinate@0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-coordinate/-/vgrammar-coordinate-0.9.4.tgz#4f4e6bafcd2c5118f837b9cff7fc7b27f9bd0b20"
-  integrity sha512-Lhzs1SpBM/Uw7EVMDlObD9wwhK/WTFvRagphwb9KwC4aRAeotI1lCsH647gr6rOGoEV5s3j1jhqQ9han/l+ygA==
-  dependencies:
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-core@0.9.4", "@visactor/vgrammar-core@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-core/-/vgrammar-core-0.9.4.tgz#89098b2ae912bb4e5830a875012e3a094535e4c3"
-  integrity sha512-b1FqHG8AVOQlsPYNLYdYlhxJh12WHhSBMTdSevfGVbVgn/qB4hBG1my+yugf0uwEIiwushJBVvs7yVuTmhZrSg==
-  dependencies:
-    "@visactor/vdataset" "~0.16.18"
-    "@visactor/vgrammar-coordinate" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vrender-components" "~0.16.17"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vscale" "~0.16.18"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-hierarchy@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-hierarchy/-/vgrammar-hierarchy-0.9.4.tgz#7ff12236c2f42516b3a43de6292499d38ba36e3f"
-  integrity sha512-mYHABCa68dM+kBZtFq+hdrRD7y4HnsTLbjonMO2iaOlhviGypoSr6fnebtgsTgs7MZiFegHdCAHJDAi/pVbLSw==
-  dependencies:
-    "@visactor/vgrammar-core" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-projection@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-projection/-/vgrammar-projection-0.9.4.tgz#d9dd80f3ff07e88bdc16d3e7a8867cc0388f513e"
-  integrity sha512-sC82dOByPBWipsOfkfCnYDGUvHutaHyDa92TqWE+NoQKEZcWZJrzau49FN61qfDNNbkWstgO0hy0NubuH8807Q==
-  dependencies:
-    "@visactor/vgrammar-core" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vutils" "~0.16.18"
+"@visactor/vgrammar-coordinate@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-coordinate/-/vgrammar-coordinate-0.12.8.tgz#30f1e24f611c7500f5f692c2ffbfc80d7fe5e91d"
+  integrity sha512-e4/Qc6xVkzDFbPShQ9T7kNa16vELfrE6iwzP5sFHiHOxp3U5nRajYffPK4SSAS6/my9sGplhKK4HC2gpasd0EQ==
+  dependencies:
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-core@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-core/-/vgrammar-core-0.12.8.tgz#11a105a39091a4946c46b0eef4de49d4bd343b25"
+  integrity sha512-RcvLxYcYK9xJC/vs2IndsVdmtOevqOJ3NWsinO4AGfed/AzWxXKxVTQ30XhylBtOSF3nz8fLdg8vRP8pZYjtng==
+  dependencies:
+    "@visactor/vdataset" "~0.18.1"
+    "@visactor/vgrammar-coordinate" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vrender-components" "0.18.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vscale" "~0.18.1"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-hierarchy@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-hierarchy/-/vgrammar-hierarchy-0.12.8.tgz#a6b15f8a4f508490c4b4482153881b32e0ac8960"
+  integrity sha512-NNYrYRAqa0iGlMdpZPK1yexdmTE2HCmPzz52CotoopLVzzrJ1L7LqO4fTUwT21nZAMsQ2iPHh4AX1bwdQ2IRCQ==
+  dependencies:
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-projection@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-projection/-/vgrammar-projection-0.12.8.tgz#c1f5e72830ae5e5d197189a165175f41adbde42e"
+  integrity sha512-sDrsMoTticsopUQ4Rtn0uywY6JdCEgF1fresAGOTmLCGPy1AYXNIKXQIi2DYxmNsUb+XUWJNOaml+lHX5YeBbQ==
+  dependencies:
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vutils" "~0.18.1"
     d3-geo "^1.12.1"
 
-"@visactor/vgrammar-sankey@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-sankey/-/vgrammar-sankey-0.9.4.tgz#ce74ea8e31e652c74e3382346d68357eb6aa8811"
-  integrity sha512-tO38gWS0SSJBU3qILscBPITqub95NbK9up+nvWjZgwqOoj1N4/NPqpAvFwxOg4EF7g48saC5QJvt4gyQWikIKg==
-  dependencies:
-    "@visactor/vgrammar-core" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-util@0.9.4", "@visactor/vgrammar-util@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-util/-/vgrammar-util-0.9.4.tgz#8177ee1363fb3d33b6fd7e27cc1e5d4401100b76"
-  integrity sha512-i+74qgnEjqdNceLf7qFtiqwhU8Dw5VrG5C7dwG7JF+lBIvLqDvQQ+8m3g0oUW0UfvgDu+9qcPCSht4uXqoM04Q==
-  dependencies:
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-wordcloud-shape@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-wordcloud-shape/-/vgrammar-wordcloud-shape-0.9.4.tgz#7178d80f922c2f4cd2dd63e530a79a28fed81a4d"
-  integrity sha512-VhG8BnUtBwzJ5PMpT0wql8ymaVhXzLo3h7+5IljfaV1cUTV3f+sAbyPZziYVsbxmPOyJZNNbhMcEHNTexayMnw==
-  dependencies:
-    "@visactor/vgrammar-core" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vscale" "~0.16.18"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-wordcloud@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-wordcloud/-/vgrammar-wordcloud-0.9.4.tgz#e8d832694f4990913573b9b48d0b6afe36a758bf"
-  integrity sha512-v5geBndJaJQnGbm4kmVl1pQlcRPd6atIq1aTBKLOFpzFK30c0/VFqLy6E3fMrZ7DB2DfoOn5rU3EYq/hllUkzA==
-  dependencies:
-    "@visactor/vgrammar-core" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vrender-components@~0.16.17":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vrender-components/-/vrender-components-0.16.18.tgz#927a689f96550a684e837b03ab59a7258e1bd008"
-  integrity sha512-3lmXBd4No08yH7y5f0xzI/xb8gRdoy3ZBVQPP+8S+ttfi2PpZ42Q/URhxIurSSKEDnA8vGloou17iDj4cShq4w==
-  dependencies:
-    "@visactor/vrender-core" "0.16.18"
-    "@visactor/vrender-kits" "0.16.18"
-    "@visactor/vscale" "~0.16.18"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/[email protected]6.18", "@visactor/vrender-core@~0.16.17":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vrender-core/-/vrender-core-0.16.18.tgz#384bd6d8af1f2c63d232ef7ea60b7600a89d16d1"
-  integrity sha512-+OPmG/l1Eq0O3g0cSH5fUNVDxb9SfaimXd9qH48kTyN636nFY11PqW5eu3kgg+oi+0T1L73Ic2RRMhET7zGUQw==
-  dependencies:
-    "@visactor/vutils" "~0.16.18"
+"@visactor/vgrammar-sankey@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-sankey/-/vgrammar-sankey-0.12.8.tgz#f229184a783448256b3b5a2818715fbbfc8202a8"
+  integrity sha512-+Cf8pb8HKcRk/06t+DNbf+EPjPmRdTLI0LefY+QzViWu7+tzEJCH7B79Y4o1pXF4ECWKCx3poiMp8+3I1FWrig==
+  dependencies:
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-util@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-util/-/vgrammar-util-0.12.8.tgz#f403caea572657491f6c1dba9caed41217099b2a"
+  integrity sha512-To1YW+oL/zhiIPzRcgjt1TrrSOyKT/kaDh1Agn8w1NpRcac2LZ930QTm9QPAeMHMZC9HjuT8UnJC9GeHbhVlNw==
+  dependencies:
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-wordcloud-shape@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-wordcloud-shape/-/vgrammar-wordcloud-shape-0.12.8.tgz#55efc1bb114968b8e2db2eaadd85d61df20b2dcc"
+  integrity sha512-GaLLEHz/Ru+AyctmD3HcqGbxE+mQsncEY8VQH6F+jf3n0sFZpphWptbSL2Ld2RCf3oo7XERMEPki954XHfuL0A==
+  dependencies:
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vscale" "~0.18.1"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-wordcloud@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-wordcloud/-/vgrammar-wordcloud-0.12.8.tgz#91631f8145ef2036dcc7816ba26e3e119d4e3ef5"
+  integrity sha512-WhZCaUc1C0xW5caMHuFsuRPI5Q+4JPkoQdkgNfw1HkJ0oPZUuqnpj++j4h2w+B87yFZ9pAbvyp2VeKZh6Avj2w==
+  dependencies:
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vrender-components@0.18.8":
+  version "0.18.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vrender-components/-/vrender-components-0.18.8.tgz#4339222951d6374d12c1e27609b8c75dd8309dda"
+  integrity sha512-/P7MSXIYFzg++zw/jg+Fqogknp17BJWhaoVrCBIZgF45O+qGkCbxZGa2kMR4dGs05lqLvb6/Zle8D3g3Pr2/qg==
+  dependencies:
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vscale" "~0.17.3"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/[email protected]8.8":
+  version "0.18.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vrender-core/-/vrender-core-0.18.8.tgz#3c7bd365413db0ee43b9a56d543bc9dc36b6df44"
+  integrity sha512-b3NgF89qsX1DvYAAR/YUIWqZVjjyXt5HF5+xfNh1VGhti6l8CLCa70Hxkg2Hnw3RBVP+o9t2T54U+Mwjg7RBuQ==
+  dependencies:
+    "@visactor/vutils" "~0.18.1"
     color-convert "2.0.1"
 
-"@visactor/[email protected]6.18", "@visactor/vrender-kits@~0.16.17":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vrender-kits/-/vrender-kits-0.16.18.tgz#fcae127ade1bd23b507849ac4cf2573f39cebcc2"
-  integrity sha512-L+vO7ddhx1tdfBRZlwp4ahYLfYwBizNeCVhNI8aND7nDuPyUGB00xg+C816yFRnP/ZTfZ4xh22R+YbF67MYfoQ==
+"@visactor/[email protected]8.8":
+  version "0.18.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vrender-kits/-/vrender-kits-0.18.8.tgz#8e09daaa07f9d9fc2df7f5fecf4f7a6378d179d1"
+  integrity sha512-cJppsZOuFB2BPFKn5Lq3uXDZ0SBQErMblwXdeL70f25MDgv1+FZm+TDoHjo9452rA7nHGSM4GaKoN47gb7HhIg==
   dependencies:
     "@resvg/resvg-js" "2.4.1"
-    "@visactor/vrender-core" "0.16.18"
-    "@visactor/vutils" "~0.16.18"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vutils" "~0.18.1"
     roughjs "4.5.2"
 
-"@visactor/vscale@~0.16.18":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vscale/-/vscale-0.16.18.tgz#7f871877296851554e4d8206d0c835dfa94084f4"
-  integrity sha512-ManadKP48XzZ3IWIOGqIL4Z0G56u73mZ4TQ/m/SvheL63FEfC9NvbcbsMr0VPgabEvOSM4+5F9L6BaABXDBN2A==
+"@visactor/vscale@~0.17.3":
+  version "0.17.5"
+  resolved "https://registry.yarnpkg.com/@visactor/vscale/-/vscale-0.17.5.tgz#0e0247844f3b237b6ad6ca010dc8953bd2b576e6"
+  integrity sha512-2dkS1IlAJ/IdTp8JElbctOOv6lkHKBKPDm8KvwBo0NuGWQeYAebSeyN3QCdwKbj76gMlCub4zc+xWrS5YiA2zA==
+  dependencies:
+    "@visactor/vutils" "0.17.5"
+
+"@visactor/vscale@~0.18.1":
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/@visactor/vscale/-/vscale-0.18.1.tgz#4eef978d9c9ccc668c22c60295b175a4d344f6c4"
+  integrity sha512-0wpd0avbFLvuDKNHt2PxdKdqLSU9+zUkM6GJYWbXsUUYOiKaFkt2xTkdwUHKq66v23C7Iy14Pm7VVr0wVgflbA==
+  dependencies:
+    "@visactor/vutils" "0.18.1"
+
+"@visactor/[email protected]":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@visactor/vutils-extension/-/vutils-extension-1.10.4.tgz#37ce3bdc0d898c240fdeb05c56fbb9cd3b969349"
+  integrity sha512-1qoZ+oEz+Ms3/iQrx8AudWi58IFPqjxcRE72Vam5xZN5jxrIdbQftN3BAvmQrcjteDMeSS1HgE0j/mUnxxDR8A==
   dependencies:
-    "@visactor/vutils" "0.16.18"
+    "@visactor/vdataset" "~0.18.1"
+    "@visactor/vrender-components" "0.18.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vscale" "~0.18.1"
+    "@visactor/vutils" "~0.18.1"
 
-"@visactor/[email protected]":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@visactor/vutils-extension/-/vutils-extension-1.7.2.tgz#d35af7b92d0bb1501f732a935698a51f3538c710"
-  integrity sha512-A7jkqnkLTiRYhF2ODpvHdJZBEcuYcRjMQjiExhXyiPhcgm/DcgJwE0a6eHnPeo36hH0jeC3PMYwAKcmhFHofSA==
+"@visactor/vutils@0.17.5":
+  version "0.17.5"
+  resolved "https://registry.yarnpkg.com/@visactor/vutils/-/vutils-0.17.5.tgz#443bf7e58394912c4eb86ca9b46f527ede7bac32"
+  integrity sha512-HFN6Pk1Wc1RK842g02MeKOlvdri5L7/nqxMVTqxIvi0XMhHXpmoqN4+/9H+h8LmJpVohyrI/MT85TRBV/rManw==
   dependencies:
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vscale" "~0.16.18"
-    "@visactor/vutils" "~0.16.18"
+    "@turf/helpers" "^6.5.0"
+    "@turf/invariant" "^6.5.0"
+    eventemitter3 "^4.0.7"
 
-"@visactor/[email protected]", "@visactor/vutils@~0.16.18":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vutils/-/vutils-0.16.18.tgz#69cf24fcf93ea511b789b6e84401b8e2a99c8d97"
-  integrity sha512-7AjMDKZq+482oFxnYY4bihFhlK3JqEhCu6R/HQnnX6IufTxqCH3OQAvphE/kbt8w9Iuwhx5o/caBOUMt3J2KRA==
+"@visactor/[email protected]8.1", "@visactor/vutils@~0.18.1":
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/@visactor/vutils/-/vutils-0.18.1.tgz#47314cb7ac9bae42a4b50c9da995c19033a06720"
+  integrity sha512-XGq9a85HrVP3Rbby1qO2/JS9GewJtZv6y35Xujcb2ZGLEjnpCK61Y1OXwSC5SZOKmtsH4SjYMf5czlnNhQ3GeA==
   dependencies:
     "@turf/helpers" "^6.5.0"
     "@turf/invariant" "^6.5.0"
@@ -19017,9 +19042,9 @@ micromark-util-subtokenize@^1.0.0:
     uvu "^0.5.0"
 
 micromark-util-subtokenize@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.0.tgz#9f412442d77e0c5789ffdf42377fa8a2bcbdf581"
-  integrity sha512-vc93L1t+gpR3p8jxeVdaYlbV2jTYteDje19rNSS/H5dlhxUYll5Fy6vJ2cDwP8RnsXi818yGty1ayP55y3W6fg==
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.1.tgz#76129c49ac65da6e479c09d0ec4b5f29ec6eace5"
+  integrity sha512-jZNtiFl/1aY73yS3UGQkutD0UbhTt68qnRpw2Pifmz5wV9h8gOVsN70v+Lq/f1rKaU/W8pxRe8y8Q9FX1AOe1Q==
   dependencies:
     devlop "^1.0.0"
     micromark-util-chunked "^2.0.0"