seahi/blogflare
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 在文章编辑页面中使用自定义 SelectDropdown 组件替换原生 select
生产环境部署 - BlogFlare 至 Cloudflare Pages / 构建与自动化上线 (push) Successful in 2m22s
Details

Browse Source
This commit is contained in:
seahi committed 2026-08-06 12:31:00 +08:00
1 parent bbbc5c07a2
commit 9e33fabdbe
2 files changed
+26 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/routes/admin/posts/[id]/+page.svelte
+13 -18
View File
@@ -4,6 +4,7 @@
import { deserialize } from '$app/forms'; import { deserialize } from '$app/forms';
import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte'; import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte'; import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte';
import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte';
import { parseHugoMarkdown } from '$lib/hugoParser'; import { parseHugoMarkdown } from '$lib/hugoParser';
let { data, form }: { data: PageData; form: ActionData } = $props(); let { data, form }: { data: PageData; form: ActionData } = $props();
@@ -355,22 +356,22 @@
<div class="sidebar-box"> <div class="sidebar-box">
<h3>分类</h3> <h3>分类</h3>
<select name="category_id" class="select-input" bind:value={selectedCategoryId}> <SelectDropdown
<option value="">-- 无 --</option> name="category_id"
{#each data.categories as category} label="分类"
<option value={category.id}>{category.name}</option> options={data.categories.map((category) => ({ value: category.id, label: category.name }))}
{/each} bind:value={selectedCategoryId}
</select> />
</div> </div>
<div class="sidebar-box"> <div class="sidebar-box">
<h3>{$page.data.aliases?.series || '系列'}</h3> <h3>{$page.data.aliases?.series || '系列'}</h3>
<select name="series_id" class="select-input" bind:value={selectedSeriesId}> <SelectDropdown
<option value="">-- 无 --</option> name="series_id"
{#each seriesList as series} label={$page.data.aliases?.series || '系列'}
<option value={series.id}>{series.name}</option> options={seriesList.map((series) => ({ value: series.id, label: series.name }))}
{/each} bind:value={selectedSeriesId}
</select> />
<input <input
type="number" type="number"
name="series_weight" name="series_weight"
@@ -615,13 +616,11 @@
box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08); box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
} }
.select-input:focus,
.sidebar-input:focus { .sidebar-input:focus {
outline: none; outline: none;
border-bottom-color: var(--accent-color, #419b38); border-bottom-color: var(--accent-color, #419b38);
} }
.select-input,
.sidebar-input { .sidebar-input {
width: 100%; width: 100%;
padding: 10px 0; padding: 10px 0;
@@ -635,10 +634,6 @@
transition: border-bottom-color 0.3s ease; transition: border-bottom-color 0.3s ease;
} }
.select-input {
cursor: pointer;
}
.form-group textarea:focus { .form-group textarea:focus {
outline: none; outline: none;
border-color: var(--accent-color, #419b38); border-color: var(--accent-color, #419b38);
src/routes/admin/posts/new/+page.svelte
+13 -18
View File
@@ -4,6 +4,7 @@
import { deserialize } from '$app/forms'; import { deserialize } from '$app/forms';
import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte'; import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte'; import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte';
import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte';
import { parseHugoMarkdown } from '$lib/hugoParser'; import { parseHugoMarkdown } from '$lib/hugoParser';
let { data, form }: { data: PageData; form: ActionData } = $props(); let { data, form }: { data: PageData; form: ActionData } = $props();
@@ -361,22 +362,22 @@
<div class="sidebar-box"> <div class="sidebar-box">
<h3>分类</h3> <h3>分类</h3>
<select name="category_id" class="select-input" bind:value={selectedCategoryId}> <SelectDropdown
<option value="">-- 无 --</option> name="category_id"
{#each data.categories as category} label="分类"
<option value={category.id}>{category.name}</option> options={data.categories.map((category) => ({ value: category.id, label: category.name }))}
{/each} bind:value={selectedCategoryId}
</select> />
</div> </div>
<div class="sidebar-box"> <div class="sidebar-box">
<h3>{$page.data.aliases?.series || '系列'}</h3> <h3>{$page.data.aliases?.series || '系列'}</h3>
<select name="series_id" class="select-input" bind:value={selectedSeriesId}> <SelectDropdown
<option value="">-- 无 --</option> name="series_id"
{#each seriesList as series} label={$page.data.aliases?.series || '系列'}
<option value={series.id}>{series.name}</option> options={seriesList.map((series) => ({ value: series.id, label: series.name }))}
{/each} bind:value={selectedSeriesId}
</select> />
<input <input
type="number" type="number"
name="series_weight" name="series_weight"
@@ -620,13 +621,11 @@
box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08); box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
} }
.select-input:focus,
.sidebar-input:focus { .sidebar-input:focus {
outline: none; outline: none;
border-bottom-color: var(--accent-color, #419b38); border-bottom-color: var(--accent-color, #419b38);
} }
.select-input,
.sidebar-input { .sidebar-input {
width: 100%; width: 100%;
padding: 10px 0; padding: 10px 0;
@@ -640,10 +639,6 @@
transition: border-bottom-color 0.3s ease; transition: border-bottom-color 0.3s ease;
} }
.select-input {
cursor: pointer;
}
.form-group textarea:focus { .form-group textarea:focus {
outline: none; outline: none;
border-color: var(--accent-color, #419b38); border-color: var(--accent-color, #419b38);