立论样式修改

Debate_front/src/components/ArgumentCom.vue

@@ -48,6 +48,9 @@
       scroll-y
       :scroll-into-view="scrollToView"
       scroll-with-animation
+      :class="{ 'fullscreen-chat': isChatFullscreen }"
+      @transitionend="handleTransitionEnd"
+      :style="{ height: chatAreaHeight }"
     >
       <view
         v-for="(msg, index) in messages"
@@ -67,30 +70,46 @@
             </view>
           </block>
           <block v-else>
-            {{ msg.content }}
+            <text class="typewriter" v-if="msg.role === 'ai' && msg.typing">{{ msg.displayContent }}</text>
+            <text v-else>{{ msg.content }}</text>
           </block>
         </view>
         <view class="avatar user-avatar" v-if="msg.role === 'user'">我</view>
       </view>
+      <!-- 全屏按钮 -->
+      <view class="fullscreen-toggle-button" @click="toggleFullscreen">
+        <image
+          :src="
+            isChatFullscreen
+              ? '/static/icons/fullscreen-exit-line.png'
+              : '/static/icons/fullscreen-line.png'
+          "
+          mode="aspectFit"
+        ></image>
+      </view>
     </scroll-view>
 
     <!-- 输入框与发送按钮 -->
-    <view class="chat-input">
+    <view class="chat-input" :class="{ 'fullscreen-input': isChatFullscreen }" :style="{ bottom: inputBottom }">
       <view class="input-group">
         <input
           class="input-box"
           type="text"
           v-model="position"
           placeholder="请输入论方，例如：正方"
+          placeholder-style="color: #ffffff; font-size: 28rpx;"
         />
-        <view class="textarea-container">
+        <view class="textarea-wrapper">
           <textarea
             class="textarea-box"
             v-model="question"
             placeholder="请输入辩题，例如：应不应该取消作业"
+            placeholder-style="color: #ffffff; font-size: 28rpx;"
             auto-height
+            @focus="onInputFocus"
+            @blur="onInputBlur"
           />
-          <button class="send-button-embedded" @click="sendMessage()">
+          <button class="send-button" @click="sendMessage()">
             <image
               src="/static/icons/send-plane-fill.png"
               mode="aspectFit"
@@ -123,9 +142,9 @@
 
 <script>
 import { useArgumentStore } from "../stores/ArgumentStore";
+import { useTokenStore } from "../stores/tokenStore";
 import Popup from "./Popup.vue";
 import ConversationHistory from "./ConversationHistory.vue";
