前端修改

Debate_front/src/components/ArgumentCom.vue

@@ -71,7 +71,11 @@
           </block>
           <block v-else>
             <text class="typewriter" v-if="msg.role === 'ai' && msg.typing">{{ msg.displayContent }}</text>
-            <text v-else>{{ msg.content }}</text>
+            <rich-text
+              v-else
+              :nodes="parseMarkdown(msg.content)"
+              class="markdown-content"
+            ></rich-text>
           </block>
         </view>
         <view class="avatar user-avatar" v-if="msg.role === 'user'">我</view>
@@ -145,6 +149,8 @@ import { useArgumentStore } from "../stores/ArgumentStore";
 import { useTokenStore } from "../stores/tokenStore";
 import Popup from "./Popup.vue";
 import ConversationHistory from "./ConversationHistory.vue";
+import { marked } from "marked";
+
 
 export default {
   components: { Popup, ConversationHistory },
@@ -404,7 +410,11 @@ export default {
                 this.getHistoryList();
                 useArgumentStore().setConversationId(this.conversationId);
               }
-              resolve(responseData.content);
+              // 去除 review 字段中的反引号再返回
+              const cleanedArgument =
+                responseData.content?.replace(/`/g, "") || "";
+
+              resolve(cleanedArgument);
             } else {
               reject("请求失败：" + (res.data.message || "未知错误"));
             }
@@ -446,6 +456,83 @@ export default {
 </script>
 
 <style scoped>
+/* 添加 Markdown 内容的基础样式 */
+.markdown-content {
+  width: 100%; /* 确保宽度不超出容器 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  overflow-wrap: break-word;
+
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+/* 标题样式 */
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  margin: 16rpx 0;
+  font-weight: bold;
+}
+
+.markdown-content h1 {
+  font-size: 36rpx;
+}
+
+.markdown-content h2 {
+  font-size: 32rpx;
+}
+
+/* 列表样式 */
+.markdown-content ul,
+.markdown-content ol {
+  padding-left: 40rpx;
+  margin: 12rpx 0;
+}
+
+.markdown-content li {
+  margin: 8rpx 0;
+}
+
+/* 代码块样式 */
+.markdown-content a {
+  word-break: break-all; /* 长链接强制换行 */
+}
+.markdown-content pre {
+  white-space: pre-wrap; /* 保留空格但换行 */
+  word-break: break-all; /* 允许任意字符换行 */
+  overflow-wrap: break-word; /* 优先在单词间换行 */
+  background: rgba(0, 0, 0, 1);
+  padding: 12rpx;
+  border-radius: 8rpx;
+}
+
+/* 引用样式 */
+.markdown-content blockquote {
+  border-left: 4rpx solid #f59e0b;
+  padding-left: 20rpx;
+  margin: 16rpx 0;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* 表格样式 */
+.markdown-content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 16rpx 0;
+}
+
+.markdown-content th,
+.markdown-content td {
+  border: 1rpx solid rgba(255, 255, 255, 0.2);
+  padding: 12rpx;
+}
+
+.markdown-content th {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 .argument-component {
   width: 100%;
   height: 100vh;
@@ -696,7 +783,7 @@ export default {
 }
 
 .fullscreen-toggle-button {
-  position: absolute;
+  position: fixed;
   right: 10rpx;
   top: 50%;
   transform: translateY(-50%) scale(1);

Debate_front/src/components/ReviewCom.vue

@@ -51,6 +51,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"
@@ -70,25 +73,50 @@
             </view>
           </block>
           <block v-else>
-            {{ msg.content }}
+            <text class="typewriter" v-if="msg.role === 'ai' && msg.typing">{{
+              msg.displayContent
+            }}</text>
+            <rich-text
+              v-else
+              :nodes="parseMarkdown(msg.content)"
+              class="markdown-content"
+            ></rich-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">
-        <view class="textarea-container">
+        <view class="textarea-wrapper">
           <textarea
             class="textarea-box"
-            v-model="content"
+            v-model="question"
             placeholder="粘贴你的辩论记录，AI将为你分析优缺点并提供改进建议"
+            placeholder-style="color: #ffffff; font-size: 28rpx;"
             auto-height
+            @focus="onInputFocus"
+            @blur="onInputBlur"
             maxlength="50000"
           />
-          <button class="send-button-embedded" @click="sendMessage()">
+          <button class="send-button" @click="sendMessage()">
             <image
               src="/static/icons/send-plane-fill.png"
               mode="aspectFit"
@@ -126,9 +154,10 @@ import Popup from "./Popup.vue";
 import ConversationHistory from "./ConversationHistory.vue";
 import { useTokenStore } from "../stores/tokenStore";
 import { useReviewStore } from "../stores/reviewStore";
+import { marked } from "marked";
 
 export default {
-  components: { Popup,ConversationHistory },
+  components: { Popup, ConversationHistory },
   props: {
     debate: {
       type: Object,
@@ -138,12 +167,16 @@ export default {
   mounted() {
     const pinia = this.$pinia;
     const store = useDebateStore(pinia);
-    if(store.selectedDebate)this.content = store.selectedDebate;
+    if (store.selectedDebate) this.content = store.selectedDebate;
 
     this.getHistoryList();
     this.conversationId = useReviewStore().conversationId;
 
     this.messages = useReviewStore().conversation;
+
+    this.calculateChatAreaHeight();
+    this.systemInfo = uni.getSystemInfoSync();
+    this.tabBarHeight = this.systemInfo.platform === "ios" ? 100 : 80;
   },
   data() {
     return {
@@ -159,14 +192,119 @@ export default {
           role: "ai",
           content:
             "欢迎使用辩论复盘分析！请粘贴你的辩论记录，我将为你分析优缺点并提供改进建议。",
+          displayContent: "",
+          typing: false,
         },
       ],
       scrollToView: "",
       content: "",
       isCardCollapsed: false, // 控制卡片是否收缩
+      tabBarHeight: 100, // 假设 tab bar 高度为 100rpx，可根据实际调整
+      isChatFullscreen: false,
+      isTransitioning: false,
+      inputBottom: "100rpx", // 默认高度，避免与TabBar重叠
+      keyboardHeight: 0,
+      chatAreaHeight: "calc(100vh - 400rpx)",
+      systemInfo: null,
+      tabBarHeight: 100,
     };
   },
+  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);
+    },
+    toggleFullscreen() {
+      if (this.isTransitioning) return;
+      this.isTransitioning = true;
+      this.isChatFullscreen = !this.isChatFullscreen;
+    },
+    handleTransitionEnd() {
+      this.isTransitioning = false;
+    },
+    onInputFocus() {
+      // 输入框聚焦时确保滚动到可见区域
+      this.scrollToBottom();
+    },
+    onInputBlur() {
+      // 输入框失焦时恢复默认底部距离
+      this.inputBottom = this.tabBarHeight;
+    },
+    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();
+    },
+    parseMarkdown(markdown) {
+      // 简单转换
+      let html = marked(markdown || "");
+
+      // 基础安全处理（可选）
+      html = html.replace(/<script.*?>.*?<\/script>/gi, "");
+
+      return html;
+    },
     async getHistoryList() {
       return new Promise((resolve, reject) => {
         const token = useTokenStore().token.content;
@@ -211,6 +349,8 @@ export default {
           role: "ai",
           content:
             "哈喽~ 我是辩论助手，很高兴为你服务！请告诉我你想立论的立场和题目。",
+          displayContent: "",
+          typing: false,
         },
       ];
       console.log("createNew");
@@ -238,15 +378,15 @@ export default {
           success: (res) => {
             console.log("res:", res);
             if (res.statusCode === 200 && res.data.code === 200) {
-              this.messages=[];
+              this.messages = [];
-              for(let item of res.data.data){
+              for (let item of res.data.data) {
                 this.messages.push({
-                  role:"user",
+                  role: "user",
-                  content:item.userMessage
+                  content: item.userMessage,
                 });
                 this.messages.push({
-                  role:"ai",
+                  role: "ai",
-                  content:item.content
+                  content: item.content,
                 });
               }
               useReviewStore().setConversation(this.messages);
@@ -286,6 +426,7 @@ export default {
     // 切换卡片展开/收缩状态
     toggleCard() {
       this.isCardCollapsed = !this.isCardCollapsed;
+      this.calculateChatAreaHeight();
     },
 
     // 生成随机背景圆圈样式
@@ -345,7 +486,7 @@ export default {
           method: "POST",
           header: {
             "Content-Type": "application/json",
-            Authorization: "Bearer " + token
+            Authorization: "Bearer " + token,
           },
           data: {
             conversationId: this.conversationId,
@@ -368,7 +509,11 @@ export default {
                 useReviewStore().setConversationId(this.conversationId);
               }
 
-              resolve(responseData.review);
+              // 去除 review 字段中的反引号再返回
+              const cleanedReview =
+                responseData.review?.replace(/`/g, "") || "";
+
+              resolve(cleanedReview);
             } else {
               reject("请求失败：" + (res.data.message || "未知错误"));
             }
