docs: custom ui

.dumirc.ts

@@ -13,6 +13,7 @@ Powered by <a herf="https://antv.antgroup.com">AntV</a>`,
     socialLinks: {
       github: 'https://github.com/antvis/GPT-Vis',
     },
+    prefersColor: { default: 'light', switch: false },
   },
   // ssr:
   //   process.env.NODE_ENV === 'production'
@@ -31,6 +32,6 @@ Powered by <a herf="https://antv.antgroup.com">AntV</a>`,
     '@c-primary': '#691eff',
     '@s-content-width': '100%',
     '@s-content-padding': '48px',
-    '@s-sidebar-width': '300px',
+    '@s-sidebar-width': '280px',
   },
 });

docs/guide/custom-ui.md

@@ -0,0 +1,48 @@
+---
+title: 定制模型输出 UI
+nav: { title: '指南', order: 0 }
+toc: content
+order: 1
+---
+
+## 定制模型输出 UI
+
+为模型输出的结构化数据，通过代码块的方式定制 UI。
+
+```tsx | pure
+import { GPTVisLite, withChartCode } from '@antv/gpt-vis';
+
+const markdownContent = `
+\`\`\`weather
+{
+  "locationName": "Hangzhou",
+  "temperature": 11.4,
+  "humidity": 82,
+  "wind": 6.8,
+  "cloudiness": 75,
+  "uv": "0.2 of 11"
+}
+\`\`\`
+
+In Hangzhou, the current weather is as follows: 
+- The temperature is 11.4°C, humidity is 82%, and wind speed is 6.8 kph. 
+- There's 75% cloud cover, and the UV index is very low at 0.2 out of 11. 
+- This indicates cool, humid conditions with overcast skies and minimal UV exposure.
+`;
+
+const customRenderers = {
+  weather: (props) => 'WeatherCard',
+};
+const components = {
+  code: withChartCode({
+    // register custom block renderer
+    languageRenderers: customRenderers,
+  }),
+};
+
+export default () => {
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
+};
+```
+
+<code src="./demos/custom-ui.tsx"></code>

docs/guide/customize-style.md

@@ -5,6 +5,8 @@ toc: content
 order: 3
 ---
 
+# 定制图表样式
+
 通过在 [ConfigProvider](/components/config-provider) 中传入样式属性，来配置图表组件的全局样式。
 
 ## 定制组件级样式

docs/guide/demos/WeatherCard/index.tsx

@@ -28,15 +28,13 @@ const WeatherCard: CodeBlockComponent = (props) => {
             <span className="windSpeedLabel">Wind</span>
             <span className="windSpeedValue">{wind}kph</span>
           </div>
-          <div className="additionalInfo">
-            <div className="cloudinessSection">
-              <span className="cloudinessLabel">Cloudiness</span>
-              <span className="cloudinessValue">{cloudiness}%</span>
-            </div>
-            <div className="uvIndexSection">
-              <span className="uvIndexLabel">UV Index</span>
-              <span className="uvIndexValue">{uv}</span>
-            </div>
+          <div className="cloudinessSection">
+            <span className="cloudinessLabel">Cloudiness</span>
+            <span className="cloudinessValue">{cloudiness}%</span>
+          </div>
+          <div className="uvIndexSection">
+            <span className="uvIndexLabel">UV Index</span>
+            <span className="uvIndexValue">{uv}</span>
           </div>
         </div>
       </div>

docs/guide/demos/WeatherCard/style.ts

@@ -1,28 +1,26 @@
 import { styled } from 'styled-components';
 
 const StyledComponent = styled.div`
-  width: 424px;
-  padding: 2px;
+  width: 560px;
   background-color: #60a5fa;
