YG_FT/frontend/src/views/eval/create/EvalRuleSetupStep.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import DimensionFormFields, { type DimensionFormDraft } from './DimensionFormFields.vue'
import type { Dimension, ModelItem } from '@/types'

export type EvalRuleMode = 'existing' | 'new' | 'baseline'

export interface EvalRuleSetupDraft {
  ruleMode: EvalRuleMode
  dimension_id: string | number
  newDimension: DimensionFormDraft
}

const props = defineProps<{
  dimensions: Dimension[]
  evalModels: ModelItem[]
  loading?: boolean
  disabled?: boolean
}>()

const form = defineModel<EvalRuleSetupDraft>({ required: true })
const existingFormRef = ref<FormInstance>()
const newFormRef = ref<FormInstance>()

const existingRules: FormRules = {
  dimension_id: [{ required: true, message: '请选择评测维度', trigger: 'change' }],
}

const dimensionRules: FormRules<DimensionFormDraft> = {
  type: [{ required: true, message: '请选择指标类型', trigger: 'change' }],
  eval_model: [{ required: true, message: '请选择大模型', trigger: 'change' }],
  eval_method: [{ required: true, message: '请选择评估方式', trigger: 'change' }],
  eval_prompt: [{ required: true, message: '请填写评估 Prompt', trigger: 'blur' }],
}

const selectedDimension = computed(() =>
  props.dimensions.find((dimension) => String(dimension.id) === String(form.value.dimension_id)),
)

async function validate() {
  const target = newFormRef.value
  if (!target) return false
  try {
    const valid = await target.validate()
    return !!valid
  } catch {
    return false
  }
}

defineExpose({ validate })
</script>

<template>
  <div class="rule-step">
    <el-form
      ref="newFormRef"
      :model="form.newDimension"
      :rules="dimensionRules"
      label-width="130px"
      class="step-form step-form-wide"
      :disabled="disabled"
      scroll-to-error
    >
      <DimensionFormFields
        v-model="form.newDimension"
        :eval-models="evalModels"
        :show-description="false"
      />
    </el-form>
  </div>
</template>

<style scoped>


.step-form {
  max-width: 760px;
}

.step-form-wide {
  max-width: 920px;
}


</style>