fix: loading icon

feat(docs): show API routes on overview

docs/components/api-overview.tsx

@@ -0,0 +1,65 @@
+import Link from "next/link";
+
+import { getOpenAPIOperations } from "@/lib/openapi-operations";
+
+const methodColors: Record<string, string> = {
+  GET: "bg-emerald-100 text-emerald-700",
+  POST: "bg-blue-100 text-blue-700",
+  PUT: "bg-amber-100 text-amber-700",
+  PATCH: "bg-purple-100 text-purple-700",
+  DELETE: "bg-rose-100 text-rose-700",
+};
+
+function MethodBadge({ method }: { method: string }) {
+  const color = methodColors[method] ?? "bg-slate-100 text-slate-700";
+
+  return (
+    <span
+      className={`font-semibold uppercase tracking-wide text-xs px-2 py-1 rounded ${color}`}
+    >
+      {method}
+    </span>
+  );
+}
+
+export function APIOverviewTable() {
+  const operations = getOpenAPIOperations();
+
+  if (operations.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="not-prose mt-6 overflow-x-auto">
+      <table className="w-full border-separate border-spacing-y-2 text-sm">
+        <thead className="text-left text-muted-foreground">
+          <tr>
+            <th className="px-3 py-2 font-medium">路径</th>
+            <th className="px-3 py-2 font-medium">方法</th>
+            <th className="px-3 py-2 font-medium">摘要</th>
+          </tr>
+        </thead>
+        <tbody>
+          {operations.map((operation) => (
+            <tr
+              key={`${operation.method}-${operation.route}`}
+              className="bg-muted/30"
+            >
+              <td className="px-3 py-2 align-top font-mono">
+                <Link className="hover:underline" href={operation.href}>
+                  {operation.route}
+                </Link>
+              </td>
+              <td className="px-3 py-2 align-top">
+                <MethodBadge method={operation.method} />
+              </td>
+              <td className="px-3 py-2 align-top text-muted-foreground">
+                {operation.summary || "—"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

docs/content/docs/openapi/index.mdx

@@ -2,3 +2,11 @@
 title: API 概览
 description: Open API 接口文档
 ---
+
+import { APIOverviewTable } from "@/components/api-overview";
+
+# 接口列表
+
+以下列表聚合了所有已生成的接口页面，展示对应的路径、请求方法以及摘要，便于快速检索和跳转。
+
+<APIOverviewTable />

docs/lib/openapi-operations.ts

@@ -0,0 +1,68 @@
+import matter from "gray-matter";
+
+import { source } from "@/lib/source";
+
+interface OperationFrontmatter {
+  title?: string;
+  description?: string;
+  _openapi?: {
+    method?: string;
+    route?: string;
+  };
+}
+
+export interface OpenAPIOperation {
+  href: string;
+  method: string;
+  route: string;
+  summary: string;
+}
+
+function parseFrontmatter(content: string): OperationFrontmatter {
+  const result = matter(content);
+
+  return result.data as OperationFrontmatter;
+}
+
+function normalizeSummary(frontmatter: OperationFrontmatter): string {
+  return frontmatter.title ?? frontmatter.description ?? "";
+}
+
+export function getOpenAPIOperations(): OpenAPIOperation[] {
+  return source
+    .getPages()
+    .filter((page) =>
+      page.url.startsWith("/openapi/") && page.url !== "/openapi"
+    )
+    .map((page) => {
+      if (typeof page.data.content !== "string") {
+        return undefined;
+      }
+
+      const frontmatter = parseFrontmatter(page.data.content);
+
+      const method = frontmatter._openapi?.method?.toUpperCase();
+      const route = frontmatter._openapi?.route;
+      const summary = normalizeSummary(frontmatter);
+
+      if (!method || !route) {
+        return undefined;
+      }
+
+      return {
+        href: page.url,
+        method,
+        route,
+        summary,
+      } satisfies OpenAPIOperation;
+    })
+    .filter((operation): operation is OpenAPIOperation => Boolean(operation))
+    .sort((a, b) => {
+      const routeCompare = a.route.localeCompare(b.route);
+      if (routeCompare !== 0) {
+        return routeCompare;
+      }
+
+      return a.method.localeCompare(b.method);
+    });
+}

docs/scripts/generate-docs.ts

@@ -1,10 +1,18 @@
+import { rmSync } from "node:fs";
+
 import { generateFiles } from "fumadocs-openapi";
 import { openapi } from "@/lib/openapi";
 
+const outputDir = "./content/docs/openapi/(generated)";
+
+rmSync(outputDir, { recursive: true, force: true });
+
 void generateFiles({
   input: openapi,
-  output: "./content/docs/openapi/(generated)",
+  output: outputDir,
   // we recommend to enable it
   // make sure your endpoint description doesn't break MDX syntax.
   includeDescription: true,
+  per: "operation",
+  groupBy: "route",
 });

frontend_nuxt/assets/global.css

@@ -121,6 +121,19 @@ body {
   vertical-align: middle;
 }
 
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-icon {
+  animation: spin 1s linear infinite;
+}
+
 /* .vditor {
   --textarea-background-color: transparent;
   border: none !important;

frontend_nuxt/components/BaseTimeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline" :class="{ 'hover-enabled': hover }">
+  <div class="timeline">
     <div class="timeline-item" v-for="(item, idx) in items" :key="idx">
       <div
         class="timeline-icon"
@@ -26,7 +26,6 @@ export default {
   name: 'BaseTimeline',
   props: {
     items: { type: Array, default: () => [] },
-    hover: { type: Boolean, default: false },
   },
 }
 </script>
@@ -46,12 +45,6 @@ export default {
   margin-top: 10px;
 }
 
-.hover-enabled .timeline-item:hover {
-  background-color: var(--menu-selected-background-color);
-  transition: background-color 0.2s;
-  border-radius: 10px;
-}
-
 .timeline-icon {
   position: sticky;
   top: 0;
@@ -95,7 +88,7 @@ export default {
 }
 
 .timeline-item:last-child::before {
-  display: none;
+  bottom: 0px;
 }
 
 .timeline-content {

frontend_nuxt/components/CommentEditor.vue

@@ -10,7 +10,7 @@
           发布评论
           <span class="shortcut-icon" v-if="!isMobile"> {{ isMac ? '⌘' : 'Ctrl' }} ⏎ </span>
         </template>
-        <template v-else> <loading-four /> 发布中... </template>
+        <template v-else> <loading-four class="loading-icon" /> 发布中... </template>
       </div>
     </div>
   </div>

frontend_nuxt/components/MessageEditor.vue

@@ -9,7 +9,7 @@
           发送
           <span class="shortcut-icon" v-if="!isMobile"> {{ isMac ? '⌘' : 'Ctrl' }} ⏎ </span>
         </template>
-        <template v-else> <loading-four /> 发送中... </template>
+        <template v-else> <loading-four class="loading-icon" /> 发送中... </template>
       </div>
     </div>
   </div>

frontend_nuxt/components/TimelineCommentGroup.vue

@@ -9,23 +9,6 @@
         <div class="comment-content-item-main">
           <comment-one class="comment-content-item-icon" />
           <div class="comment-content-item-text">
-            <span class="comment-content-item-prefix">
-              在
-              <NuxtLink :to="`/posts/${entry.comment.post.id}`" class="timeline-link">
-                {{ entry.comment.post.title }}
-              </NuxtLink>
-              <template v-if="entry.comment.parentComment">
-                下对
-                <NuxtLink
-                  :to="`/posts/${entry.comment.post.id}#comment-${entry.comment.parentComment.id}`"
-                  class="timeline-link"
-                >
-                  {{ parentSnippet(entry) }}
-                </NuxtLink>
-                回复了
-              </template>
-              <template v-else> 下评论了 </template>
-            </span>
             <NuxtLink
               :to="`/posts/${entry.comment.post.id}#comment-${entry.comment.id}`"
               class="timeline-comment-link"
@@ -65,7 +48,7 @@ const entries = computed(() => {
   return []
 })
 
-const formattedDate = computed(() => TimeManager.format(props.item.createdAt))
+const formattedDate = computed(() => TimeManager.formatWithDay(props.item.createdAt))
 
 const hasReplies = computed(() => entries.value.some((entry) => !!entry.comment.parentComment))
 const hasComments = computed(() => entries.value.some((entry) => !entry.comment.parentComment))
@@ -93,9 +76,8 @@ const parentSnippet = (entry) =>
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 10px 12px;
-  border-radius: 10px;
-  background: var(--timeline-card-background, transparent);
+  padding-top: 5px;
+  padding-bottom: 20px;
 }
 
 .timeline-header {
@@ -112,20 +94,20 @@ const parentSnippet = (entry) =>
 .timeline-date {
   font-size: 12px;
   color: var(--timeline-date-color, #888);
+  white-space: nowrap;
 }
 
 .comment-content {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 3px;
 }
 
 .comment-content-item {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: space-between;
   gap: 6px;
-  padding-bottom: 6px;
-  border-bottom: 1px solid var(--comment-item-border, rgba(0, 0, 0, 0.05));
 }
 
 .comment-content-item:last-child {
@@ -160,11 +142,11 @@ const parentSnippet = (entry) =>
 .timeline-comment-link {
   font-size: 14px;
   color: var(--link-color);
-  text-decoration: none;
+  text-decoration: underline;
 }
 
 .timeline-comment-link:hover {
-  text-decoration: underline;
+  color: var(--primary-color);
 }
 
 .timeline-link {

frontend_nuxt/components/TimelinePostItem.vue

@@ -13,11 +13,7 @@
       </div>
       <div class="article-meta" v-if="hasMeta">
         <ArticleCategory v-if="item.post?.category" :category="item.post.category" />
-        <div class="article-tags" v-if="(item.post?.tags?.length ?? 0) > 0">
-          <span class="article-tag" v-for="tag in item.post?.tags" :key="tag.id || tag.name">
-            #{{ tag.name }}
-          </span>
-        </div>
+        <ArticleTags :tags="item.post?.tags" />
         <div class="article-comment-count" v-if="item.post?.commentCount !== undefined">
           <comment-one class="article-comment-count-icon" />
           <span>{{ item.post?.commentCount }}</span>
@@ -29,7 +25,6 @@
 
 <script setup>
 import { computed } from 'vue'
-import ArticleCategory from '~/components/ArticleCategory.vue'
 import { stripMarkdown } from '~/utils/markdown'
 import TimeManager from '~/utils/time'
 
@@ -58,8 +53,8 @@ const hasMeta = computed(() => {
 .timeline-container {
   display: flex;
   flex-direction: column;
+  padding-top: 5px;
   gap: 12px;
-  padding: 10px 12px;
   border-radius: 10px;
   background: var(--timeline-card-background, transparent);
 }
@@ -83,6 +78,9 @@ const hasMeta = computed(() => {
 .article-container {
   display: flex;
   flex-direction: column;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 10px;
+  padding: 10px;
   gap: 6px;
 }
 

frontend_nuxt/components/TimelineTagItem.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="timeline-tag-item">
+    <div class="tags-container">
+      <div class="tags-container-item">
+        <div class="timeline-tag-title">创建了标签</div>
+        <ArticleTags v-if="tag" :tags="[tag]" />
+        <span class="timeline-tag-count" v-if="tag?.count"> x{{ tag.count }}</span>
+      </div>
+      <div v-if="timelineDate" class="timeline-date">{{ timelineDate }}</div>
+    </div>
+    <div v-if="hasDescription" class="timeline-snippet">
+      {{ tag?.description }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import TimeManager from '~/utils/time'
+
+const props = defineProps({
+  item: { type: Object, required: true },
+})
+
+const emit = defineEmits(['tag-click'])
+
+const tag = computed(() => props.item?.tag ?? null)
+const hasDescription = computed(() => {
+  const description = tag.value?.description
+  return !!description
+})
+
+const timelineDate = computed(() => {
+  const date = props.item?.createdAt ?? tag.value?.createdAt
+  return date ? TimeManager.format(date) : ''
+})
+
+const summaryDate = computed(() => {
+  const date = tag.value?.createdAt ?? props.item?.createdAt
+  return date ? TimeManager.format(date) : ''
+})
+
+const isClickable = computed(() => props.mode === 'summary' && !!tag.value)
+
+const handleTagClick = () => {
+  if (!isClickable.value) return
+  emit('tag-click', tag.value)
+}
+</script>
+
+<style scoped>
+.timeline-tag-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tags-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  padding-top: 5px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tags-container-item {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+}
+
+.timeline-tag-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.timeline-tag-count {
+  font-size: 12px;
+}
+
+.timeline-date {
+  font-size: 12px;
+  color: gray;
+  margin-top: 5px;
+  white-space: nowrap;
+}
+
+.timeline-snippet {
+  font-size: 14px;
+  color: #666;
+  margin-top: 5px;
+}
+
+.timeline-link {
+  font-weight: bold;
+  color: var(--primary-color);
+  text-decoration: none;
+  word-break: break-word;
+  cursor: default;
+}
+
+.timeline-link.clickable {
+  cursor: pointer;
+}
+
+.timeline-link.clickable:hover {
+  text-decoration: underline;
+}
+</style>

frontend_nuxt/pages/login.vue

@@ -16,7 +16,7 @@
 
         <div v-else class="login-page-button-primary disabled">
           <div class="login-page-button-text">
-            <loading-four />
+            <loading-four class="loading-icon" />
             登录中...
           </div>
         </div>

frontend_nuxt/pages/new-post.vue

@@ -30,7 +30,7 @@
           >
             发布
           </div>
-          <div v-else class="post-submit-loading"><loading-four /> 发布中...</div>
+          <div v-else class="post-submit-loading loading-icon"><loading-four /> 发布中...</div>
         </div>
       </div>
       <LotteryForm v-if="postType === 'LOTTERY'" :data="lottery" />

frontend_nuxt/pages/posts/[id]/edit.vue

@@ -26,7 +26,7 @@
           >
             更新
           </div>
-          <div v-else class="post-submit-loading"><loading-four /> 更新中...</div>
+          <div v-else class="post-submit-loading loading-icon"><loading-four /> 更新中...</div>
         </div>
       </div>
     </div>

frontend_nuxt/pages/signup.vue

@@ -35,7 +35,7 @@
         </div>
         <div v-else class="signup-page-button-primary disabled">
           <div class="signup-page-button-text">
-            <loading-four />
+            <loading-four class="loading-icon" />
             发送中...
           </div>
         </div>
@@ -56,7 +56,7 @@
         </div>
         <div v-else class="signup-page-button-primary disabled">
           <div class="signup-page-button-text">
-            <loading-four />
+            <loading-four class="loading-icon" />
             验证中...
           </div>
         </div>

frontend_nuxt/pages/users/[id].vue

@@ -112,19 +112,18 @@
                         {{ item.comment.post.title }}
                       </NuxtLink>
                       <template v-if="item.comment.parentComment">
-                        下对
                         <NuxtLink
                           :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
-                          class="timeline-link"
+                          class="timeline-comment-link"
                         >
                           {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
                         </NuxtLink>
-                        回复了
+                        <next class="reply-icon" /> 回复了
                       </template>
                       <template v-else> 下评论了 </template>
                       <NuxtLink
                         :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                        class="timeline-link"
+                        class="timeline-comment-link"
                       >
                         {{ stripMarkdownLength(item.comment.content, 200) }}
                       </NuxtLink>
@@ -143,15 +142,7 @@
                 <div class="summary-content" v-if="hotPosts.length > 0">
                   <BaseTimeline :items="hotPosts">
                     <template #item="{ item }">
-                      <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
-                        {{ item.post.title }}
-                      </NuxtLink>
-                      <div class="timeline-snippet">
-                        {{ stripMarkdown(item.post.snippet) }}
-                      </div>
-                      <div class="timeline-date">
-                        {{ formatDate(item.post.createdAt) }}
-                      </div>
+                      <TimelinePostItem :item="item" />
                     </template>
                   </BaseTimeline>
                 </div>
@@ -164,15 +155,7 @@
                 <div class="summary-content" v-if="hotTags.length > 0">
                   <BaseTimeline :items="hotTags">
                     <template #item="{ item }">
-                      <span class="timeline-link" @click="gotoTag(item.tag)">
-                        {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
-                      </span>
-                      <div class="timeline-snippet" v-if="item.tag.description">
-                        {{ item.tag.description }}
-                      </div>
-                      <div class="timeline-date">
-                        {{ formatDate(item.tag.createdAt) }}
-                      </div>
+                      <TimelineTagItem :item="item" />
                     </template>
                   </BaseTimeline>
                 </div>
@@ -212,13 +195,6 @@
             <div class="timeline-list">
               <BaseTimeline :items="filteredTimelineItems">
                 <template #item="{ item }">
-                  <!-- <template v-if="item.type === 'post'">
-                    发布了文章
-                    <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
-                      {{ item.post.title }}
-                    </NuxtLink>
-                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                  </template> -->
                   <template v-if="item.type === 'post'">
                     <TimelinePostItem :item="item" />
                   </template>
@@ -229,14 +205,7 @@
                     <TimelineCommentGroup :item="item" />
                   </template>
                   <template v-else-if="item.type === 'tag'">
-                    创建了标签
-                    <span class="timeline-link" @click="gotoTag(item.tag)">
-                      {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
-                    </span>
-                    <div class="timeline-snippet" v-if="item.tag.description">
-                      {{ item.tag.description }}
-                    </div>
-                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                    <TimelineTagItem :item="item" />
                   </template>
                 </template>
               </BaseTimeline>
@@ -302,6 +271,7 @@ import BaseTabs from '~/components/BaseTabs.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
 import TimelineCommentGroup from '~/components/TimelineCommentGroup.vue'
 import TimelinePostItem from '~/components/TimelinePostItem.vue'
+import TimelineTagItem from '~/components/TimelineTagItem.vue'
 import UserList from '~/components/UserList.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
@@ -391,7 +361,12 @@ const fetchSummary = async () => {
   const postsRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-posts`)
   if (postsRes.ok) {
     const data = await postsRes.json()
-    hotPosts.value = data.map((p) => ({ icon: 'file-text', post: p }))
+    hotPosts.value = data.map((p) => ({
+      icon: 'file-text',
+      type: 'post',
+      post: p,
+      createdAt: p.createdAt,
+    }))
   }
 
   const repliesRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-replies`)
@@ -403,7 +378,12 @@ const fetchSummary = async () => {
   const tagsRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-tags`)
   if (tagsRes.ok) {
     const data = await tagsRes.json()
-    hotTags.value = data.map((t) => ({ icon: 'tag-one', tag: t }))
+    hotTags.value = data.map((t) => ({
+      icon: 'tag-one',
+      type: 'tag',
+      tag: t,
+      createdAt: t.createdAt,
+    }))
   }
 }
 
@@ -689,6 +669,11 @@ watch(selectedTab, async (val) => {
   color: #666;
 }
 
+.reply-icon {
+  color: var(--primary-color);
+  margin-left: 5px;
+}
+
 .profile-page-header-user-info-buttons {
   display: flex;
   flex-direction: row;
@@ -941,8 +926,8 @@ watch(selectedTab, async (val) => {
 
 .timeline-link {
   font-weight: bold;
-  color: var(--primary-color);
   text-decoration: none;
+  color: var(--text-color);
   word-break: break-word;
 }
 
@@ -979,9 +964,25 @@ watch(selectedTab, async (val) => {
   justify-content: space-between;
 }
 
-.timeline-title {
-  font-size: 18px;
-  font-weight: bold;
+.tags-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  padding-top: 5px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tags-container-item {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+}
+
+.timeline-tag-title {
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .comment-content {
@@ -1017,6 +1018,7 @@ watch(selectedTab, async (val) => {
   color: var(--text-color);
   word-break: break-word;
   text-decoration: underline;
+  margin-left: 5px;
 }
 
 .timeline-comment-link:hover {

frontend_nuxt/utils/time.js

@@ -40,4 +40,33 @@ export default class TimeManager {
 
     return `${date.getFullYear()}.${month}.${day} ${timePart}`
   }
+
+  // 仅显示日期（不含时间）
+  static formatWithDay(input) {
+    const date = new Date(input)
+    if (Number.isNaN(date.getTime())) return ''
+
+    const now = new Date()
+
+    const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const startOfDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+    const diffDays = Math.floor((startOfToday - startOfDate) / 86400000)
+
+    if (diffDays === 0) return '今天'
+    if (diffDays === 1) return '昨天'
+    if (diffDays === 2) return '前天'
+
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+
+    if (date.getFullYear() === now.getFullYear()) {
+      return `${month}.${day}`
+    }
+
+    if (date.getFullYear() === now.getFullYear() - 1) {
+      return `去年 ${month}.${day}`
+    }
+
+    return `${date.getFullYear()}.${month}.${day}`
+  }
 }