From 4c31d81ed1df9113d6d003e5453870585ba2d5bb Mon Sep 17 00:00:00 2001
From: npmrun <1549469775@qq.com>
Date: Tue, 21 Apr 2026 01:22:34 +0800
Subject: [PATCH] feat(home): enhance user experience with new sections and
 quick create button

- Introduced `GuestHomeSection` and `LoggedInHomeSection` components to provide tailored content for guests and logged-in users.
- Added a quick create button for logged-in users to facilitate easy post creation.
- Updated the AppShell component to include computed properties for visibility of the quick create button based on user login status.
- Refactored the main index page to utilize the new components, improving the overall layout and user engagement.
- Implemented a new utility function for normalizing post slugs to ensure consistent URL formatting.

This update significantly enhances the homepage experience for both guests and registered users, promoting user interaction and content creation.
---
 app/components/AppShell.vue                        |  18 +-
 app/components/home/GuestHomeSection.vue           | 209 ++++++++++++++++
 app/components/home/LoggedInHomeSection.vue        | 121 ++++++++++
 app/layouts/public.vue                             |  76 ++++--
 app/pages/index/index.vue                          | 268 +--------------------
 app/pages/me/admin/index.vue                       |  67 ++++++
 app/pages/me/index.vue                             |  27 +--
 app/pages/me/posts/[id].vue                        | 169 ++++++++-----
 app/pages/me/posts/index.vue                       |  81 ++++++-
 app/pages/me/posts/new.vue                         | 174 +++++++++----
 app/utils/post-slug.ts                             |  16 ++
 packages/drizzle-pkg/db.sqlite                     | Bin 147456 -> 147456 bytes
 .../[publicSlug]/posts/[postSlug]/comments.post.ts |   2 +
 .../[publicSlug]/[shareToken]/comments.post.ts     |   2 +
 server/service/comment-notify/index.test.ts        | 113 ++++++---
 server/service/comment-notify/index.ts             |  80 +++---
 16 files changed, 946 insertions(+), 477 deletions(-)
 create mode 100644 app/components/home/GuestHomeSection.vue
 create mode 100644 app/components/home/LoggedInHomeSection.vue
 create mode 100644 app/pages/me/admin/index.vue
 create mode 100644 app/utils/post-slug.ts

diff --git a/app/components/AppShell.vue b/app/components/AppShell.vue
index f50b98c..11098c2 100644
--- a/app/components/AppShell.vue
+++ b/app/components/AppShell.vue
@@ -62,6 +62,7 @@ function navActive(to: string) {
 }
 
 const consoleNavActive = computed(() => navActive('/me'))
+const showQuickCreate = computed(() => loggedIn.value && initialized.value)
 
 const accountMenuItems = computed(() => {
   const u = user.value
@@ -86,8 +87,7 @@ const accountMenuItems = computed(() => {
   }
   if (u.role === 'admin') {
     groups.push([
-      { label: '应用配置', icon: 'i-lucide-sliders-horizontal', to: '/me/admin/config' },
-      { label: '用户管理', icon: 'i-lucide-users', to: '/me/admin/users' },
+      { label: '管理员中心', icon: 'i-lucide-shield-check', to: '/me/admin' },
     ])
   }
   return groups
@@ -180,6 +180,17 @@ async function logout() {
             </template>
 
             <template v-else-if="loggedIn && user">
+              <UButton
+                v-if="showQuickCreate"
+                to="/me/posts/new"
+                color="primary"
+                variant="soft"
+                icon="i-lucide-square-pen"
+                size="sm"
+                class="hidden md:inline-flex"
+              >
+                写文章
+              </UButton>
               <div class="hidden items-center gap-2 sm:flex">
                 <UBadge
                   v-if="user.role === 'admin'"
@@ -219,8 +230,9 @@ async function logout() {
                 color="neutral"
                 variant="ghost"
                 icon="i-lucide-log-out"
+                label="退出"
                 :loading="logoutLoading"
-                class="hidden sm:inline-flex"
+                class="hidden md:inline-flex"
                 aria-label="退出登录"
                 @click="logout"
               />
diff --git a/app/components/home/GuestHomeSection.vue b/app/components/home/GuestHomeSection.vue
new file mode 100644
index 0000000..6ac1c7c
--- /dev/null
+++ b/app/components/home/GuestHomeSection.vue
@@ -0,0 +1,209 @@
+<script setup lang="ts">
+defineProps<{
+  siteName?: string
+  allowRegister: boolean
+}>()
+
+const features = [
+  {
+    title: '个人资料',
+    desc: '生平叙事、头像、社交链接与公开主页 slug，支持分块可见性。',
+    icon: 'i-lucide-user-round',
+    to: '/me/profile',
+  },
+  {
+    title: 'Markdown 文章',
+    desc: '自写内容、slug、摘要与封面，每条可公开、私密或仅链接分享。',
+    icon: 'i-lucide-file-text',
+    to: '/me/posts',
+  },
+  {
+    title: '时光机',
+    desc: '按时间轴记录里程碑事件，与文章、阅读流在同一叙事里呈现。',
+    icon: 'i-lucide-history',
+    to: '/me/timeline',
+  },
+  {
+    title: 'RSS 收件箱',
+    desc: '订阅源仅自己可见；定时拉取、去重，条目默认可再设为公开展示。',
+    icon: 'i-lucide-rss',
+    to: '/me/rss',
+  },
+] as const
+
+const highlights = [
+  '多维内容管理',
+  '公开页可控展示',
+  'RSS 自动聚合',
+  '创作与记录一体化',
+] as const
+</script>
+
+<template>
+  <div class="space-y-12">
+    <section
+      class="relative overflow-hidden rounded-3xl border border-primary/30 bg-gradient-to-br from-primary/20 via-default to-elevated px-6 py-10 sm:px-10 sm:py-12"
+    >
+      <div class="pointer-events-none absolute -right-20 -top-20 size-72 rounded-full bg-primary/20 blur-3xl" />
+      <div class="pointer-events-none absolute -bottom-24 -left-16 size-80 rounded-full bg-primary/10 blur-3xl" />
+      <div class="pointer-events-none absolute inset-0 opacity-40" style="background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.35), transparent 35%), radial-gradient(circle at 80% 10%, rgba(212,106,49,0.18), transparent 30%);" />
+
+      <div class="relative grid gap-6 lg:grid-cols-[1.2fr_0.8fr] lg:items-start">
+        <div class="space-y-5">
+          <UBadge color="primary" variant="soft" size="md" class="ring-1 ring-primary/30">
+            {{ siteName }} · Personal Control Center
+          </UBadge>
+          <h1 class="text-3xl font-extrabold tracking-tight text-highlighted sm:text-5xl">
+            你的内容宇宙，
+            <span class="text-primary">从这里被看见</span>
+          </h1>
+          <p class="max-w-2xl text-base leading-relaxed text-toned sm:text-lg">
+            一站式管理资料、文章、时间线与 RSS。可精细控制公开范围，用更专业的方式建立你的个人品牌主页。
+          </p>
+
+          <div class="flex flex-wrap gap-2">
+            <UBadge
+              v-for="item in highlights"
+              :key="item"
+              color="neutral"
+              variant="subtle"
+              size="sm"
+              class="ring-1 ring-default/80"
+            >
+              {{ item }}
+            </UBadge>
+          </div>
+
+          <div class="flex flex-wrap gap-3 pt-2">
+            <UButton
+              v-if="allowRegister"
+              to="/register"
+              size="lg"
+              color="primary"
+              icon="i-lucide-sparkles"
+              class="shadow-lg shadow-primary/20"
+            >
+              立即注册，开始搭建主页
+            </UButton>
+            <UButton
+              to="/login"
+              size="lg"
+              color="neutral"
+              variant="outline"
+              icon="i-lucide-log-in"
+            >
+              我已有账号，直接登录
+            </UButton>
+          </div>
+        </div>
+
+        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
+          <UCard class="border-primary/30 bg-default/80 backdrop-blur">
+            <p class="text-xs text-muted">
+              内容表达
+            </p>
+            <p class="mt-1 text-lg font-semibold text-highlighted">
+              文章 + 时间线双叙事
+            </p>
+          </UCard>
+          <UCard class="border-primary/30 bg-default/80 backdrop-blur">
+            <p class="text-xs text-muted">
+              对外展示
+            </p>
+            <p class="mt-1 text-lg font-semibold text-highlighted">
+              专属公开主页地址
+            </p>
+          </UCard>
+          <UCard class="border-primary/30 bg-default/80 backdrop-blur">
+            <p class="text-xs text-muted">
+              信息输入
+            </p>
+            <p class="mt-1 text-lg font-semibold text-highlighted">
+              RSS 自动同步与整理
+            </p>
+          </UCard>
+          <UCard class="border-primary/30 bg-default/80 backdrop-blur">
+            <p class="text-xs text-muted">
+              权限机制
+            </p>
+            <p class="mt-1 text-lg font-semibold text-highlighted">
+              每条内容独立可见性
+            </p>
+          </UCard>
+        </div>
+      </div>
+    </section>
+
+    <section class="space-y-4">
+      <div>
+        <h2 class="text-2xl font-semibold text-highlighted">
+          你将获得的能力
+        </h2>
+        <p class="mt-1 text-sm text-muted sm:text-base">
+          从个人展示到持续创作，再到信息摄取，形成完整的个人内容工作流。
+        </p>
+      </div>
+      <div class="grid gap-4 sm:grid-cols-2">
+        <UCard
+          v-for="item in features"
+          :key="item.title"
+          class="group border-default/80 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10"
+        >
+          <div class="flex gap-4">
+            <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/15 text-primary ring-1 ring-primary/20">
+              <UIcon :name="item.icon" class="size-6" />
+            </span>
+            <div class="min-w-0 flex-1 space-y-2">
+              <h3 class="font-semibold text-highlighted">
+                <NuxtLink
+                  to="/login"
+                  class="rounded-sm hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                >
+                  {{ item.title }}
+                </NuxtLink>
+              </h3>
+              <p class="text-sm leading-relaxed text-muted">
+                {{ item.desc }}
+              </p>
+              <UButton
+                to="/login"
+                size="xs"
+                variant="soft"
+                class="px-0"
+                trailing-icon="i-lucide-arrow-right"
+              >
+                登录后立即体验
+              </UButton>
+            </div>
+          </div>
+        </UCard>
+      </div>
+    </section>
+
+    <section class="rounded-2xl border border-primary/25 bg-gradient-to-r from-primary/10 via-elevated to-default px-6 py-8">
+      <div class="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h3 class="text-lg font-semibold text-highlighted">
+            准备好搭建你的公开主页了吗？
+          </h3>
+          <p class="mt-1 text-sm text-muted leading-relaxed">
+            新账号采用邀请制开通，开通后即可开始创建并发布你的个人内容空间。
+          </p>
+        </div>
+        <div class="flex flex-wrap gap-2">
+          <UButton
+            v-if="allowRegister"
+            to="/register"
+            color="primary"
+            icon="i-lucide-user-plus"
+          >
+            立即注册
+          </UButton>
+          <UButton to="/login" color="neutral" variant="outline">
+            去登录
+          </UButton>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/app/components/home/LoggedInHomeSection.vue b/app/components/home/LoggedInHomeSection.vue
new file mode 100644
index 0000000..2970eaa
--- /dev/null
+++ b/app/components/home/LoggedInHomeSection.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+type HomeUser = {
+  username: string
+  nickname?: string | null
+  avatar?: string | null
+  role: 'admin' | 'user' | string
+  publicSlug?: string | null
+}
+
+defineProps<{
+  user: HomeUser
+}>()
+</script>
+
+<template>
+  <div class="space-y-4">
+    <section class="rounded-2xl border border-default bg-gradient-to-br from-primary/5 via-default to-elevated px-6 py-6 sm:px-8">
+      <div class="grid gap-4 lg:grid-cols-3">
+        <UCard class="ring-1 ring-default/60 lg:col-span-2">
+          <div class="flex flex-wrap items-start justify-between gap-4">
+            <div class="flex min-w-0 items-start gap-3">
+              <UAvatar :src="user.avatar || undefined" :alt="user.username" size="lg" class="ring-1 ring-default" />
+              <div class="min-w-0">
+                <p class="text-xs font-medium text-muted">
+                  当前用户
+                </p>
+                <p class="truncate text-lg font-semibold text-highlighted">
+                  {{ user.nickname?.trim() || user.username }}
+                </p>
+                <NuxtLink
+                  to="/me/profile"
+                  class="block truncate text-sm text-muted transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                >
+                  @{{ user.username }} · {{ user.role === 'admin' ? '管理员' : '用户' }}
+                </NuxtLink>
+                <NuxtLink
+                  v-if="user.publicSlug"
+                  :to="`/@${user.publicSlug}`"
+                  target="_blank"
+                  class="mt-1 block text-sm tabular-nums text-[#d46a31] transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                >
+                  {{ `/@${user.publicSlug}` }}
+                </NuxtLink>
+                <NuxtLink
+                  v-else
+                  to="/me/profile"
+                  class="mt-1 block text-sm text-muted transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                >
+                  未设置公开主页地址（去设置）
+                </NuxtLink>
+              </div>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <UButton to="/me" size="sm" icon="i-lucide-layout-dashboard">
+                控制台
+              </UButton>
+              <UButton to="/me/profile" size="sm" color="neutral" variant="outline">
+                编辑资料
+              </UButton>
+              <UButton
+                v-if="user.publicSlug"
+                :to="`/@${user.publicSlug}`"
+                target="_blank"
+                size="sm"
+                color="neutral"
+                variant="outline"
+                icon="i-lucide-external-link"
+              >
+                公开主页
+              </UButton>
+            </div>
+          </div>
+        </UCard>
+
+        <UCard>
+          <p class="text-xs font-medium text-muted">
+            管理与常用
+          </p>
+          <div class="mt-3 flex flex-wrap gap-2">
+            <UButton to="/me/posts" size="xs" variant="soft">
+              文章
+            </UButton>
+            <UButton to="/me/timeline" size="xs" variant="soft">
+              时光机
+            </UButton>
+            <UButton to="/me/rss" size="xs" variant="soft">
+              RSS
+            </UButton>
+            <UButton
+              v-if="user.role === 'admin'"
+              to="/me/admin/config"
+              size="xs"
+              color="primary"
+              variant="soft"
+            >
+              应用配置
+            </UButton>
+            <UButton
+              v-if="user.role === 'admin'"
+              to="/me/admin/users"
+              size="xs"
+              color="primary"
+              variant="soft"
+            >
+              用户管理
+            </UButton>
+          </div>
+        </UCard>
+      </div>
+    </section>
+
+    <UAlert
+      v-if="!user.publicSlug"
+      color="warning"
+      variant="subtle"
+      title="还没有公开主页地址"
+      description="在「资料」中设置 public slug 后，访客即可通过 /@你的地址 访问你的公开内容。"
+      icon="i-lucide-alert-circle"
+    />
+  </div>
+</template>
diff --git a/app/layouts/public.vue b/app/layouts/public.vue
index 65e830b..f528e77 100644
--- a/app/layouts/public.vue
+++ b/app/layouts/public.vue
@@ -7,8 +7,10 @@ import {
 import { unwrapApiBody, type ApiResponse } from '../utils/http/factory'
 
 const route = useRoute()
-const { loggedIn, user, refresh, initialized } = useAuthSession()
-const { siteName } = useGlobalConfig()
+const { loggedIn, user, refresh, clear, initialized } = useAuthSession()
+const { fetchData } = useClientApi()
+const { siteName, allowRegister } = useGlobalConfig()
+const logoutLoading = ref(false)
 
 const showPublicLayoutToggle = computed(() => /^\/@[^/]+$/.test(route.path))
 const profileSlug = computed(() => {
@@ -73,6 +75,22 @@ const headerBrandIconUrl = computed(() => {
   return u.trim()
 })
 
+const showPublicLogin = computed(() => !loggedIn.value && initialized.value)
+const showPublicRegister = computed(() =>
+  !loggedIn.value && initialized.value && allowRegister.value,
+)
+
+async function logout() {
+  logoutLoading.value = true
+  try {
+    await fetchData<{ success: boolean }>('/api/auth/logout', { method: 'POST' })
+    clear()
+    await navigateTo('/')
+  } finally {
+    logoutLoading.value = false
+  }
+}
+
 type LayoutBySlug = Record<string, PublicHomeLayoutMode>
 
 const layoutBySlug = useCookie<LayoutBySlug>('public_home_layout', {
@@ -114,8 +132,8 @@ onMounted(() => {
 <template>
   <UApp>
     <div class="min-h-screen bg-default text-default">
-      <header class="sticky top-0 z-40 border-b border-default/80 bg-default/95 backdrop-blur">
-        <UContainer class="flex h-14 items-center justify-between gap-3 sm:gap-4">
+      <header class="sticky top-0 z-40 border-b border-default/70 bg-default/90 backdrop-blur">
+        <UContainer class="flex h-12 items-center justify-between gap-3 sm:gap-4">
           <NuxtLink
             :to="headerBrandTo"
             class="flex min-w-0 items-center gap-2 font-semibold tracking-tight text-highlighted"
@@ -132,19 +150,16 @@ onMounted(() => {
             </span>
             <span class="truncate">{{ headerBrandTitle }}</span>
           </NuxtLink>
-          <div class="flex shrink-0 items-center gap-2 text-sm sm:gap-3">
-            <NuxtLink to="/" class="text-muted hover:text-default whitespace-nowrap">
-              站点首页
-            </NuxtLink>
+          <div class="flex shrink-0 items-center gap-1.5 text-sm sm:gap-2">
             <div
               v-if="showPublicLayoutToggle"
-              class="inline-flex rounded-lg border border-default bg-elevated/40 p-0.5 shadow-sm"
+              class="inline-flex rounded-md border border-default/80 bg-elevated/30 p-0.5"
             >
               <UButton
                 size="xs"
                 :color="publicLayoutMode === 'showcase' ? 'primary' : 'neutral'"
                 :variant="publicLayoutMode === 'showcase' ? 'solid' : 'ghost'"
-                class="rounded-md"
+                class="rounded-sm"
                 @click="publicLayoutMode = 'showcase'"
               >
                 <UIcon name="i-lucide-layout-template" class="size-3.5 sm:mr-1" />
@@ -154,7 +169,7 @@ onMounted(() => {
                 size="xs"
                 :color="publicLayoutMode === 'detailed' ? 'primary' : 'neutral'"
                 :variant="publicLayoutMode === 'detailed' ? 'solid' : 'ghost'"
-                class="rounded-md"
+                class="rounded-sm"
                 @click="publicLayoutMode = 'detailed'"
               >
                 <UIcon name="i-lucide-book-open" class="size-3.5 sm:mr-1" />
@@ -164,13 +179,38 @@ onMounted(() => {
             <template v-if="!initialized">
               <USkeleton class="h-5 w-12 rounded" />
             </template>
-            <NuxtLink
-              v-else-if="showPublicConsoleLink"
-              to="/me"
-              class="text-muted hover:text-default whitespace-nowrap"
-            >
-              控制台
-            </NuxtLink>
+            <template v-else-if="loggedIn">
+              <NuxtLink
+                v-if="showPublicConsoleLink"
+                to="/me"
+                class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted transition-colors hover:text-default"
+              >
+                <UIcon name="i-lucide-layout-dashboard" class="size-3.5" />
+                控制台
+              </NuxtLink>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-log-out"
+                :loading="logoutLoading"
+                @click="logout"
+              >
+                退出
+              </UButton>
+            </template>
+            <template v-else-if="showPublicLogin">
+              <NuxtLink to="/login" class="rounded-md px-2 py-1 text-xs text-muted transition-colors hover:text-default">
+                登录
+              </NuxtLink>
+              <NuxtLink
+                v-if="showPublicRegister"
+                to="/register"
+                class="rounded-md border border-default/80 px-2 py-1 text-xs text-muted transition-colors hover:text-default"
+              >
+                注册
+              </NuxtLink>
+            </template>
           </div>
         </UContainer>
       </header>
diff --git a/app/pages/index/index.vue b/app/pages/index/index.vue
index 712f88b..6e88ce6 100644
--- a/app/pages/index/index.vue
+++ b/app/pages/index/index.vue
@@ -1,272 +1,18 @@
 <script setup lang="ts">
 import { useAuthSession } from '../../composables/useAuthSession'
 
-const { loggedIn, user, clear } = useAuthSession()
-const { fetchData } = useClientApi()
+import GuestHomeSection from '../../components/home/GuestHomeSection.vue'
+import LoggedInHomeSection from '../../components/home/LoggedInHomeSection.vue'
+
+const { loggedIn, user } = useAuthSession()
 const { allowRegister, siteName } = useGlobalConfig()
 
 usePageTitle('首页')
-
-const logoutLoading = ref(false)
-
-const features = [
-  {
-    title: '个人资料',
-    desc: '生平叙事、头像、社交链接与公开主页 slug，支持分块可见性。',
-    icon: 'i-lucide-user-round',
-    to: '/me/profile',
-  },
-  {
-    title: 'Markdown 文章',
-    desc: '自写内容、slug、摘要与封面，每条可公开、私密或仅链接分享。',
-    icon: 'i-lucide-file-text',
-    to: '/me/posts',
-  },
-  {
-    title: '时光机',
-    desc: '按时间轴记录里程碑事件，与文章、阅读流在同一叙事里呈现。',
-    icon: 'i-lucide-history',
-    to: '/me/timeline',
-  },
-  {
-    title: 'RSS 收件箱',
-    desc: '订阅源仅自己可见；定时拉取、去重，条目默认可再设为公开展示。',
-    icon: 'i-lucide-rss',
-    to: '/me/rss',
-  },
-] as const
-
-async function logout() {
-  logoutLoading.value = true
-  try {
-    await fetchData<{ success: boolean }>('/api/auth/logout', { method: 'POST' })
-    clear()
-    await navigateTo('/')
-  } finally {
-    logoutLoading.value = false
-  }
-}
 </script>
 
 <template>
-  <div class="mx-auto max-w-6xl space-y-12 pb-4">
-    <!-- Hero -->
-    <section class="relative overflow-hidden rounded-2xl border border-default bg-gradient-to-br from-primary/5 via-default to-elevated px-6 py-12 sm:px-10 sm:py-16">
-      <div class="pointer-events-none absolute -right-20 -top-20 size-64 rounded-full bg-primary/10 blur-3xl" />
-      <div class="pointer-events-none absolute -bottom-24 -left-16 size-72 rounded-full bg-primary/5 blur-3xl" />
-      <div class="relative max-w-2xl space-y-4">
-        <UBadge color="primary" variant="subtle" size="md">
-          个人数据中心
-        </UBadge>
-        <h1 class="text-3xl font-bold tracking-tight text-highlighted sm:text-4xl">
-          把你的故事、文章与阅读，收进一个地方
-        </h1>
-        <p class="text-base text-muted sm:text-lg leading-relaxed">
-          {{ siteName }} 面向「多用户、邀请制」场景：每位用户独立资料与订阅；公开主页可只展示你愿意公开的部分；RSS 在后台静默同步。
-        </p>
-        <div class="flex flex-wrap gap-3 pt-2">
-          <template v-if="loggedIn">
-            <UButton to="/me" size="lg" icon="i-lucide-layout-dashboard">
-              进入控制台
-            </UButton>
-            <UButton
-              v-if="user?.publicSlug"
-              :to="`/@${user.publicSlug}`"
-              target="_blank"
-              size="lg"
-              color="neutral"
-              variant="outline"
-              icon="i-lucide-external-link"
-            >
-              预览公开主页
-            </UButton>
-            <UButton
-              v-else
-              to="/me/profile"
-              size="lg"
-              color="neutral"
-              variant="outline"
-              icon="i-lucide-link"
-            >
-              设置公开链接
-            </UButton>
-          </template>
-          <template v-else>
-            <UButton to="/login" size="lg" icon="i-lucide-log-in">
-              登录使用
-            </UButton>
-            <UButton
-              v-if="allowRegister"
-              to="/register"
-              size="lg"
-              color="neutral"
-              variant="outline"
-            >
-              注册账号
-            </UButton>
-          </template>
-        </div>
-      </div>
-    </section>
-
-    <!-- 已登录：摘要条 -->
-    <section v-if="loggedIn && user" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-      <UCard class="ring-1 ring-default/60">
-        <div class="flex items-start gap-3">
-          <UAvatar :src="user.avatar || undefined" :alt="user.username" size="md" class="ring-1 ring-default" />
-          <div class="min-w-0 flex-1">
-            <p class="text-xs font-medium text-muted">
-              当前用户
-            </p>
-            <p class="truncate font-semibold text-highlighted">
-              {{ user.nickname?.trim() || user.username }}
-            </p>
-            <p class="truncate text-xs text-muted">
-              @{{ user.username }} · {{ user.role === 'admin' ? '管理员' : '用户' }}
-            </p>
-          </div>
-        </div>
-      </UCard>
-      <UCard>
-        <p class="text-sm font-medium text-muted">
-          公开主页
-        </p>
-        <p
-          class="mt-1 text-base font-semibold leading-6 tabular-nums"
-          :class="user.publicSlug ? 'text-[#d46a31]' : 'text-muted'"
-        >
-          {{ user.publicSlug ? `/@${user.publicSlug}` : '尚未设置' }}
-        </p>
-        <UButton to="/me/profile" size="xs" variant="link" class="mt-2 px-0">
-          去资料页配置
-        </UButton>
-      </UCard>
-      <UCard class="sm:col-span-2">
-        <p class="text-xs font-medium text-muted">
-          快捷入口
-        </p>
-        <div class="mt-2 flex flex-wrap gap-2">
-          <UButton to="/me/posts" size="xs" variant="soft">
-            文章
-          </UButton>
-          <UButton to="/me/timeline" size="xs" variant="soft">
-            时光机
-          </UButton>
-          <UButton to="/me/rss" size="xs" variant="soft">
-            RSS
-          </UButton>
-          <UButton to="/me/profile" size="xs" variant="soft">
-            资料
-          </UButton>
-          <UButton
-            v-if="user.role === 'admin'"
-            to="/me/admin/config"
-            size="xs"
-            color="primary"
-            variant="soft"
-          >
-            应用配置
-          </UButton>
-          <UButton
-            v-if="user.role === 'admin'"
-            to="/me/admin/users"
-            size="xs"
-            color="primary"
-            variant="soft"
-          >
-            用户管理
-          </UButton>
-        </div>
-      </UCard>
-    </section>
-
-    <UAlert
-      v-if="loggedIn && user && !user.publicSlug"
-      color="warning"
-      variant="subtle"
-      title="还没有公开主页地址"
-      description="在「资料」中设置 public slug 后，访客即可通过 /@你的地址 访问你的公开内容。"
-      icon="i-lucide-alert-circle"
-    />
-
-    <!-- 功能矩阵 -->
-    <section class="space-y-4">
-      <div>
-        <h2 class="text-xl font-semibold text-highlighted">
-          你能做什么
-        </h2>
-        <p class="mt-1 text-sm text-muted">
-          四大模块覆盖展示、创作与阅读输入；权限与可见性按条目细粒度控制。
-        </p>
-      </div>
-      <div class="grid gap-4 sm:grid-cols-2">
-        <UCard
-          v-for="item in features"
-          :key="item.title"
-          class="group transition-shadow hover:shadow-md"
-        >
-          <div class="flex gap-4">
-            <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
-              <UIcon :name="item.icon" class="size-6" />
-            </span>
-            <div class="min-w-0 flex-1 space-y-2">
-              <h3 class="font-semibold text-highlighted">
-                <NuxtLink
-                  :to="loggedIn ? item.to : '/login'"
-                  class="rounded-sm hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
-                >
-                  {{ item.title }}
-                </NuxtLink>
-              </h3>
-              <p class="text-sm leading-relaxed text-muted">
-                {{ item.desc }}
-              </p>
-              <UButton
-                :to="loggedIn ? item.to : '/login'"
-                size="xs"
-                variant="link"
-                class="px-0"
-                trailing-icon="i-lucide-arrow-right"
-              >
-                {{ loggedIn ? '打开' : '登录后使用' }}
-              </UButton>
-            </div>
-          </div>
-        </UCard>
-      </div>
-    </section>
-
-    <!-- 访客说明 -->
-    <section v-if="!loggedIn" class="rounded-xl border border-dashed border-default bg-elevated/30 px-6 py-8">
-      <h3 class="font-semibold text-highlighted">
-        访客说明
-      </h3>
-      <p class="mt-2 max-w-2xl text-sm text-muted leading-relaxed">
-        本站默认需登录后使用控制台。若你已有账号，请点击「登录」；新账号由管理员在后台创建（邀请制）。
-      </p>
-      <div class="mt-4 flex flex-wrap gap-2">
-        <UButton to="/login">
-          登录
-        </UButton>
-        <UButton v-if="allowRegister" to="/register" color="neutral" variant="outline">
-          注册
-        </UButton>
-      </div>
-    </section>
-
-    <!-- 已登录底部操作 -->
-    <section v-if="loggedIn" class="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-default bg-elevated/20 px-4 py-4">
-      <p class="text-sm text-muted">
-        需要退出当前会话？
-      </p>
-      <div class="flex gap-2">
-        <UButton to="/api/config/me" target="_blank" variant="outline" color="neutral" size="sm">
-          配置 API（调试）
-        </UButton>
-        <UButton color="neutral" :loading="logoutLoading" size="sm" @click="logout">
-          退出登录
-        </UButton>
-      </div>
-    </section>
+  <div class="mx-auto max-w-6xl pb-4">
+    <LoggedInHomeSection v-if="loggedIn && user" :user="user" />
+    <GuestHomeSection v-else :site-name="siteName" :allow-register="allowRegister" />
   </div>
 </template>
diff --git a/app/pages/me/admin/index.vue b/app/pages/me/admin/index.vue
new file mode 100644
index 0000000..64b8b26
--- /dev/null
+++ b/app/pages/me/admin/index.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { useAuthSession } from '../../../composables/useAuthSession'
+
+const { user } = useAuthSession()
+
+usePageTitle('管理员中心')
+</script>
+
+<template>
+  <UContainer class="py-8 space-y-6">
+    <div>
+      <h1 class="text-2xl font-semibold">
+        管理员中心
+      </h1>
+      <p class="mt-1 text-sm text-muted">
+        站点级配置、用户管理与媒体存储校验入口。
+      </p>
+    </div>
+
+    <UAlert
+      v-if="user?.role !== 'admin'"
+      color="error"
+      variant="subtle"
+      title="无权限访问"
+      description="该页面仅管理员可访问。"
+      icon="i-lucide-shield-alert"
+    />
+
+    <div v-else class="grid gap-3 sm:grid-cols-2">
+      <UCard>
+        <div class="font-medium">
+          应用配置
+        </div>
+        <p class="mt-1 text-sm text-muted">
+          站点名称、注册开关
+        </p>
+        <UButton to="/me/admin/config" class="mt-3" size="sm">
+          打开
+        </UButton>
+      </UCard>
+
+      <UCard>
+        <div class="font-medium">
+          用户管理
+        </div>
+        <p class="mt-1 text-sm text-muted">
+          用户列表与权限管理
+        </p>
+        <UButton to="/me/admin/users" class="mt-3" size="sm">
+          打开
+        </UButton>
+      </UCard>
+
+      <UCard>
+        <div class="font-medium">
+          文章媒体存储校验
+        </div>
+        <p class="mt-1 text-sm text-muted">
+          磁盘与 media_assets 一致性
+        </p>
+        <UButton to="/me/admin/media-storage" class="mt-3" size="sm">
+          打开
+        </UButton>
+      </UCard>
+    </div>
+  </UContainer>
+</template>
diff --git a/app/pages/me/index.vue b/app/pages/me/index.vue
index 9b1e76b..e7580ab 100644
--- a/app/pages/me/index.vue
+++ b/app/pages/me/index.vue
@@ -81,25 +81,6 @@ onMounted(async () => {
           收件箱
         </UButton>
       </UCard>
-      <UCard v-if="user?.role === 'admin'">
-        <div class="font-medium">
-          应用配置
-        </div>
-        <p class="text-sm text-muted mt-1">
-          站点名称、注册开关
-        </p>
-        <UButton to="/me/admin/config" class="mt-3" size="sm">
-          打开
-        </UButton>
-      </UCard>
-      <UCard v-if="user?.role === 'admin'">
-        <div class="font-medium">
-          用户管理
-        </div>
-        <UButton to="/me/admin/users" class="mt-3" size="sm">
-          打开
-        </UButton>
-      </UCard>
       <UCard>
         <div class="font-medium">
           媒体
@@ -113,13 +94,13 @@ onMounted(async () => {
       </UCard>
       <UCard v-if="user?.role === 'admin'">
         <div class="font-medium">
-          文章媒体存储校验
+          管理员中心
         </div>
         <p class="text-sm text-muted mt-1">
-          磁盘与 media_assets 一致性
+          统一进入应用配置、用户管理、媒体存储校验
         </p>
-        <UButton to="/me/admin/media-storage" class="mt-3" size="sm">
-          打开
+        <UButton to="/me/admin" class="mt-3" size="sm">
+          进入
         </UButton>
       </UCard>
     </div>
diff --git a/app/pages/me/posts/[id].vue b/app/pages/me/posts/[id].vue
index d8d3103..9969bdc 100644
--- a/app/pages/me/posts/[id].vue
+++ b/app/pages/me/posts/[id].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAuthSession } from '../../../composables/useAuthSession'
+import { normalizePostSlugCandidate } from '../../../utils/post-slug'
 
 const route = useRoute()
 const id = computed(() => route.params.id as string)
@@ -17,6 +18,12 @@ const state = reactive({
 })
 const loading = ref(true)
 const saving = ref(false)
+const visibilityItems = [
+  { label: '私密', value: 'private' },
+  { label: '公开', value: 'public' },
+  { label: '仅链接', value: 'unlisted' },
+]
+const bodyLength = computed(() => state.bodyMarkdown.trim().length)
 
 const publicPostHref = computed(() => {
   const ps = user.value?.publicSlug
@@ -62,6 +69,30 @@ usePageTitle(() => {
   return t ? [t, '编辑'] : ['编辑文章']
 })
 
+function generateSlugFromTitle() {
+  if (!state.title.trim()) {
+    toast.add({ title: '请先填写标题', color: 'warning' })
+    return
+  }
+
+  const previous = state.slug
+  const normalized = normalizePostSlugCandidate(state.title)
+
+  state.slug = normalized
+
+  if (!state.slug) {
+    toast.add({ title: '未生成 slug，请检查标题内容', color: 'warning' })
+    return
+  }
+
+  if (state.slug === previous) {
+    toast.add({ title: 'slug 未变化', color: 'neutral' })
+    return
+  }
+
+  toast.add({ title: '已生成 slug', color: 'success' })
+}
+
 async function save() {
   saving.value = true
   try {
@@ -101,7 +132,7 @@ const shareUrl = computed(() => {
 </script>
 
 <template>
-  <UContainer class="py-8 max-w-6xl space-y-6">
+  <UContainer class="py-8 max-w-[1600px] space-y-6">
     <div class="flex flex-wrap items-center justify-between gap-3">
       <h1 class="text-2xl font-semibold tracking-tight">
         编辑文章
@@ -119,6 +150,9 @@ const shareUrl = computed(() => {
         <UButton to="/me/posts" variant="ghost" color="neutral" size="sm">
           返回列表
         </UButton>
+        <UButton type="submit" form="edit-post-form" :loading="saving" size="sm">
+          保存文章
+        </UButton>
       </div>
     </div>
 
@@ -127,62 +161,87 @@ const shareUrl = computed(() => {
     </div>
 
     <template v-else>
-      <UForm :state="state" class="space-y-6" @submit.prevent="save">
-        <UCard :ui="{ body: 'p-4 sm:p-6' }">
-          <PostBodyMarkdownEditor v-model="state.bodyMarkdown" />
-          <UFormField label="正文" name="bodyMarkdown" required class="sr-only" />
-        </UCard>
-
-        <UCard :ui="{ body: 'p-4 sm:p-6 space-y-4' }">
-          <UCollapsible :unmount-on-hide="false">
-            <UButton
-              type="button"
-              color="neutral"
-              variant="subtle"
-              block
-              class="justify-between font-medium"
-              label="文章设置"
-              trailing
-              trailing-icon="i-lucide-chevron-down"
-            />
-            <template #content>
-              <div class="pt-4 space-y-4 border-t border-default mt-4">
-                <UAlert
-                  v-if="shareUrl"
-                  title="仅链接分享"
-                  :description="shareUrl"
+      <UForm
+        id="edit-post-form"
+        :state="state"
+        class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_280px]"
+        @submit.prevent="save"
+      >
+        <div class="space-y-6">
+          <UCard :ui="{ body: 'p-4 sm:p-6 space-y-4' }">
+            <UFormField label="标题" name="title" required class="w-full">
+              <UInput
+                v-model="state.title"
+                class="w-full"
+                placeholder="例如：我的 2026 开发工作流复盘"
+              />
+            </UFormField>
+
+            <UFormField label="摘要" name="excerpt" required class="w-full">
+              <UTextarea
+                v-model="state.excerpt"
+                class="w-full"
+                :rows="3"
+                autoresize
+                placeholder="一句话概括文章核心内容，便于列表页快速浏览。"
+              />
+            </UFormField>
+          </UCard>
+
+          <UCard :ui="{ body: 'p-4 sm:p-6 space-y-3' }">
+            <div class="flex items-center justify-between gap-3">
+              <h2 class="text-base font-medium">
+                正文内容
+              </h2>
+              <span class="text-xs text-muted">字数 {{ bodyLength }}</span>
+            </div>
+            <PostBodyMarkdownEditor v-model="state.bodyMarkdown" />
+            <UFormField label="正文" name="bodyMarkdown" required class="sr-only" />
+          </UCard>
+        </div>
+
+        <div class="space-y-6 xl:sticky xl:top-20 xl:self-start">
+          <UCard :ui="{ body: 'p-4 sm:p-5 space-y-4' }">
+            <h2 class="text-base font-medium">
+              发布设置
+            </h2>
+            <UFormField label="slug" name="slug" required>
+              <div class="flex items-center gap-2">
+                <UInput v-model="state.slug" placeholder="my-post-slug" class="flex-1" />
+                <UButton
+                  type="button"
+                  variant="soft"
+                  color="neutral"
+                  icon="i-lucide-wand-sparkles"
+                  label="生成"
+                  @click="generateSlugFromTitle"
                 />
-                <UFormField label="标题" name="title" required>
-                  <UInput v-model="state.title" />
-                </UFormField>
-                <UFormField label="slug" name="slug" required>
-                  <UInput v-model="state.slug" />
-                </UFormField>
-                <UFormField label="摘要" name="excerpt" required>
-                  <UInput v-model="state.excerpt" />
-                </UFormField>
-                <UFormField label="可见性" name="visibility">
-                  <USelect
-                    v-model="state.visibility"
-                    :items="[
-                      { label: '私密', value: 'private' },
-                      { label: '公开', value: 'public' },
-                      { label: '仅链接', value: 'unlisted' },
-                    ]"
-                  />
-                </UFormField>
               </div>
-            </template>
-          </UCollapsible>
-        </UCard>
-
-        <div class="flex flex-wrap gap-2">
-          <UButton type="submit" :loading="saving">
-            保存
-          </UButton>
-          <UButton color="error" variant="soft" type="button" @click="remove">
-            删除
-          </UButton>
+            </UFormField>
+            <UFormField label="可见性" name="visibility">
+              <USelect v-model="state.visibility" :items="visibilityItems" />
+            </UFormField>
+            <UAlert
+              v-if="shareUrl"
+              title="仅链接分享"
+              :description="shareUrl"
+            />
+          </UCard>
+
+          <UCard :ui="{ body: 'p-4 sm:p-5 space-y-3' }">
+            <h2 class="text-base font-medium">
+              操作
+            </h2>
+            <UButton type="submit" :loading="saving" block>
+              保存文章
+            </UButton>
+            <UButton to="/me/posts" variant="ghost" color="neutral" block>
+              取消并返回
+            </UButton>
+            <UButton color="error" variant="soft" type="button" block @click="remove">
+              删除文章
+            </UButton>
+          </UCard>
         </div>
       </UForm>
     </template>
diff --git a/app/pages/me/posts/index.vue b/app/pages/me/posts/index.vue
index b653ef6..c9bb7e5 100644
--- a/app/pages/me/posts/index.vue
+++ b/app/pages/me/posts/index.vue
@@ -4,9 +4,11 @@ import { useAuthSession } from '../../../composables/useAuthSession'
 usePageTitle('我的文章')
 
 type Row = { id: number; title: string; slug: string; visibility: string }
+type ViewMode = 'list' | 'card'
 
 const posts = ref<Row[]>([])
 const loading = ref(true)
+const viewMode = ref<ViewMode>('card')
 const { user, refresh: refreshAuth } = useAuthSession()
 const { fetchData } = useClientApi()
 
@@ -32,24 +34,56 @@ function postDetailHref(slug: string, visibility: string) {
   }
   return `/@${ps}/posts/${encodeURIComponent(slug)}`
 }
+
+function visibilityLabel(visibility: string) {
+  if (visibility === 'public') {
+    return '公开'
+  }
+  if (visibility === 'unlisted') {
+    return '仅链接'
+  }
+  return '私密'
+}
 </script>
 
 <template>
-  <UContainer class="py-8 space-y-4 max-w-3xl">
+  <UContainer class="py-8 space-y-4 max-w-6xl">
     <div class="flex flex-wrap justify-between items-center gap-3">
       <h1 class="text-2xl font-semibold">
         文章
       </h1>
-      <UButton to="/me/posts/new">
-        新建
-      </UButton>
+      <div class="flex items-center gap-2">
+        <UButtonGroup size="sm" class="rounded-lg border border-default p-0.5 bg-elevated/40">
+          <UButton
+            :variant="viewMode === 'list' ? 'soft' : 'ghost'"
+            color="neutral"
+            icon="i-lucide-list"
+            :class="viewMode === 'list' ? 'shadow-sm' : 'text-muted'"
+            @click="viewMode = 'list'"
+          >
+            列表
+          </UButton>
+          <UButton
+            :variant="viewMode === 'card' ? 'soft' : 'ghost'"
+            color="neutral"
+            icon="i-lucide-layout-grid"
+            :class="viewMode === 'card' ? 'shadow-sm' : 'text-muted'"
+            @click="viewMode = 'card'"
+          >
+            卡片
+          </UButton>
+        </UButtonGroup>
+        <UButton to="/me/posts/new">
+          新建
+        </UButton>
+      </div>
     </div>
 
     <div v-if="loading" class="text-muted">
       加载中…
     </div>
     <UEmpty v-else-if="!posts.length" title="暂无文章" description="创建第一篇 Markdown 文章" />
-    <ul v-else class="space-y-2">
+    <ul v-else-if="viewMode === 'list'" class="space-y-2">
       <li
         v-for="p in posts"
         :key="p.id"
@@ -60,7 +94,7 @@ function postDetailHref(slug: string, visibility: string) {
             {{ p.title }}
           </div>
           <div class="text-xs text-muted">
-            /{{ p.slug }} · {{ p.visibility }}
+            /{{ p.slug }} · {{ visibilityLabel(p.visibility) }}
           </div>
         </div>
         <div class="flex flex-wrap gap-1 justify-end">
@@ -79,5 +113,40 @@ function postDetailHref(slug: string, visibility: string) {
         </div>
       </li>
     </ul>
+    <div v-else class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+      <UCard
+        v-for="p in posts"
+        :key="p.id"
+        :ui="{ body: 'p-4 space-y-3', footer: 'px-4 py-3 border-t border-default' }"
+      >
+        <div class="space-y-2">
+          <div class="font-medium line-clamp-2 min-h-12">
+            {{ p.title }}
+          </div>
+          <div class="text-xs text-muted break-all">
+            /{{ p.slug }}
+          </div>
+          <UBadge size="sm" color="neutral" variant="soft">
+            {{ visibilityLabel(p.visibility) }}
+          </UBadge>
+        </div>
+        <template #footer>
+          <div class="flex flex-wrap gap-2 justify-end">
+            <UButton
+              v-if="postDetailHref(p.slug, p.visibility)"
+              :to="postDetailHref(p.slug, p.visibility)"
+              size="xs"
+              variant="soft"
+              color="neutral"
+            >
+              详情
+            </UButton>
+            <UButton :to="`/me/posts/${p.id}`" size="xs" variant="ghost">
+              编辑
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </div>
   </UContainer>
 </template>
diff --git a/app/pages/me/posts/new.vue b/app/pages/me/posts/new.vue
index 4eb3de4..96a8c81 100644
--- a/app/pages/me/posts/new.vue
+++ b/app/pages/me/posts/new.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { normalizePostSlugCandidate } from '../../../utils/post-slug'
+
 usePageTitle('新建文章')
 
 const { fetchData } = useClientApi()
@@ -12,6 +14,37 @@ const state = reactive({
   visibility: 'private',
 })
 const loading = ref(false)
+const visibilityItems = [
+  { label: '私密', value: 'private' },
+  { label: '公开', value: 'public' },
+  { label: '仅链接', value: 'unlisted' },
+]
+
+const bodyLength = computed(() => state.bodyMarkdown.trim().length)
+
+function generateSlugFromTitle() {
+  if (!state.title.trim()) {
+    toast.add({ title: '请先填写标题', color: 'warning' })
+    return
+  }
+
+  const previous = state.slug
+  const normalized = normalizePostSlugCandidate(state.title)
+
+  state.slug = normalized
+
+  if (!state.slug) {
+    toast.add({ title: '未生成 slug，请检查标题内容', color: 'warning' })
+    return
+  }
+
+  if (state.slug === previous) {
+    toast.add({ title: 'slug 未变化', color: 'neutral' })
+    return
+  }
+
+  toast.add({ title: '已生成 slug', color: 'success' })
+}
 
 async function submit() {
   loading.value = true
@@ -36,64 +69,99 @@ async function submit() {
 </script>
 
 <template>
-  <UContainer class="py-8 max-w-6xl space-y-6">
+  <UContainer class="py-8 max-w-[1600px] space-y-6">
     <div class="flex flex-wrap items-center justify-between gap-3">
-      <h1 class="text-2xl font-semibold tracking-tight">
-        新建文章
-      </h1>
-      <UButton to="/me/posts" variant="ghost" color="neutral">
-        返回列表
-      </UButton>
+      <div class="space-y-1">
+        <h1 class="text-2xl font-semibold tracking-tight">
+          新建文章
+        </h1>
+        <p class="text-sm text-muted">
+          先填写标题和正文，再在右侧完成发布设置。
+        </p>
+      </div>
+      <div class="flex items-center gap-2">
+        <UButton to="/me/posts" variant="ghost" color="neutral">
+          返回列表
+        </UButton>
+        <UButton type="submit" form="new-post-form" :loading="loading">
+          创建文章
+        </UButton>
+      </div>
     </div>
 
-    <UForm :state="state" class="space-y-6" @submit.prevent="submit">
-      <UCard :ui="{ body: 'p-4 sm:p-6' }">
-        <PostBodyMarkdownEditor v-model="state.bodyMarkdown" />
-        <UFormField label="正文" name="bodyMarkdown" required class="sr-only" />
-      </UCard>
-
-      <UCard :ui="{ body: 'p-4 sm:p-6 space-y-4' }">
-        <UCollapsible :unmount-on-hide="false" :default-open="true">
-          <UButton
-            type="button"
-            color="neutral"
-            variant="subtle"
-            block
-            class="justify-between font-medium"
-            label="文章设置"
-            trailing
-            trailing-icon="i-lucide-chevron-down"
-          />
-          <template #content>
-            <div class="pt-4 space-y-4 border-t border-default mt-4">
-              <UFormField label="标题" name="title" required>
-                <UInput v-model="state.title" />
-              </UFormField>
-              <UFormField label="slug" name="slug" required>
-                <UInput v-model="state.slug" />
-              </UFormField>
-              <UFormField label="摘要" name="excerpt" required>
-                <UInput v-model="state.excerpt" />
-              </UFormField>
-              <UFormField label="可见性" name="visibility">
-                <USelect
-                  v-model="state.visibility"
-                  :items="[
-                    { label: '私密', value: 'private' },
-                    { label: '公开', value: 'public' },
-                    { label: '仅链接', value: 'unlisted' },
-                  ]"
-                />
-              </UFormField>
+    <UForm
+      id="new-post-form"
+      :state="state"
+      class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_280px]"
+      @submit.prevent="submit"
+    >
+      <div class="space-y-6">
+        <UCard :ui="{ body: 'p-4 sm:p-6 space-y-4' }">
+          <UFormField label="标题" name="title" required class="w-full">
+            <UInput
+              v-model="state.title"
+              class="w-full"
+              placeholder="例如：我的 2026 开发工作流复盘"
+            />
+          </UFormField>
+
+          <UFormField label="摘要" name="excerpt" required class="w-full">
+            <UTextarea
+              v-model="state.excerpt"
+              class="w-full"
+              :rows="3"
+              autoresize
+              placeholder="一句话概括文章核心内容，便于列表页快速浏览。"
+            />
+          </UFormField>
+        </UCard>
+
+        <UCard :ui="{ body: 'p-4 sm:p-6 space-y-3' }">
+          <div class="flex items-center justify-between gap-3">
+            <h2 class="text-base font-medium">
+              正文内容
+            </h2>
+            <span class="text-xs text-muted">字数 {{ bodyLength }}</span>
+          </div>
+          <PostBodyMarkdownEditor v-model="state.bodyMarkdown" />
+          <UFormField label="正文" name="bodyMarkdown" required class="sr-only" />
+        </UCard>
+      </div>
+
+      <div class="space-y-6 xl:sticky xl:top-20 xl:self-start">
+        <UCard :ui="{ body: 'p-4 sm:p-5 space-y-4' }">
+          <h2 class="text-base font-medium">
+            发布设置
+          </h2>
+          <UFormField label="slug" name="slug" required>
+            <div class="flex items-center gap-2">
+              <UInput v-model="state.slug" placeholder="my-post-slug" class="flex-1" />
+              <UButton
+                type="button"
+                variant="soft"
+                color="neutral"
+                icon="i-lucide-wand-sparkles"
+                label="生成"
+                @click="generateSlugFromTitle"
+              />
             </div>
-          </template>
-        </UCollapsible>
-      </UCard>
+          </UFormField>
+          <UFormField label="可见性" name="visibility">
+            <USelect v-model="state.visibility" :items="visibilityItems" />
+          </UFormField>
+        </UCard>
 
-      <div class="flex flex-wrap gap-2">
-        <UButton type="submit" :loading="loading">
-          创建
-        </UButton>
+        <UCard :ui="{ body: 'p-4 sm:p-5 space-y-3' }">
+          <h2 class="text-base font-medium">
+            操作
+          </h2>
+          <UButton type="submit" :loading="loading" block>
+            创建文章
+          </UButton>
+          <UButton to="/me/posts" variant="ghost" color="neutral" block>
+            取消并返回
+          </UButton>
+        </UCard>
       </div>
     </UForm>
   </UContainer>
diff --git a/app/utils/post-slug.ts b/app/utils/post-slug.ts
new file mode 100644
index 0000000..6c115d5
--- /dev/null
+++ b/app/utils/post-slug.ts
@@ -0,0 +1,16 @@
+export const POST_SLUG_RE = /^[a-z0-9][a-z0-9-]{0,98}[a-z0-9]$|^[a-z0-9]$/
+
+export function normalizePostSlugCandidate(input: string): string {
+  const ascii = input
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/['"]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .replace(/-{2,}/g, '-')
+
+  const limited = ascii.slice(0, 100).replace(/-+$/g, '')
+  return limited
+}
+
diff --git a/packages/drizzle-pkg/db.sqlite b/packages/drizzle-pkg/db.sqlite
index 62e65044c0cc183cc6e9a8cf49f4d05d5b632144..364a71e90ca103bf5cb984186d0c83b1d839905b 100644
GIT binary patch
delta 2886
zcmcJRYfKzf6vyw~-C=jx$6<K{S|qd$SWqbJV_3IJ0jtrNR6g;+S8!k#g0Mh4VDQsm
zQ-hLJC`gH>*i?;tKugJrTPgu<G|{H9B$NuI(Kcn+Hl;Oc(|%AB&z;$UMbMOl&hGs8
zk@?;8zxSMba@*U@?d|67t%>?HLP!?gsd(%0b{@%d>GWwMuZ|SZTcPdS=Itd#JjYd-
zIj-94ce|>*zI;!$rzYRy_EqIq@zp{;U*vtP#^v$|g@uK5;KJ4ElXPHcrhJ$;C|Ivh
zp4D4ka+Z2<xE+v_qpzU%GgR-(<)id^$k99l9B0s*X=tf3rP*f4BswAzLj{W1Yo7{8
z9l3fSG&B2fMmceC>4f8Sa$o0-k9+Vfh=L&cMZsSq3X45Gk<MXxqJQCZr`&Z!K6NN^
za16gh-a9UTGAN&ZTR!;K!uWXPgF_p7QhE@BZeUF50nBLw;X9?xU($_)AC@*fqZ<k@
zOPgI#8w)=nZE`)|Z}_8Q@^}|+7AbZw#cryXUco-_#fz@y19h(pEdk|+TUBf{MbzO)
zb>N2G!Zxgk7w%Pji3%3V%4u$`YN)Hm=R;YKs@k7JftYjCKQDGhxqVM9j)v+l9<|uu
zCegtxfjck@H$(O-=is441I?zo*bcxNoS9-UUFgoQw$h~d4@n#?Cbl8dB~u9(=8UvB
zoLoqAX?({sDaO>DJL$Xo!l_Prmu7FPZ4HPmm4Tp8*RZW6(AJU{{ijZ>6dIcv-v~Cf
ziv3$3rkVX6Ug`*ExM?d58+rQo?!076AA#@T1T;XN{kDC?-exbh$JwTA@7t<v`PRGE
zGuAh)Pg|{)^OnBQ_Jn{%;*;&fOh}Rg+cL)$m}>l@=vN%zO5AupUsb^$tZOU{v<boH
zhQO|-1GRgSRBVfa`ApdL<gUZ=@R){1PP8M6T3_$vJw8v7&+Fw&YuTiBRW}8_i3;zK
z)VRC}(;;Z=qEv@0>MGV*<Ywe<heD<#DUo>-c3fQeWy|u}AhM|IvEGE($+|J9gdJN8
zE9XWSnj2Y#?%%IOg;>&uBzAiZTzKb61W{Lk%X8)Jv1|c4USXx71(;(n%*8B|8q;G_
zI4oW@HDzThA+L?sBZaz_vi=X1G0CWm$z@97OVwb!Ma9%*Eimofi!QYZUj5}Za;VFk
zhI!)uJKB|QHZ#;U6mM22EILV>T3K0{7VWYr4LQ^`oX><DB@Qk3M$wPS*SPtq9mt`s
zN<*}4yhcRLB)XWaY!pxuTNq=RQguD@@i>J{QiHP8W6b4xo4x!TqNuCT<=j8PDR4?^
zv|0tMH|3ZRH7yPOWaz>HP*)8Qb-l-+;Hm01!(GBIJYdwU<YwkKFY>7C@ov4sgH}Q@
zIi3FF1>_|BShLL8I)!qiD5i;-HOrM{p7swSh+0JPF>D=L$v9nZm(#6fV>&&KJ(eD~
zX83sQjma=T;4iqB1;4{BxDMCgXPASFZ~@N2cknfQ1z*Ald<KK?5e(pIE(qo9V3y1z
ziAf?82a^OQz{JkP#>C3R!X%!FnTd&skx3kr-lfX4ykt1WY)r$C@B@4clW+z`;S>zP
zr`SV}!MzxFv*@A$Dh+zVToC4hFc*ZmAj}0}E(mi$m<z&O5axm~7lfKQJ*CEf*-*}#
g24+alB>d-b`i))p?0o;kN&1@Z{8IRlVS1_iA0%*(;Q#;t

delta 744
zcma))O=uHA6vyZ7&ZL<%*=dX+v?)~ER8vW8k~T3_Fdn>!hn)6MsMOHSdJ;<4(3{D{
zg9V``$o8`R070bMP*%Gh#G*%gu!mZx3VN^=vGt<_dhi2hlL{U@$ngHmFu(Wby_r`k
z(Nc*{wjB`m5JDjy0Ujcc-kXtxAnYw(T<nEy^YEcpQYJ-+41^@}=~zlh$D*lx;zYDR
z5lch|`UljglIu&ylkuE7GNKA#yvRsFFy<2zZAnaIN=PM_4OOz4XHeyKoh%#{W%wVj
z%24(pd@#MEFBu^sfM9M9`$s*zM!+({GOMt`inN+HV=c>~OFs_`(VpOfSQ%bxHRZK?
z&2^O35Ua5r_TH4<J!kC-p_uwXRWublG4+9_sA4mwt&r2q+856mA1)&Yc#vn_x$evm
zi!_19Iv9f<ur9}874)4jwCF>pV9@&12kn4e)2N_>LpTZn{cQw-`dNo?+-gd~&y#M{
zf)LwaWmcAc@#a5E#UyqkN>N8gfbggJIJLZGJlVW`XY<y?R=LdeQX#Kh0b^$R`VFqe
zgS(AAZ+eCDJip&g8y_3b7qtACeK%aRxg%O*&mN<A!yci3*%$x#H=MafL^tZ<0SNiL
zd<Y03IgPJ<aIX96X)tW%C3FI!$mg#^il#J5m<yeI#0jq5z<a9`c9Dv@56mtNdBK=n
zlCOc`vkxwARezZu>?>cUH}+cMpD02X7ODNy#2!Qk5k!&Fzu;ZA%f9h>c*7V60V6CT
cuu)=tpMj^6UcC=YUs-?)!jxhitHS!^Z`+~NKmY&$

diff --git a/server/api/public/profile/[publicSlug]/posts/[postSlug]/comments.post.ts b/server/api/public/profile/[publicSlug]/posts/[postSlug]/comments.post.ts
index f330e12..746741a 100644
--- a/server/api/public/profile/[publicSlug]/posts/[postSlug]/comments.post.ts
+++ b/server/api/public/profile/[publicSlug]/posts/[postSlug]/comments.post.ts
@@ -48,9 +48,11 @@ export default defineEventHandler(async (event) => {
 
   void notifyReplyCommentCreated({
     postId: ctx.id,
+    postOwnerUserId: ctx.userId,
     commentId: newCommentId,
     parentId: parsed.parentId,
     actorUserId: viewer?.id ?? null,
+    actorGuestEmail: viewer == null ? (parsed.guestEmail ?? null) : null,
     replyBody: parsed.body,
   });
 
diff --git a/server/api/public/unlisted/[publicSlug]/[shareToken]/comments.post.ts b/server/api/public/unlisted/[publicSlug]/[shareToken]/comments.post.ts
index cb05e3c..75998ac 100644
--- a/server/api/public/unlisted/[publicSlug]/[shareToken]/comments.post.ts
+++ b/server/api/public/unlisted/[publicSlug]/[shareToken]/comments.post.ts
@@ -48,9 +48,11 @@ export default defineEventHandler(async (event) => {
 
   void notifyReplyCommentCreated({
     postId: ctx.id,
+    postOwnerUserId: ctx.userId,
     commentId: newCommentId,
     parentId: parsed.parentId,
     actorUserId: viewer?.id ?? null,
+    actorGuestEmail: viewer == null ? (parsed.guestEmail ?? null) : null,
     replyBody: parsed.body,
   });
 
diff --git a/server/service/comment-notify/index.test.ts b/server/service/comment-notify/index.test.ts
index 6369d33..1902208 100644
--- a/server/service/comment-notify/index.test.ts
+++ b/server/service/comment-notify/index.test.ts
@@ -1,34 +1,35 @@
 import { describe, expect, test } from "bun:test";
-import { notifyReplyCommentCreated } from "./index";
+import { notifyReplyCommentCreated, type NotifyDeps, type ReceiverTarget } from "./index";
 
 function createDeps() {
   const state = {
     sendMailCalled: false,
   };
+  const deps: NotifyDeps = {
+    getParentReceiver: async (): Promise<ReceiverTarget | null> => ({ kind: "user", userId: 2 }),
+    getGlobalConfig: async () => ({
+      enabled: true,
+      fromEmail: "noreply@example.com",
+      smtpHost: "smtp.example.com",
+      smtpPort: 465,
+      smtpSecure: true,
+      smtpUser: "smtp-user",
+      smtpPass: "smtp-pass",
+    }),
+    getReceiverNotifyEnabled: async () => true,
+    getReceiverProfile: async () => ({
+      email: "receiver@example.com",
+      username: "receiver",
+      nickname: "Receiver",
+    }),
+    sendMail: async () => {
+      state.sendMailCalled = true;
+    },
+  };
 
   return {
     state,
-    deps: {
-      getParentAuthorUserId: async () => 2,
-      getGlobalConfig: async () => ({
-        enabled: true,
-        fromEmail: "noreply@example.com",
-        smtpHost: "smtp.example.com",
-        smtpPort: 465,
-        smtpSecure: true,
-        smtpUser: "smtp-user",
-        smtpPass: "smtp-pass",
-      }),
-      getReceiverNotifyEnabled: async () => true,
-      getReceiverProfile: async () => ({
-        email: "receiver@example.com",
-        username: "receiver",
-        nickname: "Receiver",
-      }),
-      sendMail: async () => {
-        state.sendMailCalled = true;
-      },
-    },
+    deps,
   };
 }
 
@@ -45,7 +46,10 @@ describe("notifyReplyCommentCreated", () => {
       smtpPass: "smtp-pass",
     });
 
-    await notifyReplyCommentCreated({ postId: 10, commentId: 200, parentId: 100, actorUserId: 1, replyBody: "hello" }, deps);
+    await notifyReplyCommentCreated(
+      { postId: 10, postOwnerUserId: 2, commentId: 200, parentId: 100, actorUserId: 1, replyBody: "hello" },
+      deps,
+    );
 
     expect(state.sendMailCalled).toBe(false);
   });
@@ -54,24 +58,33 @@ describe("notifyReplyCommentCreated", () => {
     const { deps, state } = createDeps();
     deps.getReceiverNotifyEnabled = async () => false;
 
-    await notifyReplyCommentCreated({ postId: 10, commentId: 201, parentId: 100, actorUserId: 1, replyBody: "hello" }, deps);
+    await notifyReplyCommentCreated(
+      { postId: 10, postOwnerUserId: 2, commentId: 201, parentId: 100, actorUserId: 1, replyBody: "hello" },
+      deps,
+    );
 
     expect(state.sendMailCalled).toBe(false);
   });
 
-  test("无 parentId -> 不发送", async () => {
+  test("无 parentId -> 通知文章作者", async () => {
     const { deps, state } = createDeps();
 
-    await notifyReplyCommentCreated({ postId: 10, commentId: 202, parentId: null, actorUserId: 1, replyBody: "hello" }, deps);
+    await notifyReplyCommentCreated(
+      { postId: 10, postOwnerUserId: 2, commentId: 202, parentId: null, actorUserId: 1, replyBody: "hello" },
+      deps,
+    );
 
-    expect(state.sendMailCalled).toBe(false);
+    expect(state.sendMailCalled).toBe(true);
   });
 
   test("自通知 -> 不发送", async () => {
     const { deps, state } = createDeps();
-    deps.getParentAuthorUserId = async () => 1;
+    deps.getParentReceiver = async () => ({ kind: "user", userId: 1 });
 
-    await notifyReplyCommentCreated({ postId: 10, commentId: 203, parentId: 100, actorUserId: 1, replyBody: "hello" }, deps);
+    await notifyReplyCommentCreated(
+      { postId: 10, postOwnerUserId: 2, commentId: 203, parentId: 100, actorUserId: 1, replyBody: "hello" },
+      deps,
+    );
 
     expect(state.sendMailCalled).toBe(false);
   });
@@ -83,7 +96,10 @@ describe("notifyReplyCommentCreated", () => {
     };
 
     await expect(
-      notifyReplyCommentCreated({ postId: 10, commentId: 204, parentId: 100, actorUserId: 1, replyBody: "hello" }, deps),
+      notifyReplyCommentCreated(
+        { postId: 10, postOwnerUserId: 2, commentId: 204, parentId: 100, actorUserId: 1, replyBody: "hello" },
+        deps,
+      ),
     ).resolves.toBeUndefined();
   });
 
@@ -95,7 +111,42 @@ describe("notifyReplyCommentCreated", () => {
       nickname: "Receiver",
     });
 
-    await notifyReplyCommentCreated({ postId: 10, commentId: 205, parentId: 100, actorUserId: 1, replyBody: "hello" }, deps);
+    await notifyReplyCommentCreated(
+      { postId: 10, postOwnerUserId: 2, commentId: 205, parentId: 100, actorUserId: 1, replyBody: "hello" },
+      deps,
+    );
+
+    expect(state.sendMailCalled).toBe(false);
+  });
+
+  test("回复游客（有邮箱且非匿名）-> 发送邮件到游客邮箱", async () => {
+    const { deps, state } = createDeps();
+    deps.getParentReceiver = async () => ({ kind: "guest", email: "guest@example.com" });
+
+    await notifyReplyCommentCreated(
+      { postId: 10, postOwnerUserId: 2, commentId: 206, parentId: 100, actorUserId: 1, replyBody: "hello" },
+      deps,
+    );
+
+    expect(state.sendMailCalled).toBe(true);
+  });
+
+  test("游客回复自己（同邮箱）-> 不发送", async () => {
+    const { deps, state } = createDeps();
+    deps.getParentReceiver = async () => ({ kind: "guest", email: "guest@example.com" });
+
+    await notifyReplyCommentCreated(
+      {
+        postId: 10,
+        postOwnerUserId: 2,
+        commentId: 207,
+        parentId: 100,
+        actorUserId: null,
+        actorGuestEmail: "guest@example.com",
+        replyBody: "hello",
+      },
+      deps,
+    );
 
     expect(state.sendMailCalled).toBe(false);
   });
diff --git a/server/service/comment-notify/index.ts b/server/service/comment-notify/index.ts
index daf75f1..d38b14a 100644
--- a/server/service/comment-notify/index.ts
+++ b/server/service/comment-notify/index.ts
@@ -20,8 +20,12 @@ type ReceiverProfile = {
   nickname: string | null;
 };
 
-type NotifyDeps = {
-  getParentAuthorUserId: (parentId: number) => Promise<number | null>;
+export type ReceiverTarget =
+  | { kind: "user"; userId: number }
+  | { kind: "guest"; email: string };
+
+export type NotifyDeps = {
+  getParentReceiver: (parentId: number) => Promise<ReceiverTarget | null>;
   getGlobalConfig: () => Promise<NotifyGlobalConfig>;
   getReceiverNotifyEnabled: (userId: number) => Promise<boolean>;
   getReceiverProfile: (userId: number) => Promise<ReceiverProfile | null>;
@@ -66,7 +70,7 @@ function isSmtpConfigReady(config: NotifyGlobalConfig): boolean {
   );
 }
 
-async function defaultGetParentAuthorUserId(parentId: number): Promise<number | null> {
+async function defaultGetParentReceiver(parentId: number): Promise<ReceiverTarget | null> {
   const { dbGlobal } = await import("drizzle-pkg/lib/db");
   const { postComments } = await import("drizzle-pkg/lib/schema/content");
   const { eq } = await import("drizzle-orm");
@@ -74,12 +78,23 @@ async function defaultGetParentAuthorUserId(parentId: number): Promise<number |
   const [parent] = await dbGlobal
     .select({
       authorUserId: postComments.authorUserId,
+      guestEmail: postComments.guestEmail,
+      guestIsAnonymous: postComments.guestIsAnonymous,
     })
     .from(postComments)
     .where(eq(postComments.id, parentId))
     .limit(1);
 
-  return parent?.authorUserId ?? null;
+  if (!parent) {
+    return null;
+  }
+  if (parent.authorUserId != null) {
+    return { kind: "user", userId: parent.authorUserId };
+  }
+  if (!parent.guestIsAnonymous && parent.guestEmail && hasValue(parent.guestEmail) && isValidEmail(parent.guestEmail)) {
+    return { kind: "guest", email: parent.guestEmail.trim() };
+  }
+  return null;
 }
 
 async function defaultGetGlobalConfig(): Promise<NotifyGlobalConfig> {
@@ -150,7 +165,7 @@ async function defaultSendMail(input: { toEmail: string; fromEmail: string; repl
 
 function getDefaultDeps(): NotifyDeps {
   return {
-    getParentAuthorUserId: defaultGetParentAuthorUserId,
+    getParentReceiver: defaultGetParentReceiver,
     getGlobalConfig: defaultGetGlobalConfig,
     getReceiverNotifyEnabled: defaultGetReceiverNotifyEnabled,
     getReceiverProfile: defaultGetReceiverProfile,
@@ -161,25 +176,21 @@ function getDefaultDeps(): NotifyDeps {
 export async function notifyReplyCommentCreated(
   input: {
     postId: number;
+    postOwnerUserId: number;
     commentId: number;
     parentId: number | null;
     actorUserId: number | null;
+    actorGuestEmail?: string | null;
     replyBody: string;
   },
   deps: NotifyDeps = getDefaultDeps(),
 ): Promise<void> {
   let receiverUserId: number | null = null;
+  let receiverEmail: string | null = null;
   try {
-    if (input.parentId == null) {
-      return;
-    }
-
-    receiverUserId = await deps.getParentAuthorUserId(input.parentId);
-    if (receiverUserId == null) {
-      return;
-    }
-
-    if (input.actorUserId != null && input.actorUserId === receiverUserId) {
+    const receiverTarget =
+      input.parentId == null ? ({ kind: "user", userId: input.postOwnerUserId } as const) : await deps.getParentReceiver(input.parentId);
+    if (receiverTarget == null) {
       return;
     }
 
@@ -188,21 +199,35 @@ export async function notifyReplyCommentCreated(
       return;
     }
 
-    const receiverNotifyEnabled = await deps.getReceiverNotifyEnabled(receiverUserId);
-    if (!receiverNotifyEnabled) {
-      return;
-    }
-
-    const receiver = await deps.getReceiverProfile(receiverUserId);
-    if (!receiver?.email || !hasValue(receiver.email)) {
-      return;
-    }
-    if (!isValidEmail(receiver.email)) {
-      return;
+    if (receiverTarget.kind === "user") {
+      receiverUserId = receiverTarget.userId;
+      if (input.actorUserId != null && input.actorUserId === receiverUserId) {
+        return;
+      }
+
+      const receiverNotifyEnabled = await deps.getReceiverNotifyEnabled(receiverUserId);
+      if (!receiverNotifyEnabled) {
+        return;
+      }
+
+      const receiver = await deps.getReceiverProfile(receiverUserId);
+      if (!receiver?.email || !hasValue(receiver.email)) {
+        return;
+      }
+      if (!isValidEmail(receiver.email)) {
+        return;
+      }
+      receiverEmail = receiver.email.trim();
+    } else {
+      receiverEmail = receiverTarget.email.trim();
+      const actorGuestEmail = input.actorGuestEmail?.trim();
+      if (actorGuestEmail && receiverEmail.toLowerCase() === actorGuestEmail.toLowerCase()) {
+        return;
+      }
     }
 
     await deps.sendMail({
-      toEmail: receiver.email,
+      toEmail: receiverEmail,
       fromEmail: globalConfig.fromEmail,
       replyBody: input.replyBody,
     });
@@ -211,6 +236,7 @@ export async function notifyReplyCommentCreated(
       postId: input.postId,
       commentId: input.commentId,
       receiverUserId,
+      receiverEmail,
       reason: getReason(error),
       stack: getStack(error),
     });