题型编辑修改

src/assets/styles/pages.scss

@@ -1,665 +1,683 @@
-// org-property
-.org-property {
-  .org-header {
-    margin-bottom: 20px;
-    background-color: #fff;
-    border-radius: 20px;
-  }
-  .part-box-header {
-    padding: 20px;
-  }
-  .org-body {
-    &-title {
-      font-size: 16px;
-      margin-bottom: 10px;
-    }
-  }
-  .label-title {
-    .el-form-item__label {
-      font-size: 16px;
-      font-weight: 600;
-    }
-  }
-}
-
-// data-privilege
-.data-privilege {
-  .privilege-part {
-    margin-bottom: 20px;
-    background-color: #fff;
-    border-radius: 20px;
-  }
-  .privilege-header {
-    padding-bottom: 0;
-    &-top {
-      padding: 30px 30px 0;
-      border-bottom: 1px solid #eff0f5;
-
-      .box-justify {
-        padding-bottom: 15px;
-        border-bottom: 1px solid #eff0f5;
-      }
-
-      .el-form-linemess {
-        padding: 10px 0 0;
-      }
-    }
-  }
-  .privilege-body {
-    .box-justify {
-      padding: 20px 30px;
-      border-bottom: 1px solid #eff0f5;
-    }
-
-    .privilege-table {
-      padding: 20px;
-    }
-  }
-}
-.part-tabs {
-  padding: 0 30px;
-
-  &-item {
-    display: inline-block;
-    vertical-align: top;
-    padding: 20px 0 30px;
-    line-height: 20px;
-    position: relative;
-    cursor: pointer;
-
-    &:hover {
-      color: $--color-primary;
-    }
-
-    &.is-active {
-      color: $--color-primary;
-      font-weight: 600;
-      &::before {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 30%;
-        border-bottom: 2px solid $--color-primary;
-        left: 50%;
-        bottom: 0;
-        transform: translateX(-50%);
-      }
-    }
-
-    &:not(:last-child) {
-      .part-tabs-name {
-        border-right: 1px solid $--color-border;
-      }
-    }
-  }
-  &-name {
-    padding: 0 20px;
-  }
-}
-// .property-info
-.property-box {
-  padding: 20px;
-}
-.property-tree {
-  .el-tree-node__content {
-    padding: 5px 10px !important;
-    height: 36px;
-  }
-  .el-tree-node.is-current > .el-tree-node__content {
-    border-radius: 5px;
-    background-color: #e7ebf8;
-  }
-  .node-level-one {
-    font-weight: 600;
-  }
-  // .el-tree-node__expand-icon {
-  //   padding: 0;
-  //   border-radius: 50%;
-  //   border: 2px solid #888a9a;
-  //   color: #888a9a;
-  //   margin-right: 8px;
-  //   &.is-leaf {
-  //     color: transparent;
-  //     border-color: transparent;
-  //   }
-  // }
-}
-// paper-structure-info
-.topic-set {
-  text-align: center;
-  border: 1px solid #6e7590;
-  color: #393c4c;
-  border-radius: 10px;
-  background-color: #b1b6ce;
-  overflow: hidden;
-  &-title {
-    height: 34px;
-    line-height: 34px;
-    color: #fff;
-    border-bottom: 1px solid #6e7590;
-  }
-  &-content {
-    background-color: #fff;
-    padding: 2px;
-
-    .el-input__inner {
-      border: none;
-      text-align: center;
-      border-top-right-radius: 0 !important;
-      border-top-left-radius: 0 !important;
-      border-bottom-left-radius: 10 !important;
-      border-bottom-right-radius: 10 !important;
-    }
-  }
-}
-.topic-set-list {
-  .topic-set {
-    min-width: 100px;
-    display: inline-block;
-    vertical-align: top;
-    margin: 0 5px;
-  }
-}
-// edit paper
-.edit-paper {
-  .edit-header {
-    padding: 0 60px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: #fff;
-    z-index: 999;
-    box-shadow: 0px 20px 20px 0px rgba(212, 220, 243, 0.2);
-
-    &-top {
-      padding: 15px 0;
-      border-bottom: 1px solid #eff0f5;
-    }
-    &-bottom {
-      padding: 15px 0;
-    }
-  }
-  .header-info {
-    font-size: 0;
-
-    &-item {
-      display: inline-block;
-      vertical-align: middle;
-      font-size: 14px;
-      padding: 0 10px;
-
-      &:first-child {
-        padding-left: 0;
-      }
-
-      &:not(:last-child) {
-        border-right: 1px solid #eff0f5;
-      }
-
-      > span {
-        margin-left: 3px;
-      }
-    }
-
-    &-input {
-      display: inline;
-      .el-input__inner {
-        border: 0;
-        border-radius: 0;
-        border-bottom: 1px solid #d0d6f1;
-        padding: 0 5px;
-        width: 120px;
-        height: 20px;
-        line-height: 20px;
-        font-size: 14px;
-      }
-    }
-  }
-  .edit-body {
-    margin: 0 60px;
-    padding-top: 150px;
-  }
-  .edit-part-list {
-    background: #ffffff;
-    margin-bottom: 20px;
-    border-radius: 20px;
-    box-shadow: 0px 20px 20px 0px rgba(212, 220, 243, 0.2);
-    overflow: hidden;
-  }
-  .edit-part {
-    padding: 30px 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: stretch;
-    position: relative;
-
-    &.question-duplicate {
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 20px;
-        height: 100%;
-        z-index: 99;
-        background-color: #ffa280;
-      }
-    }
-  }
-  .edit-property {
-    flex-grow: 0;
-    flex-shrink: 0;
-    width: 360px;
-    border-left: 1px solid #f0f2f6;
-    padding: 0 30px;
-    font-size: 0;
-    margin: 0 -3px;
-
-    &-item {
-      display: inline-block;
-      vertical-align: top;
-      width: 25%;
-      padding: 3px;
-      font-size: 12px;
-    }
-
-    &-body {
-      text-align: center;
-      border: 1px solid #6e7590;
-      color: #393c4c;
-      border-radius: 8px;
-      background-color: #73c7ff;
-      line-height: 24px;
-      overflow: hidden;
-    }
-    &-title {
-      color: #fff;
-      border-bottom: 1px solid #6e7590;
-    }
-    &-content {
-      background-color: #fff;
-    }
-  }
-  .edit-property-danger {
-    .edit-property-title {
-      background-color: #ffa280;
-    }
-  }
-  .edit-cont {
-    position: relative;
-    padding: 0 30px;
-    flex-grow: 2;
-    overflow: hidden;
-
-    &-title {
-      min-height: 42px;
-      line-height: 24px;
-      font-weight: 600;
-      color: #313444;
-      overflow-x: auto;
-
-      > h3 {
-        font-size: 16px;
-        font-weight: 600;
-      }
-      p {
-        display: inline;
-      }
-      audio {
-        display: inline-block;
-        vertical-align: top;
-        height: 20px;
-      }
-    }
-    &-action {
-      position: absolute;
-      background-color: #fff;
-      padding: 0 0 10px 20px;
-      top: 0;
-      right: 30px;
-      border-radius: 10px;
-      z-index: 9;
-    }
-
-    &-body {
-      line-height: 24px;
-      color: #6e7080;
-      overflow-x: auto;
-
-      p {
-        margin-bottom: 0;
-      }
-      audio {
-        display: inline-block;
-        vertical-align: top;
-        height: 20px;
-      }
-    }
-  }
-
-  .paper-option {
-    p {
-      display: inline;
-    }
-    audio {
-      display: inline-block;
-      vertical-align: top;
-      height: 20px;
-    }
-  }
-
-  .edit-paper-questions {
-    > .edit-part {
-      position: relative;
-      &:first-child {
-        box-shadow: 0px 20px 20px 0px rgba(212, 220, 243, 0.2) inset;
-        border-top: 1px solid #e0e6f7;
-      }
-      &:not(:first-child) {
-        &::before {
-          content: "";
-          display: block;
-          position: absolute;
-          top: 0;
-          left: 30px;
-          right: 0;
-          z-index: auto;
-          border-bottom: 1px solid #e0e6f7;
-        }
-      }
-    }
-  }
-  .edit-paper-question-subs {
-    padding-left: 80px;
-    > .edit-part {
-      border-top: 1px solid #e0e6f7;
-    }
-  }
-}
-// view-paper
-.view-paper {
-  padding: 76px 60px 50px;
-
-  .view-header {
-    padding: 20px 60px;
-    position: fixed;
-    height: 76px;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 999;
-    background-color: $--color-background;
-  }
-  .header-info {
-    font-size: 0;
-
-    &-item {
-      display: inline-block;
-      vertical-align: middle;
-      font-size: 14px;
-      padding: 0 10px;
-
-      &:first-child {
-        padding-left: 0;
-      }
-      > span {
-        margin-left: 3px;
-      }
-    }
-  }
-  .view-body {
-    border-radius: 20px;
-    background-color: #fff;
-    overflow: hidden;
-    padding: 30px;
-  }
-  .view-title {
-    text-align: center;
-    margin-bottom: 20px;
-    .paper-title {
-      height: 45px;
-      font-size: 32px;
-      font-weight: 500;
-      line-height: 45px;
-      margin-bottom: 10px;
-    }
-    .paper-title-sub {
-      font-size: 16px;
-      font-weight: 500;
-      color: #9a9dab;
-      line-height: 22px;
-      margin-bottom: 10px;
-    }
-  }
-  .view-summary {
-    padding-bottom: 30px;
-  }
-  .view-seperator {
-    border-bottom: 1px solid #f0f2f6;
-    margin: 0 -30px;
-  }
-  .view-part {
-    position: relative;
-    padding: 30px 0;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid #f0f2f6;
-    }
-
-    &-action {
-      position: absolute;
-      background-color: #fff;
-      top: 30px;
-      right: 10px;
-      border-radius: 10px;
-      z-index: 9;
-    }
-    .paper-question-title {
-      margin-bottom: 10px;
-    }
-    .paper-question-body {
-      color: #6e7080;
-    }
-  }
-  .view-quesiton {
-    padding: 20px 30px;
-    border-radius: 15px;
-    background: #f4f6fc;
-    position: relative;
-    &:not(:last-child) {
-      margin-bottom: 10px;
-    }
-    .view-part-action {
-      top: 10px;
-    }
-  }
-  .view-question-subs {
-    .view-part {
-      padding: 20px;
-    }
-  }
-}
-// paper
-.paper {
-  &-question-title {
-    min-height: 22px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #313444;
-    line-height: 22px;
-    overflow-x: auto;
-    p {
-      display: inline;
-    }
-    audio {
-      display: inline-block;
-      vertical-align: top;
-      height: 20px;
-    }
-  }
-  &-question-body {
-    min-height: 24px;
-    line-height: 24px;
-    overflow-x: auto;
-
-    p {
-      margin-bottom: 0;
-    }
-    audio {
-      display: inline-block;
-      vertical-align: top;
-      height: 20px;
-    }
-  }
-  &-question-option {
-    line-height: 24px;
-    overflow-x: auto;
-    p {
-      display: inline;
-    }
-    audio {
-      display: inline-block;
-      vertical-align: top;
-      height: 20px;
-    }
-  }
-}
-.row-question-body {
-  line-height: 24px;
-  cursor: pointer;
-  p {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin-bottom: 0;
-  }
-}
-// question-edit
-.question-edit-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .option-check {
-    width: 60px;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-  .option-delete {
-    width: 60px;
-    flex-grow: 0;
-    flex-shrink: 0;
-    text-align: center;
-  }
-  .option-body {
-    flex-grow: 2;
-  }
-}
-// question-preview
-.question-preview {
-  .paper-question-body {
-    padding-top: 6px;
-  }
-  .sub-question {
-    margin: 15px 0 15px 40px;
-    padding: 5px 0;
-    border-top: 1px solid $--color-border;
-    position: relative;
-
-    &-no {
-      position: absolute;
-      width: 16px;
-      height: 16px;
-      background-color: $--color-primary;
-      color: #fff;
-      font-size: 12px;
-      line-height: 16px;
-      text-align: center;
-      top: 15px;
-      border-radius: 3px;
-      left: 0;
-    }
-  }
-  .el-form-item {
-    margin-bottom: 5px;
-  }
-}
-// question-info
-.question-info {
-  border: 1px solid #f0f2f6;
-  background-color: #fcfcfd;
-  border-radius: 10px;
-  padding: 30px;
-
-  .line-seperator {
-    border-color: #f0f2f6;
-  }
-  .el-form-item {
-    margin: 0;
-  }
-  .el-form-item__label {
-    color: $--color-text-secondary;
-  }
-
-  .sub-question {
-    margin: 10px 0 10px 30px;
-    padding: 5px 0 5px 24px;
-    border-top: 1px solid $--color-border;
-    position: relative;
-
-    &-no {
-      position: absolute;
-      width: 16px;
-      height: 16px;
-      color: $--color-text-secondary;
-      border: 1px solid $--color-text-secondary;
-      font-size: 12px;
-      line-height: 14px;
-      text-align: center;
-      top: 15px;
-      border-radius: 3px;
-      left: 0;
-    }
-  }
-}
-// gen-paper-detail
-.gen-paper-detail {
-  .gen-step-box {
-    padding: 20px 30px 30px;
-  }
-  .gen-step-title {
-    padding-bottom: 20px;
-    border-bottom: 1px solid #f0f2f6;
-    position: relative;
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 4px;
-      height: 10px;
-      border-radius: 2px;
-      background-color: $--color-primary;
-      top: 5px;
-      left: 0;
-      z-index: auto;
-    }
-
-    > h3 {
-      font-size: 14px;
-      line-height: 20px;
-      font-weight: 600;
-      margin: 0;
-      padding-left: 15px;
-    }
-  }
-  .gen-step-title-sub {
-    border: 0;
-    margin-top: 10px;
-    padding-bottom: 10px;
-  }
-  .gen-step-body {
-    padding-top: 10px;
-  }
-}
+// org-property
+.org-property {
+  .org-header {
+    margin-bottom: 20px;
+    background-color: #fff;
+    border-radius: 20px;
+  }
+  .part-box-header {
+    padding: 20px;
+  }
+  .org-body {
+    &-title {
+      font-size: 16px;
+      margin-bottom: 10px;
+    }
+  }
+  .label-title {
+    .el-form-item__label {
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+}
+
+// data-privilege
+.data-privilege {
+  .privilege-part {
+    margin-bottom: 20px;
+    background-color: #fff;
+    border-radius: 20px;
+  }
+  .privilege-header {
+    padding-bottom: 0;
+    &-top {
+      padding: 30px 30px 0;
+      border-bottom: 1px solid #eff0f5;
+
+      .box-justify {
+        padding-bottom: 15px;
+        border-bottom: 1px solid #eff0f5;
+      }
+
+      .el-form-linemess {
+        padding: 10px 0 0;
+      }
+    }
+  }
+  .privilege-body {
+    .box-justify {
+      padding: 20px 30px;
+      border-bottom: 1px solid #eff0f5;
+    }
+
+    .privilege-table {
+      padding: 20px;
+    }
+  }
+}
+.part-tabs {
+  padding: 0 30px;
+
+  &-item {
+    display: inline-block;
+    vertical-align: top;
+    padding: 20px 0 30px;
+    line-height: 20px;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    &.is-active {
+      color: $--color-primary;
+      font-weight: 600;
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 30%;
+        border-bottom: 2px solid $--color-primary;
+        left: 50%;
+        bottom: 0;
+        transform: translateX(-50%);
+      }
+    }
+
+    &:not(:last-child) {
+      .part-tabs-name {
+        border-right: 1px solid $--color-border;
+      }
+    }
+  }
+  &-name {
+    padding: 0 20px;
+  }
+}
+// .property-info
+.property-box {
+  padding: 20px;
+}
+.property-tree {
+  .el-tree-node__content {
+    padding: 5px 10px !important;
+    height: 36px;
+  }
+  .el-tree-node.is-current > .el-tree-node__content {
+    border-radius: 5px;
+    background-color: #e7ebf8;
+  }
+  .node-level-one {
+    font-weight: 600;
+  }
+  // .el-tree-node__expand-icon {
+  //   padding: 0;
+  //   border-radius: 50%;
+  //   border: 2px solid #888a9a;
+  //   color: #888a9a;
+  //   margin-right: 8px;
+  //   &.is-leaf {
+  //     color: transparent;
+  //     border-color: transparent;
+  //   }
+  // }
+}
+// paper-structure-info
+.topic-set {
+  text-align: center;
+  border: 1px solid #6e7590;
+  color: #393c4c;
+  border-radius: 10px;
+  background-color: #b1b6ce;
+  overflow: hidden;
+  &-title {
+    height: 34px;
+    line-height: 34px;
+    color: #fff;
+    border-bottom: 1px solid #6e7590;
+  }
+  &-content {
+    background-color: #fff;
+    padding: 2px;
+
+    .el-input__inner {
+      border: none;
+      text-align: center;
+      border-top-right-radius: 0 !important;
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 10 !important;
+      border-bottom-right-radius: 10 !important;
+    }
+  }
+}
+.topic-set-list {
+  .topic-set {
+    min-width: 100px;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 5px;
+  }
+}
+// edit paper
+.edit-paper {
+  .edit-header {
+    padding: 0 60px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: #fff;
+    z-index: 999;
+    box-shadow: 0px 20px 20px 0px rgba(212, 220, 243, 0.2);
+
+    &-top {
+      padding: 15px 0;
+      border-bottom: 1px solid #eff0f5;
+    }
+    &-bottom {
+      padding: 15px 0;
+    }
+  }
+  .header-info {
+    font-size: 0;
+
+    &-item {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 14px;
+      padding: 0 10px;
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:not(:last-child) {
+        border-right: 1px solid #eff0f5;
+      }
+
+      > span {
+        margin-left: 3px;
+      }
+    }
+
+    &-input {
+      display: inline;
+      .el-input__inner {
+        border: 0;
+        border-radius: 0;
+        border-bottom: 1px solid #d0d6f1;
+        padding: 0 5px;
+        width: 120px;
+        height: 20px;
+        line-height: 20px;
+        font-size: 14px;
+      }
+    }
+  }
+  .edit-body {
+    margin: 0 60px;
+    padding-top: 150px;
+  }
+  .edit-part-list {
+    background: #ffffff;
+    margin-bottom: 20px;
+    border-radius: 20px;
+    box-shadow: 0px 20px 20px 0px rgba(212, 220, 243, 0.2);
+    overflow: hidden;
+  }
+  .edit-part {
+    padding: 30px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    position: relative;
+
+    &.question-duplicate {
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 20px;
+        height: 100%;
+        z-index: 99;
+        background-color: #ffa280;
+      }
+    }
+  }
+  .edit-property {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 360px;
+    border-left: 1px solid #f0f2f6;
+    padding: 0 30px;
+    font-size: 0;
+    margin: 0 -3px;
+
+    &-item {
+      display: inline-block;
+      vertical-align: top;
+      width: 25%;
+      padding: 3px;
+      font-size: 12px;
+    }
+
+    &-body {
+      text-align: center;
+      border: 1px solid #6e7590;
+      color: #393c4c;
+      border-radius: 8px;
+      background-color: #73c7ff;
+      line-height: 24px;
+      overflow: hidden;
+    }
+    &-title {
+      color: #fff;
+      border-bottom: 1px solid #6e7590;
+    }
+    &-content {
+      background-color: #fff;
+    }
+  }
+  .edit-property-danger {
+    .edit-property-title {
+      background-color: #ffa280;
+    }
+  }
+  .edit-cont {
+    position: relative;
+    padding: 0 30px;
+    flex-grow: 2;
+    overflow: hidden;
+
+    &-title {
+      min-height: 42px;
+      line-height: 24px;
+      font-weight: 600;
+      color: #313444;
+      overflow-x: auto;
+
+      > h3 {
+        font-size: 16px;
+        font-weight: 600;
+      }
+      p {
+        display: inline;
+      }
+      audio {
+        display: inline-block;
+        vertical-align: top;
+        height: 20px;
+      }
+    }
+    &-action {
+      position: absolute;
+      background-color: #fff;
+      padding: 0 0 10px 20px;
+      top: 0;
+      right: 30px;
+      border-radius: 10px;
+      z-index: 9;
+    }
+
+    &-body {
+      line-height: 24px;
+      color: #6e7080;
+      overflow-x: auto;
+
+      p {
+        margin-bottom: 0;
+      }
+      audio {
+        display: inline-block;
+        vertical-align: top;
+        height: 20px;
+      }
+    }
+  }
+
+  .paper-option {
+    p {
+      display: inline;
+    }
+    audio {
+      display: inline-block;
+      vertical-align: top;
+      height: 20px;
+    }
+  }
+
+  .edit-paper-questions {
+    > .edit-part {
+      position: relative;
+      &:first-child {
+        box-shadow: 0px 20px 20px 0px rgba(212, 220, 243, 0.2) inset;
+        border-top: 1px solid #e0e6f7;
+      }
+      &:not(:first-child) {
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 30px;
+          right: 0;
+          z-index: auto;
+          border-bottom: 1px solid #e0e6f7;
+        }
+      }
+    }
+  }
+  .edit-paper-question-subs {
+    padding-left: 80px;
+    > .edit-part {
+      border-top: 1px solid #e0e6f7;
+    }
+  }
+}
+// view-paper
+.view-paper {
+  padding: 76px 60px 50px;
+
+  .view-header {
+    padding: 20px 60px;
+    position: fixed;
+    height: 76px;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    background-color: $--color-background;
+  }
+  .header-info {
+    font-size: 0;
+
+    &-item {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 14px;
+      padding: 0 10px;
+
+      &:first-child {
+        padding-left: 0;
+      }
+      > span {
+        margin-left: 3px;
+      }
+    }
+  }
+  .view-body {
+    border-radius: 20px;
+    background-color: #fff;
+    overflow: hidden;
+    padding: 30px;
+  }
+  .view-title {
+    text-align: center;
+    margin-bottom: 20px;
+    .paper-title {
+      height: 45px;
+      font-size: 32px;
+      font-weight: 500;
+      line-height: 45px;
+      margin-bottom: 10px;
+    }
+    .paper-title-sub {
+      font-size: 16px;
+      font-weight: 500;
+      color: #9a9dab;
+      line-height: 22px;
+      margin-bottom: 10px;
+    }
+  }
+  .view-summary {
+    padding-bottom: 30px;
+  }
+  .view-seperator {
+    border-bottom: 1px solid #f0f2f6;
+    margin: 0 -30px;
+  }
+  .view-part {
+    position: relative;
+    padding: 30px 0;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #f0f2f6;
+    }
+
+    &-action {
+      position: absolute;
+      background-color: #fff;
+      top: 30px;
+      right: 10px;
+      border-radius: 10px;
+      z-index: 9;
+    }
+    .paper-question-title {
+      margin-bottom: 10px;
+    }
+    .paper-question-body {
+      color: #6e7080;
+    }
+  }
+  .view-quesiton {
+    padding: 20px 30px;
+    border-radius: 15px;
+    background: #f4f6fc;
+    position: relative;
+    &:not(:last-child) {
+      margin-bottom: 10px;
+    }
+    .view-part-action {
+      top: 10px;
+    }
+  }
+  .view-question-subs {
+    .view-part {
+      padding: 20px;
+    }
+  }
+}
+// paper
+.paper {
+  &-question-title {
+    min-height: 22px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #313444;
+    line-height: 22px;
+    overflow-x: auto;
+    p {
+      display: inline;
+    }
+    audio {
+      display: inline-block;
+      vertical-align: top;
+      height: 20px;
+    }
+  }
+  &-question-body {
+    min-height: 24px;
+    line-height: 24px;
+    overflow-x: auto;
+
+    p {
+      margin-bottom: 0;
+    }
+    audio {
+      display: inline-block;
+      vertical-align: top;
+      height: 20px;
+    }
+  }
+  &-question-option {
+    line-height: 24px;
+    overflow-x: auto;
+    p {
+      display: inline;
+    }
+    audio {
+      display: inline-block;
+      vertical-align: top;
+      height: 20px;
+    }
+  }
+}
+.row-question-body {
+  line-height: 24px;
+  cursor: pointer;
+  p {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-bottom: 0;
+  }
+}
+// question-edit
+.question-edit-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .option-check {
+    width: 60px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .option-delete {
+    width: 60px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    text-align: center;
+  }
+  .option-body {
+    flex-grow: 2;
+  }
+}
+// question-preview
+.question-preview {
+  .paper-question-body {
+    padding-top: 6px;
+  }
+  .sub-question {
+    margin: 15px 0 15px 40px;
+    padding: 5px 0;
+    border-top: 1px solid $--color-border;
+    position: relative;
+
+    &-no {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      background-color: $--color-primary;
+      color: #fff;
+      font-size: 12px;
+      line-height: 16px;
+      text-align: center;
+      top: 15px;
+      border-radius: 3px;
+      left: 0;
+    }
+  }
+  .el-form-item {
+    margin-bottom: 5px;
+  }
+}
+// question-info
+.question-info {
+  border: 1px solid #f0f2f6;
+  background-color: #fcfcfd;
+  border-radius: 10px;
+  padding: 30px;
+
+  .line-seperator {
+    border-color: #f0f2f6;
+  }
+  .el-form-item {
+    margin: 0;
+  }
+  .el-form-item__label {
+    color: $--color-text-secondary;
+  }
+
+  .sub-question {
+    margin: 10px 0 10px 30px;
+    padding: 5px 0 5px 24px;
+    border-top: 1px solid $--color-border;
+    position: relative;
+
+    &-no {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      color: $--color-text-secondary;
+      border: 1px solid $--color-text-secondary;
+      font-size: 12px;
+      line-height: 14px;
+      text-align: center;
+      top: 15px;
+      border-radius: 3px;
+      left: 0;
+    }
+  }
+}
+// gen-paper-detail
+.gen-paper-detail {
+  .gen-step-box {
+    padding: 20px 30px 30px;
+  }
+  .gen-step-title {
+    padding-bottom: 20px;
+    border-bottom: 1px solid #f0f2f6;
+    position: relative;
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 4px;
+      height: 10px;
+      border-radius: 2px;
+      background-color: $--color-primary;
+      top: 5px;
+      left: 0;
+      z-index: auto;
+    }
+
+    > h3 {
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 600;
+      margin: 0;
+      padding-left: 15px;
+    }
+  }
+  .gen-step-title-sub {
+    border: 0;
+    margin-top: 10px;
+    padding-bottom: 10px;
+  }
+  .gen-step-body {
+    padding-top: 10px;
+  }
+}
+// edit-question
+.edit-question {
+  .option-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    &-info {
+      width: 40px;
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+    &-body {
+      flex-grow: 2;
+    }
+  }
+}

