From 5e1e5f68e142f20fc7a66fe492e67bd0c8a9e679 Mon Sep 17 00:00:00 2001 From: zhaoying Date: Tue, 3 Feb 2026 14:12:06 +0800 Subject: [PATCH] feat(web): Ontology support import & export; docs(web): add comments to the src/views/Ontology directory --- web/src/api/ontology.ts | 16 +- web/src/components/Upload/UploadFiles.tsx | 36 +++-- web/src/i18n/en.ts | 6 + web/src/i18n/zh.ts | 6 + web/src/utils/request.ts | 7 +- .../components/OntologyClassExtractModal.tsx | 50 +++++- .../components/OntologyClassModal.tsx | 36 ++++- .../components/OntologyExportModal.tsx | 144 ++++++++++++++++++ .../components/OntologyImportModal.tsx | 139 +++++++++++++++++ .../Ontology/components/OntologyModal.tsx | 37 ++++- .../views/Ontology/components/PageHeader.tsx | 21 +++ web/src/views/Ontology/index.tsx | 86 ++++++++++- web/src/views/Ontology/pages/Detail.tsx | 32 ++++ web/src/views/Ontology/types.ts | 137 ++++++++++++++++- 14 files changed, 714 insertions(+), 39 deletions(-) create mode 100644 web/src/views/Ontology/components/OntologyExportModal.tsx create mode 100644 web/src/views/Ontology/components/OntologyImportModal.tsx diff --git a/web/src/api/ontology.ts b/web/src/api/ontology.ts index 4213d362..becf899f 100644 --- a/web/src/api/ontology.ts +++ b/web/src/api/ontology.ts @@ -1,5 +1,11 @@ +/* + * @Author: ZhaoYing + * @Date: 2026-02-03 13:59:12 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-02-03 13:59:12 + */ import { request } from '@/utils/request' -import type { Query, OntologyModalData, OntologyClassModalData, OntologyClassExtractModalData } from '@/views/Ontology/types' +import type { Query, OntologyModalData, OntologyClassModalData, OntologyClassExtractModalData, OntologyExportModalData } from '@/views/Ontology/types' // Scene list export const getOntologyScenesUrl = '/memory/ontology/scenes' @@ -37,3 +43,11 @@ export const createOntologyClass = (data: OntologyClassModalData) => { export const deleteOntologyClass = (class_id: string) => { return request.delete(`/memory/ontology/class/${class_id}`) } +// Import scenario +export const ontologyImport = (data: unknown) => { + return request.uploadFile('/memory/ontology/import', data) +} +// Export scenario +export const ontologyExport = (data: OntologyExportModalData, fileName: string, callback: () => void) => { + return request.downloadFile('/memory/ontology/export', fileName, data, callback) +} \ No newline at end of file diff --git a/web/src/components/Upload/UploadFiles.tsx b/web/src/components/Upload/UploadFiles.tsx index 74b6a452..91b844f5 100644 --- a/web/src/components/Upload/UploadFiles.tsx +++ b/web/src/components/Upload/UploadFiles.tsx @@ -57,6 +57,10 @@ const ALL_FILE_TYPE: { htm: 'text/html', html: 'text/html', json: 'application/json', + owl: 'application/rdf+xml', + ttl: 'text/turtle', + rdf: 'application/rdf+xml', + xml: 'application/rdf+xml', } export interface UploadFilesRef { fileList: UploadFile[]; @@ -122,7 +126,7 @@ const UploadFiles = forwardRef(({ if (fileSize) { const isLtMaxSize = (file.size / 1024 / 1024) < fileSize; if (!isLtMaxSize) { - message.error(`文件大小不能超过 ${fileSize}MB`); + message.error(t('common.fileSizeTip', { size: fileSize })); return Upload.LIST_IGNORE; } } @@ -139,7 +143,7 @@ const UploadFiles = forwardRef(({ const isValidMimeType = file.type && accept ? accept.includes(file.type) : true; if (!isValidExtension && !isValidMimeType) { - message.error(`不支持的文件类型: ${fileExtension || file.type}`); + message.error(`${t('common.fileAcceptTip')}${fileExtension || file.type}`); return Upload.LIST_IGNORE; } } @@ -236,12 +240,12 @@ const UploadFiles = forwardRef(({ fileList, beforeUpload, headers: { - authorization: cookieUtils.get('authToken') || '', + authorization: `Bearer ${cookieUtils.get('authToken')}`, }, onRemove: handleRemove, onChange: handleChange, accept, - disabled, + disabled: disabled || fileList.length >= maxCount, showUploadList: { showPreviewIcon: false, showRemoveIcon: true, @@ -249,12 +253,12 @@ const UploadFiles = forwardRef(({ }, itemRender: (_, file, __, actions) => { return ( -
-
+
+
{file.name} - actions?.remove()}>Cancel + actions?.remove()}>{t('common.cancel')}
- + {isAutoUpload && }
); }, @@ -267,20 +271,20 @@ const UploadFiles = forwardRef(({ clearFiles })); - const hasProgress = fileList.some((item) => item.percent !== 100); + const hasProgress = isAutoUpload && fileList.some((item) => item.percent !== 100); if (isCanDrag) { return ( -
+
- - {!hasProgress && (!fileList || !fileList.length) && + + {(!isAutoUpload || !hasProgress && (!fileList || !fileList.length)) && <> -
- {t('common.dragUploadTip')}{t('common.uploadClickTip')} +
+ {t('common.dragUploadTip')}{t('common.uploadClickTip')}
- {fileType &&
{t('common.supportedFileTypes', { types: fileType.join(',') })}
} + {fileType &&
{t('common.supportedFileTypes', { types: fileType.join(',') })}
} {(fileSize || fileType || maxCount > 1) && (
{t('common.uploadFileTipMax', { max: fileSize, maxCount: maxCount })} @@ -288,7 +292,7 @@ const UploadFiles = forwardRef(({ )} } - {hasProgress &&
{t('common.uploading')}
} + {hasProgress &&
{t('common.uploading')}
}
diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts index 03d68016..d3c788df 100644 --- a/web/src/i18n/en.ts +++ b/web/src/i18n/en.ts @@ -426,6 +426,7 @@ export const en = { fileAcceptTip: 'Unsupported file type:', nextStep: 'Next Step', prevStep: 'Previous Step', + exportSuccess: 'Export successful', }, model: { searchPlaceholder: 'search model…', @@ -2471,6 +2472,11 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re extract: 'Project Inference', source: 'Not Added', target: 'Added', + import: 'Import Scenario', + format: 'Export Format', + export: 'Export Scenario', + scene_id: 'Scenario', + file: 'Import File', }, prompt: { editor: 'Prompt Generator', diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts index 30d9481b..4e1e52e4 100644 --- a/web/src/i18n/zh.ts +++ b/web/src/i18n/zh.ts @@ -980,6 +980,7 @@ export const zh = { fileAcceptTip: '不支持的文件类型:', nextStep: '下一步', prevStep: '上一步', + exportSuccess: '导出成功', }, product: { applicationManagement: '应用管理', @@ -2560,6 +2561,11 @@ export const zh = { extract: '工程推理', source: '未添加项', target: '已添加项', + import: '导入场景', + format: '导出格式', + export: '导出场景', + scene_id: '场景', + file: '导入文件', }, prompt: { editor: '提示词生成器', diff --git a/web/src/utils/request.ts b/web/src/utils/request.ts index e7112ded..fb37d82d 100644 --- a/web/src/utils/request.ts +++ b/web/src/utils/request.ts @@ -288,19 +288,20 @@ export const request = { ...config }); }, - downloadFile(url: string, fileName: string, data?: unknown) { + downloadFile(url: string, fileName: string, data?: unknown, callback?: () => void) { service.post(url, data, { responseType: "blob", }) .then(res =>{ const link = document.createElement("a"); - const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); + const blob = new Blob([res as unknown as BlobPart]); link.style.display = "none"; link.href = URL.createObjectURL(blob); - link.setAttribute("download", decodeURI(res.headers['filename'] || fileName)); + link.setAttribute("download", decodeURI(fileName || fileName)); document.body.appendChild(link); link.click(); document.body.removeChild(link); + callback?.() }); } }; diff --git a/web/src/views/Ontology/components/OntologyClassExtractModal.tsx b/web/src/views/Ontology/components/OntologyClassExtractModal.tsx index 1aba9c67..802202ef 100644 --- a/web/src/views/Ontology/components/OntologyClassExtractModal.tsx +++ b/web/src/views/Ontology/components/OntologyClassExtractModal.tsx @@ -1,3 +1,9 @@ +/* + * @Author: ZhaoYing + * @Date: 2026-02-03 14:10:42 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-02-03 14:10:42 + */ import { forwardRef, useImperativeHandle, useState } from 'react'; import { Form, Input, App, Transfer, type TransferProps, Flex } from 'antd'; import { useTranslation } from 'react-i18next'; @@ -12,24 +18,37 @@ import Tag from '@/components/Tag'; const FormItem = Form.Item; +/** + * Props for OntologyClassExtractModal component + */ interface OntologyClassExtractModalProps { + /** Callback function to refresh parent list after extraction */ refresh: () => void; } +/** + * Modal component for extracting ontology classes using LLM + * Two-step process: 1) Extract classes from scenario 2) Select and confirm classes to add + */ const OntologyClassExtractModal = forwardRef(({ refresh }, ref) => { + // Hooks const { t } = useTranslation(); const { message } = App.useApp(); - const [visible, setVisible] = useState(false); const [form] = Form.useForm(); + + // State + const [visible, setVisible] = useState(false); const [loading, setLoading] = useState(false) const [data, setData] = useState(null) const [extractData, setExtractData] = useState(null) const [targetKeys, setTargetKeys] = useState([]); const [selectedKeys, setSelectedKeys] = useState([]); - // 封装取消方法，添加关闭弹窗逻辑 + /** + * Close modal and reset all state + */ const handleClose = () => { setVisible(false); form.resetFields(); @@ -38,12 +57,19 @@ const OntologyClassExtractModal = forwardRef { form.resetFields(); setVisible(true); setData(vo) }; - // 封装保存方法，添加提交逻辑 + + /** + * Execute LLM extraction to get class suggestions + */ const handleSave = () => { if (!data?.scene_id) return; form @@ -69,6 +95,10 @@ const OntologyClassExtractModal = forwardRef { if (!extractData) { handleSave() @@ -92,11 +122,19 @@ const OntologyClassExtractModal = forwardRef { setTargetKeys(nextTargetKeys.filter(Boolean)); }; + /** + * Handle transfer component selection change + * @param sourceSelectedKeys - Selected keys in source list + * @param targetSelectedKeys - Selected keys in target list + */ const onSelectChange: TransferProps['onSelectChange'] = ( sourceSelectedKeys, targetSelectedKeys, @@ -104,7 +142,9 @@ const OntologyClassExtractModal = forwardRef ({ handleOpen, })); diff --git a/web/src/views/Ontology/components/OntologyClassModal.tsx b/web/src/views/Ontology/components/OntologyClassModal.tsx index 73e45060..087e542c 100644 --- a/web/src/views/Ontology/components/OntologyClassModal.tsx +++ b/web/src/views/Ontology/components/OntologyClassModal.tsx @@ -1,3 +1,9 @@ +/* + * @Author: ZhaoYing + * @Date: 2026-02-03 14:10:39 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-02-03 14:10:39 + */ import { forwardRef, useImperativeHandle, useState } from 'react'; import { Form, Input, App } from 'antd'; import { useTranslation } from 'react-i18next'; @@ -8,33 +14,53 @@ import { createOntologyClass } from '@/api/ontology' const FormItem = Form.Item; +/** + * Props for OntologyClassModal component + */ interface OntologyClassModalProps { + /** Callback function to refresh parent list after save */ refresh: () => void; } +/** + * Modal component for adding new ontology classes + * Provides form interface for class name and description + */ const OntologyClassModal = forwardRef(({ refresh }, ref) => { + // Hooks const { t } = useTranslation(); const { message } = App.useApp(); - const [visible, setVisible] = useState(false); const [form] = Form.useForm(); + + // State + const [visible, setVisible] = useState(false); const [loading, setLoading] = useState(false) const [scene_id, setSceneId] = useState(null) - // 封装取消方法，添加关闭弹窗逻辑 + /** + * Close modal and reset form state + */ const handleClose = () => { setVisible(false); form.resetFields(); setLoading(false) }; + /** + * Open modal for adding a new class + * @param scene_id - Target scene identifier + */ const handleOpen = (scene_id: string) => { form.resetFields(); setVisible(true); setSceneId(scene_id) }; - // 封装保存方法，添加提交逻辑 + + /** + * Validate and submit form data to create new class + */ const handleSave = () => { if (!scene_id) return; form @@ -56,7 +82,9 @@ const OntologyClassModal = forwardRef ({ handleOpen, })); diff --git a/web/src/views/Ontology/components/OntologyExportModal.tsx b/web/src/views/Ontology/components/OntologyExportModal.tsx new file mode 100644 index 00000000..a40beba2 --- /dev/null +++ b/web/src/views/Ontology/components/OntologyExportModal.tsx @@ -0,0 +1,144 @@ +/* + * @Author: ZhaoYing + * @Date: 2026-02-03 14:10:46 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-02-03 14:10:46 + */ +import { forwardRef, useImperativeHandle, useState } from 'react'; +import { Form, App, Select, type SelectProps } from 'antd'; +import { useTranslation } from 'react-i18next'; + +import type { OntologyExportModalData, OntologyExportModalRef } from '../types' +import RbModal from '@/components/RbModal' +import { ontologyExport, getOntologyScenesUrl } from '@/api/ontology' +import CustomSelect from '@/components/CustomSelect'; + +const FormItem = Form.Item; + +/** + * Props for OntologyExportModal component + */ +interface OntologyExportModalProps { + /** Callback function to refresh parent list after export */ + refresh: () => void; +} + +/** + * Modal component for exporting ontology scenes + * Supports RDF/XML (.owl) and Turtle (.ttl) formats + */ +const OntologyExportModal = forwardRef(({ + refresh +}, ref) => { + // Hooks + const { t } = useTranslation(); + const { message } = App.useApp(); + const [form] = Form.useForm(); + + // State + const [visible, setVisible] = useState(false); + const [loading, setLoading] = useState(false) + const [fileName, setFileName] = useState('') + + /** + * Close modal and reset form state + */ + const handleClose = () => { + setVisible(false); + form.resetFields(); + setLoading(false) + }; + + /** + * Open the export modal + */ + const handleOpen = () => { + form.resetFields(); + setVisible(true); + }; + + /** + * Handle scene selection change to set export filename + * @param _value - Selected scene ID + * @param option - Selected option containing scene name + */ + const handleChange: SelectProps['onChange'] = (_value, option) => { + const name = Array.isArray(option) ? option[0]?.children : option?.children; + setFileName(String(name || '')); + } + + /** + * Validate and submit form data to export ontology + * Downloads file with appropriate extension based on format + */ + const handleSave = () => { + form + .validateFields() + .then((values) => { + setLoading(true) + ontologyExport(values, `${fileName}.${values.format === 'rdfxml' ?'owl' : 'ttl'}`, () => { + message.success(t('common.exportSuccess')); + handleClose(); + refresh(); + setLoading(false) + }) + }) + .catch((err) => { + console.log('err', err) + }); + } + + /** + * Expose methods to parent component via ref + */ + useImperativeHandle(ref, () => ({ + handleOpen, + })); + + return ( + +
+ + + + + + + + + + + + + + +
+ + ); +}); + +export default OntologyImportModal; \ No newline at end of file diff --git a/web/src/views/Ontology/components/OntologyModal.tsx b/web/src/views/Ontology/components/OntologyModal.tsx index 82eebbd2..a4c203ed 100644 --- a/web/src/views/Ontology/components/OntologyModal.tsx +++ b/web/src/views/Ontology/components/OntologyModal.tsx @@ -1,3 +1,9 @@ +/* + * @Author: ZhaoYing + * @Date: 2026-02-03 14:10:28 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-02-03 14:10:28 + */ import { forwardRef, useImperativeHandle, useState } from 'react'; import { Form, Input, App } from 'antd'; import { useTranslation } from 'react-i18next'; @@ -8,21 +14,34 @@ import { createOntologyScene, updateOntologyScene } from '@/api/ontology' const FormItem = Form.Item; +/** + * Props for OntologyModal component + */ interface OntologyModalProps { + /** Callback function to refresh parent list after save */ refresh: () => void; } +/** + * Modal component for creating or editing ontology scenes + * Provides form interface for scene name and description + */ const OntologyModal = forwardRef(({ refresh }, ref) => { + // Hooks const { t } = useTranslation(); const { message } = App.useApp(); + const [form] = Form.useForm(); + + // State const [visible, setVisible] = useState(false); const [editVo, setEditVo] = useState(null) - const [form] = Form.useForm(); const [loading, setLoading] = useState(false) - // 封装取消方法，添加关闭弹窗逻辑 + /** + * Close modal and reset form state + */ const handleClose = () => { setVisible(false); form.resetFields(); @@ -30,6 +49,10 @@ const OntologyModal = forwardRef(({ setEditVo(null) }; + /** + * Open modal for creating or editing + * @param vo - Optional ontology item data for edit mode + */ const handleOpen = (vo?: OntologyItem) => { if (vo) { setEditVo(vo); @@ -39,7 +62,11 @@ const OntologyModal = forwardRef(({ } setVisible(true); }; - // 封装保存方法，添加提交逻辑 + + /** + * Validate and submit form data + * Creates new scene or updates existing one based on editVo + */ const handleSave = () => { form .validateFields() @@ -59,7 +86,9 @@ const OntologyModal = forwardRef(({ }); } - // 暴露给父组件的方法 + /** + * Expose methods to parent component via ref + */ useImperativeHandle(ref, () => ({ handleOpen, })); diff --git a/web/src/views/Ontology/components/PageHeader.tsx b/web/src/views/Ontology/components/PageHeader.tsx index 81009596..087a6d49 100644 --- a/web/src/views/Ontology/components/PageHeader.tsx +++ b/web/src/views/Ontology/components/PageHeader.tsx @@ -1,3 +1,9 @@ +/* + * @Author: ZhaoYing + * @Date: 2026-02-03 14:10:24 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-02-03 14:10:56 + */ import { type FC, type ReactNode } from 'react'; import { useNavigate } from 'react-router-dom'; import { Layout, Button } from 'antd'; @@ -6,11 +12,23 @@ import logoutIcon from '@/assets/images/logout_hover.svg' const { Header } = Layout; +/** + * Props for PageHeader component + */ interface ConfigHeaderProps { + /** Page title/name */ name?: string; + /** Subtitle content displayed below the title */ subTitle?: ReactNode | string; + /** Extra content displayed on the right side */ extra?: ReactNode; } + +/** + * Page header component for ontology pages + * Displays title, subtitle, back button and extra actions + * @param props - Component props + */ const PageHeader: FC = ({ name, subTitle, @@ -19,6 +37,9 @@ const PageHeader: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); + /** + * Navigate back to previous page + */ const goBack = () => { navigate(-1) } diff --git a/web/src/views/Ontology/index.tsx b/web/src/views/Ontology/index.tsx index 4d32dfa6..42a6544f 100644 --- a/web/src/views/Ontology/index.tsx +++ b/web/src/views/Ontology/index.tsx @@ -1,3 +1,9 @@ +/* + * @Author: ZhaoYing + * @Date: 2026-02-03 14:10:15 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-02-03 14:10:15 + */ import { type FC, useState, useRef, type MouseEvent } from 'react'; import { useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; @@ -5,29 +11,57 @@ import { Row, Col, Button, Flex, Divider, Space, App, Tooltip } from 'antd' import SearchInput from '@/components/SearchInput'; import OntologyModal from './components/OntologyModal' -import type { OntologyModalRef, OntologyItem, Query } from './types' +import type { OntologyModalRef, OntologyItem, Query, OntologyImportModalRef, OntologyExportModalRef } from './types' import RbCard from '@/components/RbCard/Card' import Tag from '@/components/Tag' import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList' import { getOntologyScenesUrl, deleteOntologyScene } from '@/api/ontology' import { formatDateTime } from '@/utils/format' +import OntologyImportModal from './components/OntologyImportModal' +import OntologyExportModal from './components/OntologyExportModal' +/** + * Ontology management page component + * Displays a list of ontology scenes with search, create, import, export functionality + */ const Ontology: FC = () => { + // Hooks const { t } = useTranslation(); const navigate = useNavigate() const { modal, message } = App.useApp(); + + // State const [query, setQuery] = useState({}); + + // Refs const scrollListRef = useRef(null) const entityModalRef = useRef(null) + const ontologyImportModalRef = useRef(null) + const ontologyExportModalRef = useRef(null) + /** + * Open modal to create a new ontology scene + */ const handleCreate = () => { entityModalRef.current?.handleOpen() } + + /** + * Open modal to edit an existing ontology scene + * @param record - The ontology item to edit + * @param e - Mouse event to prevent propagation + */ const handleEdit = (record: OntologyItem, e: MouseEvent) => { e.preventDefault(); e.stopPropagation(); entityModalRef.current?.handleOpen(record) } + + /** + * Delete an ontology scene with confirmation + * @param item - The ontology item to delete + * @param e - Mouse event to prevent propagation + */ const handleDelete = (item: OntologyItem, e: MouseEvent) => { e.preventDefault(); e.stopPropagation(); @@ -45,9 +79,35 @@ const Ontology: FC = () => { } }) } + + /** + * Navigate to ontology detail page + * @param record - The ontology item to view + */ const handleJump = (record: OntologyItem) => { navigate(`/ontology/${record.scene_id}`) } + + /** + * Refresh the ontology list + */ + const handleRefresh = () => { + scrollListRef.current?.refresh() + } + + /** + * Open export modal + */ + const handleExport = () => { + ontologyExportModalRef.current?.handleOpen() + } + + /** + * Open import modal + */ + const handleImport = () => { + ontologyImportModalRef.current?.handleOpen() + } return ( <> @@ -60,9 +120,17 @@ const Ontology: FC = () => { /> - + + + + + @@ -124,7 +192,15 @@ const Ontology: FC = () => { scrollListRef.current?.refresh()} + refresh={handleRefresh} + /> + + ) diff --git a/web/src/views/Ontology/pages/Detail.tsx b/web/src/views/Ontology/pages/Detail.tsx index b7123c5c..a61a83a2 100644 --- a/web/src/views/Ontology/pages/Detail.tsx +++ b/web/src/views/Ontology/pages/Detail.tsx @@ -1,3 +1,9 @@ +/* + * @Author: ZhaoYing + * @Date: 2026-02-03 14:10:20 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-02-03 14:10:20 + */ import { type FC, useEffect, useState, useRef } from 'react' import { useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; @@ -12,22 +18,35 @@ import SearchInput from '@/components/SearchInput'; import OntologyClassExtractModal from '../components/OntologyClassExtractModal' import BodyWrapper from '@/components/Empty/BodyWrapper' +/** + * Ontology detail page component + * Displays and manages classes within a specific ontology scene + */ const Detail: FC = () => { + // Hooks const { t } = useTranslation(); const { id } = useParams() const { modal, message } = App.useApp() + + // Refs const ontologyClassModalRef = useRef(null) const ontologyClassExtractModalRef = useRef(null) + + // State const [query, setQuery] = useState<{ class_name?: string; }>({}); const [loading, setLoading] = useState(false) const [data, setData] = useState({} as OntologyClassData) + // Fetch data when component mounts or dependencies change useEffect(() => { getData() }, [id, query]) + /** + * Fetch ontology class list data + */ const getData = () => { if (!id) return; setLoading(true) @@ -42,6 +61,11 @@ const Detail: FC = () => { setLoading(false) }) } + + /** + * Delete an ontology class with confirmation + * @param item - The class item to delete + */ const handleDelete = (item: OntologyClassItem) => { modal.confirm({ title: t('common.confirmDeleteDesc', { name: item.class_name }), @@ -57,9 +81,17 @@ const Detail: FC = () => { } }) } + + /** + * Open modal to add a new class + */ const handleAdd = () => { ontologyClassModalRef.current?.handleOpen(data.scene_id) } + + /** + * Open modal to extract classes using LLM + */ const handleExtract = () => { ontologyClassExtractModalRef.current?.handleOpen(data) } diff --git a/web/src/views/Ontology/types.ts b/web/src/views/Ontology/types.ts index fc9af2ea..d78d8464 100644 --- a/web/src/views/Ontology/types.ts +++ b/web/src/views/Ontology/types.ts @@ -1,79 +1,214 @@ +/* + * @Author: ZhaoYing + * @Date: 2026-02-03 14:10:10 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-02-03 14:10:10 + */ +/** + * Query parameters for ontology list pagination and filtering + */ export interface Query { + /** Number of items per page */ pagesize?: number; + /** Current page number */ page?: number; + /** Scene name for filtering */ scene_name?: string; } +/** + * Ontology scene item data structure + */ export interface OntologyItem { + /** Unique identifier for the scene */ scene_id: string; + /** Name of the ontology scene */ scene_name: string; + /** Description of the ontology scene */ scene_description: string; + /** Number of entity types in the scene */ type_num: number; + /** Array of entity type names */ entity_type: string[]; + /** Associated workspace identifier */ workspace_id: string; + /** Creation timestamp */ created_at: number; + /** Last update timestamp */ updated_at: number; + /** Total count of classes in the scene */ classes_count: number; } +/** + * Form data for creating/editing ontology scene + */ export interface OntologyModalData { + /** Scene name */ scene_name: string; + /** Scene description */ scene_description: string; } +/** + * Ref methods exposed by OntologyModal component + */ export interface OntologyModalRef { + /** + * Open the modal for creating or editing + * @param data - Optional ontology item data for editing mode + */ handleOpen: (data?: OntologyItem) => void; } +/** + * Ontology class item data structure + */ export interface OntologyClassItem { + /** Unique identifier for the class */ class_id: string; + /** Name of the class */ class_name: string; + /** Description of the class */ class_description: string; + /** Associated scene identifier */ scene_id: string; + /** Creation timestamp */ created_at: number; + /** Last update timestamp */ updated_at: number; } +/** + * Response data structure for ontology class list + */ export interface OntologyClassData { + /** Total number of classes */ total: number; + /** Scene identifier */ scene_id: string; + /** Scene name */ scene_name: string; + /** Scene description */ scene_description: string; + /** Array of class items */ items: OntologyClassItem[]; } +/** + * Data structure for adding a new class + */ export interface AddClassItem { + /** Name of the class to add */ class_name: string; + /** Description of the class to add */ class_description: string; } +/** + * Form data for creating ontology classes + */ export interface OntologyClassModalData { + /** Target scene identifier */ scene_id: string; + /** Array of classes to create */ classes: AddClassItem[] } +/** + * Ref methods exposed by OntologyClassModal component + */ export interface OntologyClassModalRef { + /** + * Open the modal for adding classes + * @param scene_id - Target scene identifier + */ handleOpen: (scene_id: string) => void; } +/** + * Form data for extracting ontology classes using LLM + */ export interface OntologyClassExtractModalData { + /** LLM model identifier */ llm_id: string; + /** Target scene identifier */ scene_id: string; + /** Scenario description for extraction */ scenario: string; - domain: string; // scene_name + /** Domain name (same as scene_name) */ + domain: string; } +/** + * Ref methods exposed by OntologyClassExtractModal component + */ export interface OntologyClassExtractModalRef { + /** + * Open the modal for extracting classes + * @param vo - Ontology class data containing scene information + */ handleOpen: (vo: OntologyClassData) => void; } +/** + * Extracted class item from LLM + */ export interface ExtractClassItem { + /** Unique identifier for the extracted class */ id: string; + /** English name of the class */ name: string; + /** Chinese name of the class */ name_chinese: string; + /** Description of the class */ description: string; + /** Example instances of the class */ examples: string[]; + /** Parent class name if exists */ parent_class: string | null; + /** Entity type classification */ entity_type: string; + /** Domain the class belongs to */ domain: string; } +/** + * Response data structure for class extraction + */ export interface ExtractData { + /** Domain name */ domain: string; + /** Number of classes extracted */ extracted_count: number; + /** Array of extracted class items */ classes: ExtractClassItem[] } +/** + * Ref methods exposed by OntologyImportModal component + */ +export interface OntologyImportModalRef { + /** Open the import modal */ + handleOpen: () => void; +} +/** + * Form data for importing ontology + */ +export interface OntologyImportModalData { + /** Name for the imported scene */ + scene_name: string; + /** Optional description for the imported scene */ + scene_description?: string; + /** File to import (OWL, TTL, RDF, XML formats) */ + file: any; +} +/** + * Ref methods exposed by OntologyExportModal component + */ +export interface OntologyExportModalRef { + /** Open the export modal */ + handleOpen: () => void; +} +/** + * Form data for exporting ontology + */ +export interface OntologyExportModalData { + /** Scene identifier to export */ + scene_id: string; + /** Export format: 'rdfxml' (.owl) or 'turtle' (.ttl) */ + format: 'rdfxml' | 'turtle'; +} \ No newline at end of file