完善

components/chat/hello.js

@@ -62,5 +62,5 @@ Page({
    */
   onShareAppMessage() {
 
-  }
+  },
 })

components/chat/text.js

@@ -1,5 +1,15 @@
 // components/chat/text.js
-Page({
+Component({
+  properties: {
+    message: {
+      type: String,
+      value: ''
+    },
+    color: {
+      type: String,
+      value: ''
+    },
+  },
 
   /**
    * 页面的初始数据

components/chat/text.wxml

@@ -1,3 +1,3 @@
-<view class="panel-text">
-  模拟返回纯文本内容
+<view class="panel-text {{color}}">
+  {{message}}
 </view>

components/chat/text.wxss

@@ -1 +1,7 @@
 /* components/chat/text.wxss */
+.cblack{
+  color: #000;
+}
+.cwhite{
+  color: #fff;
+}

subPage/chat/index.js

@@ -13,6 +13,27 @@ Page({
         isUp:false,
         isDown:false,
       },
+      {
+        id:-1,
+        type:'text',
+        isUp:false,
+        isDown:false,
+        content:'测试输入框发送测试输入框发送测试输入框发送测试输入框发送'
+      },
+      {
+        id:0,
+        type:'text',
+        isUp:false,
+        isDown:false,
+        content:'我是AI回复，自定义回复'
+      },
+      {
+        id:1,
+        type:'text',
+        isUp:false,
+        isDown:false,
+        content:'再次发送再次发送再次发送'
+      },
     ]
   },
 

subPage/chat/index.wxml

@@ -6,48 +6,52 @@
           wx:for-index="index"       
           wx:key="{{item.id}}"
     >
-      <view wx:if="{{index == 0}}"
-           class="item-obj hello-obj"
-      >
-        <hello-panel />
-      </view>
-      <view class="other-obj" wx:if="{{index > 0}}">
-        <view wx:if="{{index % 2 == 1}}" 
-              class="item-obj ask-box"
-        >
-          <view class="" wx:if="{{item.type == 'text'}}">
-            <text-panel />
+      <view class="fill-box {{index % 2 == 0 ? 'g_flex_row_start' : 'g_flex_row_end'}}">
+        <view class="g_w_all {{index % 2 == 0 ? 'g_flex_row_start' : 'g_flex_row_end'}}">
+          <view class="">
+            <view class="{{index % 2 == 0 ? 'g_flex_row_start' : 'g_flex_row_end'}}">
+              <view wx:if="{{index % 2 == 0 && index == 0}}"
+                  class="bg-obj g_flex_row_start"
+              >
+                <hello-panel />
+              </view>
+              <view wx:if="{{index % 2 == 0 && index != 0}}"
+                  class="bg-obj g_flex_row_start min80"
+              >
+                <text-panel message="{{item.content}}" color="cblack" />
+              </view>
+              <view wx:if="{{index % 2 == 1}}"
+                  class="main-obj g_flex_row_end max80"
+              >
+                <text-panel message="{{item.content}}" color="cwhite" />
+              </view>
+            </view>
+            <view class="item-opera g_flex_row_between" wx:if="{{index % 2 == 0}}">
+              <view class="g_flex_row_start">
+                <i class="iconfont icon-useful era-icon g_mr_12 {{item.isUp ? 'icon-active' : ''}}"
+                  data-up="{{item.isUp}}"
+                  data-index="{{index}}"
+                  bindtap="handleUp"
+                ></i>
+                <i class="iconfont icon-un_useful era-icon {{item.isDown ? 'icon-active' : ''}}"
+                  data-down="{{item.isDown}}"
+                  data-index="{{index}}"
+                  bindtap="handleDown"
+                ></i>
+              </view>
+              <view class="g_flex_row_end">
+                <i class="iconfont icon-fuzhi11 era-icon g_mr_12"
+                  data-copy="{{item.content}}"
+                  data-index="{{index}}"
+                  bindtap="handleCopy"
+                ></i>
+                <i class="iconfont icon-fenxiangfenxiangshare era-icon"
+                  bindtap="handleShare"
+                ></i>
+              </view>
+            </view>
           </view>
         </view>
-        <view wx:if="{{index % 2 == 0}}" 
-              class="item-obj send-box"
-        >
-
-        </view>
-      </view>
-      <view class="item-opera g_flex_row_between">
-        <view class="g_flex_row_start">
-          <i class="iconfont icon-useful era-icon g_mr_12 {{item.isUp ? 'icon-active' : ''}}"
-             data-up="{{item.isUp}}"
-             data-index="{{index}}"
-             bindtap="handleUp"
-          ></i>
-          <i class="iconfont icon-un_useful era-icon {{item.isDown ? 'icon-active' : ''}}"
-             data-down="{{item.isDown}}"
-             data-index="{{index}}"
-             bindtap="handleDown"
-          ></i>
-        </view>
-        <view class="g_flex_row_end">
-          <i class="iconfont icon-fuzhi11 era-icon g_mr_12"
-             data-copy="{{item.content}}"
-             data-index="{{index}}"
-             bindtap="handleCopy"
-          ></i>
-          <i class="iconfont icon-fenxiangfenxiangshare era-icon"
-             bindtap="handleShare"
-          ></i>
-        </view>
       </view>
     </view>
   </view>

subPage/chat/index.wxss

@@ -203,13 +203,24 @@ textarea {
 
 .chat-card{
   padding: 0 10px;
+  margin-bottom: 10px;
 }
-.item-obj{
+.chat-card:last-child{
+  margin-bottom: 24px;
+}
+.bg-obj{
   background-color: #fff;
   border-radius: 12px;
   line-height: 1.5;
   word-break: break-all;
-  padding: 10px;
+  padding: 12px;
+}
+.main-obj{
+  background-color: #3578f6;
+  border-radius: 12px;
+  line-height: 1.5;
+  word-break: break-all;
+  padding: 12px;
 }
 .item-opera{
   margin-top: 10px;
@@ -224,3 +235,12 @@ textarea {
 .icon-active{
   color: #3578f6;
 }
+.g_w_all{
+  width: 100%;
+}
+.min80{
+  min-width: 80vw;
+}
+.max80{
+  max-width: 80vw;
+}