GrandClaw-prototype/src/pages/AdminPage.jsx

import { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { FiHome, FiBarChart2, FiUsers, FiList, FiCheckCircle, FiActivity, FiSettings } from 'react-icons/fi';
import Layout from '../components/Layout.jsx';
import SidebarNavItem from '../components/layout/SidebarNavItem.jsx';
import usePageState from '../hooks/usePageState.js';
import { ADMIN_PAGES } from '../constants/pages.js';
import { ADMIN_KEYS } from '../constants/storageKeys.js';
import OverviewPage from './admin/OverviewPage.jsx';
import DepartmentsPage from './admin/DepartmentsPage.jsx';
import UsersPage from './admin/UsersPage.jsx';
import AdminProjectsPage from './admin/AdminProjectsPage.jsx';
import AddDepartmentPage from './admin/AddDepartmentPage.jsx';
import AddUserPage from './admin/AddUserPage.jsx';
import AddProjectPage from './admin/AddProjectPage.jsx';
import AdminLogsPage from './admin/AdminLogsPage.jsx';
import ConsoleReviewListPage from './console/ConsoleReviewListPage.jsx';
import ConsoleReviewDetailPage from './console/ConsoleReviewDetailPage.jsx';
import ModelConfigsPage from './admin/ModelConfigsPage.jsx';
import AddModelConfigPage from './admin/AddModelConfigPage.jsx';

function AdminPage() {
    const location = useLocation();
    const navigate = useNavigate();

    const { currentPage, setCurrentPage } = usePageState({
        storageKey: ADMIN_KEYS.CURRENT_PAGE,
        defaultPage: 'overview',
        pageTitles: ADMIN_PAGES,
    });

    const [editData, setEditData] = useState(null);
    const [reviewType, setReviewType] = useState(null);
    const [reviewId, setReviewId] = useState(null);

    const navigateTo = (page, data) => {
        setEditData(data || null);
        setCurrentPage(page);
    };

    const handleReviewClick = (type, id) => {
        setReviewType(type);
        setReviewId(id);
        navigateTo('reviewDetail');
    };

    const handleReviewBack = () => {
        setReviewType(null);
        setReviewId(null);
        navigateTo('reviewList');
    };

    const renderPage = () => {
        switch (currentPage) {
            case 'overview':
                return <OverviewPage />;
            case 'departments':
                return <DepartmentsPage
                    onAdd={() => navigateTo('addDepartment')}
                    onEdit={(dept) => navigateTo('addDepartment', dept)}
                />;
            case 'users':
                return <UsersPage
                    onAdd={() => navigateTo('addUser')}
                    onEdit={(user) => navigateTo('addUser', user)}
                />;
            case 'projects':
                return <AdminProjectsPage
                    onAdd={() => navigateTo('addProject')}
                    onEdit={(project) => navigateTo('addProject', project)}
                />;
            case 'adminLogs':
                return <AdminLogsPage />;
            case 'reviewList':
                return <ConsoleReviewListPage onReviewClick={handleReviewClick} />;
            case 'reviewDetail':
                return <ConsoleReviewDetailPage
                    type={reviewType}
                    reviewId={reviewId}
                    onBack={handleReviewBack}
                />;
            case 'addDepartment':
                return <AddDepartmentPage
                    onBack={() => navigateTo('departments')}
                    editData={editData}
                />;
            case 'addUser':
                return <AddUserPage
                    onBack={() => navigateTo('users')}
                    editData={editData}
                />;
            case 'addProject':
                return <AddProjectPage
                    onBack={() => navigateTo('projects')}
                    editData={editData}
                />;
            case 'modelConfigs':
                return <ModelConfigsPage
                    onAdd={() => navigateTo('addModelConfig')}
                    onEdit={(config) => navigateTo('addModelConfig', config)}
                />;
            case 'addModelConfig':
                return <AddModelConfigPage
                    onBack={() => navigateTo('modelConfigs')}
                    editData={editData}
                />;
            default:
                return <div>Page not found</div>;
        }
    };

    const sidebar = (
        <>
            <nav className="admin-sidebar-nav">
                <SidebarNavItem
                    icon={<FiHome />}
                    label="总览"
                    active={currentPage === 'overview'}
                    onClick={() => navigateTo('overview')}
                    itemClassName="admin-nav-item"
                    iconClassName="admin-nav-icon"
                    textClassName="admin-nav-text"
                />
                <SidebarNavItem
                    icon={<FiCheckCircle />}
                    label="审核管理"
                    active={currentPage === 'reviewList' || currentPage === 'reviewDetail'}
                    onClick={() => navigateTo('reviewList')}
                    itemClassName="admin-nav-item"
                    iconClassName="admin-nav-icon"
                    textClassName="admin-nav-text"
                />
                <SidebarNavItem
                    icon={<FiBarChart2 />}
                    label="部门管理"
                    active={currentPage === 'departments'}
                    onClick={() => navigateTo('departments')}
                    itemClassName="admin-nav-item"
                    iconClassName="admin-nav-icon"
                    textClassName="admin-nav-text"
                />
                <SidebarNavItem
                    icon={<FiUsers />}
                    label="用户管理"
                    active={currentPage === 'users'}
                    onClick={() => navigateTo('users')}
                    itemClassName="admin-nav-item"
                    iconClassName="admin-nav-icon"
                    textClassName="admin-nav-text"
                />
                <SidebarNavItem
                    icon={<FiList />}
                    label="项目管理"
                    active={currentPage === 'projects'}
                    onClick={() => navigateTo('projects')}
                    itemClassName="admin-nav-item"
                    iconClassName="admin-nav-icon"
                    textClassName="admin-nav-text"
                />
                <SidebarNavItem
                    icon={<FiActivity />}
                    label="日志查询"
                    active={currentPage === 'adminLogs'}
                    onClick={() => navigateTo('adminLogs')}
                    itemClassName="admin-nav-item"
                    iconClassName="admin-nav-icon"
                    textClassName="admin-nav-text"
                />
                <SidebarNavItem
                    icon={<FiSettings />}
                    label="模型配置"
                    active={currentPage === 'modelConfigs' || currentPage === 'addModelConfig'}
                    onClick={() => navigateTo('modelConfigs')}
                    itemClassName="admin-nav-item"
                    iconClassName="admin-nav-icon"
                    textClassName="admin-nav-text"
                />
            </nav>
        </>
    );

    return (
        <Layout
            sidebar={sidebar}
            sidebarClassName="admin-sidebar"
        >
            {renderPage()}
        </Layout>
    );
}

export default AdminPage;