更新组件包

.vscode/settings.json

@@ -1,15 +1,14 @@
 {
-  "cSpell.words": [
-    "AILP",
-    "GCLS",
-    "KHPJ",
-    "XYZP"
-  ],
+  "cSpell.words": ["AILP", "GCLS", "KHPJ", "NNPE", "XYZP"],
   "workbench.colorCustomizations": {
     "titleBar.activeBackground": "#42b883",
     "titleBar.activeForeground": "#15202b",
     "titleBar.inactiveBackground": "#42b88399",
-    "titleBar.inactiveForeground": "#15202b99"
+    "titleBar.inactiveForeground": "#15202b99",
+    "editorGroup.border": "#65c89b",
+    "panel.border": "#65c89b",
+    "sash.hoverBorder": "#65c89b",
+    "sideBar.border": "#65c89b"
   },
   "peacock.color": "#42b883"
-}
+}

package-lock.json

@@ -11,6 +11,7 @@
         "ailp-book-question-ui": "file:../ailp-book-question-ui-0.1.1.tgz",
         "awe-dnd": "^0.3.4",
         "axios": "^0.21.1",
+        "book-ui": "file:../book-ui-0.1.9.tgz",
         "core-js": "^3.10.1",
         "element-ui": "^2.15.1",
         "gcls-book-question-ui": "file:../gcls-book-question-ui-0.1.0.tgz",
@@ -5833,6 +5834,221 @@
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
+    "node_modules/book-ui": {
+      "version": "0.1.9",
+      "resolved": "file:../book-ui-0.1.9.tgz",
+      "integrity": "sha512-OFebDbxRJWBZ3u/X63W0sj4BntzLfajLBsPOCMEk269/0uVFprXfpQJenYXx3i8sse79qzpMSsUNmMOgmLeNRg==",
+      "dependencies": {
+        "awe-dnd": "^0.3.4",
+        "axios": "^0.21.1",
+        "core-js": "^3.6.5",
+        "element-ui": "^2.15.1",
+        "hanzi-writer": "^3.1.0",
+        "js-audio-recorder": "^1.0.7",
+        "js-cookie": "^3.0.1",
+        "less-loader": "^5.0.0",
+        "node-sass": "^4.14.1",
+        "sass-loader": "^7.1.0",
+        "seededshuffle": "^0.2.0",
+        "vue": "^2.6.11",
+        "vue-esign": "^1.0.5",
+        "vue-pdf": "^4.3.0",
+        "vuedraggable": "^2.24.3"
+      }
+    },
+    "node_modules/book-ui/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/book-ui/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/book-ui/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/book-ui/node_modules/cross-spawn": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+      "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+      "dependencies": {
+        "lru-cache": "^4.0.1",
+        "which": "^1.2.9"
+      }
+    },
+    "node_modules/book-ui/node_modules/get-stdin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/book-ui/node_modules/js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/book-ui/node_modules/lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "dependencies": {
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      }
+    },
+    "node_modules/book-ui/node_modules/node-gyp": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
+      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
+      "dependencies": {
+        "fstream": "^1.0.0",
+        "glob": "^7.0.3",
+        "graceful-fs": "^4.1.2",
+        "mkdirp": "^0.5.0",
+        "nopt": "2 || 3",
+        "npmlog": "0 || 1 || 2 || 3 || 4",
+        "osenv": "0",
+        "request": "^2.87.0",
+        "rimraf": "2",
+        "semver": "~5.3.0",
+        "tar": "^2.0.0",
+        "which": "1"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/book-ui/node_modules/node-gyp/node_modules/semver": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+      "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/book-ui/node_modules/node-sass": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "async-foreach": "^0.1.3",
+        "chalk": "^1.1.1",
+        "cross-spawn": "^3.0.0",
+        "gaze": "^1.0.0",
+        "get-stdin": "^4.0.1",
+        "glob": "^7.0.3",
+        "in-publish": "^2.0.0",
+        "lodash": "^4.17.15",
+        "meow": "^3.7.0",
+        "mkdirp": "^0.5.1",
+        "nan": "^2.13.2",
+        "node-gyp": "^3.8.0",
+        "npmlog": "^4.0.0",
+        "request": "^2.88.0",
+        "sass-graph": "2.2.5",
+        "stdout-stream": "^1.4.0",
+        "true-case-path": "^1.0.2"
+      },
+      "bin": {
+        "node-sass": "bin/node-sass"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/book-ui/node_modules/nopt": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      }
+    },
+    "node_modules/book-ui/node_modules/sass-loader": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.3.1.tgz",
+      "integrity": "sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==",
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.0.1",
+        "neo-async": "^2.5.0",
+        "pify": "^4.0.1",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">= 6.9.0"
+      },
+      "peerDependencies": {
+        "webpack": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "node_modules/book-ui/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/book-ui/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/book-ui/node_modules/tar": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "deprecated": "This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.",
+      "dependencies": {
+        "block-stream": "*",
+        "fstream": "^1.0.12",
+        "inherits": "2"
+      }
+    },
+    "node_modules/book-ui/node_modules/yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/boolbase/download/boolbase-1.0.0.tgz",
@@ -27847,6 +28063,177 @@
         }
       }
     },
