From 457dfed2525207b65823fe0a14941a32c37834b6 Mon Sep 17 00:00:00 2001
From: sinohqb <huangqiaobin2012@gmail.com>
Date: Fri, 17 Jul 2026 20:34:45 +0800
Subject: [PATCH] fix(frontend): refresh scenario model references

---
 frontend/web/src/pages/ModelConfigs.tsx     |  3 +++
 frontend/web/src/pages/Scenarios.tsx        | 30 ++++++++++++++++++---
 frontend/web/src/utils/modelConfigEvents.ts |  5 ++++
 3 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 frontend/web/src/utils/modelConfigEvents.ts

diff --git a/frontend/web/src/pages/ModelConfigs.tsx b/frontend/web/src/pages/ModelConfigs.tsx
index ead4729..f6c4f5c 100644
--- a/frontend/web/src/pages/ModelConfigs.tsx
+++ b/frontend/web/src/pages/ModelConfigs.tsx
@@ -10,6 +10,7 @@ import {
 } from '../api'
 import PageWrapper from '../components/PageWrapper'
 import { formatDateTime } from '../utils/date'
+import { notifyModelConfigsChanged } from '../utils/modelConfigEvents'
 
 const capabilityLabels: Record<ModelCapability, string> = {
   chat: '对话',
@@ -86,6 +87,7 @@ export default function ModelConfigsPage() {
       await modelConfigsApi.create(payload)
       message.success('模型配置已创建')
     }
+    notifyModelConfigsChanged()
     setDrawerOpen(false)
     load()
   }
@@ -104,6 +106,7 @@ export default function ModelConfigsPage() {
   const remove = async (config: ModelConfig) => {
     await modelConfigsApi.delete(config.id)
     message.success('模型配置已删除')
+    notifyModelConfigsChanged()
     load()
   }
 
diff --git a/frontend/web/src/pages/Scenarios.tsx b/frontend/web/src/pages/Scenarios.tsx
index 69b97ff..1be5c7a 100644
--- a/frontend/web/src/pages/Scenarios.tsx
+++ b/frontend/web/src/pages/Scenarios.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   Button, Card, Drawer, Form, Input, message, Modal, Popconfirm,
   Select, Space, Table, Tag, Tooltip,
@@ -12,6 +12,7 @@ import { modelConfigsApi, scenariosApi, type ModelConfig, type Scenario } from '
 import PageWrapper from '../components/PageWrapper'
 import { colors } from '../tokens'
 import { formatDateTime } from '../utils/date'
+import { MODEL_CONFIGS_CHANGED_EVENT } from '../utils/modelConfigEvents'
 
 const YAML_TEMPLATE = `# 场景用例示例（JSON 格式）
 [
@@ -43,7 +44,9 @@ export default function ScenariosPage() {
   const [editingScenario, setEditingScenario] = useState<Scenario | null>(null)
   const [casesJson, setCasesJson] = useState(YAML_TEMPLATE)
   const [modelConfigs, setModelConfigs] = useState<ModelConfig[]>([])
+  const [modelConfigsLoading, setModelConfigsLoading] = useState(false)
   const [modelBindings, setModelBindings] = useState<Record<string, string>>({})
+  const modelConfigRequestId = useRef(0)
   const [form] = Form.useForm()
 
   // Template picker
@@ -62,16 +65,25 @@ export default function ScenariosPage() {
   }
 
   const loadModelConfigs = async () => {
-    const res = await modelConfigsApi.list({ enabled: true })
-    setModelConfigs(res.data)
+    const requestId = ++modelConfigRequestId.current
+    setModelConfigsLoading(true)
+    try {
+      const res = await modelConfigsApi.list({ enabled: true })
+      if (requestId === modelConfigRequestId.current) setModelConfigs(res.data)
+    } finally {
+      if (requestId === modelConfigRequestId.current) setModelConfigsLoading(false)
+    }
   }
 
   useEffect(() => {
     load()
     loadModelConfigs()
+    window.addEventListener(MODEL_CONFIGS_CHANGED_EVENT, loadModelConfigs)
+    return () => window.removeEventListener(MODEL_CONFIGS_CHANGED_EVENT, loadModelConfigs)
   }, [])
 
   const openCreate = () => {
+    loadModelConfigs()
     setEditingScenario(null)
     form.resetFields()
     setCasesJson(YAML_TEMPLATE)
@@ -92,6 +104,7 @@ export default function ScenariosPage() {
   }
 
   const applyTemplate = (tpl: any) => {
+    loadModelConfigs()
     setTplModalOpen(false)
     setEditingScenario(null)
     form.resetFields()
@@ -102,6 +115,7 @@ export default function ScenariosPage() {
   }
 
   const openEdit = (scenario: Scenario) => {
+    loadModelConfigs()
     setEditingScenario(scenario)
     form.setFieldsValue({
       name: scenario.name,
@@ -199,7 +213,14 @@ export default function ScenariosPage() {
       extra={
         <Space>
           <Tooltip title="刷新">
-            <Button size="middle" icon={<ReloadOutlined />} onClick={load} />
+            <Button
+              size="middle"
+              icon={<ReloadOutlined />}
+              onClick={() => {
+                load()
+                loadModelConfigs()
+              }}
+            />
           </Tooltip>
           <Button icon={<AppstoreAddOutlined />} onClick={openTemplateModal}>
             从模板新建
@@ -265,6 +286,7 @@ export default function ScenariosPage() {
                 <Select
                   allowClear
                   showSearch
+                  loading={modelConfigsLoading}
                   optionFilterProp="label"
                   style={{ width: '100%' }}
                   placeholder="未绑定"
diff --git a/frontend/web/src/utils/modelConfigEvents.ts b/frontend/web/src/utils/modelConfigEvents.ts
new file mode 100644
index 0000000..1d1e585
--- /dev/null
+++ b/frontend/web/src/utils/modelConfigEvents.ts
@@ -0,0 +1,5 @@
+export const MODEL_CONFIGS_CHANGED_EVENT = 'agenteval:model-configs-changed'
+
+export function notifyModelConfigsChanged() {
+  window.dispatchEvent(new Event(MODEL_CONFIGS_CHANGED_EVENT))
+}