💄 Optimize post detail view
This commit is contained in:
@@ -4,18 +4,19 @@
|
||||
<v-progress-circular indeterminate size="64" color="primary" />
|
||||
<p class="mt-4">Loading post...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="text-center py-12">
|
||||
<v-alert type="error" class="mb-4" prominent>
|
||||
<v-alert-title>Error Loading Post</v-alert-title>
|
||||
{{ error?.statusMessage || "Failed to load post" }}
|
||||
</v-alert>
|
||||
</div>
|
||||
<div v-else-if="post" class="max-w-4xl mx-auto">
|
||||
<!-- Article Type: Split Header and Content -->
|
||||
<template v-if="post.type === 1">
|
||||
<!-- Post Header Section (Article) -->
|
||||
<v-card class="mb-4 elevation-2" rounded="lg">
|
||||
<v-card-text class="pa-6">
|
||||
|
||||
<div v-else-if="post" class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
<!-- Main Content Column -->
|
||||
<div class="lg:col-span-8 flex flex-col gap-4">
|
||||
<v-card class="pa-6">
|
||||
<post-header :item="post" class="mb-4" />
|
||||
|
||||
<!-- Post Title and Description -->
|
||||
@@ -47,25 +48,17 @@
|
||||
<v-icon size="16">mdi-pencil</v-icon>
|
||||
<span>Updated {{ formatDate(post.updatedAt) }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="(post as any).viewCount || (post as any).view_count"
|
||||
class="flex items-center gap-1"
|
||||
>
|
||||
<div class="flex items-center gap-1">
|
||||
<v-icon size="16">mdi-eye</v-icon>
|
||||
<span
|
||||
>{{
|
||||
(post as any).viewCount || (post as any).view_count || 0
|
||||
}}
|
||||
views</span
|
||||
>
|
||||
<span>
|
||||
{{ post.viewsTotal }} / {{ post.viewsUnique }}
|
||||
views
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-card>
|
||||
|
||||
<!-- Merged Content and Attachments Section (Article) -->
|
||||
<v-card class="mb-4 elevation-1" rounded="lg">
|
||||
<v-card-text class="pa-8">
|
||||
<v-card class="pa-6">
|
||||
<article
|
||||
v-if="htmlContent"
|
||||
class="prose prose-xl dark:prose-invert prose-slate max-w-none mb-8"
|
||||
@@ -75,112 +68,58 @@
|
||||
|
||||
<!-- Attachments within Content Section -->
|
||||
<attachment-list :attachments="post.attachments || []" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-card>
|
||||
</div>
|
||||
|
||||
<!-- Other Types: Merged Header, Content, and Attachments -->
|
||||
<template v-else>
|
||||
<!-- Merged Header, Content, and Attachments Section -->
|
||||
<v-card class="px-4 py-3 mb-4 elevation-1" rounded="lg">
|
||||
<v-card-text class="pa-6">
|
||||
<post-header :item="post" class="mb-4" />
|
||||
|
||||
<!-- Post Title and Description -->
|
||||
<div v-if="post.title || post.description" class="mb-4">
|
||||
<h1
|
||||
v-if="post.title"
|
||||
class="text-3xl font-bold mb-3 leading-tight"
|
||||
>
|
||||
{{ post.title }}
|
||||
</h1>
|
||||
<p
|
||||
v-if="post.description"
|
||||
class="text-lg text-medium-emphasis leading-relaxed"
|
||||
>
|
||||
{{ post.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Post Metadata -->
|
||||
<div
|
||||
class="flex items-center gap-4 text-sm text-medium-emphasis mb-4"
|
||||
>
|
||||
<div class="flex items-center gap-1">
|
||||
<v-icon size="16">mdi-calendar</v-icon>
|
||||
<span>{{ formatDate(post.createdAt) }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="post.updatedAt && post.updatedAt !== post.createdAt"
|
||||
class="flex items-center gap-1"
|
||||
>
|
||||
<v-icon size="16">mdi-pencil</v-icon>
|
||||
<span>Updated {{ formatDate(post.updatedAt) }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="(post as any).viewCount || (post as any).view_count"
|
||||
class="flex items-center gap-1"
|
||||
>
|
||||
<v-icon size="16">mdi-eye</v-icon>
|
||||
<span
|
||||
>{{
|
||||
(post as any).viewCount || (post as any).view_count || 0
|
||||
}}
|
||||
views</span
|
||||
<!-- Sidebar Column -->
|
||||
<div class="lg:col-span-4 flex flex-col gap-4">
|
||||
<!-- Tags Section -->
|
||||
<v-card
|
||||
v-if="post.tags && post.tags.length > 0"
|
||||
rounded="lg"
|
||||
prepend-icon="mdi-tag-multiple"
|
||||
title="Tags & Categories"
|
||||
>
|
||||
<v-card-text>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<v-chip
|
||||
v-for="category in post.categories"
|
||||
:key="category.id"
|
||||
prepend-icon="mdi-tshape"
|
||||
rounded
|
||||
>
|
||||
{{ category.slug }}
|
||||
</v-chip>
|
||||
<v-chip
|
||||
v-for="tag in post.tags"
|
||||
:key="tag.id"
|
||||
prepend-icon="mdi-tag"
|
||||
rounded
|
||||
>
|
||||
{{ tag.slug }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Main Content -->
|
||||
<article
|
||||
v-if="htmlContent"
|
||||
class="prose prose-xl dark:prose-invert prose-slate max-w-none mb-8"
|
||||
>
|
||||
<div v-html="htmlContent" />
|
||||
</article>
|
||||
|
||||
<!-- Attachments within Merged Section -->
|
||||
<attachment-list :attachments="post.attachments || []" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<!-- Tags Section -->
|
||||
<v-card
|
||||
v-if="post.tags && post.tags.length > 0"
|
||||
class="mb-4 elevation-1"
|
||||
rounded="lg"
|
||||
>
|
||||
<v-card-title class="text-h6">
|
||||
<v-icon class="mr-2">mdi-tag-multiple</v-icon>
|
||||
Tags
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<v-chip
|
||||
v-for="tag in post.tags"
|
||||
:key="tag"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
class="cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors"
|
||||
>
|
||||
<v-icon start size="16">mdi-tag</v-icon>
|
||||
{{ tag }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Post Reactions -->
|
||||
<div>
|
||||
<post-reaction-list
|
||||
can-react
|
||||
:parent-id="id"
|
||||
:reactions="(post as any).reactions || {}"
|
||||
:reactions-made="(post as any).reactionsMade || {}"
|
||||
@react="handleReaction"
|
||||
/>
|
||||
<!-- Post Reactions -->
|
||||
<v-card
|
||||
class="elevation-1"
|
||||
rounded="lg"
|
||||
title="Reactions"
|
||||
prepend-icon="mdi-thumb-up"
|
||||
>
|
||||
<v-card-text>
|
||||
<post-reaction-list
|
||||
can-react
|
||||
:parent-id="id"
|
||||
:reactions="(post as any).reactions || {}"
|
||||
:reactions-made="(post as any).reactionsMade || {}"
|
||||
@react="handleReaction"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-container>
|
||||
|
||||
Reference in New Issue
Block a user