feat：【antd/ele】【mp】图文草稿箱的 review

apps/web-antd/src/api/mp/account/index.ts

@@ -68,5 +68,5 @@ export function generateAccountQrCode(id: number) {
 
 /** 清空公众号账号 API 配额 */
 export function clearAccountQuota(id: number) {
-  return requestClient.post(`/mp/account/clear-quota?id=${id}`);
+  return requestClient.put(`/mp/account/clear-quota?id=${id}`);
 }

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

@@ -22,6 +22,7 @@ defineExpose({
   <div class="news-home">
     <div v-for="(article, index) in articles" :key="index" class="news-div">
       <!-- 头条 -->
+      <!-- TODO @hw：第一篇文章（头条）图片是铺满，不过要限制高度；第二篇文章开始（次条），图片是在右侧，也是需要限制宽高 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
         <div class="news-main">
           <div class="news-content">

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

@@ -5,11 +5,10 @@ import type { MpDraftApi } from '#/api/mp/draft';
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { message } from 'ant-design-vue';
+import { Image, message, Typography } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { createEmptyNewsItem, deleteDraft, getDraftPage } from '#/api/mp/draft';
-// import { getDraftPage } from '#/api/mp/draft'; // 调试时注释掉
 import { submitFreePublish } from '#/api/mp/freePublish';
 import { WxAccountSelect } from '#/views/mp/components';
 
@@ -72,7 +71,6 @@ async function handleDelete(row: MpDraftApi.DraftArticle) {
     message.warning('请先选择公众号');
     return;
   }
-  await confirm('此操作将永久删除该草稿, 是否继续?');
   const hideLoading = message.loading({
     content: '删除中...',
     duration: 0,
@@ -128,7 +126,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          // 调试用：跳过请求，直接返回模拟数据
           const drafts = await getDraftPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
@@ -143,10 +140,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
               });
             }
           });
-
           return {
             list: drafts.list,
-            total: drafts.total, // 模拟总数
+            total: drafts.total,
           };
         },
       },
@@ -194,18 +190,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
           v-if="row.content?.newsItem && row.content.newsItem.length > 0"
           class="flex flex-col items-center justify-center gap-1"
         >
-          <a
+          <Image
             v-for="(item, index) in row.content.newsItem"
             :key="index"
-            :href="(item as any).url"
+            :src="item.picUrl || item.thumbUrl"
-            target="_blank"
+            class="h-36 !w-[300px] rounded object-cover"
-          >
+            :alt="`文章 ${index + 1} 封面图`"
-            <img
+          />
-              :src="item.picUrl || item.thumbUrl"
-              class="h-36 w-[50px] rounded object-cover"
-              :alt="`文章${index + 1}封面图`"
-            />
-          </a>
         </div>
         <span v-else class="text-gray-400">-</span>
       </template>
@@ -219,7 +210,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
             :key="index"
             class="flex h-36 items-center justify-center"
           >
-            {{ item.title }}
+            <Typography.Link :href="(item as any).url" target="_blank">
+              {{ item.title }}
+            </Typography.Link>
           </div>
         </div>
         <span v-else class="text-gray-400">-</span>
@@ -266,10 +259,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       .vxe-cell {
         height: auto !important;
         padding: 0;
-
-        img {
-          width: 300px !important;
-        }
       }
     }
   }

apps/web-antd/src/views/mp/draft/modules/cover-select.vue

@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
 import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import WxMaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
+import { WxMaterialSelect } from '#/views/mp/components/';
 
 const props = defineProps<{
   isFirst: boolean;
@@ -33,9 +33,8 @@ const newsItem = computed<MpDraftApi.NewsItem>({
   },
 });
 
-const dialogVisible = ref(false);
-
 const accountId = inject<number>('accountId');
