From 45fe86cbbbdc122218b3821d64b35afaac161b69 Mon Sep 17 00:00:00 2001 From: seaHi Date: Sat, 15 Aug 2026 14:50:25 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=E9=80=9A?= =?UTF-8?q?=E7=94=A8=E7=9A=84=20TextInput=20=E8=BE=93=E5=85=A5=E6=A1=86?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B9=B6=E5=9C=A8=E5=90=8E=E5=8F=B0=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E4=B8=AD=E7=BB=9F=E4=B8=80=E6=9B=BF=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/components/admin/TextInput.svelte | 76 +++++++++++++++++++++++ src/routes/admin/categories/+page.svelte | 54 +++------------- src/routes/admin/pages/[id]/+page.svelte | 27 ++------ src/routes/admin/pages/new/+page.svelte | 27 ++------ src/routes/admin/posts/[id]/+page.svelte | 41 +++--------- src/routes/admin/posts/new/+page.svelte | 41 +++--------- src/routes/admin/series/+page.svelte | 54 +++------------- src/routes/admin/settings/+page.svelte | 33 +++------- src/routes/admin/tags/+page.svelte | 47 ++------------ 9 files changed, 136 insertions(+), 264 deletions(-) create mode 100644 src/lib/components/admin/TextInput.svelte diff --git a/src/lib/components/admin/TextInput.svelte b/src/lib/components/admin/TextInput.svelte new file mode 100644 index 0000000..4d07f96 --- /dev/null +++ b/src/lib/components/admin/TextInput.svelte @@ -0,0 +1,76 @@ + + + + + diff --git a/src/routes/admin/categories/+page.svelte b/src/routes/admin/categories/+page.svelte index 070edeb..3ee2183 100644 --- a/src/routes/admin/categories/+page.svelte +++ b/src/routes/admin/categories/+page.svelte @@ -3,6 +3,7 @@ import type { PageData, ActionData } from './$types'; import { createSlugAutoHandler } from '$lib/utils/slugify'; import { confirmState } from '$lib/stores/confirm.svelte'; + import TextInput from '$lib/components/admin/TextInput.svelte'; let { data, form }: { data: PageData; form: ActionData } = $props(); @@ -47,7 +48,7 @@
-
@@ -72,13 +74,14 @@ {isGenerating ? '正在生成...' : '重新生成'} -
@@ -108,13 +111,13 @@ {category.id} {#if editingId === category.id} - {:else} {category.name} @@ -122,13 +125,13 @@ {#if editingId === category.id} - {:else} {category.slug} @@ -261,24 +264,6 @@ letter-spacing: 0.5px; } - .form-group input[type='text'] { - width: 100%; - padding: 10px 0; - border: none; - border-bottom: 2px solid rgba(0, 0, 0, 0.1); - background: transparent; - font-family: inherit; - font-size: 1.05rem; - color: var(--text-color); - box-sizing: border-box; - transition: border-bottom-color 0.3s ease; - } - - .form-group input[type='text']:focus { - outline: none; - border-bottom-color: var(--accent-color, #419b38); - } - .btn { display: inline-block; width: 100%; @@ -384,25 +369,4 @@ text-align: center; color: var(--text-muted, rgba(0, 0, 0, 0.6)); } - - .edit-input { - width: 100%; - padding: 8px 10px; - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 0; - background: rgba(0, 0, 0, 0.015); - font-family: inherit; - font-size: 0.95rem; - color: var(--text-color); - box-sizing: border-box; - transition: - border-color 0.3s ease, - box-shadow 0.3s ease; - } - - .edit-input:focus { - outline: none; - border-color: var(--accent-color, #419b38); - box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08); - } diff --git a/src/routes/admin/pages/[id]/+page.svelte b/src/routes/admin/pages/[id]/+page.svelte index 6e432ae..5243ab8 100644 --- a/src/routes/admin/pages/[id]/+page.svelte +++ b/src/routes/admin/pages/[id]/+page.svelte @@ -3,6 +3,7 @@ import { page } from '$app/stores'; import type { PageData, ActionData } from './$types'; import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte'; + import TextInput from '$lib/components/admin/TextInput.svelte'; import { untrack } from 'svelte'; let { data, form }: { data: PageData; form: ActionData } = $props(); @@ -38,7 +39,7 @@
-

别名 *

-
@@ -260,7 +261,6 @@ letter-spacing: 0.5px; } - .form-group input[type='text'], .form-group textarea { width: 100%; padding: 12px 14px; @@ -282,31 +282,12 @@ min-height: 120px; } - .form-group input[type='text']:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-color, #419b38); box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08); } - .sidebar-input:focus { - outline: none; - border-bottom-color: var(--accent-color, #419b38); - } - - .sidebar-input { - width: 100%; - padding: 10px 0; - border: none; - border-bottom: 2px solid rgba(0, 0, 0, 0.1); - background: transparent; - font-family: inherit; - font-size: 1rem; - color: var(--text-color); - box-sizing: border-box; - transition: border-bottom-color 0.3s ease; - } - .sidebar-box { background: transparent; border: none; diff --git a/src/routes/admin/pages/new/+page.svelte b/src/routes/admin/pages/new/+page.svelte index 8abae8c..5c36797 100644 --- a/src/routes/admin/pages/new/+page.svelte +++ b/src/routes/admin/pages/new/+page.svelte @@ -3,6 +3,7 @@ import { page } from '$app/stores'; import type { ActionData } from './$types'; import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte'; + import TextInput from '$lib/components/admin/TextInput.svelte'; import { createSlugAutoHandler } from '$lib/utils/slugify'; @@ -48,7 +49,7 @@
- -
@@ -277,7 +278,6 @@ letter-spacing: 0.5px; } - .form-group input[type='text'], .form-group textarea { width: 100%; padding: 12px 14px; @@ -299,31 +299,12 @@ min-height: 120px; } - .form-group input[type='text']:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-color, #419b38); box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08); } - .sidebar-input:focus { - outline: none; - border-bottom-color: var(--accent-color, #419b38); - } - - .sidebar-input { - width: 100%; - padding: 10px 0; - border: none; - border-bottom: 2px solid rgba(0, 0, 0, 0.1); - background: transparent; - font-family: inherit; - font-size: 1rem; - color: var(--text-color); - box-sizing: border-box; - transition: border-bottom-color 0.3s ease; - } - .sidebar-box { background: transparent; border: none; diff --git a/src/routes/admin/posts/[id]/+page.svelte b/src/routes/admin/posts/[id]/+page.svelte index da5d8a7..5bbfaee 100644 --- a/src/routes/admin/posts/[id]/+page.svelte +++ b/src/routes/admin/posts/[id]/+page.svelte @@ -9,6 +9,7 @@ import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte'; import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte'; import { parseHugoMarkdown } from '$lib/hugoParser'; + import TextInput from '$lib/components/admin/TextInput.svelte'; import { untrack } from 'svelte'; let { data, form }: { data: PageData; form: ActionData } = $props(); @@ -289,7 +290,7 @@
-

