fix: 组件名称修改 css样式使用tindwind

apps/web-antd/src/views/mp/modules/wx-msg/main.vue

@@ -19,7 +19,7 @@ import { getUser } from '#/api/mp/user';
 import profile from '#/assets/imgs/profile.jpg';
 import WxReplySelect, { ReplyType } from '#/views/mp/modules/wx-reply';
 
-import MsgList from './components/MsgList.vue';
+import MsgList from './modules/msg-list.vue';
 
 defineOptions({ name: 'WxMsg' });
 
@@ -168,14 +168,21 @@ async function scrollToBottom() {
 <template>
   <ContentWrap>
     <Spin :spinning="loading">
-      <div class="msg-div" ref="msgDivRef">
+      <div
+        class="ml-[10px] mr-[10px] h-[50vh] overflow-auto bg-[#eaeaea]"
+        ref="msgDivRef"
+      >
         <!-- 加载更多 -->
         <div v-if="!loading">
-          <div class="empty-block" v-if="hasMore" @click="loadMore">
-            <span class="empty-text">点击加载更多</span>
+          <div
+            class="cursor-pointer py-5 text-center"
+            v-if="hasMore"
+            @click="loadMore"
+          >
+            <span class="text-[#999]">点击加载更多</span>
           </div>
-          <div class="empty-block" v-if="!hasMore">
-            <span class="empty-text">没有更多了</span>
+          <div class="py-5 text-center" v-if="!hasMore">
+            <span class="text-[#999]">没有更多了</span>
           </div>
         </div>
 
@@ -185,9 +192,9 @@ async function scrollToBottom() {
     </Spin>
 
     <Spin :spinning="sendLoading">
-      <div class="msg-send">
+      <div class="p-[10px]">
         <WxReplySelect ref="replySelectRef" v-model="reply" />
-        <Button type="primary" class="send-but" @click="sendMsg">
+        <Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
           发送(S)
         </Button>
       </div>
@@ -195,32 +202,4 @@ async function scrollToBottom() {
   </ContentWrap>
 </template>
 
-<style lang="scss" scoped>
-.msg-div {
-  height: 50vh;
-  margin-right: 10px;
-  margin-left: 10px;
-  overflow: auto;
-  background-color: #eaeaea;
-}
-
-.msg-send {
-  padding: 10px;
-}
-
-.send-but {
-  float: right;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-.empty-block {
-  padding: 20px;
-  text-align: center;
-  cursor: pointer;
-}
-
-.empty-text {
-  color: #999;
-}
-</style>
+<style lang="scss" scoped></style>