diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..120f2cf6c4d2e076067a10ae7107fe041f62a741
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+registry='https://registry.npmmirror.com/'  
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 114ce13a815787922e47553972c5e38736594a5b..62135a93e45f276ee16cd711de16173769c025cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "openai": "^4.77.0",
         "sass": "^1.83.0",
         "vue": "^3.5.13",
+        "vue-charts": "^0.2.1",
         "vue-devui": "^1.6.29",
         "vue-i18n": "^11.0.0-beta.2",
         "vue3-sfc-loader": "^0.9.5",
@@ -4903,6 +4904,40 @@
         }
       }
     },
+    "node_modules/vue-charts": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/vue-charts/-/vue-charts-0.2.1.tgz",
+      "integrity": "sha512-SVJauURVJCgC3LWIdzI5d0waKPHm+/uQTNyKWj4Ehfn/VirZWdqkFaWtf5Xk2VQCV7CrPA43JCTtYjnj8R7pcw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.3.0",
+        "vue": "^2.0.3"
+      }
+    },
+    "node_modules/vue-charts/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      },
+      "optionalDependencies": {
+        "prettier": "^1.18.2 || ^2.0.0"
+      }
+    },
+    "node_modules/vue-charts/node_modules/vue": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz",
+      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.16",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/vue-devui": {
       "version": "1.6.29",
       "resolved": "https://registry.npmmirror.com/vue-devui/-/vue-devui-1.6.29.tgz",
diff --git a/package.json b/package.json
index 0de191ed020961997bf90eca3124e469e929fb1c..8e46ea3088ec81eb5df709d9e298208eee8d0e5d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "openai": "^4.77.0",
     "sass": "^1.83.0",
     "vue": "^3.5.13",
+    "vue-charts": "^0.2.1",
     "vue-devui": "^1.6.29",
     "vue-i18n": "^11.0.0-beta.2",
     "vue3-sfc-loader": "^0.9.5",
diff --git a/src/components/MateChat/Demo.vue b/src/components/MateChat/Demo.vue
index 26e0bf19f922fd7745d78310ab47c6c586a1f2f0..fb8a5e0c6181f135565819f07c9dee483803e096 100644
--- a/src/components/MateChat/Demo.vue
+++ b/src/components/MateChat/Demo.vue
@@ -10,7 +10,7 @@
       <div v-if="startChat" ref="conversationRef" class="conversation-area">
         <template v-for="(msg, idx) in messages" :key="idx">
           <McBubble v-if="msg.from === 'user'" :content="msg.content" :align="'right'" :avatarConfig="msg.avatarConfig"></McBubble>
-          <McBubble v-else :loading="msg.loading" :avatarPosition="msg.avatarPosition" :avatarConfig="msg.avatarConfig">
+          <McBubble v-else :loading="msg.loading" :avatarPosition="msg.avatarPosition" :avatarConfig="msg.avatarConfig" style="max-width: 540px">
             <RenderMarkdown v-if="msg.type === 'common'" :content="msg.content"></RenderMarkdown>
             <div :id="'demoChart'+idx" 
               draggable="true"
@@ -75,6 +75,7 @@
             <span>添加知识</span>
           </div>
         </div>
+        <d-button icon="stop" shape="circle" title="中止对话" size="sm" @click="stop" />
         <d-button icon="add" shape="circle" title="新建对话" size="sm" @click="onNewConvo" />
       </div>
       <div style="padding: 0 12px 12px 12px">
@@ -114,6 +115,7 @@
     },
     emits: ['closeDrawer', 'chartStrChange'],
     setup(props, { emit }) {
+      let abortController = null;
       const inputValue = ref('');
       const startChat = ref(false);
       const conversationRef = ref();
@@ -171,6 +173,12 @@
       };
   
       const onSubmit = (e, answer = undefined, type = 'common') => { 
+        if (abortController) {
+          messages.value.at(-1).loading = false;
+          messages.value.at(-1).content = '对话中止';
+          abortController.abort();
+          abortController = null;
+        }
         inputValue.value = '';
         if (!messages.value.length) {
           startChat.value = true;
@@ -196,7 +204,6 @@
       };
 
       const getMockAnswer = (answer, type) => {
-        console.log('getmock')
         const aiAnswer = {
           from: 'ai-model',
           content: answer,
@@ -218,6 +225,7 @@
       }
   
       const getAIAnswer = (content, type) => {
+        abortController = new AbortController();
         const aiAnswer = {
           from: 'ai-model',
           content: '',
@@ -241,6 +249,7 @@
                 ],
                 apikey: apiKey
             }),
+            signal: abortController.signal,
             onopen: (response) => {
             },
             onmessage: (msg) => {
@@ -265,6 +274,18 @@
             }
         });
       };
