ui(import-hub): 优化 skills.sh 卡片布局
- skills.sh 卡片改为列布局: 顶部:图标+名称+URL(左侧)+ 访问按钮(右上) 中部:URL 输入框(全宽) 底部:检测名称预览 + 导入按钮(右下) - 加大"说明"与平台卡片的间距(margin-top: space-xl) - 导入按钮与名称预览在右侧同一行,间距更协调
This commit is contained in:
1 parent
0e6f1931e1
commit
4d27dd3429
2 files changed
+72
-39
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user