-import { useTokenStore } from "../stores/tokenStore";
 
 export default {
   components: { Popup, ConversationHistory },
@@ -133,58 +152,109 @@ export default {
     this.getHistoryList();
     this.conversationId = useArgumentStore().conversationId;
     console.log("conversationId:", this.conversationId);
-
     this.messages = useArgumentStore().conversation;
+    this.calculateChatAreaHeight();
+    this.systemInfo = uni.getSystemInfoSync();
+    this.tabBarHeight = this.systemInfo.platform === 'ios' ? 100 : 80;
   },
   data() {
     return {
       conversationId: -1,
-
       showSheet: false,
       showHistory: false,
       storeArg: "",
-
       input: "",
       messages: [
         {
           role: "ai",
           content:
             "哈喽~ 我是辩论助手，很高兴为你服务！请告诉我你想立论的立场和题目。",
+          displayContent: "",
+          typing: false,
         },
       ],
       scrollToView: "",
       position: "",
       question: "",
-      isCardCollapsed: false, // 控制卡片是否收缩
+      isCardCollapsed: false,
+      isChatFullscreen: false,
+      isTransitioning: false,
+      inputBottom: '100rpx', // 默认高度，避免与TabBar重叠
+      keyboardHeight: 0,
+      chatAreaHeight: 'calc(100vh - 400rpx)',
+      systemInfo: null,
+      tabBarHeight: 100,
       chatHistory: ["test1", "test2"],
     };
   },
+  onLoad() {
+    uni.onKeyboardHeightChange((res) => {
+      this.keyboardHeight = res.height;
+      this.adjustLayout();
+    });
+  },
+  onUnload() {
+    uni.offKeyboardHeightChange();
+  },
   methods: {
+    calculateChatAreaHeight() {
+      // 计算聊天区域高度，留出顶部卡片和输入框的空间
+      const cardHeight = this.isCardCollapsed ? 120 : 180;
+      const inputHeight = 200;
+      const safeArea = this.systemInfo?.safeAreaInsets?.bottom || 0;
+      this.chatAreaHeight = `calc(100vh - ${cardHeight + inputHeight + safeArea}rpx)`;
+    },
+    adjustLayout() {
+      if (this.keyboardHeight > 0) {
+        // 键盘弹出时
+        this.inputBottom = `${this.keyboardHeight * 2 + this.tabBarHeight}rpx`;
+        this.chatAreaHeight = `calc(100vh - 300rpx - ${this.keyboardHeight * 2}rpx)`;
+      } else {
+        // 键盘收起时
+        this.inputBottom = `${this.tabBarHeight}rpx`;
+        this.calculateChatAreaHeight();
+      }
+      this.scrollToBottom();
+    },
+    toggleFullscreen() {
+      if (this.isTransitioning) return;
+      this.isTransitioning = true;
+      this.isChatFullscreen = !this.isChatFullscreen;
+      this.adjustLayout();
+    },
+    handleTransitionEnd() {
+      this.isTransitioning = false;
+    },
+    onInputFocus() {
+      this.scrollToBottom();
+    },
+    onInputBlur() {
+      // 延迟处理，避免在点击发送按钮时立即收起键盘
+      setTimeout(() => {
+        if (!this.isChatFullscreen) {
+          this.adjustLayout();
+        }
+      }, 200);
+    },
     async getHistoryList() {
       return new Promise((resolve, reject) => {
         const token = useTokenStore().token.content;
-
         console.log("token:", token);
         uni.request({
-          url: "http://localhost:8080/api/conversation/list", // 修改为正确的URL
-          method: "GET", // 修改请求方法为GET
+          url: "http://localhost:8080/api/conversation/list",
+          method: "GET",
           header: {
             Authorization: "Bearer " + token,
           },
           success: (res) => {
             console.log("res:", res);
             if (res.statusCode === 200 && res.data.code === 200) {
-              // 过滤出 type === "argument" 的数据
               const argumentList = res.data.data.filter(
                 (item) => item.type === "argument"
               );
-
-              // 赋值给 chatHistory
               this.chatHistory = argumentList;
-
-              // 可选：resolve 第一个结果或提示信息
               if (argumentList.length > 0) {
-                resolve(argumentList); // 或者 resolve(argumentList[0]) 如果你只需要第一个
+                resolve(argumentList);
               } else {
                 resolve("没有找到类型为 argument 的对话");
               }
@@ -204,26 +274,23 @@ export default {
           role: "ai",
           content:
             "哈喽~ 我是辩论助手，很高兴为你服务！请告诉我你想立论的立场和题目。",
+          displayContent: "",
+          typing: false,
         },
       ];
       console.log("createNew");
-
       this.conversationId = -1;
-
       useArgumentStore().setConversationId(-1);
-
       useArgumentStore().setConversation(this.messages);
     },
     handleSelect(conversationId) {
       console.log("选中了历史记录 id:", conversationId);
       this.showHistory = false;
-
       return new Promise((resolve, reject) => {
         const token = useTokenStore().token.content;
-
         console.log("token:", token);
         uni.request({
-          url: `http://localhost:8080/api/conversation/argument/${conversationId}`, // 使用模板字符串插入 conversationId
+          url: `http://localhost:8080/api/conversation/argument/${conversationId}`,
           method: "GET",
           header: {
             Authorization: "Bearer " + token,
@@ -236,16 +303,18 @@ export default {
                 this.messages.push({
                   role: "user",
                   content: item.userMessage,
+                  displayContent: item.userMessage,
+                  typing: false,
                 });
                 this.messages.push({
                   role: "ai",
                   content: item.content,
+                  displayContent: item.content,
+                  typing: false,
                 });
               }
               useArgumentStore().setConversation(this.messages);
-
               this.conversationId = conversationId;
-
               useArgumentStore().setConversationId(conversationId);
             } else {
               reject("请求失败：" + (res.data.message || "未知错误"));
@@ -261,21 +330,18 @@ export default {
       const pinia = this.$pinia;
       const argumentStore = useArgumentStore(pinia);
       argumentStore.setArgument(this.storeArg);
-      this.$emit("start-debate", "argument"); // 通知父组件
+      this.$emit("start-debate", "argument");
     },
-    // 切换卡片展开/收缩状态
     toggleCard() {
       this.isCardCollapsed = !this.isCardCollapsed;
+      this.calculateChatAreaHeight();
     },
-
-    // 生成随机背景圆圈样式
     getRandomCircleStyle() {
       const size = Math.random() * 300 + 100;
       const x = Math.random() * 100;
       const y = Math.random() * 100;
       const delay = Math.random() * 5;
       const duration = Math.random() * 10 + 15;
-
       return {
         width: `${size}rpx`,
         height: `${size}rpx`,
@@ -285,48 +351,43 @@ export default {
         animationDuration: `${duration}s`,
       };
     },
-
     async sendMessage() {
-      // 添加用户消息
+      if (!this.position.trim() || !this.question.trim()) return;
       this.messages.push({
         role: "user",
         content: this.position + " " + this.question,
+        displayContent: this.position + " " + this.question,
+        typing: false,
       });
-
       this.scrollToBottom();
-
-      // 添加 AI loading 消息（占位）
       const aiIndex = this.messages.length;
-      this.messages.push({ role: "ai", content: "", loading: true });
+      this.messages.push({ role: "ai", content: "", displayContent: "", loading: true, typing: false });
       this.scrollToBottom();
-
-      // 调用 AI 接口
       const reply = await this.callAI(this.position, this.question);
-
-      // 替换 loading 消息为真实 AI 回答
-      this.messages.splice(aiIndex, 1, { role: "ai", content: reply });
+      this.messages.splice(aiIndex, 1, {
+        role: "ai",
+        content: reply,
+        displayContent: "",
+        typing: true,
+      });
       this.scrollToBottom();
+      this.typeMessage(aiIndex, reply);
     },
-
     async callAI(topic, stance) {
       this.position = "";
       this.question = "";
       return new Promise((resolve, reject) => {
-        console.log("callAI:", topic, stance);
-
-        // 获取 token，这里假设从本地存储获取
         const token = useTokenStore().token.content;
         if (!token) {
           reject("未登录，请先登录");
           return;
         }
-
         uni.request({
           url: "http://localhost:8080/api/ai/argument",
           method: "POST",
           header: {
             "Content-Type": "application/json",
-            Authorization: "Bearer " + token, // 添加认证头
+            Authorization: "Bearer " + token,
           },
           data: {
             conversationId: this.conversationId,
@@ -335,21 +396,14 @@ export default {
           },
           success: (res) => {
             console.log("API响应:", res);
-
             if (res.statusCode === 200 && res.data.code === 200) {
               const responseData = res.data.data;
-
-              console.log("responseData:", responseData);
-
-              // 更新会话ID（如果是新会话）
               if (this.conversationId == -1) {
                 this.conversationId = responseData.conversationId;
-                console.log("更新会话ID为：", responseData.id);
+                console.log("更新会话ID为：", responseData.conversationId);
                 this.getHistoryList();
-
                 useArgumentStore().setConversationId(this.conversationId);
               }
-
               resolve(responseData.content);
             } else {
               reject("请求失败：" + (res.data.message || "未知错误"));
@@ -362,16 +416,28 @@ export default {
         });
       });
     },
-
+    typeMessage(index, fullText) {
+      let currentLength = 0;
+      const speed = 50;
+      const type = () => {
+        if (currentLength <= fullText.length) {
+          this.messages[index].displayContent = fullText.slice(0, currentLength);
+          currentLength++;
+          setTimeout(type, speed);
+        } else {
+          this.messages[index].typing = false;
+          this.scrollToBottom();
+        }
+      };
+      type();
+    },
     scrollToBottom() {
       this.$nextTick(() => {
         this.scrollToView = "msg" + (this.messages.length - 1);
       });
     },
     onLongPress(msg, index) {
-      console.log("长按消息", msg, index);
       if (msg.role !== "ai") return;
-
       this.storeArg = msg;
       this.showSheet = true;
     },
@@ -389,11 +455,9 @@ export default {
   background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
   overflow-x: hidden;
   box-sizing: border-box;
-  padding-bottom: 180rpx; /* 为底部TabBar留出空间 */
   position: relative;
 }
 
-/* 动态背景 */
 .animated-bg {
   position: absolute;
   top: 0;
@@ -414,13 +478,11 @@ export default {
   );
   animation: float 20s infinite ease-in-out;
   opacity: 0.4;
-  /* 添加过渡效果 */
   transition: all 1.5s ease-in-out;
 }
 
 @keyframes float {
-  0%,
-  100% {
+  0%, 100% {
     transform: translate(0, 0) scale(1);
   }
   25% {
@@ -434,7 +496,6 @@ export default {
   }
 }
 
-/* 顶部卡片 */
 .content-card {
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(10px);
@@ -531,8 +592,7 @@ export default {
   0% {
     transform: translateX(-100%) rotate(45deg);
   }
-  20%,
-  100% {
+  20%, 100% {
     transform: translateX(100%) rotate(45deg);
   }
 }
@@ -576,7 +636,6 @@ export default {
   transition: all 0.3s ease;
 }
 
-/* 聊天区域 */
 .chat-area {
   flex: 1;
   width: 100%;
@@ -588,10 +647,82 @@ export default {
   border: 1px solid rgba(255, 255, 255, 0.15);
   position: relative;
   z-index: 1;
-  transition: all 0.3s ease;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: top;
+}
+
+.chat-area.fullscreen-chat {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: calc(100vh - 300rpx - env(safe-area-inset-bottom));
+  padding: 30rpx;
+  border-radius: 0;
+  z-index: 999;
+  background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
+  transform: scale(1);
+  animation: expand 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes expand {
+  0% {
+    transform: scale(0.95);
+    opacity: 0.8;
+    border-radius: 28rpx;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    border-radius: 0;
+  }
+}
+
+.chat-area:not(.fullscreen-chat) {
+  animation: collapse 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes collapse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+    border-radius: 0;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 0.8;
+    border-radius: 28rpx;
+  }
+}
+
+.fullscreen-toggle-button {
+  position: absolute;
+  right: 10rpx;
+  top: 50%;
+  transform: translateY(-50%) scale(1);
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1000;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease;
+}
+
+.fullscreen-toggle-button:active {
+  transform: translateY(-50%) scale(0.9);
+}
+
+.fullscreen-toggle-button image {
+  width: 36rpx;
+  height: 36rpx;
+  filter: brightness(0) invert(1);
 }
 
-/* 消息通用样式 */
 .chat-message {
   display: flex;
   margin-bottom: 30rpx;
@@ -618,7 +749,6 @@ export default {
   justify-content: flex-start;
 }
 
-/* 头像样式 */
 .avatar {
   width: 70rpx;
   height: 70rpx;
@@ -640,7 +770,6 @@ export default {
   margin-right: 0;
 }
 
-/* 气泡样式 */
 .bubble {
   max-width: 70%;
   padding: 20rpx 24rpx;
@@ -650,7 +779,7 @@ export default {
   word-break: break-word;
   box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
   position: relative;
-  transition: all 0.3s ease; /* 添加过渡效果 */
+  transition: all 0.3s ease;
 }
 
 .from-user .bubble {
@@ -669,7 +798,7 @@ export default {
   height: 0;
   border-left: 16rpx solid #f59e0b;
   border-top: 16rpx solid transparent;
-  transition: all 0.3s ease; /* 添加过渡效果 */
+  transition: all 0.3s ease;
 }
 
 .from-ai .bubble {
@@ -688,10 +817,15 @@ export default {
   height: 0;
   border-right: 16rpx solid rgba(255, 255, 255, 0.2);
   border-top: 16rpx solid transparent;
-  transition: all 0.3s ease; /* 添加过渡效果 */
+  transition: all 0.3s ease;
+}
+
+.typewriter {
+  display: inline-block;
+  overflow: hidden;
+  white-space: pre-wrap;
 }
 
-/* 加载动画 */
 .loading-animation {
   display: flex;
   align-items: center;
@@ -717,9 +851,7 @@ export default {
 }
 
 @keyframes bounce {
-  0%,
-  80%,
-  100% {
+  0%, 80%, 100% {
     transform: scale(0);
   }
   40% {
@@ -727,7 +859,6 @@ export default {
   }
 }
 
-/* 输入区域 */
 .chat-input {
   display: flex;
   padding: 16rpx;
@@ -735,35 +866,49 @@ export default {
   border-radius: 28rpx;
   align-items: flex-end;
   border: 1px solid rgba(255, 255, 255, 0.2);
-  position: relative;
-  z-index: 1;
-  margin-bottom: 20rpx;
+  bottom: var(--input-bottom, 100rpx);
+  z-index: 100;
+  margin-bottom: 180rpx;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
 }
 
-.send-button.left-send {
-  margin-right: 12rpx;
-  margin-left: 0;
-  background: #f59e0b;
-  width: 70rpx;
-  height: 70rpx;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4rpx 15rpx rgba(245, 158, 11, 0.4);
-  transition: all 0.3s;
-  padding: 0;
+.chat-input.fullscreen-input {
+  border-radius: 0;
+  padding: 20rpx;
+  background: rgba(67, 56, 202, 0.9);
+  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  position: fixed;
+  margin-bottom: 180rpx;
 }
 
-.send-button.left-send:active {
-  transform: scale(0.95) rotate(-15deg);
-  box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.3);
+@keyframes slideUp {
+  0% {
+    transform: translateY(100rpx);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
-.send-button.left-send image {
-  width: 36rpx;
-  height: 36rpx;
-  filter: brightness(0) invert(1);
+.chat-input:not(.fullscreen-input) {
+  animation: slideDownInput 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes slideDownInput {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100rpx);
+    opacity: 0.8;
+  }
 }
 
 .input-group {
@@ -771,6 +916,19 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 16rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.textarea-wrapper {
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  padding-right: 10rpx;
+  padding-bottom: 10rpx;
+  box-sizing: border-box;
+  border-radius: 20rpx;
 }
 
 .input-box {
@@ -782,57 +940,47 @@ export default {
   border: 1px solid rgba(255, 255, 255, 0.3);
   transition: all 0.3s;
   height: 70rpx;
-}
-
-.textarea-container {
-  position: relative;
   width: 100%;
+  box-sizing: border-box;
 }
 
 .textarea-box {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 20rpx;
-  padding: 16rpx 20rpx 16rpx 90rpx; /* 增加左侧内边距 */
+  flex: 1;
+  padding: 16rpx 20rpx;
   font-size: 28rpx;
   color: #ffffff;
-  border: 1px solid rgba(255, 255, 255, 0.3);
   transition: all 0.3s;
   min-height: 70rpx;
   max-height: 180rpx;
-  width: 100%;
+  margin-right: 16rpx;
   box-sizing: border-box;
+  background: transparent;
+  border: none;
 }
 
-.send-button-embedded {
-  position: absolute;
-  bottom: 16rpx;
-  left: 16rpx;
-  background: transparent;
-  width: 60rpx;
-  height: 60rpx;
+.send-button {
+  background: #f59e0b;
+  width: 70rpx;
+  height: 70rpx;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 4rpx 15rpx rgba(245, 158, 11, 0.4);
   transition: all 0.3s;
   padding: 0;
-  z-index: 2;
-}
-
-.send-button-embedded:active {
-  transform: scale(1.2) rotate(-15deg);
+  flex-shrink: 0;
 }
 
-.send-button-embedded image {
-  width: 40rpx;
-  height: 40rpx;
-  filter: invert(72%) sepia(87%) saturate(1242%) hue-rotate(325deg)
-    brightness(101%) contrast(96%);
+.send-button:active {
+  transform: scale(0.95) rotate(-15deg);
+  box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.3);
 }
 
-.input-box::placeholder,
-.textarea-box::placeholder {
-  color: burlywood;
+.send-button image {
+  width: 36rpx;
+  height: 36rpx;
+  filter: brightness(0) invert(1);
 }
 
 .input-box:focus,
@@ -842,10 +990,7 @@ export default {
   background: rgba(255, 255, 255, 0.25);
 }
 
-/* 底部安全区域 */
 .safe-area-bottom {
-  height: 20rpx;
-  height: calc(20rpx + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
-  height: calc(20rpx + env(safe-area-inset-bottom)); /* iOS 11.2+ */
+  height: calc(100rpx + env(safe-area-inset-bottom));
 }
-</style>
+</style>