消息

unpackage/dist/dev/mp-weixin/TUIKit/components/TUIChat/message-input/message-input-at/index.js

@@ -0,0 +1,154 @@
+"use strict";
+const common_vendor = require("../../../../../common/vendor.js");
+require("../../../../adapter-vue.js");
+const TUIKit_utils_env = require("../../../../utils/env.js");
+if (!Math) {
+  BottomPopup();
+}
+const BottomPopup = () => "../../../common/BottomPopup/index.js";
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  __name: "index",
+  emits: ["onAtListOpen", "insertAt"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emits = __emit;
+    const MessageInputAt = common_vendor.ref();
+    const memberListItems = common_vendor.ref();
+    const showAtList = common_vendor.ref(false);
+    const memberList = common_vendor.ref();
+    const allMemberList = common_vendor.ref();
+    const showMemberList = common_vendor.ref();
+    const isGroup = common_vendor.ref(false);
+    const position = common_vendor.ref({
+      left: 0,
+      top: 0
+    });
+    const selectedIndex = common_vendor.ref(0);
+    const currentConversationID = common_vendor.ref("");
+    const all = {
+      userID: common_vendor.qt.TYPES.MSG_AT_ALL,
+      nick: "所有人",
+      isAll: true,
+      avatar: "https://web.sdk.qcloud.com/im/assets/images/at.svg"
+    };
+    common_vendor.Jt.watch(common_vendor.o.CONV, {
+      currentConversationID: (id) => {
+        var _a, _b;
+        if (id !== currentConversationID.value) {
+          currentConversationID.value = id;
+          memberList.value = [];
+          allMemberList.value = [];
+          showMemberList.value = [];
+          isGroup.value = false;
+          common_vendor.Jt.update(common_vendor.o.CUSTOM, "memberList", memberList.value);
+          if ((_a = currentConversationID == null ? void 0 : currentConversationID.value) == null ? void 0 : _a.startsWith("GROUP")) {
+            isGroup.value = true;
+            const groupID = (_b = currentConversationID == null ? void 0 : currentConversationID.value) == null ? void 0 : _b.substring(5);
+            common_vendor.es.switchGroup(groupID);
+          } else {
+            common_vendor.es.switchGroup("");
+          }
+        }
+      }
+    });
+    common_vendor.Jt.watch(common_vendor.o.GRP, {
+      currentGroupMemberList: (list) => {
+        memberList.value = list;
+        allMemberList.value = [all, ...memberList.value];
+        showMemberList.value = allMemberList.value;
+        common_vendor.Jt.update(common_vendor.o.CUSTOM, "memberList", memberList.value);
+      }
+    });
+    const toggleAtList = (show) => {
+      if (!isGroup.value) {
+        return;
+      }
+      showAtList.value = show;
+      if (showAtList.value) {
+        emits("onAtListOpen");
+      }
+    };
+    const handleAtListPosition = (positionData) => {
+      position.value = positionData;
+    };
+    const setCurrentSelectIndex = (index) => {
+      var _a, _b;
+      selectedIndex.value = index;
+      (_b = (_a = memberListItems.value) == null ? void 0 : _a[selectedIndex.value]) == null ? void 0 : _b.scrollIntoView(false);
+    };
+    const setShowMemberList = (list) => {
+      showMemberList.value = list;
+    };
+    common_vendor.i.toggleAtList = toggleAtList;
+    common_vendor.i.handleAtListPosition = handleAtListPosition;
+    common_vendor.i.setCurrentSelectIndex = setCurrentSelectIndex;
+    common_vendor.i.setShowMemberList = setShowMemberList;
+    __expose({
+      toggleAtList
+    });
+    common_vendor.watch(
+      () => [position.value, MessageInputAt == null ? void 0 : MessageInputAt.value],
+      () => {
+        var _a;
+        if (TUIKit_utils_env.isH5 || !(MessageInputAt == null ? void 0 : MessageInputAt.value) || !((_a = MessageInputAt == null ? void 0 : MessageInputAt.value) == null ? void 0 : _a.style)) {
+          return;
+        }
+        MessageInputAt.value.style.left = position.value.left + "px";
+        MessageInputAt.value.style.top = position.value.top - MessageInputAt.value.clientHeight + "px";
+      }
+    );
+    const closeAt = () => {
+      showAtList.value = false;
+      showMemberList.value = allMemberList.value;
+      position.value = {
+        left: 0,
+        top: 0
+      };
+    };
+    const selectItem = (index) => {
+      var _a;
+      if (TUIKit_utils_env.isPC && common_vendor.i.selectItem) {
+        common_vendor.i.selectItem(index);
+      } else {
+        if ((_a = showMemberList == null ? void 0 : showMemberList.value) == null ? void 0 : _a.length) {
+          const item = showMemberList == null ? void 0 : showMemberList.value[index];
+          emits("insertAt", {
+            id: item == null ? void 0 : item.userID,
+            label: (item == null ? void 0 : item.nick) || (item == null ? void 0 : item.userID)
+          });
+        }
+      }
+      closeAt();
+    };
+    const handleMemberAvatar = (item) => {
+      return (item == null ? void 0 : item.avatar) || "https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png";
+    };
+    const handleMemberName = (item) => {
+      return (item == null ? void 0 : item.nick) ? item == null ? void 0 : item.nick : item == null ? void 0 : item.userID;
+    };
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: !common_vendor.unref(TUIKit_utils_env.isPC)
+      }, !common_vendor.unref(TUIKit_utils_env.isPC) ? {
+        b: common_vendor.t(common_vendor.unref(common_vendor.Wt).t("TUIChat.选择提醒的人"))
+      } : {}, {
+        c: common_vendor.f(common_vendor.unref(showMemberList), (item, index, i0) => {
+          return {
+            a: handleMemberAvatar(item),
+            b: common_vendor.t(handleMemberName(item)),
+            c: index,
+            d: common_vendor.n(index === common_vendor.unref(selectedIndex) && "selected"),
+            e: common_vendor.o$1(($event) => selectItem(index), index)
+          };
+        }),
+        d: common_vendor.n(common_vendor.unref(TUIKit_utils_env.isPC) ? "message-input-at" : "message-input-at-h5"),
+        e: common_vendor.o$1(closeAt),
+        f: common_vendor.p({
+          show: common_vendor.unref(showAtList)
+        })
+      });
+    };
+  }
+});
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-7a11d573"]]);
+wx.createComponent(Component);
+//# sourceMappingURL=../../../../../../.sourcemap/mp-weixin/TUIKit/components/TUIChat/message-input/message-input-at/index.js.map

