Skip to content

Commit d5dc805

Browse files
committed
新增:在提示词库编辑器中为分类和二级分类输入框添加回车键支持,优化用户体验并实现自动聚焦功能
1 parent 6e1de34 commit d5dc805

File tree

1 file changed

+42
-2
lines changed

1 file changed

+42
-2
lines changed

frontend/src/components/PromptLibraryEditor.vue

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,14 @@
4646
</div>
4747
<div class="mt-2" v-if="showAddCategory">
4848
<div class="flex gap-2">
49-
<input type="text" v-model="newCategory" class="input input-bordered flex-grow" placeholder="新分类名称" />
49+
<input
50+
type="text"
51+
v-model="newCategory"
52+
ref="categoryInput"
53+
class="input input-bordered flex-grow"
54+
placeholder="新分类名称"
55+
@keyup.enter="addNewCategory"
56+
/>
5057
<button class="btn btn-primary" @click="addNewCategory">
5158
<i class="icon-[tabler--check]"></i>
5259
</button>
@@ -73,7 +80,14 @@
7380
</div>
7481
<div class="mt-2" v-if="showAddSubCategory">
7582
<div class="flex gap-2">
76-
<input type="text" v-model="newSubCategory" class="input input-bordered flex-grow" placeholder="新二级分类名称" />
83+
<input
84+
type="text"
85+
v-model="newSubCategory"
86+
ref="subCategoryInput"
87+
class="input input-bordered flex-grow"
88+
placeholder="新二级分类名称"
89+
@keyup.enter="addNewSubCategory"
90+
/>
7791
<button class="btn btn-primary" @click="addNewSubCategory">
7892
<i class="icon-[tabler--check]"></i>
7993
</button>
@@ -162,6 +176,30 @@ export default defineComponent({
162176
const isSaving = ref(false);
163177
const errorMessage = ref('');
164178
179+
// 输入框引用
180+
const categoryInput = ref<HTMLInputElement | null>(null);
181+
const subCategoryInput = ref<HTMLInputElement | null>(null);
182+
183+
// 监听分类添加状态,自动聚焦
184+
watch(showAddCategory, (newVal) => {
185+
if (newVal) {
186+
// 等待DOM更新后聚焦
187+
setTimeout(() => {
188+
categoryInput.value?.focus();
189+
}, 50);
190+
}
191+
});
192+
193+
// 监听二级分类添加状态,自动聚焦
194+
watch(showAddSubCategory, (newVal) => {
195+
if (newVal) {
196+
// 等待DOM更新后聚焦
197+
setTimeout(() => {
198+
subCategoryInput.value?.focus();
199+
}, 50);
200+
}
201+
});
202+
165203
// 本地分类管理
166204
const localCategories = ref<string[]>([]);
167205
const localSubCategories = ref<{[key: string]: string[]}>({});
@@ -407,6 +445,8 @@ export default defineComponent({
407445
errorMessage,
408446
localCategories,
409447
localSubCategories,
448+
categoryInput,
449+
subCategoryInput,
410450
411451
// 方法
412452
addNewCategory,

0 commit comments

Comments
 (0)