@jx3box/jx3box-editor 2.2.48 → 3.0.0

package/src/assets/css/tinymce/_.less

@@ -0,0 +1,28 @@
+.c-article-tinymce {
+    font-size: 1em;
+    line-height: 1.8;
+    color: @color;
+    max-width: 100%;
+    -webkit-font-smoothing: antialiased !important;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    font-family: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, Segoe UI, "Microsoft YaHei", Roboto,
+        "Helvetica Neue", Trebuchet MS, Calibri, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
+    text-rendering: optimizelegibility;
+
+    * {
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+}
+.c-article-editor {
+    margin: 8px;
+}
+.c-article-origin {
+    display: none;
+}
+@media print {
+    .c-article-tinymce {
+        -webkit-print-color-adjust: exact;
+    }
+}

package/src/assets/css/tinymce/a.less

@@ -0,0 +1,21 @@
+/* 链接 */
+.c-article-tinymce{
+    a {
+        color: #0366d6;
+        text-decoration: none;
+        word-break: break-all;
+        &:hover {
+            text-decoration: underline;
+            text-underline-offset: 4px;
+            text-decoration-color: #0366d6;
+        }
+    }
+
+    .e-jx3-author{
+        color:#8250df;
+
+        &:hover{
+            box-shadow: 0 1px 0 #8250df;
+        }
+    }
+}

package/{assets → src/assets}/css/tinymce/code.less

@@ -1,4 +1,4 @@
-.c-article-tinymce{
+.c-article-tinymce {
     //兼容旧代码
     code {
         font-family: Consolas, monospace, serif;

package/{assets/css → src/assets/css/tinymce}/combo.less

@@ -1,3 +1,118 @@
+// 连招
+@import '../var.less';
+.c-article-tinymce:not(.c-article-editor) {
+    .w-skill-combo {
+        .flex;
+        gap: 20px;
+        flex-wrap: wrap;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    .w-skill-combo-item {
+        list-style: none;
+        .pr;
+        .flex;
+        flex-direction: column;
+        align-items: center;
+        &:not(:last-of-type)::after {
+            content: "▲";
+            .pa;
+            right: -20px;
+            top: 10px;
+            transform: rotate(90deg);
+        }
+
+        img {
+            border: none;
+            padding: 0;
+            margin: 0;
+        }
+        .u-skill-icon {
+            .size(48px);
+            .x;
+            .flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .u-skill-icon_small {
+            .size(42px);
+        }
+
+        .u-gcd-icon {
+            .pa;
+            // 左上角
+            left: -4px;
+            top: -4px;
+            background-color: @primary;
+            .size(12px);
+            .r(50%);
+            .db;
+            .none;
+
+            &.is-show {
+                display: inline-block;
+            }
+
+            i {
+                color: #fff;
+                .fz(12px, 1);
+                .db;
+            }
+        }
+        .u-skill-name {
+            .fz(13px,1.5);
+            width: 56px;
+            overflow: hidden;
+            text-overflow: clip;
+            white-space: pre-wrap;
+            text-align: center;
+        }
+
+        .u-skill-name_underline {
+            text-decoration: underline;
+            text-underline-offset: 3px;
+        }
+
+        .u-skill-note {
+            .fz(12px,1);
+            width: 56px;
+            text-overflow: clip;
+            white-space: pre-wrap;
+            text-align: center;
+            margin-bottom: 5px;
+        }
+    }
+}
+.c-article-editor {
+    .e-skill-combo {
+        font-size: 14px;
+        width: 100%;
+        box-sizing: border-box;
+        background-color: #f1f8ff;
+        border: 1px solid #c8e1ff;
+        color: #62a9ff;
+        padding: 10px 10px 10px 30px;
+        font-family: Monaco, Consolas, "Lucida Console", "Courier New", serif;
+        position: relative;
+        *zoom: 1;
+        border-radius: 3px;
+    }
+    .e-skill-combo:after {
+        content: "JX3BOX·连招套路";
+        position: absolute;
+        right: 8px;
+        top: 8px;
+        background-color: #62a9ff;
+        color: #fff;
+        border-radius: 3px;
+        padding: 2px 8px;
+        line-height: 21px;
+        font-size: 12px;
+    }
+}
+
 .scrollbar() {
     &::-webkit-scrollbar {
         width: 4px;
@@ -18,25 +133,15 @@
     }
 }
 
-// .c-combo-content {
-//     .flex;
-// }
-
-// .c-combo-content__left {
-//     width: 60%;
-// }
 
-// .c-combo-content__right {
-//     width: 40%;
-// }
-
-.m-resource-combo {
+.w-resource-combo {
     .m-combo-list {
         max-height: 230px;
         overflow: auto;
         .scrollbar();
     }
     .m-database-search {
+        display: flex;
         position: sticky;
         z-index: 100;
         top: 0;
@@ -51,7 +156,6 @@
         .u-input {
             flex: 1;
         }
-        display: flex;
     }
 
     .m-database-tip {
@@ -67,11 +171,11 @@
     // 加载更多
     .m-archive-more {
         .none;
-        margin: 0 20px 10px 20px;
-        box-sizing: border-box;
-        width: calc(100% - 40px);
     }
     .m-archive-more.show {
+        margin: 10px 20px 10px 20px;
+        box-sizing: border-box;
+        width: calc(100% - 40px);
         .db;
     }
 
@@ -99,7 +203,7 @@
 
         .u-item {
             .db;
-            border: 2px solid @border-hr;
+            border: 2px solid #e1e4e8;
             background: #fafbfc;
             margin-bottom: 10px;
             padding: 10px 10px 10px 70px;
@@ -385,6 +489,7 @@
         padding: 20px;
         border-radius: 8px;
         flex-direction: column;
+        .scrollbar();
         .m-martial-skills {
             flex: 1;
         }
@@ -459,4 +564,4 @@
             }
         }
     }
-}
+}

package/{assets → src/assets}/css/tinymce/fold.less

@@ -2,9 +2,7 @@
 .c-article-tinymce{
     .e-details,
     .e-summary {
-        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
-            Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-            Segoe UI Symbol;
+        white-space: pre-wrap;
         margin: 0;
     }
     .e-summary {
@@ -23,13 +21,12 @@
         // color: #0366d6;
         // font-size:14px;
         &:before {
-            content: ">";
+            content: "▶";
             display: block;
             position: absolute;
             left: 10px;
             top: 8px;
-            font-family: "宋体", Consolas;
-            color: #aaa;
+            color: @primary;
             transform: rotate(0);
         }
         &:after {

package/src/assets/css/tinymce/h.less

@@ -0,0 +1,90 @@
+//标题
+.c-article-tinymce {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin-top: 24px;
+        margin-bottom: 16px;
+        font-weight: 600;
+        line-height: 1.25;
+    }
+
+    h1,
+    h2 {
+        padding-bottom: 0.3em;
+        border-bottom: 1px solid #eaecef;
+    }
+
+    h1 {
+        font-size: 2em;
+    }
+
+    h2 {
+        font-size: 1.5em;
+    }
+
+    h3 {
+        font-size: 1.25em;
+    }
+
+    h4 {
+        font-size: 15px;
+        padding: 8px 10px;
+
+        background-color: #fafbfc;
+        border-radius: 6px;
+        border-left:4px solid @primary;
+
+
+        position: relative;
+        overflow: hidden;
+        // background-color: #f1f1ff;
+        // border: 1px solid @primary;
+        &::before {
+            content: "";
+            font-size: 20px;
+            display: block;
+            position: absolute;
+            width: 80px;
+            height: 3px;
+            top: 0;
+            left: 15px;
+            // background-color: @primary;
+            // border-bottom-right-radius: 20px;
+            // border-bottom-left-radius: 20px;
+        }
+    }
+
+    h5 {
+        font-size: 14px;
+        position: relative;
+        border-bottom: 1px solid #eee;
+        padding: 10px 10px;
+        // background-color: #fafbfc;
+        &::after {
+            content: "";
+            display: block;
+            width: 120px;
+            height: 2px;
+            background-color: @primary;
+            position: absolute;
+            bottom: -1px;
+            left: 0;
+        }
+    }
+
+    h6 {
+        font-size: 13px;
+        padding: 5px 0 10px 5px;
+        border-bottom: 1px dotted #ddd;
+        &:before {
+            content: "●";
+            color: @primary;
+            margin-right: 5px;
+            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+        }
+    }
+}

package/{assets → src/assets}/css/tinymce/latex.less

@@ -3,19 +3,19 @@
 	.w-latex{
 		.pr;
         font-family: Georgia, 'Times New Roman', Times, serif;
-		&:after{
-			content : 'JX3BOX·Katex';
-			position: absolute;right:0;top:-30px;
-			background-color:@bg-black;
-			color:#fff;
-			border-radius:3px;
-			padding:0 8px;
-			line-height:28px;
-			height: 28px;
-			box-sizing: border-box;
-			font-size: 14px;
-			font-family: consolas;
-		}
+		// &:after{
+		// 	content : 'JX3BOX·Katex';
+		// 	position: absolute;right:0;top:-30px;
+		// 	background-color:#222;
+		// 	color:#fff;
+		// 	border-radius:3px;
+		// 	padding:0 8px;
+		// 	line-height:28px;
+		// 	height: 28px;
+		// 	box-sizing: border-box;
+		// 	font-size: 14px;
+		// 	font-family: consolas;
+		// }
 	}
 }
 .c-article-editor {
@@ -40,4 +40,4 @@
 			font-family: consolas;
 		}
 	}
-}
+}

package/{assets → src/assets}/css/tinymce/macro.less

@@ -5,14 +5,14 @@
 		&:after{
 			content : 'JX3BOX·MACRO';
 			position: absolute;right:0;top:-30px;
-			background-color:@bg-black;
+			background-color:#222;
 			color:#fff;
 			border-radius:3px;
 			padding:0 8px;
 			line-height:28px;
 			height: 28px;
 			box-sizing: border-box;
-			font-size: 14px;
+			font-size: 12px;
 		}
 	}
 }
@@ -37,4 +37,4 @@
 			padding:0 8px;
 		}
 	}