+const dialogVisible = ref(false);
 
 const fileList = ref<UploadFile[]>([]);
 interface UploadData {

apps/web-ele/src/api/mp/account/index.ts

@@ -68,5 +68,5 @@ export function generateAccountQrCode(id: number) {
 
 /** 清空公众号账号 API 配额 */
 export function clearAccountQuota(id: number) {
-  return requestClient.post(`/mp/account/clear-quota?id=${id}`);
+  return requestClient.put(`/mp/account/clear-quota?id=${id}`);
 }

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

@@ -70,8 +70,3 @@ onMounted(handleQuery);
     />
   </ElSelect>
 </template>
-<style lang="scss" scoped>
-:deep(.el-select__wrapper) {
-  width: 240px !important;
-}
-</style>

apps/web-ele/src/views/mp/components/wx-location/wx-location.vue

@@ -1,5 +1,5 @@
 <!--
-  【微信消息 - 定位】TODO @Dhb52 目前未启用；；；；@hw：看看目前是不是没用起来哈？
+  【微信消息 - 定位】TODO @Dhb52 目前未启用；；；；@dylan：看看目前是不是没用起来哈？
 -->
 <script lang="ts" setup>
 import type { WxLocationProps } from './types';

apps/web-ele/src/views/mp/components/wx-news/wx-news.vue

@@ -1,10 +1,3 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  【微信消息 - 图文】
-  芋道源码：
-  ① 代码优化，补充注释，提升阅读性
--->
 <script lang="ts" setup>
 import { ElImage } from 'element-plus';
 
@@ -29,6 +22,7 @@ defineExpose({
   <div class="news-home">
     <div v-for="(article, index) in articles" :key="index" class="news-div">
       <!-- 头条 -->
+      <!-- TODO @hw：第一篇文章（头条）图片是铺满，不过要限制高度；第二篇文章开始（次条），图片是在右侧，也是需要限制宽高 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
         <div class="news-main">
           <div class="news-content flex items-center justify-center">

apps/web-ele/src/views/mp/draft/data.ts

@@ -1,14 +1,28 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { formatDateTime } from '@vben/utils';
+
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
-      field: 'content',
+      field: 'cover',
-      title: '图文内容',
+      title: '图片',
-      minWidth: 300,
+      width: 360,
-      slots: { default: 'content' },
+      slots: { default: 'cover' },
+    },
+    {
+      field: 'title',
+      title: '标题',
+      slots: { default: 'title' },
+    },
+    {
+      field: 'updateTime',
+      title: '修改时间',
+      formatter: ({ row }) => {
+        return formatDateTime(row.updateTime * 1000);
+      },
     },
     {
       title: '操作',

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

@@ -2,18 +2,17 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpDraftApi } from '#/api/mp/draft';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
-import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
+import { ElImage, ElLink, ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteDraft, getDraftPage } from '#/api/mp/draft';
+import { createEmptyNewsItem, deleteDraft, getDraftPage } from '#/api/mp/draft';
 import { submitFreePublish } from '#/api/mp/freePublish';
 import { WxAccountSelect } from '#/views/mp/components';
-import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import DraftTableCell from './modules/draft-table.vue';
 import Form from './modules/form.vue';
 
 defineOptions({ name: 'MpDraft' });
@@ -72,7 +71,6 @@ async function handleDelete(row: MpDraftApi.DraftArticle) {
     ElMessage.warning('请先选择公众号');
     return;
   }
-  await ElMessageBox.confirm('此操作将永久删除该草稿, 是否继续?');
   const hideLoading = ElLoading.service({
     text: '删除中...',
   });
@@ -93,7 +91,7 @@ async function handlePublish(row: MpDraftApi.DraftArticle) {
     ElMessage.warning('请先选择公众号');
     return;
   }
-  await ElMessageBox.confirm(
+  await confirm(
     '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。' +
       '已发布内容不会推送给用户，也不会展示在公众号主页中。 ' +
       '发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。',
@@ -126,7 +124,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          // 调试用：跳过请求，直接返回模拟数据
           const drafts = await getDraftPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
@@ -141,13 +138,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
               });
             }
           });
