smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【antd】【mp】mp 的代码评审（components）

Browse Source
This commit is contained in:
YunaiV
2025-11-20 21:09:02 +08:00
parent c39a445d77
commit 8d2da0a4d1
62 changed files with 631 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/views/mp/components/index.ts
View File

@@ -1,4 +1,4 @@
export { default as WxAccountSelect } from './wx-account-select/account-select.vue';
export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';
export { default as WxLocation } from './wx-location/wx-location.vue';
export { default as WxMaterialSelect } from './wx-material-select/wx-material-select.vue';
export { default as WxMsg } from './wx-msg/msg.vue';

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

@@ -1 +1,3 @@
export { default as WxAccountSelect } from './account-select.vue';
export { default as WxAccountSelect } from './wx-account-select.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

0
apps/web-antd/src/views/mp/components/wx-account-select/account-select.vue → apps/web-antd/src/views/mp/components/wx-account-select/wx-account-select.vue
View File

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

@@ -1,2 +1,4 @@
export * from './types';
export { default as WxLocation } from './wx-location.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

1
apps/web-antd/src/views/mp/components/wx-location/types.ts
View File

@@ -1,3 +1,4 @@
// TODO @hw：ele 没这个文件，是不是也要搞个？
export interface WxLocationProps {
label: string;
locationX: number;

2
apps/web-antd/src/views/mp/components/wx-location/wx-location.vue
View File

@@ -9,7 +9,7 @@ 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 哈
// TODO @dylan：@hw：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
const props = withDefaults(defineProps<WxLocationProps>(), {
qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
});

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

@@ -1 +1,3 @@
export { default as WxMaterialSelect } from './wx-material-select.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

7
apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
View File

@@ -15,6 +15,7 @@ import { getFreePublishPage } from '#/api/mp/freePublish';
import { getMaterialPage } from '#/api/mp/material';
import { WxNews, WxVideoPlayer, WxVoicePlayer } from '#/views/mp/components';
/** 微信素材选择 */
defineOptions({ name: 'WxMaterialSelect' });
const props = withDefaults(
@@ -42,7 +43,7 @@ const queryParams = reactive({
}); // 查询参数
const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
// TODO @dylan：any 有 linter 告警；看看别的模块哈
// TODO @hw：@dylan：any 有 linter 告警；看看别的模块哈
{
field: 'mediaId',
title: '编号',
@@ -77,7 +78,7 @@ const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
];
const videoGridColumns: VxeTableGridOptions<any>['columns'] = [
// TODO @dylan：any 有 linter 告警；看看别的模块哈
// TODO @hw：@dylan：any 有 linter 告警；看看别的模块哈
{
field: 'mediaId',
title: '编号',
@@ -381,7 +382,7 @@ watch(
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
@media (width >= 992px) and (width <= 1300px) {
.waterfall {
column-count: 3;

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

@@ -1,3 +1,5 @@
export * from './types';
export { default as WxMsg } from './wx-msg.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

4
apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
View File

@@ -17,7 +17,7 @@ const props = defineProps<{
const SendFrom = {
MpBot: 2,
User: 1,
} as const;
} as const; // 发送来源
function getAvatar(sendFrom: number) {
return sendFrom === SendFrom.User
@@ -63,7 +63,7 @@ function getNickname(sendFrom: number) {
<style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
/** TODO @dylan：@hw 看看有没适合 tindwind 的哈。 */
@import url('./comment.scss');
@import url('./card.scss');

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

@@ -1,3 +1,5 @@
// TODO @hw：用 MpUserApi 里的 user 可以么？
export interface User {
accountId: number;
avatar: string;

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

@@ -1 +1,3 @@
export { default as WxMusic } from './wx-music.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

5
apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
View File

@@ -3,6 +3,7 @@ import type { WxMusicProps } from './types';
import { computed } from 'vue';
/** 微信消息 - 音乐 */
defineOptions({ name: 'WxMusic' });
const props = withDefaults(defineProps<WxMusicProps>(), {
@@ -21,8 +22,8 @@ defineExpose({
</script>
<template>
<!-- 微信消息 - 音乐 -->
<div>
<!-- TODO @hw：是不是用 antd link 更好？ -->
<a :href="href" target="_blank" class="text-success no-underline">
<div class="music-card">
<div class="music-avatar">
@@ -38,7 +39,7 @@ defineExpose({
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
.music-card {
display: flex;

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

@@ -1 +1,3 @@
export { default as WxNews } from './wx-news.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

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

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import { Image } from 'ant-design-vue';
/** 微信消息 - 图文 */
defineOptions({ name: 'WxNews' });
const props = withDefaults(
@@ -18,7 +19,6 @@ defineExpose({
</script>
<template>
<!-- 微信消息 - 图文 -->
<div class="news-home">
<div v-for="(article, index) in articles" :key="index" class="news-div">
<!-- 头条 -->
@@ -52,7 +52,7 @@ defineExpose({
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
.news-home {
width: 100%;

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

@@ -1,3 +1,5 @@
export * from './types';
export { default as WxReply } from './wx-reply.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

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

@@ -26,7 +26,6 @@ const emit = defineEmits<{
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),
@@ -41,6 +40,7 @@ const uploadData = reactive({
type: 'image',
});
/** 图片上传前校验 */
function beforeImageUpload(rawFile: UploadRawFile) {
return useBeforeUpload(UploadType.Image, 2)(rawFile);
}
@@ -65,6 +65,7 @@ async function customRequest(options: any) {
const result = await response.json();
// TODO @hw：if return 风格，简化掉。if (result.code !=== 0) { ... }
if (result.code === 0) {
// 清空上传时的各种数据
fileList.value = [];

5
apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue
View File

@@ -21,6 +21,8 @@ import {
import { WxMaterialSelect } from '#/views/mp/components';
import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
// TODO @hw：类似 tab-image.vue 的建议
defineOptions({ name: 'TabMusic' });
const props = defineProps<{
@@ -46,9 +48,10 @@ const uploadData = reactive({
accountId: reply.value.accountId,
introduction: '',
title: '',
type: 'thumb', // 音乐类型为thumb
type: 'thumb', // 音乐类型为 thumb
});
/** 图片上传前校验 */
function beforeImageUpload(rawFile: UploadRawFile) {
return useBeforeUpload(UploadType.Image, 2)(rawFile);
}

5
apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue
View File

@@ -28,11 +28,13 @@ const reply = computed<Reply>({
const showDialog = ref(false);
/** 选择素材 */
function selectMaterial(item: any) {
showDialog.value = false;
reply.value.articles = item.content.newsItem;
}
/** 删除图文 */
function onDelete() {
reply.value.articles = [];
}
@@ -72,7 +74,6 @@ function onDelete() {
</Col>
</Row>
</Col>
<Modal
v-model:open="showDialog"
title="选择图文"
@@ -92,7 +93,7 @@ function onDelete() {
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
.select-item {
width: 280px;
padding: 10px;

2
apps/web-antd/src/views/mp/components/wx-reply/tab-video.vue
View File

@@ -49,6 +49,7 @@ const uploadData = reactive({
type: 'video',
});
/** 视频上传前校验 */
function beforeVideoUpload(rawFile: UploadRawFile) {
return useBeforeUpload(UploadType.Video, 10)(rawFile);
}
@@ -73,6 +74,7 @@ async function customRequest(options: any) {
const result = await response.json();
// TODO @hw：也采用类似 ele 的 if return(res.code !== 0) return 写法；
if (result.code === 0) {
// 清空上传时的各种数据
fileList.value = [];

6
apps/web-antd/src/views/mp/components/wx-reply/tab-voice.vue
View File

@@ -41,6 +41,7 @@ const uploadData = reactive({
type: 'voice',
});
/** 语音上传前校验 */
function beforeVoiceUpload(rawFile: UploadRawFile) {
return useBeforeUpload(UploadType.Voice, 10)(rawFile);
}
@@ -65,6 +66,7 @@ async function customRequest(options: any) {
const result = await response.json();
// TODO @hw：if result.code !== 0 return，代码简洁一点。
if (result.code === 0) {
// 清空上传时的各种数据
fileList.value = [];
@@ -85,12 +87,14 @@ async function customRequest(options: any) {
}
}
/** 删除语音 */
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;
@@ -165,7 +169,7 @@ function selectMaterial(item: Reply) {
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
.select-item {
padding: 10px;
margin: 0 auto 10px;

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

@@ -21,7 +21,7 @@ export interface Reply {
url?: null | string;
}
/** 利用旧的reply[accountId, type]初始化新的Reply */
/** 利用旧的 reply[accountId, type] 初始化新的 Reply */
export function createEmptyReply(old: Ref<Reply> | Reply): Reply {
return {
accountId: unref(old).accountId,

16
apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
View File

@@ -1,12 +1,3 @@
<!--
- 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';
@@ -25,6 +16,7 @@ import TabVideo from './tab-video.vue';
import TabVoice from './tab-voice.vue';
import { createEmptyReply } from './types';
/** 消息回复选择 */
defineOptions({ name: 'WxReplySelect' });
const props = withDefaults(defineProps<Props>(), {
@@ -34,16 +26,16 @@ const emit = defineEmits<{
(e: 'update:modelValue', v: Reply): void;
}>();
// TODO @hw：antd 和 ele 风格不同，需要统一；
interface Props {
modelValue: Reply | undefined;
newsType?: NewsType;
}
// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
const defaultReply: Reply = {
accountId: -1,
type: ReplyType.Text,
};
}; // 提供一个默认的 Reply 对象，避免 undefined 导致的错误
const reply = computed<Reply>({
get: () => props.modelValue || defaultReply,
@@ -53,6 +45,7 @@ const reply = computed<Reply>({
const tabCache = new Map<ReplyType, Reply>(); // 作为多个标签保存各自 Reply 的缓存
const currentTab = ref<ReplyType>(props.modelValue?.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply 进行赋值会产生了循环调用
// TODO @hw：antd 和 ele 风格不同，需要统一；
// 监听 modelValue 变化，同步更新 currentTab 和缓存
watch(
() => props.modelValue,
@@ -71,6 +64,7 @@ watch(
{ immediate: true, deep: true },
);
// TODO @hw：antd 和 ele 风格不同，需要统一；
watch(
currentTab,
(newTab, oldTab) => {

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

@@ -1 +1,3 @@
export { default as WxVideoPlayer } from './wx-video-play.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

2
apps/web-antd/src/views/mp/components/wx-video-play/wx-video-play.vue
View File

@@ -8,6 +8,7 @@ import { Modal } from 'ant-design-vue';
import 'video.js/dist/video-js.css';
/** 微信消息 - 视频 */
defineOptions({ name: 'WxVideoPlayer' });
const props = defineProps<{
@@ -22,7 +23,6 @@ function playVideo() {
</script>
<template>
<!-- 微信消息 - 视频播放 -->
<div class="cursor-pointer" @click="playVideo()">
<!-- 提示 -->
<div class="flex items-center">

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

@@ -1 +1,3 @@
export { default as WxVoicePlayer } from './wx-voice-play.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

3
apps/web-antd/src/views/mp/components/wx-voice-play/wx-voice-play.vue
View File

@@ -6,6 +6,7 @@ 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(
@@ -62,10 +63,10 @@ function amrStop() {
playing.value = false;
amr.value.stop();
}
// TODO 芋艿：下面样式有点问题
</script>
<template>
<!-- 微信消息 - 语音播放 -->
<div class="wx-voice-div cursor-pointer" @click="playVoice">
<div class="flex items-center">
<IconifyIcon

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

@@ -12,7 +12,7 @@ import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { WxVideoPlayer } from '#/views/mp/components';
// TODO @dylan：vue 组件名小写 + 中划线
// TODO @dylan：@hw：vue 组件名小写 + 中划线
const props = defineProps<{
list: any[];

1
apps/web-ele/src/views/mp/autoReply/modules/types.ts
View File

@@ -1,5 +1,6 @@
// 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
// 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
// TODO @hw：ele 相比 antd 多了，看看要不要统一下；
export enum MsgType {
Follow = 1,
Keyword = 3,

4
apps/web-ele/src/views/mp/components/index.ts
View File

@@ -1,5 +1,3 @@
// 统一导出所有模块组件
export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';
export { default as WxLocation } from './wx-location/wx-location.vue';
@@ -20,3 +18,5 @@ export { default as WxReplySelect } from './wx-reply/wx-reply.vue';
export { default as WxVideoPlayer } from './wx-video-play/wx-video-play.vue';
export { default as WxVoicePlayer } from './wx-voice-play/wx-voice-play.vue';
// TODO @hw：是不是要和 antd 保持一致哈？

2
apps/web-ele/src/views/mp/components/wx-account-select/index.ts
View File

@@ -1 +1,3 @@
export { default } from './wx-account-select.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

1
apps/web-ele/src/views/mp/components/wx-account-select/wx-account-select.vue
View File

@@ -10,6 +10,7 @@ import { ElMessage, ElOption, ElSelect } from 'element-plus';
import { getSimpleAccountList } from '#/api/mp/account';
// TODO @hw：调整下代码，和 antd 代码风格，尽量保持一致；
defineOptions({ name: 'AccountSelect' });
const props = defineProps<{

4
apps/web-ele/src/views/mp/components/wx-location/index.ts
View File

@@ -1 +1,3 @@
export { default } from './wx-location.vue';
export { default as WxLocation } from './wx-location.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

5
apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
View File

@@ -1,13 +1,15 @@
<!--
【微信消息 - 定位】TODO @Dhb52 目前未启用
【微信消息 - 定位】TODO @Dhb52 目前未启用；；；；@hw：看看目前是不是没用起来哈？
-->
<script lang="ts" setup>
import { IconifyIcon } from '@vben/icons';
// TODO @dylan：@hw：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
import { ElCol, ElLink, ElRow } from 'element-plus';
defineOptions({ name: 'Location' });
// TODO @hw：antd 和 ele 这里的风格，看看怎么统一！
const props = defineProps({
locationX: {
required: true,
@@ -39,6 +41,7 @@ defineExpose({
</script>
<template>
<!-- 微信消息 - 定位 -->
<div>
<ElLink
type="primary"

2
apps/web-ele/src/views/mp/components/wx-material-select/index.ts
View File

@@ -1,3 +1,5 @@
export { MaterialType, NewsType } from './types';
export { default } from './wx-material-select.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

1
apps/web-ele/src/views/mp/components/wx-material-select/types.ts
View File

@@ -1,3 +1,4 @@
// TODO @hw：这里的枚举，看看要不要统一
export enum NewsType {
Draft = '2',
Published = '1',

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

@@ -1,8 +1,3 @@
<!--
- Copyright (C) 2018-2019
- All rights reserved, Designed By www.joolun.com
芋道源码：
-->
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
@@ -26,6 +21,9 @@ import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
import { NewsType } from './types';
// TODO @hw：代码风格，看看 antd 和 ele 是不是统一下；
/** 微信素材选择 */
defineOptions({ name: 'MaterialSelect' });
const props = withDefaults(
@@ -41,18 +39,14 @@ const props = withDefaults(
const emit = defineEmits(['selectMaterial']);
// 遮罩层
const loading = ref(false);
// 总条数
const total = ref(0);
// 数据列表
const list = ref<any[]>([]);
// 查询参数
const loading = ref(false); // 遮罩层
const total = ref(0); // 总条数
const list = ref<any[]>([]); // 数据列表
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
accountId: props.accountId,
});
}); // 查询参数
/** 选择素材 */
function selectMaterialFun(item: any) {
@@ -288,6 +282,8 @@ onMounted(async () => {
}
}
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
.waterfall {
column-gap: 10px;
width: 100%;

2
apps/web-ele/src/views/mp/components/wx-msg/index.ts
View File

@@ -1,3 +1,5 @@
export { MsgType } from './types';
export { default } from './wx-msg.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

1
apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue
View File

@@ -7,6 +7,7 @@ const props = defineProps<{
item: any;
}>();
// TODO @hw：看看用 antd 的风格，还是 ele 的风格，就是下面的 item。
const item = ref(props.item);
</script>

8
apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
View File

@@ -8,6 +8,7 @@ import avatarWechat from '#/assets/imgs/wechat.png';
import Msg from './wx-msg.vue';
// 确保 User 类型被识别为已使用
// TODO @hw：是不是不用 PropsUser 哈？
type PropsUser = User;
defineOptions({ name: 'MsgList' });
@@ -18,15 +19,16 @@ const props = defineProps<{
user: PropsUser;
}>();
// 使用常量对象替代枚举，避免 linter 误报
const SendFrom = {
MpBot: 2,
User: 1,
} as const;
} as const; // 发送来源
// TODO @hw：是不是用 SendFrom ，或者 number？
type SendFromType = (typeof SendFrom)[keyof typeof SendFrom];
// 显式引用枚举成员供模板使用
// TODO @hw：是不是用 SendFrom 就好啦？
const MpBotValue = SendFrom.MpBot;
const UserValue = SendFrom.User;
@@ -72,6 +74,8 @@ const getNickname = (sendFrom: SendFromType) =>
<style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
/** TODO @dylan：@hw 看看有没适合 tindwind 的哈。 */
@import url('../comment.scss');
@import url('../card.scss');
</style>

2
apps/web-ele/src/views/mp/components/wx-msg/types.ts
View File

@@ -1,3 +1,4 @@
// TODO @hw：是不是放枚举里？
export enum MsgType {
Event = 'event',
Image = 'image',
@@ -10,6 +11,7 @@ export enum MsgType {
Voice = 'voice',
}
// TODO @hw：用 MpUserApi 里的 user 可以么？
export interface User {
nickname: string;
avatar: string;

4
apps/web-ele/src/views/mp/components/wx-msg/wx-msg.vue
View File

@@ -12,6 +12,8 @@ import MsgEvent from './msg-event.vue';
defineOptions({ name: 'Msg' });
// TODO @hw：这个貌似和 antd 的差很多？
const props = defineProps<{
item: any;
}>();
@@ -86,5 +88,3 @@ const item = ref<any>(props.item);
</div>
</div>
</template>
<style scoped></style>

2
apps/web-ele/src/views/mp/components/wx-music/index.ts
View File

@@ -1 +1,3 @@
export { default } from './wx-music.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

7
apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
View File

@@ -1,7 +1,5 @@
<!--
【微信消息 - 音乐】
-->
<script lang="ts" setup>
/** 微信消息 - 音乐 */
defineOptions({ name: 'Music' });
const props = defineProps({
@@ -38,6 +36,7 @@ defineExpose({
<template>
<div>
<!-- TODO @hw：ElLink -->
<el-link
type="success"
:underline="false"
@@ -62,6 +61,8 @@ defineExpose({
</template>
<style lang="scss" scoped>
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss */
@import url('../wx-msg/card.scss');
</style>

4
apps/web-ele/src/views/mp/components/wx-news/index.ts
View File

@@ -1 +1,3 @@
export { default } from './wx-news.vue';
export { default as WxNews } from './wx-news.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

3
apps/web-ele/src/views/mp/components/wx-news/wx-news.vue
View File

@@ -8,6 +8,7 @@
<script lang="ts" setup>
import { ElImage } from 'element-plus';
/** 微信消息 - 图文 */
defineOptions({ name: 'WxNews' });
const props = withDefaults(
@@ -61,6 +62,8 @@ defineExpose({
</template>
<style lang="scss" scoped>
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
.news-home {
width: 100%;
margin: auto;

2
apps/web-ele/src/views/mp/components/wx-reply/index.ts
View File

@@ -1,3 +1,5 @@
export { createEmptyReply, type Reply, ReplyType } from './types';
export { default } from './wx-reply.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

8
apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
View File

@@ -28,9 +28,11 @@ const emit = defineEmits<{
(e: 'update:modelValue', v: Reply): void;
}>();
// TODO @hw：直接用 ElMessage
const message = ElMessage;
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
// TODO @hw：看看要不要和 antd 保持一致的风格；
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
const reply = computed<Reply>({
get: () => props.modelValue,
@@ -41,9 +43,9 @@ const showDialog = ref(false);
const fileList = ref([]);
const uploadData = reactive({
accountId: reply.value.accountId,
type: 'image',
title: '',
introduction: '',
title: '',
type: 'image',
});
/** 图片上传前校验 */
@@ -157,5 +159,3 @@ function selectMaterial(item: any) {
</ElRow>
</div>
</template>
<style lang="scss" scoped></style>

8
apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue
View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import type { UploadRawFile } from 'element-plus';
// TODO @hw：类似 tab-image.vue 的建议
import type { Reply } from './types';
import { computed, reactive, ref } from 'vue';
@@ -19,11 +20,8 @@ import {
} from 'element-plus';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
// import { getAccessToken } from '@/utils/auth'
import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
// 设置上传的请求头部
const props = defineProps<{
modelValue: Reply;
}>();
@@ -45,9 +43,9 @@ const showDialog = ref(false);
const fileList = ref([]);
const uploadData = reactive({
accountId: reply.value.accountId,
type: 'thumb', // 音乐类型为thumb
title: '',
introduction: '',
title: '',
type: 'thumb', // 音乐类型为 thumb
});
/** 图片上传前校验 */

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

@@ -12,13 +12,17 @@ import News from '#/views/mp/components/wx-news/wx-news.vue';
import { NewsType } from '../wx-material-select/types';
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),
@@ -84,5 +88,3 @@ function onDelete() {
</ElRow>
</div>
</template>
<style lang="scss" scoped></style>

11
apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue
View File

@@ -22,6 +22,8 @@ import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
defineOptions({ name: 'TabVideo' });
const props = defineProps<{
modelValue: Reply;
}>();
@@ -30,13 +32,16 @@ const emit = defineEmits<{
(e: 'update:modelValue', v: Reply): void;
}>();
// TODO @hw：还是用 ElMessage
const message = ElMessage;
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
// TODO @hw：这里 antd 和 ele 有差异，要统一么？
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
const reply = computed<Reply>({
get: () => props.modelValue,
// TODO @hw：这里 antd 和 ele 有差异，要统一么？
set: (val: Reply) => emit('update:modelValue', val),
});
@@ -44,9 +49,9 @@ const showDialog = ref(false);
const fileList = ref([]);
const uploadData = reactive({
accountId: reply.value.accountId,
type: 'video',
title: '',
introduction: '',
title: '',
type: 'video',
});
/** 视频上传前校验 */
@@ -142,5 +147,3 @@ function selectMaterial(item: any) {
</ElRow>
</div>
</template>
<style lang="scss" scoped></style>

11
apps/web-ele/src/views/mp/components/wx-reply/tab-voice.vue
View File

@@ -21,7 +21,7 @@ import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
// 设置上传的请求头部
defineOptions({ name: 'TabVoice' });
const props = defineProps<{
modelValue: Reply;
@@ -31,12 +31,15 @@ const emit = defineEmits<{
(e: 'update:modelValue', v: Reply): void;
}>();
// TODO @hw：用 ElMessage
const message = ElMessage;
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
// TODO @hw：antd 和 ele 写法的统一；
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
const reply = computed<Reply>({
get: () => props.modelValue,
// TODO @hw：这里要和 antd 统一么？还是 ele 和它统一
set: (val: Reply) => emit('update:modelValue', val),
});
@@ -44,9 +47,9 @@ const showDialog = ref(false);
const fileList = ref([]);
const uploadData = reactive({
accountId: reply.value.accountId,
type: 'voice',
title: '',
introduction: '',
title: '',
type: 'voice',
});
/** 语音上传前校验 */
@@ -156,5 +159,3 @@ function selectMaterial(item: Reply) {
</ElRow>
</div>
</template>
<style lang="scss" scoped></style>

3
apps/web-ele/src/views/mp/components/wx-reply/types.ts
View File

@@ -2,6 +2,7 @@ import type { Ref } from 'vue';
import { unref } from 'vue';
// TODO @hw：和 antd 风格，保持一致；
enum ReplyType {
Image = 'image',
Music = 'music',
@@ -30,7 +31,7 @@ interface _Reply {
type Reply = _Reply; // Partial<_Reply>
/** 利用旧的reply[accountId, type]初始化新的Reply */
/** 利用旧的 reply[accountId, type] 初始化新的 Reply */
const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
return {
accountId: unref(old).accountId,

19
apps/web-ele/src/views/mp/components/wx-reply/wx-reply.vue
View File

@@ -1,12 +1,3 @@
<!--
- 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';
@@ -25,7 +16,8 @@ import TabVideo from './tab-video.vue';
import TabVoice from './tab-voice.vue';
import { createEmptyReply, ReplyType } from './types';
defineOptions({ name: 'ReplySelect' });
/** 消息回复选择 */
defineOptions({ name: 'WxReplySelect' });
const props = withDefaults(
defineProps<{
@@ -36,14 +28,15 @@ const props = withDefaults(
newsType: () => NewsType.Published,
},
);
const emit = defineEmits<{
(e: 'update:modelValue', v: Reply): void;
}>();
// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
const defaultReply: Reply = {
accountId: -1,
type: ReplyType.Text,
};
}; // 提供一个默认的 Reply 对象，避免 undefined 导致的错误
const reply = computed<Reply>({
get: () => props.modelValue || defaultReply,
@@ -113,5 +106,3 @@ defineExpose({
</ElTabPane>
</ElTabs>
</template>
<style lang="scss" scoped></style>

2
apps/web-ele/src/views/mp/components/wx-video-play/index.ts
View File

@@ -1 +1,3 @@
export { default } from './wx-video-play.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

21
apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue
View File

@@ -1,15 +1,3 @@
<!--
- Copyright (C) 2018-2019
- All rights reserved, Designed By www.joolun.com
【微信消息 - 视频】
芋道源码：
① bug 修复：
1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
② 体验优化：弹窗关闭后，自动暂停视频的播放
-->
<script lang="ts" setup>
import { ref } from 'vue';
@@ -20,8 +8,10 @@ import { ElDialog } from 'element-plus';
import 'video.js/dist/video-js.css';
defineOptions({ name: 'VideoPlayer' });
/** 微信消息 - 视频 */
defineOptions({ name: 'WxVideoPlayer' });
// TODO @hw：antd 或者 ele，props 保持一致；
const props = defineProps({
url: {
type: String,
@@ -31,10 +21,6 @@ const props = defineProps({
const dialogVideo = ref(false);
// const handleEvent = (log) => {
// console.log('Basic player event', log)
// }
const playVideo = () => {
dialogVideo.value = true;
};
@@ -61,6 +47,7 @@ const playVideo = () => {
:width="800"
:playback-rates="[0.7, 1.0, 1.5, 2.0]"
/>
<!-- TODO @hw：删除掉？ -->
<!-- 事件，暫時沒用
@mounted="handleMounted"-->
<!-- @ready="handleEvent($event)"-->

2
apps/web-ele/src/views/mp/components/wx-voice-play/index.ts
View File

@@ -1 +1,3 @@
export { default } from './wx-voice-play.vue';
// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

14
apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue
View File

@@ -1,14 +1,3 @@
<!--
- Copyright (C) 2018-2019
- All rights reserved, Designed By www.joolun.com
【微信消息 - 语音】
芋道源码：
① bug 修复：
1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
② 代码优化：将 props 中的 reply 调成为 data 中对应的属性，并补充相关注释
-->
<script lang="ts" setup>
import { ref } from 'vue';
@@ -17,8 +6,10 @@ import { IconifyIcon } from '@vben/icons';
// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
import BenzAMRRecorder from 'benz-amr-recorder';
/** 微信消息 - 语音 */
defineOptions({ name: 'VoicePlayer' });
// TODO @hw：antd 和 ele 代码风格一致；
const props = defineProps({
url: {
type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
@@ -92,6 +83,7 @@ const amrStop = () => {
</div>
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.wx-voice-div {
display: flex;
align-items: center;

1
apps/web-ele/src/views/mp/draft/modules/types.ts
View File

@@ -1,3 +1,4 @@
// TODO @hw：合并到 api 里，参考 antd 的做法；
interface NewsItem {
title: string;
thumbMediaId: string;

1
apps/web-ele/src/views/mp/menu/index.vue
View File

@@ -20,6 +20,7 @@ import MenuEditor from '#/views/mp/menu/modules/menu-editor.vue';
import MenuPreviewer from '#/views/mp/menu/modules/menu-previewer.vue';
// Assets for backgrounds
// TODO @hw：是不是资源的地址，统一下；antd 和 ele，目录不同。建议按照 ele 的方法先；
import iphoneBackImg from './assets/iphone_backImg.png';
import menuFootImg from './assets/menu_foot.png';
import menuHeadImg from './assets/menu_head.png';

1
apps/web-ele/src/views/mp/menu/modules/menuOptions.ts
View File

@@ -1,3 +1,4 @@
// TODO @hw：合并到 types；
export default [
{
value: 'view',

930
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff