!287 fix: ele wx-material-select组件同步

Merge pull request !287 from hw/dev

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue

@@ -133,9 +133,8 @@ function handleSliderChange(prop: string) {
     </TabPane>
 
     <!-- 每个组件的通用内容 -->
-    <!-- TODO @xingyu：【装修】这里的样式，貌似没 ele 版本的好看。 -->
     <TabPane tab="样式" key="style" force-render>
-      <p class="text-lg font-bold">组件样式：</p>
+      <div class="mb-2 bg-gray-100 p-2 text-sm">组件样式：</div>
       <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Form :model="formData">
           <FormItem
@@ -181,7 +180,7 @@ function handleSliderChange(prop: string) {
                 class="mb-0 w-full"
               >
                 <Row>
-                  <Col :span="11">
+                  <Col :span="19">
                     <Slider
                       v-model:value="
                         formData[dataRef.prop as keyof ComponentStyle]
@@ -192,8 +191,9 @@ function handleSliderChange(prop: string) {
                       class="mr-4"
                     />
                   </Col>
-                  <Col :span="2">
+                  <Col :span="4">
                     <InputNumber
+                      class="w-[50px]"
                       :max="100"
                       :min="0"
                       v-model:value="

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue

@@ -98,7 +98,7 @@ const handleDeleteComponent = () => {
       <component :is="component.id" :property="component.property" />
     </div>
     <div
-      class="component-wrap absolute -bottom-1 -left-0.5 -right-0.5 -top-1 block h-full w-full"
+      class="component-wrap absolute -bottom-1 -left-0.5 -right-0.5 block h-full w-full"
     >
       <!-- 左侧：组件名（悬浮的小贴条） -->
       <div class="component-name" v-if="component.name">
@@ -109,9 +109,6 @@ const handleDeleteComponent = () => {
         class="component-toolbar"
         v-if="showToolbar && component.name && active"
       >
-        <!-- TODO @xingyu：【装修】按钮少的时候，会存在遮住的情况； -->
-        <!-- TODO @xingyu：【装修】貌似中间的选中框框，没全部框柱。上面多了点，下面少了点。 -->
-        <!-- TODO @xingyu：【装修】从左侧的组件，拖拽到中间时，没有这个组件的小卡片预览。ele 版本是有的 -->
         <VerticalButtonGroup size="small">
           <Button
             :disabled="!canMoveUp"
@@ -172,7 +169,6 @@ const handleDeleteComponent = () => {
     </div>
   </div>
 </template>
-
 <style scoped lang="scss">
 $active-border-width: 2px;
 $hover-border-width: 1px;

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue

@@ -100,5 +100,4 @@ function handleCloneComponent(component: DiyComponent<any>) {
       </Collapse.Panel>
     </Collapse>
   </div>
-  <!-- TODO @xingyu：【装修】ele 里面有一些 style，看看是不是都迁移完了；特别是 drag-area 是全局样式； -->
 </template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue

@@ -106,7 +106,6 @@ watch(
     </div>
   </Carousel>
 </template>
-
 <style lang="scss">
 // Ant Design Vue Carousel 样式调整
 :deep(.ant-carousel .ant-carousel-dots) {

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue

@@ -14,7 +14,7 @@ defineProps<{ property: UserCardProperty }>();
   <div class="flex flex-col">
     <div class="flex items-center justify-between px-4 py-6">
       <div class="flex flex-1 items-center gap-4">
-        <Avatar :size="60">
+        <Avatar :size="60" class="flex items-center">
           <IconifyIcon icon="ep:avatar" :size="60" />
         </Avatar>
         <span class="text-[18px] font-bold">芋道源码</span>

apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue

@@ -175,8 +175,7 @@ function handleComponentSelected(
   index: number = -1,
 ) {
   // 使用深拷贝避免响应式追踪循环警告
-  // TODO @xingyu：【装修】这个是必须的么？ele 没有哈。
+  selectedComponent.value = component;
-  selectedComponent.value = cloneDeep(component);
   selectedComponentIndex.value = index;
 }
 
@@ -344,7 +343,7 @@ onMounted(() => {
       <!-- 中心：设计区域（ComponentContainer） -->
       <Col :span="12">
         <div
-          class="relative flex max-h-[calc(80vh)] w-full flex-1 flex-col justify-center overflow-y-auto"
+          class="editor-center relative flex max-h-[calc(80vh)] w-full flex-1 flex-col overflow-y-auto"
           @click="handlePageSelected"
         >
           <!-- 手机顶部 -->
@@ -378,20 +377,20 @@ onMounted(() => {
           </div>
           <!-- 手机页面编辑区域 -->
           <div
-            class="min-h-full w-full"
+            class="mx-auto min-h-full w-96 bg-no-repeat"
             :style="{
               // backgroundColor: pageConfigComponent.property.backgroundColor,
               backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
             }"
           >
             <div
-              class="relative mx-auto my-0 min-h-full w-96 items-center justify-center bg-auto bg-no-repeat"
+              class="relative my-0 min-h-full w-full items-center justify-center bg-auto bg-no-repeat"
             >
               <draggable
                 v-model="pageComponents"
                 :animation="200"
                 :force-fallback="false"
-                class="min-h-full w-full"
+                class="min-h-[70vh] w-full"
                 filter=".component-toolbar"
                 ghost-class="draggable-ghost"
                 group="component"
@@ -508,5 +507,4 @@ onMounted(() => {
       </div>
     </PreviewModal>
   </Page>
-  <!-- TODO @xingyu：【装修】这里改造完后，类似 web-ele/src/views/mall/promotion/components/diy-editor/index.vue 里的全局样式（递推到子组件）里的就没没了，类似 property-group -->
 </template>

apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Space } from 'ant-design-vue';
 
-// TODO @xingyu：【装修】貌似上下移动的按钮，被遮住了！
 /**
  * 垂直按钮组
  * Ant Design Vue 的按钮组，通过 Space 实现垂直布局

apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue

@@ -20,7 +20,6 @@ import {
 } from '#/api/mall/promotion/diy/template';
 import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
 
-// TODO @xingyu：【装修】左上角的“基础设施”、“首页”、“我的”切换时，中间的编辑器内容没有正确切换。可对比 ele 版本的效果！
 /** 装修模板表单 */
 defineOptions({ name: 'DiyTemplateDecorate' });
 
@@ -73,24 +72,25 @@ async function getPageDetail(id: any) {
   }
 }
 
+/** 模板选项切换 */
 /** 模板选项切换 */
 function handleTemplateItemChange(val: any) {
-  const changeValue = val.target.value;
+  const valIndex = val.target.value;
   // 缓存模版编辑数据
   currentFormDataMap.value.set(
-    templateItems.value[changeValue]!.name,
+    templateItems.value[selectedTemplateItem.value]?.name || '',
     currentFormData.value!,
   );
-  // 切换模版
-  selectedTemplateItem.value = changeValue;
-
   // 读取模版缓存
   const data = currentFormDataMap.value.get(
-    templateItems.value[changeValue]!.name,
+    templateItems.value[valIndex]?.name || '',
   );
 
+  // 切换模版
+  selectedTemplateItem.value = valIndex;
+
   // 情况一：编辑模板
-  if (changeValue === 0) {
+  if (valIndex === 0) {
     libs.value = templateLibs;
     currentFormData.value = (isEmpty(data) ? formData.value : data) as
       | MallDiyPageApi.DiyPage
@@ -104,7 +104,7 @@ function handleTemplateItemChange(val: any) {
     isEmpty(data)
       ? formData.value!.pages.find(
           (page: MallDiyPageApi.DiyPage) =>
-            page.name === templateItems.value[changeValue]!.name,
+            page.name === templateItems.value[valIndex]?.name,
         )
       : data
   ) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty;

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

@@ -1,26 +1,19 @@
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+import { reactive, ref, watch } from 'vue';
 
 import { NewsType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
-import { formatTime } from '@vben/utils';
 
-import {
+import { ElButton, ElPagination, ElRow } from 'element-plus';
-  ElButton,
-  ElPagination,
-  ElRow,
-  ElTable,
-  ElTableColumn,
-} from 'element-plus';
 
-import * as MpDraftApi from '#/api/mp/draft';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MpFreePublishApi from '#/api/mp/freePublish';
+import { getDraftPage } from '#/api/mp/draft';
-import * as MpMaterialApi from '#/api/mp/material';
+import { getFreePublishPage } from '#/api/mp/freePublish';
-import News from '#/views/mp/components/wx-news/wx-news.vue';
+import { getMaterialPage } from '#/api/mp/material';
-import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
+import { WxNews, WxVideoPlayer, WxVoicePlayer } from '#/views/mp/components';
-import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
-
-// TODO @hw：代码风格，看看 antd 和 ele 是不是统一下； 等antd此组件修改完再调整
 
 /** 微信素材选择 */
 defineOptions({ name: 'WxMaterialSelect' });
@@ -49,33 +42,163 @@ const queryParams = reactive({
   pageSize: 10,
 }); // 查询参数
 
-/** 选择素材 */
+const voiceGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
+  [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      minWidth: 200,
+    },
+    {
+      field: 'voice',
+      title: '语音',
+      minWidth: 200,
+      align: 'center',
+      slots: { default: 'voice' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      align: 'center',
+      slots: { default: 'actions' },
+    },
+  ];
+
+const videoGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
+  [
+    {
+      field: 'mediaId',
+      title: '编号',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      minWidth: 200,
+    },
+    {
+      field: 'title',
+      title: '标题',
+      minWidth: 200,
+    },
+    {
+      field: 'introduction',
+      title: '介绍',
+      minWidth: 220,
+    },
+    {
+      field: 'video',
+      title: '视频',
+      minWidth: 220,
+      align: 'center',
+      slots: { default: 'video' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      align: 'center',
+      slots: { default: 'actions' },
+    },
+  ];
+
+const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: voiceGridColumns,
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? queryParams.accountId;
+          if (!finalAccountId) {
+            return { list: [], total: 0 };
+          }
+          return await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'voice',
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
+const [VideoGrid, videoGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: videoGridColumns,
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? queryParams.accountId;
+          if (finalAccountId === undefined || finalAccountId === null) {
+            return { list: [], total: 0 };
+          }
+          return await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'video',
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
 function selectMaterialFun(item: any) {
   emit('selectMaterial', item);
 }
 
-/** 获取分页数据 */
-async function getPage() {
-  loading.value = true;
-  try {
-    if (props.type === 'news' && props.newsType === NewsType.Published) {
-      // 【图文】+ 【已发布】
-      await getFreePublishPageFun();
-    } else if (props.type === 'news' && props.newsType === NewsType.Draft) {
-      // 【图文】+ 【草稿】
-      await getDraftPageFun();
-    } else {
-      // 【素材】
-      await getMaterialPageFun();
-    }
-  } finally {
-    loading.value = false;
-  }
-}
-
-/** 获取素材分页 */
 async function getMaterialPageFun() {
-  const data = await MpMaterialApi.getMaterialPage({
+  const data = await getMaterialPage({
     ...queryParams,
     type: props.type,
   });
@@ -83,9 +206,8 @@ async function getMaterialPageFun() {
   total.value = data.total;
 }
 
-/** 获取已发布图文分页 */
 async function getFreePublishPageFun() {
-  const data = await MpFreePublishApi.getFreePublishPage(queryParams);
+  const data = await getFreePublishPage(queryParams);
   data.list.forEach((item: any) => {
     const articles = item.content.newsItem;
     articles.forEach((article: any) => {
@@ -96,9 +218,8 @@ async function getFreePublishPageFun() {
   total.value = data.total;
 }
 
-/** 获取草稿图文分页 */
 async function getDraftPageFun() {
-  const data = await MpDraftApi.getDraftPage(queryParams);
+  const data = await getDraftPage(queryParams);
   data.list.forEach((draft: any) => {
     const articles = draft.content.newsItem;
     articles.forEach((article: any) => {
@@ -109,9 +230,57 @@ async function getDraftPageFun() {
   total.value = data.total;
 }
 
-onMounted(async () => {
+async function getPage() {
-  getPage();
+  if (props.type === 'voice') {
-});
+    await voiceGridApi.reload({ accountId: queryParams.accountId });
+    return;
+  }
+  if (props.type === 'video') {
+    await videoGridApi.reload({ accountId: queryParams.accountId });
+    return;
+  }
+
+  loading.value = true;
+  try {
+    if (props.type === 'news' && props.newsType === NewsType.Published) {
+      await getFreePublishPageFun();
+    } else if (props.type === 'news' && props.newsType === NewsType.Draft) {
+      await getDraftPageFun();
+    } else {
+      await getMaterialPageFun();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => props.accountId,
+  (accountId) => {
+    queryParams.accountId = accountId;
+    queryParams.pageNo = 1;
+    getPage();
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.type,
+  () => {
+    queryParams.pageNo = 1;
+    getPage();
+  },
+);
+
+watch(
+  () => props.newsType,
+  () => {
+    if (props.type === 'news') {
+      queryParams.pageNo = 1;
+      getPage();
+    }
+  },
+);
 </script>
 
 <template>
@@ -152,90 +321,31 @@ onMounted(async () => {
     </div>
     <!-- 类型：voice -->
     <div v-else-if="props.type === 'voice'">
-      <!-- 列表 -->
+      <VoiceGrid>
-      <ElTable v-loading="loading" :data="list">
+        <template #voice="{ row }">
-        <ElTableColumn label="编号" align="center" prop="mediaId" />
+          <WxVoicePlayer :url="row.url" />
-        <ElTableColumn label="文件名" align="center" prop="name" />
+        </template>
-        <ElTableColumn label="语音" align="center">
+        <template #actions="{ row }">
-          <template #default="scope">
+          <ElButton type="primary" link @click="selectMaterialFun(row)">
-            <VoicePlayer :url="scope.row.url" />
+            选择
-          </template>
+            <IconifyIcon icon="lucide:plus" />
-        </ElTableColumn>
+          </ElButton>
-        <ElTableColumn
+        </template>
-          label="上传时间"
+      </VoiceGrid>
-          align="center"
-          prop="createTime"
-          width="180"
-          :formatter="
-            (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
-          "
-        />
-        <ElTableColumn label="操作" align="center" fixed="right">
-          <template #default="scope">
-            <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
-              选择
-              <IconifyIcon icon="lucide:plus" />
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-      <!-- 分页组件 -->
-      <ElPagination
-        background
-        layout="prev, pager, next, sizes, total"
-        :total="total"
-        v-model:current-page="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @current-change="getPage"
-        @size-change="getPage"
-      />
     </div>
     <!-- 类型：video -->
     <div v-else-if="props.type === 'video'">
-      <!-- 列表 -->
+      <VideoGrid>
-      <ElTable v-loading="loading" :data="list">
+        <template #video="{ row }">
-        <ElTableColumn label="编号" align="center" prop="mediaId" />
+          <WxVideoPlayer :url="row.url" />
-        <ElTableColumn label="文件名" align="center" prop="name" />
+        </template>
-        <ElTableColumn label="标题" align="center" prop="title" />
+        <template #actions="{ row }">
-        <ElTableColumn label="介绍" align="center" prop="introduction" />
+          <ElButton type="primary" link @click="selectMaterialFun(row)">
-        <ElTableColumn label="视频" align="center">
+            选择
-          <template #default="scope">
+            <IconifyIcon icon="lucide:circle-plus" />
-            <VideoPlayer :url="scope.row.url" />
+          </ElButton>
-          </template>
+        </template>
-        </ElTableColumn>
+      </VideoGrid>
-        <ElTableColumn
-          label="上传时间"
-          align="center"
-          prop="createTime"
-          width="180"
-          :formatter="
-            (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
-          "
-        />
-        <ElTableColumn
-          label="操作"
-          align="center"
-          fixed="right"
-          class-name="small-padding fixed-width"
-        >
-          <template #default="scope">
-            <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
-              选择
-              <IconifyIcon icon="lucide:circle-plus" />
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-      <!-- 分页组件 -->
-      <ElPagination
-        background
-        layout="prev, pager, next, sizes, total"
-        :total="total"
-        v-model:current-page="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @current-change="getMaterialPageFun"
-        @size-change="getMaterialPageFun"
-      />
     </div>
     <!-- 类型：news -->
     <div v-else-if="props.type === 'news'">
@@ -249,7 +359,7 @@ onMounted(async () => {
           :key="item.mediaId"
         >
           <div v-if="item.content && item.content.newsItem">
-            <News :articles="item.content.newsItem" />
+            <WxNews :articles="item.content.newsItem" />
             <ElRow class="flex justify-center pt-2.5">
               <ElButton type="success" @click="selectMaterialFun(item)">
                 选择

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

@@ -14,7 +14,7 @@ defineOptions({ name: 'TabNews' });
 
 const props = defineProps<{
   modelValue: Reply;
-  newsType: NewsType;
+  newsType?: NewsType;
 }>();
 
 const emit = defineEmits<{