ui(import-hub): 优化 skills.sh 卡片布局

- skills.sh 卡片改为列布局:
  顶部:图标+名称+URL(左侧)+ 访问按钮(右上)
  中部:URL 输入框(全宽)
  底部:检测名称预览 + 导入按钮(右下)
- 加大"说明"与平台卡片的间距(margin-top: space-xl)
- 导入按钮与名称预览在右侧同一行,间距更协调
This commit is contained in:
QihuAI Design committed 2026-07-16 16:00:35 +08:00
1 parent 0e6f1931e1
commit 4d27dd3429
2 files changed
+72 -39

No files matched your search

+39 -35
View File
@@ -1067,16 +1067,16 @@ const mcpClient = new MCPClient({
<div className="hub-platforms">
{platforms.map(p => (
<div key={p.id} className="hub-platform-card">
<div className="hub-platform-info">
<div className="hub-platform-icon">
<ImportIcon />
<div className="hub-platform-header">
<div className="hub-platform-info">
<div className="hub-platform-icon">
<ImportIcon />
</div>
<div>
<strong>{p.name}</strong>
<span className="hub-platform-url">{p.url}</span>
</div>
</div>
<div>
<strong>{p.name}</strong>
<span className="hub-platform-url">{p.url}</span>
</div>
</div>
<div className="hub-platform-actions">
<button
className="hub-visit-btn"
onClick={() => handleVisit(p.url)}
@@ -1086,38 +1086,42 @@ const mcpClient = new MCPClient({
</svg>
访问
</button>
{appType === 'skill' ? (
</div>
{appType === 'skill' ? (
<>
<div className="hub-import-col">
<div className="hub-import-row">
<input
type="url"
className="hub-url-input"
placeholder="粘贴目标链接..."
value={importUrl[p.id] || ''}
onChange={e => setImportUrl(prev => ({ ...prev, [p.id]: e.target.value }))}
disabled={importingId === p.id}
/>
<input
type="url"
className="hub-url-input full"
placeholder="粘贴目标链接..."
value={importUrl[p.id] || ''}
onChange={e => setImportUrl(prev => ({ ...prev, [p.id]: e.target.value }))}
disabled={importingId === p.id}
/>
<div className="hub-import-actions">
{importUrl[p.id]?.trim() && (
<span className="hub-name-preview">
检测名称: <strong>{extractSkillName(importUrl[p.id], p.name)}</strong>
</span>
)}
<button
className="hub-import-btn"
onClick={() => handleImport(p.id)}
disabled={!importUrl[p.id]?.trim() || importingId !== null}
>
{importingId === p.id ? (
<span className="hub-importing-text">
<div className="audit-spinner tiny" />
{statusMsg}
</span>
) : '导入'}
</button>
</div>
{importUrl[p.id]?.trim() && (
<div className="hub-name-preview">
检测名称: <strong>{extractSkillName(importUrl[p.id], p.name)}</strong>
<span className="hub-importing-text">
<div className="audit-spinner tiny" />
{statusMsg}
</span>
) : '导入'}
</button>
</div>
)}
</div>
) : (
<div className="hub-import-row">
</div>
</>
) : (
<div className="hub-import-col">
<div className="hub-import-actions">
<button
className="hub-import-btn"
onClick={() => handleImport(p.id)}
@@ -1131,8 +1135,8 @@ const mcpClient = new MCPClient({
) : '导入'}
</button>
</div>
)}
</div>
</div>
)}
</div>
))}
</div>