+  border-radius: 10px;
 
   .locationSection {
     display: flex;
     flex-direction: column;
-    padding: 18px 18px 14px 10px;
-    border-radius: 10px;
+    padding: 18px 25px;
   }
 
   .temperatureWrapper {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-left: 12px;
   }
 
   .temperatureDetails {
     display: flex;
     align-items: center;
-    gap: 22px;
+    gap: 40px;
   }
 
   .imageIcon {
@@ -34,40 +32,36 @@ const StyledComponent = styled.div`
 
   .currentTemperature {
     color: #feffff;
-    font-size: 28px;
+    font-size: 25px;
     font-weight: bold;
   }
 
   .locationName {
-    color: #60a5fa;
-    font-size: 14px;
+    color: #feffff;
+    font-size: 24px;
     font-weight: bold;
   }
 
   .weatherDetails {
     display: flex;
     align-items: center;
     margin-top: 16px;
-    padding-right: 2px;
-    padding-left: 2px;
+    justify-content: space-between;
+    font-size: 14px;
   }
 
   .humiditySection {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     min-width: 82px;
-    padding-right: 8px;
-    padding-left: 2px;
   }
 
   .attributeLabel {
     min-width: 56px;
     margin-right: 2px;
     margin-left: 2px;
-    background-color: #7fb6fb;
     color: #dbeafe;
-    font-size: 12px;
   }
 
   .uvIndexValue {
@@ -80,59 +74,42 @@ const StyledComponent = styled.div`
     flex-direction: column;
     align-items: flex-start;
     margin-left: 20px;
-    padding-right: 10px;
-    padding-left: 4px;
   }
 
   .windSpeedLabel {
     color: #dbeafe;
-    font-size: 14px;
   }
 
   .windSpeedValue {
     color: #feffff;
-    font-size: 14px;
-  }
-
-  .additionalInfo {
-    display: flex;
-    margin-left: 2px;
-    gap: 26px;
   }
 
   .cloudinessSection {
     display: flex;
     flex-direction: column;
-    padding-right: 2px;
-    padding-left: 2px;
   }
 
   .cloudinessLabel {
     color: #dbeafe;
-    font-size: 12px;
   }
 
   .cloudinessValue {
     align-self: flex-start;
     color: #fff;
-    font-size: 12px;
   }
 
   .uvIndexSection {
     display: flex;
     flex-direction: column;
-    padding-right: 2px;
   }
 
   .uvIndexLabel {
     margin-left: 2px;
     color: #dbeafe;
-    font-size: 12px;
   }
 
   .uvIndexValue {
     color: #fff;
-    font-size: 12px;
   }
 `;
 

docs/guide/demos/custom-ui.tsx

@@ -1,11 +1,12 @@
-import { ChartType, GPTVisLite, Pie, withChartCode } from '@antv/gpt-vis';
+import { Bubble } from '@ant-design/x';
+import { GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 import WeatherCard from './WeatherCard';
 
 const markdownContent = `
 \`\`\`weather
 {
-  "locationName": "Hngzhou",
+  "locationName": "Hangzhou",
   "temperature": 11.4,
   "humidity": 82,
   "wind": 6.8,
@@ -14,17 +15,10 @@ const markdownContent = `
 }
 \`\`\`
 
-\`\`\`vis-chart
-{
-  "type": "pie",
-  "data": [
-    { "category": "分类一", "value": 27 },
-    { "category": "分类二", "value": 25 },
-    { "category": "分类三", "value": 18 },
-    { "category": "其他", "value": 5 }
-  ]
-}
-\`\`\`
+In Hangzhou, the current weather is as follows:
+- The temperature is 11.4°C, humidity is 82%, and wind speed is 6.8 kph.
+- There's 75% cloud cover, and the UV index is very low at 0.2 out of 11.
+- This indicates cool, humid conditions with overcast skies and minimal UV exposure.
 `;
 
 const customRenderers = {
@@ -34,11 +28,21 @@ const components = {
   code: withChartCode({
     // register custom block renderer
     languageRenderers: customRenderers,
-    // register a pie chart
-    components: { [ChartType.Pie]: Pie },
   }),
 };
 
+const bgStyle = {
+  display: 'grid',
+  gridGap: '20px 0',
+  padding: 20,
+  borderRadius: 8,
+};
+
 export default () => {
-  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
+  return (
+    <div style={bgStyle}>
+      <Bubble placement="end" content="How is the weather today?" />
+      <Bubble content={<GPTVisLite components={components}>{markdownContent}</GPTVisLite>} />
+    </div>
+  );
 };

docs/guide/quick-start.md

@@ -87,5 +87,3 @@ export default () => {
   return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
 };
 ```
-
-<code src="./demos/custom-ui.tsx"></code>

src/Area/index.md

@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 nav: { title: '组件', order: 1 }
 ---
 

src/Bar/index.md

@@ -3,6 +3,7 @@ order: 4
 group:
   order: 1
   title: 统计图
+toc: content
 demo: { cols: 2 }
 ---
 

src/ChartCodeRender/index.md

@@ -1,5 +1,6 @@
 ---
 order: 2
+toc: content
 group:
   order: 10
   title: 其他

src/Column/index.md

@@ -1,5 +1,6 @@
 ---
 order: 2
+toc: content
 group:
   order: 1
   title: 统计图

src/ConfigProvider/index.md

@@ -1,5 +1,6 @@
 ---
 order: 3
+toc: content
 group:
   order: 10
   title: 其他

src/DualAxes/index.md

@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 ---
 
 # DualAxes 双轴图

src/FishboneDiagram/index.md

@@ -3,6 +3,7 @@ order: 6
 group:
   order: 4
   title: 关系图
+toc: content
 ---
 
 # FishboneDiagram 鱼骨图

src/FlowDiagram/index.md

@@ -3,6 +3,7 @@ order: 2
 group:
   order: 3
   title: 关系图
+toc: content
 ---
 
 # FlowDiagram 流程图

src/GPTVis/index.md

@@ -3,6 +3,7 @@ order: 1
 group:
   order: 10
   title: 其他
+toc: content
 ---
 
 # GPTVis 协议渲染器

src/HeatMap/index.md

@@ -3,6 +3,7 @@ order: 3
 group:
   order: 2
   title: 地图
+toc: content
 ---
 
 # HeatMap 热力地图

src/Histogram/index.md

@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 ---
 
 # Histogram 直方图

src/IndentedTree/index.md

@@ -4,6 +4,7 @@ group:
   order: 3
   title: 关系图
 demo: { cols: 2 }
+toc: content
 ---
 
 # IndentedTree 缩进树