fix: 新分支迁移mp

apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue

@@ -32,25 +32,44 @@ function getNickname(sendFrom: number) {
 <template>
   <div class="execution" v-for="item in props.list" :key="item.id">
     <div
-      class="mp-comment"
-      :class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
+      class="mb-[30px] flex items-start"
+      :class="{ 'flex-row-reverse': item.sendFrom === SendFrom.MpBot }"
     >
-      <div class="avatar-div">
-        <img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
-        <div class="mp-comment__author">
+      <div class="flex w-20 flex-col items-center text-center">
+        <img
+          :src="getAvatar(item.sendFrom)"
+          class="mb-2 h-12 w-12 rounded-full border border-transparent object-cover"
+        />
+        <div class="text-sm font-semibold text-[#999]">
           {{ getNickname(item.sendFrom) }}
         </div>
       </div>
-      <div class="mp-comment__main">
-        <div class="mp-comment__header">
-          <div class="mp-comment__create_time">
+      <div class="relative mx-2 flex-1 rounded-[5px] border border-[#dedede]">
+        <span
+          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#dedede]"
+          :class="{
+            '-right-2 left-auto border-l-[8px] border-r-0 border-l-[#dedede]':
+              item.sendFrom === SendFrom.MpBot,
+          }"
+        ></span>
+        <span
+          class="pointer-events-none absolute -left-[7px] top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#f8f8f8]"
+          :class="{
+            '-right-[7px] left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':
+              item.sendFrom === SendFrom.MpBot,
+          }"
+        ></span>
+        <div
+          class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
+        >
+          <div class="text-xs text-gray-500">
             {{ formatDateTime(item.createTime) }}
           </div>
         </div>
         <div
-          class="mp-comment__body"
-          :style="
-            item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
+          class="overflow-hidden rounded-b-[5px] p-[15px] text-sm text-[#333]"
+          :class="
+            item.sendFrom === SendFrom.MpBot ? 'bg-[#6BED72]' : 'bg-white'
           "
         >
           <Msg :item="item" />
@@ -59,17 +78,3 @@ function getNickname(sendFrom: number) {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
-
-/** TODO @dylan： 看看有没适合 tindwind 的哈。 */
-
-@import url('./comment.scss');
-@import url('./card.scss');
-
-.avatar-div {
-  width: 80px;
-  text-align: center;
-}
-</style>