feat: 添加公共设备会议创建页面
- 新增 `PublicDeviceMeetingCreate` 组件，用于创建公共设备会议 - 支持选择 ASR 模型、总结模型、总结模板等配置 - 提供参会人员、主持人、会议标签、访问密码等字段 - 实现表单验证和提交功能，支持推送到设备dev_na
chenhao
parent
7c3b65624e
commit
8716608afa
|
|
@ -0,0 +1,306 @@
|
|||
import { App, Button, Card, Col, DatePicker, Form, Input, Radio, Row, Select, Space, Spin, Typography } from "antd";
|
||||
import { AudioOutlined, CheckCircleOutlined, QrcodeOutlined } from "@ant-design/icons";
|
||||
import dayjs from "dayjs";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
import { listUsers } from "@/api";
|
||||
import { getAiModelDefault, getAiModelPage, type AiModelVO } from "@/api/business/aimodel";
|
||||
import { getHotWordPage, type HotWordVO } from "@/api/business/hotword";
|
||||
import { getHotWordGroupOptions, type HotWordGroupVO } from "@/api/business/hotwordGroup";
|
||||
import {
|
||||
createPublicDeviceMeetingBySession,
|
||||
type PublicDeviceMeetingCreateCommand,
|
||||
type SummaryDetailLevel,
|
||||
} from "@/api/business/meeting";
|
||||
import { getPromptPage, type PromptTemplateVO } from "@/api/business/prompt";
|
||||
import type { SysUser } from "@/types";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
const { Option } = Select;
|
||||
|
||||
type FormValues = {
|
||||
title: string;
|
||||
meetingTime: dayjs.Dayjs;
|
||||
participants?: number[];
|
||||
tags?: string[];
|
||||
hostUserId?: number;
|
||||
asrModelId: number;
|
||||
summaryModelId: number;
|
||||
promptId: number;
|
||||
hotWordGroupId?: number;
|
||||
summaryDetailLevel: SummaryDetailLevel;
|
||||
useSpkId?: boolean;
|
||||
enableTextRefine?: boolean;
|
||||
userPrompt?: string;
|
||||
accessPassword?: string;
|
||||
};
|
||||
|
||||
export default function PublicDeviceMeetingCreate() {
|
||||
const { message } = App.useApp();
|
||||
const navigate = useNavigate();
|
||||
const { sessionId } = useParams<{ sessionId: string }>();
|
||||
const [form] = Form.useForm<FormValues>();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [asrModels, setAsrModels] = useState<AiModelVO[]>([]);
|
||||
const [llmModels, setLlmModels] = useState<AiModelVO[]>([]);
|
||||
const [prompts, setPrompts] = useState<PromptTemplateVO[]>([]);
|
||||
const [hotwordList, setHotwordList] = useState<HotWordVO[]>([]);
|
||||
const [hotWordGroups, setHotWordGroups] = useState<HotWordGroupVO[]>([]);
|
||||
const [userList, setUserList] = useState<SysUser[]>([]);
|
||||
|
||||
const watchedPromptId = Form.useWatch("promptId", form);
|
||||
const watchedHotWordGroupId = Form.useWatch("hotWordGroupId", form);
|
||||
|
||||
const selectedPrompt = useMemo(
|
||||
() => prompts.find((item) => item.id === watchedPromptId) || null,
|
||||
[prompts, watchedPromptId]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("accessToken");
|
||||
if (!token) {
|
||||
const redirect = encodeURIComponent(window.location.pathname + window.location.search);
|
||||
navigate(`/login?redirect=${redirect}`, { replace: true });
|
||||
return;
|
||||
}
|
||||
void loadInitialData();
|
||||
}, [navigate]);
|
||||
|
||||
const loadInitialData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [asrRes, llmRes, promptRes, hotwordRes, hotWordGroupRes, users, defaultAsr, defaultLlm] = await Promise.all([
|
||||
getAiModelPage({ current: 1, size: 100, type: "ASR" }),
|
||||
getAiModelPage({ current: 1, size: 100, type: "LLM" }),
|
||||
getPromptPage({ current: 1, size: 100 }),
|
||||
getHotWordPage({ current: 1, size: 1000 }),
|
||||
getHotWordGroupOptions(),
|
||||
listUsers(),
|
||||
getAiModelDefault("ASR"),
|
||||
getAiModelDefault("LLM"),
|
||||
]);
|
||||
const activePrompts = promptRes.data.data.records.filter((item: PromptTemplateVO) => item.status === 1);
|
||||
const defaultPrompt = activePrompts[0];
|
||||
setAsrModels(asrRes.data.data.records.filter((item: AiModelVO) => item.status === 1));
|
||||
setLlmModels(llmRes.data.data.records.filter((item: AiModelVO) => item.status === 1));
|
||||
setPrompts(activePrompts);
|
||||
setHotwordList(hotwordRes.data.data.records.filter((item: HotWordVO) => item.status === 1));
|
||||
setHotWordGroups((hotWordGroupRes.data.data || []).filter((item: HotWordGroupVO) => item.status === 1));
|
||||
setUserList(users || []);
|
||||
form.setFieldsValue({
|
||||
title: `设备会议 ${dayjs().format("MM-DD HH:mm")}`,
|
||||
meetingTime: dayjs(),
|
||||
asrModelId: defaultAsr.data.data?.id,
|
||||
summaryModelId: defaultLlm.data.data?.id,
|
||||
promptId: defaultPrompt?.id,
|
||||
hotWordGroupId: defaultPrompt?.hotWordGroupId ?? 0,
|
||||
summaryDetailLevel: "STANDARD",
|
||||
useSpkId: true,
|
||||
enableTextRefine: false,
|
||||
});
|
||||
} catch {
|
||||
message.error("加载建会配置失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!sessionId) {
|
||||
message.error("扫码会话不存在");
|
||||
return;
|
||||
}
|
||||
const values = await form.validateFields();
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const selectedHotWords = values.hotWordGroupId == null || values.hotWordGroupId === 0
|
||||
? undefined
|
||||
: hotwordList
|
||||
.filter((item) => item.hotWordGroupId === values.hotWordGroupId)
|
||||
.map((item) => item.word)
|
||||
.filter((word) => !!word?.trim());
|
||||
|
||||
const payload: PublicDeviceMeetingCreateCommand = {
|
||||
title: values.title,
|
||||
meetingTime: values.meetingTime.format("YYYY-MM-DD HH:mm:ss"),
|
||||
participants: values.participants?.join(",") || "",
|
||||
tags: values.tags?.join(",") || "",
|
||||
hostUserId: values.hostUserId,
|
||||
asrModelId: values.asrModelId,
|
||||
summaryModelId: values.summaryModelId,
|
||||
promptId: values.promptId,
|
||||
hotWordGroupId: values.hotWordGroupId,
|
||||
summaryDetailLevel: values.summaryDetailLevel,
|
||||
useSpkId: values.useSpkId ? 1 : 0,
|
||||
enableTextRefine: !!values.enableTextRefine,
|
||||
userPrompt: values.userPrompt,
|
||||
hotWords: selectedHotWords,
|
||||
accessPassword: values.accessPassword?.trim() || undefined,
|
||||
};
|
||||
await createPublicDeviceMeetingBySession(sessionId, payload);
|
||||
message.success("会议已创建，已推送到设备");
|
||||
form.resetFields();
|
||||
navigate("/meetings");
|
||||
} catch {
|
||||
message.error("创建设备会议失败");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: "100vh", background: "linear-gradient(180deg, #f7fbff 0%, #eef4f8 100%)", padding: "48px 16px" }}>
|
||||
<div style={{ maxWidth: 980, margin: "0 auto" }}>
|
||||
<Card style={{ borderRadius: 20, boxShadow: "0 24px 64px rgba(15, 49, 86, 0.08)", border: "1px solid #d9e6f2" }}>
|
||||
<Space direction="vertical" size={8} style={{ width: "100%", marginBottom: 32 }}>
|
||||
<Space size={12}>
|
||||
<div style={{ width: 52, height: 52, borderRadius: 14, background: "#e6f4ff", display: "flex", alignItems: "center", justifyContent: "center", color: "#1677ff", fontSize: 24 }}>
|
||||
<QrcodeOutlined />
|
||||
</div>
|
||||
<div>
|
||||
<Title level={3} style={{ margin: 0 }}>扫码设备发起会议</Title>
|
||||
<Text type="secondary">登录后填写会议基础信息，系统会把待开始会议推送到设备端。</Text>
|
||||
</div>
|
||||
</Space>
|
||||
<Space size={16} wrap>
|
||||
<Text type="secondary"><AudioOutlined /> 设备录音仍在设备端执行</Text>
|
||||
<Text type="secondary"><CheckCircleOutlined /> 创建成功后会自动推送到扫码设备</Text>
|
||||
</Space>
|
||||
</Space>
|
||||
|
||||
{loading ? (
|
||||
<div style={{ padding: "64px 0", textAlign: "center" }}>
|
||||
<Spin />
|
||||
</div>
|
||||
) : (
|
||||
<Form form={form} layout="vertical">
|
||||
<Row gutter={24}>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="title" label="会议标题" rules={[{ required: true, message: "请输入会议标题" }]}>
|
||||
<Input size="large" placeholder="请输入会议标题" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="meetingTime" label="会议时间" rules={[{ required: true, message: "请选择会议时间" }]}>
|
||||
<DatePicker showTime style={{ width: "100%" }} size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={24}>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="participants" label="参会人员">
|
||||
<Select mode="multiple" placeholder="选择参会人员" showSearch optionFilterProp="children" size="large">
|
||||
{userList.map((u) => (
|
||||
<Option key={u.userId} value={u.userId}>{u.displayName || u.username}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="hostUserId" label="主持人">
|
||||
<Select allowClear placeholder="默认当前登录人" showSearch optionFilterProp="children" size="large">
|
||||
{userList.map((u) => (
|
||||
<Option key={u.userId} value={u.userId}>{u.displayName || u.username}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={24}>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="tags" label="会议标签">
|
||||
<Select mode="tags" placeholder="输入标签" size="large" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="accessPassword" label="访问密码">
|
||||
<Input size="large" placeholder="可为空" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={24}>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="asrModelId" label="语音识别模型" rules={[{ required: true, message: "请选择 ASR 模型" }]}>
|
||||
<Select placeholder="选择 ASR 模型" size="large">
|
||||
{asrModels.map((m) => (
|
||||
<Option key={m.id} value={m.id}>{m.modelName}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="summaryModelId" label="总结模型" rules={[{ required: true, message: "请选择总结模型" }]}>
|
||||
<Select placeholder="选择总结模型" size="large">
|
||||
{llmModels.map((m) => (
|
||||
<Option key={m.id} value={m.id}>{m.modelName}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={24}>
|
||||
<Col span={24}>
|
||||
<Form.Item name="promptId" label="总结模板" rules={[{ required: true, message: "请选择总结模板" }]}>
|
||||
<Select placeholder="请选择总结模板" showSearch optionFilterProp="children" size="large">
|
||||
{prompts.map((p) => (
|
||||
<Option key={p.id} value={p.id}>{p.templateName}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={24}>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item
|
||||
name="hotWordGroupId"
|
||||
label="热词组"
|
||||
extra={watchedHotWordGroupId != null ? "创建会议时优先使用这里选择的热词组" : undefined}
|
||||
>
|
||||
<Select
|
||||
placeholder={selectedPrompt?.hotWordGroupId ? "默认已带出模板热词组，可按需修改" : "请选择热词组"}
|
||||
size="large"
|
||||
options={[{ label: "不使用热词组", value: 0 }, ...hotWordGroups.map((item) => ({ label: `${item.groupName} (${item.hotWordCount}/200)`, value: item.id }))]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<Form.Item name="summaryDetailLevel" label="总结详细程度" rules={[{ required: true, message: "请选择总结详细程度" }]}>
|
||||
<Radio.Group>
|
||||
<Radio value="DETAILED">详细</Radio>
|
||||
<Radio value="STANDARD">标准</Radio>
|
||||
<Radio value="BRIEF">简洁</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={24}>
|
||||
<Col span={24}>
|
||||
<Form.Item name="userPrompt" label="用户提示词">
|
||||
<Input.TextArea autoSize={{ minRows: 3, maxRows: 6 }} maxLength={1000} showCount placeholder="例如：请重点关注待办事项与负责人" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: 24 }}>
|
||||
<Space>
|
||||
<Button size="large" onClick={() => navigate(-1)}>返回</Button>
|
||||
<Button type="primary" size="large" loading={submitting} onClick={() => void handleSubmit()}>
|
||||
创建并推送到设备
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue