lke-component 1.2.22 → 1.2.23

package/lib/react/src/shared/components/utils.js

@@ -0,0 +1,46 @@
+
+
+// function toUpperCase(str) {
+//   return str.slice(0, 1).toUpperCase() + str.slice(1);
+// }
+
+// export const withInstall = (comp) => {
+//   const c = comp;
+//   c.install = function (app) {
+//     app.component(toUpperCase(c.name), comp);
+//   };
+
+//   return comp;
+// };
+
+
+function withInstall(comp) {
+  const componentPlugin = comp
+
+  componentPlugin.install = (Vue) => {
+    Vue.component(componentPlugin.name, comp);
+  };
+
+  return componentPlugin;
+}
+
+/**
+ * 解码 HTML 实体（用于 XSS 防护前的预处理）
+ * @param {string} str - 包含 HTML 实体的字符串
+ * @returns {string} 解码后的字符串
+ */
+export const decodeHtmlEntities = (str) => {
+  if (!str || typeof str !== 'string') return str;
+
+  // 使用 textarea 元素解码 HTML 实体
+  const textarea = document.createElement('textarea');
+  textarea.innerHTML = str;
+  const decoded = textarea.value;
+
+  // 清理
+  textarea.remove();
+
+  return decoded;
+};
+
+export default withInstall;

package/lib/react/src/shared/const.js

@@ -0,0 +1,78 @@
+import { getDefaultWhiteList, escapeAttrValue } from 'xss';
+
+
+// 自定义白名单
+const thoughtWhiteList = getDefaultWhiteList();
+thoughtWhiteList.a = ['href', 'title', 'target']; // 允许 a 标签的 href, title 和 target 属性
+thoughtWhiteList.source = ['src', 'type']; // 允许 source 标签用于 video/audio
+export const thoughtXssHtmlOptions = {
+  css: false,
+  whiteList: thoughtWhiteList,
+  onTagAttr (tag, name, value, isWhiteAttr) {
+      if (tag.indexOf('_') !== -1) {
+          // 如果包含下划线，则认为是自定义标签，放过
+          return `${name}="${value}"`;
+      }
+      const tagIgnore = ['div', 'span', 'strong', 'p', 'mark'];
+      if (tagIgnore.includes(tag)) {
+          // do not filter its attributes
+          const blockAttrsReg = new RegExp('^on');
+          if (!blockAttrsReg.test(name)) {
+              return `${name}="${value}"`;
+          }
+      }
+      const tagAttrIgnore = ['class', 'style'];
+      if (tagAttrIgnore.includes(name)) {
+          return `${name}="${value}"`;
+      }
+      // 自定义属性省略
+      const aTagAttrIgnore = ['rel', 'data-link-url'];
+      if (tag === 'a' && aTagAttrIgnore.includes(name)) {
+          return `${name}="${value}"`;
+      }
+      if (tag === 'a' && name === 'href') {
+          // 允许的协议列表
+          const allowedProtocols = ['qdweb', 'qdim', 'mqqwpa'];
+          const protocol = value.split(':')[0];
+          if (allowedProtocols.includes(protocol)) {
+              return `${name}="${escapeAttrValue(value)}"`;
+          }
+      }
+      const videoTagAttrIgnore = [
+          'rel',
+          'webkit-playsinline',
+          'x5-playsinline',
+          'title',
+          'size',
+          'format'
+      ];
+      if (tag === 'video' && videoTagAttrIgnore.includes(name)) {
+          return `${name}="${value}"`;
+      }
+      const audioTagAttrIgnore = [
+          'controls',
+          'controlslist',
+          'id',
+          'speed',
+          'title',
+          'size',
+          'format',
+          'data-duration-ms'
+      ];
+      if (tag === 'audio' && audioTagAttrIgnore.includes(name)) {
+          return `${name}="${value}"`;
+      }
+      const imgTagAttrIgnore = ['alt', 'data-value'];
+      if (tag === 'img' && imgTagAttrIgnore.includes(name)) {
+          return `${name}="${value}"`;
+      }
+  }
+};
+
+
+export const THOUGHT_STATUS = {
+    success: 'success',
+    failed: 'failed',
+    processing: 'processing',
+    stop: 'stop'
+};

package/lib/react/src/shared/styles/content.less

