|
@@ -9,78 +9,110 @@
|
|
|
</el-button>
|
|
</el-button>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div v-if="!formData.classes?.length" class="empty-state">
|
|
|
|
|
- <div class="empty-desc">{{ texts.empty }}</div>
|
|
|
|
|
|
|
+ <div class="w-full flex items-center justify-between beautify">
|
|
|
|
|
+ <label class="text-14px font-bold text-gray-700">{{ texts.input }}</label>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <VarInput v-model="formData.query" class="w-full" :rows="3" placeholder="输入/选择变量" />
|
|
|
|
|
+ </section>
|
|
|
|
|
|
|
|
- <VueDraggable
|
|
|
|
|
- v-else
|
|
|
|
|
- v-model="formData.classes"
|
|
|
|
|
- :animation="150"
|
|
|
|
|
- handle=".handle"
|
|
|
|
|
- class="class-list"
|
|
|
|
|
- >
|
|
|
|
|
- <div v-for="(item, index) in formData.classes" :key="item.id" class="class-card">
|
|
|
|
|
- <div class="class-card__header">
|
|
|
|
|
- <div class="class-card__title">
|
|
|
|
|
- <Icon icon="lucide:grip-vertical" :size="16" class="handle drag-icon" />
|
|
|
|
|
- <span class="class-index">{{ texts.classPrefix }} {{ index + 1 }}</span>
|
|
|
|
|
- <el-input
|
|
|
|
|
- v-model="item.name"
|
|
|
|
|
- :placeholder="texts.classNamePlaceholder"
|
|
|
|
|
- class="class-name-input"
|
|
|
|
|
- clearable
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <section class="section-block">
|
|
|
|
|
+ <el-collapse>
|
|
|
|
|
+ <el-collapse-item name="0">
|
|
|
|
|
+ <template #title>
|
|
|
|
|
+ <div class="flex items-center justify-between beautify">
|
|
|
|
|
+ <label class="text-14px font-bold text-gray-700">输出变量</label>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="class-card__actions">
|
|
|
|
|
- <IconButton
|
|
|
|
|
- link
|
|
|
|
|
- icon="lucide:copy"
|
|
|
|
|
- class="text-#667085"
|
|
|
|
|
- @click="handleDuplicateClass(index)"
|
|
|
|
|
- />
|
|
|
|
|
- <IconButton
|
|
|
|
|
- link
|
|
|
|
|
- icon="lucide:trash-2"
|
|
|
|
|
- class="text-#f04438 ml-0!"
|
|
|
|
|
- @click="handleRemoveClass(index)"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <div v-if="!formData.classes?.length" class="empty-state">
|
|
|
|
|
+ <div class="empty-desc">{{ texts.empty }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
|
|
|
- <div class="class-card__body">
|
|
|
|
|
|
|
+ <VueDraggable
|
|
|
|
|
+ v-else
|
|
|
|
|
+ v-model="formData.classes"
|
|
|
|
|
+ :animation="150"
|
|
|
|
|
+ handle=".handle"
|
|
|
|
|
+ class="class-list"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div v-for="(item, index) in formData.classes" :key="item.id" class="class-card">
|
|
|
|
|
+ <div class="class-card__header">
|
|
|
|
|
+ <div class="class-card__title">
|
|
|
|
|
+ <Icon icon="lucide:grip-vertical" :size="16" class="handle drag-icon" />
|
|
|
|
|
+ <span class="class-index">{{ item.name }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="class-card__actions">
|
|
|
|
|
+ <IconButton
|
|
|
|
|
+ link
|
|
|
|
|
+ icon="lucide:copy"
|
|
|
|
|
+ class="text-#667085"
|
|
|
|
|
+ @click="handleDuplicateClass(index)"
|
|
|
|
|
+ />
|
|
|
|
|
+ <IconButton
|
|
|
|
|
+ link
|
|
|
|
|
+ icon="lucide:trash-2"
|
|
|
|
|
+ class="text-#f04438 ml-0!"
|
|
|
|
|
+ @click="handleRemoveClass(index)"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="class-card__body">
|
|
|
|
|
+ <VarInput
|
|
|
|
|
+ v-model="item.instruction"
|
|
|
|
|
+ class="w-full"
|
|
|
|
|
+ :rows="3"
|
|
|
|
|
+ :placeholder="texts.classInstructionPlaceholder"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </VueDraggable>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-collapse-item>
|
|
|
|
|
+
|
|
|
|
|
+ <el-collapse-item name="1">
|
|
|
|
|
+ <template #title>
|
|
|
|
|
+ <div class="flex items-center justify-between beautify">
|
|
|
|
|
+ <label class="text-14px font-bold text-gray-700">{{
|
|
|
|
|
+ texts.advancedSettings
|
|
|
|
|
+ }}</label>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <div class="advanced-item">
|
|
|
|
|
+ <div class="advanced-label">{{ texts.instruction }}</div>
|
|
|
<VarInput
|
|
<VarInput
|
|
|
- v-model="item.instruction"
|
|
|
|
|
|
|
+ v-model="formData.instruction"
|
|
|
class="w-full"
|
|
class="w-full"
|
|
|
:rows="3"
|
|
:rows="3"
|
|
|
- :placeholder="texts.classInstructionPlaceholder"
|
|
|
|
|
|
|
+ placeholder="输入/选择变量"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- </VueDraggable>
|
|
|
|
|
- </section>
|
|
|
|
|
|
|
+ </el-collapse-item>
|
|
|
|
|
|
|
|
- <section class="section-block">
|
|
|
|
|
- <div class="section-header">
|
|
|
|
|
- <label class="section-title">{{ texts.advancedSettings }}</label>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div class="advanced-item">
|
|
|
|
|
- <div class="advanced-label">{{ texts.instruction }}</div>
|
|
|
|
|
- <VarInput
|
|
|
|
|
- v-model="formData.instruction"
|
|
|
|
|
- class="w-full"
|
|
|
|
|
- :rows="3"
|
|
|
|
|
- :placeholder="texts.classInstructionPlaceholder"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <el-collapse-item name="2">
|
|
|
|
|
+ <template #title>
|
|
|
|
|
+ <div class="flex items-center justify-between beautify">
|
|
|
|
|
+ <label class="text-14px font-bold text-gray-700">输出变量</label>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li v-for="output in formData.outputs" :key="output.name">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span class="text-#333">{{ output.name }}</span>
|
|
|
|
|
+ <span class="text-#999 ml-8px">{{ output.type }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="text-#666">{{ output.describe }}</div>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </el-collapse-item>
|
|
|
|
|
+ </el-collapse>
|
|
|
</section>
|
|
</section>
|
|
|
</div>
|
|
</div>
|
|
|
</el-scrollbar>
|
|
</el-scrollbar>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import { computed } from 'vue'
|
|
|
|
|
|
|
+import { computed, watch } from 'vue'
|
|
|
import { VueDraggable } from 'vue-draggable-plus'
|
|
import { VueDraggable } from 'vue-draggable-plus'
|
|
|
import { Icon, IconButton } from '@repo/ui'
|
|
import { Icon, IconButton } from '@repo/ui'
|
|
|
|
|
|
|
@@ -103,6 +135,7 @@ const emit = defineEmits<Emits>()
|
|
|
const { t } = useI18n()
|
|
const { t } = useI18n()
|
|
|
|
|
|
|
|
const texts = computed(() => ({
|
|
const texts = computed(() => ({
|
|
|
|
|
+ input: t('pages.iterationSetter.input'),
|
|
|
classes: t('pages.questionClassifierSetter.classes'),
|
|
classes: t('pages.questionClassifierSetter.classes'),
|
|
|
addClass: t('pages.questionClassifierSetter.addClass'),
|
|
addClass: t('pages.questionClassifierSetter.addClass'),
|
|
|
empty: t('pages.questionClassifierSetter.empty'),
|
|
empty: t('pages.questionClassifierSetter.empty'),
|
|
@@ -116,6 +149,17 @@ const texts = computed(() => ({
|
|
|
|
|
|
|
|
const formData = useSetterModel<QuestionClassifierData>(props, emit)
|
|
const formData = useSetterModel<QuestionClassifierData>(props, emit)
|
|
|
|
|
|
|
|
|
|
+watch(
|
|
|
|
|
+ () => formData.value.classes,
|
|
|
|
|
+ () => {
|
|
|
|
|
+ formData.value.classes.forEach((c, index) => {
|
|
|
|
|
+ c.id = `${props.id}_${index + 1}`
|
|
|
|
|
+ c.name = c.name || `${texts.value.classPrefix}${index + 1}`
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ { deep: true }
|
|
|
|
|
+)
|
|
|
|
|
+
|
|
|
const getId = () => {
|
|
const getId = () => {
|
|
|
const ids = formData.value.classes.map((c) => c.id.split('_')[1]).map(Number)
|
|
const ids = formData.value.classes.map((c) => c.id.split('_')[1]).map(Number)
|
|
|
const maxId = Math.max(...ids, 0)
|
|
const maxId = Math.max(...ids, 0)
|
|
@@ -167,7 +211,6 @@ const handleDuplicateClass = (index: number) => {
|
|
|
|
|
|
|
|
.section-block {
|
|
.section-block {
|
|
|
padding-bottom: 16px;
|
|
padding-bottom: 16px;
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.section-header {
|
|
.section-header {
|