fix: ele改造

apps/web-antd/.env.development

@@ -4,9 +4,9 @@ VITE_PORT=5666
 VITE_BASE=/
 
 # 请求路径
-VITE_BASE_URL=http://127.0.0.1:48080
+VITE_BASE_URL=http://47.103.66.220:48080
 # 接口地址
-VITE_GLOB_API_URL=/admin-api
+VITE_GLOB_API_URL=http://47.103.66.220:48080/admin-api
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
 # 是否打开 devtools，true 为打开，false 为关闭

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

@@ -28,7 +28,7 @@ defineExpose({
             <Image
               :src="article.picUrl"
               :preview="false"
-              class="material-img"
+              class="material-img flex items-center justify-center"
             />
             <div class="news-content-title">
               <span>{{ article.title }}</span>

apps/web-ele/.env.development

@@ -4,9 +4,11 @@ VITE_PORT=5777
 VITE_BASE=/
 
 # 请求路径
-VITE_BASE_URL=http://127.0.0.1:48080
+VITE_BASE_URL=http://47.103.66.220:48080
+# VITE_BASE_URL=http://192.168.1.49:48080
 # 接口地址
-VITE_GLOB_API_URL=/admin-api
+VITE_GLOB_API_URL=http://47.103.66.220:48080/admin-api
+# VITE_GLOB_API_URL=http://192.168.1.49:48080/admin-api
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
 # 是否打开 devtools，true 为打开，false 为关闭

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

@@ -50,13 +50,9 @@ export function updateDraft(
   mediaId: string,
   articles: MpDraftApi.Article[],
 ) {
-  return requestClient.put(
+  return requestClient.put('/mp/draft/update', articles, {
-    '/mp/draft/update',
+    params: { accountId, mediaId },
-    { articles },
+  });
-    {
-      params: { accountId, mediaId },
-    },
-  );
 }
 
 /** 删除草稿 */

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

@@ -6,6 +6,8 @@
   ① 代码优化，补充注释，提升阅读性
 -->
 <script lang="ts" setup>
+import { ElImage } from 'element-plus';
+
 defineOptions({ name: 'WxNews' });
 
 const props = withDefaults(
@@ -28,11 +30,10 @@ defineExpose({
       <!-- 头条 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
         <div class="news-main">
-          <div class="news-content">
+          <div class="news-content flex items-center justify-center">
-            <el-image
+            <ElImage
               :src="article.picUrl || article.thumbUrl"
               class="material-img"
-              style="width: 100%; height: 120px"
             />
             <div class="news-content-title">
               <span>{{ article.title }}</span>
@@ -45,7 +46,7 @@ defineExpose({
         <div class="news-main-item">
           <div class="news-content-item">
             <div class="news-content-item-title">{{ article.title }}</div>
-            <div class="news-content-item-img">
+            <div class="news-content-item-img flex items-center justify-center">
               <img
                 :src="article.picUrl || article.thumbUrl"
                 class="material-img"

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

@@ -1,10 +1,12 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
 
-import { markRaw } from 'vue';
+import { getSimpleAccountList } from '#/api/mp/account';
-
-import AccountSelect from '#/views/mp/components/account-select/account-select.vue';
 
+/** 关联数据 */
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
@@ -14,12 +16,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 300,
       slots: { default: 'content' },
     },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
     {
       title: '操作',
       width: 200,
@@ -35,7 +31,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: markRaw(AccountSelect),
+      component: 'ApiSelect',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
     },
   ];
 }

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

@@ -3,14 +3,12 @@ import type { Article } from './modules/types';
 
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { nextTick, onMounted, provide, ref, watch } from 'vue';
-
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
 
 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 { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
 
@@ -25,6 +23,11 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -37,72 +40,26 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          // 更新 accountId
+          const drafts = await getDraftPage({
-          if (formValues?.accountId) {
-            accountId.value = formValues.accountId;
-          }
-          const drafts = await MpDraftApi.getDraftPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
           });
-          // 处理 API 返回的数据，兼容不同的数据结构
+          // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
-          const formattedList: Article[] = drafts.list.map((draft: any) => {
+          drafts.list.forEach((draft: any) => {
-            // 如果已经是 content.newsItem 格式，直接使用
+            const newsList = draft.content?.newsItem;
-            if (draft.content?.newsItem) {
+            if (newsList) {
-              const newsItem = draft.content.newsItem.map((item: any) => ({
+              newsList.forEach((item: any) => {
-                ...item,
+                item.picUrl = item.thumbUrl || item.picUrl;
-                picUrl: item.thumbUrl || item.picUrl,
+              });
-              }));
-              return {
-                mediaId: draft.mediaId,
-                content: {
-                  newsItem,
-                },
-                updateTime:
-                  draft.updateTime ||
-                  (draft.createTime
-                    ? new Date(draft.createTime).getTime()
-                    : Date.now()),
-              };
             }
-            // 如果是 articles 格式，转换为 content.newsItem 格式
-            if (draft.articles) {
-              const newsItem = draft.articles.map((article: any) => ({
-                ...article,
-                thumbUrl: article.thumbUrl || article.thumbMediaId,
-                picUrl: article.thumbUrl || article.thumbMediaId,
-              }));
-              return {
-                mediaId: draft.mediaId,
-                content: {
-                  newsItem,
-                },
-                updateTime:
-                  draft.updateTime ||
-                  (draft.createTime
-                    ? new Date(draft.createTime).getTime()
-                    : Date.now()),
-              };
-            }
-            // 默认返回空结构
-            return {
-              mediaId: draft.mediaId || '',
-              content: {
-                newsItem: [],
-              },
-              updateTime: draft.updateTime || Date.now(),
-            };
           });
           return {
-            page: {
+            list: drafts.list as unknown as Article[],
-              total: drafts.total,
+            total: drafts.total,
-            },
-            result: formattedList,
           };
         },
       },
-      autoLoad: false,
     },
     rowConfig: {
       keyField: 'mediaId',
@@ -115,21 +72,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<Article>,
 });
 
-// 提供 accountId 给子组件
-const accountId = ref<number>(-1);
-
-// 监听表单提交，更新 accountId
-watch(
-  () => gridApi.formApi?.getLatestSubmissionValues?.()?.accountId,
-  (newAccountId) => {
-    if (newAccountId !== undefined) {
-      accountId.value = newAccountId;
-    }
-  },
-);
-
-provide('accountId', accountId);
-
 /** 新增按钮操作 */
 async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
@@ -162,7 +104,7 @@ async function handleEdit(row: Article) {
       isCreating: false,
       accountId,
       mediaId: row.mediaId,
-      newsList: structuredClone(row.content.newsItem),
+      newsList: row.content.newsItem,
     })
     .open();
 }
@@ -201,7 +143,7 @@ async function handlePublish(row: Article) {
 async function handleDelete(row: Article) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
     ElMessage.warning('请先选择公众号');
     return;
   }
@@ -212,9 +154,9 @@ async function handleDelete(row: Article) {
       text: '删除中...',
     });
     try {
-      await MpDraftApi.deleteDraft(accountId, row.mediaId);
+      await deleteDraft(accountId, row.mediaId);
       ElMessage.success('删除成功');
-      await gridApi.query();
+      handleRefresh();
     } finally {
       loadingInstance.close();
     }
@@ -222,19 +164,6 @@ async function handleDelete(row: Article) {
     //
   }
 }
