feat：优化上线后的改造

components/qiaobao-assistant/qiaobao-assistant.vue

@@ -2,7 +2,7 @@
   <view v-if="visible" class="qiaobao-assistant" :class="{ 'is-collapsed': collapsed }">
     <view v-if="collapsed" class="qiaobao-edge-tab"
       :class="{ 'is-left': collapsedEdge === 'left', 'is-dragging': dockDragging }" :style="dockStyle" role="button"
-      aria-label="桥宝已收起，点击展开" @click.stop="restoreFromDock" @touchstart.stop="handleDockDragStart"
+      aria-label="桥宝已收起，点击展开" @click.stop="restoreFromDock" @tap.stop="restoreFromDock" @touchstart.stop="handleDockDragStart"
       @touchmove.stop.prevent="handleDockDragMove" @touchend.stop="handleDockDragEnd"
       @touchcancel.stop="handleDockDragEnd" @mousedown.stop.prevent="handleDockMouseDragStart">
       <image class="qiaobao-edge-head" src="https://static.tbmall.xin/static/mine/qiaobao-edge-peek.png"
@@ -10,7 +10,7 @@
     </view>
 
     <view v-else class="qiaobao-float" :class="{ 'is-scratching': action === 'scratch' }" :style="floatStyle"
-      role="button" aria-label="桥宝，点击查看当前页面说明，长按可隐藏" @click.stop="openHelp" @longpress.stop="openHideMenu"
+      role="button" aria-label="桥宝，点击查看当前页面说明，长按可隐藏" @click.stop="openHelp" @tap.stop="openHelp" @longpress.stop="openHideMenu"
       @contextmenu.stop.prevent="openHideMenu" @touchstart.stop="handleDragStart"
       @touchmove.stop.prevent="handleDragMove" @touchend.stop="handleDragEnd" @touchcancel.stop="handleDragEnd"
       @mousedown.stop.prevent="handleMouseDragStart">
@@ -28,25 +28,54 @@
               mode="aspectFit" />
           </view>
           <view class="qiaobao-title-wrap">
-            <text class="qiaobao-kicker">桥宝 · 页面向导</text>
-            <text class="qiaobao-title">{{ resolvedTitle }}</text>
+            <text class="qiaobao-kicker">桥宝 · AI 商城助手</text>
+            <view class="qiaobao-online-row">
+              <view class="qiaobao-online-dot" />
+              <text class="qiaobao-title">陪你逛信任桥TB商城</text>
+            </view>
           </view>
           <view class="qiaobao-close" aria-label="关闭" @click="closeHelp">×</view>
         </view>
 
-        <scroll-view class="qiaobao-content" scroll-y>
-          <text class="qiaobao-summary">{{ resolvedSummary }}</text>
-          <view v-if="resolvedTips.length" class="qiaobao-tips">
-            <view v-for="(tip, index) in resolvedTips" :key="index" class="qiaobao-tip">
-              <text class="qiaobao-tip-index">{{ index + 1 }}</text>
-              <text class="qiaobao-tip-text">{{ tip }}</text>
+        <view class="qiaobao-page-context">
+          <text class="qiaobao-context-label">当前页面</text>
+          <text class="qiaobao-context-title">{{ resolvedTitle }}</text>
+        </view>
+
+        <scroll-view class="qiaobao-chat" scroll-y :scroll-top="chatScrollTop" :scroll-with-animation="true">
+          <view v-for="(item, index) in chatMessages" :key="`${item.role}-${index}`" class="qiaobao-message"
+            :class="`is-${item.role}`">
+            <image v-if="item.role === 'assistant'" class="qiaobao-message-avatar"
+              src="https://static.tbmall.xin/static/mine/qiaobao-idle.png" mode="aspectFit" />
+            <view class="qiaobao-message-bubble">
+              <text>{{ item.content }}</text>
             </view>
           </view>
-          <slot />
+          <view v-if="chatLoading" class="qiaobao-message is-assistant">
+            <image class="qiaobao-message-avatar" src="https://static.tbmall.xin/static/mine/qiaobao-blink.png"
+              mode="aspectFit" />
+            <view class="qiaobao-message-bubble is-typing"><text>桥宝正在想</text><text class="qiaobao-dots">•••</text>
+            </view>
+          </view>
+          <view class="qiaobao-chat-spacer" />
         </scroll-view>
 
