feat(web): Ontology support import & export;

docs(web): add comments to the src/views/Ontology directory

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<OntologyClassExtractModalRef, OntologyClassExtractModalProps>(({
   refresh
 }, ref) => {
+  // Hooks
   const { t } = useTranslation();
   const { message } = App.useApp();
-  const [visible, setVisible] = useState(false);
   const [form] = Form.useForm<OntologyClassExtractModalData>();
+  
+  // State
+  const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false)
   const [data, setData] = useState<OntologyClassData | null>(null)
   const [extractData, setExtractData] = useState<ExtractData | null>(null)
   const [targetKeys, setTargetKeys] = useState<TransferProps['targetKeys']>([]);
   const [selectedKeys, setSelectedKeys] = useState<TransferProps['selectedKeys']>([]);
 
-  // 封装取消方法，添加关闭弹窗逻辑
+  /**
+   * Close modal and reset all state
+   */
   const handleClose = () => {
     setVisible(false);
     form.resetFields();
@@ -38,12 +57,19 @@ const OntologyClassExtractModal = forwardRef<OntologyClassExtractModalRef, Ontol
     setExtractData(null)
   };
 
+  /**
+   * Open modal with scene data
+   * @param vo - Ontology class data containing scene information
+   */
   const handleOpen = (vo: OntologyClassData) => {
     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<OntologyClassExtractModalRef, Ontol
       });
   }
 
+  /**
+   * Confirm and create selected classes
+   * First click runs extraction, second click creates classes
+   */
   const handleConfirm = () => {
     if (!extractData) {
       handleSave()
@@ -92,11 +122,19 @@ const OntologyClassExtractModal = forwardRef<OntologyClassExtractModalRef, Ontol
     }
   }
 
-
+  /**
+   * Handle transfer component target keys change
+   * @param nextTargetKeys - New target keys after transfer
+   */
   const onChange: TransferProps['onChange'] = (nextTargetKeys) => {
     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<OntologyClassExtractModalRef, Ontol
     setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys].filter(Boolean));
   };
 
-  // 暴露给父组件的方法
+  /**
+   * Expose methods to parent component via ref
+   */
   useImperativeHandle(ref, () => ({
     handleOpen,
   }));

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<OntologyClassModalRef, OntologyClassModalProps>(({
   refresh
 }, ref) => {
+  // Hooks
   const { t } = useTranslation();
   const { message } = App.useApp();
-  const [visible, setVisible] = useState(false);
   const [form] = Form.useForm<AddClassItem>();
+  
+  // State
+  const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false)
   const [scene_id, setSceneId] = useState<string | null>(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<OntologyClassModalRef, OntologyClassModalP
       });
   }
 