-
-// 页面挂载后，等待表单初始化完成再加载数据
-onMounted(async () => {
-  await nextTick();
-  if (gridApi.formApi) {
-    const formValues = await gridApi.formApi.getValues();
-    if (formValues.accountId) {
-      accountId.value = formValues.accountId;
-      gridApi.formApi.setLatestSubmissionValues(formValues);
-      await gridApi.query();
-    }
-  }
-});
 </script>
 
 <template>
@@ -243,13 +172,7 @@ onMounted(async () => {
       <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
     </template>
 
-    <FormModal
+    <FormModal @success="handleRefresh" />
-      @success="
-        () => {
-          gridApi.query();
-        }
-      "
-    />
 
     <Grid table-title="草稿列表">
       <template #toolbar-tools>
@@ -310,7 +233,12 @@ onMounted(async () => {
   .vxe-table--body {
     .vxe-body--column {
       .vxe-cell {
+        height: auto !important;
         padding: 0;
+
+        img {
+          width: 300px !important;
+        }
       }
     }
   }

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

@@ -80,20 +80,22 @@ function onUploadError(err: Error) {
 <template>
   <div>
     <p>封面:</p>
-    <div class="thumb-div">
+    <div
+      class="inline-flex w-full flex-col items-center justify-center text-center"
+    >
       <ElImage
         v-if="newsItem.thumbUrl"
-        style="width: 300px; max-height: 300px"
+        class="max-h-[300px] w-[300px]"
         :src="newsItem.thumbUrl"
         fit="contain"
       />
       <IconifyIcon
         v-else
         icon="ep:plus"
-        class="avatar-uploader-icon"
+        class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
-        :class="isFirst ? 'avatar' : 'avatar1'"
+        :class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
       />
-      <div class="thumb-but">
+      <div class="m-1.5">
         <ElUpload
           :action="UPLOAD_URL"
           :headers="HEADERS"
@@ -112,12 +114,12 @@ function onUploadError(err: Error) {
             size="small"
             type="primary"
             @click="showImageDialog = true"
-            style="margin-left: 5px"
+            class="ml-1.5"
           >
             素材库选择
           </ElButton>
           <template #tip>
-            <div class="el-upload__tip">
+            <div class="ml-1.5">
               支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
             </div>
           </template>
@@ -139,43 +141,3 @@ function onUploadError(err: Error) {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.el-upload__tip {
-  margin-left: 5px;
-}
-
-.thumb-div {
-  display: inline-block;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  text-align: center;
-
-  .avatar-uploader-icon {
-    width: 120px;
-    height: 120px;
-    font-size: 28px;
-    line-height: 120px;
-    color: #8c939d;
-    text-align: center;
-    border: 1px solid #d9d9d9;
-  }
-
-  .avatar {
-    width: 230px;
-    height: 120px;
-  }
-
-  .avatar1 {
-    width: 120px;
-    height: 120px;
-  }
-
-  .thumb-but {
-    margin: 5px;
-  }
-}
-</style>

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

@@ -11,15 +11,9 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="draft-content">
+  <div class="p-2.5">
     <div v-if="props.row.content && props.row.content.newsItem">
       <News :articles="props.row.content.newsItem" />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.draft-content {
-  padding: 10px;
-}
-</style>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { NewsItem } from './types';
 
-import { computed, ref } from 'vue';
+import { computed, provide, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
@@ -27,6 +27,11 @@ const getTitle = computed(() => {
   return formData.value?.isCreating ? '新建图文' : '修改图文';
 });
 
+// 提供 accountId 给子组件
+provide(
+  'accountId',
+  computed(() => formData.value?.accountId),
+);
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     if (!formData.value) {

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

@@ -98,19 +98,28 @@ function plusNews() {
 <template>
   <ElContainer>
     <ElAside width="40%">
-      <div class="select-item">
+      <div class="mx-auto mb-2.5 w-3/5 border border-gray-200 p-2.5">
         <div v-for="(news, index) in newsList" :key="index">
           <div
-            class="news-main father"
+            class="group mx-auto h-[120px] w-full cursor-pointer bg-white"
             v-if="index === 0"
-            :class="{ activeAddNews: activeNewsIndex === index }"
+            :class="{
+              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
+            }"
             @click="activeNewsIndex = index"
           >
-            <div class="news-content">
+            <div class="relative h-[120px] w-full bg-[#acadae]">
-              <img class="material-img" :src="news.thumbUrl" />
+              <img class="h-full w-full" :src="news.thumbUrl" />
-              <div class="news-content-title">{{ news.title }}</div>
+              <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"
+              >
+                {{ news.title }}
+              </div>
             </div>
-            <div class="child" v-if="newsList.length > 1">
+            <div
+              v-if="newsList.length > 1"
+              class="relative -bottom-6 hidden text-center group-hover:block"
+            >
               <ElButton
                 type="info"
                 circle
@@ -131,18 +140,22 @@ function plusNews() {
             </div>
           </div>
           <div
-            class="news-main-item father"
+            class="group mx-auto w-full cursor-pointer border-t border-gray-200 bg-white py-1.5"
             v-if="index > 0"
-            :class="{ activeAddNews: activeNewsIndex === index }"
+            :class="{
+              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
+            }"
             @click="activeNewsIndex = index"
           >
-            <div class="news-content-item">
+            <div class="relative -ml-0.5">
-              <div class="news-content-item-title">{{ news.title }}</div>
+              <div class="inline-block w-[70%] text-xs">{{ news.title }}</div>
-              <div class="news-content-item-img">
+              <div class="inline-block w-1/4 bg-[#acadae]">
-                <img class="material-img" :src="news.thumbUrl" width="100%" />
+                <img class="h-full w-full" :src="news.thumbUrl" width="100%" />
               </div>
             </div>
-            <div class="child">
+            <div
+              class="relative -bottom-6 hidden text-center group-hover:block"
+            >
               <ElButton
                 v-if="newsList.length > index + 1"
                 circle
@@ -173,7 +186,10 @@ function plusNews() {
             </div>
           </div>
         </div>
-        <ElRow justify="center" class="ope-row">
+        <ElRow
+          justify="center"
+          class="mt-1.5 border-t border-gray-200 pt-1.5 text-center"
+        >
           <ElButton
             type="primary"
             circle
@@ -188,7 +204,7 @@ function plusNews() {
     <ElMain>
       <div v-if="newsList.length > 0 && activeNewsItem">
         <!-- 标题、作者、原文地址 -->
-        <ElRow :gutter="20">
+        <ElRow :gutter="20" class="mb-5 last:mb-0">
           <ElInput
             v-model="activeNewsItem.title"
             placeholder="请输入标题（必填）"
@@ -196,16 +212,16 @@ function plusNews() {
           <ElInput
             v-model="activeNewsItem.author"
             placeholder="请输入作者"
-            style="margin-top: 5px"
+            class="mt-1.5"
           />
           <ElInput
             v-model="activeNewsItem.contentSourceUrl"
             placeholder="请输入原文地址"
-            style="margin-top: 5px"
+            class="mt-1.5"
           />
         </ElRow>
         <!-- 封面和摘要 -->
-        <ElRow :gutter="20">
+        <ElRow :gutter="20" class="mb-5 last:mb-0">
           <ElCol :span="12">
             <CoverSelect
               v-model="activeNewsItem"
@@ -219,123 +235,16 @@ function plusNews() {
               type="textarea"
               v-model="activeNewsItem.digest"
               placeholder="请输入摘要"
-              class="digest"
+              class="inline-block w-full align-top"
               maxlength="120"
             />
           </ElCol>
         </ElRow>
         <!--富文本编辑器组件-->
-        <ElRow>
+        <ElRow class="mb-5 last:mb-0">
           <RichTextarea v-model="activeNewsItem.content" />
         </ElRow>
       </div>
     </ElMain>
   </ElContainer>
 </template>
-
-<style lang="scss" scoped>
-.ope-row {
-  padding-top: 5px;
-  margin-top: 5px;
-  text-align: center;
-  border-top: 1px solid #eaeaea;
-}
-
-.el-row {
-  margin-bottom: 20px;
-}
-
-.el-row:last-child {
-  margin-bottom: 0;
-}
-
-.digest {
-  display: inline-block;
-  width: 100%;
-  vertical-align: top;
-}
-
-/* 新增图文 */
-.news-main {
-  width: 100%;
-  height: 120px;
-  margin: auto;
-  background-color: #fff;
-}
-
-.news-content {
-  position: relative;
-  width: 100%;
-  height: 120px;
-  background-color: #acadae;
-}
-
-.news-content-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: inline-block;
-  width: 98%;
-  height: 25px;
-  padding: 1%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 15px;
-  color: #fff;
-  white-space: nowrap;
-  background-color: black;
-  opacity: 0.65;
-}
-
-.news-main-item {
-  width: 100%;
-  padding: 5px 0;
-  margin: auto;
-  background-color: #fff;
-  border-top: 1px solid #eaeaea;
-}
-
-.news-content-item {
-  position: relative;
-  margin-left: -3px;
-}
-
-.news-content-item-title {
-  display: inline-block;
-  width: 70%;
-  font-size: 12px;
-}
-
-.news-content-item-img {
-  display: inline-block;
-  width: 25%;
-  background-color: #acadae;
-}
-
-.select-item {
-  width: 60%;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-
-  .activeAddNews {
-    border: 5px solid #2bb673;
-  }
-}
-
-.father .child {
-  position: relative;
-  bottom: 25px;
-  display: none;
-  text-align: center;
-}
-
-.father:hover .child {
-  display: block;
-}
-
-.material-img {
-  width: 100%;
-  height: 100%;
-}
-</style>