+    "book-ui": {
+      "version": "file:..\\book-ui-0.1.9.tgz",
+      "integrity": "sha512-OFebDbxRJWBZ3u/X63W0sj4BntzLfajLBsPOCMEk269/0uVFprXfpQJenYXx3i8sse79qzpMSsUNmMOgmLeNRg==",
+      "requires": {
+        "awe-dnd": "^0.3.4",
+        "axios": "^0.21.1",
+        "core-js": "^3.6.5",
+        "element-ui": "^2.15.1",
+        "hanzi-writer": "^3.1.0",
+        "js-audio-recorder": "^1.0.7",
+        "js-cookie": "^3.0.1",
+        "less-loader": "^5.0.0",
+        "node-sass": "^4.14.1",
+        "sass-loader": "^7.1.0",
+        "seededshuffle": "^0.2.0",
+        "vue": "^2.6.11",
+        "vue-esign": "^1.0.5",
+        "vue-pdf": "^4.3.0",
+        "vuedraggable": "^2.24.3"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+          "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "which": "^1.2.9"
+          }
+        },
+        "get-stdin": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+          "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+        },
+        "js-cookie": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+          "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
+        },
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "node-gyp": {
+          "version": "3.8.0",
+          "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
+          "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
+          "requires": {
+            "fstream": "^1.0.0",
+            "glob": "^7.0.3",
+            "graceful-fs": "^4.1.2",
+            "mkdirp": "^0.5.0",
+            "nopt": "2 || 3",
+            "npmlog": "0 || 1 || 2 || 3 || 4",
+            "osenv": "0",
+            "request": "^2.87.0",
+            "rimraf": "2",
+            "semver": "~5.3.0",
+            "tar": "^2.0.0",
+            "which": "1"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "5.3.0",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+              "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
+            }
+          }
+        },
+        "node-sass": {
+          "version": "4.14.1",
+          "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+          "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
+          "requires": {
+            "async-foreach": "^0.1.3",
+            "chalk": "^1.1.1",
+            "cross-spawn": "^3.0.0",
+            "gaze": "^1.0.0",
+            "get-stdin": "^4.0.1",
+            "glob": "^7.0.3",
+            "in-publish": "^2.0.0",
+            "lodash": "^4.17.15",
+            "meow": "^3.7.0",
+            "mkdirp": "^0.5.1",
+            "nan": "^2.13.2",
+            "node-gyp": "^3.8.0",
+            "npmlog": "^4.0.0",
+            "request": "^2.88.0",
+            "sass-graph": "2.2.5",
+            "stdout-stream": "^1.4.0",
+            "true-case-path": "^1.0.2"
+          }
+        },
+        "nopt": {
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+          "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+          "requires": {
+            "abbrev": "1"
+          }
+        },
+        "sass-loader": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.3.1.tgz",
+          "integrity": "sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==",
+          "requires": {
+            "clone-deep": "^4.0.1",
+            "loader-utils": "^1.0.1",
+            "neo-async": "^2.5.0",
+            "pify": "^4.0.1",
+            "semver": "^6.3.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        },
+        "tar": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+          "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+          "requires": {
+            "block-stream": "*",
+            "fstream": "^1.0.12",
+            "inherits": "2"
+          }
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+        }
+      }
+    },
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/boolbase/download/boolbase-1.0.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "core-js": "^3.10.1",
     "element-ui": "^2.15.1",
     "gcls-book-question-ui": "file:../gcls-book-question-ui-0.1.0.tgz",
