fix: mp

apps/web-antd/src/views/mp/components/wx-account-select/account-select.vue

@@ -3,7 +3,7 @@ import type { SelectValue } from 'ant-design-vue/es/select';
 
 import type { MpAccountApi } from '#/api/mp/account';
 
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { message, Select } from 'ant-design-vue';
@@ -18,7 +18,7 @@ const emit = defineEmits<{
 
 const { push } = useRouter();
 
-const account: MpAccountApi.Account = reactive({
+const account = ref<MpAccountApi.Account>({
   id: -1,
   name: '',
 }); // 当前选中的公众号
@@ -36,9 +36,9 @@ async function handleQuery() {
   // 默认选中第一个，如无数据则不执行
   const first = accountList.value[0];
   if (first) {
-    account.id = first.id;
-    account.name = first.name;
-    emit('change', account.id, account.name);
+    account.value.id = first.id;
+    account.value.name = first.name;
+    emit('change', account.value.id, account.value.name);
   }
 }
 
@@ -46,8 +46,8 @@ async function handleQuery() {
 function onChanged(id: SelectValue) {
   const found = accountList.value.find((v) => v.id === id);
   if (found) {
-    account.name = found.name;
-    emit('change', account.id, account.name);
+    account.value.name = found.name;
+    emit('change', account.value.id, account.value.name);
   }
 }
 

apps/web-antd/src/views/mp/components/wx-msg/card.scss

@@ -1,4 +1,4 @@
-.avue-card {
+.mp-card {
   &__item {
     box-sizing: border-box;
     height: 200px;
@@ -99,18 +99,18 @@
 }
 
 /** joolun 额外加的 */
-.avue-comment__main {
+.mp-comment__main {
   flex: unset !important;
   margin: 0 8px !important;
   border-radius: 5px !important;
 }
 
-.avue-comment__header {
+.mp-comment__header {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 }
 
-.avue-comment__body {
+.mp-comment__body {
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
 }

apps/web-antd/src/views/mp/components/wx-msg/comment.scss

@@ -1,5 +1,5 @@
 /* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
-.avue-comment {
+.mp-comment {
   display: flex;
   align-items: flex-start;
   margin-bottom: 30px;
@@ -7,7 +7,7 @@
   &--reverse {
     flex-direction: row-reverse;
 
-    .avue-comment__main {
+    .mp-comment__main {
       &::before,
       &::after {
         right: -8px;

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

@@ -32,23 +32,23 @@ function getNickname(sendFrom: number) {
 <template>
   <div class="execution" v-for="item in props.list" :key="item.id">
     <div
-      class="avue-comment"
-      :class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }"
+      class="mp-comment"
+      :class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
     >
       <div class="avatar-div">
-        <img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
-        <div class="avue-comment__author">
+        <img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
+        <div class="mp-comment__author">
           {{ getNickname(item.sendFrom) }}
         </div>
       </div>
-      <div class="avue-comment__main">
-        <div class="avue-comment__header">
-          <div class="avue-comment__create_time">
+      <div class="mp-comment__main">
+        <div class="mp-comment__header">
+          <div class="mp-comment__create_time">
             {{ formatDateTime(item.createTime) }}
           </div>
         </div>
         <div
-          class="avue-comment__body"
+          class="mp-comment__body"
           :style="
             item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
           "
@@ -65,8 +65,8 @@ function getNickname(sendFrom: number) {
 
 /** TODO @dylan：看看有没适合 tindwind 的哈。 */
 
-@import url('../comment.scss');
-@import url('../card.scss');
+@import url('./comment.scss');
+@import url('./card.scss');
 
 .avatar-div {
   width: 80px;