From 609c6e18e29a82548d474b743e6896d4ac5b1718 Mon Sep 17 00:00:00 2001 From: seaHi Date: Thu, 24 Sep 2026 08:48:16 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=9C=A8=E6=96=87=E7=AB=A0?= =?UTF-8?q?=E4=B8=8E=E9=A1=B5=E9=9D=A2=E5=90=8E=E5=8F=B0=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E4=B8=AD=E9=9B=86=E6=88=90=E6=96=B0=E7=9A=84=E5=A4=A7=E7=BA=B2?= =?UTF-8?q?=E4=B8=8E=E5=86=85=E5=AE=B9=E7=BC=96=E8=BE=91=E5=99=A8=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/admin/pages/[id]/+page.svelte | 48 +++++++----------------- src/routes/admin/pages/new/+page.svelte | 48 +++++++----------------- src/routes/admin/posts/[id]/+page.svelte | 48 +++++++----------------- src/routes/admin/posts/new/+page.svelte | 48 +++++++----------------- 4 files changed, 56 insertions(+), 136 deletions(-) diff --git a/src/routes/admin/pages/[id]/+page.svelte b/src/routes/admin/pages/[id]/+page.svelte index 4c7c709..557ee00 100644 --- a/src/routes/admin/pages/[id]/+page.svelte +++ b/src/routes/admin/pages/[id]/+page.svelte @@ -2,12 +2,12 @@ import { resolve } from '$app/paths'; import { page } from '$app/stores'; import type { PageData, ActionData } from './$types'; - import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte'; - import MarkdownEditor from '$lib/components/admin/MarkdownEditor.svelte'; + import ContentEditor from '$lib/components/admin/ContentEditor.svelte'; + import { EditorOutline } from '$lib/editor/outline.svelte'; import TextInput from '$lib/components/admin/TextInput.svelte'; import Button from '$lib/components/admin/Button.svelte'; import Alert from '$lib/components/admin/Alert.svelte'; - import Tabs from '$lib/components/admin/Tabs.svelte'; + import EditorSidebarTabs from '$lib/components/admin/EditorSidebarTabs.svelte'; import ArticleAttachments from '$lib/components/admin/ArticleAttachments.svelte'; import { untrack } from 'svelte'; import { ArrowLeft } from 'lucide-svelte'; @@ -20,6 +20,7 @@ let content = $state(initialData.page.content); let mode = $state<'edit' | 'preview'>('edit'); + const outline = new EditorOutline(); let sidebarTab = $state('settings'); let sessionUploads = $state<{ url: string; key: string; filename: string }[]>([]); @@ -76,30 +77,18 @@
- {#if mode === 'edit'} - (sessionUploads = [...sessionUploads, img])} - /> - {:else} -
- -
- {/if} + (sessionUploads = [...sessionUploads, img])} + />
- +
@@ -183,23 +172,15 @@ background: rgba(65, 155, 56, 0.1); } - .preview-area { - padding: 20px; - border: 1px solid rgba(0, 0, 0, 0.12); - background: rgba(0, 0, 0, 0.015); - min-height: 400px; - max-height: 600px; - overflow-y: auto; - } - .form-grid { display: grid; - grid-template-columns: 1fr 280px; + grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; } .form-main { + min-width: 0; width: 100%; } @@ -230,8 +211,7 @@ .form-sidebar { position: static; - flex-direction: row; - flex-wrap: wrap; + flex-direction: column; gap: 20px; margin-top: 20px; } diff --git a/src/routes/admin/pages/new/+page.svelte b/src/routes/admin/pages/new/+page.svelte index 5f10358..2641a06 100644 --- a/src/routes/admin/pages/new/+page.svelte +++ b/src/routes/admin/pages/new/+page.svelte @@ -2,12 +2,12 @@ import { resolve } from '$app/paths'; import { page } from '$app/stores'; import type { ActionData } from './$types'; - import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte'; - import MarkdownEditor from '$lib/components/admin/MarkdownEditor.svelte'; + import ContentEditor from '$lib/components/admin/ContentEditor.svelte'; + import { EditorOutline } from '$lib/editor/outline.svelte'; import TextInput from '$lib/components/admin/TextInput.svelte'; import Button from '$lib/components/admin/Button.svelte'; import Alert from '$lib/components/admin/Alert.svelte'; - import Tabs from '$lib/components/admin/Tabs.svelte'; + import EditorSidebarTabs from '$lib/components/admin/EditorSidebarTabs.svelte'; import ArticleAttachments from '$lib/components/admin/ArticleAttachments.svelte'; import { createSlugAutoHandler } from '$lib/utils/slugify'; @@ -22,6 +22,7 @@ let isSlugUserModified = $state(false); let isGenerating = $state(false); + const outline = new EditorOutline(); let sidebarTab = $state('settings'); let sessionUploads = $state<{ url: string; key: string; filename: string }[]>([]); @@ -92,30 +93,18 @@
- {#if mode === 'edit'} - (sessionUploads = [...sessionUploads, img])} - /> - {:else} -
- -
- {/if} + (sessionUploads = [...sessionUploads, img])} + />
- +
@@ -210,23 +199,15 @@ background: rgba(65, 155, 56, 0.1); } - .preview-area { - padding: 20px; - border: 1px solid rgba(0, 0, 0, 0.12); - background: rgba(0, 0, 0, 0.015); - min-height: 400px; - max-height: 600px; - overflow-y: auto; - } - .form-grid { display: grid; - grid-template-columns: 1fr 280px; + grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; } .form-main { + min-width: 0; width: 100%; } @@ -257,8 +238,7 @@ .form-sidebar { position: static; - flex-direction: row; - flex-wrap: wrap; + flex-direction: column; gap: 20px; margin-top: 20px; } diff --git a/src/routes/admin/posts/[id]/+page.svelte b/src/routes/admin/posts/[id]/+page.svelte index af59b45..adde337 100644 --- a/src/routes/admin/posts/[id]/+page.svelte +++ b/src/routes/admin/posts/[id]/+page.svelte @@ -5,14 +5,14 @@ import type { PageData, ActionData } from './$types'; import { deserialize } from '$app/forms'; import { Save, X } from 'lucide-svelte'; - import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte'; - import MarkdownEditor from '$lib/components/admin/MarkdownEditor.svelte'; + import ContentEditor from '$lib/components/admin/ContentEditor.svelte'; + import { EditorOutline } from '$lib/editor/outline.svelte'; import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte'; import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte'; import TextInput from '$lib/components/admin/TextInput.svelte'; import Button from '$lib/components/admin/Button.svelte'; import Alert from '$lib/components/admin/Alert.svelte'; - import Tabs from '$lib/components/admin/Tabs.svelte'; + import EditorSidebarTabs from '$lib/components/admin/EditorSidebarTabs.svelte'; import ArticleAttachments from '$lib/components/admin/ArticleAttachments.svelte'; import { untrack } from 'svelte'; @@ -33,6 +33,7 @@ let tagsList = $state(initialData.tags || []); let seriesList = $state(initialData.series || []); + const outline = new EditorOutline(); let sidebarTab = $state('settings'); let sessionUploads = $state<{ url: string; key: string; filename: string }[]>([]); @@ -166,30 +167,18 @@
- {#if mode === 'edit'} - (sessionUploads = [...sessionUploads, img])} - /> - {:else} -
- -
- {/if} + (sessionUploads = [...sessionUploads, img])} + />
- +
@@ -378,23 +367,15 @@ background: rgba(65, 155, 56, 0.1); } - .preview-area { - padding: 20px; - border: 1px solid rgba(0, 0, 0, 0.12); - background: rgba(0, 0, 0, 0.015); - min-height: 400px; - max-height: 600px; - overflow-y: auto; - } - .form-grid { display: grid; - grid-template-columns: 1fr 280px; + grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; } .form-main { + min-width: 0; width: 100%; } @@ -425,8 +406,7 @@ .form-sidebar { position: static; - flex-direction: row; - flex-wrap: wrap; + flex-direction: column; gap: 16px; margin-top: 20px; } diff --git a/src/routes/admin/posts/new/+page.svelte b/src/routes/admin/posts/new/+page.svelte index 0c28015..8c0723b 100644 --- a/src/routes/admin/posts/new/+page.svelte +++ b/src/routes/admin/posts/new/+page.svelte @@ -6,14 +6,14 @@ import type { PageData, ActionData } from './$types'; import { deserialize } from '$app/forms'; import { ArrowLeft, X } from 'lucide-svelte'; - import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte'; - import MarkdownEditor from '$lib/components/admin/MarkdownEditor.svelte'; + import ContentEditor from '$lib/components/admin/ContentEditor.svelte'; + import { EditorOutline } from '$lib/editor/outline.svelte'; import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte'; import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte'; import TextInput from '$lib/components/admin/TextInput.svelte'; import Button from '$lib/components/admin/Button.svelte'; import Alert from '$lib/components/admin/Alert.svelte'; - import Tabs from '$lib/components/admin/Tabs.svelte'; + import EditorSidebarTabs from '$lib/components/admin/EditorSidebarTabs.svelte'; import ArticleAttachments from '$lib/components/admin/ArticleAttachments.svelte'; import { untrack } from 'svelte'; @@ -47,6 +47,7 @@ setIsGenerating: (val) => (isGenerating = val) }); + const outline = new EditorOutline(); let sidebarTab = $state('settings'); let sessionUploads = $state<{ url: string; key: string; filename: string }[]>([]); @@ -185,30 +186,18 @@
- {#if mode === 'edit'} - (sessionUploads = [...sessionUploads, img])} - /> - {:else} -
- -
- {/if} + (sessionUploads = [...sessionUploads, img])} + />
- +
@@ -397,23 +386,15 @@ background: rgba(65, 155, 56, 0.1); } - .preview-area { - padding: 20px; - border: 1px solid rgba(0, 0, 0, 0.12); - background: rgba(0, 0, 0, 0.015); - min-height: 400px; - max-height: 600px; - overflow-y: auto; - } - .form-grid { display: grid; - grid-template-columns: 1fr 280px; + grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; } .form-main { + min-width: 0; width: 100%; } @@ -444,8 +425,7 @@ .form-sidebar { position: static; - flex-direction: row; - flex-wrap: wrap; + flex-direction: column; gap: 16px; margin-top: 20px; }