unpackage/dist/dev/mp-weixin/TUIKit/components/TUIChat/message-input/message-input-at/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "bottom-popup": "../../../common/BottomPopup/index"
+  }
+}

unpackage/dist/dev/mp-weixin/TUIKit/components/TUIChat/message-input/message-input-at/index.wxml

@@ -0,0 +1 @@
+<bottom-popup wx:if="{{f}}" class="data-v-7a11d573" u-s="{{['d']}}" bindonClose="{{e}}" u-i="7a11d573-0" bind:__l="__l" u-p="{{f}}"><view ref="MessageInputAt" class="{{['data-v-7a11d573', d]}}"><view ref="dialog" class="member-list data-v-7a11d573"><view wx:if="{{a}}" class="member-list-title data-v-7a11d573"><label class="title data-v-7a11d573">{{b}}</label></view><view class="member-list-box data-v-7a11d573"><view wx:for="{{c}}" wx:for-item="item" wx:key="c" ref="memberListItems" class="{{['member-list-box-body', 'data-v-7a11d573', item.d]}}" bindtap="{{item.e}}"><image class="member-list-box-body-avatar data-v-7a11d573" src="{{item.a}}"></image><label class="member-list-box-body-name data-v-7a11d573">{{item.b}}</label></view></view></view></view></bottom-popup>

unpackage/dist/dev/mp-weixin/TUIKit/components/TUIChat/message-input/message-input-at/index.wxss

