fix: mp

apps/web-antd/src/views/mp/autoReply/index.vue

@@ -3,19 +3,17 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { computed, nextTick, onMounted, ref } from 'vue';
 
-import {
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
-  confirm,
-  ContentWrap,
-  DocAlert,
-  Page,
-  useVbenModal,
-} from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import { message, Row, Tabs } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import {
+  deleteAutoReply,
+  getAutoReply,
+  getAutoReplyPage,
+} from '#/api/mp/autoReply';
 import { $t } from '#/locales';
 
 import ReplyContentCell from './components/ReplyTable.vue';
@@ -25,10 +23,17 @@ import Form from './modules/form.vue';
 
 defineOptions({ name: 'MpAutoReply' });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query().then(() => {
+    updateTableDataLength();
+  });
+}
+
 const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
 
 /** 切换回复类型 */
-async function onTabChange(tabName: string) {
+async function onTabChange(tabName: any) {
   msgType.value = tabName;
   await nextTick();
   // 更新 columns
@@ -58,7 +63,7 @@ async function handleCreate() {
 
 /** 修改按钮操作 */
 async function handleEdit(row: any) {
-  const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
+  const data = (await getAutoReply(row.id)) as any;
   formModalApi
     .setData({
       isCreating: false,
@@ -76,7 +81,7 @@ async function handleDelete(row: any) {
     duration: 0,
   });
   try {
-    await MpAutoReplyApi.deleteAutoReply(row.id);
+    await deleteAutoReply(row.id);
     message.success('删除成功');
     await gridApi.query();
     // 查询完成后更新数据长度
@@ -103,7 +108,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await MpAutoReplyApi.getAutoReplyPage({
+          return await getAutoReplyPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             type: Number(msgType.value) as MsgType,
@@ -173,89 +178,79 @@ onMounted(async () => {
   <Page auto-content-height>
     <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
 
-    <!-- tab 切换 -->
+    <FormModal @success="handleRefresh" />
-    <!-- TODO @hw：貌似 tabs 里面套 table 的样式在 vben 里有点丑，要不我们按照 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/trade/afterSale/index.vue：1）第一层是公众号的选择；2）第二层是 tab；3）第三层是 table -->
+
-    <ContentWrap>
+    <Grid>
-      <Tabs
+      <template #toolbar-actions>
-        v-model:active-key="msgType"
+        <!-- tab 切换 -->
-        @change="(activeKey) => onTabChange(activeKey as string)"
+        <Tabs v-model:active-key="msgType" class="w-full" @change="onTabChange">
-      >
+          <!-- tab 项 -->
-        <!-- tab 项 -->
+          <Tabs.TabPane :key="String(MsgType.Follow)">
-        <Tabs.TabPane :key="String(MsgType.Follow)">
+            <template #tab>
-          <template #tab>
+              <Row align="middle">
-            <Row align="middle">
+                <IconifyIcon icon="lucide:star" class="mr-2px" /> 关注时回复
-              <IconifyIcon icon="ep:star" class="mr-2px" /> 关注时回复
+              </Row>
-            </Row>
+            </template>
-          </template>
+          </Tabs.TabPane>
-        </Tabs.TabPane>
+          <Tabs.TabPane :key="String(MsgType.Message)">
-        <Tabs.TabPane :key="String(MsgType.Message)">
+            <template #tab>
-          <template #tab>
+              <Row align="middle">
-            <Row align="middle">
+                <IconifyIcon icon="lucide:message-circle" class="mr-2px" />
-              <IconifyIcon icon="ep:chat-line-round" class="mr-2px" /> 消息回复
+                消息回复
-            </Row>
+              </Row>
-          </template>
+            </template>
-        </Tabs.TabPane>
+          </Tabs.TabPane>
-        <Tabs.TabPane :key="String(MsgType.Keyword)">
+          <Tabs.TabPane :key="String(MsgType.Keyword)">
-          <template #tab>
+            <template #tab>
-            <Row align="middle">
+              <Row align="middle">
-              <IconifyIcon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
+                <IconifyIcon icon="lucide:newspaper" class="mr-2px" />
-            </Row>
+                关键词回复
-          </template>
+              </Row>
-        </Tabs.TabPane>
+            </template>
-      </Tabs>
+          </Tabs.TabPane>
-      <!-- 列表 -->
+        </Tabs>
-      <FormModal
+      </template>
-        @success="
+      <template #toolbar-tools>
-          () => {
+        <TableAction
-            gridApi.query().then(() => {
+          v-if="showCreateButton"
-              updateTableDataLength();
+          :actions="[
-            });
+            {
-          }
+              label: $t('ui.actionTitle.create', ['自动回复']),
-        "
+              type: 'primary',
-      />
+              icon: ACTION_ICON.ADD,
-      <Grid table-title="自动回复列表">
+              auth: ['mp:auto-reply:create'],
-        <template #toolbar-tools>
+              onClick: handleCreate,
-          <TableAction
+            },
-            v-if="showCreateButton"
+          ]"
-            :actions="[
+        />
-              {
+      </template>
-                label: $t('ui.actionTitle.create', ['自动回复']),
+      <template #replyContent="{ row }">
-                type: 'primary',
+        <ReplyContentCell :row="row" />
-                icon: ACTION_ICON.ADD,
+      </template>
-                auth: ['mp:auto-reply:create'],
+      <template #actions="{ row }">
-                onClick: handleCreate,
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:auto-reply:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:auto-reply:delete'],
+              popConfirm: {
+                title: '是否确认删除此数据?',
+                confirm: handleDelete.bind(null, row),
               },
-            ]"
+            },
-          />
+          ]"
-        </template>
+        />
-        <template #replyContent="{ row }">
+      </template>
-          <ReplyContentCell :row="row" />
+    </Grid>
-        </template>
-        <template #actions="{ row }">
-          <TableAction
-            :actions="[
-              {
-                label: $t('common.edit'),
-                type: 'link',
-                icon: ACTION_ICON.EDIT,
-                auth: ['mp:auto-reply:update'],
-                onClick: handleEdit.bind(null, row),
-              },
-              {
-                label: $t('common.delete'),
-                type: 'link',
-                danger: true,
-                icon: ACTION_ICON.DELETE,
-                auth: ['mp:auto-reply:delete'],
-                popConfirm: {
-                  title: '是否确认删除此数据?',
-                  confirm: handleDelete.bind(null, row),
-                },
-              },
-            ]"
-          />
-        </template>
-      </Grid>
-    </ContentWrap>
   </Page>
 </template>

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.value.id = first.id;
-    account.name = first.name;
+    account.value.name = first.name;
-    emit('change', account.id, account.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;
+    account.value.name = found.name;
-    emit('change', account.id, account.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="mp-comment"
-      :class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }"
+      :class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
     >
       <div class="avatar-div">
-        <img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
+        <img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
-        <div class="avue-comment__author">
+        <div class="mp-comment__author">
           {{ getNickname(item.sendFrom) }}
         </div>
       </div>
-      <div class="avue-comment__main">
+      <div class="mp-comment__main">
-        <div class="avue-comment__header">
+        <div class="mp-comment__header">
-          <div class="avue-comment__create_time">
+          <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('./comment.scss');
-@import url('../card.scss');
+@import url('./card.scss');
 
 .avatar-div {
   width: 80px;

apps/web-antd/src/views/mp/draft/index.vue

@@ -11,8 +11,8 @@ import { $t } from '@vben/locales';
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MpDraftApi from '#/api/mp/draft';
+import { deleteDraft, getDraftPage } from '#/api/mp/draft';
-import * as MpFreePublishApi from '#/api/mp/freePublish';
+import { submitFreePublish } from '#/api/mp/freePublish';
 import { createEmptyNewsItem } from '#/views/mp/draft/components/types';
 
 import DraftTableCell from './components/draft-table.vue';
@@ -21,6 +21,11 @@ import Form from './modules/form.vue';
 
 defineOptions({ name: 'MpDraft' });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
@@ -43,7 +48,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           if (formValues?.accountId) {
             accountId.value = formValues.accountId;
           }
-          const drafts = await MpDraftApi.getDraftPage({
+          const drafts = await getDraftPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
@@ -190,7 +195,7 @@ async function handlePublish(row: Article) {
   });
   // TODO @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
   try {
-    await MpFreePublishApi.submitFreePublish(accountId, row.mediaId);
+    await submitFreePublish(accountId, row.mediaId);
     message.success('发布成功');
     await gridApi.query();
   } finally {
@@ -212,7 +217,7 @@ async function handleDelete(row: Article) {
     duration: 0,
   });
   try {
-    await MpDraftApi.deleteDraft(accountId, row.mediaId);
+    await deleteDraft(accountId, row.mediaId);
     message.success('删除成功');
     await gridApi.query();
   } finally {
@@ -237,16 +242,11 @@ onMounted(async () => {
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+    <template #doc>
+      <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+    </template>
 
-    <!-- TODO @hw：参考别的模块 @success 调用 refresh 方法； -->
+    <FormModal @success="handleRefresh" />
-    <FormModal
-      @success="
-        () => {
-          gridApi.query();
-        }
-      "
-    />
 
     <Grid table-title="草稿列表">
       <template #toolbar-tools>

apps/web-antd/src/views/mp/material/index.vue

@@ -98,11 +98,7 @@ async function handleDelete(id: number) {
 </script>
 
 <template>
-  <Page
+  <Page auto-content-height>
-    description="公众号素材"
-    doc-link="https://doc.iocoder.cn/mp/material/"
-    title="公众号素材"
-  >
     <!-- 搜索工作栏 -->
     <Card class="mb-4" :bordered="false">
       <Form :model="queryParams" layout="inline">

apps/web-antd/src/views/mp/menu/index.vue

@@ -249,19 +249,15 @@ function menuToBackend(menu: any) {
       <DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
     </template>
 
-    <!-- 搜索工作栏 -->
-    <!-- TODO @hw：是不是少了一个框子哈？ -->
-    <!-- <ContentWrap> -->
-    <Form layout="inline" class="-mb-15px w-240px">
-      <Form.Item label="公众号" prop="accountId" class="w-240px">
-        <WxAccountSelect @change="onAccountChanged" />
-      </Form.Item>
-    </Form>
-    <!-- </ContentWrap> -->
-
-    <!-- TODO @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
     <ContentWrap>
-      <div class="clearfix public-account-management" v-loading="loading">
+      <!-- 搜索工作栏 -->
+      <Form class="mb-10 w-full">
+        <Form.Item label="公众号" prop="accountId" class="w-60">
+          <WxAccountSelect @change="onAccountChanged" />
+        </Form.Item>
+      </Form>
+
+      <div class="clearfix public-account-management mt-10" v-loading="loading">
         <!--左边配置菜单-->
         <div class="left">
           <div class="weixin-hd">

apps/web-antd/src/views/mp/message/index.vue

@@ -14,6 +14,7 @@ import {
   FormItem,
   Input,
   Modal,
+  Pagination,
   Select,
 } from 'ant-design-vue';
 
@@ -166,7 +167,7 @@ function showTotal(total: number) {
     <div class="flex-1 rounded-lg bg-white p-4">
       <MessageTable :list="list" :loading="loading" @send="handleSend" />
       <div v-show="total > 0" class="mt-4 flex justify-end">
-        <a-pagination
+        <Pagination
           v-model:current="queryParams.pageNo"
           v-model:page-size="queryParams.pageSize"
           :total="total"

apps/web-ele/src/views/mp/modules/wx-material-select/main.vue

@@ -2,7 +2,6 @@
   - Copyright (C) 2018-2019
   - All rights reserved, Designed By www.joolun.com
   芋道源码：
-  ① 移除 avue 组件，使用 ElementUI 原生组件
 -->
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';

apps/web-ele/src/views/mp/modules/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-ele/src/views/mp/modules/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-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue

@@ -55,7 +55,7 @@ const getNickname = (sendFrom: SendFromType) =>
         <div
           class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
         >
-          <div class="avue-comment__create_time">
+          <div class="mp-comment__create_time">
             {{ formatDateTime(item.createTime) }}
           </div>
         </div>

apps/web-ele/src/views/mp/modules/wx-music/main.vue

@@ -44,18 +44,15 @@ defineExpose({
       target="_blank"
       :href="hqMusicUrl ? hqMusicUrl : musicUrl"
     >
-      <div
+      <div class="mp-card__body bg-background rounded-sm p-2.5">
-        class="avue-card__body"
+        <div class="mp-card__avatar">
-        style="padding: 10px; background-color: #fff; border-radius: 5px"
-      >
-        <div class="avue-card__avatar">
           <img :src="thumbMediaUrl" alt="" />
         </div>
-        <div class="avue-card__detail">
+        <div class="mp-card__detail">
-          <div class="avue-card__title" style="margin-bottom: unset">
+          <div class="mp-card__title" style="margin-bottom: unset">
             {{ title }}
           </div>
-          <div class="avue-card__info" style="height: unset">
+          <div class="mp-card__info" style="height: unset">
             {{ description }}
           </div>
         </div>