jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-21 22:41:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update pageview

Browse Source
This commit is contained in:
tim
2025-07-03 18:58:14 +08:00
parent ecf13eb0c2
commit c37455ca59
1 changed files with 103 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
open-isle-cli/src/views/PostPageView.vue
View File

@@ -1,100 +1,54 @@
<template>
<div class="post-page">
<div class="article-title-container">
<div class="article-title">请不要把互联网上的戾气带来这里！</div>
<div class="article-info-container">
<div class="article-info-item">
<i class="fas fa-user"></i>
<div class="article-info-item-text">开发调优</div>
</div>
<div class="article-tags-container">
<div class="article-tag-item" v-for="tag in tags" :key="tag">
<i class="fas fa-tag"></i>
<div class="article-tag-item-text">{{ tag }}</div>
<div class="post-page-container">
<div class="post-page-main-container">
<div class="article-title-container">
<div class="article-title">请不要把互联网上的戾气带来这里！</div>
<div class="article-info-container">
<div class="article-info-item">
<i class="fas fa-user"></i>
<div class="article-info-item-text">开发调优</div>
</div>
</div>
</div>
</div>
<div class="info-content-container">
<div class="user-avatar-container">
<div class="user-avatar-item">
<img class="user-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
</div>
</div>
<div class="info-content">
<div class="info-content-header">
<div class="user-name">Nagisa77</div>
<div class="post-time">3月10日</div>
</div>
<div class="info-content-text">
是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。
但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另一个可以随意发泄情绪的地方！甚至试图占领舆论高地，把这里堂而皇之地变成另一个垃圾场。
这是要万分警惕和坚决予以打击的！L站的愿景是成为新的理想型社区，让每一个一身疲惫的佬友在这里得到放松。哪怕有一刻放松手中攥紧的武器，徜徉在和谐的氛围中得到喘息和治愈。
我和管理们都始终坚定这一点，丝毫不会放松！千里之堤溃于蚁穴，如果任由戾气蔓延，争端四起，最终这里的愿景将会完全破产。所以有病要医，不是同路人不必强行融合。任何把戾气带来这里，试图在这里建立另一个互联网垃圾场的人都是不受欢迎的，都要被驱逐出社区。
请好好说话，友善交流！我们完全支持、鼓励友好交流分享，每个人都可以。键盘是你与人交流分享、互通有无的桥梁，不只是你谋取私利的工具，更不是肆意挥舞用来攻击的武器。
自本公告发布之日起，我们将严肃处理以下3类发言：
傲慢轻蔑回复。
阴阳怪气回复。
攻击谩骂回复。
如有以上发言，我们将视言论破坏程度采取但不限于：删帖、临时封禁、永久封禁等举措。请各位佬友帮忙积极监督，感谢你们为共建美好社区做出的贡献！请一定一定不要把互联网上的戾气带来这里，这里就要做不一样。
持续时间至最后一个不会好好说话的账号持有者被请出社区为止。
</div>
<div class="article-footer-container">
<div class="reactions-container">
<div class="reactions-viewer">
<div class="reactions-viewer-item-container">
<div class="reactions-viewer-item">
🤣
</div>
<div class="reactions-viewer-item">
❤️
</div>
<div class="reactions-viewer-item">
👏
</div>
</div>
<div class="reactions-count">1882</div>
</div>
<div class="make-reaction-container">
<div class="make-reaction-item like-reaction">
<i class="far fa-heart"></i>
</div>
<div class="make-reaction-item copy-link">
<i class="fas fa-link"></i>
</div>
<div class="article-tags-container">
<div class="article-tag-item" v-for="tag in tags" :key="tag">
<i class="fas fa-tag"></i>
<div class="article-tag-item-text">{{ tag }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="comments-container">
<div class="info-content-container" v-for="comment in comments" :key="comment.id">
<div class="info-content-container">
<div class="user-avatar-container">
<div class="user-avatar-item">
<img class="user-avatar-item-img" :src="comment.avatar" alt="avatar">
<img class="user-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
</div>
</div>
<div class="info-content">
<div class="info-content-header">
<div class="user-name">{{ comment.userName }}</div>
<div class="post-time">{{ comment.time }}</div>
<div class="user-name">Nagisa77</div>
<div class="post-time">3月10日</div>
</div>
<div class="info-content-text">
{{ comment.text }}
是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。
但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另一个可以随意发泄情绪的地方！甚至试图占领舆论高地，把这里堂而皇之地变成另一个垃圾场。
这是要万分警惕和坚决予以打击的！L站的愿景是成为新的理想型社区，让每一个一身疲惫的佬友在这里得到放松。哪怕有一刻放松手中攥紧的武器，徜徉在和谐的氛围中得到喘息和治愈。
我和管理们都始终坚定这一点，丝毫不会放松！千里之堤溃于蚁穴，如果任由戾气蔓延，争端四起，最终这里的愿景将会完全破产。所以有病要医，不是同路人不必强行融合。任何把戾气带来这里，试图在这里建立另一个互联网垃圾场的人都是不受欢迎的，都要被驱逐出社区。
请好好说话，友善交流！我们完全支持、鼓励友好交流分享，每个人都可以。键盘是你与人交流分享、互通有无的桥梁，不只是你谋取私利的工具，更不是肆意挥舞用来攻击的武器。
自本公告发布之日起，我们将严肃处理以下3类发言：
傲慢轻蔑回复。
阴阳怪气回复。
攻击谩骂回复。
如有以上发言，我们将视言论破坏程度采取但不限于：删帖、临时封禁、永久封禁等举措。请各位佬友帮忙积极监督，感谢你们为共建美好社区做出的贡献！请一定一定不要把互联网上的戾气带来这里，这里就要做不一样。
持续时间至最后一个不会好好说话的账号持有者被请出社区为止。
</div>
<div class="article-footer-container">
@@ -126,6 +80,58 @@
</div>
</div>
</div>
<div class="comments-container">
<div class="info-content-container" v-for="comment in comments" :key="comment.id">
<div class="user-avatar-container">
<div class="user-avatar-item">
<img class="user-avatar-item-img" :src="comment.avatar" alt="avatar">
</div>
</div>
<div class="info-content">
<div class="info-content-header">
<div class="user-name">{{ comment.userName }}</div>
<div class="post-time">{{ comment.time }}</div>
</div>
<div class="info-content-text">
{{ comment.text }}
</div>
<div class="article-footer-container">
<div class="reactions-container">
<div class="reactions-viewer">
<div class="reactions-viewer-item-container">
<div class="reactions-viewer-item">
🤣
</div>
<div class="reactions-viewer-item">
❤️
</div>
<div class="reactions-viewer-item">
👏
</div>
</div>
<div class="reactions-count">1882</div>
</div>
<div class="make-reaction-container">
<div class="make-reaction-item like-reaction">
<i class="far fa-heart"></i>
</div>
<div class="make-reaction-item copy-link">
<i class="fas fa-link"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="post-page-scroller-container">
scroller
</div>
</div>
</template>
@@ -188,10 +194,24 @@ export default {
</script>
<style scoped>
.post-page {
padding: 20px;
.post-page-container {
display: flex;
flex-direction: row;
height: calc(100vh - var(--header-height));
}
.post-page-main-container {
overflow-y: auto;
height: calc(100vh - var(--header-height) - 40px);
padding: 20px;
height: calc(100% - 40px);
width: calc(85% - 40px);
}
.post-page-scroller-container {
overflow-y: auto;
height: 100%;
width: 15%;
background-color: #f0f0f0;
}
.article-title-container {