fix: todo修复

2025-11-21 18:19:42 +08:00
parent 0251dc2f3b
commit 8d7d3d5fe1
86 changed files with 963 additions and 1195 deletions
--- a/apps/web-antd/src/views/mp/draft/data.ts
+++ b/apps/web-antd/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',
-      title: '图文内容',
-      minWidth: 300,
-      slots: { default: 'content' },
+      field: 'cover',
+      title: '图片',
+      width: 360,
+      slots: { default: 'cover' },
+    },
+    {
+      field: 'title',
+      title: '标题',
+      slots: { default: 'title' },
+    },
+    {
+      field: 'updateTime',
+      title: '修改时间',
+      formatter: ({ row }) => {
+        return formatDateTime(row.updateTime * 1000);
+      },
    },
    {
      title: '操作',
--- a/apps/web-antd/src/views/mp/draft/index.vue
+++ b/apps/web-antd/src/views/mp/draft/index.vue
@@ -9,11 +9,11 @@ import { message } 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';

 import { useGridColumns, useGridFormSchema } from './data';
-import DraftTableCell from './modules/draft-table.vue';
 import Form from './modules/form.vue';

 defineOptions({ name: 'MpDraft' });
@@ -128,6 +128,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
+          // 调试用：跳过请求，直接返回模拟数据
          const drafts = await getDraftPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
@@ -142,9 +143,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
              });
            }
          });
+
          return {
-            list: drafts.list as unknown as MpDraftApi.DraftArticle[],
-            total: drafts.total,
+            list: drafts.list,
+            total: drafts.total, // 模拟总数
          };
        },
      },
@@ -187,10 +189,40 @@ const [Grid, gridApi] = useVbenVxeGrid({
          ]"
        />
      </template>
-      <!-- TODO @hw：按照微信群沟通的，换下卡片的样式。 -->
-      <template #content="{ row }">
-        <DraftTableCell :row="row" />
-        <!-- TODO @hw：增加一列，更新时间。 -->
+      <template #cover="{ row }">
+        <div
+          v-if="row.content?.newsItem && row.content.newsItem.length > 0"
+          class="flex flex-col items-center justify-center gap-1"
+        >
+          <a
+            v-for="(item, index) in row.content.newsItem"
+            :key="index"
+            :href="(item as any).url"
+            target="_blank"
+          >
+            <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>
+      <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"
+          >
+            {{ item.title }}
+          </div>
+        </div>
+        <span v-else class="text-gray-400">-</span>
      </template>
      <template #actions="{ row }">
        <TableAction
--- a/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
@@ -11,6 +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';

 const props = defineProps<{
  isFirst: boolean;
@@ -133,14 +134,13 @@ function onUploadError(err: Error) {
          支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
        </div>
      </div>
-      <!-- TODO @hw：这个貌似不行；ele 我试了下，可以的 -->
      <Modal
        v-model:open="dialogVisible"
        title="图片选择"
        width="65%"
        :footer="null"
      >
-        <MaterialSelect
+        <WxMaterialSelect
          type="image"
          :account-id="accountId!"
          @select-material="onMaterialSelected"
--- a/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import type { MpDraftApi } from '#/api/mp/draft';
-
-import { WxNews } from '#/views/mp/components';
-
-// TODO @hw：按照微信里说的，感觉这个可以干掉。少点组件哈。= = mp 模块，小组件可太多了。。。
-defineOptions({ name: 'DraftTableCell' });
-
-const props = defineProps<{
-  row: MpDraftApi.DraftArticle;
-}>();
-</script>
-
-<template>
-  <div class="p-2.5">
-    <div v-if="props.row.content && props.row.content.newsItem">
-      <WxNews :articles="props.row.content.newsItem" />
-    </div>
-  </div>
-</template>
--- a/apps/web-antd/src/views/mp/draft/modules/news-form.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
@@ -88,23 +88,25 @@ function plusNews() {
      <div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
        <div v-for="(news, index) in newsList" :key="index">
          <div
-            class="group relative mx-auto h-[120px] w-full cursor-pointer bg-white"
+            class="group relative mx-auto mb-[10px] w-full cursor-pointer border-[2px] bg-white"
            v-if="index === 0"
-            :class="{
-              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
-            }"
+            :class="
+              activeNewsIndex === index
+                ? 'border-green-500'
+                : 'border-transparent'
+            "
            @click="activeNewsIndex = index"
          >
-            <div class="relative h-[120px] w-full bg-[#acadae]">
+            <div class="relative w-full bg-[#acadae]">
              <img class="h-full w-full" :src="news.thumbUrl" />
              <div
-                class="absolute bottom-0 left-0 inline-block h-[25px] w-[98%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-[15px] text-white opacity-65"
+                class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
              >
                {{ news.title }}
              </div>
            </div>
            <div
-              class="relative -bottom-[25px] hidden text-center group-hover:block"
+              class="relative flex justify-center gap-[10px] py-[5px] text-center"
              v-if="newsList.length > 1"
            >
              <Button
@@ -127,25 +129,28 @@ function plusNews() {
              </Button>
            </div>
          </div>
-          <!-- TODO @hw：1）每个文章的选中框太粗了；2）没完全覆盖住文章；；；最好首个文章，和第个文章的情况，都看看 -->
          <div
-            class="group relative mx-auto w-full cursor-pointer border-t border-[#eaeaea] bg-white py-[5px]"
+            class="group relative mx-auto mb-[10px] cursor-pointer border-[2px] bg-white"
            v-if="index > 0"
-            :class="{
-              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
-            }"
+            :class="
+              activeNewsIndex === index
+                ? 'border-green-500'
+                : 'border-transparent'
+            "
            @click="activeNewsIndex = index"
          >
-            <div class="relative -ml-[3px]">
-              <div class="inline-block w-[70%] text-xs">{{ news.title }}</div>
-              <div class="inline-block w-[25%] bg-[#acadae]">
-                <img class="h-full w-full" :src="news.thumbUrl" />
+            <div class="relative">
+              <div class="bg-[#acadae]">
+                <img class="block h-full w-full" :src="news.thumbUrl" />
+                <div
+                  class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
+                >
+                  {{ news.title }}
+                </div>
              </div>
            </div>
-            <!-- TODO @hw：这里的按钮，交互不太对。应该在每个卡片的里面；或者类似公众号现在的交互，放到右侧；。。。复现本周：如果有 2 个文章的时候 -->
-            <!-- TODO @hw：当有 2 个文章的时候，挪到第二个文章的时候，卡片会变大。期望：不变大 -->
            <div
-              class="relative -bottom-[25px] hidden text-center group-hover:block"
+              class="relative flex justify-center gap-[10px] py-[5px] text-center"
            >
              <Button
                v-if="newsList.length > index + 1"