@cqsjjb/course-res-design 0.0.1

package/Designable.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+
+
+/**
+ * 关闭回调数据
+ */
+export interface DesignableCloseData {
+  /** 课程资源ID */
+  id: string;
+}
+
+/**
+ * Designable 组件 Props
+ */
+export interface DesignableProps {
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 主机地址（协议 + 域名 + 端口），用于构建 iframe 的源地址 */
+  host?: string;
+  /** 课程资源ID，未传则认为是新增，传入则认为是编辑 */
+  id?: string | number;
+  /** 额外参数，会传递给 iframe 内的编辑器 */
+  extraParams?: Record<string, any>;
+  /** 关闭事件回调 */
+  onClose?: (data: DesignableCloseData) => void;
+  /** iframe 的源地址，如果提供则优先级高于 host */
+  src?: string;
+  /** 是否显示组件 */
+  visible?: boolean;
+}
+
+/**
+ * 打开课程资源设计器的消息类型
+ */
+export interface OpenCourseResDesignMessage {
+  /** 消息类型 */
+  type: 'EVENT_OPEN_COURSE_RES_DESIGN' | 'EVENT_CLOSE_COURSE_RES_DESIGN';
+  /** 课程资源ID */
+  id: string;
+  /** 额外参数 */
+  extraParams: Record<string, any>;
+}
+
+/**
+ * 关闭课程资源设计器的消息类型
+ */
+export interface CloseCourseResDesignMessage {
+  /** 消息类型 */
+  type: 'EVENT_CLOSE_COURSE_RES_DESIGN';
+  /** 课程资源ID */
+  id: string;
+}
+
+/**
+ * 课程资源设计器组件
+ * 
+ * @description 通过 iframe 嵌入课程资源设计器功能，支持与 iframe 内的编辑器进行 postMessage 通信
+ */
+declare const Designable: React.FC<DesignableProps>;
+
+export default Designable;
+

package/Preview.d.ts

@@ -0,0 +1,91 @@
+import { default as React } from 'react';
+import { CourseInfo, ResourceLabel } from './types';
+
+
+/**
+ * 试题选项
+ */
+export interface TestExamOption {
+  /** 选项标识（如 A、B、C、D） */
+  optionItem: string;
+  /** 选项内容（HTML字符串） */
+  optionContent: string;
+}
+
+/**
+ * 试题数据
+ */
+export interface TestExamData {
+  /** 试题ID */
+  id: string | number;
+  /** 试题题目（HTML字符串） */
+  titleName: string;
+  /** 试题选项列表 */
+  optionList?: TestExamOption[];
+  /** 试题类型：'1'=单选, '2'=多选, '3'=判断 */
+  type: string | number;
+  /** 难度类型：'1'=简单, '2'=中等, '3'=困难 */
+  difficultType: string | number;
+  /** 正确答案 */
+  questionsOptionsIds?: string;
+  /** 解析（HTML字符串，可选） */
+  analysis?: string;
+  /** 创建时间 */
+  createTime?: string;
+}
+
+/**
+ * 课程章节节点
+ */
+export interface CourseChapterNode {
+  /** 节点ID */
+  id: string | number;
+  /** 课程菜单名称 */
+  courseMenuName: string;
+  /** 课程菜单类型：1=文件夹, 2=视频, 3=文件 */
+  courseMenuType: 1 | 2 | 3;
+  /** 子节点列表 */
+  children?: CourseChapterNode[];
+  /** 资源类型（如 'video'） */
+  resType?: string;
+  /** 资源总时长（秒） */
+  resourceTotalIden?: string | number;
+  /** 参考学时 */
+  resourceHour?: string | number;
+  /** 资源标签列表 */
+  resourceLabel?: ResourceLabel[];
+  /** 描述 */
+  description?: string;
+  /** 试题JSON字符串 */
+  testExamJson?: string;
+  /** 试看时长（分钟） */
+  auditionTime?: string | number;
+  /** 节点类型（如 'root', 'fileLib'） */
+  type?: string;
+  /** 标题（用于 fileLib 类型） */
+  title?: string;
+  /** 层级（内部使用，扁平化后添加） */
+  level?: number;
+}
+
+/**
+ * Preview 组件 Props
+ */
+export interface PreviewProps {
+  /** 课程章节列表（树形结构） */
+  courseChapterList: CourseChapterNode[];
+  /** 课程信息 */
+  courseInfo: CourseInfo;
+  /** 是否启用预览扫码功能 */
+  enablePreview?: boolean;
+}
+
+/**
+ * 课程预览组件
+ * 
+ * @description 用于展示课程章节的预览界面，支持树形结构展示、视频预览、试题查看等功能
+ */
+declare class Preview extends React.Component<PreviewProps> {}
+
+export default Preview;
+

