ai-course/app/backend/src/pages/textbook/chapter.tsx

import { useTranslation } from 'react-i18next';
import { useParams, useSearchParams } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import { ChapterTree } from './compenents/chapterTree';
import { BackBartment } from '../../compenents';
import styles from './chapter.module.less';
import { department } from '../../api/index';
import EditorTextbookContent from './compenents/TextEditor/EditorToolbar';
import EnhancedTextbookEditor from './compenents/TextEditor/EnhancedTextbookEditor';

export interface ChapterItemModel {
  created_at: string;
  id: number;
  name: string;
  from_scene: number;
  parent_chain: string;
  parent_id: number;
  sort: number;
  updated_at: string;
}

export interface ChaptersBoxModel {
  [key: number]: ChapterItemModel[];
}

export interface Option {
  key: string | number;
  title: any;
  level?: number;
  children?: Option[];
}

const ChapterManagementPage = () => {
  const { t } = useTranslation();
  const params = useParams();
  const [selectedChapter, setSelectedChapter] = useState<any>(null);
  const [searchParams] = useSearchParams();
  const title = searchParams.get('title');
  const { bookId } = params;
  const [loading, setLoading] = useState<boolean>(false);
  const [treeData, setTreeData] = useState<ChaptersBoxModel>([]);
  const [selectedChapterId, setSelectedChapterId] = useState<string>();
  const [did, setDid] = useState<number>(0);
  // 获取数据
  const getData = () => {
    department.departmentList({ from_scene: 0 }).then((res: any) => {
      const resData: ChaptersBoxModel = res.data.departments;
      setTreeData(resData);
      setLoading(false);
    });
  };
  const getChapterData = () => {
    department.departmentList({ from_scene: 0 }).then((res: any) => {
      const resData: ChaptersBoxModel = res.data.departments;
      setTreeData(resData);
      setLoading(false);
    });
  };

  useEffect(() => {
    getData();
    getChapterData();
  }, []);
  console.log(bookId, 'bookid');
  // 处理章节更新
  const handleChapterUpdate = (keys: any, title: any) => {
    console.log('选中的章节:', keys, title);
  };

  // 处理添加章节
  const handleAddChapter = (parentId: string | number | null, level: number) => {
    console.log('添加章节, 父级ID:', parentId, '级别:', level);
  };

  // 处理编辑章节
  const handleEditChapter = (chapter: any) => {
    console.log('编辑章节:', chapter);
  };

  // 处理删除章节
  const handleDeleteChapter = (chapter: any) => {
    console.log('删除章节:', chapter);
  };

  // 处理选中章节
  const handleSelectChapter = (chapter: any) => {
    console.log('选中章节详情:', chapter);
    setSelectedChapter(chapter);
  };

  // 处理节点拖拽
  const handleChangeOrder = (chapters: any[]) => {
    console.log(chapters, '<>><><');
  };

  const onSave = () => {
    console.log(selectedChapterId);
  };
  const onContentChange = () => {
    console.log(selectedChapterId);
  };

  return (
    <div className="playedu-main-body">
      <BackBartment title={title || '课程名称'} />
      <div className={styles['chapter-main-body']}>
        <div className={styles['left-box']}>
          <ChapterTree
            selectedId={selectedChapterId}
            isLoading={loading}
            chapterTreeData={treeData}
            onUpdate={handleChapterUpdate}
            onAdd={handleAddChapter}
            onEdit={handleEditChapter}
            onDelete={handleDeleteChapter}
            onSelect={handleSelectChapter}
            onOrderChange={handleChangeOrder}
          />
        </div>
        <div className={styles['right-box']}>
          {selectedChapter ? (
            <div className="chapter-detail">
              <h3>章节详情</h3>
              <p>
                <strong>章节名称:</strong> {selectedChapter.name}
              </p>
              <p>
                <strong>章节ID:</strong> {selectedChapter.id}
              </p>
            </div>
          ) : (
            <div className={styles['chapter-detail']}>
              <h3>请选择章节</h3>
              <p>在左侧树形结构中选择一个章节查看详情</p>
            </div>
          )}
          <EnhancedTextbookEditor
            chapterId={'1'}
            chapterTitle={'xuande'}
            initialContent="请编写内容"
            onSave={onSave}
            onContentChange={onContentChange}
          ></EnhancedTextbookEditor>
        </div>
      </div>
    </div>
  );
};

export default ChapterManagementPage;