+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
- 发送中...
- 发送失败，点击重试
-
- 已发送
- 已读
-
-
-
+
-
-
-
+
+
+
+
+
+
+
+
+ 发送中...
+ 发送失败，点击重试
+
+ 已发送
+ 已读
+
+
+
+
+
+
+
+
@@ -417,7 +409,13 @@ export default {
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
},
renderMarkdown(markdown) {
- return this.md.render(markdown);
+ // 配置markdown-it，确保生成的HTML与样式兼容
+ const md = new MarkdownIt({
+ breaks: true,
+ linkify: true,
+ typographer: true
+ });
+ return md.render(markdown);
},
SendImage() {
this.sendImgDialogVisible = true;
@@ -943,14 +941,15 @@ export default {
position: relative;
}
-.recycle-scroller {
+.messages-list {
width: 100%;
height: 100%;
+ overflow-y: auto;
+ padding: 8px 0;
}
.message-item {
- margin-bottom: 20px;
- min-height: 80px;
+ margin-bottom: 16px;
}
.empty-messages {
@@ -995,6 +994,7 @@ export default {
display: flex;
align-items: flex-start;
gap: 12px;
+ padding: 0 8px;
}
.message-right {
@@ -1003,7 +1003,8 @@ export default {
.message-content-wrapper {
flex: 1;
- max-width: 70%;
+ max-width: 75%;
+ position: relative;
}
.message-header {
@@ -1031,8 +1032,53 @@ export default {
.message-bubble {
padding: 12px 16px;
border-radius: 18px;
- word-wrap: break-word;
- line-height: 1.5;
+ line-height: 1.6;
+ min-height: 40px;
+ max-width: 100%;
+ box-sizing: border-box;
+ word-break: break-word;
+ overflow-wrap: break-word;
+}
+
+.message-text {
+ word-break: break-word;
+ overflow-wrap: break-word;
+}
+
+.message-text p {
+ margin: 0 0 8px 0;
+}
+
+.message-text p:last-child {
+ margin-bottom: 0;
+}
+
+.message-text a {
+ color: inherit;
+ text-decoration: underline;
+ word-break: break-all;
+}
+
+.message-text code {
+ background: rgba(0, 0, 0, 0.1);
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 0.9em;
+}
+
+.message-text pre {
+ background: rgba(0, 0, 0, 0.1);
+ padding: 10px;
+ border-radius: 8px;
+ overflow-x: auto;
+ margin: 8px 0;
+}
+
+.message-text img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 8px;
+ display: block;
}
.message-bubble-left {
@@ -1042,10 +1088,10 @@ export default {
}
.message-bubble-right {
- background: #409eff;
- color: #ffffff;
+ background: #ebecef;
+ color: #000000;
border-bottom-right-radius: 4px;
- box-shadow: 0 1px 2px rgba(64, 158, 255, 0.3);
+ box-shadow: 0 1px 2px rgba(158, 197, 254, 0.3);
position: relative;
}
@@ -1070,7 +1116,7 @@ export default {
}
.status-read {
- color: #409eff;
+ color: #b7d9fb;
margin-left: 4px;
font-weight: 500;
}
diff --git a/src/views/Group.vue b/src/views/Group.vue
index 6cb2e81..c1ac4f8 100644
--- a/src/views/Group.vue
+++ b/src/views/Group.vue
@@ -16,10 +16,17 @@ import {DelFGService} from "@/api/user.js";
import { updateDeviceService } from "@/api/device.js";
import router from "@/router/index.js";
import { ElMessage } from 'element-plus';
-
-
+import { Refresh, Plus, ChatDotRound, User, Edit, Delete } from "@element-plus/icons-vue";
export default {
+ components: {
+ Refresh,
+ Plus,
+ ChatDotRound,
+ User,
+ Edit,
+ Delete
+ },
data() {
return {
ip: "",
@@ -29,6 +36,7 @@ export default {
is_del_group_user:false,
GroupRequestIsDisplay : false,
GroupRequestList:[],
+ FriendsGList: [],
tokenData: {
token: localStorage.getItem("token"),
ip: localStorage.getItem("ip"),
@@ -62,8 +70,6 @@ export default {
};
},
- // methods 是一些用来更改状态与触发更新的函数
- // 它们可以在模板中作为事件处理器绑定
methods: {
async getGroupList() {
let result = {};
@@ -87,15 +93,6 @@ export default {
}
}
this.add_groups = temp;
-
-
- // for(let d in data){
- // let res = JSON.parse(d);
- // console.log("res=",res);
- // this.tableData.push(res);
- // }
- // console.log(this.tableData);
-
this.tableData = data;
},
onSubmit() {
@@ -107,7 +104,6 @@ export default {
handleCurrentChange() {
alert("页码发生变化" + val);
},
- //获取好友列表
async displayFriends(index){
this.group_id = this.tableData[index].ID;
let result ={}
@@ -138,7 +134,6 @@ export default {
this.FriendsGList = result.data;
this.FriendsTableIsDisplay = true;
this.is_del_group_user=true;
-
}else{
ElMessage.error("获取群用户列表失败");
}
@@ -146,8 +141,6 @@ export default {
console.log(e);
}
},
-
- //邀请好友加入群组
async inviteUser(index) {
var id = this.tableData[index].ID;
var restart_data = {
@@ -169,24 +162,23 @@ export default {
console.log(e);
}
},
-
async deleteGroup(index) {
+ if (!confirm("确定删除吗？")) {
+ return;
+ }
var id = this.tableData[index].ID;
var delete_data = {
group_id: id,
- type:3,//删除群组
+ type:3,
userId: this.tokenData.userId,
token: this.tokenData.token,
};
try {
var d_re = await DelFGService(delete_data);
if (d_re.code == 0) {
- //alert("删除成功");
ElMessage.success('删除成功');
- //刷新页面
this.getGroupList();
} else {
- //alert("操作失败");
ElMessage.fail("操作失败");
}
} catch (e) {
@@ -213,7 +205,6 @@ export default {
ElMessage.success("添加成功");
this.getGroupList();
} else {
- //alert("添加失败");
ElMessage.error("添加失败")
}
} catch (e) {
@@ -226,7 +217,6 @@ export default {
try {
result = await updateGroupService(this.updateForm);
if (result.code == 0) {
- //alert("修改成功");
ElMessage.success("修改成功");
this.getGroupList();
} else {
@@ -236,7 +226,6 @@ export default {
console.log(e);
}
},
-
async inviteFriendAddGroup(index){
var id = this.FriendsGList[index].id;
let req={
@@ -253,10 +242,8 @@ export default {
try {
var d_re = await sendMessageService(req);
if (d_re.code == 0) {
- //alert("邀请成功");
ElMessage.success("邀请成功");
} else {
- //alert("操作失败");
ElMessage.error("操作失败:"+d_re.error);
}
} catch (e) {
@@ -280,10 +267,8 @@ export default {
try {
var d_re = await DelFGService(req);
if (d_re.code == 0) {
- //alert("邀请成功");
ElMessage.success("删除成功");
} else {
- //alert("操作失败");
ElMessage.error("操作失败:"+d_re.error);
}
} catch (e) {
@@ -295,7 +280,6 @@ export default {
const response = await axios.get("https://ipinfo.io/json");
this.ip = response.data.ip;
localStorage.setItem("ip", this.ip);
- //console.log(response);
} catch (error) {
console.error(error);
}
@@ -317,16 +301,12 @@ export default {
}catch(e){
console.log(e);
}
-
},
- //退出群聊
async DelFriendsOrGroup(index){
- // 删除前确认
if (!confirm("确定退出吗？")) {
return;
}
var id = this.add_groups[index].ID;
-
let result ={}
try{
result =await DelFGService({
@@ -383,15 +363,15 @@ export default {
from_user_id: localStorage.getItem("userId"),
to_user_id: id,
group_id: this.GroupRequestList[index].group_id,
- msg: "接受加入群组请求",
+ msg: "拒绝加入群组请求",
index: 1,
type: 2,
});
if(result.code ===0){
- ElMessage.success("接受请求成功");
+ ElMessage.success("拒绝请求成功");
this.displayGroupReq();
}else{
- ElMessage.error("接受请求失败");
+ ElMessage.error("拒绝请求失败");
}
}catch(e){
console.log(e);
@@ -403,7 +383,6 @@ export default {
toVideoList() {
router.push("/videoList");
},
- // 修改条纹颜色
tableRowClassName({ row, rowIndex }) {
if (row.human === 1) {
return {
@@ -415,14 +394,11 @@ export default {
},
},
- // 生命周期钩子会在组件生命周期的各个不同阶段被调用
- // 例如这个函数就会在组件挂载完成后被调用
async mounted() {
let now = new Date();
if (localStorage.getItem("token") === null) {
router.push("/login");
}
- // console.log("mounted");
this.getIpClient();
this.getGroupList();
},
@@ -430,329 +406,231 @@ export default {
-
-
- 群组
-
-
-
-
-
- 查询
-
-
- 建群
-
-
- 请求加入群聊请求
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 邀请
- 删除
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 同意请求
- 拒绝请求
-
-
-
-
-
-
- 我建的群组
-
-
-
- :row-style="this.tableRowClassName"
-
-
-
-
-
-
-
+
+
+
我创建的群组
+
+
+
+
+
+
+
+
- 邀请
- 成员管理
- 修改
- 删除
-
+
+ 群成员
+
+
+ 修改
+
+
+ 删除
+
-
+
-
- 我加入的群组列表
-
-
-
-
- :row-style="this.tableRowClassName"
-
-
-
-
-
-
-
+
+
已加入的群组
+
+
+
+
+
+
+
- 退出群聊
-
+
+ 退出群聊
+
-
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 邀请
+
+
+ 删除
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 同意
+
+
+ 拒绝
+
+
+
+
+