package/PreviewVideo.d.ts

@@ -0,0 +1,91 @@
+import { default as React } from 'react';
+import { CourseInfo, ResourceLabel } from './types';
+
+
+/**
+ * 资源类型枚举（与 ResourceLabel 相同，保留别名以保持兼容性）
+ */
+export type ResTypeEnum = ResourceLabel;
+
+/**
+ * 字幕项
+ */
+export interface CaptionItem {
+  /** 字幕ID */
+  id?: string | number;
+  /** 字幕内容 */
+  content?: string;
+  /** 开始时间 */
+  startTime?: number;
+  /** 结束时间 */
+  endTime?: number;
+  [key: string]: any;
+}
+
+/**
+ * 视频资源数据
+ */
+export interface VideoResourceValue {
+  /** 资源URL */
+  resourceUrl?: string;
+  /** 文件ID */
+  fileId?: string | number;
+  /** 资源类型枚举 */
+  resTypeEnum?: ResourceLabel | null;
+  /** 视频时长（秒） */
+  duration?: number;
+  /** 资源类型（如 'video'） */
+  resType?: string;
+  /** 参考学时 */
+  resourceHour?: number | null;
+  /** 字幕ID */
+  captionId?: string;
+  /** 字幕列表 */
+  captionList?: CaptionItem[];
+  /** 课程菜单名称 */
+  courseMenuName?: string;
+  /** 试题JSON字符串 */
+  testExamJson?: string;
+  [key: string]: any;
+}
+
+/**
+ * 资源选择器返回的文件项
+ */
+export interface ResSelectorFileItem {
+  /** 文件ID */
+  id: string | number;
+  /** 文件URL */
+  fileUrl: string;
+  /** 资源名称 */
+  resName: string;
+  /** 视频时长（秒） */
+  duration: number;
+  /** 资源类型枚举 */
+  resTypeEnum?: ResourceLabel;
+  [key: string]: any;
+}
+
+/**
+ * PreviewVideo 组件 Props
+ */
+export interface PreviewVideoProps {
+  /** 视频资源数据 */
+  value?: VideoResourceValue;
+  /** 课程信息 */
+  courseInfo?: CourseInfo;
+  /** 是否禁用（禁用时不显示"重新选择"按钮） */
+  disabled?: boolean;
+  /** 变化回调，当重新选择资源时触发 */
+  onChange?: (value: VideoResourceValue) => void;
+}
+
+/**
+ * 预览视频组件
+ * 
+ * @description 用于预览和重新选择视频资源，支持视频预览、资源库选择等功能
+ */
+declare const PreviewVideo: React.FC<PreviewVideoProps>;
+
+export default PreviewVideo;
+

package/README.md