+
+      const stop = () => {
+        if (abortController) {
+          abortController.abort();
+          abortController = null;
+          // 更新最后一条消息的状态
+          if (messages.value.length > 0) {
+            messages.value.at(-1).loading = false;
+            messages.value.at(-1).content += '已中止对话';
+          }
+        }
+      }
   
       const onNewConvo = () => {
         startChat.value = false;
@@ -371,7 +392,8 @@
         selectedAgent,
         agentList,
         onInputIconClick,
-        copyContent
+        copyContent,
+        stop
       };
     },
   });
diff --git a/src/components/MateChat/DemoCard/DemoCard.vue b/src/components/MateChat/DemoCard/DemoCard.vue
index 1d16db38bbe894fd026ee5b25612cf3d28f73597..5605b45b66db9049b008f7a70e660f122b5f7f26 100644
--- a/src/components/MateChat/DemoCard/DemoCard.vue
+++ b/src/components/MateChat/DemoCard/DemoCard.vue
@@ -6,6 +6,7 @@
 import { createApp, watch, onBeforeUnmount } from "vue";
 import { loadModule } from 'vue3-sfc-loader'
 import * as echarts from 'echarts'
+import VChart from 'vue-charts';
 
 
 const props = defineProps({
@@ -25,7 +26,12 @@ let currentApp = null;
 let currentStyle = null;
 
 const processComponentString = (str) => {
-    return str.replace(/import.*from.*['"]echarts['"];?\n?/g, '');
+    str = str.replace(/import.*from.*['"]vue-echarts['"];?\n?/g, '');
+    str = str.replace(/import.*from.*['"]echarts['"];?\n?/g, '');
+    str = str.replace(/components:\s*{\s*VChart,?\s*},?/g, '');
+    str = str.replace(/<v-chart/g, '<vue-echarts');
+    str = str.replace(/<\/v-chart>/g, '</vue-echarts>');
+    return str
 };
 
 onBeforeUnmount(() => {
@@ -74,7 +80,7 @@ watch(
                 // 加载组件
                 const component = await loadModule('file.vue', options);
                 // 创建新实例
-                const app = createApp(component).use(echarts);
+                const app = createApp(component).use(echarts).component('vue-echarts', VChart);
 
                 app.config.globalProperties.$echarts = echarts;
                 app.config.globalProperties.echarts = echarts;
diff --git a/src/components/Page.vue b/src/components/Page.vue
index b066e9370394b6c1e529b280b884bbb3ac56fec2..0170bcc28164bb6c7f92d7f8bd51be94dc7eaad1 100644
--- a/src/components/Page.vue
+++ b/src/components/Page.vue
@@ -25,9 +25,9 @@
     </d-layout>
   </d-layout>
   <d-drawer v-model="visible" position="right" style="padding: 20px; width: 650px" :show-overlay="false" :close-on-click-overlay="false">
-    <keep-alive>
-      <!-- <Demo @closeDrawer="visible = false" @chartStrChange="chartStrChange($event)"/> -->
-    </keep-alive>
+    <!-- <keep-alive>
+      <Demo @closeDrawer="visible = false" @chartStrChange="chartStrChange($event)"/>
+    </keep-alive> -->
     <SimpleDemo @closeDrawer="visible = false"/>
   </d-drawer>
 </template>
@@ -40,6 +40,7 @@ import Footer from './Footer.vue';
 import Demo from './MateChat/Demo.vue';
 import SimpleDemo from './MateChat/SimpleDemo.vue';
 import { loadModule } from 'vue3-sfc-loader';
+import VChart from 'vue-charts';
 
 export default defineComponent({
   components: {
@@ -124,7 +125,12 @@ export default defineComponent({
 
     // 预处理组件字符串，移除 import 语句
     const processComponentString = (str) => {
-      return str.replace(/import.*from.*['"]echarts['"];?\n?/g, '');
+      str = str.replace(/import.*from.*['"]vue-echarts['"];?\n?/g, '');
+      str = str.replace(/import.*from.*['"]echarts['"];?\n?/g, '');
+      str = str.replace(/components:\s*{\s*VChart,?\s*},?/g, '');
+      str = str.replace(/<v-chart/g, '<vue-echarts');
+      str = str.replace(/<\/v-chart>/g, '</vue-echarts>');
+      return str
     };
 
 
@@ -155,7 +161,7 @@ export default defineComponent({
         // 加载组件
         const component = await loadModule('file.vue', options);
         // 创建新实例
-        const app = createApp(component);
+        const app = createApp(component).component('vue-echarts', VChart);
 
         app.config.globalProperties.$echarts = echarts;
         app.config.globalProperties.echarts = echarts;