@@ -0,0 +1,309 @@
+.cursor {
+  display: inline-block;
+  width: 2px;
+  height: 17px;
+  vertical-align: text-bottom;
+  background-color: black;
+  animation: blink 1s infinite;
+}
+
+.little-tags {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  /* padding: 0 4px; */
+  /* border-radius: 20px; */
+  background: var(--color-gray-6);
+  color: #fff;
+  border-radius: 10px;
+  text-align: center;
+  line-height: 16px;
+  // 解决角标两位数换行问题
+  word-break: normal;
+  word-wrap: normal;
+}
+
+@keyframes blink {
+  0% {
+      opacity: 1;
+  }
+
+  50% {
+      opacity: 0;
+  }
+
+  100% {
+      opacity: 1;
+  }
+}
+mjx-container mjx-math {
+display: block;
+white-space: normal;
+overflow-wrap: break-word;
+word-wrap: break-word;
+word-break: break-word;
+}
+mjx-container {
+display: inline-block;
+}
+mjx-assistive-mml {
+right: 0px;
+bottom: 0px;
+}
+
+.answer-md {
+  font-size: 400 14px/20px;
+  // word-break: break-all;
+  // word-wrap: break-word;
+  word-break:  break-word;
+  word-wrap:  break-word;
+  video {
+    display: none;
+  }
+  /* 你可以在这里添加自定义样式 */
+  .code-language-label {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background: #f0f0f0;
+      color: #333;
+      padding: 2px 8px;
+      font-size: 12px;
+      border-bottom-left-radius: 4px;
+  }
+
+
+  .hljs {
+      color: #121319;
+      background: #ffffff;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+      color: #979BAA;
+      font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+      color: #4A70FF;
+  }
+
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+      color: #FF8345;
+  }
+
+  .hljs-literal {
+      color: #1492FF;
+  }
+
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string {
+      color: #0FB87F;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+      color: #FFA436;
+  }
+
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+      color: #D20FD2;
+  }
+
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-class .hljs-title {
+      color: #F7C51E;
+  }
+
+  .hljs-emphasis {
+      font-style: italic;
+  }
+
+  .hljs-strong {
+      font-weight: bold;
+  }
+
+  .hljs-link {
+      text-decoration: underline;
+  }
+
+  .hljs-ln {
+      border-collapse: collapse;
+
+      td {
+          padding: 0;
+      }
+
+      /* for block of numbers */
+      td.hljs-ln-numbers {
+          -webkit-touch-callout: none;
+          -webkit-user-select: none;
+          -khtml-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          user-select: none;
+          text-align: left;
+          vertical-align: top;
+          padding: 0 10px 0 10px;
+          color: #abb2bf !important;
+          white-space: nowrap;
+          /* border-right: 1px solid; */
+          border-right: 1px solid #c5c5c5 !important;
+      }
+
+      /* for block of code */
+      td.hljs-ln-code {
+          padding-left: 10px;
+      }
+  }
+
+  .hljs-ln-n:before {
+      content: attr(data-line-number)
+  }
+
+  pre {
+      position: relative;
+  }
+
+  .table:not(.hljs-ln) {
+
+      /* 滚动条Track */
+      ::-webkit-scrollbar-track {
+          background: transparent;
+      }
+
+      /* Handle */
+      ::-webkit-scrollbar-thumb {
+          border-radius: 10px;
+          background: rgba(17, 32, 70, 0.13);
+          ;
+      }
+  }
+
+  img {
+      max-width: 100%;
+      cursor: pointer;
+      border-radius: 6px;
+  }
+
+  p {
+      // word-break: break-all;
+      // word-wrap: break-word;
+      word-break:  break-word;
+      word-wrap:  break-word;
+  }
+
+  ::marker {
+      color: rgba(1, 11, 50, 0.41);
+  }
+
+  h1 {
+      font-size: 18px;
+      padding-top: 18px;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+      font-size: 16px;
+  }
+
+  code {
+      white-space: break-spaces;
+  }
+
+  table:not(.hljs-ln) {
+      // display: inline-block;
+      // white-space: nowrap;
+      // max-width: 100%;
+      // overflow: scroll;
+      // background: white;
+      // border-bottom: 1px solid rgba(18, 42, 79, 0.08);
+      // border-right: 1px solid rgba(18, 42, 79, 0.08);
+      // border-spacing: 0;
+      // border-collapse: collapse;
+      display: inline-block;
+      overflow-x: scroll;
+      background: white;
+      border-spacing: 0;
+      border-collapse: collapse;
+      border-bottom: 1px solid rgba(18, 42, 79, 0.08);
+      border-right: 1px solid rgba(18, 42, 79, 0.08);
+      max-width: 100%;
+
+      th {
+          background: #eaecef;
+          color: rgba(1, 11, 50, 0.41);
+          // padding: 12px;
+          // font-weight: 400;
+          // background: #eaecef;
+      }
+
+      td,
+      th {
+          border-left: 1px solid rgba(18, 42, 79, 0.08);
+          border-top: 1px solid rgba(18, 42, 79, 0.08);
+      }
+
+      td {
+          padding: 8px 12px;
+          min-width: 20px;
+      }
+  }
+
+  .table-style:not(.hljs-ln) {
+      display: inline-block;
+      white-space: nowrap;
+      max-width: 100%;
+      overflow: scroll;
+      background: white;
+      border-bottom: 1px solid rgba(18, 42, 79, 0.08);
+      border-right: 1px solid rgba(18, 42, 79, 0.08);
+      border-spacing: 0;
+      border-collapse: collapse;
+
+      th {
+          color: rgba(1, 11, 50, 0.41);
+          padding: 12px;
+          font-weight: 400;
+          background: #eaecef;
+      }
+
+      td,
+      th {
+          border-left: 1px solid rgba(18, 42, 79, 0.08);
+          border-top: 1px solid rgba(18, 42, 79, 0.08);
+      }
+
+      td {
+          padding: 8px 4px;
+          min-width: 45px;
+          overflow-wrap: break-word;
+          white-space: break-spaces;
+      }
+  }
+}