-
-          // 模拟数据
-          // const mockList = [
-
           return {
             list: drafts.list,
-            total: drafts.total, // 模拟总数
+            total: drafts.total,
           };
         },
       },
@@ -190,15 +183,45 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <template #content="{ row }">
+      <template #cover="{ row }">
-        <DraftTableCell :row="row" />
+        <div
+          v-if="row.content?.newsItem && row.content.newsItem.length > 0"
+          class="flex flex-col items-center justify-center gap-1"
+        >
+          <ElImage
+            v-for="(item, index) in row.content.newsItem"
+            :key="index"
+            :src="item.picUrl || item.thumbUrl"
+            :preview-src-list="[item.picUrl || item.thumbUrl]"
+            class="h-36 !w-[300px] rounded object-cover"
+            :alt="`文章 ${index + 1} 封面图`"
+          />
+        </div>
+        <span v-else class="text-gray-400">-</span>
+      </template>
+      <template #title="{ row }">
+        <div
+          v-if="row.content?.newsItem && row.content.newsItem.length > 0"
+          class="space-y-1"
+        >
+          <div
+            v-for="(item, index) in row.content.newsItem"
+            :key="index"
+            class="flex h-36 items-center justify-center"
+          >
+            <ElLink :href="(item as any).url" target="_blank">
+              {{ item.title }}
+            </ElLink>
+          </div>
+        </div>
+        <span v-else class="text-gray-400">-</span>
       </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
             {
               label: '发布',
-              type: 'success',
+              type: 'primary',
               link: true,
               icon: ACTION_ICON.UPLOAD,
               auth: ['mp:free-publish:submit'],
@@ -237,10 +260,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       .vxe-cell {
         height: auto !important;
         padding: 0;
-
-        img {
-          width: 300px !important;
-        }
       }
     }
   }

apps/web-ele/src/views/mp/draft/modules/cover-select.vue

@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
 import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
+import { WxMaterialSelect } from '#/views/mp/components/';
 
 const props = defineProps<{
   isFirst: boolean;
@@ -50,7 +50,7 @@ function handleOpenDialog() {
   dialogVisible.value = true;
 }
 
-/** 素材选择完成事件*/
+/** 素材选择完成事件 */
 function onMaterialSelected(item: any) {
   dialogVisible.value = false;
   newsItem.value.thumbMediaId = item.mediaId;
@@ -68,12 +68,12 @@ function onUploadSuccess(res: any) {
 
   // 重置上传文件的表单
   fileList.value = [];
-
   // 设置草稿的封面字段
   newsItem.value.thumbMediaId = res.data.mediaId;
   newsItem.value.thumbUrl = res.data.url;
 }
 
+/** 上传失败处理 */
 function onUploadError(err: Error) {
   ElMessage.error(`上传失败: ${err.message}`);
 }
@@ -134,7 +134,7 @@ function onUploadError(err: Error) {
         append-to-body
         destroy-on-close
       >
-        <MaterialSelect
+        <WxMaterialSelect
           type="image"
           :account-id="accountId!"
           @select-material="onMaterialSelected"

apps/web-ele/src/views/mp/draft/modules/draft-table.vue

@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import type { Article } from './types';
-
-import News from '#/views/mp/components/wx-news/wx-news.vue';
-
-// TODO @hw：按照微信里说的，感觉这个可以干掉。少点组件哈。= = mp 模块，小组件可太多了。。。
-defineOptions({ name: 'DraftTableCell' });
-
-const props = defineProps<{
-  row: Article;
-}>();
-</script>
-
-<template>
-  <div class="p-2.5">
-    <div v-if="props.row.content && props.row.content.newsItem">
-      <News :articles="props.row.content.newsItem" />
-    </div>
-  </div>
-</template>

apps/web-ele/src/views/mp/draft/modules/news-form.vue

@@ -32,6 +32,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: NewsItem[]): void;
 }>();
 
+// TODO @hw: 对齐 antd，应该是 MpDraftApi.NewsItem 这种哈。
 const newsList = computed<NewsItem[]>({
   get() {
     return props.modelValue === null