From 098a2e54ae5b379cd155ee00c35791605031dd7d Mon Sep 17 00:00:00 2001
From: yujiangping <yujiangping@taofen8.com>
Date: Fri, 13 Mar 2026 16:41:55 +0800
Subject: [PATCH] fix:loading

---
 web/src/i18n/en.ts                            |  1 +
 web/src/i18n/zh.ts                            |  1 +
 web/src/views/ToolManagement/Market.tsx       |  3 +-
 .../components/MarketConfigModal.tsx          | 53 +++++++++++++------
 4 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
index b470ce07..ce357e74 100644
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -1990,6 +1990,7 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
       marketUrlPlaceholder: 'Market URL',
       marketCopy: 'Copy',
       marketApiKeyOptional: 'Optional',
+      marketApiKeyRequired: 'API Key is required',
       marketApiKeyExtra: 'Some markets require an API Key to access the full service list',
       marketApiKeyPlaceholder: 'Enter API Key to access more services',
       marketConnectionStatus: 'Connection Status',
diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts
index 1151014b..01b1ab9e 100644
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -1986,6 +1986,7 @@ export const zh = {
       marketUrlPlaceholder: '市场地址',
       marketCopy: '复制',
       marketApiKeyOptional: '可选',
+      marketApiKeyRequired: '请输入 API Key',
       marketApiKeyExtra: '部分市场需要 API Key 才能获取完整的服务列表',
       marketApiKeyPlaceholder: '输入 API Key 以获取更多服务',
       marketConnectionStatus: '连接状态',
diff --git a/web/src/views/ToolManagement/Market.tsx b/web/src/views/ToolManagement/Market.tsx
index 351ae8b7..e6250e71 100644
--- a/web/src/views/ToolManagement/Market.tsx
+++ b/web/src/views/ToolManagement/Market.tsx
@@ -255,6 +255,7 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
     if (!source) return;
     try {
       const config: any = await getMarketConfig(sourceId);
+      console.log('获取到的配置数据:', config);
       marketConfigModalRef.current?.handleOpen({
         ...source,
         connected: config?.status === 1,
@@ -431,7 +432,7 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
                 dataLength={mcpList.length}
                 next={loadMore}
                 hasMore={hasMore}
-                loader={<Skeleton active paragraph={{ rows: 2 }} className="rb:mt-4" />}
+                loader={null}
                 scrollableTarget="mcpScrollableDiv"
               >
                 <div 
diff --git a/web/src/views/ToolManagement/components/MarketConfigModal.tsx b/web/src/views/ToolManagement/components/MarketConfigModal.tsx
index 280512de..6034290e 100644
--- a/web/src/views/ToolManagement/components/MarketConfigModal.tsx
+++ b/web/src/views/ToolManagement/components/MarketConfigModal.tsx
@@ -37,6 +37,7 @@ const MarketConfigModal = forwardRef<MarketConfigModalRef, MarketConfigModalProp
   const [loading, setLoading] = useState(false);
   const [currentSource, setCurrentSource] = useState<MarketSource | null>(null);
   const [showApiKey, setShowApiKey] = useState(false);
+  const [initialValues, setInitialValues] = useState<{ token: string }>({ token: '' });
   const formValues = Form.useWatch([], form);
 
   const handleClose = () => {
@@ -45,16 +46,29 @@ const MarketConfigModal = forwardRef<MarketConfigModalRef, MarketConfigModalProp
     setLoading(false);
     setCurrentSource(null);
     setShowApiKey(false);
+    setInitialValues({ token: '' });
   };
 
   const handleOpen = (source: MarketSource) => {
+    console.log('Modal 接收到的数据:', source);
     setCurrentSource(source);
-    form.setFieldsValue({
-      token: source.token || '',
-    });
+    setInitialValues({ token: source.token || '' });
     setVisible(true);
   };
 
+  const handleAfterOpenChange = (open: boolean) => {
+    if (open && currentSource) {
+      // Modal 完全打开后再设置表单值，使用 setTimeout 确保在下一个事件循环
+      setTimeout(() => {
+        form.setFieldsValue({
+          token: currentSource.token || '',
+        });
+        console.log('Modal 打开后设置表单值:', { token: currentSource.token || '' });
+        console.log('当前表单所有值:', form.getFieldsValue());
+      }, 100);
+    }
+  };
+
   const handleSave = () => {
     form
       .validateFields()
@@ -103,7 +117,7 @@ const MarketConfigModal = forwardRef<MarketConfigModalRef, MarketConfigModalProp
   };
 
   // 检查是否可以保存：token 字段必须有值
-  const canSave = formValues?.token && formValues.token.trim().length > 0;
+  const canSave = formValues?.token?.trim().length > 0;
 
   useImperativeHandle(ref, () => ({
     handleOpen,
@@ -117,6 +131,7 @@ const MarketConfigModal = forwardRef<MarketConfigModalRef, MarketConfigModalProp
       title={t('tool.marketConfig', { name: currentSource.name })}
       open={visible}
       onCancel={handleClose}
+      afterOpenChange={handleAfterOpenChange}
       okText={t('tool.marketSaveAndConnect')}
       onOk={handleSave}
       confirmLoading={loading}
@@ -152,8 +167,10 @@ const MarketConfigModal = forwardRef<MarketConfigModalRef, MarketConfigModalProp
         </div>
 
         <Form
+          key={currentSource?.id || 'new'}
           form={form}
           layout="vertical"
+          initialValues={initialValues}
         >
           <FormItem label={t('tool.marketUrl')}>
             <Space.Compact style={{ width: '100%' }}>
@@ -177,19 +194,25 @@ const MarketConfigModal = forwardRef<MarketConfigModalRef, MarketConfigModalProp
                 API Key
               </span>
             }
+            rules={[
+              { required: true, message: t('tool.marketApiKeyRequired') },
+              { whitespace: true, message: t('tool.marketApiKeyRequired') }
+            ]}
             extra={<span style={{ display: 'inline-block', marginTop: 8 }}>{t('tool.marketApiKeyExtra')}</span>}
           >
-            <Space.Compact style={{ width: '100%' }}>
-              <Input
-                type={showApiKey ? 'text' : 'password'}
-                placeholder={t('tool.marketApiKeyPlaceholder')}
-                autoComplete="off"
-              />
-              <Button
-                icon={showApiKey ? <EyeInvisibleOutlined /> : <EyeOutlined />}
-                onClick={() => setShowApiKey(!showApiKey)}
-              />
-            </Space.Compact>
+            <Input
+              type={showApiKey ? 'text' : 'password'}
+              placeholder={t('tool.marketApiKeyPlaceholder')}
+              autoComplete="off"
+              suffix={
+                <Button
+                  type="text"
+                  size="small"
+                  icon={showApiKey ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+                  onClick={() => setShowApiKey(!showApiKey)}
+                />
+              }
+            />
           </FormItem>
 
           <div className="rb:flex rb:items-center rb:gap-2 rb:p-3 rb:bg-gray-50 rb:rounded rb:text-sm">