initial commit

src/components/CommentSection.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="comment-section">
+    <h3 class="text-xl font-bold mb-6">评论</h3>
+    
+    <!-- 评论输入框 -->
+    <div v-if="isLoggedIn" class="mb-8">
+      <textarea
+        v-model="newComment"
+        placeholder="写下你的评论..."
+        class="w-full p-4 border border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none"
+        rows="4"
+      ></textarea>
+      <div class="flex justify-end mt-2">
+        <button
+          @click="submitComment"
+          :disabled="!newComment.trim() || submitting"
+          class="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {{ submitting ? '发布中...' : '发布评论' }}
+        </button>
+      </div>
+    </div>
+    
+    <!-- 未登录提示 -->
+    <div v-else class="mb-8 p-4 bg-muted rounded-lg text-center">
+      <p class="text-foreground/60">
+        <a href="/login" class="text-primary-500 hover:underline">登录</a> 后参与评论
+      </p>
+    </div>
+    
+    <!-- 评论列表 -->
+    <div v-if="loading" class="text-center py-8">
+      <div class="animate-spin w-8 h-8 border-2 border-primary-500 border-t-transparent rounded-full mx-auto"></div>
+      <p class="mt-2 text-foreground/40">加载评论中...</p>
+    </div>
+    
+    <div v-else-if="comments.length === 0" class="text-center py-8 text-foreground/40">
+      <p>暂无评论，来抢沙发吧！</p>
+    </div>
+    
+    <div v-else class="space-y-6">
+      <div v-for="comment in comments" :key="comment.id" class="comment-item">
+        <div class="flex gap-4">
+          <!-- 头像 -->
+          <div class="flex-shrink-0">
+            <div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+              <span class="text-primary-600 dark:text-primary-400 font-medium">
+                {{ (comment.user.nickname || comment.user.username)[0].toUpperCase() }}
+              </span>
+            </div>
+          </div>
+          
+          <!-- 内容 -->
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-1">
+              <span class="font-medium">{{ comment.user.nickname || comment.user.username }}</span>
+              <span class="text-xs text-foreground/40">{{ formatDate(comment.created_at) }}</span>
+            </div>
+            <p class="text-foreground/80 whitespace-pre-wrap">{{ comment.content }}</p>
+            
+            <!-- 回复按钮 -->
+            <button
+              @click="replyTo = comment.id"
+              class="text-sm text-primary-500 hover:underline mt-2"
+            >
+              回复
+            </button>
+          </div>
+        </div>
+        
+        <!-- 回复输入框 -->
+        <div v-if="replyTo === comment.id" class="mt-4 ml-14">
+          <textarea
+            v-model="replyContent"
+            placeholder="写下你的回复..."
+            class="w-full p-3 border border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none text-sm"
+            rows="3"
+          ></textarea>
+          <div class="flex justify-end gap-2 mt-2">
+            <button @click="replyTo = null" class="btn-secondary text-sm">取消</button>
+            <button
+              @click="submitReply(comment.id)"
+              :disabled="!replyContent.trim() || submitting"
+              class="btn-primary text-sm disabled:opacity-50"
+            >
+              回复
+            </button>
+          </div>
+        </div>
+        
+        <!-- 子评论 -->
+        <div v-if="comment.replies && comment.replies.length > 0" class="mt-4 ml-14 space-y-4">
+          <div v-for="reply in comment.replies" :key="reply.id" class="flex gap-3">
+            <div class="flex-shrink-0">
+              <div class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+                <span class="text-primary-600 dark:text-primary-400 text-sm font-medium">
+                  {{ (reply.user.nickname || reply.user.username)[0].toUpperCase() }}
+                </span>
+              </div>
+            </div>
+            <div class="flex-1">
+              <div class="flex items-center gap-2 mb-1">
+                <span class="font-medium text-sm">{{ reply.user.nickname || reply.user.username }}</span>
+                <span class="text-xs text-foreground/40">{{ formatDate(reply.created_at) }}</span>
+              </div>
+              <p class="text-foreground/80 text-sm">{{ reply.content }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 分页 -->
+    <div v-if="pagination.totalPage > 1" class="flex justify-center gap-2 mt-8">
+      <button
+        @click="loadPage(pagination.page - 1)"
+        :disabled="pagination.page <= 1"
+        class="btn-secondary disabled:opacity-50"
+      >
+        上一页
+      </button>
+      <span class="px-4 py-2 text-foreground/60">
+        {{ pagination.page }} / {{ pagination.totalPage }}
+      </span>
+      <button
+        @click="loadPage(pagination.page + 1)"
+        :disabled="pagination.page >= pagination.totalPage"
+        class="btn-secondary disabled:opacity-50"
+      >
+        下一页
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+
+const props = defineProps<{
+  postId: string;
+  apiBaseUrl?: string;
+}>();
+
+const apiBaseUrl = props.apiBaseUrl || 'http://localhost:8080/api';
+
+// 状态
+const comments = ref<any[]>([]);
+const loading = ref(true);
+const submitting = ref(false);
+const newComment = ref('');
+const replyTo = ref<number | null>(null);
+const replyContent = ref('');
+const pagination = ref({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+  totalPage: 0,
+});
+
+// 计算属性 - 仅在浏览器环境中访问 localStorage
+const isLoggedIn = computed(() => {
+  if (typeof window === 'undefined') return false;
+  return !!localStorage.getItem('token');
+});
+
+// 获取认证头
+function getAuthHeaders(): Record<string, string> {
+  if (typeof window === 'undefined') return {};
+  const token = localStorage.getItem('token');
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+// 加载评论
+async function loadComments() {
+  loading.value = true;
+  try {
+    const response = await fetch(
+      `${apiBaseUrl}/comments?post_id=${props.postId}&page=${pagination.value.page}&page_size=${pagination.value.pageSize}`
+    );
+    const data = await response.json();
+    if (response.ok) {
+      comments.value = data.data;
+      pagination.value = data.pagination;
+    }
+  } catch (error) {
+    console.error('Failed to load comments:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 提交评论
+async function submitComment() {
+  if (!newComment.value.trim()) return;
+  
+  submitting.value = true;
+  try {
+    const response = await fetch(`${apiBaseUrl}/comments`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...getAuthHeaders(),
+      },
+      body: JSON.stringify({
+        post_id: props.postId,
+        content: newComment.value,
+      }),
+    });
+    
+    if (response.ok) {
+      newComment.value = '';
+      await loadComments();
+    } else {
+      const error = await response.json();
+      alert(error.error || '发布失败');
+    }
+  } catch (error) {
+    console.error('Failed to submit comment:', error);
+    alert('发布失败，请稍后重试');
+  } finally {
+    submitting.value = false;
+  }
+}
+
+// 提交回复
+async function submitReply(parentId: number) {
+  if (!replyContent.value.trim()) return;
+  
+  submitting.value = true;
+  try {
+    const response = await fetch(`${apiBaseUrl}/comments`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...getAuthHeaders(),
+      },
+      body: JSON.stringify({
+        post_id: props.postId,
+        parent_id: parentId,
+        content: replyContent.value,
+      }),
+    });
+    
+    if (response.ok) {
+      replyContent.value = '';
+      replyTo.value = null;
+      await loadComments();
+    } else {
+      const error = await response.json();
+      alert(error.error || '回复失败');
+    }
+  } catch (error) {
+    console.error('Failed to submit reply:', error);
+    alert('回复失败，请稍后重试');
+  } finally {
+    submitting.value = false;
+  }
+}
+
+// 加载指定页
+function loadPage(page: number) {
+  pagination.value.page = page;
+  loadComments();
+}
+
+// 格式化日期
+function formatDate(dateString: string) {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+  
+  if (minutes < 1) return '刚刚';
+  if (minutes < 60) return `${minutes} 分钟前`;
+  if (hours < 24) return `${hours} 小时前`;
+  if (days < 30) return `${days} 天前`;
+  
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+onMounted(() => {
+  loadComments();
+});
+</script>
+
+<style scoped>
+.comment-section {
+  @apply mt-12 pt-8 border-t border-border;
+}
+</style>

src/components/Counter.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="inline-flex items-center gap-4 px-4 py-2 bg-primary-100 dark:bg-primary-900 rounded-lg">
+    <button
+      @click="count--"
+      class="w-8 h-8 flex items-center justify-center rounded-full bg-primary-500 text-white hover:bg-primary-600 transition-colors"
+    >
+      -
+    </button>
+    <span class="text-2xl font-bold min-w-[2rem] text-center">{{ count }}</span>
+    <button
+      @click="count++"
+      class="w-8 h-8 flex items-center justify-center rounded-full bg-primary-500 text-white hover:bg-primary-600 transition-colors"
+    >
+      +
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const count = ref(0);
+</script>

src/components/LikeButton.vue

@@ -0,0 +1,134 @@
+<template>
+  <button
+    @click="toggleLike"
+    :disabled="loading"
+    class="like-button flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300"
+    :class="[
+      liked 
+        ? 'bg-red-100 dark:bg-red-900/30 text-red-500' 
+        : 'bg-muted hover:bg-red-50 dark:hover:bg-red-900/20 text-foreground/60 hover:text-red-500'
+    ]"
+  >
+    <!-- 心形图标 -->
+    <svg
+      class="w-5 h-5 transition-transform duration-300"
+      :class="{ 'scale-125': animating }"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+      />
+    </svg>
+    
+    <!-- 点赞数 -->
+    <span class="font-medium">{{ likeCount }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const props = defineProps<{
+  postId: string;
+  apiBaseUrl?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update', liked: boolean, count: number): void;
+}>();
+
+const apiBaseUrl = props.apiBaseUrl || 'http://localhost:8080/api';
+
+// 状态
+const liked = ref(false);
+const likeCount = ref(0);
+const loading = ref(false);
+const animating = ref(false);
+
+// 获取认证头
+function getAuthHeaders(): Record<string, string> {
+  // 仅在浏览器环境中访问 localStorage
+  if (typeof window === 'undefined') return {};
+  const token = localStorage.getItem('token');
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+// 加载点赞状态
+async function loadLikeStatus() {
+  loading.value = true;
+  try {
+    const response = await fetch(
+      `${apiBaseUrl}/likes?post_id=${props.postId}`,
+      {
+        headers: getAuthHeaders(),
+      }
+    );
+    
+    if (response.ok) {
+      const data = await response.json();
+      liked.value = data.liked;
+      likeCount.value = data.like_count;
+    }
+  } catch (error) {
+    console.error('Failed to load like status:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 切换点赞
+async function toggleLike() {
+  loading.value = true;
+  
+  try {
+    const response = await fetch(`${apiBaseUrl}/likes`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...getAuthHeaders(),
+      },
+      body: JSON.stringify({
+        post_id: props.postId,
+      }),
+    });
+    
+    if (response.ok) {
+      const data = await response.json();
+      liked.value = data.liked;
+      likeCount.value = data.like_count;
+      
+      // 触发动画
+      if (data.liked) {
+        animating.value = true;
+        setTimeout(() => {
+          animating.value = false;
+        }, 300);
+      }
+      
+      emit('update', data.liked, data.like_count);
+    } else {
+      const error = await response.json();
+      console.error('Failed to toggle like:', error);
+    }
+  } catch (error) {
+    console.error('Failed to toggle like:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  loadLikeStatus();
+});
+</script>
+
+<style scoped>
+.like-button {
+  @apply cursor-pointer select-none;
+}
+
+.like-button:disabled {
+  @apply cursor-wait;
+}
+</style>

src/components/LoginForm.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="login-container">
+    <div class="login-card">
+      <div class="tabs">
+        <button 
+          :class="['tab', { active: mode === 'login' }]" 
+          @click="mode = 'login'"
+        >
+          登录
+        </button>
+        <button 
+          :class="['tab', { active: mode === 'register' }]" 
+          @click="mode = 'register'"
+        >
+          注册
+        </button>
+      </div>
+
+      <form @submit.prevent="handleSubmit" class="form">
+        <div class="form-group">
+          <label for="username">用户名</label>
+          <input 
+            id="username"
+            v-model="form.username" 
+            type="text" 
+            placeholder="请输入用户名"
+            required
+          />
+        </div>
+
+        <div class="form-group" v-if="mode === 'register'">
+          <label for="email">邮箱</label>
+          <input 
+            id="email"
+            v-model="form.email" 
+            type="email" 
+            placeholder="请输入邮箱"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="password">密码</label>
+          <input 
+            id="password"
+            v-model="form.password" 
+            type="password" 
+            placeholder="请输入密码"
+            required
+          />
+        </div>
+
+        <div class="form-group" v-if="mode === 'register'">
+          <label for="confirmPassword">确认密码</label>
+          <input 
+            id="confirmPassword"
+            v-model="form.confirmPassword" 
+            type="password" 
+            placeholder="请再次输入密码"
+            required
+          />
+        </div>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+        <div v-if="success" class="success-message">{{ success }}</div>
+
+        <button type="submit" class="submit-btn" :disabled="loading">
+          {{ loading ? '处理中...' : (mode === 'login' ? '登录' : '注册') }}
+        </button>
+      </form>
+
+      <div class="divider">
+        <span>或</span>
+      </div>
+
+      <button class="github-btn" @click="handleGithubLogin">
+        <svg viewBox="0 0 24 24" width="20" height="20">
+          <path fill="currentColor" d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+        </svg>
+        使用 GitHub 登录
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+const mode = ref<'login' | 'register'>('login')
+const loading = ref(false)
+const error = ref('')
+const success = ref('')
+
+const form = reactive({
+  username: '',
+  email: '',
+  password: '',
+  confirmPassword: ''
+})
+
+const API_BASE = import.meta.env.PUBLIC_API_BASE || 'http://localhost:8080'
+
+async function handleSubmit() {
+  error.value = ''
+  success.value = ''
+  
+  if (mode.value === 'register' && form.password !== form.confirmPassword) {
+    error.value = '两次输入的密码不一致'
+    return
+  }
+
+  loading.value = true
+
+  try {
+    const endpoint = mode.value === 'login' ? '/api/auth/login' : '/api/auth/register'
+    const body = mode.value === 'login' 
+      ? { username: form.username, password: form.password }
+      : { username: form.username, email: form.email, password: form.password }
+
+    const response = await fetch(`${API_BASE}${endpoint}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    })
+
+    const data = await response.json()
+
+    if (!response.ok) {
+      error.value = data.error || '操作失败'
+      return
+    }
+
+    if (data.token) {
+      localStorage.setItem('token', data.token)
+      localStorage.setItem('user', JSON.stringify(data.user))
+      
+      success.value = mode.value === 'login' ? '登录成功！' : '注册成功！'
+      
+      window.dispatchEvent(new CustomEvent('user-login', { detail: data.user }))
+      
+      setTimeout(() => {
+        window.location.href = '/'
+      }, 1000)
+    }
+  } catch (err) {
+    error.value = '网络错误，请稍后重试'
+    console.error(err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleGithubLogin() {
+  error.value = 'GitHub 登录功能即将上线'
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60vh;
+  padding: 2rem;
+}
+
+.login-card {
+  background: var(--card-bg, #fff);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+  width: 100%;
+  max-width: 400px;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 1.5rem;
+  border-bottom: 2px solid var(--border-color, #e5e7eb);
+}
+
+.tab {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--text-muted, #6b7280);
+  transition: all 0.3s;
+}
+
+.tab.active {
+  color: var(--primary, #3b82f6);
+  border-bottom: 2px solid var(--primary, #3b82f6);
+  margin-bottom: -2px;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text, #374151);
+}
+
+.form-group input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border-color, #d1d5db);
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: var(--primary, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.error-message {
+  color: #ef4444;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  background: #fef2f2;
+  border-radius: 6px;
+}
+
+.success-message {
+  color: #22c55e;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  background: #f0fdf4;
+  border-radius: 6px;
+}
+
+.submit-btn {
+  width: 100%;
+  padding: 0.875rem;
+  background: var(--primary, #3b82f6);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.submit-btn:hover:not(:disabled) {
+  background: var(--primary-hover, #2563eb);
+}
+
+.submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+  margin: 1.5rem 0;
+}
+
+.divider::before,
+.divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border-color, #e5e7eb);
+}
+
+.divider span {
+  padding: 0 1rem;
+  color: var(--text-muted, #9ca3af);
+  font-size: 0.875rem;
+}
+
+.github-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.875rem;
+  background: #24292e;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.github-btn:hover {
+  background: #1a1e22;
+}
+</style>

src/components/TypstBlock.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * TypstBlock 组件
+ * 
+ * 用于在 MDX 文章中渲染 Typst 数学公式和复杂排版。
+ * 
+ * 使用方式：
+ * <TypstBlock>
+ * $ integral_0^infinity e^(-x^2) dif x = sqrt(pi) / 2 $
+ * </TypstBlock>
+ * 
+ * 注意：此组件需要在构建时安装 Typst 编译器。
+ * 如果 Typst 未安装，会显示原始代码块作为降级方案。
+ */
+
+interface Props {
+  class?: string;
+}
+
+const { class: className = '' } = Astro.props;
+
+// 获取子内容（Typst 代码）
+const content = await Astro.slots.render('default');
+const typstCode = content?.trim() || '';
+---
+
+<div class:list={['typst-block', 'my-6', className]}>
+  {/* 
+    Typst 渲染区域
+    在实际实现中，这里会调用 Typst 编译器将代码渲染为 SVG
+    目前作为占位符显示
+  */}
+  <div class="p-4 bg-muted rounded-lg border border-border overflow-x-auto">
+    {typstCode ? (
+      <div class="flex flex-col items-center">
+        {/* SVG 输出区域 (构建时会被替换为实际的 Typst 渲染结果) */}
+        <div class="typst-output text-lg" data-typst-code={typstCode}>
+          <code class="font-mono text-primary-600 dark:text-primary-400">
+            {typstCode}
+          </code>
+        </div>
+        <span class="text-xs text-foreground/40 mt-2">Typst 公式</span>
+      </div>
+    ) : (
+      <p class="text-foreground/40 text-center">请提供 Typst 代码</p>
+    )}
+  </div>
+</div>
+
+<style>
+  .typst-block {
+    /* 确保 Typst 内容居中显示 */
+    text-align: center;
+  }
+
+  .typst-output {
+    /* 为数学公式提供合适的样式 */
+    font-family: 'Latin Modern Math', 'STIX Two Math', 'Noto Serif SC', serif;
+    line-height: 1.8;
+  }
+
+  .typst-output svg {
+    /* SVG 输出样式 */
+    max-width: 100%;
+    height: auto;
+  }
+</style>

src/content/blog/hello-novablog.mdx

@@ -0,0 +1,88 @@
+---
+title: 'NovaBlog 入门指南'
+description: '这是一篇介绍 NovaBlog 博客系统核心功能的示例文章，展示 MDX 动态组件支持。'
+pubDate: 2026-02-28
+author: 'NovaBlog Team'
+category: '教程'
+tags: ['入门', 'MDX', 'Astro']
+heroImage: '/images/hello-world.jpg'
+---
+
+# 欢迎来到 NovaBlog
+
+NovaBlog 是一个极简、高效的程序员博客系统，采用 **静态渲染 + 轻量级微服务** 架构。
+
+## 核心特性
+
+### 🚀 极致性能
+
+基于 Astro 的 Islands Architecture（群岛架构），大部分页面为 Zero-JS，仅在需要交互的地方加载 JavaScript。
+
+### ✍️ MDX 支持
+
+在 Markdown 中直接嵌入交互组件：
+
+```jsx
+<Counter client:visible />
+```
+
+上面的组件会在可见时自动加载并挂载 JavaScript。
+
+### 📐 Typst 学术排版
+
+支持复杂的数学公式渲染：
+
+<TypstBlock>
+$ integral_0^infinity e^(-x^2) dif x = sqrt(pi) / 2 $
+</TypstBlock>
+
+## 代码高亮
+
+支持多种编程语言的语法高亮：
+
+```typescript
+// TypeScript 示例
+interface Post {
+  title: string;
+  content: string;
+  tags: string[];
+}
+
+async function getPosts(): Promise<Post[]> {
+  return await fetch('/api/posts').then(res => res.json());
+}
+```
+
+```go
+// Go 示例
+package main
+
+import "fmt"
+
+func main() {
+    fmt.Println("Hello, NovaBlog!")
+}
+```
+
+## 表格支持
+
+| 特性 | 描述 |
+|------|------|
+| 静态渲染 | 构建时生成 HTML，极速加载 |
+| MDX 支持 | 在 Markdown 中嵌入组件 |
+| 低资源 | 2C1G 即可运行 |
+| Docker | 一键容器化部署 |
+
+## 引用
+
+> 优秀的博客系统应该让作者专注于内容，而非配置。
+> 
+> — NovaBlog 设计理念
+
+## 下一步
+
+1. 在 `src/content/blog/` 目录下创建新的 `.md` 或 `.mdx` 文件
+2. 配置 Frontmatter 元数据
+3. 运行 `npm run dev` 预览效果
+
+开始你的写作之旅吧！ 🎉

src/content/config.ts

@@ -0,0 +1,40 @@
+import { defineCollection, z } from 'astro:content';
+
+// 博客文章集合
+const blogCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    pubDate: z.coerce.date(),
+    updatedDate: z.coerce.date().optional(),
+    heroImage: z.string().optional(),
+    heroAlt: z.string().optional(),
+    tags: z.array(z.string()).default([]),
+    category: z.string().optional(),
+    draft: z.boolean().default(false),
+    author: z.string().default('Anonymous'),
+    featured: z.boolean().default(false),
+    // 用于评论区
+    comments: z.boolean().default(true),
+    // 文章唯一标识符，用于评论关联
+    slug: z.string().optional(),
+  }),
+});
+
+// 页面集合 (如关于页面等)
+const pagesCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    layout: z.string().optional(),
+    showInNav: z.boolean().default(false),
+    order: z.number().default(0),
+  }),
+});
+
+export const collections = {
+  blog: blogCollection,
+  pages: pagesCollection,
+};

src/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />
+
+// Vue 组件类型声明
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+// MDX 文件类型声明
+declare module '*.mdx' {
+  import type { MDXComponent } from 'mdx/types';
+  export default MDXComponent;
+}

src/layouts/BaseLayout.astro

@@ -0,0 +1,224 @@
+---
+import '../styles/global.css';
+
+interface Props {
+  title: string;
+  description?: string;
+  image?: string;
+  canonicalURL?: string;
+}
+
+const {
+  title,
+  description = 'NovaBlog - 一个极简、高效的程序员博客系统',
+  image = '/og-default.png',
+  canonicalURL = Astro.url.href,
+} = Astro.props;
+
+const { site } = Astro;
+const socialImageURL = image.startsWith('http') ? image : new URL(image, site).href;
+---
+
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="generator" content={Astro.generator} />
+
+    <!-- SEO Meta Tags -->
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <link rel="canonical" href={canonicalURL} />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonicalURL} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={socialImageURL} />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={socialImageURL} />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+
+    <!-- Preload Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Dark Mode Script (防止闪烁) -->
+    <script is:inline>
+      const theme = (() => {
+        if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+          return localStorage.getItem('theme');
+        }
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          return 'dark';
+        }
+        return 'light';
+      })();
+
+      if (theme === 'dark') {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    </script>
+  </head>
+  <body class="min-h-screen flex flex-col bg-background text-foreground">
+    <!-- Header -->
+    <header class="sticky top-0 z-50 glass border-b border-border">
+      <nav class="content-width h-16 flex items-center justify-between">
+        <!-- Logo -->
+        <a href="/" class="flex items-center gap-2 text-xl font-bold hover:text-primary-500 transition-colors">
+          <svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="32" height="32" rx="8" fill="url(#logo-gradient)" />
+            <path
+              d="M8 12L16 8L24 12V20L16 24L8 20V12Z"
+              stroke="white"
+              stroke-width="2"
+              stroke-linejoin="round"
+            />
+            <circle cx="16" cy="16" r="3" fill="white" />
+            <defs>
+              <linearGradient id="logo-gradient" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#0ea5e9" />
+                <stop offset="1" stop-color="#8b5cf6" />
+              </linearGradient>
+            </defs>
+          </svg>
+          <span class="gradient-text">NovaBlog</span>
+        </a>
+
+        <!-- Navigation Links -->
+        <div class="hidden md:flex items-center gap-6">
+          <a href="/" class="text-foreground/70 hover:text-foreground transition-colors">首页</a>
+          <a href="/blog" class="text-foreground/70 hover:text-foreground transition-colors">博客</a>
+          <a href="/tags" class="text-foreground/70 hover:text-foreground transition-colors">标签</a>
+          <a href="/about" class="text-foreground/70 hover:text-foreground transition-colors">关于</a>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex items-center gap-3">
+          <!-- Login Link -->
+          <a href="/login" class="btn-ghost px-3 py-1.5 rounded-lg text-sm font-medium">
+            登录
+          </a>
+
+          <!-- Theme Toggle -->
+          <button
+            id="theme-toggle"
+            class="btn-ghost p-2 rounded-lg"
+            aria-label="切换主题"
+          >
+            <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+              />
+            </svg>
+            <svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
+              />
+            </svg>
+          </button>
+
+          <!-- Mobile Menu Toggle -->
+          <button
+            id="mobile-menu-toggle"
+            class="btn-ghost p-2 rounded-lg md:hidden"
+            aria-label="打开菜单"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        </div>
+      </nav>
+
+      <!-- Mobile Menu -->
+      <div id="mobile-menu" class="hidden md:hidden border-t border-border">
+        <div class="content-width py-4 flex flex-col gap-3">
+          <a href="/" class="text-foreground/70 hover:text-foreground transition-colors py-2">首页</a>
+          <a href="/blog" class="text-foreground/70 hover:text-foreground transition-colors py-2">博客</a>
+          <a href="/tags" class="text-foreground/70 hover:text-foreground transition-colors py-2">标签</a>
+          <a href="/about" class="text-foreground/70 hover:text-foreground transition-colors py-2">关于</a>
+        </div>
+      </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="flex-1">
+      <slot />
+    </main>
+
+    <!-- Footer -->
+    <footer class="border-t border-border bg-muted/30">
+      <div class="content-width py-12">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <!-- About -->
+          <div>
+            <h3 class="font-semibold text-lg mb-4">NovaBlog</h3>
+            <p class="text-foreground/60 text-sm leading-relaxed">
+              一个极简、高效的程序员博客系统。支持 MDX、Typst 学术排版，静态渲染 + 轻量级微服务架构。
+            </p>
+          </div>
+
+          <!-- Links -->
+          <div>
+            <h3 class="font-semibold text-lg mb-4">快速链接</h3>
+            <ul class="space-y-2 text-sm">
+              <li><a href="/blog" class="text-foreground/60 hover:text-primary-500 transition-colors">全部文章</a></li>
+              <li><a href="/tags" class="text-foreground/60 hover:text-primary-500 transition-colors">标签分类</a></li>
+              <li><a href="/about" class="text-foreground/60 hover:text-primary-500 transition-colors">关于我</a></li>
+              <li><a href="/rss.xml" class="text-foreground/60 hover:text-primary-500 transition-colors">RSS 订阅</a></li>
+            </ul>
+          </div>
+
+          <!-- Tech Stack -->
+          <div>
+            <h3 class="font-semibold text-lg mb-4">技术栈</h3>
+            <ul class="space-y-2 text-sm text-foreground/60">
+              <li>前端: Astro + Vue 3 + Tailwind CSS</li>
+              <li>后端: Go + Gin + SQLite</li>
+              <li>部署: Docker + Nginx</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Copyright -->
+        <div class="mt-8 pt-8 border-t border-border text-center text-sm text-foreground/40">
+          <p>&copy; {new Date().getFullYear()} NovaBlog. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+
+    <!-- Theme Toggle Script -->
+    <script>
+      const themeToggle = document.getElementById('theme-toggle');
+      const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
+      const mobileMenu = document.getElementById('mobile-menu');
+
+      // Theme toggle
+      themeToggle?.addEventListener('click', () => {
+        const isDark = document.documentElement.classList.toggle('dark');
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+      });
+
+      // Mobile menu toggle
+      mobileMenuToggle?.addEventListener('click', () => {
+        mobileMenu?.classList.toggle('hidden');
+      });
+    </script>
+  </body>
+</html>

src/layouts/PostLayout.astro

@@ -0,0 +1,128 @@
+---
+import BaseLayout from './BaseLayout.astro';
+import CommentSection from '../components/CommentSection.vue';
+import LikeButton from '../components/LikeButton.vue';
+import type { CollectionEntry } from 'astro:content';
+
+interface Props {
+  post: CollectionEntry<'blog'>;
+}
+
+const { post } = Astro.props;
+const { title, description, pubDate, updatedDate, heroImage, heroAlt, tags, author, category } = post.data;
+
+// 格式化日期
+const formatDate = (date: Date) => {
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+};
+
+// 计算阅读时间（估算）
+const readingTime = Math.ceil(post.body?.split(/\s+/).length / 400) || 1;
+---
+
+<BaseLayout title={title} description={description} image={heroImage}>
+  <article class="py-12">
+    <!-- 文章头部 -->
+    <header class="content-width mb-12">
+      <!-- 分类和标签 -->
+      <div class="flex flex-wrap items-center gap-3 mb-4">
+        {category && (
+          <span class="tag bg-primary-500 text-white">
+            {category}
+          </span>
+        )}
+        {tags && tags.map((tag: string) => (
+          <span class="tag">
+            #{tag}
+          </span>
+        ))}
+      </div>
+
+      <!-- 标题 -->
+      <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight">
+        {title}
+      </h1>
+
+      <!-- 元信息 -->
+      <div class="article-meta flex-wrap">
+        <span class="flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+          {author}
+        </span>
+        <span class="flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+          发布于 {formatDate(pubDate)}
+        </span>
+        {updatedDate && (
+          <span class="flex items-center gap-1">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            更新于 {formatDate(updatedDate)}
+          </span>
+        )}
+        <span class="flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          预计阅读 {readingTime} 分钟
+        </span>
+      </div>
+
+      <!-- 封面图 -->
+      {heroImage && (
+        <div class="mt-8 rounded-xl overflow-hidden">
+          <img
+            src={heroImage}
+            alt={heroAlt || title}
+            class="w-full aspect-video object-cover"
+            loading="eager"
+          />
+        </div>
+      )}
+    </header>
+
+    <!-- 文章内容 -->
+    <div class="content-width">
+      <div class="max-w-3xl mx-auto">
+        <div class="prose-container prose-headings:font-semibold prose-headings:tracking-tight prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-p:leading-relaxed prose-a:text-primary-500 prose-a:no-underline hover:prose-a:underline prose-img:rounded-xl prose-code:text-primary-400">
+          <slot />
+        </div>
+      </div>
+    </div>
+
+    <!-- 文章底部 -->
+    <footer class="content-width mt-12">
+      <div class="max-w-3xl mx-auto">
+        <!-- 点赞按钮 -->
+        <div class="flex justify-center py-6">
+          <LikeButton postId={post.id} client:visible />
+        </div>
+
+        <!-- 分割线 -->
+        <hr class="border-border my-8" />
+
+        <!-- 文章导航 -->
+        <div class="flex justify-between items-center gap-4 py-6">
+          <a href="/blog" class="btn-secondary">
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            返回文章列表
+          </a>
+        </div>
+
+        <!-- 评论区 -->
+        <CommentSection postId={post.id} client:visible />
+      </div>
+    </footer>
+  </article>
+</BaseLayout>

src/mdx-components.ts

@@ -0,0 +1,20 @@
+import Counter from './components/Counter.vue';
+import TypstBlock from './components/TypstBlock.astro';
+
+/**
+ * MDX 组件映射
+ * 
+ * 在 MDX 文件中可以直接使用这些组件，无需 import。
+ * 例如：
+ * ```mdx
+ * <Counter client:visible />
+ * <TypstBlock>$ E = mc^2 $</TypstBlock>
+ * ```
+ */
+export const components = {
+  // Vue 交互组件
+  Counter,
+  
+  // Astro 静态组件
+  TypstBlock,
+};

src/pages/blog/[...slug].astro

@@ -0,0 +1,32 @@
+---
+import { getCollection, type CollectionEntry } from 'astro:content';
+import PostLayout from '../../layouts/PostLayout.astro';
+import Counter from '../../components/Counter.vue';
+import TypstBlock from '../../components/TypstBlock.astro';
+
+// MDX 组件映射
+const mdxComponents = {
+  Counter,
+  TypstBlock,
+};
+
+// 生成所有文章的静态路径
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  return posts.map((post) => ({
+    params: { slug: post.slug || post.id },
+    props: { post },
+  }));
+}
+
+interface Props {
+  post: CollectionEntry<'blog'>;
+}
+
+const { post } = Astro.props;
+const { Content } = await post.render();
+---
+
+<PostLayout post={post}>
+  <Content components={mdxComponents} />
+</PostLayout>

src/pages/blog/index.astro

@@ -0,0 +1,120 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+
+// 获取所有非草稿文章
+const allPosts = await getCollection('blog', ({ data }) => {
+  return !data.draft;
+});
+
+// 按日期排序
+const sortedPosts = allPosts.sort((a, b) => 
+  b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+
+// 格式化日期
+const formatDate = (date: Date) => {
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+};
+---
+
+<BaseLayout title="博客文章 - NovaBlog">
+  <div class="py-12">
+    <div class="content-width">
+      <!-- Page Header -->
+      <div class="text-center mb-12">
+        <h1 class="text-3xl md:text-4xl font-bold mb-4">博客文章</h1>
+        <p class="text-foreground/60">探索技术，记录成长</p>
+      </div>
+
+      {sortedPosts.length > 0 ? (
+        <div class="max-w-4xl mx-auto space-y-8">
+          {sortedPosts.map((post) => (
+            <article class="card group">
+              <a href={`/blog/${post.slug || post.id}`} class="block">
+                <div class="flex flex-col md:flex-row gap-6">
+                  <!-- 封面图 -->
+                  {post.data.heroImage ? (
+                    <div class="md:w-48 flex-shrink-0">
+                      <div class="aspect-video md:aspect-square rounded-lg overflow-hidden">
+                        <img
+                          src={post.data.heroImage}
+                          alt={post.data.heroAlt || post.data.title}
+                          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                          loading="lazy"
+                        />
+                      </div>
+                    </div>
+                  ) : (
+                    <div class="md:w-48 flex-shrink-0 hidden md:block">
+                      <div class="aspect-square rounded-lg bg-gradient-to-br from-primary-100 to-accent/20 dark:from-primary-900 dark:to-accent/10 flex items-center justify-center">
+                        <svg class="w-12 h-12 text-primary-300 dark:text-primary-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                      </div>
+                    </div>
+                  )}
+
+                  <!-- 内容 -->
+                  <div class="flex-1 min-w-0">
+                    <!-- 标签 -->
+                    <div class="flex flex-wrap items-center gap-2 mb-2">
+                      {post.data.category && (
+                        <span class="tag text-xs bg-primary-500 text-white">
+                          {post.data.category}
+                        </span>
+                      )}
+                      {(post.data.tags || []).slice(0, 3).map((tag: string) => (
+                        <span class="tag text-xs">#{tag}</span>
+                      ))}
+                    </div>
+
+                    <!-- 标题 -->
+                    <h2 class="text-xl font-semibold mb-2 group-hover:text-primary-500 transition-colors">
+                      {post.data.title}
+                    </h2>
+
+                    <!-- 描述 -->
+                    {post.data.description && (
+                      <p class="text-foreground/60 text-sm mb-4 line-clamp-2">
+                        {post.data.description}
+                      </p>
+                    )}
+
+                    <!-- 元信息 -->
+                    <div class="flex items-center gap-4 text-xs text-foreground/40">
+                      <span class="flex items-center gap-1">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                        {formatDate(post.data.pubDate)}
+                      </span>
+                      <span class="flex items-center gap-1">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                        </svg>
+                        {post.data.author}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </article>
+          ))}
+        </div>
+      ) : (
+        <div class="text-center py-16 text-foreground/40">
+          <svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          <p class="mb-2">暂无文章</p>
+          <p class="text-sm">请在 src/content/blog/ 目录下添加 Markdown 文件</p>
+        </div>
+      )}
+    </div>
+  </div>
+</BaseLayout>

src/pages/index.astro

@@ -0,0 +1,197 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+
+// 获取最新的博客文章
+const allPosts = await getCollection('blog', ({ data }) => {
+  return !data.draft;
+});
+
+// 按日期排序
+const sortedPosts = allPosts.sort((a, b) => 
+  b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+
+// 获取前6篇作为精选
+const featuredPosts = sortedPosts.slice(0, 6);
+
+// 获取所有标签
+const allTags = [...new Set(allPosts.flatMap(post => post.data.tags || []))];
+
+// 格式化日期
+const formatDate = (date: Date) => {
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+};
+---
+
+<BaseLayout title="NovaBlog - 极简程序员博客">
+  <!-- Hero Section -->
+  <section class="py-20 md:py-32 bg-gradient-to-br from-primary-50 via-background to-accent/10 dark:from-primary-900/20 dark:to-accent/5">
+    <div class="content-width text-center">
+      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
+        <span class="gradient-text">NovaBlog</span>
+      </h1>
+      <p class="text-xl md:text-2xl text-foreground/60 max-w-2xl mx-auto mb-8">
+        一个极简、高效的程序员博客系统
+      </p>
+      <p class="text-foreground/50 max-w-xl mx-auto mb-10">
+        支持 MDX 动态组件、Typst 学术排版，静态渲染 + 轻量级微服务架构，极致性能与优雅排版的完美结合
+      </p>
+      <div class="flex flex-wrap justify-center gap-4">
+        <a href="/blog" class="btn-primary">
+          浏览文章
+          <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+          </svg>
+        </a>
+        <a href="/about" class="btn-secondary">
+          了解更多
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Featured Posts -->
+  <section class="py-16">
+    <div class="content-width">
+      <div class="flex items-center justify-between mb-8">
+        <h2 class="text-2xl md:text-3xl font-bold">最新文章</h2>
+        <a href="/blog" class="text-primary-500 hover:text-primary-600 transition-colors flex items-center gap-1">
+          查看全部
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </a>
+      </div>
+
+      {featuredPosts.length > 0 ? (
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {featuredPosts.map((post) => (
+            <article class="card group cursor-pointer">
+              <a href={`/blog/${post.slug || post.id}`}>
+                {/* 封面图 */}
+                {post.data.heroImage ? (
+                  <div class="aspect-video rounded-lg overflow-hidden mb-4 -mt-6 -mx-6 w-[calc(100%+3rem)]">
+                    <img
+                      src={post.data.heroImage}
+                      alt={post.data.heroAlt || post.data.title}
+                      class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                      loading="lazy"
+                    />
+                  </div>
+                ) : (
+                  <div class="aspect-video rounded-lg bg-gradient-to-br from-primary-100 to-accent/20 dark:from-primary-900 dark:to-accent/10 mb-4 -mt-6 -mx-6 w-[calc(100%+3rem)] flex items-center justify-center">
+                    <svg class="w-12 h-12 text-primary-300 dark:text-primary-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                  </div>
+                )}
+
+                <!-- 分类 -->
+                {post.data.category && (
+                  <span class="tag text-xs mb-3">
+                    {post.data.category}
+                  </span>
+                )}
+
+                <!-- 标题 -->
+                <h3 class="text-lg font-semibold mb-2 group-hover:text-primary-500 transition-colors line-clamp-2">
+                  {post.data.title}
+                </h3>
+
+                <!-- 描述 -->
+                {post.data.description && (
+                  <p class="text-foreground/60 text-sm mb-4 line-clamp-2">
+                    {post.data.description}
+                  </p>
+                )}
+
+                <!-- 元信息 -->
+                <div class="flex items-center justify-between text-xs text-foreground/40">
+                  <span>{formatDate(post.data.pubDate)}</span>
+                  <span>{post.data.author}</span>
+                </div>
+              </a>
+            </article>
+          ))}
+        </div>
+      ) : (
+        <div class="text-center py-16 text-foreground/40">
+          <svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          <p>暂无文章，请在 src/content/blog/ 目录下添加 Markdown 文件</p>
+        </div>
+      )}
+    </div>
+  </section>
+
+  <!-- Tags Section -->
+  <section class="py-16 bg-muted/30">
+    <div class="content-width">
+      <h2 class="text-2xl md:text-3xl font-bold mb-8 text-center">标签云</h2>
+      {allTags.length > 0 ? (
+        <div class="flex flex-wrap justify-center gap-3">
+          {allTags.map((tag: string) => (
+            <a href={`/tags/${tag}`} class="tag hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors">
+              #{tag}
+            </a>
+          ))}
+        </div>
+      ) : (
+        <p class="text-center text-foreground/40">暂无标签</p>
+      )}
+    </div>
+  </section>
+
+  <!-- Features Section -->
+  <section class="py-16">
+    <div class="content-width">
+      <h2 class="text-2xl md:text-3xl font-bold mb-12 text-center">核心特性</h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <!-- Feature 1 -->
+        <div class="text-center">
+          <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+            <svg class="w-8 h-8 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold mb-2">极致性能</h3>
+          <p class="text-foreground/60 text-sm">
+            静态渲染 + Islands 架构，Zero-JS 默认，极致的加载速度
+          </p>
+        </div>
+
+        <!-- Feature 2 -->
+        <div class="text-center">
+          <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+            <svg class="w-8 h-8 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold mb-2">MDX 支持</h3>
+          <p class="text-foreground/60 text-sm">
+            在 Markdown 中嵌入 Vue/React 组件，实现丰富的交互效果
+          </p>
+        </div>
+
+        <!-- Feature 3 -->
+        <div class="text-center">
+          <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+            <svg class="w-8 h-8 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold mb-2">低资源占用</h3>
+          <p class="text-foreground/60 text-sm">
+            Go 后端 + SQLite，2C1G 小鸡也能流畅运行
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</BaseLayout>

src/pages/login.astro

@@ -0,0 +1,36 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import LoginForm from '../components/LoginForm.vue';
+---
+
+<BaseLayout title="登录 - NovaBlog">
+  <main class="login-page">
+    <h1 class="page-title">欢迎回来</h1>
+    <p class="page-subtitle">登录您的账户以发表评论和管理内容</p>
+    <LoginForm client:visible />
+  </main>
+</BaseLayout>
+
+<style>
+  .login-page {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+  }
+
+  .page-title {
+    text-align: center;
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: var(--text);
+  }
+
+  .page-subtitle {
+    text-align: center;
+    color: var(--text-muted);
+    margin-bottom: 2rem;
+  }
+</style>
+</task_progress>
+</write_to_file>

src/pages/tags/[tag].astro

@@ -0,0 +1,102 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+
+// 生成所有标签的静态路径
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  const allTags = [...new Set(posts.flatMap((post) => post.data.tags || []))];
+  return allTags.map((tag) => ({
+    params: { tag },
+  }));
+}
+
+// 获取当前标签
+const { tag } = Astro.params;
+
+// 获取该标签下的所有文章
+const allPosts = await getCollection('blog', ({ data }) => {
+  return !data.draft && (data.tags || []).includes(tag || '');
+});
+
+// 按日期排序
+const sortedPosts = allPosts.sort((a, b) => 
+  b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+
+// 格式化日期
+const formatDate = (date: Date) => {
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+};
+---
+
+<BaseLayout title={`#${tag} - NovaBlog`}>
+  <div class="py-12">
+    <div class="content-width">
+      <div class="text-center mb-12">
+        <h1 class="text-3xl md:text-4xl font-bold mb-4">
+          <span class="gradient-text">#{tag}</span>
+        </h1>
+        <p class="text-foreground/60">{sortedPosts.length} 篇文章</p>
+      </div>
+
+      <div class="max-w-4xl mx-auto space-y-8">
+        {sortedPosts.map((post) => (
+          <article class="card group">
+            <a href={`/blog/${post.slug || post.id}`} class="block">
+              <div class="flex flex-col md:flex-row gap-6">
+                <!-- 封面图 -->
+                {post.data.heroImage ? (
+                  <div class="md:w-48 flex-shrink-0">
+                    <div class="aspect-video md:aspect-square rounded-lg overflow-hidden">
+                      <img
+                        src={post.data.heroImage}
+                        alt={post.data.heroAlt || post.data.title}
+                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                        loading="lazy"
+                      />
+                    </div>
+                  </div>
+                ) : null}
+
+                <!-- 内容 -->
+                <div class="flex-1 min-w-0">
+                  <!-- 标题 -->
+                  <h2 class="text-xl font-semibold mb-2 group-hover:text-primary-500 transition-colors">
+                    {post.data.title}
+                  </h2>
+
+                  <!-- 描述 -->
+                  {post.data.description && (
+                    <p class="text-foreground/60 text-sm mb-4 line-clamp-2">
+                      {post.data.description}
+                    </p>
+                  )}
+
+                  <!-- 元信息 -->
+                  <div class="flex items-center gap-4 text-xs text-foreground/40">
+                    <span>{formatDate(post.data.pubDate)}</span>
+                    <span>{post.data.author}</span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </article>
+        ))}
+      </div>
+
+      <div class="text-center mt-12">
+        <a href="/tags" class="btn-secondary">
+          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+          </svg>
+          返回标签列表
+        </a>
+      </div>
+    </div>
+  </div>
+</BaseLayout>

src/pages/tags/index.astro

@@ -0,0 +1,54 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+
+// 获取所有文章
+const allPosts = await getCollection('blog', ({ data }) => {
+  return !data.draft;
+});
+
+// 统计标签
+const tagMap = new Map<string, number>();
+allPosts.forEach((post) => {
+  (post.data.tags || []).forEach((tag: string) => {
+    tagMap.set(tag, (tagMap.get(tag) || 0) + 1);
+  });
+});
+
+// 按文章数量排序
+const sortedTags = [...tagMap.entries()].sort((a, b) => b[1] - a[1]);
+---
+
+<BaseLayout title="标签 - NovaBlog">
+  <div class="py-12">
+    <div class="content-width">
+      <div class="text-center mb-12">
+        <h1 class="text-3xl md:text-4xl font-bold mb-4">标签</h1>
+        <p class="text-foreground/60">按标签浏览文章</p>
+      </div>
+
+      {sortedTags.length > 0 ? (
+        <div class="max-w-2xl mx-auto">
+          <div class="flex flex-wrap justify-center gap-4">
+            {sortedTags.map(([tag, count]) => (
+              <a
+                href={`/tags/${tag}`}
+                class="card px-6 py-4 flex items-center gap-3 hover:border-primary-500 transition-colors"
+              >
+                <span class="text-lg font-medium">#{tag}</span>
+                <span class="text-sm text-foreground/40">{count} 篇文章</span>
+              </a>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div class="text-center py-16 text-foreground/40">
+          <svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+          </svg>
+          <p>暂无标签</p>
+        </div>
+      )}
+    </div>
+  </div>
+</BaseLayout>

src/styles/global.css

@@ -0,0 +1,207 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ========================================
+   CSS 变量主题系统
+   ======================================== */
+:root {
+  /* 主色调 */
+  --primary-50: #f0f9ff;
+  --primary-100: #e0f2fe;
+  --primary-200: #bae6fd;
+  --primary-300: #7dd3fc;
+  --primary-400: #38bdf8;
+  --primary-500: #0ea5e9;
+  --primary-600: #0284c7;
+  --primary-700: #0369a1;
+  --primary-800: #075985;
+  --primary-900: #0c4a6e;
+
+  /* 背景色与前景色 */
+  --color-background: #ffffff;
+  --color-foreground: #1e293b;
+  --color-muted: #f1f5f9;
+  --color-accent: #8b5cf6;
+  --color-border: #e2e8f0;
+  --color-code-bg: #1e293b;
+
+  /* 字体 */
+  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', monospace;
+  --font-serif: 'Noto Serif SC', Georgia, 'Times New Roman', serif;
+
+  /* 间距 */
+  --header-height: 4rem;
+  --content-max-width: 80rem;
+}
+
+/* 暗黑模式 */
+.dark {
+  --color-background: #0f172a;
+  --color-foreground: #f1f5f9;
+  --color-muted: #1e293b;
+  --color-accent: #a78bfa;
+  --color-border: #334155;
+  --color-code-bg: #0f172a;
+}
+
+/* ========================================
+   基础样式
+   ======================================== */
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-family: var(--font-sans);
+  }
+
+  /* 选中文本样式 */
+  ::selection {
+    @apply bg-primary-200 text-primary-900;
+  }
+
+  .dark ::selection {
+    @apply bg-primary-700 text-primary-100;
+  }
+
+  /* 链接基础样式 */
+  a {
+    @apply transition-colors duration-200;
+  }
+
+  /* 代码块样式 */
+  code {
+    @apply font-mono text-sm;
+  }
+
+  pre {
+    @apply overflow-x-auto rounded-lg p-4;
+  }
+
+  /* 滚动条样式 */
+  ::-webkit-scrollbar {
+    @apply w-2 h-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-muted;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-primary-400 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-primary-500;
+  }
+}
+
+/* ========================================
+   组件样式
+   ======================================== */
+@layer components {
+  /* 文章内容容器 */
+  .prose-container {
+    @apply max-w-none prose prose-lg dark:prose-invert;
+  }
+
+  /* 卡片样式 */
+  .card {
+    @apply bg-background border border-border rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-200;
+  }
+
+  /* 按钮样式 */
+  .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
+  }
+
+  .btn-primary {
+    @apply btn bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500;
+  }
+
+  .btn-secondary {
+    @apply btn bg-muted text-foreground hover:bg-primary-100 dark:hover:bg-primary-900 focus:ring-primary-500;
+  }
+
+  .btn-ghost {
+    @apply btn bg-transparent hover:bg-muted focus:ring-primary-500;
+  }
+
+  /* 输入框样式 */
+  .input {
+    @apply w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors duration-200;
+  }
+
+  /* 文章元信息样式 */
+  .article-meta {
+    @apply flex items-center gap-4 text-sm;
+    color: rgba(30, 41, 59, 0.6);
+  }
+
+  .dark .article-meta {
+    color: rgba(241, 245, 249, 0.6);
+  }
+
+  /* 标签样式 */
+  .tag {
+    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300;
+  }
+
+  /* 渐变文本 */
+  .gradient-text {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-purple-500;
+  }
+}
+
+/* ========================================
+   工具类
+   ======================================== */
+@layer utilities {
+  /* 文章内容最大宽度 */
+  .content-width {
+    max-width: var(--content-max-width);
+    @apply mx-auto px-4 sm:px-6 lg:px-8;
+  }
+
+  /* 隐藏滚动条但保持滚动功能 */
+  .hide-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* 玻璃效果 */
+  .glass {
+    @apply backdrop-blur-md;
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+
+  .dark .glass {
+    background-color: rgba(15, 23, 42, 0.8);
+  }
+
+  /* 渐变边框 */
+  .gradient-border {
+    position: relative;
+  }
+
+  .gradient-border::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    padding: 1px;
+    border-radius: inherit;
+    background: linear-gradient(135deg, var(--primary-500), var(--color-accent));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+}