别名 *

-
@@ -526,14 +527,15 @@ options={seriesList.map((series) => ({ value: series.id, label: series.name }))} bind:value={selectedSeriesId} /> -
@@ -570,9 +572,9 @@
- setTimeout(() => (showTagDropdown = false), 200)} disabled={isAddingTag} autocomplete="off" + variant="underline" /> {#if showTagDropdown && filteredTags.length > 0} @@ -774,7 +777,6 @@ text-transform: uppercase; } - .form-group input[type='text'], .form-group textarea { width: 100%; padding: 12px 14px; @@ -796,31 +798,12 @@ min-height: 120px; } - .form-group input[type='text']:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-color, #419b38); box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08); } - .sidebar-input:focus { - outline: none; - border-bottom-color: var(--accent-color, #419b38); - } - - .sidebar-input { - width: 100%; - padding: 10px 0; - border: none; - border-bottom: 2px solid rgba(0, 0, 0, 0.1); - background: transparent; - font-family: inherit; - font-size: 1rem; - color: var(--text-color); - box-sizing: border-box; - transition: border-bottom-color 0.3s ease; - } - .form-group textarea:focus { outline: none; border-color: var(--accent-color, #419b38); @@ -844,10 +827,6 @@ border-bottom: none; } - .series-weight-input { - margin-top: 10px; - } - .selected-tags-vertical { display: flex; flex-direction: column; diff --git a/src/routes/admin/posts/new/+page.svelte b/src/routes/admin/posts/new/+page.svelte index 9f212ea..4c316f4 100644 --- a/src/routes/admin/posts/new/+page.svelte +++ b/src/routes/admin/posts/new/+page.svelte @@ -9,6 +9,7 @@ import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte'; import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte'; import { parseHugoMarkdown } from '$lib/hugoParser'; + import TextInput from '$lib/components/admin/TextInput.svelte'; import { untrack } from 'svelte'; import { createSlugAutoHandler } from '$lib/utils/slugify'; @@ -306,7 +307,7 @@
- -
@@ -557,14 +558,15 @@ options={seriesList.map((series) => ({ value: series.id, label: series.name }))} bind:value={selectedSeriesId} /> -
@@ -601,9 +603,9 @@
- setTimeout(() => (showTagDropdown = false), 200)} disabled={isAddingTag} autocomplete="off" + variant="underline" /> {#if showTagDropdown && filteredTags.length > 0} @@ -805,7 +808,6 @@ text-transform: uppercase; } - .form-group input[type='text'], .form-group textarea { width: 100%; padding: 12px 14px; @@ -827,31 +829,12 @@ min-height: 120px; } - .form-group input[type='text']:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-color, #419b38); box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08); } - .sidebar-input:focus { - outline: none; - border-bottom-color: var(--accent-color, #419b38); - } - - .sidebar-input { - width: 100%; - padding: 10px 0; - border: none; - border-bottom: 2px solid rgba(0, 0, 0, 0.1); - background: transparent; - font-family: inherit; - font-size: 1rem; - color: var(--text-color); - box-sizing: border-box; - transition: border-bottom-color 0.3s ease; - } - .form-group textarea:focus { outline: none; border-color: var(--accent-color, #419b38); @@ -875,10 +858,6 @@ border-bottom: none; } - .series-weight-input { - margin-top: 10px; - } - .selected-tags-vertical { display: flex; flex-direction: column; diff --git a/src/routes/admin/series/+page.svelte b/src/routes/admin/series/+page.svelte index f582459..e056dee 100644 --- a/src/routes/admin/series/+page.svelte +++ b/src/routes/admin/series/+page.svelte @@ -3,6 +3,7 @@ import type { ActionData, PageData } from './$types'; import { createSlugAutoHandler } from '$lib/utils/slugify'; import { confirmState } from '$lib/stores/confirm.svelte'; + import TextInput from '$lib/components/admin/TextInput.svelte'; let { data, form }: { data: PageData; form: ActionData } = $props(); let name = $state(''); @@ -43,13 +44,14 @@
-
@@ -68,13 +70,14 @@ {isGenerating ? '正在生成...' : '重新生成'} -
@@ -103,13 +106,13 @@ {item.id} {#if editingId === item.id} - {:else} {item.name} @@ -117,13 +120,13 @@ {#if editingId === item.id} - {:else} {item.slug} @@ -251,24 +254,6 @@ letter-spacing: 0.5px; } - .form-group input[type='text'] { - width: 100%; - padding: 10px 0; - border: none; - border-bottom: 2px solid rgba(0, 0, 0, 0.1); - background: transparent; - font-family: inherit; - font-size: 1.05rem; - color: var(--text-color); - box-sizing: border-box; - transition: border-bottom-color 0.3s ease; - } - - .form-group input[type='text']:focus { - outline: none; - border-bottom-color: var(--accent-color, #419b38); - } - .btn { display: inline-block; width: 100%; @@ -374,25 +359,4 @@ text-align: center; color: var(--text-muted, rgba(0, 0, 0, 0.6)); } - - .edit-input { - width: 100%; - padding: 8px 10px; - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 0; - background: rgba(0, 0, 0, 0.015); - font-family: inherit; - font-size: 0.95rem; - color: var(--text-color); - box-sizing: border-box; - transition: - border-color 0.3s ease, - box-shadow 0.3s ease; - } - - .edit-input:focus { - outline: none; - border-color: var(--accent-color, #419b38); - box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08); - } diff --git a/src/routes/admin/settings/+page.svelte b/src/routes/admin/settings/+page.svelte index 1c98d15..a102cd2 100644 --- a/src/routes/admin/settings/+page.svelte +++ b/src/routes/admin/settings/+page.svelte @@ -5,6 +5,7 @@ import Tabs from '$lib/components/admin/Tabs.svelte'; import ImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte'; import DatePicker from '$lib/components/admin/DatePicker.svelte'; + import TextInput from '$lib/components/admin/TextInput.svelte'; import { untrack } from 'svelte'; let { data, form }: { data: PageData; form: ActionData } = $props(); @@ -54,7 +55,7 @@
-
-
-
-
-
-
-
-
-
@@ -61,13 +63,13 @@ {tag.id} {#if editingId === tag.id} - {:else} {tag.name} @@ -195,24 +197,6 @@ letter-spacing: 0.5px; } - .form-group input[type='text'] { - width: 100%; - padding: 10px 0; - border: none; - border-bottom: 2px solid rgba(0, 0, 0, 0.1); - background: transparent; - font-family: inherit; - font-size: 1.05rem; - color: var(--text-color); - box-sizing: border-box; - transition: border-bottom-color 0.3s ease; - } - - .form-group input[type='text']:focus { - outline: none; - border-bottom-color: var(--accent-color, #419b38); - } - .btn { display: inline-block; width: 100%; @@ -318,25 +302,4 @@ text-align: center; color: var(--text-muted, rgba(0, 0, 0, 0.6)); } - - .edit-input { - width: 100%; - padding: 8px 10px; - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 0; - background: rgba(0, 0, 0, 0.015); - font-family: inherit; - font-size: 0.95rem; - color: var(--text-color); - box-sizing: border-box; - transition: - border-color 0.3s ease, - box-shadow 0.3s ease; - } - - .edit-input:focus { - outline: none; - border-color: var(--accent-color, #419b38); - box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08); - }