-        <button class="qiaobao-confirm" @click="closeHelp">我知道了</button>
-        <text class="qiaobao-hide-hint">长按桥宝，可以选择隐藏</text>
+        <scroll-view v-if="suggestions.length" class="qiaobao-suggestions" scroll-x :show-scrollbar="false">
+          <view class="qiaobao-suggestion-row">
+            <button v-for="suggestion in suggestions" :key="suggestion" class="qiaobao-suggestion"
+              @click="sendSuggestion(suggestion)">{{ suggestion }}</button>
+          </view>
+        </scroll-view>
+
+        <view class="qiaobao-compose">
+          <input v-model="chatInput" class="qiaobao-input" maxlength="500" confirm-type="send"
+            placeholder="问桥宝商城、商品或活动问题" :disabled="chatLoading" @confirm="sendMessage" />
+          <button class="qiaobao-send" :disabled="chatLoading || !chatInput" @click="sendMessage">发送</button>
+        </view>
+        <view class="qiaobao-sheet-foot">
+          <text class="qiaobao-hide-hint">长按桥宝可收起到屏幕边缘</text>
+          <text class="qiaobao-human-link" @click="goToCustomerService">人工客服</text>
+        </view>
       </view>
     </view>
   </view>
@@ -54,17 +83,29 @@
 
 <script>
 import {
+  consumeQiaobaoAutoIntro,
+  closeQiaobaoForSession,
+  getQiaobaoChatHistory,
+  getQiaobaoChatSessionId,
   getCurrentPagePath,
   getQiaobaoDockEdge,
   getQiaobaoPosition,
   hideQiaobaoForPage,
   hideQiaobaoGlobally,
+  isQiaobaoClosedForSession,
   isQiaobaoHidden,
   saveQiaobaoPosition,
+  saveQiaobaoChatHistory,
   setQiaobaoDockEdge,
   showQiaobao,
 } from "@/utils/qiaobao.js";
 import { resolveQiaobaoPageHelp } from "@/utils/qiaobao-page-help.js";
