diff --git a/src/components/AccessRequestModal.jsx b/src/components/AccessRequestModal.jsx new file mode 100644 index 0000000..5dc4da6 --- /dev/null +++ b/src/components/AccessRequestModal.jsx @@ -0,0 +1,199 @@ +import React, { useState } from 'react'; +import SvgIcon from './SvgIcon'; + +/** + * 申请权限弹窗组件 + * @param {Object} props + * @param {boolean} props.show - 是否显示弹窗 + * @param {string} props.knowledgeBaseId - 知识库ID + * @param {string} props.knowledgeBaseTitle - 知识库标题 + * @param {Function} props.onClose - 关闭弹窗的回调函数 + * @param {Function} props.onSubmit - 提交申请的回调函数，接收 requestData 参数 + * @param {boolean} props.isSubmitting - 是否正在提交 + */ +export default function AccessRequestModal({ + show, + knowledgeBaseId, + knowledgeBaseTitle, + onClose, + onSubmit, + isSubmitting = false, +}) { + const [accessRequestData, setAccessRequestData] = useState({ + accessType: '只读访问', + duration: '一周', + reason: '', + }); + const [accessRequestErrors, setAccessRequestErrors] = useState({}); + + const handleAccessRequestInputChange = (e) => { + const { name, value } = e.target; + setAccessRequestData((prev) => ({ + ...prev, + [name]: value, + })); + + // Clear error when user types + if (accessRequestErrors[name]) { + setAccessRequestErrors((prev) => ({ + ...prev, + [name]: '', + })); + } + }; + + const validateAccessRequestForm = () => { + const errors = {}; + + if (!accessRequestData.reason.trim()) { + errors.reason = '请输入申请原因'; + } + + setAccessRequestErrors(errors); + return Object.keys(errors).length === 0; + }; + + const handleSubmitAccessRequest = () => { + // Validate form + if (!validateAccessRequestForm()) { + return; + } + + // 调用父组件的提交函数 + onSubmit({ + id: knowledgeBaseId, + title: knowledgeBaseTitle, + ...accessRequestData, + }); + + // 重置表单 + setAccessRequestData({ + accessType: '只读访问', + duration: '一周', + reason: '', + }); + setAccessRequestErrors({}); + }; + + if (!show) return null; + + return ( +
+
+
+
申请访问权限
+ +
+
+
+ + +
+
+ + +
+ +
+ + +
+
+ + + {accessRequestErrors.reason && ( +
{accessRequestErrors.reason}
+ )} +
+
+
+ + +
+
+
+ ); +} diff --git a/src/components/CreateKnowledgeBaseModal.jsx b/src/components/CreateKnowledgeBaseModal.jsx new file mode 100644 index 0000000..4402387 --- /dev/null +++ b/src/components/CreateKnowledgeBaseModal.jsx @@ -0,0 +1,168 @@ +import React from 'react'; +import SvgIcon from './SvgIcon'; + +/** + * 创建知识库模态框组件 + * @param {Object} props + * @param {boolean} props.show - 是否显示弹窗 + * @param {Object} props.formData - 表单数据 + * @param {Object} props.formErrors - 表单错误信息 + * @param {boolean} props.isSubmitting - 是否正在提交 + * @param {Function} props.onClose - 关闭弹窗的回调函数 + * @param {Function} props.onChange - 表单输入变化的回调函数 + * @param {Function} props.onSubmit - 提交表单的回调函数 + */ +const CreateKnowledgeBaseModal = ({ show, formData, formErrors, isSubmitting, onClose, onChange, onSubmit }) => { + if (!show) return null; + + return ( +
+
+
+
新建知识库
+ +
+
+
+ + + {formErrors.name &&
{formErrors.name}
} +
+
+ + + {formErrors.desc &&
{formErrors.desc}
} +
+
+ +
+
+ + +
+
+ + +
+
+ {formErrors.type &&
{formErrors.type}
} +
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ ); +}; + +export default CreateKnowledgeBaseModal; diff --git a/src/pages/KnowledgeBase/components/Pagination.jsx b/src/components/Pagination.jsx similarity index 84% rename from src/pages/KnowledgeBase/components/Pagination.jsx rename to src/components/Pagination.jsx index 8c8f4b1..c819887 100644 --- a/src/pages/KnowledgeBase/components/Pagination.jsx +++ b/src/components/Pagination.jsx @@ -2,6 +2,12 @@ import React from 'react'; /** * 分页组件 + * @param {Object} props + * @param {number} props.currentPage - 当前页码 + * @param {number} props.totalPages - 总页数 + * @param {number} props.pageSize - 每页显示的条目数 + * @param {Function} props.onPageChange - 页码变化的回调函数 + * @param {Function} props.onPageSizeChange - 每页条目数变化的回调函数 */ const Pagination = ({ currentPage, totalPages, pageSize, onPageChange, onPageSizeChange }) => { return ( @@ -17,7 +23,7 @@ const Pagination = ({ currentPage, totalPages, pageSize, onPageChange, onPageSiz -