-}
+}

package/{assets → src/assets}/css/tinymce/pz.less

@@ -10,14 +10,14 @@
     color: darken(#c8e1ff, 20%);
 
     line-height: 40px !important;
-    padding: 0 10px 0 140px;
+    padding: 0 10px;
     font-family: Monaco, Consolas, "Lucida Console", "Courier New", serif;
 
     .pr;
     &:after {
         content: "JX3BOX·配装方案";
         position: absolute;
-        .lt(8px);
+        .rt(8px);
         background-color: darken(#c8e1ff, 20%);
         color: #fff;
         border-radius: 3px;

package/{assets → src/assets}/css/tinymce/table.less

@@ -19,21 +19,16 @@
         td {
             border: 1px solid #eee;
         }
-        // th {
-        //     // background-color: #fafbfc;
-        //     // font-weight: 600;
-        // }
+        th {
+            background-color: #fafbfc;
+            font-weight: 500;
+        }
         tr:nth-child(2n + 1) {
             background-color: #fafbfc;
         }
         tr:first-child {
-            // background-color: #f1f8ff;
             background-color: #fafbfc;
             font-weight: 600;
-
-            // td {
-            //     border: 1px solid #c8e1ff;
-            // }
         }
     }
 }
@@ -56,4 +51,4 @@
 	table{
         page-break-inside: avoid !important;
     }
-}
+}