+    "book-ui": "file:../book-ui-0.1.9.tgz",
     "jquery": "^3.6.0",
     "js-cookie": "^2.2.1",
     "normalize.css": "^8.0.1",

src/components/course/CompletionView.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :visible="dialogVisible" width="820px" @close="dialogClose">
+  <el-dialog :visible="dialogVisible" :width="dialogWidth" @close="dialogClose">
     <div class="completion">
       <img src="../../assets/course_details/courseware.png" />
       <div class="completion-info">
@@ -11,7 +11,7 @@
       </div>
     </div>
 
-    <template v-if="sys_type === 'GCLS'">
+    <template v-if="category === 'OC' || category.length === 0">
       <bookreport
         v-if="dialogVisible"
         :context="context"
@@ -19,9 +19,15 @@
         :book-answer-content="bookAnswerContent"
       />
     </template>
-    <template v-else>
+    <template v-else-if="category === 'AILP'">
       <bookailp v-if="dialogVisible" :context="context" :ui-type="ui_type" :preview-width="800" :preview-height="450" />
     </template>
+    <template v-else-if="category === 'NPC'">
+      <booknpc v-if="context" ref="previewAnswer" :context="context" :theme-color="themeColor" />
+    </template>
+    <template v-if="category == 'NNPE'">
+      <booknnpe v-if="context" :context="context" :theme-color="themeColor" />
+    </template>
 
     <div slot="footer"></div>
   </el-dialog>
