feat: redesign Provider settings UI with brand icons and dialog-based quick-add

0 Fork 0

Completely rewrites the Provider management page in Settings to follow
the OpenCode reference design with two clear sections.

ProviderManager.tsx — full rewrite:
- Top section "Connected Providers": shows all configured providers as a
  clean list with brand icons from @lobehub/icons, name, badge, edit and
  disconnect buttons. Environment variables also shown here.
- Bottom section "Add Provider": preset list with icon + name + description
  + Connect button. Clicking Connect opens a dialog with only the fields
  needed for that preset.
- First 3 presets: Custom API (all fields), Anthropic Third-party API
  (name + URL + key), Anthropic Official (key only).
- Other presets (GLM, Kimi, Moonshot, MiniMax, etc.) simplified to key-only.
- Bedrock/Vertex show environment variable config.
- Removed the top-right "Add Provider" button entirely.
- Added PresetConnectDialog component: shows brand icon in title, only
  relevant fields, advanced options fold for extra_env, Cancel/Connect footer.

package.json:
- Add @lobehub/icons dependency for AI brand icons
- Bump version to 0.15.0

i18n (en.ts, zh.ts):
- Add translations: connectedProviders, noConnected, connect, disconnect,
  disconnectProvider, disconnectConfirm, addProviderSection, addProviderDesc,
  disconnecting

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

This commit is contained in:

7418andClaude Opus 4.6 committed 2026-02-26 09:48:23 +08:00

1 parent 448738d4f3

commit d203b9802d

5 files changed

+4056 -241

No files matched your search

package-lock.json

Generated

+3477 -40

View File

File diff suppressed because it is too large. Load diff