wecom_it_smart_desk/frontend-admin/src/components/exclusion/ExclusionRuleForm.vue

<!--
=============================================================================
企微IT智能服务台 — 排除规则新建/编辑表单对话框
=============================================================================
说明：
  - 支持 create / edit 两种模式
  - 匹配方式切换时，匹配条件输入框动态变化：
      keyword  → 逗号分隔关键词输入
      regex    → 正则表达式输入
      intent   → 意图标识输入
      category → 问题分类输入
  - 命中动作 transfer_human / transfer_human_with_context 时，
    转人工提示语为必填；prompt_transfer 时选填；silent_transfer 时隐藏
  - 优先级 P0（最高）→ P3（最低），默认 P2
  - match_scope 多选，默认 ai_auto_reply
-->
<template>
  <el-dialog
    :model-value="visible"
    :title="mode === 'create' ? '新建排除规则' : '编辑排除规则'"
    width="640px"
    destroy-on-close
    @update:model-value="$emit('update:visible', $event)"
    @open="handleOpen"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-position="top"
      class="exclusion-form"
    >
      <!-- 规则名称 -->
      <el-form-item label="规则名称" prop="rule_name">
        <el-input
          v-model="formData.rule_name"
          placeholder="请输入规则名称，如：投诉类消息转人工"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>

      <!-- 规则描述 -->
      <el-form-item label="规则描述">
        <el-input
          v-model="formData.rule_description"
          type="textarea"
          :rows="2"
          placeholder="可选，描述规则用途和命中场景"
          maxlength="500"
        />
      </el-form-item>

      <!-- 优先级 + 匹配方式 -->
      <div class="form-row">
        <el-form-item label="优先级" prop="priority" class="form-col">
          <el-select v-model="formData.priority" style="width: 100%">
            <el-option label="P0（最高）" value="P0" />
            <el-option label="P1（高）" value="P1" />
            <el-option label="P2（中）" value="P2" />
            <el-option label="P3（低）" value="P3" />
          </el-select>
        </el-form-item>

        <el-form-item label="匹配方式" prop="match_type" class="form-col">
          <el-select v-model="formData.match_type" style="width: 100%" @change="handleMatchTypeChange">
            <el-option label="关键词" value="keyword" />
            <el-option label="正则表达式" value="regex" />
            <el-option label="意图识别" value="intent" />
            <el-option label="分类匹配" value="category" />
          </el-select>
        </el-form-item>
      </div>

      <!-- 匹配条件 — 根据匹配方式动态展示 -->
      <el-form-item label="匹配条件" prop="match_condition">
        <!-- 关键词：逗号分隔 -->
        <template v-if="formData.match_type === 'keyword'">
          <el-input
            v-model="formData.match_condition"
            type="textarea"
            :rows="2"
            placeholder="多个关键词用逗号分隔，如：投诉,举报,差评,维权"
          />
          <div class="form-hint">多个关键词用英文逗号分隔，消息中包含任一关键词即命中（不区分大小写）</div>
        </template>

        <!-- 正则表达式 -->
        <template v-else-if="formData.match_type === 'regex'">
          <el-input
            v-model="formData.match_condition"
            type="textarea"
            :rows="2"
            placeholder="输入正则表达式，如：^.*(投诉|举报).*$"
          />
          <div class="form-hint">使用 Python re 语法，忽略大小写和多行模式。复杂正则设有 2 秒超时保护</div>
        </template>

        <!-- 意图识别 -->
        <template v-else-if="formData.match_type === 'intent'">
          <el-input
            v-model="formData.match_condition"
            placeholder="输入意图标识，如：complaint、refund_request"
          />
          <div class="form-hint">
            系统通过 AI 意图识别模型判断消息意图，匹配此标识即命中。常用意图：complaint / refund_request / cancellation / escalation
          </div>
        </template>

        <!-- 分类匹配 -->
        <template v-else-if="formData.match_type === 'category'">
          <el-input
            v-model="formData.match_condition"
            placeholder="输入问题分类名称，如：网络故障、账号异常"
          />
          <div class="form-hint">
            匹配会话最近一次智能分诊的问题分类。若无分诊记录则不命中
          </div>
        </template>
      </el-form-item>

      <!-- 匹配范围 -->
      <el-form-item label="匹配范围">
        <el-select
          v-model="formData.match_scope"
          multiple
          style="width: 100%"
          placeholder="选择生效场景"
        >
          <el-option label="AI自动回复" value="ai_auto_reply" />
          <el-option label="AI降级回复" value="ai_fallback" />
        </el-select>
        <div class="form-hint">选择该排除规则在哪些 AI 回复场景中生效</div>
      </el-form-item>

      <!-- 命中动作 -->
      <el-form-item label="命中后动作" prop="action_type">
        <el-radio-group v-model="formData.action_type">
          <el-radio value="transfer_human">转人工</el-radio>
          <el-radio value="transfer_human_with_context">转人工（带上下文）</el-radio>
          <el-radio value="prompt_transfer">提示转人工</el-radio>
          <el-radio value="silent_transfer">静默转人工</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 转人工提示语 — 条件显示 -->
      <el-form-item
        v-if="formData.action_type !== 'silent_transfer'"
        :label="transferMessageLabel"
        :prop="formData.action_type === 'transfer_human' || formData.action_type === 'transfer_human_with_context' ? 'transfer_message' : undefined"
      >
        <el-input
          v-model="formData.transfer_message"
          type="textarea"
          :rows="2"
          :placeholder="transferMessagePlaceholder"
          maxlength="500"
        />
        <div class="form-hint">{{ transferMessageHint }}</div>
      </el-form-item>
    </el-form>

    <!-- 对话框底部 -->
    <template #footer>
      <el-button @click="$emit('update:visible', false)">取消</el-button>
      <el-button type="primary" :loading="submitting" @click="handleSubmit">
        {{ mode === 'create' ? '创建' : '保存' }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// ==========================================================================
// 依赖导入
// ==========================================================================
import { ref, reactive, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import {
  createExclusionRule,
  updateExclusionRule,
} from '@/api/exclusion'
import type { ExclusionRule, ExclusionRuleFormData } from '@/api/exclusion'

// ==========================================================================
// Props & Emits
// ==========================================================================
const props = defineProps<{
  visible: boolean
  mode: 'create' | 'edit'
  rule: ExclusionRule | null
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}>()

// ==========================================================================
// 表单引用
// ==========================================================================
const formRef = ref<FormInstance>()
const submitting = ref<boolean>(false)

// ==========================================================================
// 表单数据
// ==========================================================================
const formData = reactive<ExclusionRuleFormData>({
  rule_name: '',
  rule_description: '',
  priority: 'P2',
  match_type: 'keyword',
  match_condition: '',
  match_scope: ['ai_auto_reply'],
  action_type: 'transfer_human',
  transfer_message: '',
})

// ==========================================================================
// 计算属性
// ==========================================================================

/** 转人工提示语标签 */
const transferMessageLabel = computed<string>(() => {
  if (formData.action_type === 'prompt_transfer') {
    return '提示文案'
  }
  return '转人工提示语'
})

/** 转人工提示语 placeholder */
const transferMessagePlaceholder = computed<string>(() => {
  if (formData.action_type === 'prompt_transfer') {
    return '如：检测到您的问题可能需要人工协助，是否转接人工客服？'
  }
  return '如：您的问题已转接人工客服，请稍候'
})

/** 转人工提示语 hint */
const transferMessageHint = computed<string>(() => {
  if (formData.action_type === 'prompt_transfer') {
    return '用户看到的提示消息，不会自动转人工'
  }
  return '命中后发送给用户的转接提示消息'
})

// ==========================================================================
// 表单校验规则
// ==========================================================================
const formRules = reactive<FormRules>({
  rule_name: [
    { required: true, message: '请输入规则名称', trigger: 'blur' },
    { min: 1, max: 200, message: '规则名称长度 1-200 字符', trigger: 'blur' },
  ],
  priority: [
    { required: true, message: '请选择优先级', trigger: 'change' },
  ],
  match_type: [
    { required: true, message: '请选择匹配方式', trigger: 'change' },
  ],
  match_condition: [
    { required: true, message: '请输入匹配条件', trigger: 'blur' },
  ],
  action_type: [
    { required: true, message: '请选择命中后动作', trigger: 'change' },
  ],
  transfer_message: [
    {
      validator: (_rule: any, value: string, callback: (error?: Error) => void) => {
        // transfer_human 和 transfer_human_with_context 时必填
        if (
          (formData.action_type === 'transfer_human' ||
            formData.action_type === 'transfer_human_with_context') &&
          (!value || !value.trim())
        ) {
          callback(new Error('转人工动作需填写提示语'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
})

// ==========================================================================
// 对话框打开 — 初始化表单数据
// ==========================================================================
function handleOpen(): void {
  if (props.mode === 'edit' && props.rule) {
    // 编辑模式：填充已有数据
    formData.rule_name = props.rule.rule_name
    formData.rule_description = props.rule.rule_description || ''
    formData.priority = props.rule.priority
    formData.match_type = props.rule.match_type
    formData.match_condition = props.rule.match_condition
    formData.match_scope = props.rule.match_scope?.length ? [...props.rule.match_scope] : ['ai_auto_reply']
    formData.action_type = props.rule.action_type
    formData.transfer_message = props.rule.transfer_message || ''
  } else {
    // 新建模式：重置为默认值
    formData.rule_name = ''
    formData.rule_description = ''
    formData.priority = 'P2'
    formData.match_type = 'keyword'
    formData.match_condition = ''
    formData.match_scope = ['ai_auto_reply']
    formData.action_type = 'transfer_human'
    formData.transfer_message = ''
  }
  // 清除校验状态
  nextTick(() => {
    formRef.value?.clearValidate()
  })
}

// ==========================================================================
// 匹配方式切换 — 清空匹配条件
// ==========================================================================
function handleMatchTypeChange(): void {
  formData.match_condition = ''
  nextTick(() => {
    formRef.value?.clearValidate('match_condition')
  })
}

// ==========================================================================
// 提交表单
// ==========================================================================
async function handleSubmit(): Promise<void> {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
  } catch {
    return // 校验未通过
  }

  submitting.value = true
  try {
    // 构建提交数据
    const submitData: ExclusionRuleFormData = {
      rule_name: formData.rule_name.trim(),
      rule_description: formData.rule_description?.trim() || undefined,
      priority: formData.priority,
      match_type: formData.match_type,
      match_condition: formData.match_condition.trim(),
      match_scope: formData.match_scope,
      action_type: formData.action_type,
      transfer_message: formData.transfer_message?.trim() || undefined,
    }

    if (props.mode === 'create') {
      await createExclusionRule(submitData)
      ElMessage.success('规则创建成功')
    } else {
      await updateExclusionRule(props.rule!.id, submitData)
      ElMessage.success('规则更新成功')
    }

    emit('success')
  } catch (error: any) {
    // Axios 拦截器已统一弹窗，此处仅记录日志
    console.error('提交排除规则失败:', error)
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.exclusion-form {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px;
}

/* 双列表单行 */
.form-row {
  display: flex;
  gap: 16px;
}

.form-col {
  flex: 1;
}

/* 表单提示文字 */
.form-hint {
  font-size: 12px;
  color: var(--text-muted, #909399);
  line-height: 1.5;
  margin-top: 4px;
}
</style>