fix: optimize mobile header layout for write views

Hide ParseContentButton and HeaderPreviewButton on mobile to prevent
text wrapping. Add whitespace-nowrap to DraftSaveIndicator and truncate
support to header subtitle container.

Author: Innei

src/components/draft/draft-save-indicator.tsx

@@ -98,7 +98,7 @@ export const DraftSaveIndicator = defineComponent({
       const isSaving = props.isSaving.value
 
       return (
-        <div class="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400">
+        <div class="flex items-center gap-1.5 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-400">
           {isSaving ? (
             <>
               <LoaderIcon size={14} class="animate-spin" />

src/layouts/content/index.tsx

@@ -127,11 +127,11 @@ export const ContentLayout = defineComponent({
               headerClassName.value,
             ]}
           >
-            <div class="flex items-center gap-3">
+            <div class="flex min-w-0 items-center gap-3">
               {/* 展开 Sidebar / 打开菜单 按钮 */}
               {(isMobile.value || ui.sidebarCollapse.value) && (
                 <button
-                  class="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--sidebar-text)] transition-colors hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-text-active)]"
+                  class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-[var(--sidebar-text)] transition-colors hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-text-active)]"
                   onClick={() => (ui.sidebarCollapse.value = false)}
                   title={isMobile.value ? '打开菜单' : '展开侧边栏 (⌘B)'}
                 >
@@ -142,17 +142,17 @@ export const ContentLayout = defineComponent({
                   )}
                 </button>
               )}
-              <h1 class="text-lg font-semibold text-[var(--sidebar-text-active)]">
+              <h1 class="shrink-0 text-lg font-semibold text-[var(--sidebar-text-active)]">
                 {pageTitle.value}
               </h1>
               {/* Header 副标题/元信息 */}
               {headerSubtitle.value && (
-                <div class="ml-2 border-l border-neutral-200 pl-3 dark:border-neutral-700">
+                <div class="ml-2 min-w-0 truncate border-l border-neutral-200 pl-3 dark:border-neutral-700">
                   {headerSubtitle.value}
                 </div>
               )}
             </div>
-            <div class="flex items-center gap-1.5">
+            <div class="flex shrink-0 items-center gap-1.5">
               {headerActions.value ?? slots.actions?.()}
             </div>
           </header>

src/views/manage-notes/write.tsx

@@ -49,9 +49,11 @@ import { WEB_URL } from '~/constants/env'
 import { MOOD_SET, WEATHER_SET } from '~/constants/note'
 import { useParsePayloadIntoData } from '~/hooks/use-parse-payload'
 import { useS3Upload } from '~/hooks/use-s3-upload'
+import { useStoreRef } from '~/hooks/use-store-ref'
 import { useWriteDraft } from '~/hooks/use-write-draft'
 import { useLayout } from '~/layouts/content'
 import { DraftRefType } from '~/models/draft'
+import { UIStore } from '~/stores/ui'
 import { getDayOfYear } from '~/utils/time'
 
 type NoteReactiveType = {
@@ -80,6 +82,10 @@ const useNoteTopic = () => {
 const NoteWriteView = defineComponent(() => {
   const defaultTitle = ref('新建日记')
   const router = useRouter()
+  const uiStore = useStoreRef(UIStore)
+  const isMobile = computed(
+    () => uiStore.viewport.value.mobile || uiStore.viewport.value.pad,
+  )
 
   const resetReactive: () => NoteReactiveType = () => ({
     text: '',
@@ -297,17 +303,19 @@ const NoteWriteView = defineComponent(() => {
 
   setActions(
     <>
-      <ParseContentButton
-        data={data}
-        onHandleYamlParsedMeta={(meta) => {
-          const { title, mood, weather, ...rest } = meta
-          data.title = title ?? data.title
-          data.mood = mood ?? data.mood
-          data.weather = weather ?? data.weather
-          data.meta = { ...rest }
-        }}
-      />
-      <HeaderPreviewButton data={data} iframe />
+      {!isMobile.value && (
+        <ParseContentButton
+          data={data}
+          onHandleYamlParsedMeta={(meta) => {
+            const { title, mood, weather, ...rest } = meta
+            data.title = title ?? data.title
+            data.mood = mood ?? data.mood
+            data.weather = weather ?? data.weather
+            data.meta = { ...rest }
+          }}
+        />
+      )}
+      {!isMobile.value && <HeaderPreviewButton data={data} iframe />}
       <HeaderActionButton
         icon={<SlidersHIcon />}
         name="日记设置"

src/views/manage-pages/write.tsx

@@ -38,10 +38,12 @@ import { HeaderPreviewButton } from '~/components/special-button/preview'
 import { WEB_URL } from '~/constants/env'
 import { useParsePayloadIntoData } from '~/hooks/use-parse-payload'
 import { useS3Upload } from '~/hooks/use-s3-upload'
+import { useStoreRef } from '~/hooks/use-store-ref'
 import { useWriteDraft } from '~/hooks/use-write-draft'
 import { useLayout } from '~/layouts/content'
 import { DraftRefType } from '~/models/draft'
 import { RouteName } from '~/router/name'
+import { UIStore } from '~/stores/ui'
 
 type PageReactiveType = WriteBaseType & {
   subtitle: string
@@ -50,6 +52,11 @@ type PageReactiveType = WriteBaseType & {
 }
 
 const PageWriteView = defineComponent(() => {
+  const uiStore = useStoreRef(UIStore)
+  const isMobile = computed(
+    () => uiStore.viewport.value.mobile || uiStore.viewport.value.pad,
+  )
+
   const {
     setTitle,
     setHeaderClass,
@@ -213,17 +220,19 @@ const PageWriteView = defineComponent(() => {
 
   setActions(
     <>
-      <ParseContentButton
-        data={data}
-        onHandleYamlParsedMeta={(meta) => {
-          const { title, slug, subtitle, ...rest } = meta
-          data.title = title ?? data.title
-          data.slug = slug ?? data.slug
-          data.subtitle = subtitle ?? data.subtitle
-          data.meta = { ...rest }
-        }}
-      />
-      <HeaderPreviewButton iframe data={data} />
+      {!isMobile.value && (
+        <ParseContentButton
+          data={data}
+          onHandleYamlParsedMeta={(meta) => {
+            const { title, slug, subtitle, ...rest } = meta
+            data.title = title ?? data.title
+            data.slug = slug ?? data.slug
+            data.subtitle = subtitle ?? data.subtitle
+            data.meta = { ...rest }
+          }}
+        />
+      )}
+      {!isMobile.value && <HeaderPreviewButton iframe data={data} />}
       <HeaderActionButton
         icon={<SlidersHIcon />}
         name="页面设置"

src/views/manage-posts/write.tsx

@@ -47,6 +47,7 @@ import { useWriteDraft } from '~/hooks/use-write-draft'
 import { useLayout } from '~/layouts/content'
 import { DraftRefType } from '~/models/draft'
 import { CategoryStore } from '~/stores/category'
+import { UIStore } from '~/stores/ui'
 
 import { useMemoPostList } from './hooks/use-memo-post-list'
 
@@ -74,6 +75,10 @@ const PostWriteView = defineComponent(() => {
   setContentPadding(false)
 
   const categoryStore = useStoreRef(CategoryStore)
+  const uiStore = useStoreRef(UIStore)
+  const isMobile = computed(
+    () => uiStore.viewport.value.mobile || uiStore.viewport.value.pad,
+  )
   onMounted(async () => {
     await categoryStore.fetch()
   })
@@ -272,16 +277,18 @@ const PostWriteView = defineComponent(() => {
 
     setActions(
       <>
-        <ParseContentButton
-          data={data}
-          onHandleYamlParsedMeta={(meta) => {
-            const { title, slug, ...rest } = meta
-            data.title = title ?? data.title
-            data.slug = slug ?? data.slug
-            data.meta = { ...rest }
-          }}
-        />
-        <HeaderPreviewButton iframe data={data} />
+        {!isMobile.value && (
+          <ParseContentButton
+            data={data}
+            onHandleYamlParsedMeta={(meta) => {
+              const { title, slug, ...rest } = meta
+              data.title = title ?? data.title
+              data.slug = slug ?? data.slug
+              data.meta = { ...rest }
+            }}
+          />
+        )}
+        {!isMobile.value && <HeaderPreviewButton iframe data={data} />}
         <HeaderActionButton
           icon={<SlidersHIcon />}
           name="文章设置"