src/components/vEditor/VEditor.vue

@@ -37,10 +37,12 @@ export default {
   props: {
     placeholder: { type: String, default: "请输入..." },
     value: {
-      type: String,
+      type: [String, Object],
       // 要么为null，要么一定要遵循结构 body.sections[]
       // const EMPTY_RICH_TEXT
-      default: () => JSON.stringify({ sections: [] }),
+      default: () => {
+        return { sections: [] };
+      },
     },
     styles: { type: String, default: "" },
     folder: { type: String, default: "" },
@@ -92,14 +94,8 @@ export default {
       if (this.emitType === "html") {
         this.$refs.editor.innerHTML = this.value;
       } else {
-        let content = { sections: [] };
-        try {
-          content = JSON.parse(this.value);
-          renderRichText(content, this.$refs.editor, false);
-        } catch (e) {
-          this.$refs.editor.innerHTML = this.value;
-          this.emitJSON();
-        }
+        const content = this.value || { sections: [] };
+        renderRichText(content, this.$refs.editor, false);
       }
     },
     emitJSON() {
@@ -118,27 +114,13 @@ export default {
       this.clearSetTs();
       // 延迟触发input任务，避免频繁触发，同时也等待图片渲染，方便获取图片显示尺寸
       this.addSetTime(() => {
-        console.log("input:" + Math.random());
+        // console.log("input:" + Math.random());
         this.inputDelaying = false;
         const json = toJSON(this.$refs.editor);
-        // console.log("emit", json, this.$refs.editor);
-        // 未来校验多了的话，考虑移除去
-        if (json.length > this.maxJsonSize) {
-          this.$message.error(
-            `富文本长度超过限制，最长可以为 ${
-              this.maxJsonSize / 1024 / 1024
-            } MB.`
-          );
-          return;
-        }
-        // console.log(json, this.value, json === this.value);
         this.$emit("input", json);
         this.$emit("change", json);
         // this.$emit("on-result", json);
-        // console.log(json);
       }, 200);
-
-      // re-render 之后 restore cursor? 不现实，因为dom结构变了。
     },
     wheelEventHandle(e) {
       // console.log(e);

src/components/vEditor/toJSON.js

@@ -25,7 +25,8 @@ export function toJSON(editor) {
 
   /** @type {RichTextJSON} */
   const result = { sections: newSections };
-  return JSON.stringify(result, null);
+  return result;
+  // return JSON.stringify(result, null);
 }
 
 function toNodeSections(node) {

src/modules/questions/views/EditOtherQuestion.vue

@@ -1,6 +1,6 @@
 <!-- 编辑填空，问答，判断题 -->
 <template>
-  <section v-loading="fullscreenLoading" class="content">
+  <section v-loading="fullscreenLoading" class="content edit-question">
     <div class="part-box">
       <div class="part-box-header">
         <h1 class="part-box-title">
@@ -190,7 +190,11 @@
       <el-form class="form-tight" label-width="100px">
         <!-- end -->
         <el-form-item label="题干" prop="quesBody">
-          <v-editor v-model="quesModel.quesBody"></v-editor>
+          <v-editor
+            v-model="quesModel.quesBody"
+            :enable-answer-point="enableAnswerPoint"
+            @change="quesBodyChange"
+          ></v-editor>
         </el-form-item>
 
         <el-form-item
@@ -210,7 +214,7 @@
         <!-- <div class="line-seperator"></div> -->
 
         <!-- 非套题 -->
-        <el-form-item
+        <!-- <el-form-item
           v-if="
             quesModel.questionType !== 'NESTED_ANSWER_QUESTION' &&
             quesModel.questionType !== 'BOOL_ANSWER_QUESTION'
@@ -219,14 +223,54 @@
           prop="quesAnswer"
         >
           <v-editor v-model="quesModel.quesAnswer"></v-editor>
+        </el-form-item> -->
+        <el-form-item
+          v-if="quesModel.questionType === 'FILL_BLANK_QUESTION'"
+          label="答案"
+          prop="quesAnswer"
+        >
+          <div v-if="quesAnswer" class="option-list">
+            <div
+              v-for="(opt, index) of quesAnswer"
+              :key="index"
+              class="option-item"
+            >
+              <div class="option-item-info">
+                <span>（{{ index + 1 }}）</span>
+              </div>
+              <v-editor
+                :value="opt"
+                class="option-item-body"
+                @change="(val) => updateAnswerPoint(index, val)"
+              />
+            </div>
+          </div>
         </el-form-item>
+        <!-- 问答题 -->
+        <el-form-item
+          v-if="quesModel.questionType === 'TEXT_ANSWER_QUESTION'"
+          label="答案"
+          prop="quesAnswer"
+        >
+          <v-editor v-model="quesAnswer" @change="textAnswerChange"></v-editor>
+        </el-form-item>
+        <!-- 判断题 -->
         <el-form-item
           v-if="quesModel.questionType == 'BOOL_ANSWER_QUESTION'"
           label="答案"
           prop="quesAnswer"
         >
-          <el-select v-model="quesModel.quesAnswer" placeholder="请选择">
-            <el-option v-for="op in options" :key="op" :label="op" :value="op">
+          <el-select
+            v-model="quesAnswer"
+            placeholder="请选择"
+            @change="boolAnswerChange"
+          >
+            <el-option
+              v-for="op in options"
+              :key="op.value"
+              :label="op.label"
+              :value="op.value"
+            >
             </el-option>
           </el-select>
         </el-form-item>
@@ -260,7 +304,18 @@ export default {
         quesProperties: [],
         score: 0,
       },
-      options: ["正确", "错误"],
+      quesAnswer: null,
+      prevAnswerPointCount: 0,
+      options: [
+        {
+          value: 0,
+          label: "错误",
+        },
+        {
+          value: 1,
+          label: "正确",
+        },
+      ],
       difficultyDegreeList: [
         { label: 0.1, value: 0.1 },
         { label: 0.2, value: 0.2 },
@@ -289,9 +344,6 @@ export default {
       secondPropertyId: "", //二级属性id
       //验证
       rules: {
-        // quesBody: [
-        //     {required: true, message: '请输入题干', trigger: 'blur'}
-        // ],
         quesAnswer: [
           { required: true, message: "请输入答案", trigger: "change" },
         ],
@@ -305,6 +357,9 @@ export default {
       }
       return false;
     },
+    enableAnswerPoint() {
+      return this.quesModel.questionType === "FILL_BLANK_QUESTION";
+    },
   },
   created() {
     this.paperId = this.$route.params.paperId;
@@ -346,14 +401,67 @@ export default {
     }, 200);
   },
   methods: {
+    boolAnswerChange(val) {
+      this.quesModel.quesAnswer = val ? "true" : "false";
+    },
+    textAnswerChange(val) {
+      this.quesModel.quesAnswer = JSON.stringify([val]);
+    },
+    resetNumberAndSaveAnswerPoints(answer) {
+      this.quesAnswer = answer.map((element, index) => {
+        element.index = index + 1;
+        return element;
+      });
+      this.quesModel.quesAnswer = JSON.stringify(this.quesAnswer);
+    },
+    updateAnswerPoint(index, value) {
+      // console.log(index, this.question.answer[index]);
+      this.quesAnswer[index] = { ...value };
+      this.resetNumberAndSaveAnswerPoints(this.quesAnswer);
+    },
+    getAnswerPointCount(bodyJson) {
+      let count = 0;
+      bodyJson.sections.forEach((section) => {
+        section.blocks.forEach((block) => {
+          if (block.type === "cloze") count++;
+        });
+      });
+      return count;
+    },
+    quesBodyChange(quesBodyJson) {
+      this.quesModel.quesBody = quesBodyJson;
+
+      let curPonitCount = this.getAnswerPointCount(quesBodyJson);
+      if (curPonitCount === this.prevAnswerPointCount) return;
+      this.prevAnswerPointCount = curPonitCount;
+
+      let newAnswer = [];
+      for (let i = 0; i < curPonitCount; i++) {
+        newAnswer.push(this.quesAnswer[i] || { sections: [] });
+      }
+
+      this.resetNumberAndSaveAnswerPoints(newAnswer);
+    },
     saveQues(formName) {
       if (!this.quesModel.difficultyDegree) {
         this.$notify({
           message: "请选择试题难度",
           type: "error",
         });
-        return false;
+        return;
+      }
+
+      if (this.quesModel.questionType === "FILL_BLANK_QUESTION") {
+        const pointCount = this.getAnswerPointCount(this.quesModel.quesBody);
+        if (!pointCount) {
+          this.$notify({
+            message: "请插入答题点",
+            type: "error",
+          });
+          return;
+        }
       }
+
       this.$refs[formName].validate((valid) => {
         if (valid) {
           if (this.questionId) {
@@ -407,6 +515,18 @@ export default {
           this.quesModel.answerType = "DIVERSIFIED_TEXT";
         }
 
+        if (this.quesModel.questionType === "BOOL_ANSWER_QUESTION") {
+          this.quesAnswer = this.quesModel.quesAnswer === "true" ? 1 : 0;
+        } else if (this.quesModel.questionType === "TEXT_ANSWER_QUESTION") {
+          const answer = JSON.parse(this.quesModel.quesAnswer);
+          this.quesAnswer = answer[0];
+        } else if (this.quesModel.questionType === "FILL_BLANK_QUESTION") {
+          const answer = JSON.parse(this.quesModel.quesAnswer);
+          this.quesAnswer = answer;
+          this.prevAnswerPointCount = this.getAnswerPointCount(
+            this.quesModel.quesBody
+          );
+        }
         this.initCourseProperty();
       });
     },