package/lib/react/src/shared/styles/icon.less

@@ -0,0 +1,38 @@
+.v-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  transition: -webkit-transform .5s;
+  transition: transform .5s;
+  transition: transform .5s, -webkit-transform .5s; 
+}
+.v-icon.is-vertical {
+  -webkit-transform: scaleY(-1);
+  -ms-transform: scaleY(-1);
+  transform: scaleY(-1)
+}
+.v-icon.is-horizontal {
+  -webkit-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  transform: scaleX(-1)
+}
+.v-icon--fill {
+  fill: #0fb87f;
+}
+.v-icon--stroke {
+  stroke: #0fb87f
+}
+a:hover .v-icon .hover,button:hover .v-icon .hover,span:hover .v-icon .hover,svg:hover .v-icon .hover {
+  opacity: 1
+}
+
+a:hover .v-icon--hover-hide-default,button:hover .v-icon--hover-hide-default,span:hover .v-icon--hover-hide-default,svg:hover .v-icon--hover-hide-default {
+  opacity: 0
+}
+
+a:active .v-icon .active,button:active .v-icon .active,span:active .v-icon .active,svg:active .v-icon .active {
+  opacity: 1
+}
+a:active .v-icon--active-hide-default,a:active .v-icon--active-hide-hover,button:active .v-icon--active-hide-default,button:active .v-icon--active-hide-hover,span:active .v-icon--active-hide-default,span:active .v-icon--active-hide-hover,svg:active .v-icon--active-hide-default,svg:active .v-icon--active-hide-hover {
+  opacity: 0
+}

package/lib/react/src/shared/styles/thought.less

@@ -0,0 +1,92 @@
+.question-text {
+//   width: 680px;
+  width: 100%;
+}
+.question-text-mobile {
+  width: 100%;
+}
+.thought-clps {
+    &-title {
+        color: rgba(1,11,50,0.41);
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+        cursor: pointer;
+        padding: 12px 0 8px 0;
+
+        display: flex;
+        
+        align-items: center;
+        gap: 4px;
+    }
+    &-content {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        align-self: stretch;
+        p {
+            margin: 0;
+        }
+        .thought-title {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            cursor: pointer;
+
+            .thought-title-container {
+                display: flex;
+                align-items: center;
+                gap: 5px;
+            }
+
+            .thought-title-icon {
+                display: flex;
+                width: 16px;
+                height: 16px;
+                flex-direction: column;
+                justify-content: center;
+                border-radius: 8px;
+            }
+
+            .thought-title-name {
+                color: rgba(0,1,10,0.93);
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 600;
+                line-height: normal;
+            }
+
+            .thought-title-elapsed {
+                color: rgba(1,11,50,0.41);
+                font-family: Monaco;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: normal;
+            }
+        }
+
+        .thought-detail {
+            display: flex;
+            padding: 12px 0;
+            gap: 10px;
+            border-bottom:  0.5px solid rgba(18,42,79,0.08);
+            color: rgba(3,10,38,0.65);
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 20px; /* 142.857% */
+
+            p {
+                word-break: break-all;
+                word-wrap: break-word;
+                margin: 0;
+            }
+            &.last-item{
+                border-bottom: 1.5px solid #cdd0d9;
+
+            }
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lke-component",
-  "version": "1.2.22",
+  "version": "1.2.23",
   "main": "dist/lke-component.umd.js",
   "module": "dist/lke-component.esm.js",
   "files": [