diff --git a/workdsh-web/packages/plugins/skills/src/client/SkillHubPanel.tsx b/workdsh-web/packages/plugins/skills/src/client/SkillHubPanel.tsx index 38dca79d6c..dbe904f86e 100644 --- a/workdsh-web/packages/plugins/skills/src/client/SkillHubPanel.tsx +++ b/workdsh-web/packages/plugins/skills/src/client/SkillHubPanel.tsx @@ -34,13 +34,13 @@ async function skillHub(method: strin } /** Reuse the installed DSH plugin's search and verified installation path. */ -export function SkillHubPanel({ query, onInstalled }: { query: string; onInstalled: () => Promise }) { +export function SkillHubPanel({ query, onInstalled, onOpenInstalled }: { query: string; onInstalled: () => Promise; onOpenInstalled: () => void }) { const [cards, setCards] = useState([]); const [total, setTotal] = useState(0); const [busy, setBusy] = useState(true); const [error, setError] = useState(''); const [installing, setInstalling] = useState(''); - const [revision, setRevision] = useState(0); + const [installedName, setInstalledName] = useState(''); const [page, setPage] = useState(0); useEffect(() => { setPage(0); }, [query]); @@ -55,14 +55,15 @@ export function SkillHubPanel({ query, onInstalled }: { query: string; onInstall .finally(() => { if (!controller.signal.aborted) setBusy(false); }); }, 250); return () => { window.clearTimeout(timer); controller.abort(); }; - }, [query, page, revision]); + }, [query, page]); const install = async (card: SkillHubCard) => { setInstalling(card.slug); setError(''); try { await skillHub('install', { slug: card.slug }); - await onInstalled(); - setRevision(value => value + 1); + setCards(current => current.map(item => item.slug === card.slug ? { ...item, installed: true } : item)); + setInstalledName(card.name); + void onInstalled(); } catch (cause) { setError(cause instanceof Error ? cause.message : '安装失败,请重试。'); } finally { setInstalling(''); } }; @@ -73,11 +74,12 @@ export function SkillHubPanel({ query, onInstalled }: { query: string; onInstall return

SkillHub {total}

来源:SkillHub · 安装到本机 DSH 技能目录
+ {installedName &&
已安装「{installedName}」。
} {error &&

{error}

} {busy ?

正在读取 SkillHub…

: cards.length ?
{cards.map(card =>

{card.description}

版本 {card.version || '未标注'} · 许可证请查看来源页 )} : !error &&

没有找到匹配的技能。

} diff --git a/workdsh-web/packages/plugins/skills/src/client/SkillsPanel.tsx b/workdsh-web/packages/plugins/skills/src/client/SkillsPanel.tsx index 1271d8959d..e67e9d4120 100644 --- a/workdsh-web/packages/plugins/skills/src/client/SkillsPanel.tsx +++ b/workdsh-web/packages/plugins/skills/src/client/SkillsPanel.tsx @@ -264,7 +264,7 @@ export function SkillsPanel({ toggleNavigation, management, startSkillTask, star

技能市场

- {marketSource === 'skillhub' ? : <> + {marketSource === 'skillhub' ? : <> {catalog?.status === 'invalid' &&

技能目录暂时不可用,已安装的技能仍可使用。

} {batchMode && batchBar} diff --git a/workdsh-web/packages/plugins/skills/src/client/styles.ts b/workdsh-web/packages/plugins/skills/src/client/styles.ts index 0af6df4b8d..cd535d1bce 100644 --- a/workdsh-web/packages/plugins/skills/src/client/styles.ts +++ b/workdsh-web/packages/plugins/skills/src/client/styles.ts @@ -115,6 +115,11 @@ export const skillsMarketCss = `${modalCss} .wd-skills .skillhub-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--dsw-alias-bg-layer-2)} .wd-skills .skillhub-icon img[hidden]{display:none} .wd-skills .skillhub-meta{display:block;margin-top:8px;color:var(--dsw-alias-label-tertiary);font-size:11px} +.wd-skills .skillhub-market .install.is-status{width:auto;min-width:58px;padding:0 8px;border-radius:8px;font-size:12px} +.wd-skills .skillhub-market .install.is-installed:disabled{color:var(--dsw-alias-state-success-primary);opacity:1} +.wd-skills .skillhub-success{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:10px 14px;border:1px solid var(--dsw-alias-state-success-primary);border-radius:10px;background:var(--dsw-alias-bg-layer-2);font-size:13px} +.wd-skills .skillhub-success span{flex:1} +.wd-skills .skillhub-success .skillhub-dismiss{border:0;background:transparent;font-size:18px} .wd-skills .skillhub-pagination{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:28px 0 12px} .wd-skills .skillhub-pagination button{min-width:36px;background:transparent} .wd-skills .skillhub-pagination button.active{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-brand-text);font-weight:600}