chore: reorganize project into monorepo
This commit is contained in:
334
frontend/src/components/Comments.astro
Normal file
334
frontend/src/components/Comments.astro
Normal file
@@ -0,0 +1,334 @@
|
||||
---
|
||||
import { API_BASE_URL, apiClient } from '../lib/api/client';
|
||||
import type { Comment } from '../lib/api/client';
|
||||
|
||||
interface Props {
|
||||
postSlug: string;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { postSlug, class: className = '' } = Astro.props;
|
||||
|
||||
let comments: Comment[] = [];
|
||||
let error: string | null = null;
|
||||
|
||||
try {
|
||||
comments = await apiClient.getComments(postSlug, { approved: true });
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : '加载评论失败';
|
||||
console.error('Failed to fetch comments:', e);
|
||||
}
|
||||
|
||||
function formatCommentDate(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (days === 0) return '今天';
|
||||
if (days === 1) return '昨天';
|
||||
if (days < 7) return `${days} 天前`;
|
||||
if (days < 30) return `${Math.floor(days / 7)} 周前`;
|
||||
return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
|
||||
}
|
||||
---
|
||||
|
||||
<div class={`terminal-comments ${className}`} data-post-slug={postSlug} data-api-base={API_BASE_URL}>
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div class="space-y-3">
|
||||
<span class="terminal-kicker">
|
||||
<i class="fas fa-message"></i>
|
||||
discussion buffer
|
||||
</span>
|
||||
<div class="terminal-section-title">
|
||||
<span class="terminal-section-icon">
|
||||
<i class="fas fa-comments"></i>
|
||||
</span>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-[var(--title-color)]">评论终端</h3>
|
||||
<p class="text-sm text-[var(--text-secondary)]">
|
||||
当前缓冲区共有 {comments.length} 条已展示评论，新的留言提交后会进入审核队列。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" id="toggle-comment-form" class="terminal-action-button terminal-action-button-primary">
|
||||
<i class="fas fa-pen"></i>
|
||||
<span>write comment</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="comment-form-container" class="mt-6 hidden">
|
||||
<form id="comment-form" class="terminal-panel-muted space-y-5">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="terminal-form-label">
|
||||
nickname <span class="text-[var(--primary)]">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="nickname"
|
||||
required
|
||||
placeholder="anonymous_operator"
|
||||
class="terminal-form-input"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="terminal-form-label">
|
||||
email <span class="text-[var(--text-tertiary)] normal-case tracking-normal">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="you@example.com"
|
||||
class="terminal-form-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="terminal-form-label">
|
||||
message <span class="text-[var(--primary)]">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
name="content"
|
||||
required
|
||||
rows="6"
|
||||
maxlength="500"
|
||||
placeholder="$ echo 'Leave your thoughts here...'"
|
||||
class="terminal-form-textarea resize-y"
|
||||
></textarea>
|
||||
<p class="mt-2 text-right text-xs text-[var(--text-tertiary)]">max 500 chars</p>
|
||||
</div>
|
||||
|
||||
<div id="replying-to" class="terminal-panel-muted hidden items-center justify-between gap-3 py-3">
|
||||
<span class="text-sm text-[var(--text-secondary)]">
|
||||
reply -> <span id="reply-target" class="font-medium text-[var(--primary)]"></span>
|
||||
</span>
|
||||
<button type="button" id="cancel-reply" class="terminal-action-button">
|
||||
<i class="fas fa-xmark"></i>
|
||||
<span>cancel reply</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button type="submit" class="terminal-action-button terminal-action-button-primary">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
<span>submit</span>
|
||||
</button>
|
||||
<button type="button" id="cancel-comment" class="terminal-action-button">
|
||||
<i class="fas fa-ban"></i>
|
||||
<span>close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="comment-message" class="hidden rounded-2xl border px-4 py-3 text-sm"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="comments-list" class="mt-8 space-y-4">
|
||||
{error ? (
|
||||
<div class="rounded-2xl border px-4 py-4 text-sm text-[var(--danger)]" style="border-color: color-mix(in oklab, var(--danger) 30%, var(--border-color)); background: color-mix(in oklab, var(--danger) 10%, var(--header-bg));">
|
||||
{error}
|
||||
</div>
|
||||
) : comments.length === 0 ? (
|
||||
<div class="terminal-empty">
|
||||
<div class="mx-auto flex max-w-md flex-col items-center gap-3">
|
||||
<span class="terminal-section-icon">
|
||||
<i class="fas fa-comment-slash"></i>
|
||||
</span>
|
||||
<h4 class="text-lg font-semibold text-[var(--title-color)]">暂无评论</h4>
|
||||
<p class="text-sm leading-7 text-[var(--text-secondary)]">
|
||||
当前还没有留言。可以打开上面的输入面板，作为第一个在这个终端缓冲区里发言的人。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
comments.map(comment => (
|
||||
<div
|
||||
class="rounded-2xl border p-4"
|
||||
data-comment-id={comment.id}
|
||||
style="border-color: color-mix(in oklab, var(--primary) 14%, var(--border-color)); background: linear-gradient(180deg, color-mix(in oklab, var(--terminal-bg) 96%, transparent), color-mix(in oklab, var(--header-bg) 90%, transparent));"
|
||||
>
|
||||
<div class="flex gap-4">
|
||||
<div class="shrink-0">
|
||||
<div class="flex h-11 w-11 items-center justify-center rounded-2xl border border-[var(--border-color)] bg-[var(--header-bg)]">
|
||||
<i class="fas fa-user text-[var(--primary)]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-1 space-y-3">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="font-semibold text-[var(--title-color)]">{comment.author || '匿名'}</span>
|
||||
<span class="terminal-chip px-2.5 py-1 text-xs">
|
||||
<i class="far fa-clock text-[var(--primary)]"></i>
|
||||
{formatCommentDate(comment.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="text-sm leading-7 text-[var(--text-secondary)]">{comment.content}</p>
|
||||
|
||||
<div class="flex flex-wrap gap-2 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
class="reply-btn terminal-action-button px-3 py-2 text-xs"
|
||||
data-author={comment.author}
|
||||
data-id={comment.id}
|
||||
>
|
||||
<i class="fas fa-reply"></i>
|
||||
<span>reply</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="like-btn terminal-action-button px-3 py-2 text-xs"
|
||||
>
|
||||
<i class="far fa-thumbs-up"></i>
|
||||
<span>like</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const wrapper = document.querySelector('.terminal-comments');
|
||||
const toggleBtn = document.getElementById('toggle-comment-form');
|
||||
const formContainer = document.getElementById('comment-form-container');
|
||||
const cancelBtn = document.getElementById('cancel-comment');
|
||||
const form = document.getElementById('comment-form') as HTMLFormElement | null;
|
||||
const replyingTo = document.getElementById('replying-to');
|
||||
const replyTarget = document.getElementById('reply-target');
|
||||
const cancelReply = document.getElementById('cancel-reply');
|
||||
const replyBtns = document.querySelectorAll('.reply-btn');
|
||||
const messageBox = document.getElementById('comment-message');
|
||||
const postSlug = wrapper?.getAttribute('data-post-slug') || '';
|
||||
const apiBase = wrapper?.getAttribute('data-api-base') || 'http://localhost:5150/api';
|
||||
|
||||
function showMessage(message: string, type: 'success' | 'error' | 'info') {
|
||||
if (!messageBox) return;
|
||||
|
||||
messageBox.classList.remove(
|
||||
'hidden',
|
||||
'text-[var(--success)]',
|
||||
'text-[var(--danger)]',
|
||||
'text-[var(--primary)]'
|
||||
);
|
||||
|
||||
if (type === 'success') {
|
||||
messageBox.classList.add('text-[var(--success)]');
|
||||
messageBox.setAttribute(
|
||||
'style',
|
||||
'border-color: color-mix(in oklab, var(--success) 28%, var(--border-color)); background: color-mix(in oklab, var(--success) 10%, var(--header-bg));'
|
||||
);
|
||||
} else if (type === 'error') {
|
||||
messageBox.classList.add('text-[var(--danger)]');
|
||||
messageBox.setAttribute(
|
||||
'style',
|
||||
'border-color: color-mix(in oklab, var(--danger) 28%, var(--border-color)); background: color-mix(in oklab, var(--danger) 10%, var(--header-bg));'
|
||||
);
|
||||
} else {
|
||||
messageBox.classList.add('text-[var(--primary)]');
|
||||
messageBox.setAttribute(
|
||||
'style',
|
||||
'border-color: color-mix(in oklab, var(--primary) 28%, var(--border-color)); background: color-mix(in oklab, var(--primary) 10%, var(--header-bg));'
|
||||
);
|
||||
}
|
||||
|
||||
messageBox.textContent = message;
|
||||
messageBox.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function resetReply() {
|
||||
replyingTo?.classList.add('hidden');
|
||||
replyingTo?.removeAttribute('data-reply-to');
|
||||
}
|
||||
|
||||
toggleBtn?.addEventListener('click', () => {
|
||||
formContainer?.classList.toggle('hidden');
|
||||
if (!formContainer?.classList.contains('hidden')) {
|
||||
form?.querySelector('textarea')?.focus();
|
||||
}
|
||||
});
|
||||
|
||||
cancelBtn?.addEventListener('click', () => {
|
||||
formContainer?.classList.add('hidden');
|
||||
resetReply();
|
||||
});
|
||||
|
||||
replyBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const author = btn.getAttribute('data-author');
|
||||
const commentId = btn.getAttribute('data-id');
|
||||
|
||||
if (replyingTo && replyTarget) {
|
||||
replyingTo.classList.remove('hidden');
|
||||
replyingTo.classList.add('flex');
|
||||
replyTarget.textContent = author || '匿名';
|
||||
replyingTo.setAttribute('data-reply-to', commentId || '');
|
||||
}
|
||||
|
||||
formContainer?.classList.remove('hidden');
|
||||
form?.querySelector('textarea')?.focus();
|
||||
});
|
||||
});
|
||||
|
||||
cancelReply?.addEventListener('click', () => {
|
||||
replyingTo?.classList.remove('flex');
|
||||
resetReply();
|
||||
});
|
||||
|
||||
form?.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(form);
|
||||
const replyToId = replyingTo?.getAttribute('data-reply-to');
|
||||
|
||||
try {
|
||||
showMessage('正在提交评论...', 'info');
|
||||
|
||||
const response = await fetch(`${apiBase}/comments`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
postSlug,
|
||||
nickname: formData.get('nickname'),
|
||||
email: formData.get('email'),
|
||||
content: formData.get('content'),
|
||||
replyTo: replyToId || null,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(await response.text());
|
||||
}
|
||||
|
||||
form.reset();
|
||||
replyingTo?.classList.remove('flex');
|
||||
resetReply();
|
||||
formContainer?.classList.add('hidden');
|
||||
showMessage('评论已提交，审核通过后会显示在这里。', 'success');
|
||||
} catch (error) {
|
||||
showMessage(`提交失败：${error instanceof Error ? error.message : 'unknown error'}`, 'error');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.like-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const icon = btn.querySelector('i');
|
||||
if (icon?.classList.contains('far')) {
|
||||
icon.classList.replace('far', 'fas');
|
||||
btn.classList.add('terminal-action-button-primary');
|
||||
} else if (icon?.classList.contains('fas')) {
|
||||
icon.classList.replace('fas', 'far');
|
||||
btn.classList.remove('terminal-action-button-primary');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user