doc: 新增“可编辑”示例应用

Author: CNFeffery

README-en_US.md

@@ -125,4 +125,5 @@ if __name__ == '__main__':
 
 | Scenario | Description | Source Code |
 | :---: | :---: | :---: |
-| Stream Rendering | Demonstrates streaming updates of infographic syntax rendering based on the common `SSE` interface | [examples/stream_render_example](./examples/stream_render_example) |
+| Stream Rendering | Demonstrates streaming update rendering of infographic syntax based on common `SSE` services | [stream_render_example](./examples/stream_render_example) |
+| Editable | Main elements like text in the infographic can be further edited manually online | [editable_example](./examples/editable_example) |

README.md

@@ -131,9 +131,10 @@ if __name__ == '__main__':
 
 ## 7 进阶使用
 
-|   场景   |                     功能描述                      |                                源码                                |
-| :------: | :-----------------------------------------------: | :----------------------------------------------------------------: |
-| 流式渲染 | 基于最常见的`SSE`接口演示信息图语法的流式更新渲染 | [examples/stream_render_example](./examples/stream_render_example) |
+|   场景   |                     功能描述                      |                           源码                            |
+| :------: | :-----------------------------------------------: | :-------------------------------------------------------: |
+| 流式渲染 | 基于最常见的`SSE`服务演示信息图语法的流式更新渲染 | [stream_render_example](./examples/stream_render_example) |
+|  可编辑  |   信息图中的文字等主要元素可进一步在线手动编辑    |      [editable_example](./examples/editable_example)      |
 
 <a id="8-更多应用开发教程"></a>
 

examples/editable_example/app.py

@@ -0,0 +1,62 @@
+import dash  # noqa: I001
+from dash import html
+import feffery_infographic as fi
+import feffery_antd_components as fac
+from feffery_dash_utils.style_utils import style
+
+app = dash.Dash(__name__)
+
+syntax_demo = """
+infographic sequence-ascending-stairs-3d-simple
+data
+  title 企业优势列表
+  desc 展示企业在不同维度上的核心优势与表现值
+  items
+    - label 品牌影响力
+      value 85
+      desc 在目标用户群中具备较强认知与信任度
+      time 2021
+      icon mingcute/diamond-2-fill
+      illus creative-experiment
+    - label 技术研发力
+      value 90
+      desc 拥有自研核心系统与持续创新能力
+      time 2022
+      icon mingcute/code-fill
+      illus code-thinking
+    - label 市场增长快
+      value 78
+      desc 近一年用户规模实现快速增长
+      time 2023
+      icon mingcute/wallet-4-line
+      illus business-analytics
+    - label 服务满意度
+      value 88
+      desc 用户对服务体系整体评分较高
+      time 2020
+      icon mingcute/happy-line
+      illus feeling-happy
+    - label 数据资产全
+      value 92
+      desc 构建了完整用户标签与画像体系
+      time 2022
+      icon mingcute/user-4-line
+      illus mobile-photos
+    - label 创新能力强
+      value 83
+      desc 新产品上线频率高于行业平均
+      time 2023
+      icon mingcute/rocket-line
+      illus creativity
+theme light
+  palette antv
+"""
+
+
+app.layout = lambda: html.Div(
+    [fac.AntdCenter(fi.Infographic(editable=True, syntax=syntax_demo, padding=25, height=800))],
+    style=style(padding='100px 50px'),
+)
+
+if __name__ == '__main__':
+    app.run(debug=True)

examples/editable_example/requirements.txt

@@ -0,0 +1,4 @@
+dash>=3.3.0
+feffery_antd_components
+feffery_dash_utils
+feffery_infographic