diff --git a/src/components/usage/PriceSettingsCard.tsx b/src/components/usage/PriceSettingsCard.tsx index 13261a2..796094c 100644 --- a/src/components/usage/PriceSettingsCard.tsx +++ b/src/components/usage/PriceSettingsCard.tsx @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'; import { Card } from '@/components/ui/Card'; import { Button } from '@/components/ui/Button'; import { Input } from '@/components/ui/Input'; +import { Modal } from '@/components/ui/Modal'; import { Select } from '@/components/ui/Select'; import type { ModelPrice } from '@/utils/usage'; import styles from '@/pages/UsagePage.module.scss'; @@ -20,11 +21,18 @@ export function PriceSettingsCard({ }: PriceSettingsCardProps) { const { t } = useTranslation(); + // Add form state const [selectedModel, setSelectedModel] = useState(''); const [promptPrice, setPromptPrice] = useState(''); const [completionPrice, setCompletionPrice] = useState(''); const [cachePrice, setCachePrice] = useState(''); + // Edit modal state + const [editModel, setEditModel] = useState(null); + const [editPrompt, setEditPrompt] = useState(''); + const [editCompletion, setEditCompletion] = useState(''); + const [editCache, setEditCache] = useState(''); + const handleSavePrice = () => { if (!selectedModel) return; const prompt = parseFloat(promptPrice) || 0; @@ -44,12 +52,22 @@ export function PriceSettingsCard({ onPricesChange(newPrices); }; - const handleEditPrice = (model: string) => { + const handleOpenEdit = (model: string) => { const price = modelPrices[model]; - setSelectedModel(model); - setPromptPrice(price?.prompt?.toString() || ''); - setCompletionPrice(price?.completion?.toString() || ''); - setCachePrice(price?.cache?.toString() || ''); + setEditModel(model); + setEditPrompt(price?.prompt?.toString() || ''); + setEditCompletion(price?.completion?.toString() || ''); + setEditCache(price?.cache?.toString() || ''); + }; + + const handleSaveEdit = () => { + if (!editModel) return; + const prompt = parseFloat(editPrompt) || 0; + const completion = parseFloat(editCompletion) || 0; + const cache = editCache.trim() === '' ? prompt : parseFloat(editCache) || 0; + const newPrices = { ...modelPrices, [editModel]: { prompt, completion, cache } }; + onPricesChange(newPrices); + setEditModel(null); }; const handleModelSelect = (value: string) => { @@ -147,7 +165,7 @@ export function PriceSettingsCard({
-
+ + {/* Edit Modal */} + setEditModel(null)} + footer={ +
+ + +
+ } + width={420} + > +
+
+ + setEditPrompt(e.target.value)} + placeholder="0.00" + step="0.0001" + /> +
+
+ + setEditCompletion(e.target.value)} + placeholder="0.00" + step="0.0001" + /> +
+
+ + setEditCache(e.target.value)} + placeholder="0.00" + step="0.0001" + /> +
+
+
); } diff --git a/src/pages/UsagePage.module.scss b/src/pages/UsagePage.module.scss index 372e2ff..6b597f9 100644 --- a/src/pages/UsagePage.module.scss +++ b/src/pages/UsagePage.module.scss @@ -809,6 +809,12 @@ flex-shrink: 0; } +.editModalBody { + display: flex; + flex-direction: column; + gap: 12px; +} + // Chart Section (80%比例) .chartSection { display: flex;