@@ -61,8 +67,10 @@ export default {
       count_error: 0,
       context: null,
       ui_type: '',
-      sys_type: this.$store.getters.sys_type,
-      bookAnswerContent: ''
+      bookAnswerContent: '',
+      category: '',
+      dialogWidth: '820px',
+      themeColor: ''
     };
   },
   watch: {
@@ -73,23 +81,40 @@ export default {
         return;
       }
       this.getTaskMaterialStudentExamAnswer().then(() => {
-        GetCoursewareContent_View({ id: this.curCoursewareId }).then(({ content }) => {
-          if (content) {
-            if (this.sys_type === 'GCLS') {
-              this.context = {
-                id: this.curCoursewareId,
-                ui_type: JSON.parse(content).question.ui_type,
-                content: JSON.parse(content)
-              };
-            } else {
-              const contents = JSON.parse(content);
-              if (contents.question && contents.question.length > 0) {
-                this.context = JSON.parse(contents.question);
-                this.ui_type = contents.ui_type ? contents.ui_type : '';
-              }
-            }
-          } else {
+        GetCoursewareContent_View({ id: this.curCoursewareId }).then(({ content, category, book_theme_color }) => {
+          if (!content) {
             this.context = null;
+            return;
+          }
+          this.category = category;
+          if (category === 'OC' || category.length === 0) {
+            this.dialogWidth = '820px';
+            this.context = {
+              id: this.curCoursewareId,
+              ui_type: JSON.parse(content).question.ui_type,
+              content: JSON.parse(content)
+            };
+            return;
+          }
+          if (category === 'AILP') {
+            this.dialogWidth = '820px';
+            const contents = JSON.parse(content);
+            if (contents.question && contents.question.length > 0) {
+              this.context = JSON.parse(contents.question);
+              this.ui_type = contents.ui_type ? contents.ui_type : '';
+            }
+            return;
+          }
+          if (category === 'NPC') {
+            this.themeColor = book_theme_color;
+            this.dialogWidth = '900px';
+            this.context = JSON.parse(content);
+            return;
+          }
+          if (category === 'NNPE') {
+            this.dialogWidth = '900px';
+            this.themeColor = book_theme_color;
+            this.context = JSON.parse(content);
           }
         });
       });

src/components/course/FinishCourseware.vue

@@ -2,20 +2,20 @@
   <el-dialog
     class="finish-courseware"
     :visible="dialogVisible"
-    width="860px"
+    :width="dialogWidth"
     title="完成课件"
     :close-on-click-modal="false"
     @close="dialogClose"
   >
     <bookquestion
-      v-if="sys_type === 'GCLS'"
+      v-if="category === 'OC' || category.length === 0"
       ref="courseware"
       :context="context"
       @handleBookUserAnswer="handleBookUserAnswer"
     />
 
     <bookailp
-      v-else
+      v-else-if="category === 'AILP'"
       :context="context"
       :ui-type="ui_type"
       :preview-width="820"
@@ -23,6 +23,14 @@
       @handleBookUserAnswer="handleBookUserAnswer"
     />
 
+    <template v-else-if="category === 'NPC'">
+      <booknpc v-if="context" ref="previewAnswer" :context="context" :theme-color="themeColor" />
+    </template>
+
+    <template v-if="category == 'NNPE'">
+      <booknnpe v-if="context" :context="context" :theme-color="themeColor" />
+    </template>
+
     <div slot="footer">
       <el-button type="primary" @click="finishTaskMaterial">完成</el-button>
     </div>
@@ -52,7 +60,9 @@ export default {
       context: null,
       ui_type: '',
       exam_answer: '',
-      sys_type: this.$store.getters.sys_type
+      category: '',
+      dialogWidth: '860px',
+      themeColor: ''
     };
   },
   watch: {
@@ -63,26 +73,41 @@ export default {
         return;
       }
 
-      GetCoursewareContent_View({ id: this.coursewareId }).then(({ content }) => {
-        if (content) {
-          if (this.sys_type === 'GCLS') {
-            this.context = {
-              id: this.coursewareId,
-              ui_type: JSON.parse(content).question.ui_type,
-              content: JSON.parse(content)
-            };
-            this.$nextTick(() => {
-              this.$refs.courseware.handleAnswerTimeStart();
-            });
-          } else {
-            const contents = JSON.parse(content);
-            if (contents.question && contents.question.length > 0) {
-              this.context = JSON.parse(contents.question);
-              this.ui_type = contents.ui_type ? contents.ui_type : '';
-            }
-          }
-        } else {
+      GetCoursewareContent_View({ id: this.coursewareId }).then(({ content, category, book_theme_color }) => {
+        if (!content) {
           this.context = null;
+          return;
+        }
+        this.category = category;
+        if (category === 'OC' || category.length === 0) {
+          this.dialogWidth = '860px';
+          this.context = {
+            id: this.coursewareId,
+            ui_type: JSON.parse(content).question.ui_type,
+            content: JSON.parse(content)
+          };
+          this.$nextTick(() => {
+            this.$refs.courseware.handleAnswerTimeStart();
+          });
+        }
+        if (category === 'AILP') {
+          this.dialogWidth = '860px';
+          const contents = JSON.parse(content);
+          if (contents.question && contents.question.length > 0) {
+            this.context = JSON.parse(contents.question);
+            this.ui_type = contents.ui_type ? contents.ui_type : '';
+          }
+        }
+        if (category === 'NPC') {
+          this.themeColor = book_theme_color;
+          this.dialogWidth = '900px';
+          this.context = JSON.parse(content);
+          return;
+        }
+        if (category === 'NNPE') {
+          this.dialogWidth = '900px';
+          this.themeColor = book_theme_color;
+          this.context = JSON.parse(content);
         }
       });
     }

src/components/live/CurMaterial.vue

@@ -29,7 +29,7 @@
     </div>
 
     <template v-if="material_type === 'COURSEWARE' && visible">
-      <template v-if="sys_type === 'GCLS'">
+      <template v-if="category === 'OC' || category.length === 0">
         <bookreport
           v-if="isStudent"
           :context="context"
@@ -38,7 +38,7 @@
         />
         <bookquestion v-else ref="courseware" :context="context" @handleBookUserAnswer="handleBookUserAnswer" />
       </template>
-      <template v-else>
+      <template v-else-if="category === 'AILP'">
         <bookailp
           :context="context"
           :ui-type="ui_type"
@@ -47,6 +47,12 @@
           @handleBookUserAnswer="handleBookUserAnswer"
         />
       </template>
+      <template v-else-if="category === 'NPC'">
+        <booknpc v-if="context" ref="previewAnswer" :context="context" :theme-color="themeColor" />
+      </template>
+      <template v-if="category == 'NNPE'">
+        <booknnpe v-if="context" :context="context" :theme-color="themeColor" />
+      </template>
     </template>
 
     <template v-else>
@@ -131,7 +137,7 @@ export default {
       context: null,
       exam_answer: '',
       ui_type: '',
-      sys_type: this.$store.getters.sys_type,
+      category: '',
       file_relative_path: '',
       file_url_https: '',
       pdfSrc: '',
@@ -147,7 +153,8 @@ export default {
         count_right: 0,
         count_error: 0
       },
-      text: ''
+      text: '',
+      themeColor: ''
     };
   },
   computed: {
@@ -244,26 +251,39 @@ export default {
 
     getCoursewareContent_View() {
       GetCoursewareContent_View({ id: this.material_id })
-        .then(({ content }) => {
-          if (content) {
-            if (this.sys_type === 'GCLS') {
-              this.context = {
-                id: this.material_id,
-                ui_type: JSON.parse(content).question.ui_type,
-                content: JSON.parse(content)
-              };
-              this.$nextTick(() => {
-                this.$refs.courseware.handleAnswerTimeStart();
-              });
-            } else {
-              const contents = JSON.parse(content);
-              if (contents.question && contents.question.length > 0) {
-                this.context = JSON.parse(contents.question);
-                this.ui_type = contents.ui_type ? contents.ui_type : '';
-              }
-            }
-          } else {
+        .then(({ content, category, book_theme_color }) => {
+          if (!content) {
             this.context = null;
+            return;
+          }
+          this.category = category;
+          if (category === 'OC' || category.length === 0) {
+            this.context = {
+              id: this.material_id,
+              ui_type: JSON.parse(content).question.ui_type,
+              content: JSON.parse(content)
+            };
+            this.$nextTick(() => {
+              this.$refs.courseware.handleAnswerTimeStart();
+            });
+            return;
+          }
+          if (category === 'AILP') {
+            const contents = JSON.parse(content);
+            if (contents.question && contents.question.length > 0) {
+              this.context = JSON.parse(contents.question);
+              this.ui_type = contents.ui_type ? contents.ui_type : '';
+            }
+            return;
+          }
+          if (category === 'NPC') {
+            this.themeColor = book_theme_color;
+            this.context = JSON.parse(content);
+            return;
+          }
+          if (category === 'NNPE') {
+            this.themeColor = book_theme_color;
+            this.context = JSON.parse(content);
           }
         })
         .then(() => {

src/components/select/SelectCourse.vue

@@ -15,10 +15,25 @@
       <div class="content-structure-tree">
         <tree-menus ref="tree" :current-course="currentCourse" :list="nodes" @curCourse="curCourse" />
       </div>
-      <div class="content-structure-container">
-        <bookquestion v-if="sys_type === 'GCLS'" :context="context" />
+      <div
+        class="content-structure-container"
+        :style="{ 'min-width': `${category === 'NPC' || category === 'NNPE' ? '885px' : ''}` }"
+      >
+        <template v-if="category === 'OC' || category.length === 0">
+          <bookquestion :context="context" />
+        </template>
 
-        <bookailp v-else :context="context" :ui-type="ui_type" :preview-width="720" :preview-height="405" />
+        <template v-else-if="category === 'AILP'">
+          <bookailp :context="context" :ui-type="ui_type" :preview-width="720" :preview-height="405" />
+        </template>
+
+        <template v-else-if="category === 'NPC'">
+          <booknpc v-if="context" ref="previewAnswer" :context="context" :theme-color="themeColor" />
+        </template>
+
+        <template v-if="category == 'NNPE'">
+          <booknnpe v-if="context" :context="context" :theme-color="themeColor" />
+        </template>
       </div>
     </div>
 
@@ -55,7 +70,8 @@ export default {
       nodes: [],
       context: null,
       ui_type: '',
-      sys_type: this.$store.getters.sys_type
+      category: '',
+      themeColor: ''
     };
   },
   watch: {
@@ -101,23 +117,36 @@ export default {
       this.curBook = book;
     },
     getCoursewareContent_View() {
-      GetCoursewareContent_View({ id: this.currentCourse }).then(({ content }) => {
-        if (content) {
-          if (this.sys_type === 'GCLS') {
-            this.context = {
-              id: this.currentCourse,
-              ui_type: JSON.parse(content).question.ui_type,
-              content: JSON.parse(content)
-            };
-          } else {
-            const contents = JSON.parse(content);
-            if (contents.question && contents.question.length > 0) {
-              this.context = JSON.parse(contents.question);
-              this.ui_type = contents.ui_type ? contents.ui_type : '';
-            }
-          }
-        } else {
+      GetCoursewareContent_View({ id: this.currentCourse }).then(({ content, category, book_theme_color }) => {
+        if (!content) {
           this.context = null;
+          return;
+        }
+        this.category = category;
+        if (category === 'OC' || category.length === 0) {
+          this.context = {
+            id: this.currentCourse,
+            ui_type: JSON.parse(content).question.ui_type,
+            content: JSON.parse(content)
+          };
+          return;
+        }
+        if (category === 'AILP') {
+          const contents = JSON.parse(content);
+          if (contents.question && contents.question.length > 0) {
+            this.context = JSON.parse(contents.question);
+            this.ui_type = contents.ui_type ? contents.ui_type : '';
+          }
+          return;
+        }
+        if (category === 'NPC') {
+          this.themeColor = book_theme_color;
+          this.context = JSON.parse(content);
+          return;
+        }
+        if (category === 'NNPE') {
+          this.themeColor = book_theme_color;
+          this.context = JSON.parse(content);
         }
       });
     }

src/main.js

@@ -16,6 +16,8 @@ import GCLSBookQuestionUI from 'gcls-book-question-ui';
 import 'gcls-book-question-ui/dist/gcls-book-question-ui.css';
 import AILPBookQuestionUI from 'ailp-book-question-ui';
 import 'ailp-book-question-ui/dist/ailp-book-question-ui.css';
+import BookUI from 'book-ui';
+import 'book-ui/dist/book-ui.css';
 
 import VueDND from 'awe-dnd';
 
@@ -30,6 +32,7 @@ import '@/permission'; // 权限控制
 Vue.use(ElementUI);
 Vue.use(GCLSBookQuestionUI);
 Vue.use(AILPBookQuestionUI);
+Vue.use(BookUI);
 Vue.use(VideoPlayer);
 Vue.use(VueDND);
 

src/views/live/teacher/CompleteList.vue

@@ -2,7 +2,7 @@
   <el-dialog
     :class="['complete-list', { 'align-left': !isAlignCenter }]"
     :visible="dialogVisibleComplete"
-    width="900px"
+    :width="dialogWidth + 'px'"
     :modal="false"
     :close-on-click-modal="false"
     @close="dialogCompleteClose"
@@ -51,7 +51,7 @@
 
     <div class="complete-list-container">
       <template v-if="material_type === 'COURSEWARE'">
-        <template v-if="sys_type === 'GCLS'">
+        <template v-if="category === 'OC' || category.length === 0">
           <bookreport
             v-if="isStudent"
             :context="context"
@@ -60,9 +60,15 @@
           />
           <bookquestion v-else :context="context" />
         </template>
-        <template v-else>
+        <template v-else-if="category === 'AILP'">
           <bookailp :context="context" :ui-type="ui_type" :preview-width="800" :preview-height="450" />
         </template>
+        <template v-else-if="category === 'NPC'">
+          <booknpc v-if="context" ref="previewAnswer" :theme-color="themeColor" :context="context" />
+        </template>
+        <template v-if="category == 'NNPE'">
+          <booknnpe v-if="context" :context="context" :theme-color="themeColor" />
+        </template>
       </template>
       <template v-else>
         <!-- pdf -->
@@ -138,7 +144,9 @@ export default {
       material_picture_url: '',
       context: null,
       ui_type: '',
-      sys_type: this.$store.getters.sys_type,
+      category: '',
+      themeColor: '',
+      dialogWidth: '900',
       bookAnswerContent: '',
       duration: 0,
       count_not_done: 0,
@@ -242,23 +250,40 @@ export default {
     },
 
     getCoursewareContent_View() {
-      GetCoursewareContent_View({ id: this.material_id }).then(({ content }) => {
-        if (content) {
-          if (this.sys_type === 'GCLS') {
-            this.context = {
-              id: this.material_id,
-              ui_type: JSON.parse(content).question.ui_type,
-              content: JSON.parse(content)
-            };
-          } else {
-            const contents = JSON.parse(content);
-            if (contents.question && contents.question.length > 0) {
-              this.context = JSON.parse(contents.question);
-              this.ui_type = contents.ui_type ? contents.ui_type : '';
-            }
-          }
-        } else {
+      GetCoursewareContent_View({ id: this.material_id }).then(({ content, category, book_theme_color }) => {
+        if (!content) {
           this.context = null;
+          return;
+        }
+        this.category = category;
+        if (category === 'OC' || category.length === 0) {
+          this.dialogWidth = '900';
+          this.context = {
+            id: this.material_id,
+            ui_type: JSON.parse(content).question.ui_type,
+            content: JSON.parse(content)
+          };
+          return;
+        }
+        if (category === 'AILP') {
+          this.dialogWidth = '900';
+          const contents = JSON.parse(content);
+          if (contents.question && contents.question.length > 0) {
+            this.context = JSON.parse(contents.question);
+            this.ui_type = contents.ui_type ? contents.ui_type : '';
+          }
+          return;
+        }
+        if (category === 'NPC') {
+          this.themeColor = book_theme_color;
+          this.dialogWidth = '920';
+          this.context = JSON.parse(content);
+          return;
+        }
+        if (category === 'NNPE') {
+          this.dialogWidth = '920';
+          this.themeColor = book_theme_color;
+          this.context = JSON.parse(content);
         }
       });
     },

src/views/live/teacher/group.vue

@@ -95,7 +95,7 @@
           </div>
         </div>
         <div class="student-list">
-          <div class="student-list-title">小组列表</div>
+          <div class="student-list-title">小组成员列表</div>
           <ul>
             <template v-if="isGroup">
               <li v-for="item in student_list" :key="item.room_user_id">
@@ -174,7 +174,7 @@ export default {
       roomContext: {},
       msg: '',
       chatList: [],
-      // 小组列表
+      // 小组成员列表
       group_list: [],
       live_room_sys_user_id: '',
       // 直播状态

src/views/task_details/ShowCourseware.vue

@@ -4,10 +4,10 @@
       <div class="full">
         <el-image class="full-screen" :src="require('../../assets/common/fullScreen.png')" @click="fullScreen" />
       </div>
-      <template v-if="sys_type === 'GCLS'">
+      <template v-if="category === 'OC' || category.length === 0">
         <bookquestion :context="context" :book-client-width="1200" />
       </template>
-      <template v-else>
+      <template v-else-if="category === 'AILP'">
         <bookailp
           v-if="context"
           :context="context"
@@ -16,6 +16,12 @@
           :preview-height="previewHeight"
         />
       </template>
+      <template v-else-if="category === 'NPC'">
+        <booknpc v-if="context" ref="previewAnswer" :context="context" :theme-color="themeColor" />
+      </template>
+      <template v-if="category == 'NNPE'">
+        <booknnpe v-if="context" :context="context" :theme-color="themeColor" />
+      </template>
     </div>
   </div>
 </template>
@@ -31,36 +37,50 @@ export default {
       ui_type: '',
       previewWidth: window.screen.width,
       previewHeight: window.screen.height,
-      sys_type: this.$store.getters.sys_type
+      category: '',
+      themeColor: ''
     };
   },
   created() {
-    GetCoursewareContent_View({ id: this.coursewareId }).then(({ content }) => {
-      if (content) {
-        if (this.sys_type === 'GCLS') {
-          this.context = {
-            id: this.coursewareId,
-            ui_type: JSON.parse(content).question.ui_type,
-            content: JSON.parse(content)
-          };
-          this.$nextTick(() => {
-            this.$refs.courseware.handleAnswerTimeStart();
-          });
-        } else {
-          const contents = JSON.parse(content);
-          if (contents.question && contents.question.length > 0) {
-            this.context = JSON.parse(contents.question);
-            this.ui_type = contents.ui_type ? contents.ui_type : '';
-          }
-          this.$nextTick(() => {
-            let offsetWidth = document.querySelector('div.Big-Book-preview').offsetWidth;
-            let transform = document.querySelector('div.Big-Book-preview').style.transform;
-            document.querySelector('button.full-screen').style.left =
-              offsetWidth * Number(transform.slice(6, -1)) - 130 + 'px';
-          });
-        }
-      } else {
+    GetCoursewareContent_View({ id: this.coursewareId }).then(({ content, category, book_theme_color }) => {
+      if (!content) {
         this.context = null;
+        return;
+      }
+      this.category = category;
+      if (category === 'OC' || category.length === 0) {
+        this.context = {
+          id: this.coursewareId,
+          ui_type: JSON.parse(content).question.ui_type,
+          content: JSON.parse(content)
+        };
+        this.$nextTick(() => {
+          this.$refs.courseware.handleAnswerTimeStart();
+        });
+        return;
+      }
+      if (category === 'AILP') {
+        const contents = JSON.parse(content);
+        if (contents.question && contents.question.length > 0) {
+          this.context = JSON.parse(contents.question);
+          this.ui_type = contents.ui_type ? contents.ui_type : '';
+        }
+        this.$nextTick(() => {
+          let offsetWidth = document.querySelector('div.Big-Book-preview').offsetWidth;
+          let transform = document.querySelector('div.Big-Book-preview').style.transform;
+          document.querySelector('button.full-screen').style.left =
+            offsetWidth * Number(transform.slice(6, -1)) - 130 + 'px';
+        });
+        return;
+      }
+      if (category === 'NPC') {
+        this.context = JSON.parse(content);
+        this.themeColor = book_theme_color;
+        return;
+      }
+      if (category === 'NNPE') {
+        this.themeColor = book_theme_color;
+        this.context = JSON.parse(content);
       }
     });
   },

src/views/task_details/TaskTop.vue

@@ -18,7 +18,7 @@
           <router-link
             target="_blank"
             :to="{ path: `/task_detail/show_courseware/${item.courseware_id}` }"
-            class="courseware_name"
+            class="courseware_name nowrap-ellipsis"
           >
             {{ item.courseware_name }}
           </router-link>
@@ -111,11 +111,10 @@ export default {
       cursor: pointer;
 
       .courseware {
-        overflow: hidden;
-
         .svg-icon {
           margin-right: 12px;
           font-size: 18px;
+          vertical-align: super;
         }
 
         &_name {

src/views/task_details/teacher/index.vue

@@ -39,7 +39,7 @@
             >
               <div class="courseware">
                 <svg-icon icon-class="courseware" />
-                <span class="courseware_name">{{ item.courseware_name }}</span>
+                <span class="courseware_name nowrap-ellipsis">{{ item.courseware_name }}</span>
                 <svg-icon v-if="item.is_finished === 'true'" class="check-mark" icon-class="check-mark-circle" />
               </div>
             </el-tag>
@@ -401,6 +401,7 @@ $bor-color: #d9d9d9;
               .svg-icon {
                 margin-right: 12px;
                 font-size: 18px;
+                vertical-align: super;
               }
 
               .check-mark {