@@ -0,0 +1,322 @@
+# @cqsjjb/scene-engine
+
+场景引擎组件库，通过 iframe 嵌入场景引擎功能，支持富文本编辑和内容渲染。
+
+## 📦 安装
+
+```bash
+npm install @cqsjjb/scene-engine
+# 或
+yarn add @cqsjjb/scene-engine
+# 或
+pnpm add @cqsjjb/scene-engine
+```
+
+## 🔧 依赖要求
+
+该组件库需要以下 peer dependencies：
+
+- `react`: ^16.8.0 || ^17.0.0 || ^18.0.0
+- `react-dom`: ^16.8.0 || ^17.0.0 || ^18.0.0
+- `react-quill`: ^1.3.0 || ^2.0.0
+
+## 🚀 快速开始
+
+### SceneEngine - 场景引擎
+
+场景引擎组件通过 iframe 嵌入场景引擎功能，支持新增和编辑场景。
+
+```tsx
+import React, { useState } from 'react';
+import { SceneEngine } from '@cqsjjb/scene-engine';
+
+const App = () => {
+  const [visible, setVisible] = useState(false);
+  const [sceneId, setSceneId] = useState<string>();
+
+  const handleOpenEditor = (id?: string) => {
+    setSceneId(id);
+    setVisible(true);
+  };
+
+  const handleClose = (data: {
+    id: string;
+    contentTitle: string;
+    content: string;
+    settingConfig: {
+      [key: string]: any;
+    };
+  }) => {
+    console.log('场景数据:', data);
+    setVisible(false);
+    // 处理保存逻辑
+  };
+
+  return (
+    <div>
+      <button onClick={() => handleOpenEditor()}>新增场景</button>
+      <button onClick={() => handleOpenEditor('scene-123')}>编辑场景</button>
+      
+      <SceneEngine
+        visible={visible}
+        id={sceneId}
+        host="http://localhost:5173"
+        onClose={handleClose}
+        style={{ zIndex: 9999 }}
+      />
+    </div>
+  );
+};
+```
+
+### ContentRenderer - 内容渲染器
+
+内容渲染器组件用于渲染富文本内容，适用于预览场景内容。
+
+```tsx
+import React from 'react';
+import { ContentRenderer } from '@cqsjjb/scene-engine';
+
+const Preview = () => {
+  const htmlContent = '<p>这是富文本内容</p>';
+
+  return (
+    <div>
+      <h2>场景预览</h2>
+      <ContentRenderer content={htmlContent} />
+    </div>
+  );
+};
+```
+
+## 📚 API 文档
+
+### SceneEngine
+
+场景引擎组件，通过 iframe 嵌入场景引擎功能。
+
+#### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `style` | `React.CSSProperties` | 否 | - | 自定义样式，默认组件使用固定定位全屏显示（z-index: 9999） |
+| `host` | `string` | 否 | `window.location.origin` | 主机地址（协议 + 域名 + 端口），用于构建 iframe 的源地址 |
+| `src` | `string` | 否 | `host + '/article-layout'` | iframe 的源地址，如果提供则优先级高于 host |
+| `id` | `string` | 否 | - | 场景 ID，未传则认为是新增场景，传入则认为是编辑场景 |
+| `visible` | `boolean` | 否 | `true` | 是否显示组件 |
+| `onClose` | `(data: CloseData) => void` | 否 | - | 关闭事件回调 |
+
+#### CloseData 类型
+
+```typescript
+interface CloseData {
+  id: string; // 场景 ID
+  contentTitle: string; // 场景的标题
+  content: string; // 场景的内容（富文本 HTML）
+  settingConfig: {
+    [key: string]: any; // 场景的设置配置
+  };
+}
+```
+
+#### 事件通信
+
+组件通过 `postMessage` 与 iframe 内的编辑器进行通信：
+
+- **打开编辑器**: 组件会在 iframe 加载完成后发送 `EVENT_OPEN_SCENE_EDITOR` 消息，消息格式：
+  ```typescript
+  {
+    type: 'EVENT_OPEN_SCENE_EDITOR',
+    id: string // 场景 ID，新增时为空字符串
+  }
+  ```
+
+- **关闭编辑器**: iframe 内编辑器发送 `EVENT_CLOSE_SCENE_EDITOR` 消息时触发 `onClose` 回调，消息格式：
+  ```typescript
+  {
+    type: 'EVENT_CLOSE_SCENE_EDITOR',
+    id: string,
+    contentTitle: string,
+    content: string,
+    settingConfig: Record<string, any>
+  }
+  ```
+
+组件会验证消息来源，只处理来自 iframe 源地址的消息，确保通信安全。
+
+### ContentRenderer
+
+内容渲染器组件，用于渲染富文本内容。组件会自动清洗 HTML 内容，确保内容以只读模式展示：
+
+- 移除所有包含 `ql-material-image--selected` 类的元素（清理图片选中状态）
+- 移除所有 `contenteditable` 属性（确保内容不可编辑）
+
+#### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `content` | `string` | 否 | `''` | 要渲染的 HTML 内容（富文本） |
+
+## 💡 使用示例
+
+### 完整示例
+
+```tsx
+import React, { useState } from 'react';
+import { SceneEngine, ContentRenderer } from '@cqsjjb/scene-engine';
+
+interface SceneData {
+  id: string;
+  title: string;
+  content: string;
+  settingConfig: Record<string, any>;
+}
+
+const SceneManager = () => {
+  const [editorVisible, setEditorVisible] = useState(false);
+  const [editingSceneId, setEditingSceneId] = useState<string>();
+  const [scenes, setScenes] = useState<SceneData[]>([]);
+  const [previewContent, setPreviewContent] = useState<string>('');
+
+  // 打开编辑器
+  const handleOpenEditor = (sceneId?: string) => {
+    setEditingSceneId(sceneId);
+    setEditorVisible(true);
+  };
+
+  // 关闭编辑器并保存数据
+  const handleCloseEditor = (data: {
+    id: string;
+    contentTitle: string;
+    content: string;
+    settingConfig: Record<string, any>;
+  }) => {
+    const sceneData: SceneData = {
+      id: data.id,
+      title: data.contentTitle,
+      content: data.content,
+      settingConfig: data.settingConfig,
+    };
+
+    // 更新场景列表
+    const existingIndex = scenes.findIndex((s) => s.id === sceneData.id);
+    if (existingIndex >= 0) {
+      const updatedScenes = [...scenes];
+      updatedScenes[existingIndex] = sceneData;
+      setScenes(updatedScenes);
+    } else {
+      setScenes([...scenes, sceneData]);
+    }
+
+    setEditorVisible(false);
+    setEditingSceneId(undefined);
+  };
+
+  // 预览场景
+  const handlePreview = (scene: SceneData) => {
+    setPreviewContent(scene.content);
+  };
+
+  return (
+    <div>
+      <div>
+        <h2>场景列表</h2>
+        <button onClick={() => handleOpenEditor()}>新增场景</button>
+        {scenes.map((scene) => (
+          <div key={scene.id}>
+            <h3>{scene.title}</h3>
+            <button onClick={() => handleOpenEditor(scene.id)}>编辑</button>
+            <button onClick={() => handlePreview(scene)}>预览</button>
+          </div>
+        ))}
+      </div>
+
+      {previewContent && (
+        <div>
+          <h2>预览</h2>
+          <ContentRenderer content={previewContent} />
+        </div>
+      )}
+
+      <SceneEngine
+        visible={editorVisible}
+        id={editingSceneId}
+        host="http://localhost:5173"
+        onClose={handleCloseEditor}
+        style={{ zIndex: 9999 }}
+      />
+    </div>
+  );
+};
+
+export default SceneManager;
+```
+
+### 自定义 iframe 地址
+
+```tsx
+<SceneEngine
+  visible={true}
+  src="https://example.com/custom-editor-path"
+  onClose={handleClose}
+/>
+```
+
+### 自定义样式
+
+```tsx
+<SceneEngine
+  visible={true}
+  style={{
+    zIndex: 10000,
+    backgroundColor: '#f5f5f5',
+  }}
+  onClose={handleClose}
+/>
+```
+
+## 🏗️ 构建
+
+该组件库使用 Vite 构建，支持 ES Module 和 CommonJS 两种格式。
+
+### 开发构建
+
+```bash
+npm run build
+```
+
+构建产物将输出到 `publish` 目录，包括：
+
+- `index.esm.js` - ES Module 格式
+- `index.cjs.js` - CommonJS 格式
+- `index.d.ts` - TypeScript 类型定义
+- `index.css` - 样式文件
+
+### 发布
+
+```bash
+npm publish
+```
+
+发布前会自动执行 `prepublishOnly` 脚本进行构建。
+
+## 📝 注意事项
+
+1. **iframe 通信**: 组件通过 `postMessage` 与 iframe 内的编辑器通信，确保 iframe 的源地址与 `host` 或 `src` 配置一致。组件会验证消息来源，只处理来自 iframe 源的消息。
+
+2. **样式隔离**: 组件使用 `createPortal` 将编辑器渲染到 `document.body`，确保样式不受父组件影响。组件默认使用固定定位全屏显示（z-index: 9999）。
+
+3. **富文本内容**: `ContentRenderer` 组件使用 `dangerouslySetInnerHTML` 渲染 HTML 内容，请确保内容来源可信，避免 XSS 攻击。组件会自动清洗 HTML 内容：
+   - 移除所有包含 `ql-material-image--selected` 类的元素（清理图片选中状态）
+   - 移除所有 `contenteditable` 属性（确保内容不可编辑）
+
+4. **react-quill 样式**: 组件已引入 `react-quill/dist/quill.snow.css` 和自定义样式，无需额外引入。
+
+5. **浏览器兼容性**: 组件依赖现代浏览器 API（如 `postMessage`、`createPortal`），建议在支持 ES2020 的浏览器中使用。
+
+6. **默认路径**: 如果未提供 `src` 属性，组件会使用 `host + '/scene-engine'` 作为 iframe 的默认路径。
+
+## 🔒 安全提示
+
+- 使用 `ContentRenderer` 渲染用户输入内容时，请确保对 HTML 内容进行安全过滤和转义
+- 在生产环境中，建议使用 CSP (Content Security Policy) 限制 iframe 的源地址

