diff --git a/web/src/components/compose-reply.vue b/web/src/components/compose-reply.vue
index 867182c5..dbb835c0 100644
--- a/web/src/components/compose-reply.vue
+++ b/web/src/components/compose-reply.vue
@@ -4,74 +4,48 @@
{{ formatPrettyTime(comment.created_on) }}
-
-
-
-
- {{ thumbsUpCount }}
-
-
-
-
-
-
- {{ thumbsUpCount }}
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ thumbsUpCount }}
+
+
+
+
+
+
+ {{ thumbsUpCount }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 回复
+
+
+ 取消
+
-
- 回复
-
-
- 取消
-
-
-
+
+
回复
@@ -120,36 +94,36 @@ const handleThumbsUp = () => {
tweet_id: props.comment.post_id,
comment_id: props.comment.id,
})
- .then((_res) => {
- hasThumbsUp.value = !hasThumbsUp.value
- if (hasThumbsUp.value) {
- thumbsUpCount.value++
- hasThumbsDown.value = false
- } else {
- thumbsUpCount.value--
- }
- })
- .catch((err) => {
- console.log(err);
- });
+ .then((_res) => {
+ hasThumbsUp.value = !hasThumbsUp.value
+ if (hasThumbsUp.value) {
+ thumbsUpCount.value++
+ hasThumbsDown.value = false
+ } else {
+ thumbsUpCount.value--
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ });
};
const handleThumbsDown = () => {
thumbsDownTweetComment({
tweet_id: props.comment.post_id,
comment_id: props.comment.id,
})
- .then((_res) => {
- hasThumbsDown.value = !hasThumbsDown.value
- if ( hasThumbsDown.value) {
- if ( hasThumbsUp.value) {
- thumbsUpCount.value--
- hasThumbsUp.value = false
+ .then((_res) => {
+ hasThumbsDown.value = !hasThumbsDown.value
+ if (hasThumbsDown.value) {
+ if (hasThumbsUp.value) {
+ thumbsUpCount.value--
+ hasThumbsUp.value = false
+ }
}
- }
- })
- .catch((err) => {
- console.log(err);
- });
+ })
+ .catch((err) => {
+ console.log(err);
+ });
};
const switchReply = (status: boolean) => {
showReply.value = status;
@@ -188,47 +162,66 @@ defineExpose({ switchReply });
.reply-switch {
display: flex;
align-items: center;
+ justify-content: space-between;
text-align: right;
font-size: 12px;
margin: 10px 0;
+
+ .actions {
+ display: flex;
+ align-items: center;
+ text-align: right;
+ font-size: 12px;
+ margin: 10px 0;
+ }
+
.time-item {
font-size: 12px;
opacity: 0.65;
margin-right: 18px;
}
+
.action-item {
display: flex;
align-items: center;
- margin-right: 18px;
+ margin-left: 18px;
opacity: 0.65;
+
.upvote-count {
margin-left: 4px;
font-size: 12px;
}
+
&.hover {
cursor: pointer;
}
}
+
.opacity-item {
- opacity: 0.75;
- }
+ opacity: 0.75;
+ margin-left: 18px;
+ }
+
.show {
color: #18a058;
cursor: pointer;
}
+
.hide {
opacity: 0.75;
cursor: pointer;
}
}
}
+
.dark {
.reply-compose-wrap {
background-color: rgba(16, 16, 20, 0.75);
+
.reply-switch {
.show {
color: #63e2b7;
- }
+ }
}
}
}
diff --git a/web/src/components/reply-item.vue b/web/src/components/reply-item.vue
index 75af3a33..622d5979 100644
--- a/web/src/components/reply-item.vue
+++ b/web/src/components/reply-item.vue
@@ -2,41 +2,29 @@
@@ -136,18 +112,18 @@ const handleThumbsUp = () => {
comment_id: props.reply.comment_id,
reply_id: props.reply.id,
})
- .then((_res) => {
- hasThumbsUp.value = !hasThumbsUp.value
- if (hasThumbsUp.value) {
- thumbsUpCount.value++
- hasThumbsDown.value= false
- } else {
- thumbsUpCount.value--
- }
- })
- .catch((err) => {
- console.log(err);
- });
+ .then((_res) => {
+ hasThumbsUp.value = !hasThumbsUp.value
+ if (hasThumbsUp.value) {
+ thumbsUpCount.value++
+ hasThumbsDown.value = false
+ } else {
+ thumbsUpCount.value--
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ });
};
const handleThumbsDown = () => {
thumbsDownTweetReply({
@@ -155,18 +131,18 @@ const handleThumbsDown = () => {
comment_id: props.reply.comment_id,
reply_id: props.reply.id,
})
- .then((_res) => {
- hasThumbsDown.value = !hasThumbsDown.value
- if (hasThumbsDown.value) {
- if (hasThumbsUp.value) {
- thumbsUpCount.value--
- hasThumbsUp.value = false
+ .then((_res) => {
+ hasThumbsDown.value = !hasThumbsDown.value
+ if (hasThumbsDown.value) {
+ if (hasThumbsUp.value) {
+ thumbsUpCount.value--
+ hasThumbsUp.value = false
+ }
}
- }
- })
- .catch((err) => {
- console.log(err);
- });
+ })
+ .catch((err) => {
+ console.log(err);
+ });
};
const focusReply = () => {
emit('focusReply', props.reply);
@@ -201,16 +177,19 @@ const execDelAction = () => {
display: flex;
align-items: center;
justify-content: space-between;
+
.username {
max-width: 50%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+
.reply-name {
margin: 0 3px;
opacity: 0.75;
}
}
+
.timestamp {
opacity: 0.75;
text-align: right;
@@ -220,8 +199,10 @@ const execDelAction = () => {
white-space: nowrap;
}
}
+
.base-wrap {
display: block;
+
.content {
width: calc(100% - 40px);
margin-top: 4px;
@@ -229,36 +210,54 @@ const execDelAction = () => {
text-align: justify;
line-height: 2;
}
+
.reply-switch {
display: flex;
align-items: center;
+ justify-content: space-between;
font-size: 12px;
margin: 10px 0 0;
+
+ .actions {
+ display: flex;
+ align-items: center;
+ text-align: right;
+ font-size: 12px;
+ margin: 10px 0;
+ }
+
.time-item {
font-size: 12px;
opacity: 0.75;
margin-right: 18px;
}
+
.action-item {
display: flex;
align-items: center;
- margin-right: 18px;
+ margin-left: 18px;
opacity: 0.65;
+
.upvote-count {
margin-left: 4px;
font-size: 12px;
}
+
&.hover {
cursor: pointer;
}
}
+
.opacity-item {
opacity: 0.75;
+ margin-left: 18px;
}
+
.show {
color: #18a058;
cursor: pointer;
}
+
.hide {
opacity: 0.75;
cursor: pointer;
@@ -266,6 +265,7 @@ const execDelAction = () => {
}
}
}
+
.dark {
.reply-item {
border-bottom: 1px solid #262628;
@@ -277,7 +277,7 @@ const execDelAction = () => {
color: #63e2b7;
}
}
- }
+ }
}
}
\ No newline at end of file
diff --git a/web/src/types/NetParams.d.ts b/web/src/types/NetParams.d.ts
index 4f965930..b3b86ccc 100644
--- a/web/src/types/NetParams.d.ts
+++ b/web/src/types/NetParams.d.ts
@@ -35,7 +35,7 @@ declare module NetParams {
id: number;
}
- interface UserGetUnreadMsgCount {}
+ interface UserGetUnreadMsgCount { }
interface UserGetMessages {
page: number;
@@ -82,7 +82,7 @@ declare module NetParams {
imgCaptcha: string;
}
- interface UserGetCaptcha {}
+ interface UserGetCaptcha { }
interface UserWhisper {
user_id: number;
@@ -173,9 +173,11 @@ declare module NetParams {
interface PostGetPostComments {
id: number;
sort_strategy: "default" | "newest";
+ page?: number;
+ page_size?: number;
}
- interface GetContacts {}
+ interface GetContacts { }
interface PostCreatePost {
/** 帖子内容列表 */
diff --git a/web/src/views/Post.vue b/web/src/views/Post.vue
index 42facd79..7aa6ddf8 100644
--- a/web/src/views/Post.vue
+++ b/web/src/views/Post.vue
@@ -23,11 +23,7 @@
-
+
@@ -36,26 +32,24 @@
+
+
+ 加载更多...
+