@cgboiler/biz-basic 1.0.53 → 1.0.55

package/lib/rich-text-editor/index copy 2.less

@@ -0,0 +1,598 @@
+@import './menu-system/styles/variables.less';
+
+.tiptap-editor-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background-color: var(--tt-bg-canvas);
+  position: relative;
+  border-radius: var(--tt-radius-lg);
+
+  .tiptap-editor-toolbar {
+    flex: 0 0 auto;
+  }
+
+  .tiptap-editor-content-wrapper {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    position: relative;
+    padding: 16px 8px;
+    background-color: var(--white);
+    display: flex;
+    justify-content: center;
+
+    .dark & {
+      background-color: var(--black);
+    }
+
+    .ProseMirror {
+      width: 100%;
+      outline: none;
+    }
+  }
+}
+
+/* =====================
+     CORE EDITOR STYLES (Integrated from official SCSS)
+     ===================== */
+
+.tiptap.ProseMirror {
+  --tt-collaboration-carets-label: var(--tt-gray-light-900);
+  --link-text-color: var(--tt-brand-color-500);
+  --thread-text: var(--tt-gray-light-900);
+  --placeholder-color: var(--tt-gray-light-a-400);
+  --thread-bg-color: var(--tt-color-yellow-inc-2);
+  --horizontal-rule-color: var(--tt-gray-light-a-200);
+  --blockquote-bg-color: var(--tt-gray-light-900);
+  --tiptap-ai-insertion-color: var(--tt-brand-color-600);
+
+  --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
+  --tt-inline-code-text-color: var(--tt-gray-light-a-700);
+  --tt-inline-code-border-color: var(--tt-gray-light-a-200);
+  --tt-codeblock-bg: var(--tt-gray-light-a-50);
+  --tt-codeblock-text: var(--tt-gray-light-a-800);
+  --tt-codeblock-border: var(--tt-gray-light-a-200);
+
+  --tt-checklist-bg-color: var(--tt-gray-light-a-100);
+  --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-border-color: var(--tt-gray-light-a-200);
+  --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-check-icon-color: var(--white);
+  --tt-checklist-text-active: var(--tt-gray-light-a-500);
+
+  .dark & {
+    --tt-collaboration-carets-label: var(--tt-gray-dark-100);
+    --link-text-color: var(--tt-brand-color-400);
+    --thread-text: var(--tt-gray-dark-900);
+    --placeholder-color: var(--tt-gray-dark-a-400);
+    --thread-bg-color: var(--tt-color-yellow-dec-2);
+    --horizontal-rule-color: var(--tt-gray-dark-a-200);
+    --blockquote-bg-color: var(--tt-gray-dark-900);
+    --tiptap-ai-insertion-color: var(--tt-brand-color-400);
+
+    --tt-inline-code-bg-color: var(--tt-gray-dark-a-100);
+    --tt-inline-code-text-color: var(--tt-gray-dark-a-700);
+    --tt-inline-code-border-color: var(--tt-gray-dark-a-200);
+    --tt-codeblock-bg: var(--tt-gray-dark-a-50);
+    --tt-codeblock-text: var(--tt-gray-dark-a-800);
+    --tt-codeblock-border: var(--tt-gray-dark-a-200);
+
+    --tt-checklist-bg-color: var(--tt-gray-dark-a-100);
+    --tt-checklist-bg-active-color: var(--tt-gray-dark-a-900);
+    --tt-checklist-border-color: var(--tt-gray-dark-a-200);
+    --tt-checklist-border-active-color: var(--tt-gray-dark-a-900);
+    --tt-checklist-check-icon-color: var(--black);
+    --tt-checklist-text-active: var(--tt-gray-dark-a-500);
+  }
+
+  white-space: pre-wrap;
+  caret-color: var(--tt-cursor-color);
+
+  > * {
+    position: relative;
+  }
+
+  /* Selection */
+  &:not(.readonly):not(.ProseMirror-hideselection) {
+    ::selection {
+      background-color: var(--tt-selection-color);
+    }
+  }
+
+  .selection {
+    display: inline;
+    background-color: var(--tt-selection-color);
+  }
+
+  .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
+    border-radius: var(--tt-radius-md);
+    background-color: var(--tt-selection-color);
+  }
+
+  /* Paragraphs */
+  p {
+    font-size: 1rem;
+    line-height: 1.6; /* Fix cursor height to match text */
+  }
+
+  /* Headings */
+  h1,
+  h2,
+  h3,
+  h4 {
+    position: relative;
+    color: inherit;
+    font-style: inherit;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h1 {
+    font-size: 1.5em;
+    font-weight: 700;
+    margin-top: 0;
+  }
+  h2 {
+    font-size: 1.25em;
+    font-weight: 700;
+    margin-top: 0;
+  }
+  h3 {
+    font-size: 1.125em;
+    font-weight: 600;
+    margin-top: 0;
+  }
+  h4 {
+    font-size: 1em;
+    font-weight: 600;
+    margin-top: 0;
+  }
+
+  /* Links */
+  a {
+    color: var(--link-text-color);
+    text-decoration: underline;
+    span {
+      text-decoration: underline;
+    }
+  }
+
+  /* Code */
+  code {
+    background-color: var(--tt-inline-code-bg-color);
+    color: var(--tt-inline-code-text-color);
+    border: 1px solid var(--tt-inline-code-border-color);
+    font-family: 'JetBrains Mono NL', monospace;
+    font-size: 0.875em;
+    line-height: 1.4;
+    border-radius: 0.375rem;
+    padding: 0.1em 0.25em;
+  }
+
+  pre {
+    background-color: var(--tt-codeblock-bg);
+    color: var(--tt-codeblock-text);
+    border: 1px solid var(--tt-codeblock-border);
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+    padding: 1em;
+    font-size: 1rem;
+    border-radius: 0.375rem;
+
+    code {
+      background-color: transparent;
+      border: none;
+      border-radius: 0;
+      color: inherit;
+      padding: 0;
+    }
+  }
+
+  /* Blockquote */
+  blockquote {
+    position: relative;
+    padding: 0.375em 0 0.375em 1em;
+    margin: 1.5rem 0;
+    p {
+      margin-top: 0;
+    }
+    &::after {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      top: 0;
+      height: 100%;
+      width: 0.25em;
+      background-color: var(--blockquote-bg-color);
+      content: '';
+    }
+  }
+
+  /* Lists */
+  ol,
+  ul {
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+    padding-left: 1.5em;
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+    ol,
+    ul {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  li p {
+    margin-top: 0;
+    line-height: 1.6;
+  }
+
+  ol {
+    list-style: decimal;
+    ol {
+      list-style: lower-alpha;
+      ol {
+        list-style: lower-roman;
+      }
+    }
+  }
+  ul:not([data-type='taskList']) {
+    list-style: disc;
+    ul {
+      list-style: circle;
+      ul {
+        list-style: square;
+      }
+    }
+  }
+
+  ul[data-type='taskList'] {
+    padding-left: 0;
+    li {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      margin-bottom: 0.25em;
+
+      &[data-checked='true'] {
+        > div > p {
+          opacity: 0.5;
+          text-decoration: line-through;
+        }
+      }
+
+      label {
+        position: relative;
+        padding-top: 4px;
+        padding-right: 0.5rem;
+        input[type='checkbox'] {
+          position: absolute;
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+        span {
+          display: block;
+          width: 1em;
+          height: 1em;
+          border: 1px solid var(--tt-checklist-border-color);
+          border-radius: 0.25rem;
+          position: relative;
+          cursor: pointer;
+          background-color: var(--tt-checklist-bg-color);
+          transition: background-color 80ms ease-out, border-color 80ms ease-out;
+
+          &::before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 0.75em;
+            height: 0.75em;
+            background-color: var(--tt-checklist-check-icon-color);
+            opacity: 0;
+            mask: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E')
+              center/contain no-repeat;
+          }
+        }
+        input[type='checkbox']:checked + span {
+          background: var(--tt-checklist-bg-active-color);
+          border-color: var(--tt-checklist-border-active-color);
+          &::before {
+            opacity: 1;
+          }
+        }
+      }
+      div {
+        flex: 1;
+        min-width: 0;
+        p {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  /* Horizontal Rule */
+  hr {
+    border: none;
+    height: 1px;
+    background-color: var(--horizontal-rule-color);
+    margin: 2.25em 0;
+  }
+
+  /* Images */
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 2rem 0;
+    border-radius: var(--tt-radius-xs, 0.25rem);
+    &.ProseMirror-selectednode {
+      outline: 0.125rem solid var(--tt-brand-color-500);
+    }
+  }
+
+  /* Mentions & HashTags (Custom) */
+  [data-type='mention'] {
+    display: inline-block;
+    color: var(--tt-brand-color-500);
+    font-weight: 500;
+  }
+
+  .mention,
+  .hash-tag {
+    color: var(--tt-brand-color-500);
+    padding: 0 2px;
+  }
+}
+
+/* Common UI */
+.ProseMirror .is-empty[data-placeholder]::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  left: 0.15em;
+  top: 0;
+  pointer-events: none;
+  color: var(--placeholder-color);
+  font-style: normal;
+  text-indent: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* 针对不同区块类型的占位符偏移，确保与光标对齐且不覆盖图标 */
+.ProseMirror {
+  /* 普通列表缩进保持一致，并留出光标空间 */
+  ul:not([data-type='taskList']).is-empty::before,
+  ol.is-empty::before {
+    left: 1.65em !important; /* 对应 ol, ul 的 padding-left + 0.15em */
+  }
+
+  /* 任务列表避开左侧复选框，并留出光标空间 */
+  ul[data-type='taskList'].is-empty::before {
+    left: 1.8rem;
+  }
+
+  /* 列表项内部的段落如果带占位符，默认 left: 0 即可，因为它已经相对于父级偏移 */
+  li p.is-empty::before {
+    left: 0;
+  }
+
+  /* 引用块避开左侧装饰条，并留出光标空间 */
+  blockquote.is-empty::before {
+    left: 1.15em !important;
+    top: 0.4em !important;
+  }
+
+  /* 代码块避开左侧内边距，并留出光标空间 */
+  pre.is-empty::before {
+    left: 1.15em !important;
+    top: 0.8em !important;
+  }
+}
+
+/* Dropdown styling */
+.tiptap-dropdown-menu {
+  .el-dropdown-menu__item {
+    &.is-active {
+      color: var(--tt-brand-color-500) !important;
+      background-color: var(--tt-brand-color-50) !important;
+      .dark & {
+        color: var(--tt-brand-color-400) !important;
+        background-color: var(--tt-brand-color-900) !important;
+      }
+    }
+    &:hover {
+      color: var(--tt-brand-color-500) !important;
+      background-color: var(--tt-brand-color-50) !important;
+      .dark & {
+        color: var(--tt-brand-color-400) !important;
+        background-color: var(--tt-brand-color-900) !important;
+      }
+    }
+  }
+}
+
+.tiptap-dropdown-menu-item-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+.tiptap-dropdown-menu-item-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--tt-text-muted);
+  background-color: var(--tt-gray-light-100);
+  padding: 1px 4px;
+  border-radius: 4px;
+  min-width: 20px;
+  text-align: center;
+  .dark & {
+    background-color: var(--tt-gray-dark-200);
+  }
+}
+
+.tiptap-heading-trigger,
+.tiptap-list-dropdown-trigger {
+  .tiptap-button-icon-chevron {
+    width: 12px;
+    height: 12px;
+    margin-left: 2px;
+    color: var(--tt-text-muted);
+  }
+}
+.tiptap-dropdown-menu-item-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--tt-text-muted);
+}
+
+body .ProseMirror {
+  flex: 1;
+  overflow: auto;
+  outline: none;
+
+  line-height: 1.6;
+  font-size: var(--font-base);
+
+  video {
+    width: 100%;
+  }
+
+  /* List styles */
+  ol {
+    list-style: auto;
+    ol {
+      list-style: disc;
+    }
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol,
+  ul {
+    margin: 0 !important;
+  }
+
+  li::marker {
+    text-align: start !important;
+  }
+
+  /* Table-specific styling */
+  table {
+    border-collapse: collapse;
+    margin: 0;
+    overflow: hidden;
+    table-layout: fixed;
+    width: 100%;
+
+    td,
+    th {
+      border: 1px solid var(--gray-3);
+      box-sizing: border-box;
+      min-width: 1em;
+      padding: 6px 8px;
+      position: relative;
+      vertical-align: top;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      background-color: var(--gray-1);
+      font-weight: bold;
+      text-align: left;
+    }
+
+    .selectedCell:after {
+      background: var(--gray-2);
+      content: '';
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      pointer-events: none;
+      position: absolute;
+      z-index: 2;
+    }
+
+    .column-resize-handle {
+      background-color: var(--purple);
+      bottom: -2px;
+      pointer-events: none;
+      position: absolute;
+      right: -2px;
+      top: 0;
+      width: 4px;
+    }
+  }
+
+  .tableWrapper {
+    margin: 1.5rem 0;
+    overflow-x: auto;
+  }
+
+  &.resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
+  img {
+    max-width: 100%;
+  }
+
+  code {
+    background-color: #ffe5e8 !important;
+    color: #c02537 !important;
+    margin-top: 20px;
+  }
+
+  // @人的样式 #话题的样式 自定义内容的样式
+  .mention,
+  .hash-tag {
+    color: #c02537 !important;
+    padding: 0 0.3em;
+  }
+
+  .custom-content {
+    color: var(--custom-content-color, #000);
+    padding: 0 0.3em;
+    cursor: pointer;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--custom-content-hover-color, #c02537);
+    }
+  }
+}
+
+// animation
+.animation-indent--right {
+  animation: indent-right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 1 alternate-reverse;
+}
+
+@keyframes indent-right {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  to {
+    -webkit-transform: translateX(12px);
+    transform: translateX(12px);
+  }
+}

package/lib/rich-text-editor/index copy.css

@@ -0,0 +1 @@
+body .ProseMirror{flex:1;overflow:auto;outline:none;line-height:1.6;font-size:var(--font-base);--white: #fff;--black: #2e2b29;--gray-1: rgba(61, 37, 20, .05);--gray-2: rgba(61, 37, 20, .08);--gray-3: rgba(61, 37, 20, .12);--gray-4: rgba(53, 38, 28, .3);--gray-5: rgba(28, 25, 23, .6);--green: #22c55e;--purple: #6a00f5;--purple-contrast: #5800cc;--purple-light: rgba(88, 5, 255, .05);--yellow-contrast: #facc15;--yellow: rgba(250, 204, 21, .4);--yellow-light: #fffae5;--red: #ff5c33;--red-light: #ffebe5;--shadow: 0px 12px 33px 0px rgba(0, 0, 0, .06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)}body .ProseMirror :first-child{margin-top:0}body .ProseMirror video{width:100%}body .ProseMirror ol{list-style:auto}body .ProseMirror ol ol,body .ProseMirror ul{list-style:disc}body .ProseMirror ol,body .ProseMirror ul{padding-left:1.5em;margin:0 0 12px}body .ProseMirror ol li p,body .ProseMirror ul li p{margin-top:.25em;margin-bottom:.25em}body .ProseMirror li::marker{text-align:start!important}body .ProseMirror h1,body .ProseMirror h2,body .ProseMirror h3,body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{line-height:1.1;margin-top:2.5rem;text-wrap:pretty}body .ProseMirror h1,body .ProseMirror h2{margin-top:1rem;margin-bottom:1rem}body .ProseMirror h1{font-size:1.4rem}body .ProseMirror h2{font-size:1.2rem}body .ProseMirror h3{font-size:1.1rem}body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{font-size:1rem}body .ProseMirror a,body .ProseMirror .editor-link{color:var(--purple);text-decoration:underline;cursor:pointer;transition:color .2s ease}body .ProseMirror a:hover,body .ProseMirror .editor-link:hover{color:var(--purple-contrast);text-decoration:underline}body .ProseMirror code{background-color:#ffe5e8;border-radius:.4rem;color:#c02537;padding:2px 4px}body .ProseMirror pre{border-radius:.5rem;font-family:JetBrainsMono,monospace;margin:1.5rem 0;padding:.75rem 1rem}body .ProseMirror pre code{background:none;color:inherit;font-size:.8rem;padding:0}body .ProseMirror blockquote{border-left:3px solid var(--gray-3);margin:1.5rem 0;padding-left:1rem}body .ProseMirror hr{border:none;border-top:1px solid var(--gray-2);margin:2rem 0}body .ProseMirror p.is-editor-empty:first-child:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror .is-empty:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}body .ProseMirror table td,body .ProseMirror table th{border:1px solid var(--gray-3);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}body .ProseMirror table td>*,body .ProseMirror table th>*{margin-bottom:0}body .ProseMirror table th{background-color:var(--gray-1);font-weight:700;text-align:left}body .ProseMirror table .selectedCell:after{background:var(--gray-2);content:"";left:0;right:0;top:0;bottom:0;pointer-events:none;position:absolute;z-index:2}body .ProseMirror table .column-resize-handle{background-color:var(--purple);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}body .ProseMirror .tableWrapper{margin:1.5rem 0;overflow-x:auto}body .ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}body .ProseMirror img{max-width:100%}body .ProseMirror .mention,body .ProseMirror .hash-tag{color:#c02537;padding:0 .3em}body .ProseMirror .custom-content{color:var(--custom-content-color, #000);padding:0 .3em;cursor:pointer;transition:color .2s ease}body .ProseMirror .custom-content:hover{color:var(--custom-content-hover-color, #c02537)}.animation-indent--right{animation:indent-right .5s cubic-bezier(.68,-.55,.27,1.55) 1 alternate-reverse}@keyframes indent-right{0%{transform:translate(0)}to{transform:translate(12px)}}.tiptap-editor-container{display:flex;flex-direction:column;border:1px solid var(--gray-3);border-radius:8px;overflow:hidden;height:100%;background-color:var(--white)}.dark .tiptap-editor-container{background-color:var(--black);border-color:var(--gray-4)}.tiptap-editor-container .tiptap-editor-toolbar{flex:0 0 auto;border-bottom:1px solid var(--gray-3);padding:4px;background-color:var(--gray-1);display:flex;flex-wrap:wrap;gap:4px}.dark .tiptap-editor-container .tiptap-editor-toolbar{border-bottom-color:var(--gray-4);background-color:var(--gray-2)}.tiptap-editor-container .tiptap-editor-content-wrapper{flex:1 1 auto;overflow-y:auto;position:relative;padding:16px 8px;background-color:var(--white);display:flex;justify-content:center}.dark .tiptap-editor-container .tiptap-editor-content-wrapper{background-color:var(--black)}.tiptap-editor-container .tiptap-editor-content-wrapper .ProseMirror{width:100%}.tiptap-dropdown-menu .el-dropdown-menu__item.is-active{color:var(--tt-brand-color-500)!important;background-color:var(--tt-brand-color-50)!important}.dark .tiptap-dropdown-menu .el-dropdown-menu__item.is-active{color:var(--tt-brand-color-400)!important;background-color:var(--tt-brand-color-900)!important}.tiptap-dropdown-menu-item-content{display:flex;align-items:center;gap:8px;width:100%}.tiptap-dropdown-menu-item-label{font-size:10px;font-weight:700;color:var(--tt-text-muted);background-color:var(--tt-gray-light-100);padding:1px 4px;border-radius:4px;min-width:20px;text-align:center}.dark .tiptap-dropdown-menu-item-label{background-color:var(--tt-gray-dark-200)}.tiptap-heading-trigger .tiptap-button-icon-chevron,.tiptap-list-dropdown-trigger .tiptap-button-icon-chevron{width:12px;height:12px;margin-left:2px;color:var(--tt-text-muted)}.tiptap-dropdown-menu-item-icon{width:16px;height:16px;color:var(--tt-text-muted)}