269 lines
8.7 KiB
TypeScript
269 lines
8.7 KiB
TypeScript
import React, { useState, useEffect, useMemo } from 'react';
|
||
import { Card, Button, Modal, Form, Input, InputNumber, message, Tag, Popconfirm, Tooltip, Empty } from 'antd';
|
||
import { PlusOutlined, DeleteOutlined, FireOutlined, QuestionCircleOutlined, ReloadOutlined, EditOutlined } from '@ant-design/icons';
|
||
import { api } from '../api';
|
||
// @ts-ignore
|
||
import PageTitleBar from '../components/PageTitleBar/PageTitleBar';
|
||
// @ts-ignore
|
||
import ListActionBar from '../components/ListActionBar/ListActionBar';
|
||
import ListTable from '../components/ListTable/ListTable';
|
||
|
||
interface HotwordItem {
|
||
id: number;
|
||
word: string;
|
||
pinyin: string;
|
||
weight: number;
|
||
}
|
||
|
||
const Hotwords: React.FC = () => {
|
||
const [hotwords, setHotwords] = useState<HotwordItem[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [modalVisible, setModalVisible] = useState(false);
|
||
const [searchText, setSearchText] = useState('');
|
||
const [currentHotword, setCurrentHotword] = useState<HotwordItem | null>(null);
|
||
const [form] = Form.useForm();
|
||
|
||
const fetchHotwords = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const data = await api.listHotwords();
|
||
setHotwords(data);
|
||
} catch (error) {
|
||
message.error('获取热词列表失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchHotwords();
|
||
}, []);
|
||
|
||
const handleSubmit = async () => {
|
||
try {
|
||
const values = await form.validateFields();
|
||
if (currentHotword) {
|
||
await api.updateHotword(currentHotword.id, values);
|
||
message.success('修改成功');
|
||
} else {
|
||
await api.createHotword(values);
|
||
message.success('添加成功');
|
||
}
|
||
handleModalClose();
|
||
fetchHotwords();
|
||
} catch (error) {
|
||
// message.error('操作失败');
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (id: number) => {
|
||
try {
|
||
await api.deleteHotword(id);
|
||
message.success('删除成功');
|
||
fetchHotwords();
|
||
} catch (error) {
|
||
message.error('删除失败');
|
||
}
|
||
};
|
||
|
||
const handleEdit = (record: HotwordItem) => {
|
||
setCurrentHotword(record);
|
||
form.setFieldsValue(record);
|
||
setModalVisible(true);
|
||
};
|
||
|
||
const handleModalClose = () => {
|
||
setModalVisible(false);
|
||
setCurrentHotword(null);
|
||
form.resetFields();
|
||
};
|
||
|
||
const filteredHotwords = useMemo(() => {
|
||
if (!searchText) return hotwords;
|
||
return hotwords.filter(item =>
|
||
item.word.includes(searchText) ||
|
||
item.pinyin.toLowerCase().includes(searchText.toLowerCase())
|
||
);
|
||
}, [hotwords, searchText]);
|
||
|
||
const columns = [
|
||
{
|
||
title: '热词',
|
||
dataIndex: 'word',
|
||
key: 'word',
|
||
width: '30%',
|
||
render: (t: string) => (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<FireOutlined style={{ color: '#ff4d4f' }} />
|
||
<span style={{ fontWeight: 600, fontSize: '15px' }}>{t}</span>
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
title: '拼音',
|
||
dataIndex: 'pinyin',
|
||
key: 'pinyin',
|
||
width: '30%',
|
||
render: (t: string) => <Tag color="blue" style={{ fontFamily: 'monospace' }}>{t}</Tag>
|
||
},
|
||
{
|
||
title: '权重',
|
||
dataIndex: 'weight',
|
||
key: 'weight',
|
||
width: '20%',
|
||
render: (w: number) => {
|
||
let color = 'default';
|
||
if (w >= 5) color = 'red';
|
||
else if (w >= 2) color = 'orange';
|
||
else if (w >= 1) color = 'green';
|
||
|
||
return (
|
||
<Tooltip title={`权重: ${w}`}>
|
||
<Tag color={color} style={{ minWidth: 40, textAlign: 'center', fontWeight: 'bold' }}>{w}x</Tag>
|
||
</Tooltip>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 180,
|
||
render: (_: any, record: HotwordItem) => (
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<Button
|
||
type="text"
|
||
icon={<EditOutlined />}
|
||
onClick={() => handleEdit(record)}
|
||
style={{ color: '#1890ff' }}
|
||
>
|
||
编辑
|
||
</Button>
|
||
<Popconfirm
|
||
title="确定删除该热词吗？"
|
||
description="删除后将不再对该词进行强化识别"
|
||
onConfirm={() => handleDelete(record.id)}
|
||
okText="删除"
|
||
cancelText="取消"
|
||
okButtonProps={{ danger: true }}
|
||
>
|
||
<Button type="text" danger icon={<DeleteOutlined />}>
|
||
删除
|
||
</Button>
|
||
</Popconfirm>
|
||
</div>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="page-wrapper" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||
<PageTitleBar
|
||
title="热词管理"
|
||
description="配置语音识别热词，提升特定词汇（如人名、地名、专业术语）的识别准确率"
|
||
badge={hotwords.length}
|
||
/>
|
||
|
||
<div style={{ flex: 1, padding: '0 24px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||
<Card bodyStyle={{ padding: 0 }} bordered={false} style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
|
||
<div style={{ padding: '16px 24px', borderBottom: '1px solid #f0f0f0' }}>
|
||
<ListActionBar
|
||
actions={[
|
||
{
|
||
key: 'add',
|
||
label: '添加热词',
|
||
type: 'primary',
|
||
icon: <PlusOutlined />,
|
||
onClick: () => setModalVisible(true),
|
||
}
|
||
]}
|
||
search={{
|
||
placeholder: "搜索热词或拼音...",
|
||
value: searchText,
|
||
onChange: (val: string) => setSearchText(val),
|
||
width: 320
|
||
}}
|
||
showRefresh
|
||
onRefresh={fetchHotwords}
|
||
/>
|
||
</div>
|
||
|
||
<div style={{ flex: 1, overflow: 'hidden' }}>
|
||
<ListTable
|
||
columns={columns}
|
||
dataSource={filteredHotwords}
|
||
rowKey="id"
|
||
loading={loading}
|
||
pagination={{ pageSize: 10, showSizeChanger: true, showQuickJumper: true }}
|
||
scroll={{ x: 800, y: 'calc(100vh - 340px)' }}
|
||
/>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
|
||
<Modal
|
||
title={
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||
<div style={{ background: '#e6f7ff', padding: 8, borderRadius: '50%', color: '#1890ff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<FireOutlined style={{ fontSize: 18 }} />
|
||
</div>
|
||
<span style={{ fontSize: 16 }}>{currentHotword ? '编辑热词' : '添加新热词'}</span>
|
||
</div>
|
||
}
|
||
open={modalVisible}
|
||
onCancel={handleModalClose}
|
||
onOk={handleSubmit}
|
||
destroyOnClose
|
||
width={520}
|
||
okText={currentHotword ? '保存' : '添加'}
|
||
cancelText="取消"
|
||
>
|
||
<Form form={form} layout="vertical" style={{ marginTop: 24 }}>
|
||
<Form.Item
|
||
name="word"
|
||
label={
|
||
<span>
|
||
热词文本 <Tooltip title="需要提高识别准确率的专有名词、术语等"><QuestionCircleOutlined style={{ color: '#999' }} /></Tooltip>
|
||
</span>
|
||
}
|
||
rules={[{ required: true, message: '请输入热词' }]}
|
||
>
|
||
<Input placeholder="请输入需要强化的词汇，如：人工智能" size="large" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="weight"
|
||
label={
|
||
<span>
|
||
权重倍数 <Tooltip title="权重越高，该词被识别出的概率越大。推荐范围 2.0 - 5.0"><QuestionCircleOutlined style={{ color: '#999' }} /></Tooltip>
|
||
</span>
|
||
}
|
||
initialValue={2.0}
|
||
>
|
||
<InputNumber
|
||
min={1.0}
|
||
max={10.0}
|
||
step={0.5}
|
||
style={{ width: '100%' }}
|
||
size="large"
|
||
addonAfter="倍"
|
||
/>
|
||
</Form.Item>
|
||
|
||
<div style={{ background: '#f9f9f9', padding: 16, borderRadius: 8, border: '1px solid #f0f0f0' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, fontWeight: 500, color: '#333' }}>
|
||
<QuestionCircleOutlined /> 使用说明
|
||
</div>
|
||
<ul style={{ paddingLeft: 20, margin: 0, color: '#666', fontSize: 13, lineHeight: 1.8 }}>
|
||
<li>热词生效需要一定时间，通常在下一次识别会话开始时生效。</li>
|
||
<li>系统会自动生成拼音，无需手动输入。</li>
|
||
<li>建议权重设置在 <b>2.0 - 5.0</b> 之间，过高可能导致发音相近的词被误识别。</li>
|
||
</ul>
|
||
</div>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Hotwords;
|