diff --git a/README.md b/README.md
index 658be6d9ceb6b70fdfb9b48113c56c8896a244a0..6e0f127d98e77f2806b913ab61ced97e49559963 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,34 @@
-# Vue 3 + Vite
+# MateChatTemplate
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## 🌈项目简介
+本项目是基于MateChat与Devui的Vue3项目模板，由Inscode 提供 AI 接口，旨在帮助开发者快速上手体验MateChat并搭建属于自己的AI助手。
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+了解更多请访问MateChat网站：[MateChat](https://matechat.gitcode.com)
+
+## 🖥️开始体验
+
+### 开放MateChat入口：
+
+在Header.vue的\<template>标签中，放开MateChat入口的注释，
+
+页面刷新后就能看到MateChat的入口。
+
+本项目提供了两个不同的MateChat模板，它们的区别在于完成度不同
+
+### 极简搭建
+默认场景：简单的对话功能，没有接入模型，只有一个最基本的聊天助手的框架。大家可以在这里尝试组合MateChat的不同组件，搭建具有个人风格的AI应用.
+
+### 完整搭建
+如果您不满足于极简场景，我们还提供了完整的搭建。您只需要在Page.vue文件，将\<template>标签中的\<SimpleDemo />注释掉，放开\<Demo />的注释，即可看到完整的场景。
+
+Demo在SimpleDemo的基础上，加入了MateChat的其他组件，并接入Inscode的AI模型，提供完整的聊天助手场景。
+
+### 尝试问答：
+- 帮我写一个简单的Vue3欢迎组件
+- 帮我写一个Vue3组件，并使用echarts
+- 帮我写一个Vue3组件，并使用echarts，内容为一个折线图，横轴为时间，纵轴为温度，数据为[1,2,3,4,5,6,7,8,9,10]， 标题为“温度变化” 
+
+大模型回答后，可以点击下方的"切换为卡片"按钮，切换为卡片模式，并拖动卡片去替换页面上原有的卡片。
+
+### 添砖加瓦:
+在Demo.vue文件中\<McIntroduction>标签的下方， 放开\<Prompt>组件的注释，为欢迎页添加一行提示词。
diff --git a/index.html b/index.html
index 02483518cc869985b3750cc0194f22d7e619ad13..c3ca6f28e8822f48859e9b1e4bb35eed45d76a1e 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="./src/assets/devui-logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DevUI Admin</title>
-    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <script src="https://unpkg.com/browse/echarts@5.6.0"></script>
   </head>
   <body>
     <div id="app" style="height: 100%;"></div>
diff --git a/src/components/Content.scss b/src/components/Content.scss
index 34f74e9330ccbe8e6f460b4bae93e148365a1b66..e0bfefb768ffa6357dc48ac3cce0eff574f415ac 100644
--- a/src/components/Content.scss
+++ b/src/components/Content.scss
@@ -1,4 +1,4 @@
-@import 'devui-theme/styles-var/devui-var.scss';
+@use 'devui-theme/styles-var/devui-var.scss' as *;
 
 .content-card {
   margin: 8px;
diff --git a/src/components/Content.vue b/src/components/Content.vue
index eef4563b94968f224f9d27c90ac231b4f6d5ed2c..17ee65a6d54e19721e8a1c789cc20ba77793e0f5 100644
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -264,6 +264,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import './Content.scss';
+@use './Content.scss' as *;
 
 </style>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 6c2abb4cf1382399470b848de056db6bef02860c..d885d3165123fb33104468b6613ab302395efc7d 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -25,7 +25,7 @@
 </template>
 
 <style scoped lang="scss">
-@import 'devui-theme/styles-var/devui-var.scss';
+@use 'devui-theme/styles-var/devui-var.scss' as *;
 
 .da-footer {
   font-size: 12px;
diff --git a/src/components/Header.vue b/src/components/Header.vue
index dd4fa5243c0048623ef0a806b4ebf0f3b2e9bda0..1bd40d4ef241c63105ebb611df7404d06a9333c3 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -3,11 +3,10 @@
     <div class="left-nav">
     </div>    
     <div class="right-nav">
-      <d-search id="search" v-model="search" icon-position="left" size="sm" :no-border="true"></d-search>
-      <d-button class="nav-drop-btn" icon="icon-project-nav" variant="text"></d-button>
+      <d-search id="search" style="margin-right: 8px;" v-model="search" icon-position="left" size="sm" :no-border="true"></d-search>
       <div class="theme">
-        <!-- MateChat抽屉 -->
-        <img :class="['opt', {'active': props.drawerOpen}]" @click="openDrawer()" src="../assets/logo.svg">
+        <!-- MateChat入口 -->
+        <!-- <img :class="['opt', {'active': props.drawerOpen}]" @click="openDrawer()" src="../assets/logo.svg"> -->
         <div class="opt">
           <d-icon name="dark" color="var(--devui-text)" @click="changeTheme()">
             <template #suffix>
@@ -31,7 +30,7 @@
 
 <script setup lang="ts">
 
-import { HtmlHTMLAttributes, onMounted, ref, defineProps } from 'vue';
+import { onMounted, ref } from 'vue';
 import { themeServiceInstance } from '../main';
 import { infinityTheme, galaxyTheme } from 'devui-theme';
 
@@ -63,7 +62,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@import 'devui-theme/styles-var/devui-var.scss';
+@use 'devui-theme/styles-var/devui-var.scss' as *;
 .header {
   z-index: 20;
   display: flex;
@@ -93,10 +92,6 @@ onMounted(() => {
     display: flex;
     align-items: center;
 
-    .nav-drop-btn {
-      display: none;
-    }
-
     .nav-list {
       margin-right: 24px;
 
diff --git a/src/components/MateChat/Demo.vue b/src/components/MateChat/Demo.vue
index b0ba124f4a5aa518a2c59e09b73dd7d155e4499c..26e0bf19f922fd7745d78310ab47c6c586a1f2f0 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 ?? false" :avatarPosition="msg.avatarPosition" :avatarConfig="msg.avatarConfig">
+          <McBubble v-else :loading="msg.loading" :avatarPosition="msg.avatarPosition" :avatarConfig="msg.avatarConfig">
             <RenderMarkdown v-if="msg.type === 'common'" :content="msg.content"></RenderMarkdown>
             <div :id="'demoChart'+idx" 
               draggable="true"
@@ -46,28 +46,16 @@
           ]"
         ></McIntroduction>
         <!-- <McPrompt :list="introPrompt.list" :direction="'horizontal'" class="intro-prompt" @itemClick="onItemClick($event)"></McPrompt> -->
-        <div class="guess-question">
-          <div class="guess-title">
-            <div>猜你想问</div>
-            <div>
-              <i class="icon-recover"></i>
-              <span>换一批</span>
-            </div>
-          </div>
-          <div class="guess-content">
-            <span v-for="(item, index) in guessQuestions" :key="index" @click="onItemClick(item)">{{ item.label }}</span>
-          </div>
-        </div>
       </div>
       <div class="new-convo-button">
         <div v-if="startChat" class="prompt-list">
-          <!-- <McPrompt
+          <McPrompt
             class="simple-prompt"
             style="flex: 1"
             :list="simplePrompt"
             :direction="'horizontal'"
             @itemClick="onItemClick($event)"
-          ></McPrompt> -->
+          ></McPrompt>
         </div>
         <div v-else class="agent-knowledge">
           <d-dropdown :position="['top']" @toggle="(val) => (isAgentOpen = val)">
@@ -131,10 +119,10 @@
       const conversationRef = ref();
       const isAgentOpen = ref(false);
       const agentList = ref([
-        { label: 'MateChat', value: 'matechat', active: true },
-        { label: 'InsCode', value: 'inscode' },
+        { label: 'MateChat', value: 'matechat' },
+        { label: 'InsCode', value: 'inscode', active: true },
       ]);
-      const selectedAgent = ref(agentList.value[0]);
+      const selectedAgent = ref(agentList.value[1]);
       const aiModelAvatar = {
         imgSrc: "/src/assets/logo.svg",
         width: 32,
@@ -208,6 +196,7 @@
       };
 
       const getMockAnswer = (answer, type) => {
+        console.log('getmock')
         const aiAnswer = {
           from: 'ai-model',
           content: answer,
@@ -219,6 +208,12 @@
         messages.value.push(aiAnswer);
         setTimeout(() => {
           messages.value.at(-1).loading = false;
+          nextTick(() => {
+          conversationRef.value?.scrollTo({
+              top: conversationRef.value.scrollHeight,
+              behavior: 'smooth',
+            });
+          });
         }, 1000);
       }
   
@@ -389,7 +384,6 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
-  
     .conversation-area,
     .welcome-page {
       flex: 1;
diff --git a/src/components/MateChat/DemoCard/DemoCard.vue b/src/components/MateChat/DemoCard/DemoCard.vue
index 10919c8eb155f20d78910de4fceaedccf78c7f82..1d16db38bbe894fd026ee5b25612cf3d28f73597 100644
--- a/src/components/MateChat/DemoCard/DemoCard.vue
+++ b/src/components/MateChat/DemoCard/DemoCard.vue
@@ -3,12 +3,9 @@
 </template>
 
 <script setup>
-import { createApp, defineProps, watch, onBeforeUnmount } from "vue";
+import { createApp, watch, onBeforeUnmount } from "vue";
 import { loadModule } from 'vue3-sfc-loader'
 import * as echarts from 'echarts'
-const processComponentString = (str) => {
-    return str.replace(/import.*from.*['"]echarts['"];?\n?/g, '');
-};
 
 
 const props = defineProps({
@@ -22,9 +19,15 @@ const props = defineProps({
     }
 })
 
+
+
 let currentApp = null;
 let currentStyle = null;
 
+const processComponentString = (str) => {
+    return str.replace(/import.*from.*['"]echarts['"];?\n?/g, '');
+};
+
 onBeforeUnmount(() => {
     if (currentApp) {
         currentApp.unmount();
diff --git a/src/components/Page.vue b/src/components/Page.vue
index d7d1624beb597a884e014916056ef341f296ed47..b066e9370394b6c1e529b280b884bbb3ac56fec2 100644
--- a/src/components/Page.vue
+++ b/src/components/Page.vue
@@ -26,9 +26,9 @@
   </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)"/>
+      <!-- <Demo @closeDrawer="visible = false" @chartStrChange="chartStrChange($event)"/> -->
     </keep-alive>
-    <!-- <SimpleDemo @closeDrawer="visible = false"/> -->
+    <SimpleDemo @closeDrawer="visible = false"/>
   </d-drawer>
 </template>
 
@@ -171,7 +171,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import 'devui-theme/styles-var/devui-var.scss';
+@use 'devui-theme/styles-var/devui-var.scss' as *;
 
 .floating-card {
   position: fixed;
diff --git a/src/style.scss b/src/style.scss
index 1499447edd8f5c123c3219048278cb5d1a4319f3..4c75c577c4adad27272356ff516262f3ec7eef62 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,4 +1,4 @@
-@import 'devui-theme/styles-var/devui-var.scss';
+@use 'devui-theme/styles-var/devui-var.scss' as *;
 body {
   height: 100%;
   min-height: 100vh;
diff --git a/vite.config.js b/vite.config.js
index ced97f14b2639da787e04e9fbf419a0440a73bb5..7cc2347adcb7da019c7be85b9232e3905ee175aa 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -18,4 +18,11 @@ export default defineConfig({
     }
   },
   assetsInclude: ['**/*.md'],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        quietDeps: true,
+      }
+    }
+  }
 })