package/VideoPlayer.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+import { CourseInfo } from './types';
+
+
+/**
+ * 视频源配置
+ */
+export interface VideoSource {
+  /** 视频源地址 */
+  src: string;
+  /** 清晰度标签（如 '高清'、'标清' 等） */
+  label: string;
+  /** 是否为默认源 */
+  default?: boolean;
+}
+
+/**
+ * 字幕轨道配置
+ */
+export interface VideoTrack {
+  /** 字幕文件地址（Blob URL） */
+  src: string;
+  /** 字幕类型 */
+  kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+  /** 字幕语言代码 */
+  srcLang: string;
+  /** 字幕标签 */
+  label: string;
+  /** 是否为默认字幕 */
+  default?: boolean;
+}
+
+/**
+ * VideoPlayer 组件使用的课程信息（扩展 CourseInfo）
+ */
+export interface VideoPlayerCourseInfo extends CourseInfo {
+  /** 源枚举类型（如 'OUT' 表示外部源） */
+  sourceEnum?: string;
+}
+
+/**
+ * VideoPlayer 组件 Props
+ */
+export interface VideoPlayerProps {
+  /** 视频源地址（直接传入时使用） */
+  src?: string;
+  /** 文件ID（用于获取视频源和字幕） */
+  id?: string | number;
+  /** 课程信息 */
+  courseInfo?: VideoPlayerCourseInfo;
+  /** 其他传递给 WebVideoPlayer 的 props */
+  [key: string]: any;
+}
+
+/**
+ * 视频播放器组件
+ * 
+ * @description 基于 WebVideoPlayer 封装的视频播放器，支持多清晰度切换、字幕显示等功能
+ */
+declare const VideoPlayer: React.FC<VideoPlayerProps>;
+
+export default VideoPlayer;
+

