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> = {
  name: [
    { required: true, message: '请输入维度名称', trigger: 'blur' },
    { max: 50, message: '维度名称不超过 50 个字符', trigger: 'blur' },
  ],
  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() {
  if (form.value.ruleMode === 'baseline') return true
  const target = form.value.ruleMode === 'existing' ? existingFormRef.value : newFormRef.value
  if (!target) return false
  try {
    await target.validate()
    return true
  } catch {
    return false
  }
}

defineExpose({ validate })
</script>

<template>
  <div class="rule-step">
    <div class="rule-mode-label">评测规则来源</div>
    <el-radio-group v-model="form.ruleMode" :disabled="disabled" class="rule-mode-group">
      <el-radio-button value="existing">选择已有维度</el-radio-button>
      <el-radio-button value="new">新建评测维度</el-radio-button>
      <el-radio-button value="baseline">系统基线规则</el-radio-button>
    </el-radio-group>

    <el-form
      v-if="form.ruleMode === 'existing'"
      ref="existingFormRef"
      :model="form"
      :rules="existingRules"
      label-width="120px"
      class="step-form"
      :disabled="disabled"
    >
      <el-form-item label="评测维度" prop="dimension_id">
        <el-select
          v-model="form.dimension_id"
          placeholder="请选择评测维度"
          filterable
          style="width: 100%"
          :loading="loading"
        >
          <el-option
            v-for="dimension in dimensions"
            :key="dimension.id"
            :label="dimension.name"
            :value="dimension.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="selectedDimension" label="维度详情">
        <el-descriptions :column="1" border size="small" style="width: 100%">
          <el-descriptions-item label="指标类型">{{ selectedDimension.type || '-' }}</el-descriptions-item>
          <el-descriptions-item label="评估模型">{{ selectedDimension.eval_model || '-' }}</el-descriptions-item>
          <el-descriptions-item label="评估方法">
            {{
              Array.isArray(selectedDimension.eval_method)
                ? selectedDimension.eval_method.join('、')
                : selectedDimension.eval_method || '-'
            }}
          </el-descriptions-item>
          <el-descriptions-item v-if="selectedDimension.description" label="说明">
            {{ selectedDimension.description }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form-item>
    </el-form>

    <el-form
      v-else-if="form.ruleMode === 'new'"
      ref="newFormRef"
      :model="form.newDimension"
      :rules="dimensionRules"
      label-width="130px"
      class="step-form step-form-wide"
      :disabled="disabled"
    >
      <DimensionFormFields v-model="form.newDimension" :eval-models="evalModels" />
    </el-form>

    <el-alert
      v-else
      title="系统将使用内置基线规则进行评测，无需额外创建或选择评测维度。"
      type="info"
      :closable="false"
      show-icon
      class="baseline-alert"
    />
  </div>
</template>

<style scoped>
.rule-mode-label {
  margin-bottom: 10px;
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.rule-mode-group {
  margin-bottom: 28px;
}

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

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

.baseline-alert {
  max-width: 760px;
}
</style>