song-ui-u/lib/components/chat/src/bubble.vue.cjs.map

vue3 + js的PC前端组件库

{"version":3,"file":"bubble.vue.cjs","sources":["../../../../../packages/components/chat/src/bubble.vue"],"sourcesContent":["<script setup>\r\nimport { ref, computed, onMounted, watch } from \"vue\";\r\nimport { useNamespace } from \"@ui-library/hook\";\r\nimport { XIcon, XImage } from \"@ui-library/components\";\r\nimport { Loader } from \"song-ui-pro-icon\";\r\nimport Typewriter from \"typewriter-effect/dist/core\";\r\n\r\nconst ns = useNamespace(\"bubble\");\r\n\r\ndefineOptions({\r\n  name: \"x-bubble\",\r\n});\r\n\r\nconst props = defineProps({\r\n  placement: {\r\n    type: String,\r\n    default: \"left\",\r\n  },\r\n\r\n  avatar: {\r\n    type: String,\r\n    default: \"\", // 头像信息，包括 icon 和 style\r\n  },\r\n\r\n  content: {\r\n    type: String,\r\n    default: \"\",\r\n  },\r\n\r\n  loading: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n\r\n  delay: {\r\n    type: Number,\r\n    default: 50,\r\n  },\r\n\r\n  // 打字效果\r\n  typing: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n});\r\n\r\nconst isLoading = computed(() => props.loading);\r\n\r\nconst startTyping = (element, text) => {\r\n  if (!element) return;\r\n\r\n  // 清除之前的实例\r\n  element.innerHTML = \"\";\r\n\r\n  const typewriter = new Typewriter(element, {\r\n    delay: props.delay,\r\n    cursor: \"|\",\r\n    cursorClassName: ns.e(\"cursor\"),\r\n    wrapperClassName: ns.e(\"wrapper\"),\r\n  });\r\n\r\n  typewriter\r\n    .typeString(text)\r\n    .callFunction(() => {\r\n      // 打字完成后移除光标\r\n      const cursor = element.querySelector(`.${ns.e(\"cursor\")}`);\r\n      if (cursor) cursor.style.display = \"none\";\r\n    })\r\n    .start();\r\n};\r\n\r\nonMounted(() => {\r\n  if (props.content) {\r\n    const element = document.querySelector(`.${ns.e(\"typing\")}`);\r\n    startTyping(element, props.content);\r\n  }\r\n});\r\n\r\nwatch(\r\n  () => props.content,\r\n  (newVal) => {\r\n    if (newVal) {\r\n      const element = document.querySelector(`.${ns.e(\"typing\")}`);\r\n      startTyping(element, newVal);\r\n    }\r\n  }\r\n);\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"[ns.b(), ns.m('position', placement)]\">\r\n    <div :class=\"[ns.e('avatar')]\">\r\n      <img :class=\"[ns.e('avatar-img')]\" v-if=\"avatar\" :src=\"avatar\" alt=\"\" />\r\n      <div v-else :class=\"[ns.e('avatar-icon')]\">\r\n        <XIcon>\r\n          <svg\r\n            t=\"1744267952053\"\r\n            class=\"icon\"\r\n            viewBox=\"0 0 1024 1024\"\r\n            version=\"1.1\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            p-id=\"5220\"\r\n            width=\"200\"\r\n            height=\"200\"\r\n          >\r\n            <path\r\n              d=\"M959.68 921.024c-15.232-181.696-139.648-331.968-307.84-386.624 70.464-45.632 117.248-124.48 117.248-214.464C769.152 178.624 654.208 64 512.512 64 370.752 64 255.808 178.624 255.808 319.936c0 89.984 46.784 168.832 117.248 214.528-168.192 54.592-292.544 204.864-307.84 386.56-0.192 3.456-0.64 5.44 0 10.176C66.496 947.2 80.64 960 96.704 960c17.92 0 32.064-14.656 32.064-32 16.704-197.76 182.272-351.936 383.744-351.936 201.408 0 366.976 154.176 383.68 351.936 0 17.344 14.144 32 32.064 32 16.064 0 30.208-12.8 31.424-28.8C960.32 926.464 959.936 924.416 959.68 921.024zM320 319.936C320 213.952 406.208 128 512.512 128s192.448 85.952 192.448 191.936c0 106.048-86.144 192-192.448 192S320 425.984 320 319.936z\"\r\n              p-id=\"5221\"\r\n            ></path>\r\n          </svg>\r\n        </XIcon>\r\n      </div>\r\n    </div>\r\n\r\n    <div :class=\"[ns.e('content'), ns.m('content', placement)]\">\r\n      <template v-if=\"isLoading && placement == 'left'\">\r\n        <XIcon :class=\"[ns.is('loading-transition', loading)]\">\r\n          <Loader />\r\n        </XIcon>\r\n        <span>加载中....</span>\r\n      </template>\r\n      <template v-else>\r\n        <div\r\n          v-if=\"placement == 'left' && typing\"\r\n          :class=\"[ns.e('typing')]\"\r\n        ></div>\r\n        <div v-else>{{ content }}</div>\r\n      </template>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["useNamespace","computed","onMounted","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAc;AAOd,MAAM,EAAE,GAAGA,kBAAY,CAAC,QAAQ,CAAC,CAAC;AAClC;AAGG;AACH;AACA,MAAM,KAAK,GAAG,OA+BZ,CAAC;AACH;AACA,MAAM,SAAS,GAAGC,YAAQ,CAAC,MAAM,KAAK,CAAC,OAAO,CAAC,CAAC;AAChD;AACA,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,IAAI,KAAK;AACvC,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO;AACvB;AACA;AACA,EAAE,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;AACzB;AACA,EAAE,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;AAC7C,IAAI,KAAK,EAAE,KAAK,CAAC,KAAK;AACtB,IAAI,MAAM,EAAE,GAAG;AACf,IAAI,eAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;AACnC,IAAI,gBAAgB,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AACrC,GAAG,CAAC,CAAC;AACL;AACA,EAAE,UAAU;AACZ,KAAK,UAAU,CAAC,IAAI,CAAC;AACrB,KAAK,YAAY,CAAC,MAAM;AACxB;AACA,MAAM,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACjE,MAAM,IAAI,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;AAChD,KAAK,CAAC;AACN,KAAK,KAAK,EAAE,CAAC;AACb,CAAC,CAAC;AACF;AACAC,aAAS,CAAC,MAAM;AAChB,EAAE,IAAI,KAAK,CAAC,OAAO,EAAE;AACrB,IAAI,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACjE,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;AACxC,GAAG;AACH,CAAC,CAAC,CAAC;AACH;AACAC,SAAK;AACL,EAAE,MAAM,KAAK,CAAC,OAAO;AACrB,EAAE,CAAC,MAAM,KAAK;AACd,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACnE,MAAM,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AACnC,KAAK;AACL,GAAG;AACH,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}