- );
-}
-```
-
----
-
-## Task 11: Build ModelList and ModelForm
-
-**Files:**
-- Create: `src/components/ModelList.tsx`
-- Create: `src/components/ModelForm.tsx`
-
-- [ ] **Step 1: Write ModelList.tsx**
-
-```tsx
-import type { Model } from "../types";
-
-interface ModelListProps {
- models: Model[];
- selected: string;
- onSelect: (alias: string) => void;
- onAdd: () => void;
- onDelete: (alias: string) => void;
-}
-
-export function ModelList({ models, selected, onSelect, onAdd, onDelete }: ModelListProps) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- onChange({ ...model, model: e.target.value })}
- />
-
-
-
-
-
- onChange({ ...model, max_context_size: Number(e.target.value) })
- }
- />
-
-
-
-
-
- onChange({ ...model, display_name: e.target.value || null })
- }
- />
-
-
-
-
加载中...
;
- }
-
- const handleProviderSelect = (name: string) => {
- setSelectedProvider(name);
- const firstModel = models.find((m) => m.provider === name);
- setSelectedModel(firstModel?.alias || "");
- };
-
- const handleSetDefault = () => {
- if (!selectedModel) return;
- updateConfig((cfg) => ({ ...cfg, default_model: selectedModel }));
- };
-
- const handleAddProvider = () => {
- const name = `provider-${providers.length + 1}`;
- updateConfig((cfg) => ({
- ...cfg,
- providers: { ...cfg.providers, [name]: {
- name,
- provider_type: "kimi",
- base_url: null,
- api_key: null,
- env: {},
- }},
- }));
- setSelectedProvider(name);
- };
-
- const handleUpdateProvider = (provider: Provider) => {
- updateConfig((cfg) => ({
- ...cfg,
- providers: { ...cfg.providers, [provider.name]: provider },
- }));
- };
-
- const handleDeleteProvider = (name: string) => {
- updateConfig((cfg) => {
- const providers = { ...cfg.providers };
- delete providers[name];
- return { ...cfg, providers };
- });
- if (selectedProvider === name) {
- setSelectedProvider("");
- setSelectedModel("");
- }
- };
-
- const handleAddModel = () => {
- const alias = `model-${models.length + 1}`;
- updateConfig((cfg) => ({
- ...cfg,
- models: {
- ...cfg.models,
- [alias]: {
- alias,
- provider: selectedProvider || Object.keys(cfg.providers)[0] || "",
- model: "",
- max_context_size: 262144,
- display_name: null,
- },
- },
- }));
- setSelectedModel(alias);
- };
-
- const handleUpdateModel = (model: Model) => {
- updateConfig((cfg) => ({
- ...cfg,
- models: { ...cfg.models, [model.alias]: model },
- }));
- };
-
- const handleDeleteModel = (alias: string) => {
- updateConfig((cfg) => {
- const models = { ...cfg.models };
- delete models[alias];
- return { ...cfg, models };
- });
- if (selectedModel === alias) setSelectedModel("");
- };
-
- const handleProfileAction = async (
- action: "new" | "duplicate" | "rename" | "delete" | "switch",
- filename: string
- ) => {
- if (action === "switch") {
- await switchProfile(filename);
- return;
- }
-
- if (action === "new") {
- const name = prompt("输入 Profile 名称")?.trim();
- if (!name) return;
- const safe = name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
- await invoke("save_profile", {
- filename: `${safe}.toml`,
- config,
- });
- await refresh();
- return;
- }
-
- if (filename === "default") {
- alert("default Profile 不可进行复制/重命名/删除");
- return;
- }
-
- if (action === "duplicate") {
- const cfg = await invoke