@dpocean/chatui 1.0.0

package/es/styles/root.less

@@ -0,0 +1,122 @@
+:root {
+  // 已弃用，用下面的文字色、填充色、线条色、功能色替换
+  --black: #000; // 不再使用
+  --white: #fff;
+  --gray-1: #11192d;
+  --gray-2: #50607a;
+  --gray-3: #7c889c;
+  --gray-4: #cacfd7;
+  --gray-5: rgba(80, 96, 122, 0.15);
+  --gray-6: #e5e5e5; // 不再使用
+  --gray-7: #f5f5f5; // 不再使用
+  --gray-8: #f3f6f8;
+  --light-1: @gray-6; // 不再使用
+  --light-2: @gray-7; // 不再使用
+  --link-color: var(--blue);
+  --blue: #0080ff;
+  --gray-dark: @gray-dark;
+  --green: #1dbf1d;
+  --orange: @orange;
+  --red: #ff0300;
+  --yellow: @yellow;
+  --yellow-light: @yellow-light;
+}
+
+:root {
+  // Brand 品牌色
+  --brand-1: #ff6200;
+  --brand-2: #ffb300;
+  --brand-3: #ffe0cc;
+  --brand-4: #ffefe5;
+
+  // Text 文字色
+  --color-text-1: var(--gray-1);
+  --color-text-2: var(--gray-2);
+  --color-text-3: var(--gray-3);
+
+  // Fill 填充色
+  --color-fill-1: var(--white);
+  --color-fill-2: var(--gray-8);
+  --color-mask: rgba(14, 17, 25, 0.5);
+  --color-toast: rgba(17, 25, 45, 0.9);
+
+  // Line 线条色
+  --color-line-1: var(--gray-5);
+  --color-line-2: var(--gray-4);
+
+  // Functional 功能色
+  --highlight-1: var(--brand-1);
+  --highlight-2: var(--brand-2);
+  --color-warning: var(--red);
+  --color-success: var(--green);
+  --color-link: var(--link-color);
+
+  --font-size-xs: @font-size-xs; // 12px
+  --font-size-sm: @font-size-sm; // 14px
+  --font-size-body: 15px;
+  --font-size-md: @font-size-md; // 16px
+  --font-size-lg: @font-size-lg; // 18px
+
+  --radius-sm: 4Px;
+  --radius-md: 6Px;
+  // --radius-lg: @border-radius-lg;
+
+  --shadow-1: @shadow-1;
+  --shadow-2: @shadow-2;
+  --shadow-3: @shadow-3;
+
+  --safe-top: 0px;
+  --safe-bottom: 0px;
+  --viewport-top: 0px;
+}
+
+@supports (top: constant(safe-area-inset-top)) {
+  :root {
+    --safe-top: constant(safe-area-inset-top);
+    --safe-bottom: constant(safe-area-inset-bottom);
+  }
+}
+
+@supports (top: env(safe-area-inset-top)) {
+  :root {
+    --safe-top: env(safe-area-inset-top);
+    --safe-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+:root {
+  --app-bg: var(--color-fill-2);
+  --navbar-bg: var(--color-fill-2);
+  --footer-bg: var(--color-fill-2);
+
+  --gutter: @gutter;
+  --rate-width: 32Px;
+
+  // 头像和消息内容的间隙
+  --msg-avatar-gap: 6Px;
+  // 消息旁边的空白空间：间隙 + 头像的宽度（点赞踩的宽度一致）
+  --msg-gutter: calc(var(--msg-avatar-gap) + var(--rate-width));
+
+  --btn-padding: 8px 12px;
+  --btn-border-color: var(--color-line-2);
+  --btn-border-radius: var(--radius-md);
+  --btn-bg: var(--color-fill-1);
+  --btn-color: var(--color-text-2);
+  --btn-font-weight: 500;
+  --btn-font-size: @btn-font-size;
+  --btn-line-height: 1.125rem; // 18px
+  --btn-padding-sm: 4px 12px;
+  --btn-font-size-sm: @btn-font-size-sm;
+  --btn-padding-lg: 10px 12px;
+  --btn-font-size-lg: 15px;
+  --btn-active-bg: rgba(0, 0, 0, 0.08);
+  --btn-hover-bg: rgba(0, 0, 0, 0.04);
+  --btn-primary-border-color: transparent;
+  --btn-primary-bg: var(--brand-1);
+  --btn-primary-color: var(--white);
+
+  --goods-img-size: 65px;
+
+  --skeleton-bg-1: #f6f6f6;
+  --skeleton-bg-2: #f0f0f0;
+}

package/es/styles/scale.less

@@ -0,0 +1,19 @@
+& when (@global-style = true) {
+  :root {
+    --scale-ratio: 1;
+    // vw = 16 * 100 / 375
+    font-size: calc(4.2666666667vw * var(--scale-ratio));
+  }
+
+  @media (max-width: 374px) {
+    :root {
+      font-size: calc(16px * var(--scale-ratio));
+    }
+  }
+
+  @media (min-width: 768px) {
+    :root {
+      font-size: 16px;
+    }
+  }
+}

package/es/styles/utils.less

@@ -0,0 +1,9 @@
+// state
+.S--invisible {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+}
+
+.pb-safe {
+  padding-bottom: var(--safe-bottom);
+}

package/es/styles/var.less

@@ -0,0 +1,369 @@
+@global-style: true;
+
+// Color Palette
+@brand-1: #ff6200;
+@brand-2: #ffb300;
+@brand-3: #ffe0cc;
+@black: #000;
+@white: #fff;
+@gray-1: #11192d;
+@gray-2: #50607a;
+@gray-3: #7c889c;
+@gray-4: #cacfd7;
+@gray-5: #50607a;
+@gray-6: #e5e5e5;
+@gray-7: #f5f5f5;
+@gray-8: #f3f6f8;
+
+@blue: #0080ff;
+@gray-dark: #11192d;
+@green: #1dbf1d;
+@orange: #ff6200;
+@red: #ff0300;
+@yellow: #ffb300;
+@yellow-light: #fff9db;
+
+// Box Shadow
+@shadow-1: 0 3px 4px 0 rgba(0, 0, 0, 0.04);
+@shadow-2: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+@shadow-3: 0 6px 10px 0 rgba(0, 0, 0, 0.08);
+
+// Gutter
+@gutter: 12px;
+
+// Body
+@body-bg: @white;
+@body-color: var(--color-text-1);
+
+// Links
+@link-color: var(--blue);
+@link-decoration: none;
+// @link-hover-color: darken(@link-color, 15%);
+@link-hover-decoration: underline;
+
+// Typography
+@font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+  Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
+@font-family-base: @font-family-sans-serif;
+
+@font-size-root: 16px;
+@font-size-base: 1rem;
+
+@font-size-xxs: 1rem * (10px / @font-size-root);
+@font-size-xs: 1rem * (12px / @font-size-root);
+@font-size-sm: 1rem * (14px / @font-size-root);
+@font-size-md: 1rem * (16px / @font-size-root);
+@font-size-lg: 1rem * (18px / @font-size-root);
+
+// @font-weight-lighter: lighter;
+// @font-weight-light: 300;
+@font-weight-normal: 400;
+@font-weight-bold: 500;
+// @font-weight-bolder: bolder;
+
+@font-weight-base: @font-weight-normal;
+
+@line-height-base: 1.5;
+@line-height-lg: 1.75;
+@line-height-sm: 1.25;
+
+// Border
+@border-width: 1px;
+// @border-color: @gray-4;
+// @border-radius-sm: 0.25rem; // 4px
+// @border-radius-md: 0.75rem; // 12px
+// @border-radius-lg: 1.25rem; // 20px
+
+// Button
+@btn-padding: 5px 12px;
+@btn-border-radius: 999px;
+@btn-bg: var(--color-fill-1);
+@btn-font-family: inherit;
+@btn-font-size: @font-size-sm;
+@btn-font-weight: @font-weight-normal;
+@btn-line-height: @line-height-base;
+
+@btn-hover-bg: rgba(0, 0, 0, 0.04);
+@btn-active-bg: rgba(0, 0, 0, 0.08);
+
+@btn-padding-sm: 4px 12px;
+// @btn-border-radius-sm: 15px;
+@btn-font-size-sm: @font-size-sm;
+
+@btn-padding-lg: 7px 12px;
+// @btn-border-radius-lg: 50px;
+@btn-font-size-lg: @font-size-md;
+
+@btn-block-spacing-y: 9px;
+
+@btn-border-width: @border-width;
+
+@btn-transition: 0.15s ease-in-out;
+
+// Composer
+@composer-padding: 9px var(--gutter);
+
+@composer-input-max-height: 132px;
+@composer-input-min-height: 36Px;
+@composer-input-padding: 8px 12px;
+@composer-input-bg: var(--color-fill-1);
+@composer-input-caret-color: var(--brand-2);
+@composer-input-transition: border-color 0.15s ease-in-out;
+
+// Input
+@input-width: 100%;
+@input-min-height: 24px;
+@input-margin: 0;
+@input-padding: 5px @gutter;
+@input-border: 1px solid var(--color-line-1);
+@input-border-radius: 12px;
+@input-bg: var(--color-fill-1);
+@input-font-family: inherit;
+@input-font-size: @font-size-sm;
+@input-line-height: 1.5;
+@input-color: var(--color-text-1);
+@input-resize: none;
+
+// List
+@list-bg: var(--color-fill-1);
+@list-border-width: @border-width;
+@list-border-color: var(--color-line-1);
+@list-border-radius: 2px;
+
+@list-item-padding: 10px var(--gutter);
+@list-item-color: var(--color-text-1);
+@list-item-font-size: 15px;
+@list-item-line-height: 1.6;
+@list-item-icon-color: var(--color-text-3);
+
+@list-item-hover-bg: @btn-hover-bg;
+
+@list-item-active-bg: var(--color-fill-2);
+
+// Navbar
+@navbar-height: 44Px;
+@navbar-padding: 0 var(--gutter);
+
+@navbar-color: var(--color-text-1);
+@navbar-font-size: 17Px;
+@navbar-logo-height: @navbar-height - 6Px;
+
+// Notice
+@notice-padding: @gutter;
+@notice-border-radius: 12px;
+@notice-bg: var(--color-fill-1);
+@notice-icon-color: var(--brand-1);
+
+@notice-content-color: var(--color-text-1);
+@notice-content-font-size: 13px;
+
+// Popover
+@popover-border-radius: 6px;
+@popover-bg: var(--color-fill-1);
+@popover-box-shadow: @modal-box-shadow;
+
+// RateActions
+@rate-btn-bg: var(--color-fill-1);
+
+// Card
+@card-padding: 12px;
+@card-title-padding: @card-padding @card-padding 6px;
+@card-title-font-size: @font-size-md;
+@card-title-font-weight: @font-weight-bold;
+@card-subtitle-font-size: @font-size-xxs;
+@card-subtitle-color: var(--color-text-3);
+@card-border-width: @border-width;
+@card-border-radius: 12px;
+// @card-border-color: ;
+@card-bg: var(--color-fill-1);
+
+@card-text-color: var(--color-text-1);
+
+@card-size-xl: 300Px;
+@card-size-lg: 160px;
+@card-size-md: 120px;
+@card-size-sm: 104px;
+@card-size-xs: 80px;
+
+// 卡片自适应宽度 = 100%宽度 - 赞踩宽度 - 赞踩左右边距
+@card-fluid-width: calc(100% - var(--rate-width) - 16Px);
+@card-max-width: 432Px;
+@card-min-width: 256Px;
+
+@card-btn-padding: 10px;
+@card-btn-line-height: 1.5;
+@card-btn-spacing-x: @gutter;
+@card-btn-spacing-y: 0;
+@card-btn-border-color: var(--color-line-1);
+
+@card-column-btn-bg: var(--color-fill-1);
+@card-column-btn-color: var(--color-text-2);
+
+@card-column-btn-primary-color: var(--brand-1);
+
+@card-column-btn-hover-bg: var(--color-fill-2);
+@card-column-btn-active-bg: var(--color-fill-2);
+
+// Carousel
+@carousel-dots-bottom: 8px;
+
+@carousel-dot-width: 8px;
+@carousel-dot-height: @carousel-dot-width;
+@carousel-dot-margin: 0 4px;
+@carousel-dot-padding: 0;
+@carousel-dot-border: 0;
+@carousel-dot-border-radius: 50%;
+@carousel-dot-transition: 0.3s;
+
+// Icon
+@icon-size-lg: 30px;
+
+// IconButton
+@icon-button-border: 0;
+@icon-button-border-radius: 3px;
+@icon-button-bg: transparent;
+@icon-button-color: var(--color-text-2);
+@icon-button-size: 18px;
+
+@icon-button-primary-color: var(--brand-2);
+
+@icon-button-lg-border-radius: 6px;
+@icon-button-lg-size: 24px;
+
+// Modals
+@modal-width: 320px;
+@modal-border-radius: 12px;
+
+@modal-bg: var(--color-fill-1);
+@modal-box-shadow: var(--shadow-3);
+
+@modal-header-padding: @gutter;
+
+@modal-title-margin: 0;
+@modal-title-color: var(--color-text-1);
+@modal-title-font-size: @font-size-lg;
+@modal-title-font-weight: @font-weight-bold;
+
+@modal-close-padding: 0;
+@modal-close-color: var(--color-text-1);
+
+@modal-footer-x-padding: @gutter;
+@modal-btn-x-spacing: @gutter;
+
+@modal-btn-y-padding: 12px;
+@modal-btn-y-border-width: 1px;
+@modal-btn-y-bg: var(--color-fill-1);
+@modal-btn-y-color: var(--color-text-2);
+@modal-btn-y-primary-color: var(--brand-1);
+
+@modal-fade-transform: translate(0, -50px);
+@modal-show-transform: none;
+@modal-opacity: 0;
+@modal-show-opacity: 1;
+@modal-transition: transform 0.3s ease-out, opacity 0.15s linear;
+
+// Popup
+@popup-bg: var(--color-fill-1);
+
+@popup-max-height: 70vh;
+@popup-wide-width: 480px;
+
+@popup-header-padding: 18px 40px 12px;
+
+@popup-title-margin: @modal-title-margin;
+@popup-title-color: @modal-title-color;
+@popup-title-font-size: @modal-title-font-size;
+
+@popup-subtitle-margin: 0;
+@popup-subtitle-color: var(--color-text-3);
+@popup-subtitle-font-size: @font-size-xs;
+
+@popup-close-color: @modal-close-color;
+
+@popup-footer-padding: 9px @gutter;
+@popup-btn-x-spacing: @gutter;
+@popup-btn-y-spacing: 9px;
+
+// SendConfirm
+@send-confirm-dialog-width: 480px;
+@send-confirm-dialog-margin: 20px;
+@send-confirm-inner-height: 320px;
+
+// Progress bars
+@progress-height: 2px;
+@progress-bg: var(--color-line-1);
+@progress-border-radius: 100px;
+@progress-bar-bg: var(--blue);
+@progress-bar-transition: width 0.6s ease;
+
+@progress-bar-bg-success: var(--green);
+@progress-bar-bg-error: var(--red);
+
+// QuickReplies
+@quick-replies-padding: 9Px var(--gutter);
+
+@quick-reply-color: var(--color-text-1);
+@quick-reply-font-size: 14Px;
+
+@quick-reply-dot-top: 0;
+@quick-reply-dot-right: 0;
+@quick-reply-dot-size: 8px;
+@quick-reply-dot-bg: var(--red);
+
+// ScrollView
+@scroll-view-spacing-x: 6px;
+
+// Tag
+@tag-margin: 0 4px 0 0;
+@tag-padding: 0 6px;
+@tag-border-radius: 4px;
+@tag-color: var(--brand-1);
+@tag-font-size: 12px;
+
+// Price
+@price-font-size: @font-size-sm;
+
+// Goods
+@goods-img-width: 72px;
+@goods-img-height: @goods-img-width;
+@goods-img-border-radius: 12px;
+
+@goods-padding: @gutter;
+@goods-gap: 9Px;
+@goods-desc-color: var(--color-text-3);
+@goods-meta-color: var(--color-text-3);
+@goods-meta-font-size: @font-size-xxs;
+@goods-border-width: 1px;
+@goods-border-color: var(--color-line-1);
+@goods-count-color: var(--color-text-3);
+@goods-count-font-size: @font-size-sm;
+@goods-unit-font-size: @font-size-xs;
+@goods-buy-btn-bg: var(--brand-1);
+@goods-buy-btn-color: #fff;
+@goods-buy-btn-padding: 2px;
+
+// Toast
+@toast-content-padding: 18px 24px;
+@toast-content-border-radius: 12px;
+@toast-content-bg: rgba(0, 0, 0, 0.7);
+
+@toast-message-margin: 0;
+@toast-message-color: var(--color-fill-1);
+@toast-message-font-size: 16px;
+
+// Z-index
+@zindex-backdrop: 100;
+@zindex-modal: 100;
+@zindex-popup: @zindex-modal;
+@zindex-popover: 1030;
+@zindex-toast: 200;
+@zindex-tooltip: 200;
+@zindex-recorder-toast: 100;
+
+@zindex-navbar: 10;
+@zindex-footer: 10;
+@zindex-quick-replies: 110;
+@zindex-rate-actions: 10;
+
+@zindex-step-dot: 2;

package/es/utils/canUse.js

@@ -0,0 +1,32 @@
+var testCache = {
+  passiveListener: function passiveListener() {
+    var supportsPassive = false;
+    try {
+      var opts = Object.defineProperty({}, 'passive', {
+        // eslint-disable-next-line
+        get: function get() {
+          supportsPassive = true;
+        }
+      });
+      // @ts-ignore
+      window.addEventListener('test', null, opts);
+    } catch (e) {
+      // No support
+    }
+    return supportsPassive;
+  },
+  smoothScroll: function smoothScroll() {
+    return 'scrollBehavior' in document.documentElement.style;
+  },
+  touch: function touch() {
+    return 'ontouchstart' in window;
+  }
+};
+export function addTest(name, test) {
+  // @ts-ignore
+  testCache[name] = test();
+}
+export default function canUse(name) {
+  // @ts-ignore
+  return testCache[name]();
+}

package/es/utils/countLines.js

@@ -0,0 +1,6 @@
+export default function countLines(el) {
+  var styles = window.getComputedStyle(el, null);
+  var lh = parseInt(styles.lineHeight, 10);
+  var h = parseInt(styles.height, 10);
+  return Math.round(h / lh);
+}

package/es/utils/date.js

@@ -0,0 +1,28 @@
+export var oneDayInMs = 24 * 60 * 60 * 1000;
+export var padZero = function padZero(t) {
+  return "".concat(t < 10 ? '0' : '').concat(t);
+};
+export function parseDateTime(timestamp) {
+  var date = new Date(timestamp);
+  return {
+    year: date.getFullYear(),
+    month: padZero(date.getMonth() + 1),
+    day: padZero(date.getDate()),
+    hours: padZero(date.getHours()),
+    minutes: padZero(date.getMinutes()),
+    seconds: padZero(date.getSeconds())
+  };
+}
+
+/**
+ * 判断是否在24小时内
+ */
+export function isWithin24Hours(timestamp) {
+  var now = Date.now();
+  var timeDiff = Math.abs(timestamp - now);
+  return timeDiff < oneDayInMs;
+}
+export function formatExpireTime(timestamp) {
+  var d = parseDateTime(timestamp);
+  return "".concat(d.year, ".").concat(d.month, ".").concat(d.day, " ").concat(d.hours, ":").concat(d.minutes, " \u5230\u671F");
+}

package/es/utils/formatTime.js

@@ -0,0 +1,16 @@
+export function formatTime(duration) {
+  if (!duration) return '';
+  var hours = Math.floor(duration / 3600);
+  var minutes = Math.floor((duration - hours * 3600) / 60);
+  var seconds = Math.floor(duration - hours * 3600 - minutes * 60);
+  var ret = '';
+  if (hours > 0) {
+    ret += "".concat(hours, ":");
+  }
+  ret += "".concat(minutes, ":");
+  if (seconds < 10) {
+    ret += '0';
+  }
+  ret += seconds;
+  return ret;
+}

package/es/utils/getExtName.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-bitwise
+export default (function (str) {
+  return str.slice((str.lastIndexOf('.') - 1 >>> 0) + 2);
+});

package/es/utils/getFps.js

@@ -0,0 +1,25 @@
+export default (function (callback, maxCount) {
+  var fps = 0;
+  var last = Date.now();
+  var count = 0; // 回调触发次数
+
+  // 兼容性处理
+  if (!requestAnimationFrame) {
+    callback(0);
+    return;
+  }
+  var _loop = function loop() {
+    var offset = Date.now() - last;
+    fps += 1;
+    if (offset >= 1000) {
+      last += offset;
+      callback(fps);
+      if (maxCount) count += 1;
+      fps = 0;
+    }
+    if (!maxCount || count <= maxCount) {
+      requestAnimationFrame(_loop);
+    }
+  };
+  _loop();
+});

package/es/utils/getRandomInt.js

@@ -0,0 +1,3 @@
+export default function getRandomInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}

package/es/utils/getToBottom.js

@@ -0,0 +1,3 @@
+export default function getToBottom(el) {
+  return el.scrollHeight - el.scrollTop - el.offsetHeight;
+}