shuguang/Ollama-book
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复留言不能跳转的问题

Browse Source
This commit is contained in:
Shu Guang 2025-04-13 20:22:02 +08:00
parent 779948ec47
commit b2ab2348d7
2 changed files with 79 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/User/Comment.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div class="comment-container"> <div class="comment-container">
<div class="background-wrapper"></div> <div class="background-wrapper"></div>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="barrage-box"> <div class="barrage-box">
<vue-baberrage <vue-baberrage
@ -123,13 +122,14 @@ export default {
}, },
mounted() { mounted() {
this.getCommentList(); this.getCommentList();
// 定时刷新弹幕列表 this.timer = setInterval(() => {
setInterval(() => {
this.getCommentList(); this.getCommentList();
}, 30000); }, 30000);
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer); if (this.timer) {
clearInterval(this.timer);
}
}, },
}; };
</script> </script>
@ -140,6 +140,11 @@ export default {
height: 100vh; height: 100vh;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
pointer-events: none;
> * {
pointer-events: auto;
}
} }
.background-wrapper { .background-wrapper {
@ -148,15 +153,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 0; z-index: -1;
img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
filter: blur(5px);
}
&::after { &::after {
content: ""; content: "";
@ -176,24 +173,28 @@ export default {
.content-wrapper { .content-wrapper {
position: relative; position: relative;
z-index: 1; z-index: 1;
// height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
pointer-events: none;
> * {
pointer-events: auto;
}
} }
.barrage-box { .barrage-box {
width: 100vw;
width: 100%; width: 100%;
height: 600px; height: 600px;
margin-bottom: 30px; margin-bottom: 30px;
position: relative;
.barrage-component { .barrage-component {
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 8px; border-radius: 8px;
pointer-events: none;
} }
} }
@ -201,6 +202,8 @@ export default {
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
padding: 20px; padding: 20px;
position: relative;
z-index: 2;
.comment-input { .comment-input {
/deep/ .el-input-group__prepend { /deep/ .el-input-group__prepend {
@ -224,7 +227,6 @@ export default {
} }
} }
// 响应式适配
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.input-box { .input-box {
padding: 10px; padding: 10px;

102
src/components/User/Intelligent.vue
View File

@ -1,31 +1,45 @@
<template> <template>
<div class="chat-container"> <div class="chat-container">
<h2 style="text-align: center;color:deepskyblue;">llama3 智能推荐 </h2> <h2 style="text-align: center; color: deepskyblue">DeepSeek 智能推荐</h2>
<el-card class="chat" style="margin-top:10px;height: 80vh;border-radius: 15px;border-color: #ccc;"> <el-card
class="chat"
style="
margin-top: 10px;
height: 80vh;
border-radius: 15px;
border-color: #ccc;
"
>
<el-card class="main_chat"> <el-card class="main_chat">
<div v-for="item in messages" :key="message.id" class="message"> <div v-for="item in messages" :key="message.id" class="message">
<div v-if="item.inputMessage!=null&&item.inputMessage!==''" class="user-message"> <div
v-if="item.inputMessage != null && item.inputMessage !== ''"
class="user-message"
>
{{ item.inputMessage }} {{ item.inputMessage }}
</div> </div>
<div v-if="item.aiResult!=null&&item.aiResult!==''" class="bot-message">{{ item.aiResult }}</div> <div
v-if="item.aiResult != null && item.aiResult !== ''"
class="bot-message"
>
{{ item.aiResult }}
</div>
</div> </div>
</el-card> </el-card>
<el-input <el-input
placeholder="请输入内容，例如：我喜欢动物类的书籍，请给我推荐" placeholder="请输入内容，例如：我喜欢动物类的书籍，请给我推荐"
v-model.trim="inputMessage" v-model.trim="inputMessage"
:disabled="loading" :disabled="loading"
@keyup.enter.native="sendMessage" @keyup.enter.native="sendMessage"
> >
<el-button <el-button
slot="append" slot="append"
icon="el-icon-s-promotion" icon="el-icon-s-promotion"
v-loading="loading" v-loading="loading"
@click="sendMessage" @click="sendMessage"
:disabled="loading" :disabled="loading"
></el-button> ></el-button>
</el-input </el-input>
>
</el-card> </el-card>
</div> </div>
</template> </template>
@ -39,10 +53,10 @@ export default {
message: { message: {
inputMessage: "", inputMessage: "",
aiResult: "", aiResult: "",
userId: null userId: null,
}, },
loading: false loading: false,
} };
}, },
methods: { methods: {
/** /**
@ -54,14 +68,14 @@ export default {
if (this.inputMessage.trim() === "") { if (this.inputMessage.trim() === "") {
return this.$message.info({ return this.$message.info({
message: "文本不能为空", message: "文本不能为空",
duration: 1500 duration: 1500,
}) });
} }
// 先判断文本内容是否为空或者是无意义的数字，如果是提示用户信息 // 先判断文本内容是否为空或者是无意义的数字，如果是提示用户信息
if (/[\da-zA-Z]/.test(this.inputMessage)) { if (/[\da-zA-Z]/.test(this.inputMessage)) {
this.$message.info({ this.$message.info({
message: "请不要输入无意义的内容", message: "请不要输入无意义的内容",
duration: 1000 duration: 1000,
}); });
return; return;
} }
@ -70,7 +84,7 @@ export default {
this.messages.push({ this.messages.push({
id: Date.now(), id: Date.now(),
inputMessage: this.inputMessage, inputMessage: this.inputMessage,
userId: parseInt(userId) userId: parseInt(userId),
}); });
// 这里可以是调用 GPT API 的逻辑 // 这里可以是调用 GPT API 的逻辑
this.message.inputMessage = this.inputMessage.trim(); this.message.inputMessage = this.inputMessage.trim();
@ -79,10 +93,13 @@ export default {
this.inputMessage = ""; this.inputMessage = "";
this.loading = true; this.loading = true;
this.$message.info({ this.$message.info({
message:"文本输入越长，接口调用时间越长，请耐心等待10秒左右", message: "文本输入越长，接口调用时间越长，请耐心等待10秒左右",
duration:2500 duration: 2500,
}) });
const {data: res} = await this.$http.post("user/ai_intelligent", this.message) const { data: res } = await this.$http.post(
"user/ai_intelligent",
this.message
);
if (res.status !== 200) { if (res.status !== 200) {
this.loading = false; this.loading = false;
@ -90,15 +107,14 @@ export default {
} }
this.$message.success({ this.$message.success({
message: res.msg, message: res.msg,
duration: 1500 duration: 1500,
}) });
this.messages.push({ this.messages.push({
id: Date.now(), id: Date.now(),
aiResult: res.data, aiResult: res.data,
userId: userId userId: userId,
}); });
this.loading = false; this.loading = false;
} }
}, },
/** /**
@ -107,26 +123,28 @@ export default {
*/ */
async getHistoryRecords() { async getHistoryRecords() {
var userId = window.sessionStorage.getItem("userId"); var userId = window.sessionStorage.getItem("userId");
const {data: res} = await this.$http.get("user/ai_list_information/" + userId) const { data: res } = await this.$http.get(
"user/ai_list_information/" + userId
);
if (res.status !== 200) { if (res.status !== 200) {
return this.$message.error(res.msg) return this.$message.error(res.msg);
} }
this.$message.success({ this.$message.success({
message: res.msg, message: res.msg,
duration: 1500 duration: 1500,
}) });
res.data.forEach((item) => { res.data.forEach((item) => {
this.messages.push(item); this.messages.push(item);
}) });
} },
}, },
created() { created() {
this.getHistoryRecords(); this.getHistoryRecords();
} },
} };
</script> </script>
<style scoped lang='less'> <style scoped lang="less">
//.chat-container { //.chat-container {
// display: flex; // display: flex;
// flex-direction: column; // flex-direction: column;
@ -136,7 +154,8 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
height: 70vh; height: 70vh;
background-size: cover; background-size: cover;
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211243632.jpg) no-repeat 0px 0px; background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211243632.jpg)
no-repeat 0px 0px;
border-radius: 10px; border-radius: 10px;
overflow-y: scroll; overflow-y: scroll;
} }
@ -155,7 +174,6 @@ export default {
align-self: flex-end; align-self: flex-end;
text-align: right; text-align: right;
margin-top: 10px; margin-top: 10px;
} }
.bot-message { .bot-message {