feat(editor): 集成富文本编辑器并优化响应式布局
1. 添加wangEditor富文本编辑器替换原有简易编辑器 2. 新增编辑器相关CSS样式和功能按钮 3. 优化详情页和编辑页的响应式布局 4. 调整评论区域样式结构 5. 添加移动端适配样式
This commit is contained in:
DESKTOP-RQ919RC\Pc
121
details.html
121
details.html
@@ -18,7 +18,7 @@
|
||||
<body>
|
||||
<sign-in-box></sign-in-box>
|
||||
<div class="container" id="details" v-cloak>
|
||||
<div class="templateValue" ref="uniqidRef">fi88yrHXiDSj</div>
|
||||
<div class="templateValue" ref="uniqidRef">qXi0yrL189WW</div>
|
||||
|
||||
<div class="head-top flexacenter">
|
||||
<img class="logo" src="https://oss.gter.net/logo" alt="" />
|
||||
@@ -211,41 +211,38 @@
|
||||
<div class="comments-box" v-if="commentTotalCount != 0">
|
||||
<div class="comments-item" v-for="(item, index) in commentList" :key="index">
|
||||
<div class="comments-header flexacenter">
|
||||
<div class="comments-header-left flexacenter">
|
||||
<img class="comments-avatar" @click="openUserInfo(index)" :src="item.avatar || item.user['avatar']" />
|
||||
<div class="comments-username" @click="openUserInfo(index)">{{ item.nickname || item.user["nickname"] || "匿名用户" }}</div>
|
||||
<div class="comments-time">{{ item["timestamp"] }}</div>
|
||||
<div class="comments-identity" v-if="item['isauthor'] == 1">作者</div>
|
||||
<img class="comments-title" v-if="item.groupimage || item?.user?.groupimage" :src="item.groupimage || item?.user?.groupimage" :alt="item?.user?.grouptitle" style="height: 18px" />
|
||||
<img class="comments-avatar" @click="openUserInfo(index)" :src="item.avatar || item.user['avatar']" />
|
||||
<div class="comments-username" @click="openUserInfo(index)">{{ item.nickname || item.user["nickname"] || "匿名用户" }}</div>
|
||||
<div class="comments-time">{{ item["timestamp"] }}</div>
|
||||
<div class="comments-identity" v-if="item['isauthor'] == 1">作者</div>
|
||||
<img class="comments-title" v-if="item.groupimage || item?.user?.groupimage" :src="item.groupimage || item?.user?.groupimage" :alt="item?.user?.grouptitle" style="height: 18px" />
|
||||
|
||||
<div class="avatar-box flexflex" v-if="item['avatarState']">
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item.uin || item.user['uin'])">
|
||||
<img class="avatar-icon" src="./img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item.uin || item.user['uin'])">
|
||||
<img class="avatar-icon" src="./img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask" @click="closeUserInfo(index)"></div>
|
||||
<div class="avatar-box flexflex" v-if="item['avatarState']">
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item.uin || item.user['uin'])">
|
||||
<img class="avatar-icon" src="./img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item.uin || item.user['uin'])">
|
||||
<img class="avatar-icon" src="./img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask" @click="closeUserInfo(index)"></div>
|
||||
</div>
|
||||
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="./img/menu-icon-gray.svg" />
|
||||
<!-- <div class="report-box flexcenter">举报</div> -->
|
||||
<div class="operate-box">
|
||||
<div class="item flexcenter" @click="commentReport(item['token'])">举报</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="openEdit(item['token'], index)">编辑</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(item['token'], index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="./img/menu-icon-gray.svg" />
|
||||
<!-- <div class="report-box flexcenter">举报</div> -->
|
||||
<div class="operate-box">
|
||||
<div class="item flexcenter" @click="commentReport(item['token'])">举报</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="openEdit(item['token'], index)">编辑</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(item['token'], index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index)" src="./img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(item.token, index)">
|
||||
<img class="like-icon" v-if="item['islike'] == 0" src="./img/like-icon-gray.png" />
|
||||
<img class="like-icon" v-else src="./img/like-red-pitch.png" />
|
||||
<div class="like-quantity">{{ item["likenum"] || "" }}</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index)" src="./img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(item.token, index)">
|
||||
<img class="like-icon" v-if="item['islike'] == 0" src="./img/like-icon-gray.png" />
|
||||
<img class="like-icon" v-else src="./img/like-red-pitch.png" />
|
||||
<div class="like-quantity">{{ item["likenum"] || "" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-content">
|
||||
@@ -285,39 +282,35 @@
|
||||
<div class="child-comments" v-if="item['child'].length != 0">
|
||||
<div class="comments-item" v-for="(ite, i) in item['child']" :key="ite.id">
|
||||
<div class="comments-header flexacenter">
|
||||
<div class="comments-header-left flexacenter">
|
||||
<img class="comments-avatar" @click="openUserInfo(index, i)" :src="ite.avatar || ite.user['avatar']" />
|
||||
<div class="comments-username" @click="openUserInfo(index, i)">{{ ite.nickname || ite.user["nickname"] || "匿名用户" }}</div>
|
||||
<div class="comments-time">{{ ite["timestamp"] }}</div>
|
||||
<div class="comments-identity" v-if="ite['isauthor'] == 1">作者</div>
|
||||
<img class="comments-title" v-if="ite.groupimage || ite.user?.groupimage" :src="ite.groupimage || ite.user?.groupimage" :alt="ite?.user?.grouptitle" style="height: 18px" />
|
||||
<div class="avatar-box flexflex" v-if="ite['avatarState']">
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(ite.uin || ite.user['uin'])">
|
||||
<img class="avatar-icon" src="./img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(ite.uin || ite.user['uin'])">
|
||||
<img class="avatar-icon" src="./img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask" @click="closeUserInfo(index, i)"></div>
|
||||
<img class="comments-avatar" @click="openUserInfo(index, i)" :src="ite.avatar || ite.user['avatar']" />
|
||||
<div class="comments-username" @click="openUserInfo(index, i)">{{ ite.nickname || ite.user["nickname"] || "匿名用户" }}</div>
|
||||
<div class="comments-time">{{ ite["timestamp"] }}</div>
|
||||
<div class="comments-identity" v-if="ite['isauthor'] == 1">作者</div>
|
||||
<img class="comments-title" v-if="ite.groupimage || ite.user?.groupimage" :src="ite.groupimage || ite.user?.groupimage" :alt="ite?.user?.grouptitle" style="height: 18px" />
|
||||
<div class="avatar-box flexflex" v-if="ite['avatarState']">
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(ite.uin || ite.user['uin'])">
|
||||
<img class="avatar-icon" src="./img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(ite.uin || ite.user['uin'])">
|
||||
<img class="avatar-icon" src="./img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
<div class="avatar-mask" @click="closeUserInfo(index, i)"></div>
|
||||
</div>
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="./img/menu-icon-gray.svg" />
|
||||
<div class="operate-box">
|
||||
<div class="item flexcenter" @click="commentReport(ite['token'])">举报</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="openEdit(ite['token'], index, i)">编辑</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(ite['token'], index, i)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="./img/menu-icon-gray.svg" />
|
||||
<div class="operate-box">
|
||||
<div class="item flexcenter" @click="commentReport(ite['token'])">举报</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.edit')" @click="openEdit(ite['token'], index, i)">编辑</div>
|
||||
<div class="item flexcenter" v-if="permissions.includes('comment.delete')" @click="commentDelete(ite['token'], index, i)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index, i)" src="./img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(ite.token, index, i)">
|
||||
<img class="like-icon" v-if="ite['islike'] == 0" src="./img/like-icon-gray.png" />
|
||||
<img class="like-icon" v-else src="./img/like-red-pitch.png" />
|
||||
<div class="like-quantity">{{ ite["likenum"] || "" }}</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index, i)" src="./img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(ite.token, index, i)">
|
||||
<img class="like-icon" v-if="ite['islike'] == 0" src="./img/like-icon-gray.png" />
|
||||
<img class="like-icon" v-else src="./img/like-red-pitch.png" />
|
||||
<div class="like-quantity">{{ ite["likenum"] || "" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-content">
|
||||
|
||||
Reference in New Issue
Block a user