@cqsjjb/course-res-design 0.0.1 → 0.0.2

package/CourseInfo.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { CourseInfo } from './types';
+
+/**
+ * CourseInfo 组件 Props
+ */
+export interface CourseInfoProps {
+  /** 课程ID（如果提供，组件将内部获取课程信息） */
+  courseId?: string | number;
+  /** 课程信息（如果提供了 courseId 则此字段可选） */
+  courseInfo?: CourseInfo;
+  /** 样式 */
+  style?: React.CSSProperties;
+}
+
+/**
+ * 课程信息展示组件
+ * 
+ * @description 用于展示课程的基本信息，包括课程名称、培训项目、课程标签、课程封面、课程介绍等。支持通过 courseId 内部获取数据或外部传入数据。
+ */
+declare class CourseInfo extends React.Component<CourseInfoProps> {}
+
+export default CourseInfo;
+

package/CourseInfo.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Descriptions } from 'antd';
+import './CourseInfo.less';
+import { getLabelName } from './utils/tools';
+import { getCourseInfo } from './api/courseLibrary';
+export default class CourseInfo extends React.Component {
+  state = {
+    loading: false,
+    courseInfo: {}
+  };
+  componentDidMount() {
+    // 如果提供了 courseId，则内部获取数据
+    if (this.props.courseId) {
+      this.fetchCourseInfo();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    // 如果 courseId 变化，重新获取数据
+    if (prevProps.courseId !== this.props.courseId && this.props.courseId) {
+      this.fetchCourseInfo();
+      return;
+    }
+    // 如果没有 courseId 且外部传入的 courseInfo 变化，清空内部 state
+    if (!this.props.courseId && prevProps.courseInfo !== this.props.courseInfo && this.state.courseInfo?.id) {
+      this.setState({
+        courseInfo: {}
+      });
+    }
+  }
+
+  /**
+   * 通过 courseId 获取课程信息
+   */
+  async fetchCourseInfo() {
+    const {
+      courseId
+    } = this.props;
+    if (!courseId) return;
+    this.setState({
+      loading: true
+    });
+    try {
+      const infoRes = await getCourseInfo({
+        id: courseId
+      });
+
+      // 处理响应数据（兼容不同的响应格式）
+      const courseInfo = infoRes?.data || infoRes || {};
+      this.setState({
+        courseInfo,
+        loading: false
+      });
+    } catch (error) {
+      console.error('获取课程信息失败:', error);
+      this.setState({
+        loading: false
+      });
+    }
+  }
+  render() {
+    const {
+      loading,
+      courseInfo: stateCourseInfo
+    } = this.state;
+    // 如果提供了 courseId，优先使用内部 state 的数据，否则使用 props
+    const hasCourseId = !!this.props.courseId;
+    const courseInfo = hasCourseId && stateCourseInfo?.id ? stateCourseInfo : this.props.courseInfo || {};
+    return /*#__PURE__*/React.createElement("div", {
+      style: this.props.style,
+      className: "course-info"
+    }, /*#__PURE__*/React.createElement(Descriptions, {
+      size: "middle",
+      title: "\u8BFE\u7A0B\u4FE1\u606F",
+      column: 3,
+      loading: loading
+    }, /*#__PURE__*/React.createElement(Descriptions.Item, {
+      label: "\u8BFE\u7A0B\u540D\u79F0"
+    }, courseInfo?.courseName || '--'), /*#__PURE__*/React.createElement(Descriptions.Item, {
+      label: "\u57F9\u8BAD\u9879\u76EE"
+    }, getLabelName(courseInfo?.courseTypeLabel) || '--'), /*#__PURE__*/React.createElement(Descriptions.Item, {
+      label: "\u8BFE\u7A0B\u6807\u7B7E"
+    }, getLabelName(courseInfo?.courseLabel) || '--'), /*#__PURE__*/React.createElement(Descriptions.Item, {
+      label: "\u8BFE\u7A0B\u5C01\u9762"
+    }, courseInfo?.courseCover ? /*#__PURE__*/React.createElement("img", {
+      src: courseInfo.courseCover,
+      alt: "\u8BFE\u7A0B\u5C01\u9762",
+      width: 84,
+      height: 50
+    }) : '--'), /*#__PURE__*/React.createElement(Descriptions.Item, {
+      label: "\u8BFE\u7A0B\u4ECB\u7ECD"
+    }, courseInfo?.courseDescription ? /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: courseInfo.courseDescription
+      }
+    }) : '--')));
+  }
+}

