opencode/picoclaw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(frontend): move shared-form to components and unify default-model switch with SwitchCardField

Browse source
This commit is contained in:
wenjie 2026-03-09 15:34:30 +08:00
parent d7b9534dbc
commit 895b81ec6a
8 changed files with 29 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/frontend/src/components/channels/channel-forms/discord-form.tsx
View file

@ -2,11 +2,7 @@ import { useTranslation } from "react-i18next"
import type { ChannelConfig } from "@/api/channels" import type { ChannelConfig } from "@/api/channels"
import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder" import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder"
import { import { Field, KeyInput, SwitchCardField } from "@/components/shared-form"
Field,
KeyInput,
SwitchCardField,
} from "@/components/models/shared-form"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
interface DiscordFormProps { interface DiscordFormProps {

2
web/frontend/src/components/channels/channel-forms/feishu-form.tsx
View file

@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next"
import type { ChannelConfig } from "@/api/channels" import type { ChannelConfig } from "@/api/channels"
import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder" import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder"
import { Field, KeyInput } from "@/components/models/shared-form" import { Field, KeyInput } from "@/components/shared-form"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
interface FeishuFormProps { interface FeishuFormProps {

6
web/frontend/src/components/channels/channel-forms/generic-form.tsx
View file

@ -2,11 +2,7 @@ import { useTranslation } from "react-i18next"
import type { ChannelConfig } from "@/api/channels" import type { ChannelConfig } from "@/api/channels"
import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder" import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder"
import { import { Field, KeyInput, SwitchCardField } from "@/components/shared-form"
Field,
KeyInput,
SwitchCardField,
} from "@/components/models/shared-form"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
interface GenericFormProps { interface GenericFormProps {

2
web/frontend/src/components/channels/channel-forms/slack-form.tsx
View file

@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next"
import type { ChannelConfig } from "@/api/channels" import type { ChannelConfig } from "@/api/channels"
import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder" import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder"
import { Field, KeyInput } from "@/components/models/shared-form" import { Field, KeyInput } from "@/components/shared-form"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
interface SlackFormProps { interface SlackFormProps {

6
web/frontend/src/components/channels/channel-forms/telegram-form.tsx
View file

@ -2,11 +2,7 @@ import { useTranslation } from "react-i18next"
import type { ChannelConfig } from "@/api/channels" import type { ChannelConfig } from "@/api/channels"
import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder" import { maskedSecretPlaceholder } from "@/components/channels/channel-forms/secret-placeholder"
import { import { Field, KeyInput, SwitchCardField } from "@/components/shared-form"
Field,
KeyInput,
SwitchCardField,
} from "@/components/models/shared-form"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
interface TelegramFormProps { interface TelegramFormProps {

30
web/frontend/src/components/models/add-model-sheet.tsx
View file

@ -3,6 +3,12 @@ import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { addModel, setDefaultModel } from "@/api/models" import { addModel, setDefaultModel } from "@/api/models"
import {
AdvancedSection,
Field,
KeyInput,
SwitchCardField,
} from "@/components/shared-form"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { import {
@ -13,9 +19,6 @@ import {
SheetHeader, SheetHeader,
SheetTitle, SheetTitle,
} from "@/components/ui/sheet" } from "@/components/ui/sheet"
import { Switch } from "@/components/ui/switch"
import { AdvancedSection, Field, KeyInput } from "./shared-form"
interface AddForm { interface AddForm {
modelName: string modelName: string
@ -187,21 +190,12 @@ export function AddModelSheet({ open, onClose, onSaved }: AddModelSheetProps) {
/> />
</Field> </Field>
<div className="space-y-2"> <SwitchCardField
<div className="border-input flex h-9 items-center justify-between rounded-md border px-2.5"> label={t("models.defaultOnSave.label")}
<span className="text-sm font-medium"> hint={t("models.defaultOnSave.description")}
{t("models.defaultOnSave.label")} checked={setAsDefault}
</span> onCheckedChange={setSetAsDefault}
<Switch />
checked={setAsDefault}
onCheckedChange={setSetAsDefault}
aria-label={t("models.defaultOnSave.label")}
/>
</div>
<p className="text-muted-foreground text-xs">
{t("models.defaultOnSave.description")}
</p>
</div>
<AdvancedSection> <AdvancedSection>
<Field <Field

30
web/frontend/src/components/models/edit-model-sheet.tsx
View file

@ -3,6 +3,12 @@ import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { type ModelInfo, setDefaultModel, updateModel } from "@/api/models" import { type ModelInfo, setDefaultModel, updateModel } from "@/api/models"
import {
AdvancedSection,
Field,
KeyInput,
SwitchCardField,
} from "@/components/shared-form"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { import {
@ -13,9 +19,6 @@ import {
SheetHeader, SheetHeader,
SheetTitle, SheetTitle,
} from "@/components/ui/sheet" } from "@/components/ui/sheet"
import { Switch } from "@/components/ui/switch"
import { AdvancedSection, Field, KeyInput } from "./shared-form"
interface EditForm { interface EditForm {
apiKey: string apiKey: string
@ -168,21 +171,12 @@ export function EditModelSheet({
/> />
</Field> </Field>
<div className="space-y-2"> <SwitchCardField
<div className="border-input flex h-9 items-center justify-between rounded-md border px-2.5"> label={t("models.defaultOnSave.label")}
<span className="text-sm font-medium"> hint={t("models.defaultOnSave.description")}
{t("models.defaultOnSave.label")} checked={setAsDefault}
</span> onCheckedChange={setSetAsDefault}
<Switch />
checked={setAsDefault}
onCheckedChange={setSetAsDefault}
aria-label={t("models.defaultOnSave.label")}
/>
</div>
<p className="text-muted-foreground text-xs">
{t("models.defaultOnSave.description")}
</p>
</div>
<AdvancedSection> <AdvancedSection>
<Field <Field

0
web/frontend/src/components/models/shared-form.tsx → web/frontend/src/components/shared-form.tsx
View file