style(plugin-inventory): align install/toggle controls with the design system
The install input matched the catalog search field, and the install button plus the enable/disable toggles now use the shared Button primitive (primary / outline sm), replacing unstyled native buttons. The install hint clarifies that registry installs require a published npm package. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+13
-4
@@ -57,12 +57,14 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search input {
|
||||
/* The catalog search and the install field share the same field geometry. */
|
||||
.search input,
|
||||
.installInput {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid var(--dsw-alias-border-l2);
|
||||
border-radius: 8px;
|
||||
padding: 0 34px 0 36px;
|
||||
padding: 0 12px;
|
||||
outline: none;
|
||||
background: var(--dsw-alias-bg-layer-1);
|
||||
color: var(--dsw-alias-label-primary);
|
||||
@@ -70,11 +72,18 @@
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search input::placeholder {
|
||||
/* The search field reserves leading space for its absolutely-placed icon. */
|
||||
.search input {
|
||||
padding: 0 34px 0 36px;
|
||||
}
|
||||
|
||||
.search input::placeholder,
|
||||
.installInput::placeholder {
|
||||
color: var(--dsw-alias-label-tertiary);
|
||||
}
|
||||
|
||||
.search input:focus-visible {
|
||||
.search input:focus-visible,
|
||||
.installInput:focus-visible {
|
||||
border-color: var(--dsw-alias-state-business-primary);
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-business-primary) 18%, transparent);
|
||||
}
|
||||
|
||||
+12
-9
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useId, useMemo, useState, type ReactNode } from 'react'
|
||||
import type { InstallResult, InstallSpec, PluginInventorySnapshot } from '@deepseek-ai/dsh-api-remotes/client'
|
||||
import {
|
||||
Button,
|
||||
IconChevronDownOutline14,
|
||||
IconSearchOutline16,
|
||||
} from '@deepseek-ai/dsh-client-ui-primitives'
|
||||
@@ -197,27 +198,29 @@ export function PluginInventorySettingsTab({
|
||||
) : null}
|
||||
</dl>
|
||||
{!entry.enabled ? (
|
||||
<button
|
||||
<Button
|
||||
className={css.toggle}
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={busy === entry.entryId}
|
||||
aria-busy={busy === entry.entryId || undefined}
|
||||
onClick={() => { toggle(entry.entryId, true) }}
|
||||
>
|
||||
{busy === entry.entryId ? t('toggling') : t('enable')}
|
||||
</button>
|
||||
</Button>
|
||||
) : entry.protected ? (
|
||||
<p className={css.required}>{t('required')}</p>
|
||||
) : (
|
||||
<button
|
||||
<Button
|
||||
className={css.toggle}
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={busy === entry.entryId}
|
||||
aria-busy={busy === entry.entryId || undefined}
|
||||
onClick={() => { toggle(entry.entryId, false) }}
|
||||
>
|
||||
{busy === entry.entryId ? t('toggling') : t('disable')}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
@@ -248,14 +251,14 @@ export function PluginInventorySettingsTab({
|
||||
onChange={(event) => { setSpec(event.currentTarget.value) }}
|
||||
onKeyDown={(event) => { if (event.key === 'Enter') installRegistry() }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
<Button
|
||||
className={css.installAction}
|
||||
variant="primary"
|
||||
disabled={installBusy || spec.trim().length === 0}
|
||||
onClick={installRegistry}
|
||||
>
|
||||
{installBusy ? t('installing') : t('install')}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
{installNote !== null
|
||||
? <p className={installNote.kind === 'error' ? css.installError : css.installRestart} role="status">{installNote.text}</p>
|
||||
|
||||
@@ -25,7 +25,7 @@ export const zh = {
|
||||
toggling: '切换中…',
|
||||
required: '应用必需插件,不可切换',
|
||||
installPlugin: '安装插件',
|
||||
installSpec: '输入插件包名,如 @scope/plugin',
|
||||
installSpec: '输入插件包名,目前只支持已发布npm的包;如 @scope/plugin',
|
||||
install: '安装',
|
||||
installing: '安装中…',
|
||||
restartRequired: '已安装,重启后生效',
|
||||
|
||||
Reference in New Issue
Block a user