+import { getStorageFun, USER_DATA } from "@/utils/auth.js";
+import { chatWithQiaobao } from "@/api/qiaobao.js";
+
+const MALL_WELCOME = "你好，我是桥宝。信任桥TB商城为你提供食品饮料、家居日用、个护清洁等日常商品。商城重视商品信息、价格展示、规则透明和消费权益记录。你可以问我商城特色、商品活动、订单入口或商城规则。";
+const LOGIN_WELCOME = "欢迎回来，我是桥宝。以后逛商城、看活动或不清楚规则时，点我就可以直接问。账户、订单、物流等实时信息请以对应页面为准，需要人工帮助我也会告诉你入口。";
+const DEFAULT_SUGGESTIONS = ["商城有什么特点", "怎么买更划算", "贡献值是什么", "联系人工客服"];
 
 const ACTION_IMAGES = {
   idle: "https://static.tbmall.xin/static/mine/qiaobao-idle.png",
@@ -112,6 +153,14 @@ export default {
       dragJustEnded: false,
       dragStartPoint: { x: 0, y: 0 },
       dragOrigin: { x: 0, y: 0 },
+      chatInput: "",
+      chatLoading: false,
+      chatMessages: [],
+      suggestions: [...DEFAULT_SUGGESTIONS],
+      chatScrollTop: 0,
+      chatSessionId: "",
+      chatScope: "guest",
+      autoIntroTimer: null,
     };
   },
   computed: {
@@ -156,6 +205,7 @@ export default {
     uni.$on("qiaobao-visibility-change", this.handleVisibilityChange);
     this.initializeDragPosition();
     this.refreshVisibility();
+    this.initializeChat();
     // #ifdef H5
     window.addEventListener("mousemove", this.handleMouseDragMove);
     window.addEventListener("mouseup", this.handleMouseDragEnd);
@@ -168,8 +218,77 @@ export default {
     window.removeEventListener("mouseup", this.handleMouseDragEnd);
     // #endif
     this.clearTimers();
+    if (this.autoIntroTimer) clearTimeout(this.autoIntroTimer);
   },
   methods: {
+    initializeChat() {
+      const userData = getStorageFun(USER_DATA) || {};
+      this.chatScope = userData.userId ? `user-${userData.userId}` : "guest";
+      this.chatSessionId = getQiaobaoChatSessionId();
+      this.chatMessages = getQiaobaoChatHistory(this.chatScope);
+      if (!this.chatMessages.length) {
+        this.chatMessages = [{ role: "assistant", content: MALL_WELCOME }];
+        saveQiaobaoChatHistory(this.chatMessages, this.chatScope);
+      }
+      const reason = consumeQiaobaoAutoIntro(userData.userId);
+      if (reason === "first-login") {
+        this.appendAssistantMessage(LOGIN_WELCOME, false);
+      }
+    },
+    appendAssistantMessage(content, persist = true) {
+      if (!content) return;
+      const last = this.chatMessages[this.chatMessages.length - 1];
+      if (!last || last.role !== "assistant" || last.content !== content) {
+        this.chatMessages.push({ role: "assistant", content });
+      }
+      if (persist) saveQiaobaoChatHistory(this.chatMessages, this.chatScope);
+      this.scrollChatToBottom();
+    },
+    scrollChatToBottom() {
+      this.$nextTick(() => { this.chatScrollTop += 10000; });
+    },
+    sendSuggestion(value) {
+      if (this.chatLoading) return;
+      if (value === "联系人工客服") {
+        this.goToCustomerService();
+        return;
+      }
+      this.chatInput = value;
+      this.sendMessage();
+    },
+    async sendMessage() {
+      const content = String(this.chatInput || "").trim();
+      if (!content || this.chatLoading) return;
+      this.chatInput = "";
+      this.chatMessages.push({ role: "user", content });
+      saveQiaobaoChatHistory(this.chatMessages, this.chatScope);
+      this.chatLoading = true;
+      this.scrollChatToBottom();
+      try {
+        const history = this.chatMessages.slice(-9, -1).map(({ role, content: value }) => ({ role, content: value }));
+        const data = await chatWithQiaobao({
+          message: content,
+          pagePath: this.currentPageKey,
+          pageTitle: this.resolvedTitle,
+          sessionId: this.chatSessionId,
+          history,
+        });
+        this.suggestions = Array.isArray(data.suggestions) && data.suggestions.length ? data.suggestions : [...DEFAULT_SUGGESTIONS];
+        this.appendAssistantMessage(data.message || "桥宝暂时没理解，可以换一种方式问我。", true);
+      } catch (error) {
+        this.appendAssistantMessage("网络有点忙。你可以稍后再问，或进入人工客服咨询商品、订单、物流和售后问题。", true);
+      } finally {
+        this.chatLoading = false;
+        this.scrollChatToBottom();
+      }
+    },
+    goToCustomerService() {
+      this.closeHelp();
+      uni.navigateTo({
+        url: "/pages/rwa_package/setting/kefu",
+        fail: () => uni.navigateTo({ url: "/pages/rwa_package/kefu/kefu" }),
+      });
+    },
     initializeDragPosition() {
       const systemInfo = uni.getSystemInfoSync();
       this.viewportWidth = Number(systemInfo.windowWidth) || 375;
@@ -292,7 +411,10 @@ export default {
     handleDockDragEnd() {
       if (!this.dockDragging) return;
       this.dockDragging = false;
-      if (!this.dockDragMoved) return;
+      if (!this.dockDragMoved) {
+        this.restoreFromDock();
+        return;
+      }
       setQiaobaoDockEdge(this.collapsedEdge);
       saveQiaobaoPosition(this.position);
       this.dockDragJustEnded = true;
@@ -304,7 +426,14 @@ export default {
     handleDragEnd() {
       if (!this.dragging) return;
       this.dragging = false;
-      if (!this.dragMoved) return;
+      if (!this.dragMoved) {
+        if (!this.longPressTriggered) {
+          this.openHelp();
+        } else {
+          this.longPressTriggered = false;
+        }
+        return;
+      }
       this.position = this.clampPosition(this.position);
       saveQiaobaoPosition(this.position);
       const edgeThreshold = Math.max(22, this.viewportWidth * 0.06);
@@ -324,6 +453,12 @@ export default {
       return this.position.x + this.petWidth / 2 < this.viewportWidth / 2 ? "left" : "right";
     },
     refreshVisibility() {
+      if (isQiaobaoClosedForSession()) {
+        this.visible = false;
+        this.panelVisible = false;
+        this.clearTimers();
+        return;
+      }
       this.visible = true;
       this.collapsed = isQiaobaoHidden(this.currentPageKey);
       this.collapsedEdge = getQiaobaoDockEdge();
@@ -342,6 +477,12 @@ export default {
       }
     },
     handleVisibilityChange({ scope, pagePath, edge } = {}) {
+      if (scope === "close") {
+        this.visible = false;
+        this.panelVisible = false;
+        this.clearTimers();
+        return;
+      }
       if (scope === "all") this.collapseToEdge(edge);
       if (scope === "page" && pagePath === this.currentPageKey) this.collapseToEdge(edge);
       if (scope === "show" && pagePath === this.currentPageKey) this.expandFromEdge();
@@ -385,16 +526,22 @@ export default {
       this.$emit("close", this.currentPageKey);
     },
     openHideMenu() {
-      if (this.dragging || this.dragMoved) return;
+      // longpress is emitted after touchstart, so `dragging` is normally true here.
+      // Only an actual move should cancel the hide action.
+      if (this.dragMoved || this.dockDragging) return;
+      this.dragging = false;
       this.longPressTriggered = true;
+      this.showBubble = false;
       const edge = this.getNearestEdge();
+      uni.vibrateShort?.({ type: "light" });
       uni.showActionSheet({
-        title: "桥宝收起设置",
-        itemList: ["当前页面收起到边缘", "所有页面收起到边缘"],
+        title: "桥宝操作",
+        itemList: ["仅在当前页面隐藏", "在所有页面隐藏", "关闭桥宝"],
         success: ({ tapIndex }) => {
           if (tapIndex === 0) hideQiaobaoForPage(this.currentPageKey, edge);
           if (tapIndex === 1) hideQiaobaoGlobally(edge);
-          this.$emit("hide", tapIndex === 1 ? "all" : "page");
+          if (tapIndex === 2) this.closeQiaobao();
+          if (tapIndex < 2) this.$emit("hide", tapIndex === 1 ? "all" : "page");
         },
         complete: () => {
           setTimeout(() => {
@@ -403,6 +550,14 @@ export default {
         },
       });
     },
+    closeQiaobao() {
+      this.panelVisible = false;
+      this.showBubble = false;
+      this.action = "idle";
+      this.clearTimers();
+      closeQiaobaoForSession();
+      this.$emit("hide", "close");
+    },
     collapseToEdge(edge = getQiaobaoDockEdge()) {
       this.collapsedEdge = edge === "left" ? "left" : "right";
       this.collapsed = true;
@@ -450,17 +605,16 @@ export default {
 <style scoped lang="scss">
 .qiaobao-assistant {
   position: relative;
-  z-index: 9999;
+  z-index: 980;
 }
 
 .qiaobao-edge-tab {
   position: fixed;
   right: -18rpx;
-  bottom: calc(150rpx + constant(safe-area-inset-bottom));
   bottom: calc(150rpx + env(safe-area-inset-bottom));
   width: 132rpx;
   height: 126rpx;
-  z-index: 99999;
+  z-index: 981;
   overflow: visible;
   animation: qiaobao-edge-in-right .22s cubic-bezier(.22, 1, .36, 1) both;
   -webkit-tap-highlight-color: transparent;
@@ -492,11 +646,10 @@ export default {
 .qiaobao-float {
   position: fixed;
   right: 20rpx;
-  bottom: calc(132rpx + constant(safe-area-inset-bottom));
   bottom: calc(132rpx + env(safe-area-inset-bottom));
   width: 164rpx;
   height: 176rpx;
-  z-index: 99999;
+  z-index: 981;
   transform-origin: 50% 90%;
   -webkit-tap-highlight-color: transparent;
   touch-action: none;
@@ -543,11 +696,8 @@ export default {
 
 .qiaobao-mask {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 999999;
+  inset: 0;
+  z-index: 10080;
   display: flex;
   align-items: flex-end;
   background: rgba(20, 16, 29, .52);
@@ -556,21 +706,24 @@ export default {
 
 .qiaobao-sheet {
   width: 100%;
-  max-height: 80vh;
-  padding: 12rpx 32rpx 32rpx;
-  padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
-  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+  height: min(84vh, 1280rpx);
+  max-height: 84vh;
+  padding: 12rpx 28rpx calc(22rpx + env(safe-area-inset-bottom));
   box-sizing: border-box;
   border-radius: 36rpx 36rpx 0 0;
   background: #fff;
   box-shadow: 0 -16rpx 48rpx rgba(29, 17, 55, .14);
   animation: qiaobao-sheet-in .24s ease-out both;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .qiaobao-handle {
   width: 72rpx;
   height: 8rpx;
-  margin: 4rpx auto 22rpx;
+  margin: 4rpx auto 14rpx;
+  flex: 0 0 auto;
   border-radius: 999rpx;
   background: #ddd8e8;
 }
@@ -578,12 +731,13 @@ export default {
 .qiaobao-sheet-head {
   display: flex;
   align-items: center;
-  min-height: 116rpx;
+  min-height: 92rpx;
+  flex: 0 0 auto;
 }
 
 .qiaobao-avatar-wrap {
-  width: 112rpx;
-  height: 112rpx;
+  width: 88rpx;
+  height: 88rpx;
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -593,35 +747,53 @@ export default {
 }
 
 .qiaobao-avatar {
-  width: 104rpx;
-  height: 104rpx;
+  width: 82rpx;
+  height: 82rpx;
 }
 
 .qiaobao-title-wrap {
   min-width: 0;
   flex: 1;
-  margin-left: 22rpx;
+  margin-left: 18rpx;
   display: flex;
   flex-direction: column;
 }
 
 .qiaobao-kicker {
   color: #7b2cff;
-  font-size: 22rpx;
-  font-weight: 600;
+  font-size: 21rpx;
+  font-weight: 650;
+}
+
+.qiaobao-online-row {
+  display: flex;
+  align-items: center;
+  margin-top: 5rpx;
+}
+
+.qiaobao-online-dot {
+  width: 12rpx;
+  height: 12rpx;
+  margin-right: 10rpx;
+  border-radius: 50%;
+  background: #39ba76;
+  box-shadow: 0 0 0 6rpx rgba(57, 186, 118, .12);
 }
 
 .qiaobao-title {
-  margin-top: 8rpx;
+  min-width: 0;
+  overflow: hidden;
   color: #17131f;
-  font-size: 36rpx;
+  font-size: 30rpx;
   line-height: 1.25;
   font-weight: 700;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .qiaobao-close {
-  width: 64rpx;
-  height: 64rpx;
+  width: 58rpx;
+  height: 58rpx;
   margin-left: 12rpx;
   display: flex;
   align-items: center;
@@ -633,74 +805,184 @@ export default {
   line-height: 1;
 }
 
-.qiaobao-content {
-  max-height: 46vh;
-  margin-top: 24rpx;
-}
-
-.qiaobao-summary {
-  display: block;
-  color: #4b4653;
-  font-size: 28rpx;
-  line-height: 1.7;
-}
-
-.qiaobao-tips {
-  margin-top: 26rpx;
-}
-
-.qiaobao-tip {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 22rpx;
-}
-
-.qiaobao-tip-index {
-  width: 40rpx;
-  height: 40rpx;
-  flex: 0 0 auto;
+.qiaobao-page-context {
   display: flex;
   align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  color: #6b24e8;
-  background: #eee4ff;
-  font-size: 22rpx;
-  font-weight: 700;
+  margin: 12rpx 0 10rpx;
+  padding: 13rpx 18rpx;
+  flex: 0 0 auto;
+  border-radius: 16rpx;
+  background: #f7f3ff;
 }
 
-.qiaobao-tip-text {
+.qiaobao-context-label {
+  flex: 0 0 auto;
+  color: #8e77b7;
+  font-size: 21rpx;
+}
+
+.qiaobao-context-title {
+  min-width: 0;
+  margin-left: 14rpx;
+  overflow: hidden;
+  color: #392857;
+  font-size: 23rpx;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.qiaobao-chat {
+  min-height: 0;
   flex: 1;
-  margin-left: 18rpx;
-  color: #302b38;
-  font-size: 27rpx;
-  line-height: 1.55;
+  padding: 10rpx 0;
+  box-sizing: border-box;
 }
 
-.qiaobao-confirm {
-  width: 100%;
-  height: 88rpx;
-  margin: 28rpx 0 0;
-  padding: 0;
-  border: 0;
-  border-radius: 24rpx;
+.qiaobao-chat-spacer {
+  height: 12rpx;
+}
+
+.qiaobao-message {
+  display: flex;
+  align-items: flex-end;
+  margin: 12rpx 0;
+  padding-right: 54rpx;
+}
+
+.qiaobao-message.is-user {
+  justify-content: flex-end;
+  padding: 0 0 0 54rpx;
+}
+
+.qiaobao-message-avatar {
+  width: 54rpx;
+  height: 54rpx;
+  margin-right: 12rpx;
+  flex: 0 0 auto;
+  border-radius: 18rpx;
+  background: #f0e8ff;
+}
+
+.qiaobao-message-bubble {
+  max-width: 100%;
+  padding: 17rpx 20rpx;
+  box-sizing: border-box;
+  border-radius: 10rpx 24rpx 24rpx 24rpx;
+  color: #292431;
+  background: #f4f1f7;
+  font-size: 26rpx;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.qiaobao-message.is-user .qiaobao-message-bubble {
+  border-radius: 24rpx 10rpx 24rpx 24rpx;
   color: #fff;
   background: #7433f1;
-  font-size: 30rpx;
-  font-weight: 600;
-  line-height: 88rpx;
 }
 
-.qiaobao-confirm::after {
+.qiaobao-message-bubble.is-typing {
+  display: flex;
+  align-items: center;
+  color: #756c80;
+}
+
+.qiaobao-dots {
+  margin-left: 8rpx;
+  color: #7b2cff;
+  letter-spacing: 3rpx;
+  animation: qiaobao-dots 1s ease-in-out infinite;
+}
+
+.qiaobao-suggestions {
+  width: 100%;
+  flex: 0 0 auto;
+  margin: 2rpx 0 12rpx;
+  white-space: nowrap;
+}
+
+.qiaobao-suggestion-row {
+  display: inline-flex;
+  gap: 12rpx;
+  padding-right: 12rpx;
+}
+
+.qiaobao-suggestion {
+  height: 56rpx;
+  margin: 0;
+  padding: 0 22rpx;
+  border: 1rpx solid #ddcff8;
+  border-radius: 999rpx;
+  color: #6430bd;
+  background: #faf8ff;
+  font-size: 23rpx;
+  line-height: 54rpx;
+}
+
+.qiaobao-suggestion::after {
   border: 0;
 }
 
+.qiaobao-compose {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: 10rpx;
+  border: 1rpx solid #e9e4ef;
+  border-radius: 24rpx;
+  background: #f8f7fa;
+}
+
+.qiaobao-input {
+  height: 66rpx;
+  min-width: 0;
+  flex: 1;
+  padding: 0 14rpx;
+  color: #25202c;
+  font-size: 26rpx;
+}
+
+.qiaobao-send {
+  width: 112rpx;
+  height: 62rpx;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 18rpx;
+  color: #fff;
+  background: #7433f1;
+  font-size: 25rpx;
+  font-weight: 650;
+  line-height: 62rpx;
+}
+
+.qiaobao-send[disabled] {
+  color: #a9a3af;
+  background: #e7e3eb;
+}
+
+.qiaobao-send::after {
+  border: 0;
+}
+
+.qiaobao-sheet-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 auto;
+  padding: 14rpx 4rpx 0;
+}
+
 .qiaobao-hide-hint {
-  display: block;
-  margin-top: 18rpx;
   color: #9a94a3;
-  text-align: center;
+  font-size: 20rpx;
+}
+
+.qiaobao-human-link {
+  color: #7034dc;
   font-size: 22rpx;
+  font-weight: 600;
 }
 
 @keyframes qiaobao-bubble-in {
@@ -751,6 +1033,18 @@ export default {
   }
 }
 
+@keyframes qiaobao-dots {
+
+  0%,
+  100% {
+    opacity: .35;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
 @keyframes qiaobao-edge-in-right {
   from {
     opacity: 0;