refactor: mp comps

apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Rule } from 'ant-design-vue/es/form';
 
-import type { Reply } from '#/views/mp/components/wx-reply';
+import type { Reply } from '#/views/mp/components';
 
 import { computed, ref } from 'vue';
 
@@ -10,7 +10,7 @@ import { getDictOptions } from '@vben/hooks';
 
 import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
 
-import { WxReplySelect } from '#/views/mp/components/wx-reply';
+import { WxReply } from '#/views/mp/components';
 
 import { MsgType } from './types';
 
@@ -131,7 +131,7 @@ defineExpose({
         />
       </FormItem>
       <FormItem label="回复消息">
-        <WxReplySelect v-model="reply" />
+        <WxReply v-model="reply" />
       </FormItem>
     </Form>
   </div>

apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
-import { WxMusic } from '#/views/mp/components/wx-music';
-import { WxNews } from '#/views/mp/components/wx-news';
-import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
-import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
+import {
+  WxMusic,
+  WxNews,
+  WxVideoPlayer,
+  WxVoicePlayer,
+} from '#/views/mp/components';
 // TODO @hw：迁移到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
 defineOptions({ name: 'ReplyContentCell' });
 

apps/web-antd/src/views/mp/autoReply/data.ts

@@ -5,7 +5,7 @@ import { markRaw } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 
-import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
+import { WxAccountSelect } from '#/views/mp/components';
 
 import { MsgType } from './components/types';
 

apps/web-antd/src/views/mp/autoReply/modules/form.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Reply } from '#/views/mp/components/wx-reply';
+import type { Reply } from '#/views/mp/components';
 
 import { computed, ref } from 'vue';
 
@@ -9,7 +9,7 @@ import { message } from 'ant-design-vue';
 
 import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
 import { $t } from '#/locales';
-import { ReplyType } from '#/views/mp/components/wx-reply/types';
+import { ReplyType } from '#/views/mp/components';
 
 import ReplyForm from '../components/ReplyForm.vue';
 import { MsgType } from '../components/types';

apps/web-antd/src/views/mp/components/wx-account-select/index.ts

@@ -1,2 +1 @@
-// TODO @dylan：yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/components 要不加个 index.ts，统一 export 所有的组件
-export { default as WxAccountSelect } from './main.vue';
+export { default as WxAccountSelect } from './account-select.vue';

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

@@ -1,69 +0,0 @@
-<script lang="ts" setup>
-import type { SelectValue } from 'ant-design-vue/es/select';
-
-import type { MpAccountApi } from '#/api/mp/account';
-
-import { onMounted, reactive, ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-import { message, Select } from 'ant-design-vue';
-
-import { getSimpleAccountList } from '#/api/mp/account';
-
-defineOptions({ name: 'WxAccountSelect' });
-
-const emit = defineEmits<{
-  (e: 'change', id: number, name: string): void;
-}>();
-
-const { push } = useRouter();
-
-const account: MpAccountApi.Account = reactive({
-  id: -1,
-  name: '',
-}); // 当前选中的公众号
-const accountList = ref<MpAccountApi.Account[]>([]); // 公众号列表
-
-/** 查询公众号列表 */
-async function handleQuery() {
-  accountList.value = await getSimpleAccountList();
-  if (accountList.value.length === 0) {
-    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
-    await push({ name: 'MpAccount' });
-    return;
-  }
-
-  // 默认选中第一个，如无数据则不执行
-  const first = accountList.value[0];
-  if (first) {
-    account.id = first.id;
-    account.name = first.name;
-    emit('change', account.id, account.name);
-  }
-}
-
-/** 切换选中公众号 */
-function onChanged(id: SelectValue) {
-  const found = accountList.value.find((v) => v.id === id);
-  if (found) {
-    account.name = found.name;
-    emit('change', account.id, account.name);
-  }
-}
-
-/** 初始化 */
-onMounted(handleQuery);
-</script>
-
-<template>
-  <Select
-    v-model:value="account.id"
-    placeholder="请选择公众号"
-    class="!w-[240px]"
-    @change="onChanged"
-  >
-    <Select.Option v-for="item in accountList" :key="item.id" :value="item.id">
-      {{ item.name }}
-    </Select.Option>
-  </Select>
-</template>

apps/web-antd/src/views/mp/components/wx-location/index.ts

@@ -1 +1,2 @@
-export { default as WxLocation } from './main.vue';
+export * from './types';
+export { default as WxLocation } from './wx-location.vue';

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

@@ -1,54 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { Col, Row } from 'ant-design-vue';
-
-defineOptions({ name: 'WxLocation' });
-
-// TODO @dylan：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
-const props = withDefaults(
-  defineProps<{
-    label: string;
-    locationX: number;
-    locationY: number;
-    qqMapKey?: string;
-  }>(),
-  {
-    qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
-  },
-);
-
-const mapUrl = computed(() => {
-  return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${props.locationY}&pointy=${props.locationX}&name=${props.label}&ref=yudao`;
-});
-
-const mapImageUrl = computed(() => {
-  return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${props.qqMapKey}&size=250*180`;
-});
-
-defineExpose({
-  locationX: props.locationX,
-  locationY: props.locationY,
-  label: props.label,
-  qqMapKey: props.qqMapKey,
-});
-</script>
-
-<template>
-  <!-- 微信消息 - 定位 -->
-  <div>
-    <a :href="mapUrl" target="_blank" class="text-primary">
-      <Col>
-        <Row>
-          <img :src="mapImageUrl" alt="地图位置" />
-        </Row>
-        <Row class="mt-2">
-          <IconifyIcon icon="mdi:map-marker" class="mr-1" />
-          {{ label }}
-        </Row>
-      </Col>
-    </a>
-  </div>
-</template>

apps/web-antd/src/views/mp/components/wx-material-select/index.ts

@@ -1,3 +1 @@
-export { default as WxMaterialSelect } from './main.vue';
-
-export { MaterialType, NewsType } from './types';
+export { default as WxMaterialSelect } from './wx-material-select.vue';

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

@@ -1,447 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { reactive, ref, watch } from 'vue';
-
-import { Page } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-
-import { Button, Pagination, Row, Spin } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MpDraftApi from '#/api/mp/draft';
-import * as MpFreePublishApi from '#/api/mp/freePublish';
-import * as MpMaterialApi from '#/api/mp/material';
-import { WxNews } from '#/views/mp/components/wx-news';
-import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
-import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
-
-import { NewsType } from './types';
-
-defineOptions({ name: 'WxMaterialSelect' });
-
-const props = withDefaults(
-  defineProps<{
-    accountId: number;
-    newsType?: NewsType;
-    type: string;
-  }>(),
-  {
-    newsType: NewsType.Published,
-  },
-);
-
-const emit = defineEmits<{
-  (e: 'selectMaterial', item: any): void;
-}>();
-
-const loading = ref(false); // 遮罩层
-const total = ref(0); // 总条数
-const list = ref<any[]>([]); // 数据列表
-const queryParams = reactive({
-  accountId: props.accountId,
-  pageNo: 1,
-  pageSize: 10,
-}); // 查询参数
-
-const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
-  // TODO @dylan：any 有 linter 告警；看看别的模块哈
-  {
-    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<any>['columns'] = [
-  // TODO @dylan：any 有 linter 告警；看看别的模块哈
-  {
-    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;
-          // TODO @dylan 这里简化成 !finalAccountId 是不是可以哈。
-          if (finalAccountId === undefined || finalAccountId === null) {
-            return { list: [], total: 0 };
-          }
-          // TODO @dylan：不要带 MpMaterialApi；
-          return await MpMaterialApi.getMaterialPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            accountId: finalAccountId,
-            type: 'voice',
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'mediaId',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-    },
-  } as VxeTableGridOptions<any>, // TODO @dylan：这里有 linter 告警；看看别的模块哈
-});
-
-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 MpMaterialApi.getMaterialPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            accountId: finalAccountId,
-            type: 'video',
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'mediaId',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-    },
-  } as VxeTableGridOptions<any>,
-});
-
-function selectMaterialFun(item: any) {
-  emit('selectMaterial', item);
-}
-
-async function getMaterialPageFun() {
-  const data = await MpMaterialApi.getMaterialPage({
-    ...queryParams,
-    type: props.type,
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
-
-async function getFreePublishPageFun() {
-  const data = await MpFreePublishApi.getFreePublishPage(queryParams);
-  data.list.forEach((item: any) => {
-    const articles = item.content.newsItem;
-    articles.forEach((article: any) => {
-      article.picUrl = article.thumbUrl;
-    });
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
-
-async function getDraftPageFun() {
-  const data = await MpDraftApi.getDraftPage(queryParams);
-  data.list.forEach((draft: any) => {
-    const articles = draft.content.newsItem;
-    articles.forEach((article: any) => {
-      article.picUrl = article.thumbUrl;
-    });
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
-
-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>
-  <Page :bordered="false" class="pb-8">
-    <!-- 类型：image -->
-    <template v-if="props.type === 'image'">
-      <Spin :spinning="loading">
-        <div class="waterfall">
-          <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
-            <img class="material-img" :src="item.url" alt="素材图片" />
-            <p class="item-name">{{ item.name }}</p>
-            <Row class="ope-row">
-              <Button type="primary" @click="selectMaterialFun(item)">
-                选择
-                <template #icon>
-                  <IconifyIcon icon="mdi:check-circle" />
-                </template>
-              </Button>
-            </Row>
-          </div>
-        </div>
-      </Spin>
-      <Pagination
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        :total="total"
-        class="mt-4"
-        @change="getPage"
-        @show-size-change="getPage"
-      />
-    </template>
-
-    <!-- 类型：voice -->
-    <template v-else-if="props.type === 'voice'">
-      <VoiceGrid>
-        <template #voice="{ row }">
-          <WxVoicePlayer :url="row.url" />
-        </template>
-        <template #actions="{ row }">
-          <Button type="link" @click="selectMaterialFun(row)">
-            选择
-            <template #icon>
-              <IconifyIcon icon="mdi:plus" />
-            </template>
-          </Button>
-        </template>
-      </VoiceGrid>
-    </template>
-
-    <!-- 类型：video -->
-    <template v-else-if="props.type === 'video'">
-      <VideoGrid>
-        <template #video="{ row }">
-          <WxVideoPlayer :url="row.url" />
-        </template>
-        <template #actions="{ row }">
-          <Button type="link" @click="selectMaterialFun(row)">
-            选择
-            <template #icon>
-              <IconifyIcon icon="mdi:plus-circle" />
-            </template>
-          </Button>
-        </template>
-      </VideoGrid>
-    </template>
-
-    <!-- 类型：news -->
-    <template v-else-if="props.type === 'news'">
-      <Spin :spinning="loading">
-        <div class="waterfall">
-          <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
-            <div v-if="item.content && item.content.newsItem">
-              <WxNews :articles="item.content.newsItem" />
-              <Row class="ope-row">
-                <Button type="primary" @click="selectMaterialFun(item)">
-                  选择
-                  <template #icon>
-                    <IconifyIcon icon="mdi:check-circle" />
-                  </template>
-                </Button>
-              </Row>
-            </div>
-          </div>
-        </div>
-      </Spin>
-      <Pagination
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        :total="total"
-        class="mt-4"
-        @change="getPage"
-        @show-size-change="getPage"
-      />
-    </template>
-  </Page>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-@media (width >= 992px) and (width <= 1300px) {
-  .waterfall {
-    column-count: 3;
-  }
-
-  p {
-    color: red;
-  }
-}
-
-@media (width >= 768px) and (width <= 991px) {
-  .waterfall {
-    column-count: 2;
-  }
-
-  p {
-    color: orange;
-  }
-}
-
-@media (width <= 767px) {
-  .waterfall {
-    column-count: 1;
-  }
-}
-
-.waterfall {
-  column-count: 5;
-  column-gap: 10px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-.waterfall-item {
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #eaeaea;
-  break-inside: avoid;
-}
-
-.material-img {
-  width: 100%;
-}
-
-p {
-  line-height: 30px;
-}
-
-.ope-row {
-  padding-top: 10px;
-  text-align: center;
-}
-
-.item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-</style>

apps/web-antd/src/views/mp/components/wx-material-select/types.ts

@@ -1,11 +0,0 @@
-export enum NewsType {
-  Draft = '2',
-  Published = '1',
-}
-
-export enum MaterialType {
-  Image = 'image',
-  News = 'news',
-  Video = 'video',
-  Voice = 'voice',
-}

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

@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import { IconifyIcon } from '@vben/icons';
-
-import { WxLocation } from '#/views/mp/components/wx-location';
-import { WxMusic } from '#/views/mp/components/wx-music';
-import { WxNews } from '#/views/mp/components/wx-news';
-import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
-import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
-
-import { MsgType } from '../types';
-import MsgEvent from './MsgEvent.vue';
-
-// TODO @dylan：vue 组件名小写 + 中划线
-
-defineOptions({ name: 'Msg' });
-
-defineProps<{
-  item: any;
-}>();
-</script>
-
-<template>
-  <div>
-    <MsgEvent v-if="item.type === MsgType.Event" :item="item" />
-
-    <div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
-
-    <div v-else-if="item.type === MsgType.Voice">
-      <WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
-    </div>
-
-    <div v-else-if="item.type === MsgType.Image">
-      <a :href="item.mediaUrl" target="_blank">
-        <img :src="item.mediaUrl" class="w-[100px]" alt="图片消息" />
-      </a>
-    </div>
-
-    <div
-      v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
-      class="text-center"
-    >
-      <WxVideoPlayer :url="item.mediaUrl" />
-    </div>
-
-    <div v-else-if="item.type === MsgType.Link" class="flex flex-col gap-2">
-      <a :href="item.url" target="_blank" class="text-success no-underline">
-        <div class="flex items-center text-sm font-medium text-[#52c41a]">
-          <IconifyIcon icon="mdi:link" class="mr-1" />
-          {{ item.title }}
-        </div>
-      </a>
-      <div class="text-xs text-[#666]">{{ item.description }}</div>
-    </div>
-
-    <div v-else-if="item.type === MsgType.Location">
-      <WxLocation
-        :label="item.label"
-        :location-y="item.locationY"
-        :location-x="item.locationX"
-      />
-    </div>
-
-    <div v-else-if="item.type === MsgType.News" class="w-[300px]">
-      <WxNews :articles="item.articles" />
-    </div>
-
-    <div v-else-if="item.type === MsgType.Music">
-      <WxMusic
-        :title="item.title"
-        :description="item.description"
-        :thumb-media-url="item.thumbMediaUrl"
-        :music-url="item.musicUrl"
-        :hq-music-url="item.hqMusicUrl"
-      />
-    </div>
-  </div>
-</template>

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

@@ -1,53 +0,0 @@
-<script lang="ts" setup>
-import { Tag } from 'ant-design-vue';
-
-// TODO @dylan：vue 组件名小写 + 中划线
-
-defineOptions({ name: 'MsgEvent' });
-
-defineProps<{
-  item: any;
-}>();
-</script>
-
-<template>
-  <div>
-    <div v-if="item.event === 'subscribe'">
-      <Tag color="success">关注</Tag>
-    </div>
-    <div v-else-if="item.event === 'unsubscribe'">
-      <Tag color="error">取消关注</Tag>
-    </div>
-    <div v-else-if="item.event === 'CLICK'">
-      <Tag>点击菜单</Tag>
-      【{{ item.eventKey }}】
-    </div>
-    <div v-else-if="item.event === 'VIEW'">
-      <Tag>点击菜单链接</Tag>
-      【{{ item.eventKey }}】
-    </div>
-    <div v-else-if="item.event === 'scancode_waitmsg'">
-      <Tag>扫码结果</Tag>
-      【{{ item.eventKey }}】
-    </div>
-    <div v-else-if="item.event === 'scancode_push'">
-      <Tag>扫码结果</Tag>
-      【{{ item.eventKey }}】
-    </div>
-    <div v-else-if="item.event === 'pic_sysphoto'">
-      <Tag>系统拍照发图</Tag>
-    </div>
-    <div v-else-if="item.event === 'pic_photo_or_album'">
-      <Tag>拍照或者相册</Tag>
-    </div>
-    <div v-else-if="item.event === 'pic_weixin'">
-      <Tag>微信相册</Tag>
-    </div>
-    <div v-else-if="item.event === 'location_select'">
-      <Tag>选择地理位置</Tag>
-    </div>
-    <div v-else>
-      <Tag color="error">未知事件类型</Tag>
-    </div>
-  </div>
-</template>

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

@@ -1,76 +0,0 @@
-<script lang="ts" setup>
-import type { User } from '../types';
-
-import { preferences } from '@vben/preferences';
-import { formatDateTime } from '@vben/utils';
-
-import Msg from './Msg.vue';
-
-// TODO @dylan：vue 组件名小写 + 中划线
-
-defineOptions({ name: 'MsgList' });
-
-const props = defineProps<{
-  accountId: number;
-  list: any[];
-  user: User;
-}>();
-const SendFrom = {
-  MpBot: 2,
-  User: 1,
-} as const;
-
-function getAvatar(sendFrom: number) {
-  return sendFrom === SendFrom.User
-    ? props.user.avatar
-    : preferences.app.defaultAvatar;
-}
-
-// TODO @dylan：SendFrom 告警；
-function getNickname(sendFrom: SendFrom) {
-  return sendFrom === SendFrom.User ? props.user.nickname : '公众号';
-}
-</script>
-<template>
-  <div class="execution" v-for="item in props.list" :key="item.id">
-    <div
-      class="avue-comment"
-      :class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }"
-    >
-      <div class="avatar-div">
-        <img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
-        <div class="avue-comment__author">
-          {{ getNickname(item.sendFrom) }}
-        </div>
-      </div>
-      <div class="avue-comment__main">
-        <div class="avue-comment__header">
-          <div class="avue-comment__create_time">
-            {{ formatDateTime(item.createTime) }}
-          </div>
-        </div>
-        <div
-          class="avue-comment__body"
-          :style="
-            item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
-          "
-        >
-          <Msg :item="item" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-
-@import url('../comment.scss');
-@import url('../card.scss');
-
-.avatar-div {
-  width: 80px;
-  text-align: center;
-}
-</style>

apps/web-antd/src/views/mp/components/wx-msg/index.ts

@@ -1,3 +1,3 @@
-export { default as WxMsg } from './main.vue';
+export * from './types';
 
-export { MsgType } from './types';
+export { default as WxMsg } from './wx-msg.vue';

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

@@ -1,178 +0,0 @@
-<script lang="ts" setup>
-import type { User } from './types';
-
-import { nextTick, onMounted, reactive, ref, unref } from 'vue';
-
-import { preferences } from '@vben/preferences';
-
-import { Button, message, Spin } from 'ant-design-vue';
-
-import { getMessagePage, sendMessage } from '#/api/mp/message';
-import { getUser } from '#/api/mp/user';
-import { WxReplySelect } from '#/views/mp/components/wx-reply';
-
-import MsgList from './components/MsgList.vue';
-
-defineOptions({ name: 'WxMsg' });
-
-const props = defineProps<{
-  userId: number;
-}>();
-
-const accountId = ref(-1); // 公众号ID，需要通过userId初始化
-const loading = ref(false); // 消息列表是否正在加载中
-const hasMore = ref(true); // 是否可以加载更多
-const list = ref<any[]>([]); // 消息列表
-const queryParams = reactive({
-  accountId,
-  pageNo: 1, // 当前页数
-  pageSize: 14, // 每页显示多少条
-});
-
-const user: User = reactive({
-  accountId, // 公众号账号编号
-  avatar: preferences.app.defaultAvatar,
-  nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
-});
-
-// ========= 消息发送 =========
-const sendLoading = ref(false); // 发送消息是否加载中
-const reply = ref<any>({
-  accountId: -1,
-  articles: [],
-  type: 'text',
-}); // 微信发送消息
-
-const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null); // WxReplySelect组件ref，用于消息发送成功后清除内容
-const msgDivRef = ref<HTMLDivElement | null>(null); // 消息显示窗口ref，用于滚动到底部
-
-/** 完成加载 */
-onMounted(async () => {
-  const data = await getUser(props.userId);
-  user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname;
-  user.avatar = data.avatar?.length > 0 ? data.avatar : user.avatar;
-  accountId.value = data.accountId;
-  reply.value.accountId = data.accountId;
-
-  refreshChange();
-});
-
-/** 执行发送 */
-async function sendMsg() {
-  if (!unref(reply)) {
-    return;
-  }
-  // 公众号限制：客服消息，公众号只允许发送一条
-  if (
-    reply.value.type === 'news' &&
-    reply.value.articles &&
-    reply.value.articles.length > 1
-  ) {
-    reply.value.articles = [reply.value.articles[0]];
-    message.success('图文消息条数限制在 1 条以内，已默认发送第一条');
-  }
-
-  const data = await sendMessage({
-    ...reply.value,
-    userId: props.userId,
-  } as any);
-  sendLoading.value = false;
-
-  list.value = [...list.value, data];
-  await scrollToBottom();
-
-  // 发送后清空数据
-  replySelectRef.value?.clear();
-}
-
-function loadMore() {
-  queryParams.pageNo++;
-  getPage(queryParams, null);
-}
-
-async function getPage(page: any, params: any = null) {
-  loading.value = true;
-  const dataTemp = await getMessagePage(
-    Object.assign(
-      {
-        accountId: page.accountId,
-        pageNo: page.pageNo,
-        pageSize: page.pageSize,
-        userId: props.userId,
-      },
-      params,
-    ),
-  );
-
-  const scrollHeight = msgDivRef.value?.scrollHeight ?? 0;
-  // 处理数据
-  const data = dataTemp.list.reverse();
-  list.value = [...data, ...list.value];
-  loading.value = false;
-  if (data.length < queryParams.pageSize || data.length === 0) {
-    hasMore.value = false;
-  }
-  queryParams.pageNo = page.pageNo;
-  queryParams.pageSize = page.pageSize;
-  // 滚动到原来的位置
-  if (queryParams.pageNo === 1) {
-    // 定位到消息底部
-    await scrollToBottom();
-  } else if (data.length > 0) {
-    // 定位滚动条
-    await nextTick();
-    if (scrollHeight !== 0 && msgDivRef.value) {
-      msgDivRef.value.scrollTop =
-        msgDivRef.value.scrollHeight - scrollHeight - 100;
-    }
-  }
-}
-
-function refreshChange() {
-  getPage(queryParams);
-}
-
-/** 定位到消息底部 */
-async function scrollToBottom() {
-  await nextTick();
-  if (msgDivRef.value) {
-    msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight;
-  }
-}
-</script>
-
-<template>
-  <div class="flex h-full flex-col">
-    <div ref="msgDivRef" class="mx-2.5 flex-1 overflow-auto bg-[#eaeaea]">
-      <!-- 加载更多 -->
-      <Spin :spinning="loading" />
-      <div v-if="!loading">
-        <div
-          v-if="hasMore"
-          class="cursor-pointer rounded p-3 text-center text-sm text-[#409eff] transition-colors duration-300 hover:bg-[#f5f7fa]"
-          @click="loadMore"
-        >
-          <span>点击加载更多</span>
-        </div>
-        <div
-          v-else
-          class="cursor-not-allowed rounded p-3 text-center text-sm text-[#909399] hover:bg-transparent"
-        >
-          <span>没有更多了</span>
-        </div>
-      </div>
-
-      <!-- 消息列表 -->
-      <MsgList :list="list" :account-id="accountId" :user="user" />
-    </div>
-
-    <div class="p-2.5">
-      <Spin :spinning="sendLoading">
-        <WxReplySelect ref="replySelectRef" v-model="reply" />
-        <Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
-          发送(S)
-        </Button>
-      </Spin>
-    </div>
-  </div>
-</template>

apps/web-antd/src/views/mp/components/wx-msg/types.ts

@@ -1,15 +1,3 @@
-export enum MsgType {
-  Event = 'event',
-  Image = 'image',
-  Link = 'link',
-  Location = 'location',
-  Music = 'music',
-  News = 'news',
-  Text = 'text',
-  Video = 'video',
-  Voice = 'voice',
-}
-
 export interface User {
   accountId: number;
   avatar: string;

apps/web-antd/src/views/mp/components/wx-music/index.ts

@@ -1 +1 @@
-export { default as WxMusic } from './main.vue';
+export { default as WxMusic } from './wx-music.vue';

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

@@ -1,93 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-defineOptions({ name: 'WxMusic' });
-
-const props = withDefaults(
-  defineProps<{
-    description?: string;
-    hqMusicUrl?: string;
-    musicUrl?: string;
-    thumbMediaUrl: string;
-    title?: string;
-  }>(),
-  {
-    title: '',
-    description: '',
-    musicUrl: '',
-    hqMusicUrl: '',
-  },
-);
-
-const href = computed(() => props.hqMusicUrl || props.musicUrl);
-
-defineExpose({
-  musicUrl: props.musicUrl,
-});
-</script>
-
-<template>
-  <!-- 微信消息 - 音乐 -->
-  <div>
-    <a :href="href" target="_blank" class="text-success no-underline">
-      <div class="music-card">
-        <div class="music-avatar">
-          <img :src="thumbMediaUrl" alt="音乐封面" />
-        </div>
-        <div class="music-detail">
-          <div class="music-title">{{ title }}</div>
-          <div class="music-description">{{ description }}</div>
-        </div>
-      </div>
-    </a>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-
-.music-card {
-  display: flex;
-  padding: 10px;
-  background-color: #fff;
-  border-radius: 5px;
-}
-
-.music-avatar {
-  flex-shrink: 0;
-  width: 60px;
-  height: 60px;
-  margin-right: 12px;
-  overflow: hidden;
-  border-radius: 4px;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.music-detail {
-  flex: 1;
-  overflow: hidden;
-}
-
-.music-title {
-  margin-bottom: 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
-  white-space: nowrap;
-}
-
-.music-description {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  color: #666;
-  white-space: nowrap;
-}
-</style>

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

@@ -1 +1 @@
-export { default as WxNews } from './main.vue';
+export { default as WxNews } from './wx-news.vue';

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

@@ -1,117 +0,0 @@
-<script lang="ts" setup>
-import { Image } from 'ant-design-vue';
-
-defineOptions({ name: 'WxNews' });
-
-const props = withDefaults(
-  defineProps<{
-    articles?: any[] | null;
-  }>(),
-  {
-    articles: null,
-  },
-);
-
-defineExpose({
-  articles: props.articles,
-});
-</script>
-
-<template>
-  <!-- 微信消息 - 图文 -->
-  <div class="news-home">
-    <div v-for="(article, index) in articles" :key="index" class="news-div">
-      <!-- 头条 -->
-      <a v-if="index === 0" :href="article.url" target="_blank">
-        <div class="news-main">
-          <div class="news-content">
-            <Image
-              :src="article.picUrl"
-              :preview="false"
-              class="material-img"
-            />
-            <div class="news-content-title">
-              <span>{{ article.title }}</span>
-            </div>
-          </div>
-        </div>
-      </a>
-      <!-- 二条/三条等等 -->
-      <a v-else :href="article.url" target="_blank">
-        <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">
-              <img :src="article.picUrl" class="material-img" alt="文章图片" />
-            </div>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-
-.news-home {
-  width: 100%;
-  margin: auto;
-  background-color: #fff;
-}
-
-.news-main {
-  width: 100%;
-  margin: auto;
-}
-
-.news-content {
-  position: relative;
-  width: 100%;
-  background-color: #acadae;
-}
-
-.news-content-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  box-sizing: unset !important;
-  display: inline-block;
-  width: 98%;
-  padding: 1%;
-  font-size: 12px;
-  color: #fff;
-  white-space: normal;
-  background-color: black;
-  opacity: 0.65;
-}
-
-.news-main-item {
-  padding: 5px 0;
-  background-color: #fff;
-  border-top: 1px solid #eaeaea;
-}
-
-.news-content-item {
-  position: relative;
-}
-
-.news-content-item-title {
-  display: inline-block;
-  width: 70%;
-  margin-left: 1%;
-  font-size: 10px;
-  white-space: normal;
-}
-
-.news-content-item-img {
-  display: inline-block;
-  width: 25%;
-  margin-right: 1%;
-  background-color: #acadae;
-}
-
-.material-img {
-  width: 100%;
-}
-</style>

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

@@ -1,222 +0,0 @@
-<script lang="ts" setup>
-import type { Reply } from './types';
-
-import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
-
-import { computed, reactive, ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-import { useAccessStore } from '@vben/stores';
-
-import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
-
-import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
-import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
-
-// TODO @dylan：文件名的大小写
-
-defineOptions({ name: 'TabImage' });
-
-const props = defineProps<{
-  modelValue: Reply;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Reply): void;
-}>();
-
-const accessStore = useAccessStore();
-const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
-
-const reply = computed<Reply>({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-});
-
-const showDialog = ref(false);
-const fileList = ref([]);
-const uploadData = reactive({
-  accountId: reply.value.accountId,
-  introduction: '',
-  title: '',
-  type: 'image',
-});
-
-function beforeImageUpload(rawFile: UploadRawFile) {
-  return useBeforeUpload(UploadType.Image, 2)(rawFile);
-}
-
-/** 自定义上传请求 */
-async function customRequest(options: any) {
-  const { file, onSuccess, onError } = options;
-
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('accountId', String(uploadData.accountId));
-  formData.append('type', uploadData.type);
-  formData.append('title', uploadData.title);
-  formData.append('introduction', uploadData.introduction);
-
-  try {
-    const response = await fetch(UPLOAD_URL, {
-      method: 'POST',
-      headers: HEADERS,
-      body: formData,
-    });
-
-    const result = await response.json();
-
-    if (result.code === 0) {
-      // 清空上传时的各种数据
-      fileList.value = [];
-      uploadData.title = '';
-      uploadData.introduction = '';
-
-      // 上传好的文件，本质是个素材，所以可以进行选中
-      selectMaterial(result.data);
-      message.success('上传成功');
-      onSuccess(result, file);
-    } else {
-      message.error(result.msg || '上传出错');
-      onError(new Error(result.msg || '上传失败'));
-    }
-  } catch (error) {
-    message.error('上传失败，请重试');
-    onError(error);
-  }
-}
-
-function onDelete() {
-  reply.value.mediaId = null;
-  reply.value.url = null;
-  reply.value.name = null;
-}
-
-function selectMaterial(item: any) {
-  showDialog.value = false;
-  reply.value.mediaId = item.mediaId;
-  reply.value.url = item.url;
-  reply.value.name = item.name;
-}
-</script>
-
-<template>
-  <div>
-    <!-- 情况一：已经选择好素材、或者上传好图片 -->
-    <div v-if="reply.url" class="select-item">
-      <img class="material-img" :src="reply.url" alt="图片素材" />
-      <p v-if="reply.name" class="item-name">{{ reply.name }}</p>
-      <Row class="ope-row" justify="center">
-        <Button danger shape="circle" @click="onDelete">
-          <template #icon>
-            <IconifyIcon icon="mdi:delete" />
-          </template>
-        </Button>
-      </Row>
-    </div>
-
-    <!-- 情况二：未做完上述操作 -->
-    <Row v-else class="text-center" align="middle">
-      <!-- 选择素材 -->
-      <Col :span="12" class="col-select">
-        <Button type="primary" @click="showDialog = true">
-          素材库选择
-          <template #icon>
-            <IconifyIcon icon="mdi:check-circle" />
-          </template>
-        </Button>
-        <Modal
-          v-model:open="showDialog"
-          title="选择图片"
-          :width="1200"
-          :footer="null"
-          destroy-on-close
-        >
-          <WxMaterialSelect
-            type="image"
-            :account-id="reply.accountId"
-            @select-material="selectMaterial"
-          />
-        </Modal>
-      </Col>
-
-      <!-- 文件上传 -->
-      <Col :span="12" class="col-add">
-        <Upload
-          :custom-request="customRequest"
-          :multiple="true"
-          :max-count="1"
-          :file-list="fileList"
-          :before-upload="beforeImageUpload"
-          :show-upload-list="false"
-        >
-          <Button type="primary">
-            上传图片
-            <template #icon>
-              <IconifyIcon icon="mdi:upload" />
-            </template>
-          </Button>
-        </Upload>
-        <div class="upload-tip">
-          支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
-        </div>
-      </Col>
-    </Row>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  width: 280px;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.material-img {
-  width: 100%;
-}
-
-.item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.ope-row {
-  padding-top: 10px;
-  text-align: center;
-}
-
-.col-select,
-.col-add {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-select {
-  width: 49.5%;
-}
-
-.col-add {
-  float: right;
-  width: 49.5%;
-}
-
-.upload-tip {
-  margin-top: 8px;
-  font-size: 12px;
-  line-height: 18px;
-  color: #666;
-  text-align: center;
-}
-</style>

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

@@ -1,222 +0,0 @@
-<script lang="ts" setup>
-import type { Reply } from './types';
-
-import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
-
-import { computed, reactive, ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-import { useAccessStore } from '@vben/stores';
-
-import {
-  Button,
-  Col,
-  Input,
-  message,
-  Modal,
-  Row,
-  Upload,
-} from 'ant-design-vue';
-
-import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
-import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
-
-// TODO @dylan：文件名的大小写
-
-defineOptions({ name: 'TabMusic' });
-
-const props = defineProps<{
-  modelValue: Reply;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Reply): void;
-}>();
-
-const accessStore = useAccessStore();
-const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
-
-const reply = computed<Reply>({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-});
-
-const showDialog = ref(false);
-const fileList = ref([]);
-const uploadData = reactive({
-  accountId: reply.value.accountId,
-  introduction: '',
-  title: '',
-  type: 'thumb', // 音乐类型为thumb
-});
-
-function beforeImageUpload(rawFile: UploadRawFile) {
-  return useBeforeUpload(UploadType.Image, 2)(rawFile);
-}
-
-/** 自定义上传请求 */
-async function customRequest(options: any) {
-  const { file, onSuccess, onError } = options;
-
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('accountId', String(uploadData.accountId));
-  formData.append('type', uploadData.type);
-  formData.append('title', uploadData.title);
-  formData.append('introduction', uploadData.introduction);
-
-  try {
-    const response = await fetch(UPLOAD_URL, {
-      method: 'POST',
-      headers: HEADERS,
-      body: formData,
-    });
-
-    const result = await response.json();
-
-    if (result.code === 0) {
-      // 清空上传时的各种数据
-      fileList.value = [];
-      uploadData.title = '';
-      uploadData.introduction = '';
-
-      // 上传好的文件，本质是个素材，所以可以进行选中
-      selectMaterial(result.data);
-      message.success('上传成功');
-      onSuccess(result, file);
-    } else {
-      message.error(result.msg || '上传出错');
-      onError(new Error(result.msg || '上传失败'));
-    }
-  } catch (error) {
-    message.error('上传失败，请重试');
-    onError(error);
-  }
-}
-
-function selectMaterial(item: any) {
-  showDialog.value = false;
-  reply.value.thumbMediaId = item.mediaId;
-  reply.value.thumbMediaUrl = item.url;
-}
-</script>
-
-<template>
-  <div>
-    <Row align="middle" justify="center">
-      <Col :span="6">
-        <div class="thumb-container">
-          <div class="thumb-preview">
-            <img
-              v-if="reply.thumbMediaUrl"
-              :src="reply.thumbMediaUrl"
-              alt="音乐封面"
-              class="thumb-img"
-            />
-            <IconifyIcon
-              v-else
-              icon="mdi:plus"
-              :size="40"
-              class="text-gray-400"
-            />
-          </div>
-          <div class="thumb-actions">
-            <Upload
-              :custom-request="customRequest"
-              :multiple="true"
-              :max-count="1"
-              :file-list="fileList"
-              :before-upload="beforeImageUpload"
-              :show-upload-list="false"
-            >
-              <Button type="link">本地上传</Button>
-            </Upload>
-            <Button type="link" class="ml-2" @click="showDialog = true">
-              素材库选择
-            </Button>
-          </div>
-        </div>
-        <Modal
-          v-model:open="showDialog"
-          title="选择图片"
-          :width="1200"
-          :footer="null"
-          destroy-on-close
-        >
-          <WxMaterialSelect
-            type="image"
-            :account-id="reply.accountId"
-            @select-material="selectMaterial"
-          />
-        </Modal>
-      </Col>
-      <Col :span="18">
-        <div class="input-group">
-          <Input
-            :value="reply.title || undefined"
-            placeholder="请输入标题"
-            class="mb-5"
-            @update:value="(val) => (reply.title = val || null)"
-          />
-          <Input
-            :value="reply.description || undefined"
-            placeholder="请输入描述"
-            @update:value="(val) => (reply.description = val || null)"
-          />
-        </div>
-      </Col>
-    </Row>
-    <div class="mt-5">
-      <Input
-        :value="reply.musicUrl || undefined"
-        placeholder="请输入音乐链接"
-        class="mb-5"
-        @update:value="(val) => (reply.musicUrl = val || null)"
-      />
-      <Input
-        :value="reply.hqMusicUrl || undefined"
-        placeholder="请输入高质量音乐链接"
-        @update:value="(val) => (reply.hqMusicUrl = val || null)"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.thumb-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-}
-
-.thumb-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100px;
-  height: 100px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-.thumb-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.thumb-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-</style>

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

@@ -1,111 +0,0 @@
-<script lang="ts" setup>
-import type { Reply } from './types';
-
-import { computed, ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { Button, Col, Modal, Row } from 'ant-design-vue';
-
-import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
-import { WxNews } from '#/views/mp/components/wx-news';
-
-import { NewsType } from './types';
-
-// TODO @dylan：文件名的大小写
-
-defineOptions({ name: 'TabNews' });
-
-const props = defineProps<{
-  modelValue: Reply;
-  newsType: NewsType;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Reply): void;
-}>();
-
-const reply = computed<Reply>({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-});
-
-const showDialog = ref(false);
-
-function selectMaterial(item: any) {
-  showDialog.value = false;
-  reply.value.articles = item.content.newsItem;
-}
-
-function onDelete() {
-  reply.value.articles = [];
-}
-</script>
-
-<template>
-  <div>
-    <Row>
-      <div
-        v-if="reply.articles && reply.articles.length > 0"
-        class="select-item"
-      >
-        <WxNews :articles="reply.articles" />
-        <Col class="ope-row">
-          <Button danger shape="circle" @click="onDelete">
-            <template #icon>
-              <IconifyIcon icon="mdi:delete" />
-            </template>
-          </Button>
-        </Col>
-      </div>
-
-      <!-- 选择素材 -->
-      <Col v-if="!reply.content" :span="24">
-        <Row class="text-center" align="middle">
-          <Col :span="24">
-            <Button type="primary" @click="showDialog = true">
-              {{
-                newsType === NewsType.Published
-                  ? '选择已发布图文'
-                  : '选择草稿箱图文'
-              }}
-              <template #icon>
-                <IconifyIcon icon="mdi:check-circle" />
-              </template>
-            </Button>
-          </Col>
-        </Row>
-      </Col>
-
-      <Modal
-        v-model:open="showDialog"
-        title="选择图文"
-        :width="1200"
-        :footer="null"
-        destroy-on-close
-      >
-        <WxMaterialSelect
-          type="news"
-          :account-id="reply.accountId"
-          :news-type="newsType"
-          @select-material="selectMaterial"
-        />
-      </Modal>
-    </Row>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  width: 280px;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.ope-row {
-  padding-top: 10px;
-  text-align: center;
-}
-</style>

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

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-import { Textarea } from 'ant-design-vue';
-
-// TODO @dylan：文件名的大小写
-
-const props = defineProps<{
-  modelValue?: null | string;
-}>();
-
-const emit = defineEmits<{
-  (e: 'input', v: null | string): void;
-  (e: 'update:modelValue', v: null | string): void;
-}>();
-
-const content = computed({
-  get: () => props.modelValue ?? '',
-  set: (val: string) => {
-    emit('update:modelValue', val || null);
-    emit('input', val || null);
-  },
-});
-</script>
-
-<template>
-  <Textarea v-model:value="content" :rows="5" placeholder="请输入内容" />
-</template>

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

@@ -1,195 +0,0 @@
-<script lang="ts" setup>
-import type { Reply } from './types';
-
-import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
-
-import { computed, reactive, ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-import { useAccessStore } from '@vben/stores';
-
-import {
-  Button,
-  Col,
-  Input,
-  message,
-  Modal,
-  Row,
-  Upload,
-} from 'ant-design-vue';
-
-import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
-import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
-import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
-
-// TODO @dylan：文件名的大小写
-
-defineOptions({ name: 'TabVideo' });
-
-const props = defineProps<{
-  modelValue: Reply;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Reply): void;
-}>();
-
-const accessStore = useAccessStore();
-const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
-
-const reply = computed<Reply>({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-});
-
-const showDialog = ref(false);
-const fileList = ref([]);
-const uploadData = reactive({
-  accountId: reply.value.accountId,
-  introduction: '',
-  title: '',
-  type: 'video',
-});
-
-function beforeVideoUpload(rawFile: UploadRawFile) {
-  return useBeforeUpload(UploadType.Video, 10)(rawFile);
-}
-
-/** 自定义上传请求 */
-async function customRequest(options: any) {
-  const { file, onSuccess, onError } = options;
-
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('accountId', String(uploadData.accountId));
-  formData.append('type', uploadData.type);
-  formData.append('title', uploadData.title);
-  formData.append('introduction', uploadData.introduction);
-
-  try {
-    const response = await fetch(UPLOAD_URL, {
-      method: 'POST',
-      headers: HEADERS,
-      body: formData,
-    });
-
-    const result = await response.json();
-
-    if (result.code === 0) {
-      // 清空上传时的各种数据
-      fileList.value = [];
-      uploadData.title = '';
-      uploadData.introduction = '';
-
-      // 选择素材
-      selectMaterial(result.data);
-      message.success('上传成功');
-      onSuccess(result, file);
-    } else {
-      message.error(result.msg || '上传出错');
-      onError(new Error(result.msg || '上传失败'));
-    }
-  } catch (error) {
-    message.error('上传失败，请重试');
-    onError(error);
-  }
-}
-
-/** 选择素材后设置 */
-function selectMaterial(item: any) {
-  showDialog.value = false;
-
-  reply.value.mediaId = item.mediaId;
-  reply.value.url = item.url;
-  reply.value.name = item.name;
-
-  // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
-  if (item.title) {
-    reply.value.title = item.title || '';
-  }
-  if (item.introduction) {
-    reply.value.description = item.introduction || '';
-  }
-}
-</script>
-
-<template>
-  <div>
-    <Row :gutter="[0, 16]">
-      <Col :span="24">
-        <Input
-          :value="reply.title || undefined"
-          placeholder="请输入标题"
-          @update:value="(val) => (reply.title = val || null)"
-        />
-      </Col>
-      <Col :span="24">
-        <Input
-          :value="reply.description || undefined"
-          placeholder="请输入描述"
-          @update:value="(val) => (reply.description = val || null)"
-        />
-      </Col>
-      <Col :span="24">
-        <Row class="ope-row" justify="center">
-          <WxVideoPlayer v-if="reply.url" :url="reply.url" />
-        </Row>
-      </Col>
-      <Col :span="24">
-        <Row class="text-center" align="middle">
-          <!-- 选择素材 -->
-          <Col :span="12">
-            <Button type="primary" @click="showDialog = true">
-              素材库选择
-              <template #icon>
-                <IconifyIcon icon="mdi:check-circle" />
-              </template>
-            </Button>
-            <Modal
-              v-model:open="showDialog"
-              title="选择视频"
-              :width="1200"
-              :footer="null"
-              destroy-on-close
-            >
-              <WxMaterialSelect
-                type="video"
-                :account-id="reply.accountId"
-                @select-material="selectMaterial"
-              />
-            </Modal>
-          </Col>
-
-          <!-- 文件上传 -->
-          <Col :span="12">
-            <Upload
-              :custom-request="customRequest"
-              :multiple="true"
-              :max-count="1"
-              :file-list="fileList"
-              :before-upload="beforeVideoUpload"
-              :show-upload-list="false"
-            >
-              <Button type="primary">
-                新建视频
-                <template #icon>
-                  <IconifyIcon icon="mdi:upload" />
-                </template>
-              </Button>
-            </Upload>
-          </Col>
-        </Row>
-      </Col>
-    </Row>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.ope-row {
-  width: 100%;
-  padding-top: 10px;
-  text-align: center;
-}
-</style>

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

@@ -1,219 +0,0 @@
-<script lang="ts" setup>
-import type { Reply } from './types';
-
-import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
-
-import { computed, reactive, ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-import { useAccessStore } from '@vben/stores';
-
-import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
-
-import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
-import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
-import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
-
-// TODO @dylan：文件名的大小写
-
-defineOptions({ name: 'TabVoice' });
-
-const props = defineProps<{
-  modelValue: Reply;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Reply): void;
-}>();
-
-const accessStore = useAccessStore();
-const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
-
-const reply = computed<Reply>({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-});
-
-const showDialog = ref(false);
-const fileList = ref([]);
-const uploadData = reactive({
-  accountId: reply.value.accountId,
-  introduction: '',
-  title: '',
-  type: 'voice',
-});
-
-function beforeVoiceUpload(rawFile: UploadRawFile) {
-  return useBeforeUpload(UploadType.Voice, 10)(rawFile);
-}
-
-/** 自定义上传请求 */
-async function customRequest(options: any) {
-  const { file, onSuccess, onError } = options;
-
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('accountId', String(uploadData.accountId));
-  formData.append('type', uploadData.type);
-  formData.append('title', uploadData.title);
-  formData.append('introduction', uploadData.introduction);
-
-  try {
-    const response = await fetch(UPLOAD_URL, {
-      method: 'POST',
-      headers: HEADERS,
-      body: formData,
-    });
-
-    const result = await response.json();
-
-    if (result.code === 0) {
-      // 清空上传时的各种数据
-      fileList.value = [];
-      uploadData.title = '';
-      uploadData.introduction = '';
-
-      // 上传好的文件，本质是个素材，所以可以进行选中
-      selectMaterial(result.data);
-      message.success('上传成功');
-      onSuccess(result, file);
-    } else {
-      message.error(result.msg || '上传出错');
-      onError(new Error(result.msg || '上传失败'));
-    }
-  } catch (error) {
-    message.error('上传失败，请重试');
-    onError(error);
-  }
-}
-
-function onDelete() {
-  reply.value.mediaId = null;
-  reply.value.url = null;
-  reply.value.name = null;
-}
-
-function selectMaterial(item: Reply) {
-  showDialog.value = false;
-  reply.value.mediaId = item.mediaId;
-  reply.value.url = item.url;
-  reply.value.name = item.name;
-}
-</script>
-
-<template>
-  <div>
-    <div v-if="reply.url" class="select-item">
-      <p class="item-name">{{ reply.name }}</p>
-      <Row class="ope-row" justify="center">
-        <WxVoicePlayer :url="reply.url" />
-      </Row>
-      <Row class="ope-row" justify="center">
-        <Button danger shape="circle" @click="onDelete">
-          <template #icon>
-            <IconifyIcon icon="mdi:delete" />
-          </template>
-        </Button>
-      </Row>
-    </div>
-
-    <Row v-else class="text-center">
-      <!-- 选择素材 -->
-      <Col :span="12" class="col-select">
-        <Button type="primary" @click="showDialog = true">
-          素材库选择
-          <template #icon>
-            <IconifyIcon icon="mdi:check-circle" />
-          </template>
-        </Button>
-        <Modal
-          v-model:open="showDialog"
-          title="选择语音"
-          :width="1200"
-          :footer="null"
-          destroy-on-close
-        >
-          <WxMaterialSelect
-            type="voice"
-            :account-id="reply.accountId"
-            @select-material="selectMaterial"
-          />
-        </Modal>
-      </Col>
-
-      <!-- 文件上传 -->
-      <Col :span="12" class="col-add">
-        <Upload
-          :custom-request="customRequest"
-          :multiple="true"
-          :max-count="1"
-          :file-list="fileList"
-          :before-upload="beforeVoiceUpload"
-          :show-upload-list="false"
-        >
-          <Button type="primary">
-            点击上传
-            <template #icon>
-              <IconifyIcon icon="mdi:upload" />
-            </template>
-          </Button>
-        </Upload>
-        <div class="upload-tip">
-          格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
-        </div>
-      </Col>
-    </Row>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.ope-row {
-  width: 100%;
-  padding-top: 10px;
-  text-align: center;
-}
-
-.col-select,
-.col-add {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-select {
-  width: 49.5%;
-}
-
-.col-add {
-  float: right;
-  width: 49.5%;
-}
-
-.upload-tip {
-  margin-top: 8px;
-  font-size: 12px;
-  line-height: 18px;
-  color: #666;
-  text-align: center;
-}
-</style>

apps/web-antd/src/views/mp/components/wx-reply/components/types.ts

@@ -1,54 +0,0 @@
-import type { Ref } from 'vue';
-
-import { unref } from 'vue';
-
-export enum ReplyType {
-  Image = 'image',
-  Music = 'music',
-  News = 'news',
-  Text = 'text',
-  Video = 'video',
-  Voice = 'voice',
-}
-
-export interface Reply {
-  accountId: number;
-  articles?: any[];
-  content?: null | string;
-  description?: null | string;
-  hqMusicUrl?: null | string;
-  introduction?: null | string;
-  mediaId?: null | string;
-  musicUrl?: null | string;
-  name?: null | string;
-  thumbMediaId?: null | string;
-  thumbMediaUrl?: null | string;
-  title?: null | string;
-  type: ReplyType;
-  url?: null | string;
-}
-
-export enum NewsType {
-  Draft = '2',
-  Published = '1',
-}
-
-/** 利用旧的reply[accountId, type]初始化新的Reply */
-export const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
-  return {
-    accountId: unref(old).accountId,
-    articles: [],
-    content: null,
-    description: null,
-    hqMusicUrl: null,
-    introduction: null,
-    mediaId: null,
-    musicUrl: null,
-    name: null,
-    thumbMediaId: null,
-    thumbMediaUrl: null,
-    title: null,
-    type: unref(old).type,
-    url: null,
-  };
-};

apps/web-antd/src/views/mp/components/wx-reply/index.ts

@@ -1,4 +1,3 @@
-export * from './components/types';
-export { createEmptyReply } from './components/types';
+export * from './types';
 
-export { default as WxReplySelect } from './main.vue';
+export { default as WxReply } from './wx-reply.vue';

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

@@ -1,235 +0,0 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  芋道源码：
-  ① 移除多余的 rep 为前缀的变量，让 message 消息更简单
-  ② 代码优化，补充注释，提升阅读性
-  ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
-  ④ 支持发送【视频】消息时，支持新建视频
--->
-<script lang="ts" setup>
-import type { Reply } from './components/types';
-
-import { computed, ref, unref, watch } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { Row, Tabs } from 'ant-design-vue';
-
-import TabImage from './components/TabImage.vue';
-import TabMusic from './components/TabMusic.vue';
-import TabNews from './components/TabNews.vue';
-import TabText from './components/TabText.vue';
-import TabVideo from './components/TabVideo.vue';
-import TabVoice from './components/TabVoice.vue';
-import { createEmptyReply, NewsType, ReplyType } from './components/types';
-
-defineOptions({ name: 'WxReplySelect' });
-
-const props = withDefaults(defineProps<Props>(), {
-  newsType: undefined,
-});
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Reply): void;
-}>();
-
-interface Props {
-  modelValue: Reply;
-  newsType?: NewsType;
-}
-
-const reply = computed<Reply>({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-});
-
-const tabCache = new Map<ReplyType, Reply>(); // 作为多个标签保存各自 Reply 的缓存
-const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply 进行赋值会产生了循环调用
-
-watch(
-  currentTab,
-  (newTab, oldTab) => {
-    // 第一次进入：oldTab 为 undefined
-    // 判断 newTab 是因为 Reply 为 Partial
-    if (oldTab === undefined || newTab === undefined) {
-      return;
-    }
-
-    tabCache.set(oldTab, unref(reply));
-
-    // 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
-    const temp = tabCache.get(newTab);
-    if (temp) {
-      reply.value = temp;
-    } else {
-      const newData = createEmptyReply(reply);
-      newData.type = newTab;
-      reply.value = newData;
-    }
-  },
-  {
-    immediate: true,
-  },
-);
-
-/** 清除除了`type`, `accountId`的字段 */
-function clear() {
-  reply.value = createEmptyReply(reply);
-}
-
-defineExpose({
-  clear,
-});
-</script>
-
-<template>
-  <Tabs v-model:active-key="currentTab" type="card">
-    <!-- 类型 1：文本 -->
-    <Tabs.TabPane :key="ReplyType.Text">
-      <template #tab>
-        <Row align="middle">
-          <IconifyIcon icon="mdi:text" class="mr-1" />
-          文本
-        </Row>
-      </template>
-      <TabText v-model="reply.content" />
-    </Tabs.TabPane>
-
-    <!-- 类型 2：图片 -->
-    <Tabs.TabPane :key="ReplyType.Image">
-      <template #tab>
-        <Row align="middle">
-          <IconifyIcon icon="mdi:image" class="mr-1" />
-          图片
-        </Row>
-      </template>
-      <TabImage v-model="reply" />
-    </Tabs.TabPane>
-
-    <!-- 类型 3：语音 -->
-    <Tabs.TabPane :key="ReplyType.Voice">
-      <template #tab>
-        <Row align="middle">
-          <IconifyIcon icon="mdi:microphone" class="mr-1" />
-          语音
-        </Row>
-      </template>
-      <TabVoice v-model="reply" />
-    </Tabs.TabPane>
-
-    <!-- 类型 4：视频 -->
-    <Tabs.TabPane :key="ReplyType.Video">
-      <template #tab>
-        <Row align="middle">
-          <IconifyIcon icon="mdi:video" class="mr-1" />
-          视频
-        </Row>
-      </template>
-      <TabVideo v-model="reply" />
-    </Tabs.TabPane>
-
-    <!-- 类型 5：图文 -->
-    <Tabs.TabPane :key="ReplyType.News">
-      <template #tab>
-        <Row align="middle">
-          <IconifyIcon icon="mdi:newspaper" class="mr-1" />
-          图文
-        </Row>
-      </template>
-      <TabNews v-model="reply" :news-type="newsType" />
-    </Tabs.TabPane>
-
-    <!-- 类型 6：音乐 -->
-    <Tabs.TabPane :key="ReplyType.Music">
-      <template #tab>
-        <Row align="middle">
-          <IconifyIcon icon="mdi:music" class="mr-1" />
-          音乐
-        </Row>
-      </template>
-      <TabMusic v-model="reply" />
-    </Tabs.TabPane>
-  </Tabs>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  width: 280px;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.select-item2 {
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.ope-row {
-  padding-top: 10px;
-  text-align: center;
-}
-
-.input-margin-bottom {
-  margin-bottom: 2%;
-}
-
-.item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.el-form-item__content {
-  line-height: unset !important;
-}
-
-.col-select {
-  width: 49.5%;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-select2 {
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-add {
-  float: right;
-  width: 49.5%;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.avatar-uploader-icon {
-  width: 100px !important;
-  height: 100px !important;
-  font-size: 28px;
-  line-height: 100px !important;
-  color: #8c939d;
-  text-align: center;
-  border: 1px solid #d9d9d9;
-}
-
-.material-img {
-  width: 100%;
-}
-
-.thumb-div {
-  display: inline-block;
-  text-align: center;
-}
-
-.item-infos {
-  width: 30%;
-  margin: auto;
-}
-</style>

apps/web-antd/src/views/mp/components/wx-video-play/index.ts

@@ -1 +1 @@
-export { default as WxVideoPlayer } from './main.vue';
+export { default as WxVideoPlayer } from './wx-video-play.vue';

apps/web-antd/src/views/mp/components/wx-video-play/main.vue

@@ -1,55 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { VideoPlayer } from '@videojs-player/vue';
-import { Modal } from 'ant-design-vue';
-
-import 'video.js/dist/video-js.css';
-
-defineOptions({ name: 'WxVideoPlayer' });
-
-const props = defineProps<{
-  url: string;
-}>();
-
-const dialogVideo = ref(false);
-
-function playVideo() {
-  dialogVideo.value = true;
-}
-</script>
-
-<template>
-  <!-- 微信消息 - 视频播放 -->
-  <div class="cursor-pointer" @click="playVideo()">
-    <!-- 提示 -->
-    <div class="flex items-center">
-      <IconifyIcon icon="mdi:play-circle" :size="32" class="mr-2" />
-      <p class="text-sm">点击播放视频</p>
-    </div>
-
-    <!-- 弹窗播放 -->
-    <Modal
-      v-model:open="dialogVideo"
-      title="视频播放"
-      :footer="null"
-      :width="850"
-      destroy-on-close
-    >
-      <VideoPlayer
-        v-if="dialogVideo"
-        class="video-player vjs-big-play-centered"
-        :src="props.url"
-        poster=""
-        crossorigin="anonymous"
-        controls
-        playsinline
-        :volume="0.6"
-        :width="800"
-        :playback-rates="[0.7, 1.0, 1.5, 2.0]"
-      />
-    </Modal>
-  </div>
-</template>

apps/web-antd/src/views/mp/components/wx-voice-play/index.ts

@@ -1 +1 @@
-export { default as WxVoicePlayer } from './main.vue';
+export { default as WxVoicePlayer } from './wx-voice-play.vue';

apps/web-antd/src/views/mp/components/wx-voice-play/main.vue

@@ -1,100 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { Tag } from 'ant-design-vue';
-import BenzAMRRecorder from 'benz-amr-recorder'; // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
-
-defineOptions({ name: 'WxVoicePlayer' });
-
-const props = withDefaults(
-  defineProps<{
-    content?: string; // 语音文本
-    url: string; // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
-  }>(),
-  {
-    content: '',
-  },
-);
-
-const amr = ref<any>();
-const playing = ref(false);
-const duration = ref<number>();
-
-/** 处理点击，播放或暂停 */
-function playVoice() {
-  // 情况一：未初始化，则创建 BenzAMRRecorder
-  if (amr.value === undefined) {
-    amrInit();
-    return;
-  }
-  // 情况二：已经初始化，则根据情况播放或暂时
-  if (amr.value.isPlaying()) {
-    amrStop();
-  } else {
-    amrPlay();
-  }
-}
-
-/** 音频初始化 */
-function amrInit() {
-  amr.value = new BenzAMRRecorder();
-  // 设置播放
-  amr.value.initWithUrl(props.url).then(() => {
-    amrPlay();
-    duration.value = amr.value.getDuration();
-  });
-  // 监听暂停
-  amr.value.onEnded(() => {
-    playing.value = false;
-  });
-}
-
-/** 音频播放 */
-function amrPlay() {
-  playing.value = true;
-  amr.value.play();
-}
-
-/** 音频暂停 */
-function amrStop() {
-  playing.value = false;
-  amr.value.stop();
-}
-</script>
-
-<template>
-  <!-- 微信消息 - 语音播放 -->
-  <div class="wx-voice-div cursor-pointer" @click="playVoice">
-    <div class="flex items-center">
-      <IconifyIcon v-if="playing !== true" icon="mdi:play-circle" :size="32" />
-      <IconifyIcon v-else icon="mdi:pause-circle" :size="32" />
-      <span v-if="duration" class="amr-duration">{{ duration }} 秒</span>
-    </div>
-    <div v-if="content" class="mt-2">
-      <Tag color="success">语音识别</Tag>
-      {{ content }}
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.wx-voice-div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-width: 120px;
-  min-height: 50px;
-  padding: 8px 12px;
-  background-color: #eaeaea;
-  border-radius: 10px;
-}
-
-.amr-duration {
-  margin-left: 8px;
-  font-size: 12px;
-}
-</style>

apps/web-antd/src/views/mp/draft/components/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';
+import { WxMaterialSelect } from '#/views/mp/components';
 
 const props = defineProps<{
   isFirst: boolean;
@@ -53,8 +53,9 @@ function onMaterialSelected(item: any) {
   newsItem.value.thumbUrl = item.url;
 }
 // TODO @hw：注释都补充下哈；
-const onBeforeUpload = (file: UploadFile) =>
-  useBeforeUpload(UploadType.Image, 2)(file as any);
+function onBeforeUpload(file: UploadFile) {
+  return useBeforeUpload(UploadType.Image, 2)(file as any);
+}
 
 // TODO @hw：注释都补充下哈；
 function onUploadChange(info: any) {

apps/web-antd/src/views/mp/draft/components/draft-table.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Article } from './types';
 
-import { WxNews } from '#/views/mp/components/wx-news';
+import { WxNews } from '#/views/mp/components';
 
 defineOptions({ name: 'DraftTableCell' });
 

apps/web-antd/src/views/mp/draft/components/types.ts

@@ -23,7 +23,7 @@ interface Article {
   updateTime: number;
 }
 
-const createEmptyNewsItem = (): NewsItem => {
+function createEmptyNewsItem(): NewsItem {
   return {
     title: '',
     thumbMediaId: '',
@@ -36,7 +36,7 @@ const createEmptyNewsItem = (): NewsItem => {
     onlyFansCanComment: 0,
     thumbUrl: '',
   };
-};
+}
 
 export type { Article, NewsItem, NewsItemList };
 export { createEmptyNewsItem };

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

@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { markRaw } from 'vue';
 
-import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
+import { WxAccountSelect } from '#/views/mp/components';
 
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {

apps/web-antd/src/views/mp/material/components/VideoTable.vue

@@ -10,7 +10,7 @@ import { formatDate2 } from '@vben/utils';
 import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
+import { WxVideoPlayer } from '#/views/mp/components';
 
 // TODO @dylan：vue 组件名小写 + 中划线
 
@@ -87,7 +87,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     showOverflow: 'tooltip',
-  } as VxeTableGridOptions<any>,  // TODO @dylan：这里有个告警哈；
+  } as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
 });
 
 function handleDownload(url: string) {

apps/web-antd/src/views/mp/material/components/VoiceTable.vue

@@ -10,7 +10,7 @@ import { formatDate2 } from '@vben/utils';
 import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
+import { WxVoicePlayer } from '#/views/mp/components';
 
 // TODO @dylan：vue 组件名小写 + 中划线
 

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

@@ -16,7 +16,7 @@ import {
 } from 'ant-design-vue';
 
 import * as MpMaterialApi from '#/api/mp/material';
-import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
+import { WxAccountSelect } from '#/views/mp/components';
 
 import ImageTable from './components/ImageTable.vue';
 import { UploadType } from './components/upload';

apps/web-antd/src/views/mp/menu/components/menu-editor.vue

@@ -14,9 +14,7 @@ import {
   Select,
 } from 'ant-design-vue';
 
-import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
-import { WxNews } from '#/views/mp/components/wx-news';
-import { WxReplySelect } from '#/views/mp/components/wx-reply';
+import { WxMaterialSelect, WxNews, WxReply } from '#/views/mp/components';
 
 import menuOptions from './menuOptions';
 
@@ -218,7 +216,7 @@ function deleteMaterial() {
           class="configur-content"
           v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
         >
-          <WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
+          <WxReply v-if="hackResetWxReplySelect" v-model="menu.reply" />
         </div>
         <!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
       </div>

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

@@ -9,7 +9,7 @@ import { handleTree } from '@vben/utils';
 import { Button, Form, message } from 'ant-design-vue';
 
 import { deleteMenu, getMenuList, saveMenu } from '#/api/mp/menu';
-import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
+import { WxAccountSelect } from '#/views/mp/components';
 import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/components';
 import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
 

apps/web-antd/src/views/mp/message/MessageTable.vue

@@ -8,12 +8,14 @@ import { formatDate2 } from '@vben/utils';
 import { Button, Image, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { WxLocation } from '#/views/mp/components/wx-location';
-import { MsgType } from '#/views/mp/components/wx-msg/types';
-import { WxMusic } from '#/views/mp/components/wx-music';
-import { WxNews } from '#/views/mp/components/wx-news';
-import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
-import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
+import {
+  MsgType,
+  WxLocation,
+  WxMusic,
+  WxNews,
+  WxVideoPlayer,
+  WxVoicePlayer,
+} from '#/views/mp/components';
 
 // TODO @dylan：vue 组件名小写 + 中划线
 

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

@@ -18,9 +18,7 @@ import {
 } from 'ant-design-vue';
 
 import { getMessagePage } from '#/api/mp/message';
-import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
-import { WxMsg } from '#/views/mp/components/wx-msg';
-import { MsgType } from '#/views/mp/components/wx-msg/types';
+import { MsgType, WxAccountSelect, WxMsg } from '#/views/mp/components';
 
 import MessageTable from './MessageTable.vue';