Skip to content

Commit 801d998

Browse files
KunMoeKunMoe
committed
refactor: refactor the topic reply
1 parent 4ae67e5 commit 801d998

7 files changed

Lines changed: 136 additions & 74 deletions

File tree

‎components/topic/detail/Master.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ defineProps<{
1515
"
1616
id="0"
1717
>
18-
<TopicDetailUser v-if="topic.user" :user="topic.user" />
18+
<TopicDetailMasterUser v-if="topic.user" :user="topic.user" />
1919

2020
<KunCard
2121
:is-transparent="false"
@@ -42,7 +42,15 @@ defineProps<{
4242
</span>
4343
</div>
4444

45-
<TopicDetailUserMobile :user="topic.user" />
45+
<TopicDetailUser
46+
class-name="lg:hidden"
47+
:user="topic.user"
48+
:created="topic.created"
49+
:edited="topic.edited"
50+
:topic-id="topic.id"
51+
:floor="0"
52+
:show-addition="false"
53+
/>
4654

4755
<KunContent class="kun-master" :content="topic.contentHtml" />
4856

‎components/topic/detail/MasterUser.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script setup lang="ts">
2+
const props = defineProps<{
3+
user: {
4+
id: number
5+
name: string
6+
avatar: string
7+
moemoepoint: number
8+
}
9+
}>()
10+
11+
const user = computed(() => props.user)
12+
</script>
13+
14+
<template>
15+
<KunCard
16+
:is-transparent="false"
17+
:is-hoverable="false"
18+
class-name="w-36 shrink-0 hidden lg:flex"
19+
content-class="justify-start items-center gap-3"
20+
>
21+
<KunAvatar size="original-sm" :user="user" />
22+
23+
<KunLink
24+
underline="hover"
25+
:aria-label="props.user.name"
26+
:to="`/user/${user.id}/info`"
27+
>
28+
{{ user.name }}
29+
</KunLink>
30+
31+
<p class="text-secondary flex items-center gap-1">
32+
<KunIcon class="text-inherit" name="lucide:lollipop" />
33+
{{ user.moemoepoint }}
34+
</p>
35+
</KunCard>
36+
</template>

‎components/topic/detail/User.vue‎

Lines changed: 48 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,55 @@
11
<script setup lang="ts">
2-
const props = defineProps<{
3-
user: {
4-
id: number
5-
name: string
6-
avatar: string
7-
moemoepoint: number
8-
}
9-
}>()
10-
11-
const user = computed(() => props.user)
2+
withDefaults(
3+
defineProps<{
4+
user: KunUser & { moemoepoint: number }
5+
created: string | Date
6+
edited: string | Date | null
7+
topicId: number
8+
floor: number
9+
className?: string
10+
showAddition?: boolean
11+
}>(),
12+
{ className: '', showAddition: true }
13+
)
1214
</script>
1315

1416
<template>
15-
<KunCard
16-
:is-transparent="false"
17-
:is-hoverable="false"
18-
class-name="w-36 shrink-0 hidden lg:flex"
19-
content-class="justify-start items-center gap-3"
20-
>
21-
<KunAvatar size="original-sm" :user="user" />
17+
<div :class="cn('flex items-center gap-2', className)">
18+
<KunAvatar size="lg" :user="user" />
19+
20+
<div class="w-full">
21+
<div class="flex items-center justify-between">
22+
<div class="flex gap-2">
23+
<KunLink underline="hover" :to="`/user/${user.id}/info`">
24+
{{ user.name }}
25+
</KunLink>
26+
<p class="text-secondary flex items-center gap-1">
27+
<KunIcon class="text-inherit" name="lucide:lollipop" />
28+
{{ user.moemoepoint }}
29+
</p>
30+
</div>
2231

23-
<KunLink
24-
underline="hover"
25-
:aria-label="props.user.name"
26-
:to="`/user/${user.id}/info`"
27-
>
28-
{{ user.name }}
29-
</KunLink>
32+
<KunLink
33+
v-if="showAddition"
34+
color="default"
35+
underline="none"
36+
:to="`/topic/${topicId}#k${floor}`"
37+
class-name="text-default-400 font-bold"
38+
>
39+
#{{ floor }}
40+
</KunLink>
41+
</div>
3042

31-
<p class="text-secondary flex items-center gap-1">
32-
<KunIcon class="text-inherit" name="lucide:lollipop" />
33-
{{ user.moemoepoint }}
34-
</p>
35-
</KunCard>
43+
<div v-if="showAddition" class="text-xs text-gray-500 dark:text-gray-400">
44+
<span>
45+
发布于
46+
{{ formatDate(created, { isShowYear: true, isPrecise: true }) }}
47+
</span>
48+
<span v-if="edited" class="ml-2">
49+
(编辑于
50+
{{ formatDate(edited, { isShowYear: true, isPrecise: true }) }})
51+
</span>
52+
</div>
53+
</div>
54+
</div>
3655
</template>

‎components/topic/detail/UserMobile.vue‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎components/topic/reply/Reply.vue‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,9 @@ watch(
3535
)
3636
3737
const replyContent = computed(() => {
38-
const targetsContent = props.reply.targets.map((t) => t.contentPreview)
39-
const content =
40-
markdownToText(props.reply.contentMarkdown) + targetsContent.join('')
41-
return content.slice(0, 20)
38+
const targetsContent = props.reply.targets.map((t) => t.replyContentMarkdown)
39+
const content = props.reply.contentMarkdown + targetsContent.join('')
40+
return markdownToText(content.slice(0, 20))
4241
})
4342
</script>
4443

@@ -47,15 +46,19 @@ const replyContent = computed(() => {
4746
class="outline-primary kun-reply flex justify-between gap-3 outline-offset-2"
4847
:id="`${reply.floor}.${replyContent}`"
4948
>
50-
<TopicDetailUser :user="reply.user" />
51-
5249
<KunCard
5350
:is-transparent="false"
5451
:is-hoverable="false"
5552
class-name="w-full"
5653
content-class="gap-3"
5754
>
58-
<TopicDetailUserMobile :user="reply.user" />
55+
<TopicDetailUser
56+
:user="reply.user"
57+
:created="reply.created"
58+
:edited="reply.edited"
59+
:topic-id="reply.topicId"
60+
:floor="reply.floor"
61+
/>
5962

6063
<div
6164
v-if="reply.targets && reply.targets.length > 0"
@@ -93,7 +96,7 @@ const replyContent = computed(() => {
9396
color="default"
9497
underline="none"
9598
:to="`/topic/${reply.topicId}#k${reply.floor}`"
96-
class-name="text-default-500 font-bold"
99+
class-name="text-default-400 font-bold"
97100
>
98101
#{{ reply.floor }}
99102
</KunLink>
@@ -103,11 +106,20 @@ const replyContent = computed(() => {
103106

104107
<TopicComment :reply-id="reply.id" :comments-data="comments" />
105108

106-
<LazyTopicCommentPanel
107-
v-if="isShowPanel && reply.id === storeReplyId"
108-
:reply-id="reply.id"
109-
@get-comment="(newComment) => comments.push(newComment)"
110-
/>
109+
<Transition
110+
enter-active-class="transition-all duration-300 ease-out"
111+
enter-from-class="opacity-0 max-h-0"
112+
enter-to-class="opacity-100 max-h-96"
113+
leave-active-class="transition-all duration-300 ease-in"
114+
leave-from-class="opacity-100 max-h-96"
115+
leave-to-class="opacity-0 max-h-0"
116+
>
117+
<LazyTopicCommentPanel
118+
v-if="isShowPanel && reply.id === storeReplyId"
119+
:reply-id="reply.id"
120+
@get-comment="(newComment) => comments.push(newComment)"
121+
/>
122+
</Transition>
111123
</KunCard>
112124
</div>
113125
</template>

‎components/topic/reply/Target.vue‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ const handleClick = () => {
2020
</script>
2121

2222
<template>
23-
<blockquote
23+
<div
2424
@click="handleClick"
25-
class="group border-primary/30 bg-default-100/50 hover:border-primary/80 hover:bg-default-100 cursor-pointer rounded-lg border-l-4 p-3 transition-colors"
25+
class="group hover:border-primary-500 dark:hover:border-primary-400 border-default-300 bg-default-100 hover:bg-default-200/60 dark:border-default-600 dark:bg-default-700/50 dark:hover:bg-default-700 cursor-pointer rounded-md border-l-2 p-3 transition-all duration-200"
2626
>
2727
<div class="flex flex-wrap items-center gap-x-2 text-sm">
28-
<span class="text-default-600">回复</span>
28+
<span class="text-default-600 dark:text-default-300">回复</span>
2929
<KunLink
3030
underline="hover"
3131
size="sm"
@@ -35,15 +35,20 @@ const handleClick = () => {
3535
>
3636
@{{ target.user.name }}
3737
</KunLink>
38-
<span class="text-primary font-semibold">#{{ target.floor }}</span>
38+
<span class="text-default-500 font-semibold"> #{{ target.floor }} </span>
3939
</div>
4040

41-
<p class="text-default-600 mt-1 line-clamp-2 text-sm italic">
42-
{{ target.contentPreview }}
43-
</p>
44-
45-
<div v-if="isLoading" class="text-primary mt-2 text-xs">正在加载...</div>
46-
</blockquote>
41+
<div class="text-default-700 dark:text-default-200 mt-2 text-sm">
42+
<KunContent
43+
v-if="target.replyContentHtml"
44+
:content="target.replyContentHtml"
45+
class="prose prose-sm dark:prose-invert max-w-none"
46+
/>
47+
<p v-else class="line-clamp-2 italic">
48+
{{ target.contentPreview }}
49+
</p>
50+
</div>
4751

48-
<KunContent :content="target.replyContentHtml" class="mt-2" />
52+
<KunLoading v-if="isLoading" description="正在获取完整评论内容..." />
53+
</div>
4954
</template>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "kun-galgame-nuxt3",
3-
"version": "4.0.29",
3+
"version": "4.0.30",
44
"packageManager": "pnpm@10.4.1",
55
"private": true,
66
"scripts": {

0 commit comments

Comments
 (0)