pcv2s4hl5
/
debate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端修改

Browse Source
hot-fix
chantouRichard 2 months ago
parent 76c895033e
commit d3e4ae3688
5 changed files with 1066 additions and 200 deletions
Show Stats Download Patch File Download Diff File

BIN
Debate_backend/target/classes/com/learning/newdemo/service/impl/WxReviewServiceImpl.class
View File

Binary file not shown.

93
Debate_front/src/components/ArgumentCom.vue
Unescape View File

@ -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);

695
Debate_front/src/components/DebateCom.vue
View File

File diff suppressed because it is too large Load Diff

476
Debate_front/src/components/ReviewCom.vue
Unescape View File

@ -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=[];
for(let item of res.data.data){
this.messages = [];
for (let item of res.data.data) {
this.messages.push({
role:"user",
content:item.userMessage
role: "user",
content: item.userMessage,
});
this.messages.push({
role:"ai",
content:item.content
role: "ai",
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;
z-index: 1;
margin-bottom: 20rpx;
bottom: var(--input-bottom, 100rpx);
z-index: 100;
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 {
position: relative;
.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;
}
.send-button-embedded {
position: absolute;
bottom: 16rpx;
left: 16rpx;
.textarea-box {
flex: 1;
padding: 16rpx 20rpx;
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;
height: 60rpx;
border: none;
}
.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);
}
.send-button-embedded image {
width: 40rpx;
height: 40rpx;
filter: invert(72%) sepia(87%) saturate(1242%) hue-rotate(325deg)
brightness(101%) contrast(96%);
flex-shrink: 0;
}
.textarea-box {
background: rgba(255, 255, 255, 0.2);
border-radius: 20rpx;
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;
.send-button:active {
transform: scale(0.95) rotate(-15deg);
box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.3);
}
.textarea-box::placeholder {
color: #362d2de1;
.send-button image {
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(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>

2
Debate_front/src/pages/login/index.vue
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save