package/{assets → src/assets}/css/tinymce.less

@@ -1,4 +1,6 @@
 // tinymce编辑器样式
+@import 'var.less';
+
 .c-editor-header{
     .mb(10px);
     .clearfix;
@@ -18,18 +20,18 @@
     &::-webkit-scrollbar {
         width: 4px;
       }
-    
+
       &::-webkit-scrollbar-track,
       &::-webkit-scrollbar-track-piece {
         background-color: #fafafa;
         border-radius: 6px;
       }
-    
+
       &::-webkit-scrollbar-thumb {
         background-color: #eee;
         border-radius: 6px;
       }
-    
+
       &::-webkit-scrollbar-button,
       &::-webkit-scrollbar-corner,
       &::-webkit-resizer {
@@ -57,7 +59,9 @@
             color: @primary;
         }
         a:hover {
-            box-shadow: 0 1px 0 @primary;
+            text-decoration: underline;
+            text-underline-offset: 4px;
+            text-decoration-color: @primary;
         }
         .el-alert__description{
             margin:0 !important;

package/src/assets/css/upload.less

@@ -0,0 +1,195 @@
+@import "var.less";
+
+.c-upload {
+    .c-upload-trigger {
+        margin-right: 5px;
+    }
+
+    .c-upload-toolbar {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-bottom: 20px;
+        .u-toolbar-row {
+            width: 100%;
+        }
+        .u-toolbar-row-tip {
+            margin-top: 10px;
+        }
+        .u-upload-clear {
+            flex-shrink: 0;
+            .el-icon {
+                margin-right: 3px;
+            }
+        }
+        .u-upload-tip {
+            margin: 0;
+            width: 100%;
+            padding-top: 6px;
+            padding-bottom: 6px;
+            .fz(12px, 16px);
+            padding-right: 10px;
+        }
+    }
+
+    .el-dialog__body {
+        padding-top: 0;
+    }
+
+    .el-upload-list li {
+        outline: none;
+    }
+
+    .el-upload-list__item {
+        &:hover {
+            border: 1px solid #13ce66;
+        }
+    }
+
+    .el-upload--picture-card:hover{
+        background-color:#fafcff;
+    }
+
+    // 列表
+    .u-file-wrapper {
+        .size(100%);
+        position: relative;
+        &.isSelected {
+        }
+        &.isUnselected {
+            opacity: 0.38;
+            border-color: #eee;
+            .u-fileplaceholder {
+                fill: #aaa;
+            }
+        }
+        &.isPending {
+            cursor: default;
+            opacity: 0.38;
+            border-color: #eee;
+            .u-fileplaceholder {
+                fill: #aaa;
+            }
+        }
+        .pointer;
+    }
+    .u-mask {
+        .pa;
+        .lt(0);
+        .size(100%);
+        background-color: rgba(0, 0, 0, 0.35);
+        display: none;
+        z-index: 2;
+    }
+    .u-op {
+        .pa;
+        .lt(50%);
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.58);
+        color: #fff;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+        cursor: pointer;
+        transform: translate(-50%, -50%);
+        .el-icon {
+            font-size: 16px;
+        }
+    }
+    .u-preview-btn {
+        margin-left: -20px;
+    }
+    .u-delete-btn {
+        margin-left: 20px;
+    }
+    .u-delete-btn.is-single {
+        margin-left: 0;
+    }
+    .u-file-wrapper:hover .u-mask {
+        display: block;
+    }
+    .u-file-wrapper:hover .u-op {
+        display: inline-flex;
+    }
+    .u-filebox {
+        .x;
+        padding: 37px;
+    }
+    .u-imgbox {
+        cursor: pointer;
+    }
+    .u-fileplaceholder {
+        width: 40px;
+        height: 40px;
+        fill: @primary;
+    }
+    .u-filename {
+        .db;
+        .nobreak;
+    }
+
+    // 勾选
+    .u-file-select-label {
+        position: absolute;
+        right: 6px;
+        top: 6px;
+        width: 18px;
+        height: 18px;
+        background: #13ce66;
+        text-align: center;
+        border-radius: 50%;
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+        z-index: 5;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .u-file-select-icon {
+            color: #fff;
+            font-size: 12px;
+            line-height: 1;
+            font-weight: 700;
+        }
+        &.is-unselected {
+            background: rgba(103, 194, 58, 0.38);
+            box-shadow: none;
+        }
+    }
+
+    .c-large-dialog {
+        &.el-dialog {
+            .w(60%);
+            height: 70%;
+            .el-dialog__body {
+                height: calc(100% - 100px);
+                overflow-y: auto;
+                box-sizing: border-box;
+            }
+        }
+    }
+    .c-upload-preview-dialog .el-dialog__body {
+        padding-top: 8px;
+    }
+    .u-preview-img {
+        display: block;
+        width: 100%;
+        max-height: 70vh;
+        object-fit: contain;
+    }
+    @media screen and (max-width: @notebook) {
+        .c-large-dialog .el-dialog {
+            .w(90%);
+        }
+    }
+    @media screen and (max-width: @ipad-y) {
+        .c-large-dialog .el-dialog {
+            margin: 0 !important;
+            .size(100%);
+            max-height: none;
+            .h(100%);
+        }
+    }
+}