@@ -390,6 +535,100 @@ export default {
 </script>
 
 <style scoped>
+.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;
+}
+/* 添加 Markdown 内容的基础样式 */
+.markdown-content {
+  width: 100%; /* 确保宽度不超出容器 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  overflow-wrap: break-word;
+
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+/* 标题样式 */
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  margin: 16rpx 0;
+  font-weight: bold;
+}
+
+.markdown-content h1 {
+  font-size: 36rpx;
+}
+
+.markdown-content h2 {
+  font-size: 32rpx;
+}
+
+/* 列表样式 */
+.markdown-content ul,
+.markdown-content ol {
+  padding-left: 40rpx;
+  margin: 12rpx 0;
+}
+
+.markdown-content li {
+  margin: 8rpx 0;
+}
+
+/* 代码块样式 */
+.markdown-content a {
+  word-break: break-all; /* 长链接强制换行 */
+}
+.markdown-content pre {
+  white-space: pre-wrap; /* 保留空格但换行 */
+  word-break: break-all; /* 允许任意字符换行 */
+  overflow-wrap: break-word; /* 优先在单词间换行 */
+  background: rgba(0, 0, 0, 1);
+  padding: 12rpx;
+  border-radius: 8rpx;
+}
+
+/* 引用样式 */
+.markdown-content blockquote {
+  border-left: 4rpx solid #f59e0b;
+  padding-left: 20rpx;
+  margin: 16rpx 0;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* 表格样式 */
+.markdown-content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 16rpx 0;
+}
+
+.markdown-content th,
+.markdown-content td {
+  border: 1rpx solid rgba(255, 255, 255, 0.2);
+  padding: 12rpx;
+}
+
+.markdown-content th {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 .review-component {
   width: 100%;
   height: 100vh;
@@ -593,12 +832,85 @@ export default {
   background: rgba(255, 255, 255, 0.1);
   border-radius: 28rpx;
   padding: 30rpx;
-  margin-bottom: 30rpx;
+  margin-bottom: -50rpx;
   overflow-y: auto;
   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: fixed;
+  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);
 }
 
 /* 消息通用样式 */
@@ -607,6 +919,8 @@ export default {
   margin-bottom: 30rpx;
   align-items: flex-start;
   animation: fadeIn 0.5s ease-out;
+
+  overflow-x: auto;
 }
 
 @keyframes fadeIn {
@@ -661,6 +975,7 @@ export default {
   box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
   position: relative;
   transition: all 0.3s ease; /* 添加过渡效果 */
+  overflow-wrap: break-word;
 }
 
 .from-user .bubble {
@@ -700,7 +1015,11 @@ export default {
   border-top: 16rpx solid transparent;
   transition: all 0.3s ease; /* 添加过渡效果 */
 }
-
+.typewriter {
+  display: inline-block;
+  overflow: hidden;
+  white-space: pre-wrap;
+}
 /* 加载动画 */
 .loading-animation {
   display: flex;
@@ -745,9 +1064,49 @@ export default {
   border-radius: 28rpx;
   align-items: flex-end;
   border: 1px solid rgba(255, 255, 255, 0.2);
-  position: relative;
+  bottom: var(--input-bottom, 100rpx);
-  z-index: 1;
+  z-index: 100;
-  margin-bottom: 20rpx;
+  margin-bottom: 50rpx;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+}
+
+.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;
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(100rpx);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 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 {
@@ -755,58 +1114,61 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 16rpx;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.textarea-container {
+.textarea-wrapper {
-  position: relative;
+  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;
 }
 
-.send-button-embedded {
+.textarea-box {
-  position: absolute;
+  flex: 1;
-  bottom: 16rpx;
+  padding: 16rpx 20rpx;
-  left: 16rpx;
+  font-size: 28rpx;
+  color: #ffffff;
+  transition: all 0.3s;
+  min-height: 100rpx;
+  max-height: 180rpx;
+  margin-right: 16rpx;
+  box-sizing: border-box;
   background: transparent;
-  width: 60rpx;
+  border: none;
-  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;
+  flex-shrink: 0;
-}
-
-.send-button-embedded:active {
-  transform: scale(1.2) rotate(-15deg);
-}
-
-.send-button-embedded image {
-  width: 40rpx;
-  height: 40rpx;
-  filter: invert(72%) sepia(87%) saturate(1242%) hue-rotate(325deg)
-    brightness(101%) contrast(96%);
 }
 
-.textarea-box {
+.send-button:active {
-  background: rgba(255, 255, 255, 0.2);
+  transform: scale(0.95) rotate(-15deg);
-  border-radius: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.3);
-  padding: 16rpx 20rpx 16rpx 90rpx; /* 增加左侧内边距为发送按钮留出空间 */
-  font-size: 28rpx;
-  color: #ffffff;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  transition: all 0.3s;
-  min-height: 120rpx;
-  max-height: 300rpx; /* 增加最大高度，适合复盘分析的长文本 */
-  width: 100%;
-  box-sizing: border-box;
 }
 
-.textarea-box::placeholder {
+.send-button image {
-  color: #362d2de1;
+  width: 36rpx;
+  height: 36rpx;
+  filter: brightness(0) invert(1);
 }
 
+.input-box:focus,
 .textarea-box:focus {
   border-color: #f59e0b;
   outline: none;
@@ -815,8 +1177,6 @@ export default {
 
 /* 底部安全区域 */
 .safe-area-bottom {
-  height: 20rpx;
+  height: calc(100rpx + env(safe-area-inset-bottom));
-  height: calc(20rpx + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
-  height: calc(20rpx + env(safe-area-inset-bottom)); /* iOS 11.2+ */
 }
 </style>

Debate_front/src/pages/login/index.vue

@@ -7,7 +7,7 @@
             <view class="bottom-content">
                 <!-- 标题移到气泡下方 -->
                 <view class="login-title">
-                    <text class="title-text">智辨云枢</text>
+                    <text class="title-text">智辩云枢</text>
                     <text class="subtitle-text">Intelligent Debate Cloud</text>
                 </view>