From 4915514bdef7b489cebe05c1c0e0c2e7d4482f69 Mon Sep 17 00:00:00 2001 From: susie-laptop Date: Fri, 7 Mar 2025 18:05:33 -0500 Subject: [PATCH] [dev]Update Knowledge base detail page Add mock data --- package-lock.json | 15 +- package.json | 3 +- src/pages/KnowledgeBase/Detail/DatasetTab.jsx | 32 +- .../{ => Detail}/KnowledgeBaseDetail.jsx | 12 +- .../KnowledgeBase/Detail/SettingsTab.jsx | 330 +------- .../Detail/components/Breadcrumb.jsx | 2 +- .../Detail/components/KnowledgeBaseForm.jsx | 26 +- .../components/UserPermissionsManager.jsx | 789 ++++++++++++++++++ src/pages/KnowledgeBase/KnowledgeBase.jsx | 67 +- .../components/CreateKnowledgeBaseModal.jsx | 4 +- .../components/KnowledgeBaseList.jsx | 11 +- .../{ => components}/KnowledgeCard.jsx | 30 +- src/router/router.jsx | 2 +- src/services/api.js | 46 + src/services/mockApi.js | 352 ++++++++ 15 files changed, 1356 insertions(+), 365 deletions(-) rename src/pages/KnowledgeBase/{ => Detail}/KnowledgeBaseDetail.jsx (92%) create mode 100644 src/pages/KnowledgeBase/Detail/components/UserPermissionsManager.jsx rename src/pages/KnowledgeBase/{ => components}/KnowledgeCard.jsx (80%) create mode 100644 src/services/mockApi.js diff --git a/package-lock.json b/package-lock.json index 12d3e6b..8e04914 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,8 @@ "react-dom": "^19.0.0", "react-redux": "^9.2.0", "react-router-dom": "^7.2.0", - "redux-persist": "^6.0.0" + "redux-persist": "^6.0.0", + "uuid": "^11.1.0" }, "devDependencies": { "@eslint/js": "^9.21.0", @@ -4540,6 +4541,18 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/uuid": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz", + "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "bin": { + "uuid": "dist/esm/bin/uuid" + } + }, "node_modules/vite": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.0.tgz", diff --git a/package.json b/package.json index ff431fc..ca40cf6 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "react-dom": "^19.0.0", "react-redux": "^9.2.0", "react-router-dom": "^7.2.0", - "redux-persist": "^6.0.0" + "redux-persist": "^6.0.0", + "uuid": "^11.1.0" }, "devDependencies": { "@eslint/js": "^9.21.0", diff --git a/src/pages/KnowledgeBase/Detail/DatasetTab.jsx b/src/pages/KnowledgeBase/Detail/DatasetTab.jsx index 9f9e027..ae4b1e8 100644 --- a/src/pages/KnowledgeBase/Detail/DatasetTab.jsx +++ b/src/pages/KnowledgeBase/Detail/DatasetTab.jsx @@ -270,7 +270,7 @@ export default function DatasetTab({ knowledgeBase }) {
+ +
  • + +
    • + + +
    +
    + {/* File upload modal */}
    {knowledgeBase.name}
    -

    {knowledgeBase.desc}

    +

    + {knowledgeBase.desc || knowledgeBase.description || ''} +

    diff --git a/src/pages/KnowledgeBase/Detail/SettingsTab.jsx b/src/pages/KnowledgeBase/Detail/SettingsTab.jsx index 0b2705f..b257c3b 100644 --- a/src/pages/KnowledgeBase/Detail/SettingsTab.jsx +++ b/src/pages/KnowledgeBase/Detail/SettingsTab.jsx @@ -8,6 +8,7 @@ import { updateKnowledgeBase, deleteKnowledgeBase } from '../../../store/knowled import Breadcrumb from './components/Breadcrumb'; import KnowledgeBaseForm from './components/KnowledgeBaseForm'; import DeleteConfirmModal from './components/DeleteConfirmModal'; +import UserPermissionsManager from './components/UserPermissionsManager'; export default function SettingsTab({ knowledgeBase }) { const dispatch = useDispatch(); @@ -16,114 +17,13 @@ export default function SettingsTab({ knowledgeBase }) { // State for knowledge base form const [knowledgeBaseForm, setKnowledgeBaseForm] = useState({ name: knowledgeBase.name, - desc: knowledgeBase.desc, + desc: knowledgeBase.desc || knowledgeBase.description || '', + type: knowledgeBase.type || 'private', // 默认为私有知识库 }); const [formErrors, setFormErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); - // State for pagination - const [currentPage, setCurrentPage] = useState(1); - const usersPerPage = 10; - - // State for edit modal - const [showEditModal, setShowEditModal] = useState(false); - const [editUser, setEditUser] = useState(null); - - // Mock data for users with permissions - convert to state so we can update it - const [users, setUsers] = useState([ - { - id: '1001', - username: '张三', - email: 'zhang@abc.com', - permissionType: '只读', - accessDuration: '一个月', - }, - { - id: '1002', - username: '李四', - email: 'li@abc.com', - permissionType: '完全访问', - accessDuration: '永久', - }, - { - id: '1003', - username: '王五', - email: 'wang@abc.com', - permissionType: '只读', - accessDuration: '三个月', - }, - { - id: '1004', - username: '赵六', - email: 'zhao@abc.com', - permissionType: '完全访问', - accessDuration: '六个月', - }, - { - id: '1005', - username: '钱七', - email: 'qian@abc.com', - permissionType: '只读', - accessDuration: '一周', - }, - { - id: '1006', - username: '孙八', - email: 'sun@abc.com', - permissionType: '只读', - accessDuration: '一个月', - }, - { - id: '1007', - username: '周九', - email: 'zhou@abc.com', - permissionType: '完全访问', - accessDuration: '永久', - }, - { - id: '1008', - username: '吴十', - email: 'wu@abc.com', - permissionType: '只读', - accessDuration: '三个月', - }, - { - id: '1009', - username: '郑十一', - email: 'zheng@abc.com', - permissionType: '完全访问', - accessDuration: '六个月', - }, - { - id: '1010', - username: '冯十二', - email: 'feng@abc.com', - permissionType: '只读', - accessDuration: '一周', - }, - { - id: '1011', - username: '陈十三', - email: 'chen@abc.com', - permissionType: '只读', - accessDuration: '一个月', - }, - { - id: '1012', - username: '褚十四', - email: 'chu@abc.com', - permissionType: '完全访问', - accessDuration: '永久', - }, - ]); - - // Get current users for pagination - const indexOfLastUser = currentPage * usersPerPage; - const indexOfFirstUser = indexOfLastUser - usersPerPage; - const currentUsers = users.slice(indexOfFirstUser, indexOfLastUser); - const totalPages = Math.ceil(users.length / usersPerPage); - // Handle knowledge base form input change const handleInputChange = (e) => { const { name, value } = e.target; @@ -153,6 +53,10 @@ export default function SettingsTab({ knowledgeBase }) { errors.desc = '请输入知识库描述'; } + if (!knowledgeBaseForm.type) { + errors.type = '请选择知识库类型'; + } + setFormErrors(errors); return Object.keys(errors).length === 0; }; @@ -175,6 +79,8 @@ export default function SettingsTab({ knowledgeBase }) { data: { name: knowledgeBaseForm.name, desc: knowledgeBaseForm.desc, + description: knowledgeBaseForm.desc, // Add description field for compatibility + type: knowledgeBaseForm.type, }, }) ) @@ -228,83 +134,6 @@ export default function SettingsTab({ knowledgeBase }) { }); }; - // Handle edit user permissions - const handleEditUser = (user) => { - setEditUser({ ...user }); - setFormErrors({}); - setShowEditModal(true); - }; - - // Handle input change in edit modal - const handleEditInputChange = (e) => { - const { name, value } = e.target; - setEditUser((prev) => ({ - ...prev, - [name]: value, - })); - - // Clear error if exists - if (formErrors[name]) { - setFormErrors((prev) => ({ - ...prev, - [name]: '', - })); - } - }; - - // Validate edit form - const validateEditForm = () => { - const errors = {}; - - if (!editUser.permissionType) { - errors.permissionType = '请选择权限类型'; - } - - if (!editUser.accessDuration) { - errors.accessDuration = '请选择访问时长'; - } - - setFormErrors(errors); - return Object.keys(errors).length === 0; - }; - - // Handle save user permissions - const handleSaveUserPermissions = () => { - // Validate form - if (!validateEditForm()) { - return; - } - - // Here you would typically call an API to update the user permissions - console.log('Updating user permissions:', editUser); - - // Update the users array with the edited user - setUsers((prevUsers) => prevUsers.map((user) => (user.id === editUser.id ? { ...editUser } : user))); - - // Show success notification (in a real app) - dispatch(showNotification({ message: '用户权限已更新', type: 'success' })); - - // Close modal - setShowEditModal(false); - }; - - // Handle pagination - const handlePageChange = (pageNumber) => { - setCurrentPage(pageNumber); - }; - - // Handle delete user - const handleDeleteUser = (userId) => { - // Here you would typically call an API to delete the user - console.log('Deleting user:', userId); - - // Update the users array by removing the deleted user - setUsers((prevUsers) => prevUsers.filter((user) => user.id !== userId)); - - // Show success notification (in a real app) - dispatch(showNotification({ message: '用户已删除', type: 'success' })); - }; - return ( <> {/* Breadcrumb navigation */} @@ -315,12 +144,14 @@ export default function SettingsTab({ knowledgeBase }) { formData={knowledgeBaseForm} formErrors={formErrors} isSubmitting={isSubmitting} - knowledgeBase={knowledgeBase} onInputChange={handleInputChange} onSubmit={handleSubmit} onDelete={() => setShowDeleteConfirm(true)} /> + {/* User Permissions Manager */} + + {/* Delete confirmation modal */} setShowDeleteConfirm(false)} onConfirm={handleDelete} /> - - {/* Edit User Permissions Modal */} - {showEditModal && ( -
    -
    -
    -
    编辑用户权限
    - -
    -
    -
    - -
    -
    -
    - ID: - #{editUser?.id} -
    -
    - 用户名: - {editUser?.username} -
    -
    - 邮箱: - {editUser?.email} -
    -
    -
    -
    - -
    - -
    -
    - handleEditInputChange({ target: { name: 'permissionType', value: '只读' } }) - } - > -
    只读
    -
    仅查看数据集内容
    -
    -
    - handleEditInputChange({ - target: { name: 'permissionType', value: '完全访问' }, - }) - } - > -
    完全访问
    -
    查看、编辑和管理数据
    -
    -
    - {formErrors.permissionType && ( -
    {formErrors.permissionType}
    - )} -
    - -
    - - - {formErrors.accessDuration && ( -
    {formErrors.accessDuration}
    - )} -
    -
    -
    - - -
    -
    -
    - )} ); } diff --git a/src/pages/KnowledgeBase/Detail/components/Breadcrumb.jsx b/src/pages/KnowledgeBase/Detail/components/Breadcrumb.jsx index 4d3b6ec..b3bc408 100644 --- a/src/pages/KnowledgeBase/Detail/components/Breadcrumb.jsx +++ b/src/pages/KnowledgeBase/Detail/components/Breadcrumb.jsx @@ -10,7 +10,7 @@ const Breadcrumb = ({ knowledgeBase, activeTab }) => {
    - -
    - -

    {new Date(knowledgeBase.create_time).toLocaleString()}

    -
    - -
    - -

    {new Date(knowledgeBase.update_time).toLocaleString()}

    -
    -
    + {showBatchDropdown && ( +
      +
    • + +
      • +
    • + +
      • +
    + )} +
    + )} + + + + +
    + + + + + + + + + + + + + {currentUsers.length > 0 ? ( + currentUsers.map((user) => ( + + + + + + + + + )) + ) : ( + + + + )} + +
    +
    + +
    +     		用户名邮箱权限类型访问期限操作
    +
    + handleSelectUser(user.id)} + /> +
    +     		{user.username}{user.email} + + {user.permissionType} + + {user.accessDuration} +
    + + +
    +
    + 暂无用户 +
    +
    + + {/* Pagination */} + {totalPages > 1 && ( + + )} + + {/* Edit User Modal */} + {showEditModal && ( +
    +
    +
    +
    +
    编辑用户权限
    + +
    +
    +
    +
    + + + {formErrors.username && ( +
    {formErrors.username}
    + )} +
    +
    + + + {formErrors.email && ( +
    {formErrors.email}
    + )} +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + )} + + {/* Add User Modal */} + {showAddUserModal && ( +
    +
    +
    +
    +
    添加用户
    + +
    +
    +
    +
    + + + {formErrors.username && ( +
    {formErrors.username}
    + )} +
    +
    + + + {formErrors.email && ( +
    {formErrors.email}
    + )} +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + )} + + {/* Batch Edit Modal */} + {showBatchEditModal && ( +
    +
    +
    +
    +
    批量修改权限
    + +
    +
    +

    + 您正在修改 {selectedUsers.length} 个用户的权限 +

    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + )} + + {/* Modal backdrop */} + {(showEditModal || showAddUserModal || showBatchEditModal) && ( +
    + )} + + + ); +}; + +export default UserPermissionsManager; diff --git a/src/pages/KnowledgeBase/KnowledgeBase.jsx b/src/pages/KnowledgeBase/KnowledgeBase.jsx index a0e65c0..af3fc32 100644 --- a/src/pages/KnowledgeBase/KnowledgeBase.jsx +++ b/src/pages/KnowledgeBase/KnowledgeBase.jsx @@ -246,6 +246,7 @@ export default function KnowledgeBase() { createKnowledgeBase({ name: newKnowledgeBase.name, desc: newKnowledgeBase.desc, + description: newKnowledgeBase.desc, type: 'private', // Default type }) ); @@ -295,11 +296,17 @@ export default function KnowledgeBase() { setShowAccessRequestModal(false); }; + const handleDelete = (e, id) => { + e.preventDefault(); + e.stopPropagation(); + console.log(id); + }; + // Calculate total pages const totalPages = Math.ceil(displayTotal / pagination.page_size); return ( -
    +
    {/* Pagination */} @@ -401,8 +409,47 @@ export default function KnowledgeBase() {
    + {/*
    + +
    +
    + setAccessRequestData((prev) => ({ ...prev, accessType: '只读访问' })) + } + > +
    只读访问
    +
    仅查看数据集内容
    +
    +
    + setAccessRequestData((prev) => ({ ...prev, accessType: '完全访问' })) + } + > +
    完全访问
    +
    查看、编辑和管理数据
    +
    +
    +
    */}
    - +
    +
    - +
    -