docs: add examples links for readme (#1703)

* docs: add examples links for readme

* docs: update README.md

---------

Co-authored-by: 白熱 <[email protected]>

README-ja.md

@@ -50,6 +50,32 @@ Univer の機能のハイライト:
  - 🧮 ハイパフォーマンスフォーミュラエンジン、Web Worker をサポート。
 - 🌍 国際化サポート。
 
+## Examples
+
+| <h3>📊 Univer Sheets</h3> | |
+|:---------------------------------------|--------------------------------|
+| [Sheets](https://www.univer.ai/examples/sheets/)<br>Opened: cell styles, formulas. First quarter: conditional formatting, data validation, search and replace. Second quarter (tentative): floating pictures, filtering, sorting, annotations, charts, pivot tables, super tables (tables), shapes | [![](./docs/img/examples-sheets.gif)](https://www.univer.ai/examples/sheets/) |
+| [Sheets Multi](https://www.univer.ai/examples/sheets-multi/)<br>Multiple Univer instances can be created on a page to allow interoperability between tables | [![](./docs/img/examples-sheets-multi.gif)](https://www.univer.ai/examples/sheets-multi/) |
+| [Sheets Uniscript](https://www.univer.ai/examples/sheets-uniscript/)<br>In Univer Sheets, you can directly use JavaScript syntax to operate the data in the table to achieve automation. | [![](./docs/img/examples-sheets-uniscript.gif)](https://www.univer.ai/examples/sheets-uniscript/) |
+| [Sheets Big Data](https://www.univer.ai/examples/sheets-big-data/)<br>Loading 10 million cells of data, completed within 500ms | [![](./docs/img/examples-sheets-big-data.gif)](https://www.univer.ai/examples/sheets-big-data/) |
+| [Sheets Collaboration](https://univer.ai/pro-examples/sheets-collaboration/)<br>Please open two windows or invite friends to experience Univer Sheets collaboration together | [![](./docs/img/pro-examples-sheets-collaboration.gif)](https://univer.ai/pro-examples/sheets-collaboration/) |
+| [Sheets Collaboration Playground](https://univer.ai/pro-examples/sheets-collaboration-playground/)<br>Demonstrate the process of collaboration. After A edits the form, how does B process it? Here is an interesting experiment | [![](./docs/img/pro-examples-sheets-collaboration-playground.gif)](https://univer.ai/pro-examples/sheets-collaboration-playground/) |
+| [Sheets Import/Export](https://univer.ai/pro-examples/sheets-exchange/)<br>Supports xlsx file import and export | [![](./docs/img/pro-examples-sheets-exchange.gif)](https://univer.ai/pro-examples/sheets-exchange/) |
+| [Sheets Print](https://univer.ai/pro-examples/sheets-print/)<br>Experience the HD printing capabilities of Univer Sheets | [![](./docs/img/pro-examples-sheets-print.gif)](https://univer.ai/pro-examples/sheets-print/) |
+| [Sheets Data Validation / Conditional Formatting](https://univer-qqqkeqnw5-univer.vercel.app/sheets/)<br>Development preview of Univer Sheets data formats and conditional formatting | [![](./docs/img/examples-sheets-data-validation-conditional-format.png)](https://univer-qqqkeqnw5-univer.vercel.app/sheets/) |
+| <h3>📝 Univer Docs</h3> | |
+| [Docs](https://www.univer.ai/examples/docs/)<br>Already open: ordered and unordered lists, paragraph settings, mixed graphics and text, multi-column/single column display in sections (tentative): hyperlinks, comments, tables, charts | [![](./docs/img/examples-docs.gif)](https://www.univer.ai/examples/docs/) |
+| [Docs Multi](https://www.univer.ai/examples/docs-multi/)<br>Multiple Univer instances can be created in a page so that doc can interoperate. | [![](./docs/img/examples-docs-multi.gif)](https://www.univer.ai/examples/docs-multi/) |
+| [Docs Uniscript](https://www.univer.ai/examples/docs-uniscript/)<br>You can directly use JavaScript syntax to manipulate content in Univer Docs | [![](./docs/img/examples-docs-uniscript.gif)](https://www.univer.ai/examples/docs-uniscript/) |
+| [Docs Big Data](https://www.univer.ai/examples/docs-big-data/)<br>1 million word Docs loading demo | [![](./docs/img/examples-docs-big-data.gif)](https://www.univer.ai/examples/docs-big-data/) |
+| [Docs Collaboration](https://univer.ai/pro-examples/docs-collaboration/)<br>Please open two windows or invite friends to experience Univer Docs collaboration together | [![](./docs/img/pro-examples-docs-collaboration.gif)](https://univer.ai/pro-examples/docs-collaboration/) |
+| [Docs Collaboration Playground](https://univer.ai/pro-examples/docs-collaboration-playground/)<br>Demonstrate the process of collaboration. After A edits the document, how does B process it? Here is an interesting experiment | [![](./docs/img/pro-examples-docs-collaboration-playground.gif)](https://univer.ai/pro-examples/docs-collaboration-playground/) |
+| <h3>🎨 Univer Slides</h3> | |
+| [Slides](https://www.univer.ai/examples/slides/)<br>A canvas presentation containing graphic text, floating pictures, tables and other elements | [![](./docs/img/examples-slides.gif)](https://www.univer.ai/examples/slides/) |
+| <h3>🧩 Univer Innovation</h3> | |
+| [Zen Mode](https://github.com/dream-num/univer)<br>The cell of Sheet is a Doc? | [![](./docs/img/zen-mode.gif)](https://github.com/dream-num/univer) |
+| [Univer(SaaS version)](https://univer.ai/)<br>With Univer, we enable users to create 3 forms of page as they wish. By merging sheet, doc and slide's capabilities together, Univer empowers individuals and teams to create, organize and streamline workflows effortlessly. | [![](./docs/img/univer-workspace-drag-chart.gif)](https://youtu.be/kpV0MvQuFZA) |
+
 ## 使用方法
 
 Univer を npm パッケージとしてインポートすることをお勧めします。ドキュメントサイトの [Quick Start](https://univer.ai/ja-jp/guides/quick-start/) セクションをご覧ください。また、[オンラインプレイグラウンド](https://univer.ai/playground/)では、開発環境を構築することなく Univer をプレビューすることができます。

README-zh.md

@@ -54,10 +54,29 @@ Univer 的功能特性包括：
 
 ## 例子
 
-| 链接 | 预览 |
-| - | - |
-| [多实例](https://univer.ai/playground/?title=Multi%20Instance)<br>在同一个网页中运行多个 Univer 实例 | ![](./docs/img/multi-instances.png) |
-| [Uniscript](https://univer.ai/playground/?title=Uniscript)<br>使用 Uniscript 来自动化工作流 | ![](./docs/img/uniscript.png) |
+| <h3>📊 Univer Sheets</h3> | |
+|:---------------------------------------|--------------------------------|
+| [Sheets](https://www.univer.ai/examples/sheets/)<br>已开放：单元格样式、公式。一季度：条件格式、数据验证、查找替换。二季度（暂定）：浮动图片、筛选、排序、批注、图表、数据透视表、超级表（table）、形状 | [![](./docs/img/examples-sheets.gif)](https://www.univer.ai/examples/sheets/) |
+| [Sheets Multi](https://www.univer.ai/examples/sheets-multi/)<br>在一个页面中可以创建多个 Univer 实例，让表格间可以实现互操作 | [![](./docs/img/examples-sheets-multi.gif)](https://www.univer.ai/examples/sheets-multi/) |
+| [Sheets Uniscript](https://www.univer.ai/examples/sheets-uniscript/)<br>在 Univer Sheets 中可以直接使用 JavaScript 语法操作表格中的数据，实现自动化 | [![](./docs/img/examples-sheets-uniscript.gif)](https://www.univer.ai/examples/sheets-uniscript/) |
+| [Sheets Big Data](https://www.univer.ai/examples/sheets-big-data/)<br>加载 1000 万单元格数据量，在 500ms 内完成 | [![](./docs/img/examples-sheets-big-data.gif)](https://www.univer.ai/examples/sheets-big-data/) |
+| [Sheets Collaboration](https://univer.ai/pro-examples/sheets-collaboration/)<br>请打开两个窗口或者邀请小伙伴一起体验 Univer Sheets 协同 | [![](./docs/img/pro-examples-sheets-collaboration.gif)](https://univer.ai/pro-examples/sheets-collaboration/) |
+| [Sheets Collaboration Playground](https://univer.ai/pro-examples/sheets-collaboration-playground/)<br>演示协同的过程，A 编辑表格后，B 到底是如何处理的？这里是一个有趣的实验 | [![](./docs/img/pro-examples-sheets-collaboration-playground.gif)](https://univer.ai/pro-examples/sheets-collaboration-playground/) |
+| [Sheets Import/Export](https://univer.ai/pro-examples/sheets-exchange/)<br>支持 xlsx 文件导入和导出 | [![](./docs/img/pro-examples-sheets-exchange.gif)](https://univer.ai/pro-examples/sheets-exchange/) |
+| [Sheets Print](https://univer.ai/pro-examples/sheets-print/)<br>体验 Univer Sheets 的高清打印能力 | [![](./docs/img/pro-examples-sheets-print.gif)](https://univer.ai/pro-examples/sheets-print/) |
+| [Sheets Data Validation / Conditional Formatting](https://univer-qqqkeqnw5-univer.vercel.app/sheets/)<br>Univer Sheets 数据格式和条件格式的开发预览版 | [![](./docs/img/examples-sheets-data-validation-conditional-format.png)](https://univer-qqqkeqnw5-univer.vercel.app/sheets/) |
+| <h3>📝 Univer Docs</h3> | |
+| [Docs](https://www.univer.ai/examples/docs/)<br>已开放：有序无序列表、段落设置、图文混排、分节展示多列/单列（暂定）：超链接、批注、表格、图表 | [![](./docs/img/examples-docs.gif)](https://www.univer.ai/examples/docs/) |
+| [Docs Multi](https://www.univer.ai/examples/docs-multi/)<br>在一个页面中可以创建多个 Univer 实例，让doc可以实现互操作 | [![](./docs/img/examples-docs-multi.gif)](https://www.univer.ai/examples/docs-multi/) |
+| [Docs Uniscript](https://www.univer.ai/examples/docs-uniscript/)<br>在 Univer Docs 中可以直接使用 JavaScript 语法操作内容 | [![](./docs/img/examples-docs-uniscript.gif)](https://www.univer.ai/examples/docs-uniscript/) |
+| [Docs Big Data](https://www.univer.ai/examples/docs-big-data/)<br>100 万字 Docs 加载演示 | [![](./docs/img/examples-docs-big-data.gif)](https://www.univer.ai/examples/docs-big-data/) |
+| [Docs Collaboration](https://univer.ai/pro-examples/docs-collaboration/)<br>请打开两个窗口或者邀请小伙伴一起体验 Univer Docs 协同 | [![](./docs/img/pro-examples-docs-collaboration.gif)](https://univer.ai/pro-examples/docs-collaboration/) |
+| [Docs Collaboration Playground](https://univer.ai/pro-examples/docs-collaboration-playground/)<br>演示协同的过程，A 编辑文档后，B 到底是如何处理的？这里是一个有趣的实验 | [![](./docs/img/pro-examples-docs-collaboration-playground.gif)](https://univer.ai/pro-examples/docs-collaboration-playground/) |
+| <h3>🎨 Univer Slides</h3> | |
+| [Slides](https://www.univer.ai/examples/slides/)<br>一个包含图文本、浮动图片、表格等元素的画布演示 | [![](./docs/img/examples-slides.gif)](https://www.univer.ai/examples/slides/) |
+| <h3>🧩 Univer Innovation</h3> | |
+| [Zen Mode](https://github.com/dream-num/univer)<br>Sheet 的单元格是一个 Doc？ | [![](./docs/img/zen-mode.gif)](https://github.com/dream-num/univer) |
+| [Univer(SaaS version)](https://univer.ai/)<br>通过 Univer，我们使用户能够根据自己的意愿创建 3 种形式的页面。 通过将工作表、文档和幻灯片的功能合并在一起，Univer 使个人和团队能够轻松创建、组织和简化工作流程。 | [![](./docs/img/univer-workspace-drag-chart.gif)](https://youtu.be/kpV0MvQuFZA) |
 
 ## 使用
 

README.md

@@ -52,10 +52,29 @@ Highlights of Univer:
 
 ## Examples
 
-| Links | Previews |
-| - | - |
-| [Multi Instances](https://univer.ai/playground/?title=Multi%20Instance)<br>Run multi Univer instances on the same page | ![](./docs/img/multi-instances.png) |
-| [Uniscript](https://univer.ai/playground/?title=Uniscript)<br>Use Uniscript to automate your workflow | ![](./docs/img/uniscript.png) |
+| <h3>📊 Univer Sheets</h3> | |
+|:---------------------------------------|--------------------------------|
+| [Sheets](https://www.univer.ai/examples/sheets/)<br>Opened: cell styles, formulas. First quarter: conditional formatting, data validation, search and replace. Second quarter (tentative): floating pictures, filtering, sorting, annotations, charts, pivot tables, super tables (tables), shapes | [![](./docs/img/examples-sheets.gif)](https://www.univer.ai/examples/sheets/) |
+| [Sheets Multi](https://www.univer.ai/examples/sheets-multi/)<br>Multiple Univer instances can be created on a page to allow interoperability between tables | [![](./docs/img/examples-sheets-multi.gif)](https://www.univer.ai/examples/sheets-multi/) |
+| [Sheets Uniscript](https://www.univer.ai/examples/sheets-uniscript/)<br>In Univer Sheets, you can directly use JavaScript syntax to operate the data in the table to achieve automation. | [![](./docs/img/examples-sheets-uniscript.gif)](https://www.univer.ai/examples/sheets-uniscript/) |
+| [Sheets Big Data](https://www.univer.ai/examples/sheets-big-data/)<br>Loading 10 million cells of data, completed within 500ms | [![](./docs/img/examples-sheets-big-data.gif)](https://www.univer.ai/examples/sheets-big-data/) |
+| [Sheets Collaboration](https://univer.ai/pro-examples/sheets-collaboration/)<br>Please open two windows or invite friends to experience Univer Sheets collaboration together | [![](./docs/img/pro-examples-sheets-collaboration.gif)](https://univer.ai/pro-examples/sheets-collaboration/) |
+| [Sheets Collaboration Playground](https://univer.ai/pro-examples/sheets-collaboration-playground/)<br>Demonstrate the process of collaboration. After A edits the form, how does B process it? Here is an interesting experiment | [![](./docs/img/pro-examples-sheets-collaboration-playground.gif)](https://univer.ai/pro-examples/sheets-collaboration-playground/) |
+| [Sheets Import/Export](https://univer.ai/pro-examples/sheets-exchange/)<br>Supports xlsx file import and export | [![](./docs/img/pro-examples-sheets-exchange.gif)](https://univer.ai/pro-examples/sheets-exchange/) |
+| [Sheets Print](https://univer.ai/pro-examples/sheets-print/)<br>Experience the HD printing capabilities of Univer Sheets | [![](./docs/img/pro-examples-sheets-print.gif)](https://univer.ai/pro-examples/sheets-print/) |
+| [Sheets Data Validation / Conditional Formatting](https://univer-qqqkeqnw5-univer.vercel.app/sheets/)<br>Development preview of Univer Sheets data formats and conditional formatting | [![](./docs/img/examples-sheets-data-validation-conditional-format.png)](https://univer-qqqkeqnw5-univer.vercel.app/sheets/) |
+| <h3>📝 Univer Docs</h3> | |
+| [Docs](https://www.univer.ai/examples/docs/)<br>Already open: ordered and unordered lists, paragraph settings, mixed graphics and text, multi-column/single column display in sections (tentative): hyperlinks, comments, tables, charts | [![](./docs/img/examples-docs.gif)](https://www.univer.ai/examples/docs/) |
+| [Docs Multi](https://www.univer.ai/examples/docs-multi/)<br>Multiple Univer instances can be created in a page so that doc can interoperate. | [![](./docs/img/examples-docs-multi.gif)](https://www.univer.ai/examples/docs-multi/) |
+| [Docs Uniscript](https://www.univer.ai/examples/docs-uniscript/)<br>You can directly use JavaScript syntax to manipulate content in Univer Docs | [![](./docs/img/examples-docs-uniscript.gif)](https://www.univer.ai/examples/docs-uniscript/) |
+| [Docs Big Data](https://www.univer.ai/examples/docs-big-data/)<br>1 million word Docs loading demo | [![](./docs/img/examples-docs-big-data.gif)](https://www.univer.ai/examples/docs-big-data/) |
+| [Docs Collaboration](https://univer.ai/pro-examples/docs-collaboration/)<br>Please open two windows or invite friends to experience Univer Docs collaboration together | [![](./docs/img/pro-examples-docs-collaboration.gif)](https://univer.ai/pro-examples/docs-collaboration/) |
+| [Docs Collaboration Playground](https://univer.ai/pro-examples/docs-collaboration-playground/)<br>Demonstrate the process of collaboration. After A edits the document, how does B process it? Here is an interesting experiment | [![](./docs/img/pro-examples-docs-collaboration-playground.gif)](https://univer.ai/pro-examples/docs-collaboration-playground/) |
+| <h3>🎨 Univer Slides</h3> | |
+| [Slides](https://www.univer.ai/examples/slides/)<br>A canvas presentation containing graphic text, floating pictures, tables and other elements | [![](./docs/img/examples-slides.gif)](https://www.univer.ai/examples/slides/) |
+| <h3>🧩 Univer Innovation</h3> | |
+| [Zen Mode](https://github.com/dream-num/univer)<br>The cell of Sheet is a Doc? | [![](./docs/img/zen-mode.gif)](https://github.com/dream-num/univer) |
+| [Univer(SaaS version)](https://univer.ai/)<br>With Univer, we enable users to create 3 forms of page as they wish. By merging sheet, doc and slide's capabilities together, Univer empowers individuals and teams to create, organize and streamline workflows effortlessly. | [![](./docs/img/univer-workspace-drag-chart.gif)](https://youtu.be/kpV0MvQuFZA) |
 
 ## Usage