feat: 实现目标模型选择功能,添加反馈机制和错误处理
This commit is contained in:
@@ -1,21 +1,65 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { activeDatasetMeta } from '$lib/stores/dataset';
|
import { activeDatasetMeta, updateActiveDatasetMeta } from '$lib/stores/dataset';
|
||||||
import { ModelChoices, type TargetModels } from '$lib/types/models';
|
import { ModelChoices, type TargetModels } from '$lib/types/models';
|
||||||
import { onMount } from 'svelte';
|
import { onDestroy, onMount } from 'svelte';
|
||||||
import { get } from 'svelte/store';
|
import { get } from 'svelte/store';
|
||||||
|
|
||||||
let selected: TargetModels | null = $state(null);
|
let selected: TargetModels | null = $state(null);
|
||||||
|
let updated = $state(false);
|
||||||
|
let notUpdated = $state(false);
|
||||||
|
let feedbackTimer: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
selected = get(activeDatasetMeta)?.targetModel ?? null;
|
selected = get(activeDatasetMeta)?.targetModel ?? null;
|
||||||
});
|
});
|
||||||
|
|
||||||
async function saveTargetModel() {}
|
onDestroy(() => {
|
||||||
|
if (feedbackTimer) {
|
||||||
|
clearTimeout(feedbackTimer);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function resetFeedbackIn2s() {
|
||||||
|
if (feedbackTimer) {
|
||||||
|
clearTimeout(feedbackTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
feedbackTimer = setTimeout(() => {
|
||||||
|
updated = false;
|
||||||
|
notUpdated = false;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveTargetModel() {
|
||||||
|
if (!selected) {
|
||||||
|
updated = false;
|
||||||
|
notUpdated = true;
|
||||||
|
resetFeedbackIn2s();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await updateActiveDatasetMeta({ targetModel: selected });
|
||||||
|
updated = true;
|
||||||
|
notUpdated = false;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to save target model:', error);
|
||||||
|
updated = false;
|
||||||
|
notUpdated = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
resetFeedbackIn2s();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<label class="input w-fit in-focus-within:outline-0">
|
<label
|
||||||
|
class={[
|
||||||
|
'input w-fit in-focus-within:outline-0 transition-colors duration-300 ease-out',
|
||||||
|
updated && 'border-green-500',
|
||||||
|
notUpdated && 'border-red-500',
|
||||||
|
]}>
|
||||||
<span class="label min-w-[10em]">Target Model</span>
|
<span class="label min-w-[10em]">Target Model</span>
|
||||||
<select bind:value={selected} onselect={saveTargetModel} class="min-w-[20em] focus:outline-0">
|
<select bind:value={selected} onchange={saveTargetModel} class="min-w-[20em] focus:outline-0">
|
||||||
{#each ModelChoices as model}
|
{#each ModelChoices as model}
|
||||||
<option value={model.value}>{model.label}</option>
|
<option value={model.value}>{model.label}</option>
|
||||||
{/each}
|
{/each}
|
||||||
|
|||||||
Reference in New Issue
Block a user