138 lines
2.7 KiB
Vue
138 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import examples from '../examples.json'
|
|
|
|
const emit = defineEmits<{
|
|
submit: [requirement: string]
|
|
cancel: []
|
|
}>()
|
|
|
|
const requirement = ref('')
|
|
const inputEl = ref<HTMLTextAreaElement>()
|
|
|
|
onMounted(() => inputEl.value?.focus())
|
|
|
|
function onSubmit() {
|
|
const text = requirement.value.trim()
|
|
if (text) emit('submit', text)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="create-form">
|
|
<h2>输入你的需求</h2>
|
|
<div class="create-examples">
|
|
<span
|
|
v-for="ex in examples"
|
|
:key="ex.label"
|
|
class="example-tag"
|
|
@click="requirement = Array.isArray(ex.text) ? ex.text.join('\n') : ex.text"
|
|
>{{ ex.label }}</span>
|
|
</div>
|
|
<textarea
|
|
ref="inputEl"
|
|
v-model="requirement"
|
|
class="create-textarea"
|
|
placeholder="描述你想让 AI 做什么..."
|
|
rows="4"
|
|
@keydown.ctrl.enter="onSubmit"
|
|
@keydown.meta.enter="onSubmit"
|
|
/>
|
|
<div class="create-hint">Ctrl+Enter 提交</div>
|
|
<div class="create-actions">
|
|
<button class="btn-cancel" @click="emit('cancel')">取消</button>
|
|
<button class="btn-confirm" @click="onSubmit" :disabled="!requirement.trim()">开始</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.create-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
width: 480px;
|
|
}
|
|
|
|
.create-form h2 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.create-examples {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.example-tag {
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.example-tag:hover {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
background: rgba(79, 195, 247, 0.08);
|
|
}
|
|
|
|
.create-textarea {
|
|
padding: 10px 12px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
outline: none;
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.create-textarea:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.create-hint {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
text-align: right;
|
|
}
|
|
|
|
.create-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.btn-cancel {
|
|
padding: 8px 16px;
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.btn-confirm {
|
|
padding: 8px 16px;
|
|
background: var(--accent);
|
|
color: var(--bg-primary);
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn-confirm:disabled {
|
|
opacity: 0.4;
|
|
}
|
|
</style>
|