样式完成

ui/packages/ai/AiCopilot.vue

@@ -1,4 +1,7 @@
 <script>
+import ChatContent from "./components/chatContent.vue";
+import ThinkingBar from "./components/thinkingBar.vue";
+
 export default {
   name: "AiCopilot",
   props: {
@@ -8,12 +11,23 @@ export default {
     return {
       show: false,
       expand: false,
-      prompt: ""
+      loading: true,
+      prompt: "",
+      history: [
+        {avatar: "https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png", msg: "你好", uid: "ai"},
+        {avatar: "", msg: "AI 聊天机器人 ChatGPT 近日突然出现闪崩，响应超时或无法正常工作，故障长达近 7 小时。全球大量用户处于焦虑等待，因为许多人对此已经产生了依赖，工作不能自理。一些备选工具如 Perplexity、Claude 等也遭遇故障。摩根士丹利的数据显示，ChatGPT 故障后，谷歌 AI 聊天机器人 Gemini 搜索量激增 60%，达 327058 次，显示出用户把它视为 ChatGPT 的直接替代选项\n" +
+              "\n" +
+              "作者：RTE开发者社区\n" +
+              "链接：https://juejin.cn/post/7377025870630862874\n" +
+              "来源：稀土掘金\n" +
+              "著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。", uid: "me"},
+      ]
     }
   },
   computed: {
     expandBtn: v => v.expand ? "收起" : "展开"
   },
+  components: {ThinkingBar, ChatContent},
   methods: {
     handleSend() {
 
@@ -30,12 +44,11 @@ export default {
         <div class="expandBtn pointer" v-text="expandBtn" @click="expand=!expand"/>
         <div class="minimal pointer" v-text="'最小化'" @click="show=false"/>
       </div>
+      <thinking-bar v-show="loading"/>
       <div class="flex content">
         <div class="left" :class="{expand}"></div>
         <div class="right flex column gap-14">
-          <div class="fill">
-
-          </div>
+          <chat-content class="fill" :list="history"/>
           <div class="sendBox flex gap-14">
             <el-input type="textarea" class="fill input" autosize resize="none" v-model="prompt" placeholder="请输入..."
                       @change="handleSend"/>
@@ -97,7 +110,7 @@ export default {
     }
 
     .content {
-      height: calc(100% - 48px);
+      height: calc(100% - 50px);
 
       .left {
         width: 0;
@@ -117,6 +130,7 @@ export default {
         width: 420px;
         height: 100%;
         padding: 14px;
+        align-items: stretch;
 
         .sendBtn {
           width: 40px;
@@ -128,6 +142,10 @@ export default {
         }
       }
 
+      .chatPanel {
+        width: 100%;
+      }
+
       :deep(.sendBox) {
         width: 100%;