@@ -0,0 +1,168 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+body.data-v-7a11d573, div.data-v-7a11d573, ul.data-v-7a11d573, ol.data-v-7a11d573, dt.data-v-7a11d573, dd.data-v-7a11d573, li.data-v-7a11d573, dl.data-v-7a11d573, h1.data-v-7a11d573, h2.data-v-7a11d573, h3.data-v-7a11d573, h4.data-v-7a11d573, p.data-v-7a11d573 {
+  margin: 0;
+  padding: 0;
+  font-style: normal;
+  /* font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif; */
+}
+ol.data-v-7a11d573, ul.data-v-7a11d573, li.data-v-7a11d573 {
+  list-style: none;
+}
+img.data-v-7a11d573 {
+  border: 0;
+  vertical-align: middle;
+  pointer-events: none;
+}
+body.data-v-7a11d573 {
+  color: #000;
+  background: #FFF;
+}
+.clear.data-v-7a11d573 {
+  clear: both;
+  height: 1px;
+  width: 100%;
+  overflow: hidden;
+  margin-top: -1px;
+}
+a.data-v-7a11d573 {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+a.data-v-7a11d573:hover {
+  text-decoration: none;
+}
+input.data-v-7a11d573, textarea.data-v-7a11d573 {
+  -webkit-user-select: auto;
+          user-select: auto;
+}
+input.data-v-7a11d573:focus, input.data-v-7a11d573:active, textarea.data-v-7a11d573:focus, textarea.data-v-7a11d573:active {
+  outline: none;
+}
+.chat-aside.data-v-7a11d573 {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  box-sizing: border-box;
+  width: 360px !important;
+  border-radius: 8px 0 0 8px;
+  z-index: 9999;
+  max-height: calc(100% - 50px);
+}
+.message-input-at.data-v-7a11d573 {
+  position: fixed;
+  max-width: 15rem;
+  max-height: 10rem;
+  overflow: hidden auto;
+  background: #fff;
+  box-shadow: 0 0.06rem 0.63rem 0 rgba(2, 16, 43, 0.15);
+  border-radius: 0.13rem;
+}
+.member-list-box-header.data-v-7a11d573 {
+  height: 2.5rem;
+  padding-top: 5px;
+  cursor: pointer;
+}
+.member-list-box-header.data-v-7a11d573:hover {
+  background: rgba(0, 110, 255, 0.1);
+}
+.member-list-box span.data-v-7a11d573 {
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  font-size: 12px;
+  color: #000;
+  letter-spacing: 0;
+  padding: 5px;
+}
+.member-list-box-body.data-v-7a11d573 {
+  height: 30px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.member-list-box-body .selected.data-v-7a11d573, .member-list-box-body.data-v-7a11d573:hover {
+  background: rgba(0, 110, 255, 0.1);
+}
+.member-list-box-body-name.data-v-7a11d573 {
+  overflow: hidden;
+  white-space: nowrap;
+  word-wrap: break-word;
+  word-break: break-all;
+  text-overflow: ellipsis;
+}
+.member-list-box-body-avatar.data-v-7a11d573 {
+  width: 20px;
+  height: 20px;
+  padding-left: 10px;
+}
+.member-list-box .selected.data-v-7a11d573 {
+  background: rgba(0, 110, 255, 0.1);
+}
+.message-input-at-h5 .member-list.data-v-7a11d573 {
+  height: auto;
+  max-height: 500px;
+  width: 100%;
+  max-width: 100%;
+  background: white;
+  border-radius: 12px 12px 0 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.message-input-at-h5 .member-list-title.data-v-7a11d573 {
+  height: -webkit-fit-content;
+  height: fit-content;
+  width: calc(100% - 30px);
+  text-align: center;
+  vertical-align: middle;
+  padding: 15px;
+}
+.message-input-at-h5 .member-list-title .title.data-v-7a11d573 {
+  vertical-align: middle;
+  display: inline-block;
+  font-size: 16px;
+}
+.message-input-at-h5 .member-list-title .close.data-v-7a11d573 {
+  vertical-align: middle;
+  position: absolute;
+  right: 10px;
+  display: inline-block;
+}
+.message-input-at-h5 .member-list-box.data-v-7a11d573 {
+  flex: 1;
+  overflow-y: scroll;
+}
+.message-input-at-h5 .member-list-box-body.data-v-7a11d573 {
+  padding: 10px;
+}
+.message-input-at-h5 .member-list-box-body img.data-v-7a11d573 {
+  width: 26px;
+  height: 26px;
+}
+.message-input-at-h5 .member-list-box-body span.data-v-7a11d573 {
+  font-size: 14px;
+}