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

Merge pull request !287 from hw/dev
2025-12-30 02:22:25 +00:00 · 2025-12-01 11:23:59 +00:00
parent c05463ca0a a9a075346f
commit 60400525cc
10 changed files with 259 additions and 158 deletions
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/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="
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/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;
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/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>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
+++ b/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) {
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
+++ b/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>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/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 = cloneDeep(component);
+  selectedComponent.value = 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>
--- a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
+++ b/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 实现垂直布局
--- a/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
+++ b/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;
--- a/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
+++ b/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 {
-  ElButton,
-  ElPagination,
-  ElRow,
-  ElTable,
-  ElTableColumn,
-} from 'element-plus';
+import { ElButton, ElPagination, ElRow } from 'element-plus';

-import * as MpDraftApi from '#/api/mp/draft';
-import * as MpFreePublishApi from '#/api/mp/freePublish';
-import * as MpMaterialApi from '#/api/mp/material';
-import News from '#/views/mp/components/wx-news/wx-news.vue';
-import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
-import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
-
-// TODO @hw：代码风格，看看 antd 和 ele 是不是统一下； 等antd此组件修改完再调整
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDraftPage } from '#/api/mp/draft';
+import { getFreePublishPage } from '#/api/mp/freePublish';
+import { getMaterialPage } from '#/api/mp/material';
+import { WxNews, WxVideoPlayer, WxVoicePlayer } from '#/views/mp/components';

 /** 微信素材选择 */
 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 () => {
-  getPage();
-});
+async function 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'">
-      <!-- 列表 -->
-      <ElTable v-loading="loading" :data="list">
-        <ElTableColumn label="编号" align="center" prop="mediaId" />
-        <ElTableColumn label="文件名" align="center" prop="name" />
-        <ElTableColumn label="语音" align="center">
-          <template #default="scope">
-            <VoicePlayer :url="scope.row.url" />
-          </template>
-        </ElTableColumn>
-        <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">
-          <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"
-      />
+      <VoiceGrid>
+        <template #voice="{ row }">
+          <WxVoicePlayer :url="row.url" />
+        </template>
+        <template #actions="{ row }">
+          <ElButton type="primary" link @click="selectMaterialFun(row)">
+            选择
+            <IconifyIcon icon="lucide:plus" />
+          </ElButton>
+        </template>
+      </VoiceGrid>
    </div>
    <!-- 类型：video -->
    <div v-else-if="props.type === 'video'">
-      <!-- 列表 -->
-      <ElTable v-loading="loading" :data="list">
-        <ElTableColumn label="编号" align="center" prop="mediaId" />
-        <ElTableColumn label="文件名" align="center" prop="name" />
-        <ElTableColumn label="标题" align="center" prop="title" />
-        <ElTableColumn label="介绍" align="center" prop="introduction" />
-        <ElTableColumn label="视频" align="center">
-          <template #default="scope">
-            <VideoPlayer :url="scope.row.url" />
-          </template>
-        </ElTableColumn>
-        <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"
-      />
+      <VideoGrid>
+        <template #video="{ row }">
+          <WxVideoPlayer :url="row.url" />
+        </template>
+        <template #actions="{ row }">
+          <ElButton type="primary" link @click="selectMaterialFun(row)">
+            选择
+            <IconifyIcon icon="lucide:circle-plus" />
+          </ElButton>
+        </template>
+      </VideoGrid>
    </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)">
                选择
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
+++ b/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<{