feat(note): expose slug in admin and fix type errors

Innei · Innei · commit e8dc9b05a257 · 2026-03-14T01:01:59.000+08:00
diff --git a/src/api/notes.ts b/src/api/notes.ts
@@ -15,6 +15,7 @@ export interface GetNotesParams {
 export interface CreateNoteData {
   title: string
   text: string
+  slug?: string
   mood?: string
   weather?: string
   password?: string | null
@@ -34,6 +35,7 @@ export interface UpdateNoteData extends Partial<CreateNoteData> {}
 // 用于 patch 操作的数据类型，允许将某些字段设为 null
 export interface PatchNoteData {
   topicId?: string | null
+  slug?: string
   [key: string]: unknown
 }
 
diff --git a/src/components/editor/codemirror/use-auto-theme.ts b/src/components/editor/codemirror/use-auto-theme.ts
@@ -1,9 +1,8 @@
-import { watch } from 'vue'
-import type { EditorView } from '@codemirror/view/dist'
-import type { Ref } from 'vue'
-
 import { oneDark } from '@codemirror/theme-one-dark'
+import type { EditorView } from '@codemirror/view'
 import { githubLight } from '@ddietr/codemirror-themes/theme/github-light'
+import type { Ref } from 'vue'
+import { watch } from 'vue'
 
 import { useStoreRef } from '~/hooks/use-store-ref'
 import { UIStore } from '~/stores/ui'
diff --git a/src/components/editor/rich/RichEditor.tsx b/src/components/editor/rich/RichEditor.tsx
@@ -1,27 +1,26 @@
-import { createElement } from 'react'
-import { createRoot } from 'react-dom/client'
-import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import type { ImageUploadFn, RichEditorVariant } from '@haklex/rich-editor'
+import type { RichEditorVariant } from '@haklex/rich-editor'
+import { DialogStackProvider } from '@haklex/rich-editor-ui'
 import type { NestedDocDialogEditorProps } from '@haklex/rich-ext-nested-doc'
+import {
+  NestedDocDialogEditorProvider,
+  NestedDocPlugin,
+  nestedDocEditNodes,
+} from '@haklex/rich-ext-nested-doc'
 import type { ShiroEditorProps } from '@haklex/rich-kit-shiro'
+import { ExcalidrawConfigProvider, ShiroEditor } from '@haklex/rich-kit-shiro'
+import { ToolbarPlugin } from '@haklex/rich-plugin-toolbar'
+import { $convertToMarkdownString, TRANSFORMERS } from '@lexical/markdown'
 import type {
   Klass,
   LexicalEditor,
   LexicalNode,
   SerializedEditorState,
 } from 'lexical'
+import { createElement } from 'react'
 import type { Root } from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import type { PropType } from 'vue'
-
-import { DialogStackProvider } from '@haklex/rich-editor-ui'
-import {
-  NestedDocDialogEditorProvider,
-  nestedDocEditNodes,
-  NestedDocPlugin,
-} from '@haklex/rich-ext-nested-doc'
-import { ExcalidrawConfigProvider, ShiroEditor } from '@haklex/rich-kit-shiro'
-import { ToolbarPlugin } from '@haklex/rich-plugin-toolbar'
-import { $convertToMarkdownString, TRANSFORMERS } from '@lexical/markdown'
+import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import '@haklex/rich-kit-shiro/style.css'
 import '@haklex/rich-plugin-toolbar/style.css'
@@ -117,7 +116,7 @@ export const RichEditor = defineComponent({
     selfHostnames: Array as PropType<string[]>,
     extraNodes: Array as PropType<Array<Klass<LexicalNode>>>,
     editorStyle: Object as PropType<Record<string, string | number>>,
-    imageUpload: Function as PropType<ImageUploadFn>,
+    imageUpload: Function as PropType<ShiroEditorProps['imageUpload']>,
   },
   emits: {
     change: (_value: SerializedEditorState) => true,
diff --git a/src/components/update-detail-modal/index.tsx b/src/components/update-detail-modal/index.tsx
@@ -6,13 +6,7 @@ import { getReleaseDetails } from '../../external/api/github-check-update'
 
 import './markdown-styles.css'
 
-interface ReleaseDetails {
-  name: string
-  body: string
-  html_url: string
-  published_at: string
-  tag_name: string
-}
+type ReleaseDetails = Awaited<ReturnType<typeof getReleaseDetails>>
 
 export const UpdateDetailModal = defineComponent({
   props: {
@@ -36,8 +30,8 @@ export const UpdateDetailModal = defineComponent({
       try {
         const details = await getReleaseDetails(props.repo, props.version)
         releaseDetails.value = details
-      } catch (error) {
-        console.error('获取发布详情失败:', error)
+      } catch {
+        // Ignore transient GitHub API failures and keep the modal in fallback state.
       } finally {
         loading.value = false
       }
@@ -59,7 +53,10 @@ export const UpdateDetailModal = defineComponent({
       }
     }
 
-    const formatDate = (dateString: string) => {
+    const formatDate = (dateString: string | null) => {
+      if (!dateString) {
+        return '未知时间'
+      }
       return new Date(dateString).toLocaleString('zh-CN')
     }
 
@@ -118,8 +115,7 @@ export const UpdateDetailModal = defineComponent({
         const htmlString =
           typeof result === 'string' ? result : markdown.replace(/\n/g, '<br>')
         return sanitizeHtml(htmlString)
-      } catch (error) {
-        console.error('Markdown 渲染失败:', error)
+      } catch {
         // 降级到简单的文本显示
         return markdown.replace(/\n/g, '<br>')
       }
diff --git a/src/models/note.ts b/src/models/note.ts
@@ -19,6 +19,7 @@ export interface NoteModel {
   publicAt?: Date
   password?: string | null
   nid: number
+  slug?: string
   hide: boolean
 
   location?: string
diff --git a/src/views/manage-notes/list.tsx b/src/views/manage-notes/list.tsx
@@ -1,3 +1,5 @@
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { debouncedRef } from '@vueuse/core'
 import {
   Book as BookIcon,
   Bookmark as BookmarkIcon,
@@ -11,15 +13,11 @@ import {
   Trash2,
 } from 'lucide-vue-next'
 import { NButton, NEllipsis, NInput, NPopconfirm, NSpace } from 'naive-ui'
+import type { TableColumns } from 'naive-ui/lib/data-table/src/interface'
+import type { PropType } from 'vue'
 import { computed, defineComponent, reactive, ref, watchEffect } from 'vue'
 import { RouterLink } from 'vue-router'
 import { toast } from 'vue-sonner'
-import type { NoteModel } from '~/models/note'
-import type { TableColumns } from 'naive-ui/lib/data-table/src/interface'
-import type { PropType } from 'vue'
-
-import { useMutation, useQueryClient } from '@tanstack/vue-query'
-import { debouncedRef } from '@vueuse/core'
 
 import { notesApi } from '~/api/notes'
 import { searchApi } from '~/api/search'
@@ -33,12 +31,24 @@ import { WEB_URL } from '~/constants/env'
 import { queryKeys } from '~/hooks/queries/keys'
 import { useDataTable } from '~/hooks/use-data-table'
 import { useStoreRef } from '~/hooks/use-store-ref'
+import type { NoteModel } from '~/models/note'
 import { UIStore } from '~/stores/ui'
 import { formatNumber } from '~/utils/number'
 
 import { HeaderActionButton } from '../../components/button/header-action-button'
 import { useLayout } from '../../layouts/content'
 
+const buildNotePublicPath = (
+  note: Pick<NoteModel, 'nid' | 'slug' | 'created'>,
+) => {
+  if (note.slug) {
+    const date = new Date(note.created)
+    return `/notes/${date.getUTCFullYear()}/${date.getUTCMonth() + 1}/${date.getUTCDate()}/${note.slug}`
+  }
+
+  return `/notes/${note.nid}`
+}
+
 const NoteItem = defineComponent({
   name: 'NoteItem',
   props: {
@@ -97,6 +107,9 @@ const NoteItem = defineComponent({
                 {row.value.location}
               </span>
             )}
+            <span class="font-mono text-xs text-neutral-400 dark:text-neutral-500">
+              {row.value.slug || '—'}
+            </span>
             <span class="flex items-center gap-0.5 text-xs text-neutral-400 dark:text-neutral-500">
               <BookIcon class="h-2.5 w-2.5" />
               {formatNumber(row.value.count?.read || 0)}
@@ -121,7 +134,7 @@ const NoteItem = defineComponent({
 
         <div class="flex shrink-0 items-center">
           <a
-            href={`${WEB_URL}/notes/${row.value.nid}`}
+            href={`${WEB_URL}${buildNotePublicPath(row.value)}`}
             target="_blank"
             rel="noopener noreferrer"
             aria-label="在新窗口打开日记"
@@ -212,7 +225,7 @@ export const ManageNoteListView = defineComponent({
           page: params.page,
           size: params.size,
           select:
-            'title _id nid id created modified mood weather publicAt bookmark coordinates location count meta isPublished',
+            'title _id nid id slug created modified mood weather publicAt bookmark coordinates location count meta isPublished',
           sortBy: params.sortBy || undefined,
           sortOrder: params.sortOrder || undefined,
           db_query: params.filters?.dbQuery,
@@ -340,7 +353,7 @@ export const ManageNoteListView = defineComponent({
                 <TableTitleLink
                   inPageTo={`/notes/edit?id=${row.id}`}
                   title={row.title}
-                  externalLinkTo={`/notes/${row.nid}`}
+                  externalLinkTo={buildNotePublicPath(row)}
                   id={row.id}
                   withToken={isUnpublished || isSecret}
                 >
@@ -382,6 +395,14 @@ export const ManageNoteListView = defineComponent({
               )
             },
           },
+          {
+            title: 'Slug',
+            key: 'slug',
+            width: 220,
+            render(row) {
+              return <span class="font-mono text-xs">{row.slug || '—'}</span>
+            },
+          },
           {
             title: '天气',
             key: 'weather',
diff --git a/src/views/manage-notes/write.tsx b/src/views/manage-notes/write.tsx
@@ -1,5 +1,7 @@
+import type { TopicModel } from '@mx-space/api-client'
 import { add } from 'date-fns'
 import { isString } from 'es-toolkit/compat'
+import type { LexicalEditor } from 'lexical'
 import {
   BookmarkIcon,
   MapPinIcon,
@@ -21,13 +23,7 @@ import {
 } from 'vue'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
-import type { TopicModel } from '@mx-space/api-client'
 import type { CreateNoteData } from '~/api/notes'
-import type { DraftModel } from '~/models/draft'
-import type { Coordinate, NoteModel } from '~/models/note'
-import type { ContentFormat, WriteBaseType } from '~/shared/types/base'
-import type { LexicalEditor } from 'lexical'
-
 import { notesApi } from '~/api/notes'
 import { topicsApi } from '~/api/topics'
 import { AiHelperButton } from '~/components/ai/ai-helper'
@@ -44,6 +40,7 @@ import {
   TextBaseDrawer,
 } from '~/components/drawer/text-base-drawer'
 import { WriteEditor } from '~/components/editor/write-editor'
+import { SlugInput } from '~/components/editor/write-editor/slug-input'
 import { GetLocationButton } from '~/components/location/get-location-button'
 import { SearchLocationButton } from '~/components/location/search-button'
 import { ParseContentButton } from '~/components/special-button/parse-content'
@@ -55,11 +52,15 @@ import { usePreferredContentFormat } from '~/hooks/use-preferred-content-format'
 import { useStoreRef } from '~/hooks/use-store-ref'
 import { useWriteDraft } from '~/hooks/use-write-draft'
 import { useLayout } from '~/layouts/content'
+import type { DraftModel } from '~/models/draft'
 import { DraftRefType } from '~/models/draft'
+import type { Coordinate, NoteModel } from '~/models/note'
+import type { ContentFormat, WriteBaseType } from '~/shared/types/base'
 import { UIStore } from '~/stores/ui'
 import { getDayOfYear } from '~/utils/time'
 
 type NoteReactiveType = {
+  slug: string
   mood: string
   weather: string
   password: string | null
@@ -84,6 +85,17 @@ const useNoteTopic = () => {
   return { topics, fetchTopic }
 }
 
+const buildNotePublicPath = (
+  note: Pick<NoteReactiveType, 'slug' | 'created'> & { nid?: number },
+) => {
+  if (note.slug) {
+    const date = note.created ? new Date(note.created) : new Date()
+    return `/notes/${date.getUTCFullYear()}/${date.getUTCMonth() + 1}/${date.getUTCDate()}/${note.slug}`
+  }
+
+  return note.nid ? `/notes/${note.nid}` : ''
+}
+
 const NoteWriteView = defineComponent(() => {
   const defaultTitle = ref('新建日记')
   const router = useRouter()
@@ -97,6 +109,7 @@ const NoteWriteView = defineComponent(() => {
   const resetReactive: () => NoteReactiveType = () => ({
     text: '',
     title: '',
+    slug: '',
     bookmark: false,
     mood: '',
     password: null,
@@ -135,6 +148,7 @@ const NoteWriteView = defineComponent(() => {
     target.meta = draft.meta
     if (draft.typeSpecificData) {
       const specific = draft.typeSpecificData
+      target.slug = specific.slug || (isPartial ? target.slug : '')
       target.mood = specific.mood || (isPartial ? target.mood : '')
       target.weather = specific.weather || (isPartial ? target.weather : '')
       target.password =
@@ -198,6 +212,7 @@ const NoteWriteView = defineComponent(() => {
         location: data.location,
         coordinates: data.coordinates,
         topicId: data.topicId,
+        slug: data.slug,
         isPublished: data.isPublished,
       },
     }),
@@ -245,6 +260,7 @@ const NoteWriteView = defineComponent(() => {
       return {
         ...toRaw(data),
         title: data.title?.trim() || defaultTitle.value,
+        slug: data.slug.trim() || undefined,
         password:
           data.password && data.password.length > 0 ? data.password : null,
         publicAt: data.publicAt
@@ -375,7 +391,7 @@ const NoteWriteView = defineComponent(() => {
         variant="note"
         subtitleSlot={() => (
           <div class="flex items-center gap-2 text-sm text-neutral-500">
-            <span>{`${WEB_URL}/notes/${nid.value ?? ''}`}</span>
+            <span>{`${WEB_URL}${buildNotePublicPath({ ...data, nid: nid.value })}`}</span>
             {data.text.length > 0 && <AiHelperButton reactiveData={data} />}
           </div>
         )}
@@ -393,6 +409,23 @@ const NoteWriteView = defineComponent(() => {
       >
         <SectionTitle icon={BookmarkIcon}>日记信息</SectionTitle>
 
+        <FormField
+          label="Slug"
+          description="用于 SEO 路径，留空则使用旧 nid 路径"
+        >
+          <SlugInput
+            prefix={`${WEB_URL}/notes/${(() => {
+              const date = data.created ? new Date(data.created) : new Date()
+              return `${date.getUTCFullYear()}/${date.getUTCMonth() + 1}/${date.getUTCDate()}/`
+            })()}`}
+            value={data.slug}
+            onChange={(value) => {
+              data.slug = value
+            }}
+            placeholder="note-slug"
+          />
+        </FormField>
+
         <div class="grid grid-cols-2 gap-3">
           <FormField label="心情" required>
             <NSelect
