);
}
```
---
## 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 (
);
}
```
---
## Task 12: Build BottomToolbar and App.tsx
**Files:**
- Create: `src/components/BottomToolbar.tsx`
- Create: `src/App.tsx`
- [ ] **Step 1: Write BottomToolbar.tsx**
```tsx
interface BottomToolbarProps {
dirty: boolean;
onSave: () => void;
onReload: () => void;
onSaveAsProfile: () => void;
onOpenDir: () => void;
}
export function BottomToolbar({
dirty,
onSave,
onReload,
onSaveAsProfile,
onOpenDir,
}: BottomToolbarProps) {
return (
加载中...
;
}
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