-  // 暴露给父组件的方法
+  /**
+   * Expose methods to parent component via ref
+   */
   useImperativeHandle(ref, () => ({
     handleOpen,
   }));

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<OntologyExportModalRef, OntologyExportModalProps>(({
+  refresh
+}, ref) => {
+  // Hooks
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+  const [form] = Form.useForm<OntologyExportModalData>();
+  
+  // 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 (
+    <RbModal
+      title={t('ontology.export')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.export')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={{ format: 'rdfxml' }}
+      >
+        <FormItem
+          name="scene_id"
+          label={t('ontology.scene_id')}
+          rules={[{ required: true, message: t('common.pleaseEnter') }]}
+        >
+          <CustomSelect
+            url={getOntologyScenesUrl}
+            params={{ page: 1, pagesize: 100 }}
+            valueKey="scene_id"
+            labelKey="scene_name"
+            hasAll={false}
+            onChange={handleChange}
+          />
+        </FormItem>
+
+        <FormItem
+          name="format"
+          label={t('ontology.format')}
+        >
+          <Select
+            placeholder={t('common.pleaseSelect')}
+            options={[
+              { value: 'rdfxml', label: 'RDF/XML' },
+              { value: 'turtle', label: 'Turtle' },
+            ]}
+          />
+        </FormItem>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default OntologyExportModal;

web/src/views/Ontology/components/OntologyImportModal.tsx

@@ -0,0 +1,139 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 14:10:32 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-03 14:10:32 
+ */
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Input, App } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { OntologyImportModalData, OntologyImportModalRef } from '../types'
+import RbModal from '@/components/RbModal'
+import { ontologyImport } from '@/api/ontology'
+import UploadFiles from '@/components/Upload/UploadFiles';
+
+const FormItem = Form.Item;
+
+/**
+ * Props for OntologyImportModal component
+ */
+interface OntologyImportModalProps {
+  /** Callback function to refresh parent list after import */
+  refresh: () => void;
+}
+
+/**
+ * Modal component for importing ontology files
+ * Supports OWL, TTL, RDF, XML file formats
+ */
+const OntologyImportModal = forwardRef<OntologyImportModalRef, OntologyImportModalProps>(({
+  refresh
+}, ref) => {
+  // Hooks
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+  const [form] = Form.useForm<OntologyImportModalData>();
+  
+  // State
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false)
+
+  /**
+   * Close modal and reset form state
+   */
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false)
+  };
+
+  /**
+   * Open the import modal
+   */
+  const handleOpen = () => {
+    form.resetFields();
+    setVisible(true);
+  };
+  
+  /**
+   * Validate and submit form data to import ontology file
+   * Creates FormData with file and scene information
+   */
+  const handleSave = () => {
+    form
+      .validateFields()
+      .then((values) => {
+        const { scene_name, scene_description,  file } = values
+        console.log('values', file);
+        const formData = new FormData();
+        formData.append('file', file[0]);
+        formData.append('scene_name', scene_name);
+        if (scene_description) {
+          formData.append('scene_description', scene_description);
+        }
+        setLoading(true)
+        ontologyImport(formData)
+          .then(() => {
+            message.success(t('common.saveSuccess'));
+            handleClose();
+            refresh();
+          })
+          .finally(() => setLoading(false))
+      })
+      .catch((err) => {
+        console.log('err', err)
+      });
+  }
+
+  /**
+   * Expose methods to parent component via ref
+   */
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+  }));
+
+  return (
+    <RbModal
+      title={t('ontology.import')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.create')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+      >
+        <FormItem
+          name="scene_name"
+          label={t('ontology.scene_name')}
+          rules={[{ required: true, message: t('common.pleaseEnter') }]}
+        >
+          <Input placeholder={t('common.enter')} />
+        </FormItem>
+        <FormItem
+          name="scene_description"
+          label={t('ontology.scene_description')}
+        >
+          <Input.TextArea placeholder={t('common.enter')} />
+        </FormItem>
+
+        <FormItem
+          name="file"
+          label={t('ontology.file')}
+          rules={[{ required: true, message: t('common.pleaseSelect') }]}
+        >
+          <UploadFiles
+            isCanDrag={true}
+            fileType={['owl', 'ttl', 'rdf', 'xml']}
+            isAutoUpload={false}
+          />
+        </FormItem>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default OntologyImportModal;

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<OntologyModalRef, OntologyModalProps>(({
   refresh
 }, ref) => {
+  // Hooks
   const { t } = useTranslation();
   const { message } = App.useApp();
+  const [form] = Form.useForm<OntologyModalData>();
+  
+  // State
   const [visible, setVisible] = useState(false);
   const [editVo, setEditVo] = useState<OntologyItem | null>(null)
-  const [form] = Form.useForm<OntologyModalData>();
   const [loading, setLoading] = useState(false)
 
-  // 封装取消方法，添加关闭弹窗逻辑
+  /**
+   * Close modal and reset form state
+   */
   const handleClose = () => {
     setVisible(false);
     form.resetFields();
@@ -30,6 +49,10 @@ const OntologyModal = forwardRef<OntologyModalRef, OntologyModalProps>(({
     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<OntologyModalRef, OntologyModalProps>(({
     }
     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<OntologyModalRef, OntologyModalProps>(({
       });
   }
 
-  // 暴露给父组件的方法
+  /**
+   * Expose methods to parent component via ref
+   */
   useImperativeHandle(ref, () => ({
     handleOpen,
   }));

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<ConfigHeaderProps> = ({ 
   name,
   subTitle,
@@ -19,6 +37,9 @@ const PageHeader: FC<ConfigHeaderProps> = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  /**
+   * Navigate back to previous page
+   */
   const goBack = () => {
     navigate(-1)
   }