@qxs-bns/components 0.0.89 → 0.0.90

package/theme-chalk/src/subject-list.scss

@@ -1,4 +1,4 @@
-@use "mixins/mixins" as *;
+@use "./mixins/mixins" as *;
 
 @include b(subject-list) {
   @include e(list-exam) {
@@ -12,6 +12,11 @@
       align-items: center;
     }
 
+    .flex-items-start {
+      display: flex;
+      align-items: flex-start;
+    }
+
     .flex-justify-between {
       display: flex;
       justify-content: space-between;
@@ -27,12 +32,10 @@
       justify-content: flex-end;
     }
 
-    .margin-left-10 {
-      margin-left: 10px;
-    }
-
     .label {
-      min-width: 50px;
+      min-width: 60px;
+      font-size: 13px;
+      color: #606266;
     }
 
     .flex-1 {
@@ -41,94 +44,324 @@
 
     .subject-list-wrapper {
       width: 100%;
-      margin-bottom: 20px;
+      padding: 16px;
+      margin-bottom: 16px;
+      background: #fff;
+      border: 1px solid #ebeef5;
+      border-radius: 4px;
+    }
+
+    // 排序模式切换按钮
+    .sort-mode-toggle {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 12px;
     }
 
-    .margin-bottom {
-      margin-bottom: 20px;
+    // 排序列表
+    .sort-list {
+      .sort-item {
+        display: flex;
+        align-items: center;
+        padding: 12px 16px;
+        margin-bottom: 8px;
+        background: #f8f9fa;
+        border: 1px solid #e4e7ed;
+        border-radius: 6px;
+        cursor: grab;
+        transition: all 0.3s ease;
+
+        &:hover {
+          background: #ecf5ff;
+          border-color: #c6e2ff;
+        }
+
+        &:active {
+          cursor: grabbing;
+        }
+
+        .sort-handle {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 20px;
+          height: 20px;
+          margin-right: 12px;
+          color: #909399;
+        }
+
+        .sort-index {
+          font-weight: 600;
+          color: #409eff;
+          margin-right: 12px;
+          min-width: 24px;
+        }
+
+        .sort-title {
+          flex: 1;
+          font-size: 14px;
+          color: #303133;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .sort-type {
+          font-size: 12px;
+          color: #909399;
+          margin-left: 12px;
+          padding: 2px 8px;
+          background: #f0f0f0;
+          border-radius: 4px;
+        }
+      }
+
+      // 拖拽占位符（原始位置的占位）
+      .sort-ghost {
+        opacity: 0.5;
+        background: #ecf5ff;
+        border: 2px dashed #409eff;
+      }
+
+      // 被选中的元素
+      .sort-chosen {
+        background: #ecf5ff;
+        border-color: #409eff;
+        box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
+        transform: scale(1.02);
+      }
+
+      // 拖拽中的元素
+      .sort-drag {
+        opacity: 0.9;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+      }
     }
 
     .auto-line {
       flex: 1;
       height: 1px;
-      margin: 0 15px;
-      background-color: #c8c8c8;
+      margin: 0 12px;
+      background: #ebeef5;
     }
 
     .title {
       font-size: 14px;
-      font-weight: 500;
+      color: #303133;
     }
 
     .rich-text {
+      margin-top: 8px;
+
       img {
         max-width: 100%;
       }
     }
+
+    // 拖拽相关样式
+    .subject-item {
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      transition: background-color 0.3s ease;
+
+      // 拖拽手柄
+      .drag-handle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        min-width: 24px;
+        height: 24px;
+        margin-right: 12px;
+        margin-top: 20px;
+        color: #c0c4cc;
+        cursor: grab;
+        border-radius: 4px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          color: #409eff;
+          background: #ecf5ff;
+        }
+
+        &:active {
+          cursor: grabbing;
+        }
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      // 题目内容区域
+      .subject-content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      // 拖拽预览模式
+      .subject-preview {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        padding: 12px 16px;
+        background: #f5f7fa;
+        border: 1px solid #e4e7ed;
+        border-radius: 6px;
+        font-size: 14px;
+        color: #303133;
+
+        .subject-preview-index {
+          font-weight: 600;
+          margin-right: 8px;
+          color: #409eff;
+        }
+
+        .subject-preview-title {
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .subject-item.is-preview {
+      display: block;
+
+      .drag-handle {
+        display: none;
+      }
+    }
+
+    .subject-item.is-dragging-mode {
+      .subject-content {
+        display: none;
+      }
+    }
+
+    // 题目内容区域
+    .subject-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    // 拖拽占位符样式
+    .ghost {
+      background: #ecf5ff;
+      border: 1px dashed #409eff;
+      opacity: 0.5;
+    }
+
+    // 选中状态样式
+    .chosen {
+      background: #ecf5ff;
+    }
+
+    // 拖拽中样式
+    .dragging {
+      background: #ecf5ff;
+      box-shadow: 0 0 10px rgb(0 0 0 / 10%);
+    }
+  }
+
+  @include b(subject-action) {
+    @include e(action-exam) {
+      // 拖拽手柄样式
+      .drag-handle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+        color: #c0c4cc;
+        cursor: grab;
+        border-radius: 4px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          color: #409eff;
+          background: #ecf5ff;
+        }
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+    }
   }
 
   @include b(subject-single) {
     @include e(single-exam) {
+      padding: 12px 0;
+
       .preview-answer {
         display: flex;
         flex-direction: column;
-        margin-bottom: 10px;
+        margin-top: 12px;
       }
 
       .flex {
         display: flex;
-        align-items: center;
-      }
-
-      .margin-bottom {
-        margin-bottom: 20px;
       }
 
-      .answer-list {
-        .answer-item {
-          margin-top: 15px;
+      .answer-item {
+        display: flex;
+        align-items: center;
+        margin-top: 6px;
+        border-radius: 4px;
 
-          .input {
-            width: 300px;
+        .label {
+          min-width: 60px;
+          font-size: 13px;
+          color: #909399;
+        }
 
-            [class$="-input"] {
-              font-weight: bold;
-            }
-          }
+        .input {
+          flex: 1;
+          max-width: 360px;
+        }
 
-          .correct {
-            margin: 0 10px;
+        .correct {
+          margin: 0 10px;
+          color: #909399;
 
-            &:hover {
-              color: #3d61e3;
-              cursor: pointer;
-            }
+          &:hover {
+            color: #409eff;
+            cursor: pointer;
           }
+        }
 
-          .is-correct {
-            color: #67c23a;
-          }
+        .is-correct {
+          color: #67c23a;
+        }
 
-          .icon {
-            margin-left: 10px;
-            font-size: 18px;
-            color: #a3a3a3;
-            cursor: pointer;
-          }
+        .icon {
+          margin-left: 8px;
+          font-size: 16px;
+          color: #c0c4cc;
+          cursor: pointer;
 
-          .disabled {
-            color: #c0c4cc;
-            cursor: not-allowed;
+          &:hover {
+            color: #409eff;
           }
         }
+
+        .disabled {
+          color: #e4e7ed;
+          cursor: not-allowed;
+        }
       }
 
       .preview {
         .answer-radio {
-          padding-left: 10px;
+          padding-left: 8px;
 
           .radio {
-            margin-top: 10px;
+            margin-top: 8px;
           }
         }
       }
@@ -137,33 +370,57 @@
 
   @include b(subject-blank-fill) {
     @include e(blank-fill-exam) {
+      padding: 12px 0;
+
       .flex {
         display: flex;
-        align-items: center;
       }
 
       .label {
-        min-width: 50px;
-        margin-right: 10px;
-      }
-
-      .margin-bottom {
-        margin-bottom: 20px;
+        min-width: 80px;
+        font-size: 13px;
+        color: #606266;
+        font-weight: 500;
       }
 
       .answer-list {
+        margin-top: 16px;
+
         .answer-item {
           width: 100%;
-          margin-top: 15px;
+          margin-bottom: 12px;
+          padding: 12px 16px;
+          background: #f8f9fa;
+          border: 1px solid #e4e7ed;
+          border-radius: 8px;
+          transition: all 0.2s;
+
+          &:hover {
+            border-color: #c0c4cc;
+            background: #f5f7fa;
+          }
+
+          .label {
+            min-width: 90px;
+            font-size: 13px;
+            color: #303133;
+            font-weight: 500;
+          }
 
           .answer-tags {
             flex: 1;
-            padding: 5px 15px;
-            border: 1px solid #eee;
-            border-radius: 4px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 12px;
+            background: #fff;
+            border: 1px solid #dcdfe6;
+            border-radius: 6px;
+            min-height: 36px;
 
             [class$="-tag"] {
-              margin-right: 10px;
+              margin: 0;
             }
           }
         }
@@ -171,9 +428,11 @@
 
       .preview {
         .content {
-          min-height: 100px;
-          padding-top: 10px;
-          background-color: #fff;
+          min-height: 80px;
+          padding: 16px;
+          background: #fafafa;
+          border: 1px solid #ebeef5;
+          border-radius: 8px;
         }
       }
     }
@@ -181,42 +440,54 @@
 
   @include b(subject-text-fill) {
     @include e(text-fill-exam) {
+      padding: 12px 0;
+
       .flex {
         display: flex;
-        align-items: center;
       }
 
       .label {
-        min-width: 50px;
-        margin-right: 10px;
-      }
-
-      .margin-bottom {
-        margin-bottom: 20px;
+        min-width: 60px;
+        font-size: 13px;
+        color: #606266;
       }
 
       .answer-list {
         .answer-item {
           width: 100%;
-          margin-top: 15px;
+          margin-top: 8px;
 
           .answer-tags {
+            display: flex;
             flex: 1;
-            padding: 5px 15px;
-            border: 1px solid #eee;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 12px;
+            min-height: 40px;
+            background: #fafafa;
+            border: 1px solid #ebeef5;
             border-radius: 4px;
+
+            [class$="-tag"] {
+              margin: 0;
+            }
           }
 
           .operation {
             .icon {
-              margin-left: 10px;
-              font-size: 16px;
-              color: #a3a3a3;
+              margin-left: 8px;
+              font-size: 14px;
+              color: #c0c4cc;
               cursor: pointer;
+
+              &:hover {
+                color: #409eff;
+              }
             }
 
             .disabled {
-              color: #c0c4cc;
+              color: #e4e7ed;
               cursor: not-allowed;
             }
           }
@@ -225,8 +496,12 @@
 
       .preview {
         .content {
-          min-height: 100px;
-          margin-top: 10px;
+          min-height: 80px;
+          padding: 12px;
+          margin-top: 8px;
+          background: #fafafa;
+          border: 1px solid #ebeef5;
+          border-radius: 4px;
         }
       }
     }
@@ -234,42 +509,45 @@
 
   @include b(subject-scale) {
     @include e(scale-exam) {
+      padding: 12px 0;
+
       .flex {
         display: flex;
-        align-items: center;
       }
 
       .label {
-        min-width: 50px;
-      }
-
-      .margin-bottom {
-        margin-bottom: 20px;
+        min-width: 60px;
+        font-size: 13px;
+        color: #606266;
       }
 
       .answer {
-        margin: 20px 0;
-
         .answer-list {
-          margin-left: 40px;
+          margin-left: 32px;
 
           .answer-item {
-            margin-bottom: 20px;
+            margin-bottom: 16px;
+            border-radius: 4px;
 
             .order {
               width: 16px;
-              margin-right: 10px;
+              margin-right: 8px;
+              color: #909399;
             }
 
             .icon {
-              margin-left: 10px;
-              font-size: 16px;
-              color: #a3a3a3;
+              margin-left: 8px;
+              font-size: 14px;
+              color: #c0c4cc;
               cursor: pointer;
+
+              &:hover {
+                color: #409eff;
+              }
             }
 
             .disabled {
-              color: #c0c4cc;
+              color: #e4e7ed;
               cursor: not-allowed;
             }
           }

package/theme-chalk/src/subject-template.scss

@@ -1,4 +1,4 @@
-@use "mixins/mixins" as *;
+@use "./mixins/mixins" as *;
 
 @include b(subject-template) {
   font-size: 14px;

package/theme-chalk/src/subject-type.css

@@ -1 +1 @@
-.qxs-subject-type__type-list .type-item{margin-bottom:20px}.qxs-subject-type__type-list .base-subject{display:flex;flex-wrap:wrap;align-items:center}.qxs-subject-type__type-list .base-subject .item{width:50px;height:22px;margin-top:10px;margin-right:10px;font-size:14px;color:#5a5a5a;text-align:center;cursor:pointer;background:#fafafa}.qxs-subject-type__type-list .base-subject .item:hover{color:#3d61e3;background:rgba(61,97,227,.12)}
+.qxs-subject-type__type-list .type-item{margin-bottom:20px}.qxs-subject-type__type-list .type-item>div:first-child{margin-bottom:10px;font-size:13px;color:#909399}.qxs-subject-type__type-list .base-subject{display:flex;flex-wrap:wrap;gap:8px}.qxs-subject-type__type-list .base-subject .item{display:flex;align-items:center;justify-content:center;min-width:64px;height:28px;padding:0 12px;font-size:13px;color:#606266;cursor:pointer;background:#fff;border:1px solid #dcdfe6;border-radius:4px;transition:all .15s}.qxs-subject-type__type-list .base-subject .item:hover{color:#409eff;border-color:#409eff}

package/theme-chalk/src/subject-type.scss

@@ -1,30 +1,40 @@
-@use "mixins/mixins" as *;
+@use "./mixins/mixins" as *;
 
 @include b(subject-type) {
   @include e(type-list) {
     .type-item {
       margin-bottom: 20px;
+
+      > div:first-child {
+        margin-bottom: 10px;
+        font-size: 13px;
+        color: #909399;
+      }
     }
 
     .base-subject {
       display: flex;
       flex-wrap: wrap;
-      align-items: center;
+      gap: 8px;
 
       .item {
-        width: 50px;
-        height: 22px;
-        margin-top: 10px;
-        margin-right: 10px;
-        font-size: 14px;
-        color: #5a5a5a;
-        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 64px;
+        height: 28px;
+        padding: 0 12px;
+        font-size: 13px;
+        color: #606266;
         cursor: pointer;
-        background: #fafafa;
+        background: #fff;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        transition: all 0.15s;
 
         &:hover {
-          color: #3d61e3;
-          background: rgb(61 97 227 / 12%);
+          color: #409eff;
+          border-color: #409eff;
         }
       }
     }

package/theme-chalk/src/tiny-mce-editor.scss

@@ -1,4 +1,4 @@
-@use "mixins/mixins" as *;
+@use "./mixins/mixins" as *;
 
 @include b(tiny-mce-editor) {
   @include e(tiny-mce) {

package/theme-chalk/src/ui/button.css

@@ -0,0 +1 @@
+.qxs-button{box-sizing:border-box;display:inline-flex;gap:6px;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:400;line-height:1;color:#606266;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;border-radius:4px;outline:none;transition:all .2s}.qxs-button:hover,.qxs-button:focus{color:var(--qxs-color-primary, #3D61E3);background-color:rgba(61,97,227,.1);border-color:rgba(61,97,227,.3)}.qxs-button:active{color:var(--qxs-color-primary, #3D61E3);border-color:var(--qxs-color-primary, #3D61E3)}.qxs-button--primary{color:#fff;background-color:var(--qxs-color-primary, #3D61E3);border-color:var(--qxs-color-primary, #3D61E3)}.qxs-button--primary:hover,.qxs-button--primary:focus{color:#fff;background:#5a7be8;border-color:#5a7be8}.qxs-button--primary:active{color:#fff;background:#2d4bc7;border-color:#2d4bc7}.qxs-button--success{color:#fff;background-color:#67c23a;border-color:#67c23a}.qxs-button--success:hover,.qxs-button--success:focus{color:#fff;background:#85ce61;border-color:#85ce61}.qxs-button--warning{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.qxs-button--warning:hover,.qxs-button--warning:focus{color:#fff;background:#ebb563;border-color:#ebb563}.qxs-button--danger{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.qxs-button--danger:hover,.qxs-button--danger:focus{color:#fff;background:#f78989;border-color:#f78989}.qxs-button--info{color:#fff;background-color:#909399;border-color:#909399}.qxs-button--info:hover,.qxs-button--info:focus{color:#fff;background:#a6a9ad;border-color:#a6a9ad}.qxs-button--large{padding:12px 20px;font-size:14px;border-radius:4px}.qxs-button--small{padding:5px 11px;font-size:12px;border-radius:3px}.qxs-button.is-disabled{cursor:not-allowed;opacity:.6}.qxs-button.is-disabled:hover,.qxs-button.is-disabled:focus{color:#606266;background-color:#fff;border-color:#dcdfe6}.qxs-button.is-plain:hover,.qxs-button.is-plain:focus{color:var(--qxs-color-primary, #3D61E3);background:#fff;border-color:var(--qxs-color-primary, #3D61E3)}.qxs-button.is-round{border-radius:20px}.qxs-button.is-circle{width:32px;height:32px;padding:0;border-radius:50%}.qxs-button__loading{margin-right:4px}.qxs-button__loading-icon{width:14px;height:14px;animation:rotating 1s linear infinite}@keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}