package/course-res-design.css

@@ -0,0 +1 @@
+.course-preview{height:calc(100% - 78px);display:flex;gap:16px}.course-preview__container{height:100%;display:flex;gap:16px}.course-preview__sidebar,.course-preview__main{height:100%;border:1px solid #f0f0f0;border-radius:8px;overflow:hidden}.course-preview__sidebar{width:482px;overflow-y:auto}.course-preview__main{flex:1;padding:16px;overflow-y:auto}.course-preview__main-content{border:1px solid #ddd;border-radius:8px;overflow:hidden}.course-preview__sidebar-header{background:#f7f7f7;height:50px;display:flex;gap:10px;align-items:center;padding:0 10px;position:relative;border-bottom:1px solid #f0f0f0}.course-preview__item{padding:16px;background-color:#f7f7f7}.course-preview__item:not(:last-child){border-bottom:1px solid #ddd}.course-preview__item-title{font-size:16px;font-weight:600}.course-preview__item-description{font-size:14px;color:#999;margin-top:8px}.course-preview__item-video,.course-preview__item-file{display:flex;align-items:center;justify-content:space-between}.course-preview__item-video-name,.course-preview__item-file-name{font-size:16px;font-weight:600;line-height:22px;margin-right:10px}.course-preview__item-video-info,.course-preview__item-file-info{display:flex;flex-direction:column;justify-content:center;gap:4px;font-size:14px;align-items:flex-start}.course-preview__item-video-description,.course-preview__item-file-description{color:#999;font-size:14px;margin-top:8px}.course-preview__item-video-content,.course-preview__item-file-content{display:flex;gap:24px;white-space:nowrap;align-items:center}.course-preview__sidebar-content{height:calc(100% - 50px);overflow-y:auto;padding:16px}.course-preview__title{padding:16px;background:#f7f7f7;border:1px solid #f0f0f0;border-radius:8px;margin-bottom:16px}.course-preview__title-total{display:flex;gap:20px}.course-preview__title-total-item{display:flex;gap:5px}.course-preview__label-container{display:flex;align-items:center}.course-preview__label-icon{color:#2c5de5}.course-preview__label{font-size:16px;color:#4d4d4d}.course-preview__value{font-size:18px;color:#000;font-weight:600}.course-res-designable-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:#fff}.course-res-designable-iframe{width:100%;height:100%;border:none;display:block}