feature: 新增瀑布流、打招呼、挂载卡片列表组件，marklang支持懒加载数学公式、代码高亮插件，调整部分组件样式及已知bug (#3)

* feature: 新增瀑布流组件、招呼、挂载卡片列表组件，调整部分组件样式
* feature: marklang支持懒加载数学公式、代码高亮插件

---------

Co-authored-by: xuzhiyong03 <xuzhiyong03@baidu.com>

Author: Witxzy

packages/cosmic-dqa/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cosui/cosmic-dqa",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "",
     "main": "./dist/mobile/index.js",
     "exports": {

packages/cosmic-dqa/src/agent-card/doc/readme.md

@@ -1,6 +1,6 @@
 # AgentCard
 
-- Agent卡片：用于展示AI助手的基本信息，包括头像、名称和描述信息
+- Agent卡片：用于展示agent的基本信息，包括头像、名称和描述信息
 - 覆盖平台：PC/Mobile
 
-## 代码演示
+## 代码演示

packages/cosmic-dqa/src/chart/base-chart.ts

@@ -19,7 +19,7 @@ import type {ECharts, EChartsOption, TooltipComponentOption} from 'echarts';
 import Loading from '@cosui/cosmic/loading';
 import {isAndroid} from '@cosui/cosmic/util';
 import {colors, customColors} from './constant';
-import {ChartProps, ChartData, Theme} from './interface';
+import {ChartProps, ChartData, Theme, Type, RegisterMapParams} from './interface';
 import {deepMerge} from './utils';
 
 /**
@@ -41,6 +41,8 @@ export default class BaseChart extends Component<ChartProps & ChartData> {
         'cos-loading': Loading
     };
 
+    // 是否已设置事件监听，在图表渲染完后设置
+    hasEventListener: boolean = false;
     // ECharts实例
     chartInstance: ECharts | null;
     // 根元素样式表
@@ -51,34 +53,45 @@ export default class BaseChart extends Component<ChartProps & ChartData> {
     initData() {
         return {
             option: {},
-            _loading: true
+            _loading: true,
+            async: false
         };
     }
 
     inited() {
         this.chartInstance = null;
         this.styleDeclaration = null;
         this.themeObserverCleanup = null;
+        // 地图需要异步请求地图配置
+        if (this.data.get('type') === Type.MAP) {
+            this.data.set('async', true);
+        }
     }
 
     attached() {
         this.styleDeclaration = getComputedStyle(this.el!);
+        // 异步无需自动更新配置，需要在外部手动调用 updateChart 方法更新配置
+        if (!this.data.get('async')) {
+            this.updateChart();
+        }
+    }
+    registerMap(...args: RegisterMapParams): void {
         const chartContainer = this.ref('chartContainer') as unknown as HTMLDivElement;
-
         import('echarts').then(echarts => {
-            const mainChart = echarts.init(chartContainer);
-
-            this.initChart(mainChart);
+            echarts.registerMap(...args);
+            const chartInstance = echarts.init(chartContainer);
+            this.chartInstance = chartInstance;
+            this.addChartListener();
+            this.updateChartOption();
         }).catch(error => {
             throw new Error(`ECharts initialization failed: ${error.message}`);
         }).finally(() => {
             this.data.set('_loading', false);
         });
     }
-
     updated() {
-        if (this.chartInstance && this.data.get('option')) {
-            this.updateChart();
+        if (this.chartInstance && this.data.get('option') && !this.data.get('async')) {
+            this.updateChartOption();
         }
     }
 
@@ -87,31 +100,44 @@ export default class BaseChart extends Component<ChartProps & ChartData> {
         this.themeObserverCleanup?.();
         window.removeEventListener('resize', this.handleResize);
     }
-
-    // 初始化图表
-    initChart(chartInstance: ECharts) {
-        this.chartInstance = chartInstance;
-        this.handleResize = this.handleResize.bind(this);
-
-        // 监听窗口大小变化
-        window.addEventListener('resize', this.handleResize);
-        // 监听图表渲染完成事件
-        this.chartInstance.on('finished', this.handleChartRendered.bind(this));
-        // 监听主题模式变化
-        this.themeObserverCleanup = this.onColorSchemeChange(() => {
-            this.chartInstance?.setOption(this.getDarkModeStyle());
+    addChartListener() {
+        if (!this.chartInstance) {
+            return;
+        }
+        if (!this.hasEventListener) {
+            this.handleResize = this.handleResize.bind(this);
+            // 监听窗口大小变化
+            window.addEventListener('resize', this.handleResize);
+            // 监听图表渲染完成事件
+            this.chartInstance?.on('finished', this.handleChartRendered.bind(this));
+            // 监听主题模式变化
+            this.themeObserverCleanup = this.onColorSchemeChange(() => {
+                this.chartInstance?.setOption(this.getDarkModeStyle());
+            });
+            this.hasEventListener = true;
+        }
+    }
+    // 更新图表
+    updateChart() {
+        const chartContainer = this.ref('chartContainer') as unknown as HTMLDivElement;
+        import('echarts').then(echarts => {
+            const chartInstance = echarts.init(chartContainer);
+            this.chartInstance = chartInstance;
+            this.addChartListener();
+            this.updateChartOption();
+        }).catch(error => {
+            throw new Error(`ECharts initialization failed: ${error.message}`);
+        }).finally(() => {
+            this.data.set('_loading', false);
         });
-        this.updateChart();
     }
 
     // 更新图表
-    updateChart() {
+    updateChartOption() {
         if (!this.chartInstance) {
             return;
         }
-
         const option = this.mergeOption();
-
         this.chartInstance.setOption(option, true);
     }
 

packages/cosmic-dqa/src/chart/constant.ts

@@ -22,7 +22,9 @@ import {Type} from './interface';
 export const componentNameMap = {
     [Type.LINE]: 'cosd-line-chart',
     [Type.BAR]: 'cosd-bar-chart',
-    [Type.PIE]: 'cosd-pie-chart'
+    [Type.PIE]: 'cosd-pie-chart',
+    [Type.MAP]: 'cosd-map-chart',
+    [Type.RADAR]: 'cosd-radar-chart'
 };
 
 /**

packages/cosmic-dqa/src/chart/doc/api.md

@@ -3,15 +3,18 @@
 ### Props
 |名称|类型|初始值|是否必选|说明|覆盖平台|
 |---|---|---|---|---|---|
-| type  | 'line' \| 'pie' \| 'bar' | 'bar' | 是 | 图表类型，可选值：<br>• 'line'：折线图<br>• 'pie'：饼图<br>• 'bar'：柱状图 | PC/Mobile |
+| type  | 'line' \| 'pie' \| 'bar' \| 'map' \| 'radar' | 'bar' | 是 | 图表类型，可选值：<br>• 'line'：折线图<br>• 'pie'：饼图<br>• 'bar'：柱状图<br>• 'map'：地图<br>• 'radar'：雷达图 | PC/Mobile |
 | option  | EChartsOption | {} | 是 | 图表的初始配置，配置参数同 [ECharts配置项](https://echarts.apache.org/zh/option.html#title) <br />**注意事项：** <br /> (1)不支持（除 tooltip.formatter，非 ssr 场景使用）函数类型的配置项，比如各种 formatter <br />(2)不支持跳转 <br />(3)不支持 使用 concat($prevData.key, key) 的追加式方式更新 option 数据 <br/> (4)不支持 series 里有不同类型的 type（比如 line bar 混合）| PC/Mobile |
+| async  | Boolean | false | 否 | 与默认同步渲染互斥，开启后默认渲染会loading（此时不会触发图表rendered），须搭配updateChart（地图须改为调用registerMap）异步完成渲染（此时才会触发图表rendered） | PC/Mobile |
 
 ### Events
 |事件|参数|说明|覆盖平台|
 |---|---|---|---|
 |render-finished|/|图表渲染完成事件|PC/Mobile|
 
 ### Methods
-|方法名|类型|说明|
-|---|---|---|
-|getEchartsInstance|() => [ECharts](https://echarts.apache.org/zh/api.html#echartsInstance)|获取 echarts 实例，可调用 echarts 方法自定义事件|
+|方法名|参数|返回值|说明|
+|---|---|---|---|
+|getEchartsInstance| - |() => [ECharts](https://echarts.apache.org/zh/api.html#echartsInstance)|获取 echarts 实例，可调用 echarts 方法自定义事件|
+|updateChart| - | - | 异步更新图表（须同时设置async为true）|
+|registerMap|[Parameters<typeof echarts.registerMap>](https://echarts.apache.org/zh/api.html#echarts.registerMap) | - | 地图需要异步更新地图数据（须同时设置async为true）并完成渲染（不需要再调用updateChart，内部会自行更新） |

packages/cosmic-dqa/src/chart/doc/line-chart.md

@@ -7,6 +7,7 @@ export default class LineChartDemo extends Component {
         <div style="height: 300px">
             <cosd-chart
                 type="line"
+                async
                 s-ref="lineChart"
                 option="{{lineOption}}"
                 on-chart-rendered="handleChartRendered"
@@ -17,7 +18,12 @@ export default class LineChartDemo extends Component {
     static components = {
         'cosd-chart': Chart
     };
-
+    attached() {
+        setTimeout(() => {
+            const chartRef = this.ref('lineChart');
+            chartRef.updateChart();
+        }, 3000)
+    }
     initData() {
         return {
             lineOption: {
@@ -43,10 +49,12 @@ export default class LineChartDemo extends Component {
     }
 
     handleChartRendered() {
-        console.log('Line Chart rendered');
         const chartRef = this.ref('lineChart');
         const echartInstance = chartRef?.getEchartsInstance();
-        console.log(echartInstance);
+        echartInstance.dispatchAction({
+            type: 'highlight',
+            dataIndex: 3
+        });
         echartInstance.on('legendselectchanged', (params) => {
            console.log(params);
         });