Skip to content

Commit 807e74a

Browse files
committed
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.
1 parent fd95b5c commit 807e74a

5 files changed

Lines changed: 62 additions & 38 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export const DraftSaveIndicator = defineComponent({
9898
const isSaving = props.isSaving.value
9999

100100
return (
101-
<div class="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400">
101+
<div class="flex items-center gap-1.5 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-400">
102102
{isSaving ? (
103103
<>
104104
<LoaderIcon size={14} class="animate-spin" />

src/layouts/content/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -127,11 +127,11 @@ export const ContentLayout = defineComponent({
127127
headerClassName.value,
128128
]}
129129
>
130-
<div class="flex items-center gap-3">
130+
<div class="flex min-w-0 items-center gap-3">
131131
{/* 展开 Sidebar / 打开菜单 按钮 */}
132132
{(isMobile.value || ui.sidebarCollapse.value) && (
133133
<button
134-
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)]"
134+
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)]"
135135
onClick={() => (ui.sidebarCollapse.value = false)}
136136
title={isMobile.value ? '打开菜单' : '展开侧边栏 (⌘B)'}
137137
>
@@ -142,17 +142,17 @@ export const ContentLayout = defineComponent({
142142
)}
143143
</button>
144144
)}
145-
<h1 class="text-lg font-semibold text-[var(--sidebar-text-active)]">
145+
<h1 class="shrink-0 text-lg font-semibold text-[var(--sidebar-text-active)]">
146146
{pageTitle.value}
147147
</h1>
148148
{/* Header 副标题/元信息 */}
149149
{headerSubtitle.value && (
150-
<div class="ml-2 border-l border-neutral-200 pl-3 dark:border-neutral-700">
150+
<div class="ml-2 min-w-0 truncate border-l border-neutral-200 pl-3 dark:border-neutral-700">
151151
{headerSubtitle.value}
152152
</div>
153153
)}
154154
</div>
155-
<div class="flex items-center gap-1.5">
155+
<div class="flex shrink-0 items-center gap-1.5">
156156
{headerActions.value ?? slots.actions?.()}
157157
</div>
158158
</header>

src/views/manage-notes/write.tsx

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,11 @@ import { WEB_URL } from '~/constants/env'
4949
import { MOOD_SET, WEATHER_SET } from '~/constants/note'
5050
import { useParsePayloadIntoData } from '~/hooks/use-parse-payload'
5151
import { useS3Upload } from '~/hooks/use-s3-upload'
52+
import { useStoreRef } from '~/hooks/use-store-ref'
5253
import { useWriteDraft } from '~/hooks/use-write-draft'
5354
import { useLayout } from '~/layouts/content'
5455
import { DraftRefType } from '~/models/draft'
56+
import { UIStore } from '~/stores/ui'
5557
import { getDayOfYear } from '~/utils/time'
5658

5759
type NoteReactiveType = {
@@ -80,6 +82,10 @@ const useNoteTopic = () => {
8082
const NoteWriteView = defineComponent(() => {
8183
const defaultTitle = ref('新建日记')
8284
const router = useRouter()
85+
const uiStore = useStoreRef(UIStore)
86+
const isMobile = computed(
87+
() => uiStore.viewport.value.mobile || uiStore.viewport.value.pad,
88+
)
8389

8490
const resetReactive: () => NoteReactiveType = () => ({
8591
text: '',
@@ -297,17 +303,19 @@ const NoteWriteView = defineComponent(() => {
297303

298304
setActions(
299305
<>
300-
<ParseContentButton
301-
data={data}
302-
onHandleYamlParsedMeta={(meta) => {
303-
const { title, mood, weather, ...rest } = meta
304-
data.title = title ?? data.title
305-
data.mood = mood ?? data.mood
306-
data.weather = weather ?? data.weather
307-
data.meta = { ...rest }
308-
}}
309-
/>
310-
<HeaderPreviewButton data={data} iframe />
306+
{!isMobile.value && (
307+
<ParseContentButton
308+
data={data}
309+
onHandleYamlParsedMeta={(meta) => {
310+
const { title, mood, weather, ...rest } = meta
311+
data.title = title ?? data.title
312+
data.mood = mood ?? data.mood
313+
data.weather = weather ?? data.weather
314+
data.meta = { ...rest }
315+
}}
316+
/>
317+
)}
318+
{!isMobile.value && <HeaderPreviewButton data={data} iframe />}
311319
<HeaderActionButton
312320
icon={<SlidersHIcon />}
313321
name="日记设置"

src/views/manage-pages/write.tsx

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,12 @@ import { HeaderPreviewButton } from '~/components/special-button/preview'
3838
import { WEB_URL } from '~/constants/env'
3939
import { useParsePayloadIntoData } from '~/hooks/use-parse-payload'
4040
import { useS3Upload } from '~/hooks/use-s3-upload'
41+
import { useStoreRef } from '~/hooks/use-store-ref'
4142
import { useWriteDraft } from '~/hooks/use-write-draft'
4243
import { useLayout } from '~/layouts/content'
4344
import { DraftRefType } from '~/models/draft'
4445
import { RouteName } from '~/router/name'
46+
import { UIStore } from '~/stores/ui'
4547

4648
type PageReactiveType = WriteBaseType & {
4749
subtitle: string
@@ -50,6 +52,11 @@ type PageReactiveType = WriteBaseType & {
5052
}
5153

5254
const PageWriteView = defineComponent(() => {
55+
const uiStore = useStoreRef(UIStore)
56+
const isMobile = computed(
57+
() => uiStore.viewport.value.mobile || uiStore.viewport.value.pad,
58+
)
59+
5360
const {
5461
setTitle,
5562
setHeaderClass,
@@ -213,17 +220,19 @@ const PageWriteView = defineComponent(() => {
213220

214221
setActions(
215222
<>
216-
<ParseContentButton
217-
data={data}
218-
onHandleYamlParsedMeta={(meta) => {
219-
const { title, slug, subtitle, ...rest } = meta
220-
data.title = title ?? data.title
221-
data.slug = slug ?? data.slug
222-
data.subtitle = subtitle ?? data.subtitle
223-
data.meta = { ...rest }
224-
}}
225-
/>
226-
<HeaderPreviewButton iframe data={data} />
223+
{!isMobile.value && (
224+
<ParseContentButton
225+
data={data}
226+
onHandleYamlParsedMeta={(meta) => {
227+
const { title, slug, subtitle, ...rest } = meta
228+
data.title = title ?? data.title
229+
data.slug = slug ?? data.slug
230+
data.subtitle = subtitle ?? data.subtitle
231+
data.meta = { ...rest }
232+
}}
233+
/>
234+
)}
235+
{!isMobile.value && <HeaderPreviewButton iframe data={data} />}
227236
<HeaderActionButton
228237
icon={<SlidersHIcon />}
229238
name="页面设置"

src/views/manage-posts/write.tsx

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ import { useWriteDraft } from '~/hooks/use-write-draft'
4747
import { useLayout } from '~/layouts/content'
4848
import { DraftRefType } from '~/models/draft'
4949
import { CategoryStore } from '~/stores/category'
50+
import { UIStore } from '~/stores/ui'
5051

5152
import { useMemoPostList } from './hooks/use-memo-post-list'
5253

@@ -74,6 +75,10 @@ const PostWriteView = defineComponent(() => {
7475
setContentPadding(false)
7576

7677
const categoryStore = useStoreRef(CategoryStore)
78+
const uiStore = useStoreRef(UIStore)
79+
const isMobile = computed(
80+
() => uiStore.viewport.value.mobile || uiStore.viewport.value.pad,
81+
)
7782
onMounted(async () => {
7883
await categoryStore.fetch()
7984
})
@@ -272,16 +277,18 @@ const PostWriteView = defineComponent(() => {
272277

273278
setActions(
274279
<>
275-
<ParseContentButton
276-
data={data}
277-
onHandleYamlParsedMeta={(meta) => {
278-
const { title, slug, ...rest } = meta
279-
data.title = title ?? data.title
280-
data.slug = slug ?? data.slug
281-
data.meta = { ...rest }
282-
}}
283-
/>
284-
<HeaderPreviewButton iframe data={data} />
280+
{!isMobile.value && (
281+
<ParseContentButton
282+
data={data}
283+
onHandleYamlParsedMeta={(meta) => {
284+
const { title, slug, ...rest } = meta
285+
data.title = title ?? data.title
286+
data.slug = slug ?? data.slug
287+
data.meta = { ...rest }
288+
}}
289+
/>
290+
)}
291+
{!isMobile.value && <HeaderPreviewButton iframe data={data} />}
285292
<HeaderActionButton
286293
icon={<SlidersHIcon />}
287294
name="文章设置"

0 commit comments

Comments
 (0)