feat(content): add draft support for content collections

This commit introduces a draft system for the 'events' and 'news' collections. A `draft` boolean field has been added to the content schema, and frontend queries are now updated to only fetch and
display content where `draft` is `false`. This allows content to be created and saved without being publicly visible, improving the publishing workflow.

app/assets/css/main.css

@@ -7,3 +7,7 @@
   --color-primary: #fb9e3a;
   --color-secondary: #fcef91;
 }
+
+.dark {
+  --color-gray-800: oklch(85% 0 275);
+}

app/components/index/Events.vue

@@ -31,7 +31,11 @@
 
 <script lang="ts" setup>
 const { data: events } = await useAsyncData("events", () =>
-  queryCollection("events").order("date", "DESC").limit(3).all()
+  queryCollection("events")
+    .where("draft", "=", false)
+    .order("date", "DESC")
+    .limit(3)
+    .all()
 );
 </script>
 

app/pages/events/[slug].vue

@@ -1,24 +1,15 @@
 <template>
-  <div class="min-h-screen bg-white">
-    <!-- 装饰性背景元素（浅色柔和光晕） -->
-    <div class="fixed inset-0 overflow-hidden pointer-events-none">
-      <div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-100/40 rounded-full blur-3xl"></div>
-      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-100/40 rounded-full blur-3xl"></div>
-      <div
-        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-cyan-100/40 rounded-full blur-3xl">
-      </div>
-    </div>
-
+  <div class="min-h-screen">
     <section class="relative py-16 px-4 sm:px-6 lg:px-8">
       <div class="container mx-auto max-w-4xl">
         <!-- 内容卡片 -->
         <div class="relative">
           <!-- 卡片装饰边框（浅色渐变） -->
-          <div class="absolute inset-0 bg-gradient-to-r from-blue-100 to-purple-100 rounded-2xl blur-sm"></div>
+          <!-- <div class="absolute inset-0 bg-linear-to-r from-blue-100 to-purple-100 rounded-2xl blur-sm"></div> -->
 
-          <div class="relative bg-white rounded-xl border border-gray-200 shadow-xl overflow-hidden">
+          <div class="relative rounded-xl border border-gray-200 shadow-xl overflow-hidden">
             <!-- 顶部装饰条（明亮渐变） -->
-            <div class="h-1 bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400"></div>
+            <div class="h-1 bg-linear-to-r from-blue-400 via-purple-400 to-cyan-400"></div>
 
             <div class="p-8 sm:p-10 lg:p-12">
               <!-- 内容渲染器 -->

app/pages/events/index.vue

@@ -12,7 +12,11 @@
 import type { ChangelogVersionProps } from "@nuxt/ui";
 
 const { data: events } = await useAsyncData("events", () =>
-  queryCollection("events").order("date", "DESC").limit(3).all()
+  queryCollection("events")
+    .where("draft", "=", false)
+    .order("date", "DESC")
+    .limit(3)
+    .all()
 );
 
 // 将 news 数据转换成 UBlogPosts 可用格式