From 62631a3b9528c42d26a3a2db7a1d1cba2b205c71 Mon Sep 17 00:00:00 2001
From: QihuAI Design <ai@qihuyun.com>
Date: Tue, 14 Jul 2026 22:33:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8A=80=E8=83=BD=E5=B8=82=E5=9C=BAHub?=
 =?UTF-8?q?=E5=AF=BC=E5=85=A5MCP/Skills=E6=B7=BB=E5=8A=A0=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0=E8=AF=B4=E6=98=8E=E8=BE=93=E5=85=A5=EF=BC=9BMCP?=
 =?UTF-8?q?=E4=BC=A0=E8=BE=93=E4=BB=A3=E7=A0=81=E9=AA=8C=E8=AF=81=E5=90=8E?=
 =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E5=AF=BC=E5=85=A5=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/front/MarketPage.tsx | 62 +++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/front/MarketPage.tsx b/frontend/src/pages/front/MarketPage.tsx
index 9f71abf..5f0f2c4 100644
--- a/frontend/src/pages/front/MarketPage.tsx
+++ b/frontend/src/pages/front/MarketPage.tsx
@@ -870,7 +870,7 @@ interface HubImportModalProps {
   appType: 'skill' | 'mcp';
   platforms: typeof skillsHubPlatforms;
   onClose: () => void;
-  onImport: (platformName: string, url: string, skillName: string, price?: number) => void;
+  onImport: (platformName: string, url: string, skillName: string, price?: number, description?: string) => void;
 }
 
 const HubImportModal: React.FC<HubImportModalProps> = ({ appType, platforms, onClose, onImport }) => {
@@ -884,6 +884,8 @@ const HubImportModal: React.FC<HubImportModalProps> = ({ appType, platforms, onC
   const [hubCode, setHubCode] = useState('');
   const [hubCodeVerifyResult, setHubCodeVerifyResult] = useState<'idle' | 'checking' | 'pass' | 'fail'>('idle');
   const [hubCodeVerifyMsg, setHubCodeVerifyMsg] = useState('');
+  const [hubName, setHubName] = useState('');
+  const [hubDescription, setHubDescription] = useState('');
 
   const handleVisit = (url: string) => {
     window.open(url, '_blank');
@@ -908,9 +910,10 @@ const HubImportModal: React.FC<HubImportModalProps> = ({ appType, platforms, onC
 
   const handleImport = (platformId: string) => {
     const url = importUrl[platformId];
-    // For Skills: require URL; for MCP: require code verification pass
+    // For Skills: require URL; for MCP: require code verification pass + name
     if (appType === 'skill' && !url?.trim()) return;
     if (appType === 'mcp' && hubCodeVerifyResult !== 'pass') return;
+    if (appType === 'mcp' && !hubName.trim()) return;
     setImportingId(platformId);
     setImportStatus('verifying');
     setStatusMsg(appType === 'mcp' ? '正在验证代码...' : '正在验证URL链接...');
@@ -930,13 +933,16 @@ const HubImportModal: React.FC<HubImportModalProps> = ({ appType, platforms, onC
         setStatusMsg(step.msg);
           if (step.status === 'published') {
           setTimeout(() => {
-            onImport(platformId, appType === 'mcp' ? hubCode : url, extractSkillName(url, platformId), importPrice);
+            const name = appType === 'skill' ? (hubName || extractSkillName(url || '', platformId)) : hubName;
+            onImport(platformId, appType === 'mcp' ? hubCode : (url || ''), name, importPrice, hubDescription);
             setImportingId(null);
             setImportStatus('idle');
             setImportUrl(prev => ({ ...prev, [platformId]: '' }));
             setHubCode('');
             setHubCodeVerifyResult('idle');
             setHubCodeVerifyMsg('');
+            setHubName('');
+            setHubDescription('');
           }, 1000);
         }
       }, delay);
@@ -974,6 +980,28 @@ const HubImportModal: React.FC<HubImportModalProps> = ({ appType, platforms, onC
             </span>
           </div>
 
+          {/* Name & Description */}
+          <div className="form-section">
+            <label className="form-label">名称 <span className="required">*</span></label>
+            <input
+              type="text"
+              className="form-input"
+              placeholder={appType === 'skill' ? '请输入Skills工具名称' : '请输入MCP应用名称'}
+              value={hubName}
+              onChange={e => setHubName(e.target.value)}
+            />
+          </div>
+          <div className="form-section">
+            <label className="form-label">说明</label>
+            <textarea
+              className="form-textarea"
+              placeholder="请描述功能、使用场景等..."
+              value={hubDescription}
+              onChange={e => setHubDescription(e.target.value)}
+              rows={3}
+            />
+          </div>
+
           {/* MCP Hub Import: Code Editor + AI验证 */}
           {appType === 'mcp' && (
             <div className="hub-code-section">
@@ -1013,6 +1041,29 @@ const mcpClient = new MCPClient({
             </div>
           )}
 
+          {/* MCP 独立导入按钮：直接导入（不依赖选择平台卡片） */}
+          {appType === 'mcp' && hubCodeVerifyResult === 'pass' && (
+            <div className="hub-standalone-import" style={{ textAlign: 'center', marginBottom: 20, padding: '16px', background: 'var(--color-bg-secondary)', borderRadius: 8 }}>
+              <button
+                className="hub-import-btn"
+                style={{ padding: '10px 40px', fontSize: 15, fontWeight: 600 }}
+                onClick={() => handleImport('custom-import')}
+                disabled={!hubName.trim()}
+              >
+                {importingId === 'custom-import' ? (
+                  <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <div className="audit-spinner tiny" />
+                    导入中...
+                  </span>
+                ) : '导入'}
+              </button>
+              {!hubName.trim() && <div style={{ color: '#f85149', fontSize: 12, marginTop: 6 }}>请先输入名称</div>}
+              <div style={{ fontSize: 12, color: 'var(--color-text-tertiary)', marginTop: 6 }}>
+                直接从传输代码导入，无需选择平台
+              </div>
+            </div>
+          )}
+
           <div className="hub-platforms">
             {platforms.map(p => (
               <div key={p.id} className="hub-platform-card">
@@ -1317,12 +1368,13 @@ const MarketPage: React.FC = () => {
   };
 
   // Handle hub import - 调用后端 API 创建应用
-  const handleHubImport = async (platformName: string, url: string, skillName: string, price?: number) => {
+  const handleHubImport = async (platformName: string, url: string, skillName: string, price?: number, description?: string) => {
     try {
+      const desc = description || `从 ${platformName} 导入的${showHubImport === 'skill' ? 'Skills工具' : 'MCP应用'} (来源: ${url})`;
       await marketAPI.createApp({
         name: skillName,
         type: showHubImport || 'skill',
-        description: `从 ${platformName} 导入的${showHubImport === 'skill' ? 'Skills工具' : 'MCP应用'} (来源: ${url})`,
+        description: desc,
         price: price || 0,
         is_member_free: (price || 0) === 0,
         join_promotion: false,