@aochuang/client-sdk 1.0.278

package/components/wechat-chat-panel/chat-panel.vue

@@ -0,0 +1,257 @@
+<template>
+  <sdk-chat-panel
+    class="sdk-wechat-chat-panel"
+    ref="panel"
+    v-bind="props"
+    :is-sender-method="handleIsSenderMethod"
+    msg-time-field="wechatTime"
+    :enable-default-date-range="enableDefaultDateRange"
+    :chat-class-method="handleChatClassMethod"
+    @initloaded="handleChatsInitLoaded"
+    @chat-contextmenu="handleChatContext"
+    @view-context="handleChatViewContext"
+  >
+    <template slot="filter">
+      <slot name="filter"></slot>
+    </template>
+    <template slot="chat" slot-scope="{ item, dir }">
+      <chat-panel-item
+        :item="item"
+        :dir="dir"
+        :fetch-user-method="fetchUserMethod"
+        :config="config"
+        @user-avatar-click="handleUserAvatarClick"
+        @user-avatar-contextmenu="handleUserAvatarContextmenu"
+      >
+        <template slot="box-append" slots-scope="{}"> 
+          <slot name="box-append" :item="item"></slot>
+        </template>
+        <template slot="chat-append" slot-scope="{ item, updateProp }">
+          <chat-panel-chat-status
+            :data="item"
+            :update-chat-box-prop="updateProp"
+          ></chat-panel-chat-status>
+        </template>
+        <template slot="chat-prefix" slot-scope="{ item }">
+          <template v-if="selectable && handleFilterSelectMessageMethod(item)">
+            <div class="sdk-wechat-chat-panel__checkbox">
+              <ui-checkbox :value="!!checkMsgMap[item[keyField]]" @input="handleMsgCheckboxChange(item, $event)"></ui-checkbox>
+            </div>
+          </template>
+        </template>
+        <template slot="quote-message-append" slot-scope="{ item, quoteMessageData }">
+          <slot name="chat-quote-message-append" :item="item" :quote-message-data="quoteMessageData"></slot>
+        </template>
+      </chat-panel-item>
+    </template>
+    <template slot="main">
+      <slot name="main"></slot>
+      <template v-if="selectable">
+        <slot name="selection" :total="checkTotal"></slot>
+      </template>
+    </template>
+  </sdk-chat-panel>
+</template>
+<script>
+import SdkChatPanel from '../chat-panel'
+import ChatPanelItem from './chat-panel-item.vue'
+import ChatPanelChatStatus from './chat-panel-chat-status/chat-panel-chat-status.vue'
+
+export default {
+  name: 'SdkWechatChatPanel',
+  components: {
+    ChatPanelItem,
+    SdkChatPanel,
+    ChatPanelChatStatus
+  },
+  props: {
+    mode: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['default', 'filter'].includes(value)
+      }
+    },
+    keyField: {
+      type: String,
+      default: 'id'
+    },
+    startDate: {
+      type: [String, Number]
+    },
+    endDate: {
+      type: [String, Number]
+    },
+    data: {
+      type: [Array,Object]
+    },
+    // 没有pageSize的时候证明不需要分页加载
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    contextChatId: {
+      type: String
+    },
+    fetchDataMethod: {
+      type: Function
+    },
+    fetchUserMethod: {
+      type: Function
+    },
+    config: {
+      type: Function
+    },
+    selectable: {
+      type: Boolean,
+      default: false
+    },
+    filterSelectMessageMethod: {
+      type: Function
+    },
+    enableDefaultDateRange: {
+      type: Boolean,
+      default: true
+    },
+    onBeforeSelectionChange: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      checkMsgMap: {}
+    }
+  },
+  computed: {
+    props () {
+      const { config, ...nextProps } = this.$props
+      return nextProps
+    },
+    checkTotal () {
+      return Object.keys(this.checkMsgMap).length
+    }
+  },
+  watch: {
+    selectable () {
+      if (!this.selectable) {
+        this.checkMsgMap = {}
+      }
+    }
+  },
+  methods: {
+    handleChatClassMethod () {
+      return {
+        'is-selectable': this.selectable
+      }
+    },
+    handleFilterSelectMessageMethod (msg) {
+      if (!this.filterSelectMessageMethod) {
+        return true
+      }
+      return this.filterSelectMessageMethod({
+        item: msg
+      })
+    },
+    handleMsgCheckboxChange (msg, value) {
+      if (value) {
+        this.selectChat(msg)
+      } else {
+        this.unselectChat(msg)
+      }
+    },
+    handleUserAvatarClick ({ item }, evt) {
+      this.$emit('chat-user-click', {
+        item
+      }, evt)
+    },
+    handleUserAvatarContextmenu ({ item }, evt) {
+      this.$emit('chat-user-contextmenu', {
+        item
+      }, evt)
+    },
+    handleIsSenderMethod ({ item }) {
+      return !!item.isSend
+    },
+    handleChatsInitLoaded () {
+      this.$emit('initloaded')
+    },
+    scrollTo (msgId) {
+      this.$refs.panel && this.$refs.panel.scrollTo(msgId)
+    },
+    scrollToBottom () {
+      this.$refs.panel && this.$refs.panel.scrollToBottom()
+    },
+    reload () {
+      this.currentContextChat = null
+      return this.$refs.panel && this.$refs.panel.reload()
+    },
+    selectChat (chat) {
+      if (!chat) {
+        return
+      }
+      if (!this.selectable) {
+        console.warn('未开启选择')
+        return
+      }
+      if (this.onBeforeSelectionChange && this.onBeforeSelectionChange({
+        chat,
+        value: true
+      }) === false) {
+        return 
+      }
+      this.$set(this.checkMsgMap, chat[this.keyField], chat)
+    },
+    unselectChat (chat) {
+      if (!chat) {
+        return
+      }
+      if (!this.selectable) {
+        console.warn('未开启选择')
+        return
+      }
+      if (this.onBeforeSelectionChange && this.onBeforeSelectionChange({
+        chat,
+        value: false
+      }) === false) {
+        return 
+      }
+      this.$delete(this.checkMsgMap, chat[this.keyField])
+    },
+    unselectAllChat () {
+      return Object.keys(this.checkMsgMap).map(key => {
+        return this.unselectChat(this.checkMsgMap[key])
+      })
+    },
+    getSelectChats () {
+      return Object.keys(this.checkMsgMap).map(key => {
+        return this.checkMsgMap[key]
+      })
+    },
+    handleChatContext (item, evt) {
+      this.$emit('chat-contextmenu', {
+        item
+      }, evt)
+    },
+    handleChatViewContext ({ item }) {
+      this.$emit('chat-view-context', {
+        item
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-wechat-chat-panel{
+  .sdk-chat-panel-chat.is-selectable{
+    padding-left: 40px;
+    position: relative;
+  }
+}
+.sdk-wechat-chat-panel__checkbox{
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  z-index: 10;
+  transform: translateY(-50%);
+}
+</style>

package/components/wechat-chat-panel/index.js

@@ -0,0 +1,3 @@
+import ChatPanel from './chat-panel.vue'
+
+export default ChatPanel

package/components/wework-chat-control/calling/calling.vue

@@ -0,0 +1,223 @@
+<template>
+  <div
+    class="sdk-chat-wework-control-calling"
+    :class="['is-' + type]"
+  >
+    <div class="sdk-chat-wework-control-calling__main">
+      <div class="sdk-chat-wework-control-calling__handle">
+        <div class="sdk-chat-wework-control-calling__control">
+          <template v-if="duration">
+            {{ durationText }}
+          </template>
+          <template v-else>
+            {{ contentText }}
+          </template>
+          <template v-if="src && !['已取消', '对方已拒绝'].includes(contentText)">
+            ，<span
+              class="sdk-chat-wework-control-calling__toggle"
+              @click="handlePlayVoiceToggle"
+            >{{ openPlayer ? '收起录音' : '打开录音' }}</span>
+          </template>
+          <template v-if="addonEditControl">
+            ，<component :is="addonEditControl"></component>
+          </template>
+        </div>
+      </div>
+      <div class="sdk-chat-wework-control-calling__voice" v-if="openPlayer">
+        <base-voice v-bind="$props" :duration="duration" :content="voiceContent">
+          <template v-if="toolbarEditControl" slot="toolbar">
+            <component :is="toolbarEditControl"></component>
+          </template>
+        </base-voice>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { parse } from '../../../utils/json'
+import { unique } from '../../../utils/string'
+import { timeToHHmmss } from '../../../utils/date'
+import BaseVoice from '../voice/voice.vue'
+
+export default {
+  name: 'SdkChatControlCalling',
+  components: {
+    BaseVoice
+  },
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: [String, Object]
+    },
+    /**
+     * 支持两种方式，第一种纯文本，第二种数组，如
+     * [{
+     *    end: 0,
+     *    spk: 0,
+     *    start: 0,
+     *    text: '一段话'
+     * }]
+    */
+    convertContent: {
+      type: [String, Array]
+    },
+    convertStatus: {
+      type: Number
+    },
+    formatter: {
+      type: Function
+    },
+    allowDownload: {
+      type: Boolean,
+      default: true
+    },
+    transformVoiceToTextEnable: {
+      type: Boolean,
+      default: false
+    },
+    transformVoiceToTextMethod: {
+      type: Function
+    },
+    getVoiceToTextResultMethod: {
+      type: Function
+    },
+    enableConvertToWav: {
+      type: Boolean,
+      default: true
+    },
+    updateWavMethod: {
+      type: Function
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    renderEditControlMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      openPlayer: false
+    }
+  },
+  computed: {
+    nextContent () {
+      return parse(this.content) || {}
+    },
+    contentText () {
+      return this.nextContent.content || ''
+    },
+    nextId () {
+      return this.id || unique()
+    },
+    type () {
+      return this.nextContent.type
+    },
+    src () {
+      return this.nextContent.audioUrl
+    },
+    duration () {
+      const duration = this.nextContent.duration
+      if (!duration) {
+        return
+      }
+      return duration
+    },
+    durationText () {
+      return this.nextContent.content || ''
+    },
+    voiceContent () {
+      return {
+        url: this.src,
+        durationMs: this.duration
+      }
+    },
+    addonEditControl () {
+      if (!this.editable) {
+        return null
+      }
+      const control = this.renderEditControlMethod({
+        position: 'voice-addon',
+        content: this.nextContent
+      })
+      return control
+    },
+    toolbarEditControl () {
+      if (!this.editable) {
+        return null
+      }
+      const control = this.renderEditControlMethod({
+        position: 'voice-toolbar',
+        content: this.nextContent
+      })
+      return control
+    }
+  },
+  methods: {
+    handlePlayVoiceToggle () {
+      this.openPlayer = !this.openPlayer
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-wework-control-calling{
+  &.is-dir-left,:not(.is-dir-right){
+    .sdk-chat-wework-control-calling__handle{
+      flex-direction: row-reverse;
+      &:after {
+        margin-right: 6px;
+      }
+    }
+  }
+  &.is-dir-right {
+    .sdk-chat-wework-control-calling__handle{
+      flex-direction: row;
+      &:after {
+        margin-left: 6px;
+      }
+    }
+  }
+  &.is-video{
+    .sdk-chat-wework-control-calling__handle{
+      &:after {
+        background-image: url('./vidicon-fill.svg');
+      }
+    }
+  }
+  &.is-voice{
+    .sdk-chat-wework-control-calling__handle{
+      &:after {
+        background-image: url('./phone-fill.svg');
+        transform: rotate(135deg);
+      }
+    }
+  }
+}
+.sdk-chat-wework-control-calling__handle{
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  &:after {
+    content: '';
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-size: 100%;
+    opacity: .3;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+  }
+}
+.sdk-chat-wework-control-calling__voice{
+  padding: 8px 12px;
+  border-top: 1px solid rgba(0,0,0,.06);
+}
+.sdk-chat-wework-control-calling__toggle{
+  color: #0052CC;
+  cursor: pointer;
+}
+</style>

package/components/wework-chat-control/calling/phone-fill.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1670299071263" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="60143" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 700.586667v150.869333a42.666667 42.666667 0 0 1-39.68 42.581333c-18.645333 1.28-33.877333 1.962667-45.653333 1.962667-377.045333 0-682.666667-305.621333-682.666667-682.666667 0-11.776 0.64-27.008 1.962667-45.653333A42.666667 42.666667 0 0 1 172.544 128H323.413333a21.333333 21.333333 0 0 1 21.248 19.2c0.981333 9.813333 1.877333 17.621333 2.730667 23.552A593.109333 593.109333 0 0 0 398.933333 341.461333c4.053333 8.533333 1.408 18.730667-6.272 24.192l-92.074666 65.792a556.672 556.672 0 0 0 292.010666 292.010667l65.706667-91.904a19.712 19.712 0 0 1 24.448-6.357333 593.109333 593.109333 0 0 0 170.666667 51.413333c5.930667 0.853333 13.738667 1.792 23.466666 2.730667a21.333333 21.333333 0 0 1 19.157334 21.248z" p-id="60144"></path></svg>

package/components/wework-chat-control/calling/vidicon-fill.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1670298983364" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26050" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M725.333333 392.533333l222.421334-155.733333a21.333333 21.333333 0 0 1 33.578666 17.493333v515.413334a21.333333 21.333333 0 0 1-33.578666 17.493333L725.333333 631.466667V810.666667a42.666667 42.666667 0 0 1-42.666666 42.666666H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666666V213.333333a42.666667 42.666667 0 0 1 42.666666-42.666666h597.333334a42.666667 42.666667 0 0 1 42.666666 42.666666v179.2zM213.333333 341.333333v85.333334h85.333334V341.333333H213.333333z" p-id="26051"></path></svg>

package/components/wework-chat-control/channel-live/channel-live.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="sdk-chat-wework-panel-control-channel-live" :class="['sdk-chat-wework-panel-control-channel-live--' + type, {'is-border': border}]">
+    <template v-if="type === 'default' || type === 'thumb'">
+      <div class="sdk-chat-wework-panel-control-channel-live__cover">
+        <ui-image :src="cover" width="100%" height="100%" fit="cover" :radius="0"></ui-image>
+      </div>
+      <div class="sdk-chat-wework-panel-control-channel-live__main">
+        <div class="sdk-chat-wework-panel-control-channel-live__rows">
+          <div class="sdk-chat-wework-panel-control-channel-live__row">
+            <ui-avatar :src="avatar" :name="nickname"></ui-avatar>
+          </div>
+          <div class="sdk-chat-wework-panel-control-channel-live__row">
+            <div class="sdk-chat-wework-panel-control-channel-live__description">{{ desc }}</div>
+          </div>
+        </div>
+        <div class="sdk-chat-wework-panel-control-channel-live__other">视频号直播</div>
+      </div>
+    </template>
+    <template v-else-if="type === 'quote'">
+      <div class="sdk-chat-wework-panel-control-channel-live__icon"></div>
+      <div class="sdk-chat-wework-panel-control-channel-live__title">{{ desc }}</div>
+      <div class="sdk-chat-wework-panel-control-channel-live__cover">
+        <ui-image :src="cover" width="100%" height="100%" fit="cover" :radius="0"></ui-image>
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import { parse, parseXml } from '../../../utils/json'
+import { formatOssPath } from '@aochuang/common/utils/oss'
+
+export default {
+  name: 'SdkChatControlChannelLive',
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: [String, Object]
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['quote', 'default', 'thumb'].includes(value)
+      }
+    }
+  },
+  inject: {
+    SdkChatPanelBox: {
+      default: null
+    }
+  },
+  computed: {
+    nextContent () {
+      let content = this.content
+      if (!content) {
+        return {}
+      }
+      if (typeof content === 'string') {
+        content = parse(content) || {}
+        if (typeof content === 'string') {
+          const xmlData = parseXml(content)
+          const appMsg = xmlData && xmlData.msg && xmlData.msg.appmsg ? xmlData.msg.appmsg : {}
+          const finderLive = appMsg.finderLive || {}
+          content = {
+            url: finderLive.url,
+            headUrl: finderLive.avatar,
+            coverUrl: finderLive.media ? finderLive.media.coverUrl : null,
+            nickname: finderLive.nickname,
+            desc: finderLive.desc
+          }
+        }
+      }
+      return content
+    },
+    cover () {
+      return formatOssPath(this.nextContent.coverUrl)
+    },
+    avatar () {
+      return formatOssPath(this.nextContent.avatar)
+    },
+    nickname () {
+      return this.nextContent.nickname
+    },
+    desc () {
+      return this.nextContent.desc
+    },
+    border () {
+      if (this.type === 'quote') {
+        return false
+      }
+      return !this.SdkChatPanelBox
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-wework-panel-control-channel-live{
+  display: inline-block;
+  max-width: 100%;
+  &.is-border {
+    border: 1px solid #eee;
+    border-radius: 4px;
+  }
+}
+.sdk-chat-wework-panel-control-channel-live--default,
+.sdk-chat-wework-panel-control-channel-live--thumb {
+  max-width: 280px;
+  .sdk-chat-wework-panel-control-channel-live{
+    text-align: left;
+    color: #172b4d;
+  }
+  .sdk-chat-wework-panel-control-channel-live__cover{
+    height: 200px;
+    background-color: #eee;
+  }
+  .sdk-chat-wework-panel-control-channel-live__row{
+    line-height: 1.5em;
+    padding: 3px 12px;
+  }
+  .sdk-chat-wework-panel-control-channel-live__main{
+    padding: 6px 0 0;
+  }
+  .sdk-chat-wework-panel-control-channel-live__other {
+    font-size: 12px;
+    color: #999;
+    border-top: 1px solid #eee;
+    padding: 0 12px;
+    height: 24px;
+    line-height: 24px;
+    margin-top: 6px;
+    background-color: #fff;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .sdk-chat-wework-panel-control-channel-live__description{
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+}
+.sdk-chat-wework-panel-control-channel-live--thumb{
+  border: 1px solid #eee;
+  background-color: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  .sdk-chat-wework-panel-control-channel-live__cover{
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 3;
+      background: linear-gradient(180deg,#fff 0,hsla(0,0%,100%,.8) 48%,hsla(0,0%,100%,.4) 79%,hsla(0,0%,100%,0));
+    }
+  }
+  .sdk-chat-wework-panel-control-channel-live__main {
+    position: relative;
+    z-index: 5;
+  }
+}
+.sdk-chat-wework-panel-control-channel-live--quote {
+  display: flex;
+  flex-direction: row;
+  max-width: 360px;
+  .sdk-chat-wework-panel-control-channel-live__icon {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-right: 4px;
+    min-width: 18px;
+    vertical-align: top;
+    margin-top: 2px;
+    color: #999;
+    background: url('./quote-icon.svg') no-repeat 50% 50%;
+    background-size: cover;
+  }
+  .sdk-chat-wework-panel-control-channel-live__cover {
+    width: 52px;
+    height: 52px;
+    min-width: 52px;
+  }
+  .sdk-chat-wework-panel-control-channel-live__title{
+    margin-right: 6px;
+  }
+}
+</style>

package/components/wework-chat-control/channel-live/quote-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1752135256842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3545" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M205.312 157.013333c37.319111 0.512 92.245333 26.510222 214.044444 207.587556a2954.723556 2954.723556 0 0 1 83.143112 131.697778 2964.707556 2964.707556 0 0 1 83.171555-131.697778c121.799111-181.077333 176.696889-207.075556 214.044445-207.559111l1.024-0.028445h1.080888c9.216 0 41.301333 2.56 66.702223 35.982223 47.104 61.895111 42.581333 190.976-13.795556 394.666666l-0.227555 0.796445a1318.684444 1318.684444 0 0 1-41.955556 116.764444c-40.391111 96.426667-75.804444 137.557333-118.328889 137.557333-38.855111 0-83.626667-30.037333-133.034667-89.315555a625.038222 625.038222 0 0 1-58.652444-83.996445 625.038222 625.038222 0 0 1-58.680889 83.996445c-49.408 59.278222-94.151111 89.315556-133.006222 89.315555-42.552889 0-77.937778-41.130667-118.357333-137.557333-24.177778-57.685333-41.244444-114.346667-41.955556-116.764444l-0.227556-0.796445C93.923556 384 89.429333 254.862222 136.533333 192.995556c24.177778-31.829333 54.442667-35.697778 65.251556-35.982223h3.555555z m-0.881778 81.351111c-3.84 2.702222-12.117333 13.624889-16.384 41.813334-6.257778 41.244444-4.380444 124.302222 40.192 285.411555 1.365333 4.465778 14.904889 48.753778 33.735111 95.573334 27.676444 68.949333 45.880889 92.16 53.048889 99.328 10.439111-4.266667 34.56-19.882667 68.721778-61.44 29.923556-36.380444 56.718222-79.758222 73.870222-119.182223-17.351111-30.151111-56.376889-96.568889-100.977778-163.413333-102.001778-152.832-144.042667-175.018667-152.206222-178.062222z m596.195556 0c-8.163556 3.072-50.232889 25.258667-152.206222 178.090667a3080.931556 3080.931556 0 0 0-101.006223 163.384889c17.180444 39.452444 43.975111 82.830222 73.870223 119.210667 34.161778 41.557333 58.311111 57.173333 68.750222 61.44 7.139556-7.168 25.429333-30.492444 53.248-99.84a1277.155556 1277.155556 0 0 0 33.507555-95.061334c44.572444-161.109333 46.449778-244.138667 40.192-285.44-4.266667-28.16-12.515556-39.082667-16.355555-41.756444z" fill="#999" p-id="3546"></path></svg>