refactor: mp comps

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

@@ -0,0 +1,220 @@
+<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';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+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/tab-music.vue

@@ -0,0 +1,220 @@
+<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';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+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/tab-news.vue

@@ -0,0 +1,108 @@
+<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, WxNews } from '#/views/mp/components';
+
+import { NewsType } from '../constants';
+
+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/tab-text.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { Textarea } from 'ant-design-vue';
+
+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/tab-video.vue

@@ -0,0 +1,192 @@
+<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, WxVideoPlayer } from '#/views/mp/components';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+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/tab-voice.vue

@@ -0,0 +1,216 @@
+<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, WxVoicePlayer } from '#/views/mp/components';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+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/types.ts

@@ -0,0 +1,42 @@
+import type { Ref } from 'vue';
+
+import type { ReplyType } from '../constants';
+
+import { unref } from 'vue';
+
+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;
+}
+
+/** 利用旧的reply[accountId, type]初始化新的Reply */
+export function 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/wx-reply.vue

@@ -0,0 +1,236 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  芋道源码：
+  ① 移除多余的 rep 为前缀的变量，让 message 消息更简单
+  ② 代码优化，补充注释，提升阅读性
+  ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
+  ④ 支持发送【视频】消息时，支持新建视频
+-->
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import { computed, ref, unref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Row, Tabs } from 'ant-design-vue';
+
+import { NewsType, ReplyType } from '../constants';
+import TabImage from './tab-image.vue';
+import TabMusic from './tab-music.vue';
+import TabNews from './tab-news.vue';
+import TabText from './tab-text.vue';
+import TabVideo from './tab-video.vue';
+import TabVoice from './tab-voice.vue';
+import { createEmptyReply } from './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>