84 lines
3.7 KiB
TypeScript
84 lines
3.7 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Button, Card, Form, InputNumber, message, Modal, Select, Space, Switch, Table, Tag } from 'antd';
|
|
import { EditOutlined, PlusOutlined, RobotOutlined } from '@ant-design/icons';
|
|
import { createLlmBillingPolicy, getLlmBillingPolicies, updateLlmBillingPolicy } from '../api';
|
|
import type { LlmBillingPolicy } from '../types';
|
|
|
|
const SCENES: Array<{ value: string; label: string }> = [
|
|
{ value: 'generation_record_text_prompt_optimize', label: 'AI创作－提示词优化' },
|
|
{ value: 'hot_opening_image_prompt_optimize', label: '爆款开头复刻－图片提示词优化' },
|
|
{ value: 'hot_opening_video_prompt_optimize', label: '爆款开头复刻－视频提示词优化' },
|
|
{ value: 'shot_image_prompt_optimize', label: '拆镜复刻－图片提示词优化' },
|
|
{ value: 'shot_video_prompt_optimize', label: '拆镜复刻－视频提示词优化' },
|
|
{ value: 'shot_original_video_analysis', label: '拆镜复刻－原视频AI分析' },
|
|
{ value: 'shot_segment_video_analysis', label: '拆镜复刻－片段视频AI分析' },
|
|
];
|
|
|
|
const AdminLlmBillingPolicies: React.FC = () => {
|
|
const [items, setItems] = useState<LlmBillingPolicy[]>([]);
|
|
const [editing, setEditing] = useState<LlmBillingPolicy | null>(null);
|
|
const [open, setOpen] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [form] = Form.useForm();
|
|
|
|
const load = async () => {
|
|
setLoading(true);
|
|
try {
|
|
setItems(await getLlmBillingPolicies());
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { load(); }, []);
|
|
|
|
const edit = (item?: LlmBillingPolicy) => {
|
|
setEditing(item || null);
|
|
setOpen(true);
|
|
form.resetFields();
|
|
form.setFieldsValue(item
|
|
? { scene_code: item.sceneCode, charge_credits: item.chargeCredits, is_active: item.isActive }
|
|
: { is_active: true, charge_credits: 5 });
|
|
};
|
|
|
|
const save = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
if (editing) await updateLlmBillingPolicy(editing.id, values);
|
|
else await createLlmBillingPolicy(values);
|
|
message.success('已保存');
|
|
setOpen(false);
|
|
load();
|
|
} catch (error: any) {
|
|
if (!error?.errorFields) message.error(error?.message || '保存失败');
|
|
}
|
|
};
|
|
|
|
return <Card
|
|
title={<Space><RobotOutlined />LLM积分配置</Space>}
|
|
extra={<Button type="primary" icon={<PlusOutlined />} onClick={() => edit()}>新增场景</Button>}
|
|
>
|
|
<Table rowKey="id" loading={loading} dataSource={items} columns={[
|
|
{ title: '功能', dataIndex: 'sceneName' },
|
|
{ title: '场景编码', dataIndex: 'sceneCode' },
|
|
{ title: '消费积分', dataIndex: 'chargeCredits' },
|
|
{ title: '版本', dataIndex: 'version' },
|
|
{ title: '状态', dataIndex: 'isActive', render: (v: boolean) => <Tag color={v ? 'green' : 'default'}>{v ? '启用' : '停用'}</Tag> },
|
|
{ title: '操作', render: (_: unknown, r: LlmBillingPolicy) => <Button type="link" icon={<EditOutlined />} onClick={() => edit(r)}>编辑</Button> },
|
|
]} />
|
|
<Modal open={open} title={editing ? '编辑LLM积分场景' : '新增LLM积分场景'} onOk={save} onCancel={() => setOpen(false)}>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item name="scene_code" label="业务功能" rules={[{ required: true }]}>
|
|
<Select disabled={!!editing} options={SCENES} />
|
|
</Form.Item>
|
|
<Form.Item name="charge_credits" label="消费积分" rules={[{ required: true }]}>
|
|
<InputNumber min={0.01} precision={2} style={{ width: '100%' }} />
|
|
</Form.Item>
|
|
<Form.Item name="is_active" label="启用" valuePropName="checked"><Switch /></Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</Card>;
|
|
};
|
|
|
|
export default AdminLlmBillingPolicies;
|