package/CourseInfo.less

@@ -0,0 +1,7 @@
+.course-info {
+    background-color: #F7F7F7;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    padding: 20px;
+    box-sizing: border-box;
+}

package/Designable.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 
 /**
  * 关闭回调数据

package/Designable.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+const EVENT_OPEN_COURSE_RES_DESIGN = 'EVENT_OPEN_COURSE_RES_DESIGN';
+const EVENT_CLOSE_COURSE_RES_DESIGN = 'EVENT_CLOSE_COURSE_RES_DESIGN';
+export const Designable = ({
+  style,
+  host = window.location.origin,
+  id,
+  extraParams = {},
+  onClose,
+  src,
+  visible = true
+}) => {
+  const iframeRef = useRef(null);
+
+  // 计算 iframe 的 src
+  const iframeSrc = src || `${host}/course-res-design/setting`;
+
+  // 处理 iframe 加载完成
+  const handleIframeLoad = () => {
+    // iframe 加载完成后发送 postMessage
+    if (iframeRef.current?.contentWindow) {
+      iframeRef.current.contentWindow.postMessage({
+        type: EVENT_OPEN_COURSE_RES_DESIGN,
+        id: id || '',
+        extraParams: extraParams || {}
+      }, new URL(iframeSrc).origin);
+    }
+  };
+
+  // 监听来自 iframe 的关闭消息
+  useEffect(() => {
+    const handleMessage = event => {
+      // 验证消息来源
+      const iframeOrigin = new URL(iframeSrc).origin;
+      if (event.origin !== iframeOrigin) {
+        return;
+      }
+      if (event.data && event.data.type === EVENT_CLOSE_COURSE_RES_DESIGN) {
+        const {
+          id: returnedId
+        } = event.data;
+        // 调用 onClose 回调
+        if (onClose) {
+          onClose({
+            id: returnedId || ''
+          });
+        }
+      }
+    };
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [onClose, iframeSrc, id]);
+  if (!visible) {
+    return null;
+  }
+  const editorContent = /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: "course-res-designable-container"
+  }, /*#__PURE__*/React.createElement("iframe", {
+    ref: iframeRef,
+    src: iframeSrc,
+    frameBorder: "0",
+    className: "course-res-designable-iframe",
+    title: "\u8BFE\u7A0B\u8D44\u6E90\u8BBE\u8BA1\u5668",
+    onLoad: handleIframeLoad
+  }));
+
+  // 使用 createPortal 将组件渲染到 body
+  return /*#__PURE__*/createPortal(editorContent, document.body);
+};
+export default Designable;

package/Preview.d.ts

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
-import { CourseInfo, ResourceLabel } from './types';
-
+import React from 'react';
+import { CourseInfo, ResourceLabel } from './types';
 
 /**
  * 试题选项
@@ -72,10 +71,14 @@ export interface CourseChapterNode {
  * Preview 组件 Props
  */
 export interface PreviewProps {
-  /** 课程章节列表（树形结构） */
-  courseChapterList: CourseChapterNode[];
-  /** 课程信息 */
-  courseInfo: CourseInfo;
+  /** 课程ID（如果提供，组件将内部获取课程数据） */
+  courseId?: string | number;
+  /** 课程章节列表（树形结构，如果提供了 courseId 则此字段可选） */
+  courseChapterList?: CourseChapterNode[];
+  /** 课程信息（如果提供了 courseId 则此字段可选） */
+  courseInfo?: CourseInfo;
+  /** 样式 */
+  style?: React.CSSProperties;
   /** 是否启用预览扫码功能 */
   enablePreview?: boolean;
 }