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

fix: todo修复

Browse Source
This commit is contained in:
hw
2025-11-12 16:56:18 +08:00
parent a3356a0a5e
commit 7733d0a7f4
63 changed files with 1211 additions and 2202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web-antd/.env.development
View File

@@ -4,9 +4,9 @@ VITE_PORT=5666
VITE_BASE=/ VITE_BASE=/
# 请求路径 # 请求路径
VITE_BASE_URL=http://127.0.0.1:48080 VITE_BASE_URL=http://47.103.66.220:48080
# 接口地址 # 接口地址
VITE_GLOB_API_URL=/admin-api VITE_GLOB_API_URL=http://47.103.66.220:48080/admin-api
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
VITE_UPLOAD_TYPE=server VITE_UPLOAD_TYPE=server
# 是否打开 devtools，true 为打开，false 为关闭 # 是否打开 devtools，true 为打开，false 为关闭

8
apps/web-antd/src/api/mp/draft/index.ts
View File

@@ -50,13 +50,9 @@ export function updateDraft(
mediaId: string, mediaId: string,
articles: MpDraftApi.Article[], articles: MpDraftApi.Article[],
) { ) {
return requestClient.put( return requestClient.put('/mp/draft/update', articles, {
'/mp/draft/update',
{ articles },
{
params: { accountId, mediaId }, params: { accountId, mediaId },
}, });
);
} }
/** 删除草稿 */ /** 删除草稿 */

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

@@ -1,138 +0,0 @@
<script lang="ts" setup>
import type { Rule } from 'ant-design-vue/es/form';
import type { Reply } from '#/views/mp/modules/wx-reply';
import { computed, ref } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
import { WxReplySelect } from '#/views/mp/modules/wx-reply';
import { MsgType } from './types';
defineOptions({ name: 'ReplyForm' });
const props = defineProps<{
modelValue: any;
msgType: MsgType;
reply: Reply;
}>();
const emit = defineEmits<{
(e: 'update:reply', v: Reply): void;
(e: 'update:modelValue', v: any): void;
}>();
const reply = computed<Reply>({
get: () => props.reply,
set: (val) => emit('update:reply', val),
});
const replyForm = computed<any>({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val),
});
const formRef = ref(); // 表单 ref
const RequestMessageTypes = [
'text',
'image',
'voice',
'video',
'shortvideo',
'location',
'link',
]; // 允许选择的请求消息类型
// 表单校验规则
const rules = {
requestKeyword: [
{ required: true, message: '请求的关键字不能为空', trigger: 'blur' },
] as Rule[],
requestMatch: [
{ required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' },
] as Rule[],
} as Record<string, Rule[]>;
defineExpose({
resetFields: () => formRef.value?.resetFields(),
validate: async () => {
await formRef.value?.validate();
},
});
</script>
<template>
<!-- TODO @hw：可以使用 <Form class="mx-4" /> 这种组件形式么？ 融合到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules/form.vue -->
<div>
<Form
ref="formRef"
:model="replyForm"
:rules="rules"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
>
<FormItem
label="消息类型"
name="requestMessageType"
v-if="msgType === MsgType.Message"
>
<Select
v-model:value="replyForm.requestMessageType"
placeholder="请选择"
>
<SelectOption
v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE).filter(
(d) => RequestMessageTypes.includes(d.value as string),
)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</SelectOption>
</Select>
</FormItem>
<FormItem
label="匹配类型"
name="requestMatch"
v-if="msgType === MsgType.Keyword"
>
<Select
v-model:value="replyForm.requestMatch"
placeholder="请选择匹配类型"
allow-clear
>
<SelectOption
v-for="dict in getDictOptions(
DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
'number',
)"
:key="String(dict.value)"
:value="dict.value"
>
{{ dict.label }}
</SelectOption>
</Select>
</FormItem>
<FormItem
label="关键词"
name="requestKeyword"
v-if="msgType === MsgType.Keyword"
>
<Input
v-model:value="replyForm.requestKeyword"
placeholder="请输入内容"
allow-clear
/>
</FormItem>
<FormItem label="回复消息">
<WxReplySelect v-model="reply" />
</FormItem>
</Form>
</div>
</template>

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

@@ -1,13 +1,30 @@
import type { VbenFormSchema } from '#/adapter/form'; import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridPropTypes } from '#/adapter/vxe-table'; import type { VxeGridPropTypes } from '#/adapter/vxe-table';
import type { MpAccountApi } from '#/api/mp/account';
import { markRaw } from 'vue'; import { markRaw } from 'vue';
import { DICT_TYPE } from '@vben/constants'; import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { WxAccountSelect } from '#/views/mp/modules/wx-account-select'; import { getSimpleAccountList } from '#/api/mp/account';
import { ReplySelect } from '#/views/mp/modules';
import { MsgType } from './components/types'; import { MsgType } from './types';
/** 关联数据 */
let accountList: MpAccountApi.AccountSimple[] = [];
getSimpleAccountList().then((data) => (accountList = data));
const RequestMessageTypes = new Set([
'image',
'link',
'location',
'shortvideo',
'text',
'video',
'voice',
]); // 允许选择的请求消息类型
/** 获取表格列配置 */ /** 获取表格列配置 */
export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns { export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
@@ -76,13 +93,84 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
return columns; return columns;
} }
/** 新增/修改的表单 */
export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
const schema: VbenFormSchema[] = [];
// 消息类型（仅消息回复显示）
if (msgType === MsgType.Message) {
schema.push({
fieldName: 'requestMessageType',
label: '消息类型',
component: 'Select',
componentProps: {
placeholder: '请选择',
options: getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE).filter((d) =>
RequestMessageTypes.has(d.value as string),
),
},
});
}
// 匹配类型（仅关键词回复显示）
if (msgType === MsgType.Keyword) {
schema.push({
fieldName: 'requestMatch',
label: '匹配类型',
component: 'Select',
componentProps: {
placeholder: '请选择匹配类型',
allowClear: true,
options: getDictOptions(
DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
'number',
),
},
rules: 'required',
});
}
// 关键词（仅关键词回复显示）
if (msgType === MsgType.Keyword) {
schema.push({
fieldName: 'requestKeyword',
label: '关键词',
component: 'Input',
componentProps: {
placeholder: '请输入内容',
allowClear: true,
},
rules: 'required',
});
}
// 回复消息
schema.push({
fieldName: 'reply',
label: '回复消息',
component: markRaw(ReplySelect),
// componentProps: {
// modelValue: { type: 'video', content: '12456' },
// },
// modelPropName: 'modelValue',
});
return schema;
}
/** 列表的搜索表单 */ /** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] { export function useGridFormSchema(): VbenFormSchema[] {
return [ return [
{ {
fieldName: 'accountId', fieldName: 'accountId',
label: '公众号', label: '公众号',
component: markRaw(WxAccountSelect), component: 'ApiSelect',
componentProps: {
options: accountList.map((item) => ({
label: item.name,
value: item.id,
})),
placeholder: '请选择公众号',
},
defaultValue: accountList[0]?.id,
}, },
]; ];
} }

98
apps/web-antd/src/views/mp/autoReply/index.vue
View File

@@ -1,15 +1,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { computed, nextTick, onMounted, ref } from 'vue'; import { computed, nextTick, ref } from 'vue';
import { import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
confirm,
ContentWrap,
DocAlert,
Page,
useVbenModal,
} from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons'; import { IconifyIcon } from '@vben/icons';
import { message, Row, Tabs } from 'ant-design-vue'; import { message, Row, Tabs } from 'ant-design-vue';
@@ -18,10 +12,10 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import * as MpAutoReplyApi from '#/api/mp/autoReply'; import * as MpAutoReplyApi from '#/api/mp/autoReply';
import { $t } from '#/locales'; import { $t } from '#/locales';
import ReplyContentCell from './components/ReplyTable.vue';
import { MsgType } from './components/types';
import { useGridColumns, useGridFormSchema } from './data'; import { useGridColumns, useGridFormSchema } from './data';
import ReplyContentCell from './modules/content.vue';
import Form from './modules/form.vue'; import Form from './modules/form.vue';
import { MsgType } from './types';
defineOptions({ name: 'MpAutoReply' }); defineOptions({ name: 'MpAutoReply' });
@@ -41,7 +35,6 @@ async function onTabChange(tabName: string) {
} }
// 查询数据 // 查询数据
await gridApi.query(); await gridApi.query();
updateTableDataLength();
} }
/** 新增按钮操作 */ /** 新增按钮操作 */
@@ -49,7 +42,6 @@ async function handleCreate() {
const formValues = await gridApi.formApi.getValues(); const formValues = await gridApi.formApi.getValues();
formModalApi formModalApi
.setData({ .setData({
isCreating: true,
msgType: Number(msgType.value) as MsgType, msgType: Number(msgType.value) as MsgType,
accountId: formValues.accountId, accountId: formValues.accountId,
}) })
@@ -61,8 +53,8 @@ async function handleEdit(row: any) {
const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any; const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
formModalApi formModalApi
.setData({ .setData({
isCreating: false,
msgType: Number(msgType.value) as MsgType, msgType: Number(msgType.value) as MsgType,
accountId: row.accountId,
row: data, row: data,
}) })
.open(); .open();
@@ -78,9 +70,7 @@ async function handleDelete(row: any) {
try { try {
await MpAutoReplyApi.deleteAutoReply(row.id); await MpAutoReplyApi.deleteAutoReply(row.id);
message.success('删除成功'); message.success('删除成功');
await gridApi.query(); handleRefresh();
// 查询完成后更新数据长度
updateTableDataLength();
} finally { } finally {
hideLoading(); hideLoading();
} }
@@ -98,7 +88,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
}, },
gridOptions: { gridOptions: {
columns: useGridColumns(Number(msgType.value) as MsgType), columns: useGridColumns(Number(msgType.value) as MsgType),
height: 'calc(100vh - 300px)', height: 'auto',
keepSource: true, keepSource: true,
proxyConfig: { proxyConfig: {
ajax: { ajax: {
@@ -111,7 +101,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
}); });
}, },
}, },
autoLoad: false, // 禁用自动加载，等表单初始化完成后再加载
}, },
rowConfig: { rowConfig: {
keyField: 'id', keyField: 'id',
@@ -124,63 +113,43 @@ const [Grid, gridApi] = useVbenVxeGrid({
} as VxeTableGridOptions<any>, } as VxeTableGridOptions<any>,
}); });
// TODO @hw：按道理说，不太需呀哦这个？可以微信讨论下哈； /** 刷新表格 */
const tableDataLength = ref(0); // 表格数据长度，用于判断是否显示新增按钮 function handleRefresh() {
gridApi.query();
/** 更新表格数据长度（避免在模板中直接调用 getTableData 导致响应式循环） */
function updateTableDataLength() {
try {
if (!gridApi.grid) {
return;
}
const tableData = gridApi.grid.getTableData();
tableDataLength.value = tableData?.tableData?.length || 0;
} catch {
tableDataLength.value = 0;
}
} }
// TODO @hw：这个要不改成，直接 tableaction 那判断；
// 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示 // 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
const showCreateButton = computed(() => { const showCreateButton = computed(() => {
if (Number(msgType.value) !== MsgType.Follow) { if (Number(msgType.value) !== MsgType.Follow) {
return true; return true;
} }
return tableDataLength.value <= 0; try {
const tableData = gridApi.grid?.getTableData();
return (tableData?.tableData?.length || 0) <= 0;
} catch {
return true;
}
}); });
// TODO @hw：看看能不能参考 tag/index.vue 简化下 // DONE @hw：看看能不能参考 tag/index.vue 简化下
/** 页面挂载后，等待表单初始化完成再加载数据 */
onMounted(async () => {
// 等待 WxAccountSelect 组件加载并设置默认值
await nextTick();
if (!gridApi.formApi) {
return;
}
const formValues = await gridApi.formApi.getValues();
// 如果 accountId 有值，说明已经准备好了
if (formValues.accountId) {
// 设置为最新提交的值
gridApi.formApi.setLatestSubmissionValues(formValues);
// 触发首次查询
await gridApi.query();
updateTableDataLength();
}
});
</script> </script>
<template> <template>
<Page auto-content-height> <Page auto-content-height>
<template #doc>
<DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" /> <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
</template>
<!-- tab 切换 --> <FormModal @success="handleRefresh" />
<!-- TODO @hw：貌似 tabs 里面套 table 的样式在 vben 里有点丑，要不我们按照 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/trade/afterSale/index.vue：1）第一层是公众号的选择；2）第二层是 tab；3）第三层是 table --> <Grid table-title="自动回复列表">
<ContentWrap> <!-- 第一层：公众号选择（在表单中） -->
<!-- 第二层：tab 切换 -->
<template #toolbar-actions>
<Tabs <Tabs
v-model:active-key="msgType" v-model:active-key="msgType"
class="w-full"
@change="(activeKey) => onTabChange(activeKey as string)" @change="(activeKey) => onTabChange(activeKey as string)"
> >
<!-- tab 项 -->
<Tabs.TabPane :key="String(MsgType.Follow)"> <Tabs.TabPane :key="String(MsgType.Follow)">
<template #tab> <template #tab>
<Row align="middle"> <Row align="middle">
@@ -191,7 +160,8 @@ onMounted(async () => {
<Tabs.TabPane :key="String(MsgType.Message)"> <Tabs.TabPane :key="String(MsgType.Message)">
<template #tab> <template #tab>
<Row align="middle"> <Row align="middle">
<IconifyIcon icon="ep:chat-line-round" class="mr-2px" /> 消息回复 <IconifyIcon icon="ep:chat-line-round" class="mr-2px" />
消息回复
</Row> </Row>
</template> </template>
</Tabs.TabPane> </Tabs.TabPane>
@@ -203,17 +173,8 @@ onMounted(async () => {
</template> </template>
</Tabs.TabPane> </Tabs.TabPane>
</Tabs> </Tabs>
<!-- 列表 --> </template>
<FormModal <!-- 第三层：table -->
@success="
() => {
gridApi.query().then(() => {
updateTableDataLength();
});
}
"
/>
<Grid table-title="自动回复列表">
<template #toolbar-tools> <template #toolbar-tools>
<TableAction <TableAction
v-if="showCreateButton" v-if="showCreateButton"
@@ -256,6 +217,5 @@ onMounted(async () => {
/> />
</template> </template>
</Grid> </Grid>
</ContentWrap>
</Page> </Page>
</template> </template>

15
apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue → apps/web-antd/src/views/mp/autoReply/modules/content.vue
View File

@@ -1,9 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { WxMusic } from '#/views/mp/modules/wx-music'; import { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/modules';
import { WxNews } from '#/views/mp/modules/wx-news'; // DONE @hw：迁移到 /apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
import { WxVideoPlayer } from '#/views/mp/modules/wx-video-play';
import { WxVoicePlayer } from '#/views/mp/modules/wx-voice-play';
// TODO @hw：迁移到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
defineOptions({ name: 'ReplyContentCell' }); defineOptions({ name: 'ReplyContentCell' });
const props = defineProps<{ const props = defineProps<{
@@ -17,7 +14,7 @@ const props = defineProps<{
{{ props.row.responseContent }} {{ props.row.responseContent }}
</div> </div>
<div v-else-if="props.row.responseMessageType === 'voice'"> <div v-else-if="props.row.responseMessageType === 'voice'">
<WxVoicePlayer <VoicePlayer
v-if="props.row.responseMediaUrl" v-if="props.row.responseMediaUrl"
:url="props.row.responseMediaUrl" :url="props.row.responseMediaUrl"
/> />
@@ -33,17 +30,17 @@ const props = defineProps<{
props.row.responseMessageType === 'shortvideo' props.row.responseMessageType === 'shortvideo'
" "
> >
<WxVideoPlayer <VideoPlayer
v-if="props.row.responseMediaUrl" v-if="props.row.responseMediaUrl"
:url="props.row.responseMediaUrl" :url="props.row.responseMediaUrl"
style="margin-top: 10px" style="margin-top: 10px"
/> />
</div> </div>
<div v-else-if="props.row.responseMessageType === 'news'"> <div v-else-if="props.row.responseMessageType === 'news'">
<WxNews :articles="props.row.responseArticles" /> <News :articles="props.row.responseArticles" />
</div> </div>
<div v-else-if="props.row.responseMessageType === 'music'"> <div v-else-if="props.row.responseMessageType === 'music'">
<WxMusic <Music
:title="props.row.responseTitle" :title="props.row.responseTitle"
:description="props.row.responseDescription" :description="props.row.responseDescription"
:thumb-media-url="props.row.responseThumbMediaUrl" :thumb-media-url="props.row.responseThumbMediaUrl"

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

@@ -1,57 +1,84 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Reply } from '#/views/mp/modules/wx-reply'; import type { Reply } from '#/views/mp/modules/reply/types';
import { computed, ref } from 'vue'; import { computed, nextTick, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply'; import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { ReplyType } from '#/views/mp/modules/wx-reply/types'; import { ReplyType } from '#/views/mp/modules/reply/types';
import ReplyForm from '../components/ReplyForm.vue'; import { useFormSchema } from '../data';
import { MsgType } from '../components/types'; import { MsgType } from '../types';
import Form from '#/views/system/user/modules/form.vue';
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
const formRef = ref<InstanceType<typeof ReplyForm> | null>(null); const formData = ref<{
accountId?: number;
const formData = ref<{ isCreating: boolean; msgType: MsgType; row?: any }>(); msgType: MsgType;
const replyForm = ref<any>({}); row?: any;
const reply = ref<Reply>({ }>();
type: ReplyType.Text,
accountId: -1,
});
const getTitle = computed(() => { const getTitle = computed(() => {
return formData.value?.isCreating return formData.value?.row?.id
? $t('ui.actionTitle.create', ['自动回复']) ? $t('ui.actionTitle.edit', ['自动回复'])
: $t('ui.actionTitle.edit', ['自动回复']); : $t('ui.actionTitle.create', ['自动回复']);
}); });
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 100,
},
layout: 'horizontal',
schema: useFormSchema(MsgType.Keyword),
showDefaultActions: false,
});
// 注意：schema 的更新现在在 onOpenChange 中手动处理，避免时序问题
const [Modal, modalApi] = useVbenModal({ const [Modal, modalApi] = useVbenModal({
async onConfirm() { async onConfirm() {
await formRef.value?.validate(); const { valid } = await formApi.validate();
if (!valid) {
return;
}
// 处理回复消息 // 处理回复消息
const submitForm: any = { ...replyForm.value }; const submitForm: any = await formApi.getValues();
submitForm.responseMessageType = reply.value.type; // 确保 type 字段使用当前选中的 tab 值
submitForm.responseContent = reply.value.content; submitForm.type = formData.value?.msgType;
submitForm.responseMediaId = reply.value.mediaId; // 确保 accountId 字段存在
submitForm.responseMediaUrl = reply.value.url; submitForm.accountId = formData.value?.accountId;
submitForm.responseTitle = reply.value.title; // 编辑模式下，确保 id 字段存在（从 row 中获取，因为表单 schema 中没有 id 字段）
submitForm.responseDescription = reply.value.description; if (formData.value?.row?.id && !submitForm.id) {
submitForm.responseThumbMediaId = reply.value.thumbMediaId; submitForm.id = formData.value.row.id;
submitForm.responseThumbMediaUrl = reply.value.thumbMediaUrl; }
submitForm.responseArticles = reply.value.articles; const reply = submitForm.reply as Reply;
submitForm.responseMusicUrl = reply.value.musicUrl; if (reply) {
submitForm.responseHqMusicUrl = reply.value.hqMusicUrl; submitForm.responseMessageType = reply.type;
submitForm.responseContent = reply.content;
submitForm.responseMediaId = reply.mediaId;
submitForm.responseMediaUrl = reply.url;
submitForm.responseTitle = reply.title;
submitForm.responseDescription = reply.description;
submitForm.responseThumbMediaId = reply.thumbMediaId;
submitForm.responseThumbMediaUrl = reply.thumbMediaUrl;
submitForm.responseArticles = reply.articles;
submitForm.responseMusicUrl = reply.musicUrl;
submitForm.responseHqMusicUrl = reply.hqMusicUrl;
}
delete submitForm.reply;
modalApi.lock(); modalApi.lock();
try { try {
if (replyForm.value.id === undefined) { if (submitForm.id === undefined) {
await createAutoReply(submitForm); await createAutoReply(submitForm);
message.success('新增成功'); message.success('新增成功');
} else { } else {
@@ -67,50 +94,34 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) { async onOpenChange(isOpen: boolean) {
if (!isOpen) { if (!isOpen) {
formData.value = undefined; formData.value = undefined;
replyForm.value = {};
reply.value = {
type: ReplyType.Text,
accountId: -1,
};
return; return;
} }
// 加载数据 // 加载数据
const data = modalApi.getData<{ const data = modalApi.getData<{
accountId?: number; accountId?: number;
isCreating: boolean;
msgType: MsgType; msgType: MsgType;
row?: any; row?: any;
}>(); }>();
if (!data) { if (!data) {
return; return;
} }
formData.value = data; // 先更新 schema，确保表单字段正确
formApi.setState({ schema: useFormSchema(data.msgType) });
// 等待 schema 更新完成
await nextTick();
if (data.isCreating) { formData.value = data;
// 新建：初始化表单 if (data.row?.id) {
replyForm.value = {
id: undefined,
accountId: data.accountId || -1,
type: data.msgType,
requestKeyword: undefined,
requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
requestMessageType: undefined,
};
reply.value = {
type: ReplyType.Text,
accountId: data.accountId || -1,
};
} else if (data.row) {
// 编辑：加载数据 // 编辑：加载数据
const rowData = data.row; const rowData = data.row;
replyForm.value = { ...rowData }; const formValues: any = { ...rowData };
delete replyForm.value.responseMessageType; // delete formValues.responseMessageType;
delete replyForm.value.responseContent; // delete formValues.responseContent;
delete replyForm.value.responseMediaId; // delete formValues.responseMediaId;
delete replyForm.value.responseMediaUrl; // delete formValues.responseMediaUrl;
delete replyForm.value.responseDescription; // delete formValues.responseDescription;
delete replyForm.value.responseArticles; // delete formValues.responseArticles;
reply.value = { formValues.reply = {
type: rowData.responseMessageType, type: rowData.responseMessageType,
accountId: data.accountId || -1, accountId: data.accountId || -1,
content: rowData.responseContent, content: rowData.responseContent,
@@ -124,20 +135,29 @@ const [Modal, modalApi] = useVbenModal({
musicUrl: rowData.responseMusicUrl, musicUrl: rowData.responseMusicUrl,
hqMusicUrl: rowData.responseHqMusicUrl, hqMusicUrl: rowData.responseHqMusicUrl,
}; };
await formApi.setValues(formValues);
} else {
// 新建：初始化表单
const initialValues: any = {
id: undefined,
accountId: data.accountId || -1,
type: data.msgType,
requestKeyword: undefined,
requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
requestMessageType: undefined,
reply: {
type: ReplyType.Text,
accountId: data.accountId || -1,
},
};
await formApi.setValues(initialValues);
} }
}, },
}); });
</script> </script>
<template> <template>
<!-- TODO @hw：可以使用 <Form class="mx-4" /> 这种组件形式么？ -->
<Modal :title="getTitle" class="w-4/5"> <Modal :title="getTitle" class="w-4/5">
<ReplyForm <Form class="mx-4" />
v-if="formData"
v-model="replyForm"
v-model:reply="reply"
:msg-type="formData.msgType"
ref="formRef"
/>
</Modal> </Modal>
</template> </template>

0
apps/web-antd/src/views/mp/autoReply/components/types.ts → apps/web-antd/src/views/mp/autoReply/types.ts
View File

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

@@ -1,9 +1,12 @@
import type { VbenFormSchema } from '#/adapter/form'; import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MpAccountApi } from '#/api/mp/account';
import { markRaw } from 'vue'; import { getSimpleAccountList } from '#/api/mp/account';
import { WxAccountSelect } from '#/views/mp/modules/wx-account-select'; /** 关联数据 */
let accountList: MpAccountApi.AccountSimple[] = [];
getSimpleAccountList().then((data) => (accountList = data));
/** 获取表格列配置 */ /** 获取表格列配置 */
export function useGridColumns(): VxeTableGridOptions['columns'] { export function useGridColumns(): VxeTableGridOptions['columns'] {
@@ -18,7 +21,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'updateTime', field: 'updateTime',
title: '更新时间', title: '更新时间',
minWidth: 180, minWidth: 180,
formatter: 'formatDateTime', formatter: 'formatDateTime', // TODO @YunaiV 接口返回数据不对，需要乘1000
}, },
{ {
title: '操作', title: '操作',
@@ -30,13 +33,21 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
} }
/** 列表的搜索表单 */ /** 列表的搜索表单 */
// TODO @hw：这里的公众号选择，要改参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/tag/data.ts；相关联的代码还简单点~ // DONE @hw：这里的公众号选择，要改参考 /apps/web-antd/src/views/mp/tag/data.ts；相关联的代码还简单点~
export function useGridFormSchema(): VbenFormSchema[] { export function useGridFormSchema(): VbenFormSchema[] {
return [ return [
{ {
fieldName: 'accountId', fieldName: 'accountId',
label: '公众号', label: '公众号',
component: markRaw(WxAccountSelect), component: 'ApiSelect',
componentProps: {
options: accountList.map((item) => ({
label: item.name,
value: item.id,
})),
placeholder: '请选择公众号',
},
defaultValue: accountList[0]?.id,
}, },
]; ];
} }

210
apps/web-antd/src/views/mp/draft/index.vue
View File

@@ -1,10 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Article } from './components/types'; import type { Article } from './modules/types';
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { nextTick, onMounted, provide, ref, watch } from 'vue';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui'; import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
@@ -12,13 +10,16 @@ import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import * as MpDraftApi from '#/api/mp/draft'; import * as MpDraftApi from '#/api/mp/draft';
import * as MpFreePublishApi from '#/api/mp/freePublish'; // DONE @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
import { createEmptyNewsItem } from '#/views/mp/draft/components/types'; import { submitFreePublish } from '#/api/mp/freePublish';
import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
import DraftTableCell from './components/draft-table.vue';
import { useGridColumns, useGridFormSchema } from './data'; import { useGridColumns, useGridFormSchema } from './data';
import DraftTableCell from './modules/draft-table.vue';
import Form from './modules/form.vue'; import Form from './modules/form.vue';
// DONE @hw：参考 tag/index.vue 放到 formValues.accountId;
// DONE @hw：看看这个 watch、provide 能不能简化掉；
defineOptions({ name: 'MpDraft' }); defineOptions({ name: 'MpDraft' });
const [FormModal, formModalApi] = useVbenModal({ const [FormModal, formModalApi] = useVbenModal({
@@ -26,120 +27,16 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true, destroyOnClose: true,
}); });
// TODO @hw：下面的方法，放到这个前面，和别的保持一致； /** 刷新表格 */
const [Grid, gridApi] = useVbenVxeGrid({ function handleRefresh() {
formOptions: { gridApi.query();
schema: useGridFormSchema(), }
submitOnChange: true,
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
// 更新 accountId
if (formValues?.accountId) {
accountId.value = formValues.accountId;
}
const drafts = await MpDraftApi.getDraftPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
// 处理 API 返回的数据，兼容不同的数据结构
// TODO @wx：看 yudao-ui-admin-vue3/src/views/mp/draft/index.vue 项目里，转换没这么复杂。。。是不是这里有办法简化下？
const formattedList: Article[] = drafts.list.map((draft: any) => {
// 如果已经是 content.newsItem 格式，直接使用
if (draft.content?.newsItem) {
const newsItem = draft.content.newsItem.map((item: any) => ({
...item,
picUrl: item.thumbUrl || item.picUrl,
}));
return {
mediaId: draft.mediaId,
content: {
newsItem,
},
updateTime:
draft.updateTime ||
(draft.createTime
? new Date(draft.createTime).getTime()
: Date.now()),
};
}
// 如果是 articles 格式，转换为 content.newsItem 格式
if (draft.articles) {
const newsItem = draft.articles.map((article: any) => ({
...article,
thumbUrl: article.thumbUrl || article.thumbMediaId,
picUrl: article.thumbUrl || article.thumbMediaId,
}));
return {
mediaId: draft.mediaId,
content: {
newsItem,
},
updateTime:
draft.updateTime ||
(draft.createTime
? new Date(draft.createTime).getTime()
: Date.now()),
};
}
// 默认返回空结构
return {
mediaId: draft.mediaId || '',
content: {
newsItem: [],
},
updateTime: draft.updateTime || Date.now(),
};
});
return {
page: {
total: drafts.total,
},
result: formattedList,
};
},
},
autoLoad: false,
},
rowConfig: {
keyField: 'mediaId',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<Article>,
});
// 提供 accountId 给子组件
// TODO @hw：参考 tag/index.vue 放到 formValues.accountId;
const accountId = ref<number>(-1);
// 监听表单提交，更新 accountId
// TODO @hw：看看这个 watch、provide 能不能简化掉；
watch(
() => gridApi.formApi?.getLatestSubmissionValues?.()?.accountId,
(newAccountId) => {
if (newAccountId !== undefined) {
accountId.value = newAccountId;
}
},
);
provide('accountId', accountId);
/** 新增按钮操作 */ /** 新增按钮操作 */
async function handleCreate() { async function handleCreate() {
const formValues = await gridApi.formApi.getValues(); const formValues = await gridApi.formApi.getValues();
const accountId = formValues.accountId; const accountId = formValues.accountId;
if (!accountId || accountId === -1) { if (!accountId) {
message.warning('请先选择公众号'); message.warning('请先选择公众号');
return; return;
} }
@@ -156,7 +53,7 @@ async function handleCreate() {
async function handleEdit(row: Article) { async function handleEdit(row: Article) {
const formValues = await gridApi.formApi.getValues(); const formValues = await gridApi.formApi.getValues();
const accountId = formValues.accountId; const accountId = formValues.accountId;
if (!accountId || accountId === -1) { if (!accountId) {
message.warning('请先选择公众号'); message.warning('请先选择公众号');
return; return;
} }
@@ -165,7 +62,7 @@ async function handleEdit(row: Article) {
isCreating: false, isCreating: false,
accountId, accountId,
mediaId: row.mediaId, mediaId: row.mediaId,
newsList: structuredClone(row.content.newsItem), newsList: row.content.newsItem,
}) })
.open(); .open();
} }
@@ -174,8 +71,8 @@ async function handleEdit(row: Article) {
async function handlePublish(row: Article) { async function handlePublish(row: Article) {
const formValues = await gridApi.formApi.getValues(); const formValues = await gridApi.formApi.getValues();
const accountId = formValues.accountId; const accountId = formValues.accountId;
// TODO @hw：看看能不能去掉 -1 的判断哈？ // DONE @hw：看看能不能去掉 -1 的判断哈？
if (!accountId || accountId === -1) { if (!accountId) {
message.warning('请先选择公众号'); message.warning('请先选择公众号');
return; return;
} }
@@ -188,11 +85,10 @@ async function handlePublish(row: Article) {
content: '发布中...', content: '发布中...',
duration: 0, duration: 0,
}); });
// TODO @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
try { try {
await MpFreePublishApi.submitFreePublish(accountId, row.mediaId); await submitFreePublish(accountId, row.mediaId);
message.success('发布成功'); message.success('发布成功');
await gridApi.query(); handleRefresh();
} finally { } finally {
hideLoading(); hideLoading();
} }
@@ -202,7 +98,7 @@ async function handlePublish(row: Article) {
async function handleDelete(row: Article) { async function handleDelete(row: Article) {
const formValues = await gridApi.formApi.getValues(); const formValues = await gridApi.formApi.getValues();
const accountId = formValues.accountId; const accountId = formValues.accountId;
if (!accountId || accountId === -1) { if (!accountId) {
message.warning('请先选择公众号'); message.warning('请先选择公众号');
return; return;
} }
@@ -214,39 +110,67 @@ async function handleDelete(row: Article) {
try { try {
await MpDraftApi.deleteDraft(accountId, row.mediaId); await MpDraftApi.deleteDraft(accountId, row.mediaId);
message.success('删除成功'); message.success('删除成功');
await gridApi.query(); handleRefresh();
} finally { } finally {
hideLoading(); hideLoading();
} }
} }
// TODO @hw：看看能不能参考 tag/index.vue 简化下 const [Grid, gridApi] = useVbenVxeGrid({
// 页面挂载后，等待表单初始化完成再加载数据 formOptions: {
onMounted(async () => { schema: useGridFormSchema(),
await nextTick(); submitOnChange: true,
if (gridApi.formApi) { },
const formValues = await gridApi.formApi.getValues(); gridOptions: {
if (formValues.accountId) { columns: useGridColumns(),
accountId.value = formValues.accountId; height: 'auto',
gridApi.formApi.setLatestSubmissionValues(formValues); keepSource: true,
await gridApi.query(); proxyConfig: {
} ajax: {
query: async ({ page }, formValues) => {
const drafts = await MpDraftApi.getDraftPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
// 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
drafts.list.forEach((draft: any) => {
const newsList = draft.content?.newsItem;
if (newsList) {
newsList.forEach((item: any) => {
item.picUrl = item.thumbUrl || item.picUrl;
});
} }
});
return {
list: drafts.list as unknown as Article[],
total: drafts.total,
};
},
},
},
rowConfig: {
keyField: 'mediaId',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<Article>,
}); });
// DONE @hw：看看能不能参考 tag/index.vue 简化下
</script> </script>
<template> <template>
<Page auto-content-height> <Page auto-content-height>
<template #doc>
<DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" /> <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
</template>
<!-- TODO @hw：参考别的模块 @success 调用 refresh 方法； --> <!-- DONE @hw：参考别的模块 @success 调用 refresh 方法； -->
<FormModal <FormModal @success="handleRefresh" />
@success="
() => {
gridApi.query();
}
"
/>
<Grid table-title="草稿列表"> <Grid table-title="草稿列表">
<template #toolbar-tools> <template #toolbar-tools>

106
apps/web-antd/src/views/mp/draft/components/cover-select.vue → apps/web-antd/src/views/mp/draft/modules/cover-select.vue
View File

@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
import { Button, Image, message, Modal, Upload } from 'ant-design-vue'; import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
import { UploadType, useBeforeUpload } from '#/utils/useUpload'; import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select'; import { MaterialSelect } from '#/views/mp/modules';
const props = defineProps<{ const props = defineProps<{
isFirst: boolean; isFirst: boolean;
@@ -33,8 +33,9 @@ const newsItem = computed<NewsItem>({
}, },
}); });
const dialogVisible = ref(false);
const accountId = inject<number>('accountId'); const accountId = inject<number>('accountId');
const showImageDialog = ref(false);
const fileList = ref<UploadFile[]>([]); const fileList = ref<UploadFile[]>([]);
interface UploadData { interface UploadData {
@@ -46,26 +47,31 @@ const uploadData: UploadData = reactive({
accountId: accountId!, accountId: accountId!,
}); });
/** 素材选择完成事件*/ function handleOpenDialog() {
dialogVisible.value = true;
}
/** 素材选择完成事件 */
function onMaterialSelected(item: any) { function onMaterialSelected(item: any) {
showImageDialog.value = false; dialogVisible.value = false;
newsItem.value.thumbMediaId = item.mediaId; newsItem.value.thumbMediaId = item.mediaId;
newsItem.value.thumbUrl = item.url; newsItem.value.thumbUrl = item.url;
} }
// TODO @hw：注释都补充下哈； // DONE @hw：注释都补充下哈；
/** 上传前校验 */
const onBeforeUpload = (file: UploadFile) => const onBeforeUpload = (file: UploadFile) =>
useBeforeUpload(UploadType.Image, 2)(file as any); useBeforeUpload(UploadType.Image, 2)(file as any);
// TODO @hw：注释都补充下哈； // DONE @hw：注释都补充下哈；
/** 上传错误处理 */
function onUploadChange(info: any) { function onUploadChange(info: any) {
if (info.file.status === 'done') { if (info.file.status === 'error') {
onUploadSuccess(info.file.response || info.file);
} else if (info.file.status === 'error') {
onUploadError(info.file.error || new Error('上传失败')); onUploadError(info.file.error || new Error('上传失败'));
} }
} }
// TODO @hw：注释都补充下哈； // DONE @hw：注释都补充下哈；
/** 上传成功处理 */
function onUploadSuccess(res: any) { function onUploadSuccess(res: any) {
if (res.code !== 0) { if (res.code !== 0) {
message.error(`上传出错：${res.msg}`); message.error(`上传出错：${res.msg}`);
@@ -79,7 +85,8 @@ function onUploadSuccess(res: any) {
newsItem.value.thumbUrl = res.data.url; newsItem.value.thumbUrl = res.data.url;
} }
// TODO @hw：注释都补充下哈； // DONE @hw：注释都补充下哈；
/** 上传失败处理 */
function onUploadError(err: Error) { function onUploadError(err: Error) {
message.error(`上传失败: ${err.message}`); message.error(`上传失败: ${err.message}`);
} }
@@ -88,21 +95,22 @@ function onUploadError(err: Error) {
<template> <template>
<div> <div>
<p>封面:</p> <p>封面:</p>
<!-- TODO @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 --> <!-- DONE @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 -->
<div class="thumb-div"> <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
<div class="flex w-full flex-col items-center justify-center text-center">
<Image <Image
v-if="newsItem.thumbUrl" v-if="newsItem.thumbUrl"
style="width: 300px; max-height: 300px" class="max-h-[300px] w-[300px]"
:src="newsItem.thumbUrl" :src="newsItem.thumbUrl"
:preview="false" :preview="false"
/> />
<IconifyIcon <IconifyIcon
v-else v-else
icon="lucide:plus" icon="lucide:plus"
class="avatar-uploader-icon" class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
:class="isFirst ? 'avatar' : 'avatar1'" :class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
/> />
<div class="thumb-but"> <div class="m-[5px]">
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<Upload <Upload
:action="UPLOAD_URL" :action="UPLOAD_URL"
@@ -110,35 +118,35 @@ function onUploadError(err: Error) {
:file-list="fileList" :file-list="fileList"
:data="{ ...uploadData }" :data="{ ...uploadData }"
:before-upload="onBeforeUpload" :before-upload="onBeforeUpload"
@success="onUploadSuccess"
@change="onUploadChange" @change="onUploadChange"
> >
<template #default> <template #default>
<Button size="small" type="primary">本地上传</Button> <Button size="small" type="primary">本地上传</Button>
</template> </template>
</Upload> </Upload>
<!-- TODO @hw：tindwind -->
<Button <Button
size="small" size="small"
type="primary" type="primary"
@click="showImageDialog = true" class="ml-[5px]"
style="margin-left: 5px" @click="handleOpenDialog"
> >
素材库选择 素材库选择
</Button> </Button>
</div> </div>
<div class="upload-tip"> <div class="ml-[5px] mt-[5px] text-xs text-[#999]">
支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M 支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
</div> </div>
</div> </div>
<!-- TODO @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 --> <!-- DONE @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
<Modal <Modal
title="选择图片" v-model:open="dialogVisible"
v-model:open="showImageDialog" title="图片选择"
width="80%" width="65%"
destroy-on-close :footer="null"
> >
<WxMaterialSelect <MaterialSelect
type="image" type="image"
:account-id="accountId!" :account-id="accountId!"
@select-material="onMaterialSelected" @select-material="onMaterialSelected"
@@ -147,47 +155,3 @@ function onUploadError(err: Error) {
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped>
/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
.upload-tip {
margin-top: 5px;
margin-left: 5px;
font-size: 12px;
color: #999;
}
.thumb-div {
display: inline-block;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
.avatar-uploader-icon {
width: 120px;
height: 120px;
font-size: 28px;
line-height: 120px;
color: #8c939d;
text-align: center;
border: 1px solid #d9d9d9;
}
.avatar {
width: 230px;
height: 120px;
}
.avatar1 {
width: 120px;
height: 120px;
}
.thumb-but {
margin: 5px;
}
}
</style>

4
apps/web-antd/src/views/mp/draft/components/draft-table.vue → apps/web-antd/src/views/mp/draft/modules/draft-table.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Article } from './types'; import type { Article } from './types';
import { WxNews } from '#/views/mp/modules/wx-news'; import { News } from '#/views/mp/modules';
defineOptions({ name: 'DraftTableCell' }); defineOptions({ name: 'DraftTableCell' });
@@ -13,7 +13,7 @@ const props = defineProps<{
<template> <template>
<div class="p-2.5"> <div class="p-2.5">
<div v-if="props.row.content && props.row.content.newsItem"> <div v-if="props.row.content && props.row.content.newsItem">
<WxNews :articles="props.row.content.newsItem" /> <News :articles="props.row.content.newsItem" />
</div> </div>
</div> </div>
</template> </template>

54
apps/web-antd/src/views/mp/draft/modules/form.vue
View File

@@ -1,35 +1,38 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { NewsItem } from '../components/types'; import type { NewsItem } from './types';
import { computed, ref } from 'vue'; import { computed, provide, ref } from 'vue';
import { confirm, useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { message, Spin } from 'ant-design-vue'; import { message, Spin } from 'ant-design-vue';
import { createDraft, updateDraft } from '#/api/mp/draft'; import { createDraft, updateDraft } from '#/api/mp/draft';
import NewsForm from '../components/news-form.vue'; import NewsForm from './news-form.vue';
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
// DONE @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
const formData = ref<{ const formData = ref<{
accountId: number; accountId: number;
// TODO @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
isCreating: boolean;
mediaId?: string; mediaId?: string;
newsList?: NewsItem[]; newsList?: NewsItem[];
}>(); }>();
const newsList = ref<NewsItem[]>([]); const newsList = ref<NewsItem[]>([]);
// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。 // DONE @hw：不需要 isSave，通过 modal 去 lock 就好啦。
const isSubmitting = ref(false); const isSubmitting = ref(false);
// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
const isSaved = ref(false);
const getTitle = computed(() => { const getTitle = computed(() => {
return formData.value?.isCreating ? '新建图文' : '修改图文'; return formData.value?.mediaId ? '修改图文' : '新建图文';
}); });
// 提供 accountId 给子组件
provide(
'accountId',
computed(() => formData.value?.accountId),
);
const [Modal, modalApi] = useVbenModal({ const [Modal, modalApi] = useVbenModal({
async onConfirm() { async onConfirm() {
if (!formData.value) { if (!formData.value) {
@@ -39,18 +42,17 @@ const [Modal, modalApi] = useVbenModal({
isSubmitting.value = true; isSubmitting.value = true;
modalApi.lock(); modalApi.lock();
try { try {
if (formData.value.isCreating) { if (formData.value.mediaId) {
await createDraft(formData.value.accountId, newsList.value);
message.success('新增成功');
} else if (formData.value.mediaId) {
await updateDraft( await updateDraft(
formData.value.accountId, formData.value.accountId,
formData.value.mediaId, formData.value.mediaId,
newsList.value, newsList.value,
); );
message.success('更新成功'); message.success('更新成功');
} else {
await createDraft(formData.value.accountId, newsList.value);
message.success('新增成功');
} }
isSaved.value = true;
await modalApi.close(); await modalApi.close();
emit('success'); emit('success');
} finally { } finally {
@@ -58,26 +60,12 @@ const [Modal, modalApi] = useVbenModal({
modalApi.unlock(); modalApi.unlock();
} }
}, },
async onBeforeClose() {
// 如果已经成功保存，直接关闭，不显示提示
if (isSaved.value) {
return true;
}
try {
await confirm('修改内容可能还未保存，确定关闭吗?');
return true;
} catch {
return false;
}
},
async onOpenChange(isOpen: boolean) { async onOpenChange(isOpen: boolean) {
if (!isOpen) { if (!isOpen) {
formData.value = undefined; formData.value = undefined;
newsList.value = []; newsList.value = [];
isSaved.value = false;
return; return;
} }
isSaved.value = false;
const data = modalApi.getData<{ const data = modalApi.getData<{
accountId: number; accountId: number;
isCreating: boolean; isCreating: boolean;
@@ -87,7 +75,11 @@ const [Modal, modalApi] = useVbenModal({
if (!data) { if (!data) {
return; return;
} }
formData.value = data; formData.value = {
accountId: data.accountId,
mediaId: data.mediaId,
newsList: data.newsList,
};
newsList.value = data.newsList || []; newsList.value = data.newsList || [];
}, },
}); });
@@ -99,7 +91,7 @@ const [Modal, modalApi] = useVbenModal({
<NewsForm <NewsForm
v-if="formData" v-if="formData"
v-model="newsList" v-model="newsList"
:is-creating="formData.isCreating" :is-creating="!formData.mediaId"
/> />
</Spin> </Spin>
</Modal> </Modal>

163
apps/web-antd/src/views/mp/draft/components/news-form.vue → apps/web-antd/src/views/mp/draft/modules/news-form.vue
View File

@@ -44,8 +44,8 @@ const activeNewsItem = computed(() => {
return item; return item;
}); });
// TODO @hw：注释使用 /** */ // DONE @hw：注释使用 /** */
// 将图文向下移动 /** 将图文向下移动 */
function moveDownNews(index: number) { function moveDownNews(index: number) {
const current = newsList.value[index]; const current = newsList.value[index];
const next = newsList.value[index + 1]; const next = newsList.value[index + 1];
@@ -56,7 +56,7 @@ function moveDownNews(index: number) {
} }
} }
// 将图文向上移动 /** 将图文向上移动 */
function moveUpNews(index: number) { function moveUpNews(index: number) {
const current = newsList.value[index]; const current = newsList.value[index];
const prev = newsList.value[index - 1]; const prev = newsList.value[index - 1];
@@ -67,7 +67,7 @@ function moveUpNews(index: number) {
} }
} }
// 删除指定 index 的图文 /** 删除指定 index 的图文 */
async function removeNews(index: number) { async function removeNews(index: number) {
await confirm('确定删除该图文吗?'); await confirm('确定删除该图文吗?');
newsList.value.splice(index, 1); newsList.value.splice(index, 1);
@@ -76,7 +76,7 @@ async function removeNews(index: number) {
} }
} }
// 添加一个图文 /** 添加一个图文 */
function plusNews() { function plusNews() {
newsList.value.push(createEmptyNewsItem()); newsList.value.push(createEmptyNewsItem());
activeNewsIndex.value = newsList.value.length - 1; activeNewsIndex.value = newsList.value.length - 1;
@@ -86,19 +86,29 @@ function plusNews() {
<template> <template>
<Layout> <Layout>
<Layout.Sider width="40%" theme="light"> <Layout.Sider width="40%" theme="light">
<div class="select-item"> <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
<div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
<div v-for="(news, index) in newsList" :key="index"> <div v-for="(news, index) in newsList" :key="index">
<div <div
class="news-main father" class="group relative mx-auto h-[120px] w-full cursor-pointer bg-white"
v-if="index === 0" v-if="index === 0"
:class="{ activeAddNews: activeNewsIndex === index }" :class="{
'border-[5px] border-[#2bb673]': activeNewsIndex === index,
}"
@click="activeNewsIndex = index" @click="activeNewsIndex = index"
> >
<div class="news-content"> <div class="relative h-[120px] w-full bg-[#acadae]">
<img class="material-img" :src="news.thumbUrl" /> <img class="h-full w-full" :src="news.thumbUrl" />
<div class="news-content-title">{{ news.title }}</div> <div
class="absolute bottom-0 left-0 inline-block h-[25px] w-[98%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-[15px] text-white opacity-65"
>
{{ news.title }}
</div> </div>
<div class="child" v-if="newsList.length > 1"> </div>
<div
class="relative -bottom-[25px] hidden text-center group-hover:block"
v-if="newsList.length > 1"
>
<Button <Button
type="default" type="default"
shape="circle" shape="circle"
@@ -120,18 +130,22 @@ function plusNews() {
</div> </div>
</div> </div>
<div <div
class="news-main-item father" class="group relative mx-auto w-full cursor-pointer border-t border-[#eaeaea] bg-white py-[5px]"
v-if="index > 0" v-if="index > 0"
:class="{ activeAddNews: activeNewsIndex === index }" :class="{
'border-[5px] border-[#2bb673]': activeNewsIndex === index,
}"
@click="activeNewsIndex = index" @click="activeNewsIndex = index"
> >
<div class="news-content-item"> <div class="relative -ml-[3px]">
<div class="news-content-item-title">{{ news.title }}</div> <div class="inline-block w-[70%] text-xs">{{ news.title }}</div>
<div class="news-content-item-img"> <div class="inline-block w-[25%] bg-[#acadae]">
<img class="material-img" :src="news.thumbUrl" width="100%" /> <img class="h-full w-full" :src="news.thumbUrl" />
</div> </div>
</div> </div>
<div class="child"> <div
class="relative -bottom-[25px] hidden text-center group-hover:block"
>
<Button <Button
v-if="newsList.length > index + 1" v-if="newsList.length > index + 1"
shape="circle" shape="circle"
@@ -163,7 +177,10 @@ function plusNews() {
</div> </div>
</div> </div>
</div> </div>
<Row justify="center" class="ope-row"> <Row
justify="center"
class="mt-[5px] border-t border-[#eaeaea] pt-[5px] text-center"
>
<Button <Button
type="primary" type="primary"
shape="circle" shape="circle"
@@ -175,7 +192,7 @@ function plusNews() {
</Row> </Row>
</div> </div>
</Layout.Sider> </Layout.Sider>
<Layout.Content :style="{ backgroundColor: '#fff' }"> <Layout.Content class="bg-white">
<div v-if="newsList.length > 0 && activeNewsItem"> <div v-if="newsList.length > 0 && activeNewsItem">
<!-- 标题、作者、原文地址 --> <!-- 标题、作者、原文地址 -->
<Row :gutter="20"> <Row :gutter="20">
@@ -185,13 +202,13 @@ function plusNews() {
placeholder="请输入标题（必填）" placeholder="请输入标题（必填）"
/> />
</Col> </Col>
<Col :span="24" style="margin-top: 5px"> <Col :span="24" class="mt-[5px]">
<Input <Input
v-model:value="activeNewsItem.author" v-model:value="activeNewsItem.author"
placeholder="请输入作者" placeholder="请输入作者"
/> />
</Col> </Col>
<Col :span="24" style="margin-top: 5px"> <Col :span="24" class="mt-[5px]">
<Input <Input
v-model:value="activeNewsItem.contentSourceUrl" v-model:value="activeNewsItem.contentSourceUrl"
placeholder="请输入原文地址" placeholder="请输入原文地址"
@@ -212,7 +229,7 @@ function plusNews() {
:rows="8" :rows="8"
v-model:value="activeNewsItem.digest" v-model:value="activeNewsItem.digest"
placeholder="请输入摘要" placeholder="请输入摘要"
class="digest" class="inline-block w-full align-top"
:maxlength="120" :maxlength="120"
:show-count="true" :show-count="true"
/> />
@@ -230,14 +247,6 @@ function plusNews() {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
.ope-row {
padding-top: 5px;
margin-top: 5px;
text-align: center;
border-top: 1px solid #eaeaea;
}
:deep(.ant-row) { :deep(.ant-row) {
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -245,94 +254,4 @@ function plusNews() {
:deep(.ant-row:last-child) { :deep(.ant-row:last-child) {
margin-bottom: 0; margin-bottom: 0;
} }
.digest {
display: inline-block;
width: 100%;
vertical-align: top;
}
/* 新增图文 */
.news-main {
width: 100%;
height: 120px;
margin: auto;
background-color: #fff;
}
.news-content {
position: relative;
width: 100%;
height: 120px;
background-color: #acadae;
}
.news-content-title {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
width: 98%;
height: 25px;
padding: 1%;
overflow: hidden;
text-overflow: ellipsis;
font-size: 15px;
color: #fff;
white-space: nowrap;
background-color: black;
opacity: 0.65;
}
.news-main-item {
width: 100%;
padding: 5px 0;
margin: auto;
background-color: #fff;
border-top: 1px solid #eaeaea;
}
.news-content-item {
position: relative;
margin-left: -3px;
}
.news-content-item-title {
display: inline-block;
width: 70%;
font-size: 12px;
}
.news-content-item-img {
display: inline-block;
width: 25%;
background-color: #acadae;
}
.select-item {
width: 60%;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.activeAddNews {
border: 5px solid #2bb673;
}
}
.father .child {
position: relative;
bottom: 25px;
display: none;
text-align: center;
}
.father:hover .child {
display: block;
}
.material-img {
width: 100%;
height: 100%;
}
</style> </style>

2
apps/web-antd/src/views/mp/draft/components/types.ts → apps/web-antd/src/views/mp/draft/modules/types.ts
View File

@@ -1,4 +1,4 @@
// TODO @hw：要不把 components 里的部分，拿到 modules 里。 // DONE @hw：要不把 components 里的部分，拿到 modules 里。
interface NewsItem { interface NewsItem {
title: string; title: string;
thumbMediaId: string; thumbMediaId: string;

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

@@ -1,5 +0,0 @@
// TODO @hw：如果只有自己组件里用，一般是 modules，所以这个目录要改成 modules 哈（自己模块的一部分）；如果要给外部的组件用，可以叫 components；
export { default as MenuEditor } from './menu-editor.vue';
export { default as MenuPreviewer } from './menu-previewer.vue';
export * from './menuOptions';
export type * from './types';

43
apps/web-antd/src/views/mp/menu/components/menuOptions.ts
View File

@@ -1,43 +0,0 @@
// TODO @hw：这个要不合并到 types 里；
export default [
{
value: 'view',
label: '跳转网页',
},
{
value: 'miniprogram',
label: '跳转小程序',
},
{
value: 'click',
label: '点击回复',
},
{
value: 'article_view_limited',
label: '跳转图文消息',
},
{
value: 'scancode_push',
label: '扫码直接返回结果',
},
{
value: 'scancode_waitmsg',
label: '扫码回复',
},
{
value: 'pic_sysphoto',
label: '系统拍照发图',
},
{
value: 'pic_photo_or_album',
label: '拍照或者相册',
},
{
value: 'pic_weixin',
label: '微信相册',
},
{
value: 'location_select',
label: '选择地理位置',
},
];

22
apps/web-antd/src/views/mp/menu/data.ts
View File

@@ -1,3 +1,7 @@
import type { VbenFormSchema } from '#/adapter/form';
import { getSimpleAccountList } from '#/api/mp/account';
/** 菜单未选中标识 */ /** 菜单未选中标识 */
export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__'; export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
@@ -7,3 +11,21 @@ export enum Level {
Parent = '1', Parent = '1',
Undefined = '0', Undefined = '0',
} }
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'accountId',
label: '公众号',
component: 'ApiSelect',
componentProps: {
api: getSimpleAccountList,
labelField: 'name',
valueField: 'id',
autoSelect: 'first',
placeholder: '请选择公众号',
},
},
];
}

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

@@ -1,17 +1,26 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Menu, RawMenu } from './components/types'; import type { Menu, RawMenu } from './modules/types';
import { ref } from 'vue'; import { nextTick, onMounted, ref } from 'vue';
import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui'; import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui';
import { handleTree } from '@vben/utils'; import { handleTree } from '@vben/utils';
import { Button, Form, message } from 'ant-design-vue'; import { Button, message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { getSimpleAccountList } from '#/api/mp/account';
import { deleteMenu, getMenuList, saveMenu } from '#/api/mp/menu'; import { deleteMenu, getMenuList, saveMenu } from '#/api/mp/menu';
import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/components'; import {
import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data'; Level,
import { WxAccountSelect } from '#/views/mp/modules/wx-account-select'; MENU_NOT_SELECTED,
useGridFormSchema,
} from '#/views/mp/menu/data';
import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/modules';
import iphoneBackImg from './modules/assets/iphone_backImg.png';
import menuFootImg from './modules/assets/menu_foot.png';
import menuHeadImg from './modules/assets/menu_head.png';
defineOptions({ name: 'MpMenu' }); defineOptions({ name: 'MpMenu' });
@@ -21,6 +30,25 @@ const accountId = ref(-1);
const accountName = ref<string>(''); const accountName = ref<string>('');
const menuList = ref<Menu[]>([]); const menuList = ref<Menu[]>([]);
// 创建表单
const [AccountForm, accountFormApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-[240px]',
},
},
layout: 'horizontal',
schema: useGridFormSchema(),
wrapperClass: 'grid-cols-1',
showDefaultActions: false,
handleValuesChange: async (values, changedFields) => {
// 当 accountId 字段变化时（包括 autoSelect 自动选择），同步更新 accountId
if (changedFields.includes('accountId') && values.accountId) {
await onAccountChanged(values);
}
},
});
// ======================== 菜单操作 ======================== // ======================== 菜单操作 ========================
// 当前选中菜单编码： // 当前选中菜单编码：
// * 一级（'x'） // * 一级（'x'）
@@ -50,12 +78,36 @@ const tempSelfObj = ref<{
const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗 const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
/** 侦听公众号变化 */ /** 侦听公众号变化 */
function onAccountChanged(id: number, name: string) { async function onAccountChanged(values: Record<string, any>) {
accountId.value = id; accountId.value = values.accountId;
accountName.value = name; // 从 API 获取公众号列表并查找对应的公众号名称
const accountList = await getSimpleAccountList();
const account = accountList.find((item) => item.id === values.accountId);
accountName.value = account?.name || '';
getList(); getList();
} }
/** 初始化账号ID - 作为备用方案，防止 handleValuesChange 未触发 */
async function initAccountId() {
// 等待表单初始化完成
await nextTick();
try {
const values = await accountFormApi.getValues();
if (values?.accountId && accountId.value === -1) {
// 如果表单有值但 accountId 还是初始值，则手动触发一次
await onAccountChanged(values);
}
} catch {
// 忽略错误
}
}
// 组件挂载时初始化账号ID
onMounted(async () => {
await nextTick();
await initAccountId();
});
/** 查询并转换菜单 */ /** 查询并转换菜单 */
async function getList() { async function getList() {
loading.value = true; loading.value = true;
@@ -250,24 +302,36 @@ function menuToBackend(menu: any) {
</template> </template>
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<!-- TODO @hw：是不是少了一个框子哈？ -->
<!-- <ContentWrap> --> <!-- <ContentWrap> -->
<Form layout="inline" class="-mb-15px w-240px"> <AccountForm class="-mb-15px w-240px" @values-change="onAccountChanged" />
<Form.Item label="公众号" prop="accountId" class="w-240px">
<WxAccountSelect @change="onAccountChanged" />
</Form.Item>
</Form>
<!-- </ContentWrap> --> <!-- </ContentWrap> -->
<!-- TODO @hw：貌似高度高了点。就是手机下面部分，空了一大块。 --> <!-- DONE @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
<ContentWrap> <ContentWrap>
<div class="clearfix public-account-management" v-loading="loading"> <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
<div
class="mx-auto w-[1200px] after:clear-both after:table after:content-['']"
v-loading="loading"
>
<!--左边配置菜单--> <!--左边配置菜单-->
<div class="left"> <div
<div class="weixin-hd"> class="relative float-left box-border block h-[715px] w-[350px] bg-[length:100%_auto] bg-no-repeat p-[518px_25px_88px]"
<div class="weixin-title">{{ accountName }}</div> :style="{ backgroundImage: `url(${iphoneBackImg})` }"
>
<div
class="relative bottom-[426px] left-0 h-[64px] w-[300px] bg-[length:100%] bg-[position:0_0] bg-no-repeat text-center text-white"
:style="{ backgroundImage: `url(${menuHeadImg})` }"
>
<div
class="absolute left-0 top-[33px] w-full text-center text-sm text-white"
>
{{ accountName }}
</div> </div>
<div class="clearfix weixin-menu"> </div>
<div
class="bg-[position:0_0] bg-no-repeat pl-[43px] text-xs after:clear-both after:table after:content-['']"
:style="{ backgroundImage: `url(${menuFootImg})` }"
>
<MenuPreviewer <MenuPreviewer
v-model="menuList" v-model="menuList"
:account-id="accountId" :account-id="accountId"
@@ -277,27 +341,25 @@ function menuToBackend(menu: any) {
@submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)" @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
/> />
</div> </div>
<div class="save-div"> <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
<div class="mt-[15px] flex items-center justify-center gap-[10px]">
<Button <Button
class="save-btn"
type="primary" type="primary"
@click="onSave" @click="onSave"
v-access:code="['mp:menu:save']" v-access:code="['mp:menu:save']"
> >
保存并发布菜单 保存并发布菜单
</Button> </Button>
<Button <Button danger @click="onClear" v-access:code="['mp:menu:delete']">
class="save-btn"
danger
@click="onClear"
v-access:code="['mp:menu:delete']"
>
清空菜单 清空菜单
</Button> </Button>
</div> </div>
</div> </div>
<!--右边配置--> <!--右边配置-->
<div class="right" v-if="showRightPanel"> <div
class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5"
v-if="showRightPanel"
>
<MenuEditor <MenuEditor
:account-id="accountId" :account-id="accountId"
:is-parent="isParent" :is-parent="isParent"
@@ -306,93 +368,10 @@ function menuToBackend(menu: any) {
/> />
</div> </div>
<!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了--> <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
<div v-else class="right"> <div v-else class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5">
<p>请选择菜单配置</p> <p>请选择菜单配置</p>
</div> </div>
</div> </div>
</ContentWrap> </ContentWrap>
</Page> </Page>
</template> </template>
<style lang="scss" scoped>
/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
/* 公共颜色变量 */
.clearfix {
*zoom: 1;
}
.clearfix::after {
clear: both;
display: table;
content: '';
}
div {
text-align: left;
}
.weixin-hd {
position: relative;
bottom: 426px;
left: 0;
width: 300px;
height: 64px;
color: #fff;
text-align: center;
background: transparent url('./components/assets/menu_head.png') no-repeat 0 0;
background-position: 0 0;
background-size: 100%;
}
.weixin-title {
position: absolute;
top: 33px;
left: 0;
width: 100%;
font-size: 14px;
color: #fff;
text-align: center;
}
.weixin-menu {
padding-left: 43px;
font-size: 12px;
background: transparent url('./components/assets/menu_foot.png') no-repeat 0 0;
}
.public-account-management {
width: 1200px;
// min-width: 1200px;
margin: 0 auto;
.left {
position: relative;
float: left;
box-sizing: border-box;
display: block;
width: 350px;
height: 715px;
padding: 518px 25px 88px;
background: url('./components/assets/iphone_backImg.png') no-repeat;
background-size: 100% auto;
.save-div {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
margin-top: 15px;
}
}
/* 右边菜单内容 */
.right {
float: left;
box-sizing: border-box;
width: 63%;
padding: 20px;
margin-left: 20px;
background-color: #e8e7e7;
}
}
</style>

0
apps/web-antd/src/views/mp/menu/components/assets/iphone_backImg.png → apps/web-antd/src/views/mp/menu/modules/assets/iphone_backImg.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

0
apps/web-antd/src/views/mp/menu/components/assets/menu_foot.png → apps/web-antd/src/views/mp/menu/modules/assets/menu_foot.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

0
apps/web-antd/src/views/mp/menu/components/assets/menu_head.png → apps/web-antd/src/views/mp/menu/modules/assets/menu_head.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

154
apps/web-antd/src/views/mp/menu/components/menu-editor.vue → apps/web-antd/src/views/mp/menu/modules/editor.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
// TODO @hw：名字可以缩写成 editor.vue，文件名 // DONE @hw：名字可以缩写成 editor.vue，文件名
import { computed, nextTick, ref, watch } from 'vue'; import { computed, nextTick, ref, watch } from 'vue';
import { IconifyIcon } from '@vben/icons'; import { IconifyIcon } from '@vben/icons';
@@ -14,11 +14,9 @@ import {
Select, Select,
} from 'ant-design-vue'; } from 'ant-design-vue';
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select'; import { MaterialSelect, News, ReplySelect } from '#/views/mp/modules';
import { WxNews } from '#/views/mp/modules/wx-news';
import { WxReplySelect } from '#/views/mp/modules/wx-reply';
import menuOptions from './menuOptions'; import { menuOptions } from './types';
const props = defineProps<{ const props = defineProps<{
accountId: number; accountId: number;
@@ -40,13 +38,13 @@ const menu = computed({
}, },
}); });
const showNewsDialog = ref(false); const showNewsDialog = ref(false);
const hackResetWxReplySelect = ref(false); const hackResetReplySelect = ref(false);
const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0)); const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
watch(menu, () => { watch(menu, () => {
hackResetWxReplySelect.value = false; // 销毁组件 hackResetReplySelect.value = false; // 销毁组件
nextTick(() => { nextTick(() => {
hackResetWxReplySelect.value = true; // 重建组件 hackResetReplySelect.value = true; // 重建组件
}); });
}); });
@@ -83,8 +81,9 @@ function deleteMaterial() {
<template> <template>
<div> <div>
<div class="configure-page"> <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
<div class="delete-btn"> <div>
<div class="mb-[15px] text-right">
<Button type="primary" danger @click="emit('delete')"> <Button type="primary" danger @click="emit('delete')">
<IconifyIcon icon="lucide:trash-2" /> <IconifyIcon icon="lucide:trash-2" />
删除当前菜单 删除当前菜单
@@ -93,7 +92,7 @@ function deleteMaterial() {
<div> <div>
<span>菜单名称：</span> <span>菜单名称：</span>
<Input <Input
class="input-width" class="mr-[2%] w-[240px]"
v-model:value="menu.name" v-model:value="menu.name"
placeholder="请输入菜单名称" placeholder="请输入菜单名称"
:maxlength="isParent ? 4 : 7" :maxlength="isParent ? 4 : 7"
@@ -101,21 +100,21 @@ function deleteMaterial() {
/> />
</div> </div>
<div v-if="isLeave"> <div v-if="isLeave">
<div class="menu-content"> <div class="mt-5">
<span>菜单标识：</span> <span>菜单标识：</span>
<Input <Input
class="input-width" class="mr-[2%] w-[240px]"
v-model:value="menu.menuKey" v-model:value="menu.menuKey"
placeholder="请输入菜单 KEY" placeholder="请输入菜单 KEY"
allow-clear allow-clear
/> />
</div> </div>
<div class="menu-content"> <div class="mt-5">
<span>菜单内容：</span> <span>菜单内容：</span>
<Select <Select
v-model:value="menu.type" v-model:value="menu.type"
placeholder="请选择" placeholder="请选择"
class="input-width" class="mr-[2%] w-[240px]"
allow-clear allow-clear
> >
<Select.Option <Select.Option
@@ -128,56 +127,69 @@ function deleteMaterial() {
</Select.Option> </Select.Option>
</Select> </Select>
</div> </div>
<div class="configur-content" v-if="menu.type === 'view'"> <div
class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
v-if="menu.type === 'view'"
>
<span>跳转链接：</span> <span>跳转链接：</span>
<Input <Input
class="input-width" class="mr-[2%] w-[240px]"
v-model:value="menu.url" v-model:value="menu.url"
placeholder="请输入链接" placeholder="请输入链接"
allow-clear allow-clear
/> />
</div> </div>
<!-- TODO @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； --> <!-- DONE @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
<div class="configur-content" v-if="menu.type === 'miniprogram'"> <div
<div class="applet"> class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
<span>小程序的 appid ：</span> v-if="menu.type === 'miniprogram'"
>
<div class="mb-5 flex items-center">
<div class="w-[20%]">小程序的 appid ：</div>
<Input <Input
class="input-width" class="mr-[2%] flex-1"
v-model:value="menu.miniProgramAppId" v-model:value="menu.miniProgramAppId"
placeholder="请输入小程序的appid" placeholder="请输入小程序的appid"
allow-clear allow-clear
/> />
</div> </div>
<div class="applet"> <div class="mb-5 flex items-center">
<span>小程序的页面路径：</span> <div class="w-[20%]">小程序的页面路径：</div>
<Input <Input
class="input-width" class="mr-[2%] flex-1"
v-model:value="menu.miniProgramPagePath" v-model:value="menu.miniProgramPagePath"
placeholder="请输入小程序的页面路径，如：pages/index" placeholder="请输入小程序的页面路径，如：pages/index"
allow-clear allow-clear
/> />
</div> </div>
<div class="applet"> <div class="mb-5 flex items-center">
<span>小程序的备用网页：</span> <div class="w-[20%]">小程序的备用网页：</div>
<Input <Input
class="input-width" class="mr-[2%] flex-1"
v-model:value="menu.url" v-model:value="menu.url"
placeholder="不支持小程序的老版本客户端将打开本网页" placeholder="不支持小程序的老版本客户端将打开本网页"
allow-clear allow-clear
/> />
</div> </div>
<p class="blue"> <p class="mt-[10px] text-[#29b6f6]">
tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！ tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
</p> </p>
</div> </div>
<div <div
class="configur-content" class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
v-if="menu.type === 'article_view_limited'" v-if="menu.type === 'article_view_limited'"
> >
<Row> <Row>
<div class="select-item" v-if="menu && menu.replyArticles"> <div
<WxNews :articles="menu.replyArticles" /> class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
<Row class="ope-row" justify="center" align="middle"> v-if="menu && menu.replyArticles"
>
<News :articles="menu.replyArticles" />
<Row
class="pt-[10px] text-center"
justify="center"
align="middle"
>
<Button <Button
type="primary" type="primary"
danger danger
@@ -190,8 +202,8 @@ function deleteMaterial() {
</div> </div>
<div v-else> <div v-else>
<Row justify="center"> <Row justify="center">
<!-- TODO @hw：html 标签里的 style 要用 tindwind 替代下； --> <!-- DONE @hw：html 标签里的 style 要用 tindwind 替代下； -->
<Col :span="24" style="text-align: center"> <Col :span="24" class="text-center">
<Button type="primary" @click="showNewsDialog = true"> <Button type="primary" @click="showNewsDialog = true">
素材库选择 素材库选择
<IconifyIcon icon="lucide:circle-check" /> <IconifyIcon icon="lucide:circle-check" />
@@ -205,7 +217,7 @@ function deleteMaterial() {
width="80%" width="80%"
destroy-on-close destroy-on-close
> >
<WxMaterialSelect <MaterialSelect
type="news" type="news"
:account-id="props.accountId" :account-id="props.accountId"
@select-material="selectMaterial" @select-material="selectMaterial"
@@ -214,79 +226,15 @@ function deleteMaterial() {
</Row> </Row>
</div> </div>
<!-- TODO @hw：貌似这个组件出不来 --> <!-- TODO @hw：貌似这个组件出不来 -->
<!--TODO @hw 这个组件显示逻辑是要有两个菜单才会显示，之前的代码逻辑我这边也不是很清楚，待沟通 -->
<div <div
class="configur-content" class="configur-content mt-5"
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'" v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
> >
<WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" /> <ReplySelect v-model="menu.reply" />
</div> </div>
<!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； --> <!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped>
/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
:deep(.ant-input) {
// width: 70%;
margin-right: 2%;
}
.configure-page {
.delete-btn {
margin-bottom: 15px;
text-align: right;
}
.menu-content {
margin-top: 20px;
}
.configur-content {
padding: 20px 10px;
margin-top: 20px;
background-color: #fff;
border-radius: 5px;
.select-item {
width: 280px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.ope-row {
padding-top: 10px;
text-align: center;
}
}
}
.blue {
margin-top: 10px;
color: #29b6f6;
}
.applet {
margin-bottom: 20px;
span {
width: 20%;
}
}
.input-width {
width: 240px;
}
.material {
.input-width {
width: 30%;
}
:deep(.ant-input) {
width: 80%;
}
}
}
</style>

5
apps/web-antd/src/views/mp/menu/modules/index.ts Normal file
View File

@@ -0,0 +1,5 @@
// DONE @hw：如果只有自己组件里用，一般是 modules，所以这个目录要改成 modules 哈（自己模块的一部分）；如果要给外部的组件用，可以叫 components；
export { default as MenuEditor } from './editor.vue';
export { default as MenuPreviewer } from './previewer.vue';
export type * from './types';
export * from './types';

111
apps/web-antd/src/views/mp/menu/components/menu-previewer.vue → apps/web-antd/src/views/mp/menu/modules/previewer.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
// TODO @hw：名字可以缩写成 previewer.vue，文件名 // DONE @hw：名字可以缩写成 previewer.vue，文件名
import type { Menu } from './types'; import type { Menu } from './types';
import { computed } from 'vue'; import { computed } from 'vue';
@@ -44,9 +44,8 @@ function addMenu() {
/** 添加横向二级菜单；parent 表示要操作的父菜单 */ /** 添加横向二级菜单；parent 表示要操作的父菜单 */
function addSubMenu(i: number, parent: any) { function addSubMenu(i: number, parent: any) {
const subMenuKeyLength = parent.children.length; // 获取二级菜单 key 长度 // DONE @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
// TODO @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。 parent.children[parent.children.length] = {
const addButton = {
name: '子菜单名称', name: '子菜单名称',
reply: { reply: {
// 用于存储回复内容 // 用于存储回复内容
@@ -54,8 +53,11 @@ function addSubMenu(i: number, parent: any) {
accountId: props.accountId, // 保证组件里，可以使用到对应的公众号 accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
}, },
}; };
parent.children[subMenuKeyLength] = addButton; subMenuClicked(
subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength); parent.children[parent.children.length - 1],
i,
parent.children.length - 1,
);
} }
/** 一级菜单点击 */ /** 一级菜单点击 */
@@ -129,18 +131,23 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
@end="onParentDragEnd" @end="onParentDragEnd"
> >
<template #item="{ element: parent, index: x }"> <template #item="{ element: parent, index: x }">
<div class="menu-bottom"> <div
class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
>
<!-- 一级菜单 --> <!-- 一级菜单 -->
<div <div
@click="menuClicked(parent, x)" @click="menuClicked(parent, x)"
class="menu-item" class="box-border flex h-[44px] w-full items-center justify-center leading-[44px]"
:class="{ active: props.activeIndex === `${x}` }" :class="{ 'border border-[#2bb673]': props.activeIndex === `${x}` }"
> >
<IconifyIcon icon="lucide:panel-right-open" color="black" /> <IconifyIcon icon="lucide:panel-right-open" color="black" />
{{ parent.name }} {{ parent.name }}
</div> </div>
<!-- 以下为二级菜单--> <!-- 以下为二级菜单-->
<div class="submenu" v-if="props.parentIndex === x && parent.children"> <div
class="absolute bottom-[45px] left-0 w-[85.5px]"
v-if="props.parentIndex === x && parent.children"
>
<draggable <draggable
v-model="parent.children" v-model="parent.children"
item-key="id" item-key="id"
@@ -149,11 +156,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
@end="onChildDragEnd" @end="onChildDragEnd"
> >
<template #item="{ element: child, index: y }"> <template #item="{ element: child, index: y }">
<div class="menu-bottom subtitle">
<div <div
class="menu-sub-item" class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
v-if="parent.children" >
:class="{ active: props.activeIndex === `${x}-${y}` }" <div
class="box-border h-[44px] text-center leading-[44px]"
:class="{
'border border-[#2bb673]':
props.activeIndex === `${x}-${y}`,
}"
@click="subMenuClicked(child, x, y)" @click="subMenuClicked(child, x, y)"
> >
{{ child.name }} {{ child.name }}
@@ -161,13 +172,12 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
</div> </div>
</template> </template>
</draggable> </draggable>
<!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号 -->
<div <div
class="menu-bottom menu-addicon" class="relative float-left box-border block flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center leading-[46px]"
v-if="!parent.children || parent.children.length < 5" v-if="!parent.children || parent.children.length < 5"
@click="addSubMenu(x, parent)" @click="addSubMenu(x, parent)"
> >
<IconifyIcon icon="lucide:plus" class="plus" /> <IconifyIcon icon="lucide:plus" class="text-[#2bb673]" />
</div> </div>
</div> </div>
</div> </div>
@@ -176,78 +186,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
<!-- 一级菜单加号 --> <!-- 一级菜单加号 -->
<div <div
class="menu-bottom menu-addicon" class="relative float-left box-border block flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center leading-[46px]"
v-if="menuList.length < 3" v-if="menuList.length < 3"
@click="addMenu" @click="addMenu"
> >
<IconifyIcon icon="lucide:plus" class="plus" /> <IconifyIcon icon="lucide:plus" class="text-[#2bb673]" />
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
.menu-bottom {
position: relative;
float: left;
box-sizing: border-box;
display: block;
width: 85.5px;
text-align: center;
cursor: pointer;
background-color: #fff;
border: 1px solid #ebedee;
&.menu-addicon {
display: flex;
align-items: center;
justify-content: center;
height: 46px;
line-height: 46px;
.plus {
color: #2bb673;
}
}
.menu-item {
// text-align: center;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 44px;
line-height: 44px;
&.active {
border: 1px solid #2bb673;
}
}
.menu-sub-item {
box-sizing: border-box;
height: 44px;
line-height: 44px;
text-align: center;
&.active {
border: 1px solid #2bb673;
}
}
}
/* 第二级菜单 */
.submenu {
position: absolute;
bottom: 45px;
width: 85.5px;
.subtitle {
box-sizing: border-box;
background-color: #fff;
}
}
.draggable-ghost { .draggable-ghost {
background: #f7fafc; background: #f7fafc;
border: 1px solid #4299e1; border: 1px solid #4299e1;

44
apps/web-antd/src/views/mp/menu/components/types.ts → apps/web-antd/src/views/mp/menu/modules/types.ts
View File

@@ -71,3 +71,47 @@ interface _Menu extends RawMenu {
} }
export type Menu = Partial<_Menu>; export type Menu = Partial<_Menu>;
// DONE @hw：这个要不合并到 types 里；
export const menuOptions = [
{
value: 'view',
label: '跳转网页',
},
{
value: 'miniprogram',
label: '跳转小程序',
},
{
value: 'click',
label: '点击回复',
},
{
value: 'article_view_limited',
label: '跳转图文消息',
},
{
value: 'scancode_push',
label: '扫码直接返回结果',
},
{
value: 'scancode_waitmsg',
label: '扫码回复',
},
{
value: 'pic_sysphoto',
label: '系统拍照发图',
},
{
value: 'pic_photo_or_album',
label: '拍照或者相册',
},
{
value: 'pic_weixin',
label: '微信相册',
},
{
value: 'location_select',
label: '选择地理位置',
},
] as const;

20
apps/web-antd/src/views/mp/modules/index.ts Normal file
View File

@@ -0,0 +1,20 @@
// 统一导出所有模块组件
export { default as Location } from './location/location.vue';
export { default as MaterialSelect } from './material-select/material-select.vue';
export * from './material-select/types';
export * from './msg/types';
export { default as Music } from './music/music.vue';
export { default as News } from './news/news.vue';
export { default as ReplySelect } from './reply/reply.vue';
export * from './reply/types';
export { default as VideoPlayer } from './video-play/video-play.vue';
export { default as VoicePlayer } from './voice-play/voice-play.vue';

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

@@ -6,7 +6,7 @@ import { IconifyIcon } from '@vben/icons';
import { Col, Row } from 'ant-design-vue'; import { Col, Row } from 'ant-design-vue';
defineOptions({ name: 'WxLocation' }); defineOptions({ name: 'Location' });
const props = defineProps({ const props = defineProps({
locationX: { locationX: {

324
apps/web-antd/src/views/mp/modules/material-select/material-select.vue Normal file
View File

@@ -0,0 +1,324 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { computed, onMounted, reactive, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { formatTime } from '@vben/utils';
import { Button, Pagination, Spin } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDraftPage } from '#/api/mp/draft';
import { getFreePublishPage } from '#/api/mp/freePublish';
import { getMaterialPage } from '#/api/mp/material';
import { News, VideoPlayer, VoicePlayer } from '#/views/mp/modules/index';
import { NewsType } from './types';
defineOptions({ name: 'MaterialSelect' });
const props = withDefaults(
defineProps<{
accountId: number;
newsType?: NewsType;
type: string;
}>(),
{
newsType: NewsType.Published,
},
);
const emit = defineEmits(['selectMaterial']);
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) {
emit('selectMaterial', item);
}
/** 获取分页数据 */
async function getPage() {
loading.value = true;
try {
if (props.type === 'news' && props.newsType === NewsType.Published) {
// 【图文】+ 【已发布】
await getFreePublishPageFun();
} else if (props.type === 'news' && props.newsType === NewsType.Draft) {
// 【图文】+ 【草稿】
await getDraftPageFun();
} else {
// 【素材】
await getMaterialPageFun();
}
} finally {
loading.value = false;
}
}
/** 获取素材分页 */
async function getMaterialPageFun() {
const data = await getMaterialPage({
...queryParams,
type: props.type,
});
list.value = data.list;
total.value = data.total;
}
/** 获取已发布图文分页 */
async function getFreePublishPageFun() {
const data = await 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 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;
}
// 音频素材表格列
const voiceColumns = computed(() => [
{ field: 'mediaId', title: '编号', align: 'center' },
{ field: 'name', title: '文件名', align: 'center' },
{
field: 'url',
title: '语音',
align: 'center',
slots: { default: 'voice' },
},
{
field: 'createTime',
title: '上传时间',
align: 'center',
width: 180,
formatter: ({ cellValue }: any) =>
formatTime(cellValue, 'YYYY-MM-DD HH:mm:ss'),
},
{
field: 'actions',
title: '操作',
align: 'center',
fixed: 'right',
slots: { default: 'actions' },
},
]);
// 视频素材表格列
const videoColumns = computed(() => [
{ field: 'mediaId', title: '编号', align: 'center' },
{ field: 'name', title: '文件名', align: 'center' },
{ field: 'title', title: '标题', align: 'center' },
{ field: 'introduction', title: '介绍', align: 'center' },
{
field: 'url',
title: '视频',
align: 'center',
slots: { default: 'video' },
},
{
field: 'createTime',
title: '上传时间',
align: 'center',
width: 180,
formatter: ({ cellValue }: any) =>
formatTime(cellValue, 'YYYY-MM-DD HH:mm:ss'),
},
{
field: 'actions',
title: '操作',
align: 'center',
fixed: 'right',
slots: { default: 'actions' },
},
]);
// 语音表格
const [VoiceGrid] = useVbenVxeGrid({
gridOptions: {
columns: voiceColumns.value,
border: true,
pagerConfig: {
enabled: true,
currentPage: 1,
pageSize: 10,
},
proxyConfig: {
ajax: {
query: async ({ page }) => {
const data = await getMaterialPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
accountId: props.accountId,
type: 'voice',
});
return data;
},
},
},
toolbarConfig: {
refresh: true,
},
} as VxeTableGridOptions<any>,
});
// 视频表格
const [VideoGrid] = useVbenVxeGrid({
gridOptions: {
columns: videoColumns.value,
border: true,
pagerConfig: {
enabled: true,
currentPage: 1,
pageSize: 10,
},
proxyConfig: {
ajax: {
query: async ({ page }) => {
const data = await getMaterialPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
accountId: props.accountId,
type: 'video',
});
return data;
},
},
},
toolbarConfig: {
refresh: true,
},
} as VxeTableGridOptions<any>,
});
// 对于 image 和 news 类型，需要手动加载数据
onMounted(() => {
if (props.type === 'image' || props.type === 'news') {
getPage();
}
});
</script>
<template>
<div class="pb-8">
<!-- 类型：image -->
<div v-if="props.type === 'image'">
<Spin :spinning="loading">
<div
class="columns-1 gap-2.5 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
>
<div
v-for="item in list"
:key="item.mediaId"
class="mb-2.5 break-inside-avoid rounded border border-gray-200 p-2.5 transition-shadow hover:shadow-md"
>
<img :src="item.url" :alt="item.name" class="w-full rounded" />
<p class="my-2 truncate text-sm">{{ item.name }}</p>
<div class="flex justify-center">
<Button type="primary" @click="selectMaterialFun(item)">
选择
<IconifyIcon icon="lucide:circle-check" />
</Button>
</div>
</div>
</div>
</Spin>
<!-- 分页组件 -->
<div class="mt-4 flex justify-end">
<Pagination
:total="total"
v-model:current="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@change="getMaterialPageFun"
/>
</div>
</div>
<!-- 类型：voice -->
<div v-else-if="props.type === 'voice'">
<VoiceGrid>
<template #voice="{ row }">
<VoicePlayer :url="row.url" />
</template>
<template #actions="{ row }">
<Button type="link" @click="selectMaterialFun(row)">
选择
<IconifyIcon icon="lucide:circle-check" />
</Button>
</template>
</VoiceGrid>
</div>
<!-- 类型：video -->
<div v-else-if="props.type === 'video'">
<VideoGrid>
<template #video="{ row }">
<VideoPlayer :url="row.url" />
</template>
<template #actions="{ row }">
<Button type="link" @click="selectMaterialFun(row)">
选择
<IconifyIcon icon="lucide:circle-check" />
</Button>
</template>
</VideoGrid>
</div>
<!-- 类型：news -->
<div v-else-if="props.type === 'news'">
<Spin :spinning="loading">
<div
class="columns-1 gap-2.5 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
>
<div
v-for="item in list"
:key="item.mediaId"
class="mb-2.5 break-inside-avoid"
>
<div v-if="item.content && item.content.newsItem">
<News :articles="item.content.newsItem" />
<div class="mt-2 flex justify-center">
<Button type="primary" @click="selectMaterialFun(item)">
选择
<IconifyIcon icon="lucide:circle-check" />
</Button>
</div>
</div>
</div>
</div>
</Spin>
<!-- 分页组件 -->
<div class="mt-4 flex justify-end">
<Pagination
:total="total"
v-model:current="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@change="getMaterialPageFun"
/>
</div>
</div>
</div>
</template>

4
apps/web-antd/src/views/mp/modules/material-select/types.ts Normal file
View File

@@ -0,0 +1,4 @@
export enum NewsType {
Draft = '2',
Published = '1',
}

0
apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue → apps/web-antd/src/views/mp/modules/msg/msg-event.vue
View File

9
apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue → apps/web-antd/src/views/mp/modules/msg/msg-list.vue
View File

@@ -54,7 +54,7 @@ const getNickname = (sendFrom: SendFromType) =>
<div <div
class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]" class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
> >
<div class="avue-comment__create_time"> <div class="text-sm text-[#999]">
{{ formatDateTime(item.createTime) }} {{ formatDateTime(item.createTime) }}
</div> </div>
</div> </div>
@@ -69,9 +69,4 @@ const getNickname = (sendFrom: SendFromType) =>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style scoped></style>
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
/** TODO @hw：这里有没办法重构掉哈。辛苦~~~ */
@import url('../comment.scss');
@import url('../card.scss');
</style>

24
apps/web-antd/src/views/mp/modules/wx-msg/msg.vue → apps/web-antd/src/views/mp/modules/msg/msg.vue
View File

@@ -3,11 +3,13 @@ import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons'; import { IconifyIcon } from '@vben/icons';
import { WxLocation } from '#/views/mp/modules/wx-location'; import {
import { WxMusic } from '#/views/mp/modules/wx-music'; Location,
import { WxNews } from '#/views/mp/modules/wx-news'; Music,
import { WxVideoPlayer } from '#/views/mp/modules/wx-video-play'; News,
import { WxVoicePlayer } from '#/views/mp/modules/wx-voice-play'; VideoPlayer,
VoicePlayer,
} from '#/views/mp/modules';
import MsgEvent from './msg-event.vue'; import MsgEvent from './msg-event.vue';
import { MsgType } from './types'; import { MsgType } from './types';
@@ -28,7 +30,7 @@ const item = ref<any>(props.item);
<div v-else-if="item.type === MsgType.Text">{{ item.content }}</div> <div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
<div v-else-if="item.type === MsgType.Voice"> <div v-else-if="item.type === MsgType.Voice">
<WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" /> <VoicePlayer :url="item.mediaUrl" :content="item.recognition" />
</div> </div>
<div v-else-if="item.type === MsgType.Image"> <div v-else-if="item.type === MsgType.Image">
@@ -41,7 +43,7 @@ const item = ref<any>(props.item);
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'" v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
class="text-center" class="text-center"
> >
<WxVideoPlayer :url="item.mediaUrl" /> <VideoPlayer :url="item.mediaUrl" />
</div> </div>
<div v-else-if="item.type === MsgType.Link" class="flex-1"> <div v-else-if="item.type === MsgType.Link" class="flex-1">
@@ -61,7 +63,7 @@ const item = ref<any>(props.item);
</div> </div>
<div v-else-if="item.type === MsgType.Location"> <div v-else-if="item.type === MsgType.Location">
<WxLocation <Location
:label="item.label" :label="item.label"
:location-y="item.locationY" :location-y="item.locationY"
:location-x="item.locationX" :location-x="item.locationX"
@@ -69,11 +71,11 @@ const item = ref<any>(props.item);
</div> </div>
<div v-else-if="item.type === MsgType.News" class="w-[300px]"> <div v-else-if="item.type === MsgType.News" class="w-[300px]">
<WxNews :articles="item.articles" /> <News :articles="item.articles" />
</div> </div>
<div v-else-if="item.type === MsgType.Music"> <div v-else-if="item.type === MsgType.Music">
<WxMusic <Music
:title="item.title" :title="item.title"
:description="item.description" :description="item.description"
:thumb-media-url="item.thumbMediaUrl" :thumb-media-url="item.thumbMediaUrl"
@@ -83,3 +85,5 @@ const item = ref<any>(props.item);
</div> </div>
</div> </div>
</template> </template>
<style scoped></style>

0
apps/web-antd/src/views/mp/modules/wx-msg/types.ts → apps/web-antd/src/views/mp/modules/msg/types.ts
View File

23
apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue → apps/web-antd/src/views/mp/modules/music/music.vue
View File

@@ -2,7 +2,7 @@
【微信消息 - 音乐】 【微信消息 - 音乐】
--> -->
<script lang="ts" setup> <script lang="ts" setup>
defineOptions({ name: 'WxMusic' }); defineOptions({ name: 'Music' });
const props = defineProps({ const props = defineProps({
title: { title: {
@@ -43,18 +43,15 @@ defineExpose({
:href="hqMusicUrl ? hqMusicUrl : musicUrl" :href="hqMusicUrl ? hqMusicUrl : musicUrl"
style="text-decoration: none" style="text-decoration: none"
> >
<div <div class="flex rounded-[5px] bg-white p-[10px]">
class="avue-card__body" <div class="mr-3 h-12 w-12 overflow-hidden rounded-full">
style="padding: 10px; background-color: #fff; border-radius: 5px" <img :src="thumbMediaUrl" alt="" class="h-full w-full object-cover" />
>
<div class="avue-card__avatar">
<img :src="thumbMediaUrl" alt="" />
</div> </div>
<div class="avue-card__detail"> <div class="flex-1">
<div class="avue-card__title" style="margin-bottom: unset"> <div class="text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]">
{{ title }} {{ title }}
</div> </div>
<div class="avue-card__info" style="height: unset"> <div class="line-clamp-3 text-[rgba(0,0,0,0.45)]">
{{ description }} {{ description }}
</div> </div>
</div> </div>
@@ -63,8 +60,4 @@ defineExpose({
</div> </div>
</template> </template>
<style lang="scss" scoped> <style scoped></style>
/** TODO @hw：这里有没办法重构掉哈。辛苦~~~ */
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss */
@import url('../wx-msg/card.scss');
</style>

68
apps/web-antd/src/views/mp/modules/news/news.vue Normal file
View File

@@ -0,0 +1,68 @@
<!--
- Copyright (C) 2018-2019
- All rights reserved, Designed By www.joolun.com
【微信消息 - 图文】
芋道源码：
① 代码优化，补充注释，提升阅读性
-->
<script lang="ts" setup>
import { Image } from 'ant-design-vue';
defineOptions({ name: 'News' });
const props = withDefaults(
defineProps<{
articles?: any[] | null;
}>(),
{
articles: null,
},
);
defineExpose({
articles: props.articles,
});
</script>
<template>
<!-- DONE @hw：tindwind 替代 -->
<div class="mx-auto w-full bg-white">
<div v-for="(article, index) in articles" :key="index">
<!-- 头条 -->
<a v-if="index === 0" :href="article.url" target="_blank">
<div class="mx-auto w-full">
<div class="relative w-full bg-[#acadae]">
<Image
:src="article.picUrl || article.thumbUrl"
class="h-[120px] w-full"
:preview="false"
/>
<div
class="absolute bottom-0 left-0 inline-block w-[98%] whitespace-normal bg-black p-[1%] text-xs text-white opacity-65"
>
<span>{{ article.title }}</span>
</div>
</div>
</div>
</a>
<!-- 二条/三条等等 -->
<a v-else :href="article.url" target="_blank">
<div class="border-t border-[#eaeaea] bg-white py-[5px]">
<div class="relative">
<div
class="ml-[1%] inline-block w-[70%] whitespace-normal text-[10px]"
>
{{ article.title }}
</div>
<div class="mr-[1%] inline-block w-[25%] bg-[#acadae]">
<img
:src="article.picUrl || article.thumbUrl"
class="h-full w-full"
/>
</div>
</div>
</div>
</a>
</div>
</div>
</template>

48
apps/web-antd/src/views/mp/modules/wx-reply/wx-reply.vue → apps/web-antd/src/views/mp/modules/reply/reply.vue
View File

@@ -10,21 +10,22 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Reply } from './types'; import type { Reply } from './types';
import { computed, ref, unref, watch } from 'vue'; import { computed } from 'vue';
import { IconifyIcon } from '@vben/icons'; import { IconifyIcon } from '@vben/icons';
import { Row, Tabs } from 'ant-design-vue'; import { Row, Tabs } from 'ant-design-vue';
import { NewsType } from '../material-select/types';
import TabImage from './tab-image.vue'; import TabImage from './tab-image.vue';
import TabMusic from './tab-music.vue'; import TabMusic from './tab-music.vue';
import TabNews from './tab-news.vue'; import TabNews from './tab-news.vue';
import TabText from './tab-text.vue'; import TabText from './tab-text.vue';
import TabVideo from './tab-video.vue'; import TabVideo from './tab-video.vue';
import TabVoice from './tab-voice.vue'; import TabVoice from './tab-voice.vue';
import { createEmptyReply, NewsType, ReplyType } from './types'; import { createEmptyReply, ReplyType } from './types';
defineOptions({ name: 'WxReplySelect' }); defineOptions({ name: 'ReplySelect' });
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@@ -38,40 +39,18 @@ const props = withDefaults(
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update:modelValue', v: Reply): void; (e: 'update:modelValue', v: Reply): void;
}>(); }>();
// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
const defaultReply: Reply = {
accountId: -1,
type: ReplyType.Text,
};
const reply = computed<Reply>({ const reply = computed<Reply>({
get: () => props.modelValue, get: () => props.modelValue || defaultReply,
set: (val) => emit('update:modelValue', val), 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`的字段 */ /** 清除除了`type`, `accountId`的字段 */
function clear() { function clear() {
reply.value = createEmptyReply(reply); reply.value = createEmptyReply(reply);
@@ -83,7 +62,8 @@ defineExpose({
</script> </script>
<template> <template>
<Tabs v-model:active-key="currentTab" type="card"> <!-- 之前使用的currentTab会导致组件tab不切换，直接改为使用reply.type,不做tab缓存，缓存会多很多垃圾字段 -->
<Tabs v-model:active-key="reply.type" type="card" @change="clear">
<!-- 类型 1：文本 --> <!-- 类型 1：文本 -->
<Tabs.TabPane :key="ReplyType.Text"> <Tabs.TabPane :key="ReplyType.Text">
<template #tab> <template #tab>

12
apps/web-antd/src/views/mp/modules/wx-reply/tab-image.vue → apps/web-antd/src/views/mp/modules/reply/tab-image.vue
View File

@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue'; import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
import { UploadType, useBeforeUpload } from '#/utils/useUpload'; import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select'; import { MaterialSelect } from '#/views/mp/modules';
const props = defineProps<{ const props = defineProps<{
modelValue: Reply; modelValue: Reply;
@@ -113,7 +113,7 @@ function selectMaterial(item: any) {
width="90%" width="90%"
destroy-on-close destroy-on-close
> >
<WxMaterialSelect <MaterialSelect
type="image" type="image"
:account-id="reply.accountId" :account-id="reply.accountId"
@select-material="selectMaterial" @select-material="selectMaterial"
@@ -131,11 +131,9 @@ function selectMaterial(item: any) {
:file-list="fileList" :file-list="fileList"
:data="uploadData" :data="uploadData"
:before-upload="beforeImageUpload" :before-upload="beforeImageUpload"
@change=" @success="
(info) => { (response: any) => {
if (info.file.status === 'done') { onUploadSuccess(response);
onUploadSuccess(info.file.response || info.file);
}
} }
" "
> >

12
apps/web-antd/src/views/mp/modules/wx-reply/tab-music.vue → apps/web-antd/src/views/mp/modules/reply/tab-music.vue
View File

@@ -19,7 +19,7 @@ import {
} from 'ant-design-vue'; } from 'ant-design-vue';
import { UploadType, useBeforeUpload } from '#/utils/useUpload'; import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select'; import { MaterialSelect } from '#/views/mp/modules';
const props = defineProps<{ const props = defineProps<{
modelValue: Reply; modelValue: Reply;
@@ -98,11 +98,9 @@ function selectMaterial(item: any) {
:file-list="fileList" :file-list="fileList"
:data="uploadData" :data="uploadData"
:before-upload="beforeImageUpload" :before-upload="beforeImageUpload"
@change=" @success="
(info) => { (response: any) => {
if (info.file.status === 'done') { onUploadSuccess(response);
onUploadSuccess(info.file.response || info.file);
}
} }
" "
> >
@@ -123,7 +121,7 @@ function selectMaterial(item: any) {
width="80%" width="80%"
destroy-on-close destroy-on-close
> >
<WxMaterialSelect <MaterialSelect
type="image" type="image"
:account-id="reply.accountId" :account-id="reply.accountId"
@select-material="selectMaterial" @select-material="selectMaterial"

9
apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue → apps/web-antd/src/views/mp/modules/reply/tab-news.vue
View File

@@ -7,10 +7,9 @@ import { IconifyIcon } from '@vben/icons';
import { Button, Col, Modal, Row } from 'ant-design-vue'; import { Button, Col, Modal, Row } from 'ant-design-vue';
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select'; import { MaterialSelect, News } from '#/views/mp/modules';
import { WxNews } from '#/views/mp/modules/wx-news';
import { NewsType } from './types'; import { NewsType } from '../material-select/types';
const props = defineProps<{ const props = defineProps<{
modelValue: Reply; modelValue: Reply;
@@ -45,7 +44,7 @@ function onDelete() {
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]" class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
v-if="reply.articles && reply.articles.length > 0" v-if="reply.articles && reply.articles.length > 0"
> >
<WxNews :articles="reply.articles" /> <News :articles="reply.articles" />
<Col class="pt-[10px] text-center"> <Col class="pt-[10px] text-center">
<Button type="primary" danger shape="circle" @click="onDelete"> <Button type="primary" danger shape="circle" @click="onDelete">
<IconifyIcon icon="ep:delete" /> <IconifyIcon icon="ep:delete" />
@@ -73,7 +72,7 @@ function onDelete() {
width="90%" width="90%"
destroy-on-close destroy-on-close
> >
<WxMaterialSelect <MaterialSelect
type="news" type="news"
:account-id="reply.accountId" :account-id="reply.accountId"
:news-type="newsType" :news-type="newsType"

0
apps/web-antd/src/views/mp/modules/wx-reply/tab-text.vue → apps/web-antd/src/views/mp/modules/reply/tab-text.vue
View File

7
apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue → apps/web-antd/src/views/mp/modules/reply/tab-video.vue
View File

@@ -20,8 +20,7 @@ import {
} from 'ant-design-vue'; } from 'ant-design-vue';
import { UploadType, useBeforeUpload } from '#/utils/useUpload'; import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select'; import { MaterialSelect, VideoPlayer } from '#/views/mp/modules';
import { WxVideoPlayer } from '#/views/mp/modules/wx-video-play';
const props = defineProps<{ const props = defineProps<{
modelValue: Reply; modelValue: Reply;
@@ -156,7 +155,7 @@ function selectMaterial(item: any) {
placeholder="请输入描述" placeholder="请输入描述"
/> />
<Row class="w-full pt-[10px] text-center" justify="center"> <Row class="w-full pt-[10px] text-center" justify="center">
<WxVideoPlayer v-if="reply.url" :url="reply.url" /> <VideoPlayer v-if="reply.url" :url="reply.url" />
</Row> </Row>
<Col class="w-full"> <Col class="w-full">
<Row class="text-center" align="middle"> <Row class="text-center" align="middle">
@@ -171,7 +170,7 @@ function selectMaterial(item: any) {
width="90%" width="90%"
destroy-on-close destroy-on-close
> >
<WxMaterialSelect <MaterialSelect
type="video" type="video"
:account-id="reply.accountId" :account-id="reply.accountId"
@select-material="selectMaterial" @select-material="selectMaterial"

15
apps/web-antd/src/views/mp/modules/wx-reply/tab-voice.vue → apps/web-antd/src/views/mp/modules/reply/tab-voice.vue
View File

@@ -11,8 +11,7 @@ import { useAccessStore } from '@vben/stores';
import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue'; import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
import { UploadType, useBeforeUpload } from '#/utils/useUpload'; import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select'; import { MaterialSelect, VoicePlayer } from '#/views/mp/modules';
import { WxVoicePlayer } from '#/views/mp/modules/wx-voice-play';
const props = defineProps<{ const props = defineProps<{
modelValue: Reply; modelValue: Reply;
@@ -89,7 +88,7 @@ function selectMaterial(item: Reply) {
{{ reply.name }} {{ reply.name }}
</p> </p>
<Row class="w-full pt-[10px] text-center" justify="center"> <Row class="w-full pt-[10px] text-center" justify="center">
<WxVoicePlayer :url="reply.url" /> <VoicePlayer :url="reply.url" />
</Row> </Row>
<Row class="w-full pt-[10px] text-center" justify="center"> <Row class="w-full pt-[10px] text-center" justify="center">
<Button type="primary" danger shape="circle" @click="onDelete"> <Button type="primary" danger shape="circle" @click="onDelete">
@@ -112,7 +111,7 @@ function selectMaterial(item: Reply) {
width="90%" width="90%"
destroy-on-close destroy-on-close
> >
<WxMaterialSelect <MaterialSelect
type="voice" type="voice"
:account-id="reply.accountId" :account-id="reply.accountId"
@select-material="selectMaterial" @select-material="selectMaterial"
@@ -130,11 +129,9 @@ function selectMaterial(item: Reply) {
:file-list="fileList" :file-list="fileList"
:data="uploadData" :data="uploadData"
:before-upload="beforeVoiceUpload" :before-upload="beforeVoiceUpload"
@change=" @success="
(info) => { (response: any) => {
if (info.file.status === 'done') { onUploadSuccess(response);
onUploadSuccess(info.file.response || info.file);
}
} }
" "
> >

7
apps/web-antd/src/views/mp/modules/wx-reply/types.ts → apps/web-antd/src/views/mp/modules/reply/types.ts
View File

@@ -30,11 +30,6 @@ interface _Reply {
type Reply = _Reply; // Partial<_Reply> type Reply = _Reply; // Partial<_Reply>
enum NewsType {
Draft = '2',
Published = '1',
}
/** 利用旧的reply[accountId, type]初始化新的Reply */ /** 利用旧的reply[accountId, type]初始化新的Reply */
const createEmptyReply = (old: Ref<Reply> | Reply): Reply => { const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
return { return {
@@ -55,4 +50,4 @@ const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
}; };
}; };
export { createEmptyReply, NewsType, type Reply, ReplyType }; export { createEmptyReply, type Reply, ReplyType };

13
apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue → apps/web-antd/src/views/mp/modules/video-play/video-play.vue
View File

@@ -20,7 +20,7 @@ import { Modal } from 'ant-design-vue';
import 'video.js/dist/video-js.css'; import 'video.js/dist/video-js.css';
defineOptions({ name: 'WxVideoPlayer' }); defineOptions({ name: 'VideoPlayer' });
const props = defineProps({ const props = defineProps({
url: { url: {
@@ -29,11 +29,11 @@ const props = defineProps({
}, },
}); });
// TODO @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 const dialogVisible = ref(false);
const dialogVideo = ref(false);
// DONE @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢
const playVideo = () => { const playVideo = () => {
dialogVideo.value = true; dialogVisible.value = true;
}; };
</script> </script>
@@ -47,13 +47,12 @@ const playVideo = () => {
<!-- 弹窗播放 --> <!-- 弹窗播放 -->
<Modal <Modal
v-model:open="dialogVideo" v-model:open="dialogVisible"
title="视频播放" title="视频播放"
width="900px" width="45%"
:footer="null" :footer="null"
> >
<VideoPlayer <VideoPlayer
v-if="dialogVideo"
class="video-player vjs-big-play-centered" class="video-player vjs-big-play-centered"
:src="props.url" :src="props.url"
poster="" poster=""

28
apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue → apps/web-antd/src/views/mp/modules/voice-play/voice-play.vue
View File

@@ -18,7 +18,7 @@ import { Tag } from 'ant-design-vue';
// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
import BenzAMRRecorder from 'benz-amr-recorder'; import BenzAMRRecorder from 'benz-amr-recorder';
defineOptions({ name: 'WxVoicePlayer' }); defineOptions({ name: 'VoicePlayer' });
const props = defineProps({ const props = defineProps({
url: { url: {
@@ -80,31 +80,17 @@ function amrStop() {
</script> </script>
<template> <template>
<div class="wx-voice-div" @click="playVoice"> <!-- DONE @hw：tindwind 替代 -->
<div
class="flex h-[50px] w-[120px] cursor-pointer items-center justify-center rounded-[10px] bg-[#eaeaea] p-[5px]"
@click="playVoice"
>
<IconifyIcon v-if="playing !== true" icon="lucide:circle-play" :size="32" /> <IconifyIcon v-if="playing !== true" icon="lucide:circle-play" :size="32" />
<IconifyIcon v-else icon="lucide:circle-pause" :size="32" /> <IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
<span class="amr-duration" v-if="duration">{{ duration }} 秒</span> <span v-if="duration" class="ml-[5px] text-[11px]">{{ duration }} 秒</span>
<div v-if="content"> <div v-if="content">
<Tag color="success" size="small">语音识别</Tag> <Tag color="success" size="small">语音识别</Tag>
{{ content }} {{ content }}
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped>
/** TODO @hw：tindwind 替代 */
.wx-voice-div {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 50px;
padding: 5px;
background-color: #eaeaea;
border-radius: 10px;
}
.amr-duration {
margin-left: 5px;
font-size: 11px;
}
</style>

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

@@ -1,2 +0,0 @@
// TODO @hw：1）要不统一在 web-antd/src/views/mp/modules 下，搞个 index.ts 去 import 所有；2）这个包名，需要改成 componentns，不是 modules 哈；3）wx 前缀都可以去掉；例如说 account-select.vue
export { default as WxAccountSelect } from './wx-account-select.vue';

123
apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue
View File

@@ -1,123 +0,0 @@
<script lang="ts" setup>
import type { MpAccountApi } from '#/api/mp/account';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useTabs } from '@vben/hooks';
import { message, Select, SelectOption } from 'ant-design-vue';
import { getSimpleAccountList } from '#/api/mp/account';
// TODO @hw：【可讨论】如果这个组件，有办法调整下，让接入的 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/draft/index.vue 判断简单点，也可以。
defineOptions({ name: 'WxAccountSelect' });
const props = defineProps<{
modelValue?: number;
}>();
const emit = defineEmits<{
(e: 'change', id: number, name: string): void;
(e: 'update:modelValue', id: number): void;
}>();
const { closeCurrentTab } = useTabs(); // 视图操作
const { push } = useRouter();
const account: MpAccountApi.AccountSimple = reactive({
id: -1,
name: '',
});
const accountList = ref<MpAccountApi.AccountSimple[]>([]);
// 计算当前选中的 ID，优先使用 modelValue（表单绑定），否则使用内部 account.id
const currentId = computed({
get: () => {
// 如果外部传入了 modelValue，优先使用外部的值
if (props.modelValue !== undefined && props.modelValue !== null) {
return props.modelValue;
}
return account.id;
},
set: (value: number) => {
// 更新内部状态
account.id = value;
// 同步到外部（表单系统）
emit('update:modelValue', value);
// 触发 change 事件（保持向后兼容）
const found = accountList.value.find(
(v: MpAccountApi.AccountSimple) => v.id === value,
);
if (found) {
account.name = found.name;
emit('change', value, found.name);
}
},
});
// 监听外部 modelValue 变化，同步到内部状态
watch(
() => props.modelValue,
(newValue) => {
if (
newValue !== undefined &&
newValue !== null &&
newValue !== account.id
) {
account.id = newValue;
const found = accountList.value.find(
(v: MpAccountApi.AccountSimple) => v.id === newValue,
);
if (found) {
account.name = found.name;
}
}
},
);
/** 查询公众号列表 */
async function handleQuery() {
accountList.value = await getSimpleAccountList();
if (accountList.value.length === 0) {
message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
await closeCurrentTab();
await push({ name: 'MpAccount' });
return;
}
// 如果外部没有传入值（modelValue 为空），默认选中第一个
if (props.modelValue === undefined || props.modelValue === null) {
const firstAccount = accountList.value[0];
if (firstAccount) {
currentId.value = firstAccount.id;
account.name = firstAccount.name;
emit('change', firstAccount.id, firstAccount.name);
}
} else {
// 如果外部有值，同步到内部状态
const found = accountList.value.find(
(v: MpAccountApi.AccountSimple) => v.id === props.modelValue,
);
if (found) {
account.id = props.modelValue;
account.name = found.name;
}
}
}
/** 初始化 */
onMounted(() => {
handleQuery();
});
</script>
<template>
<Select v-model:value="currentId" placeholder="请选择公众号" class="w-full">
<SelectOption v-for="item in accountList" :key="item.id" :value="item.id">
{{ item.name }}
</SelectOption>
</Select>
</template>

1
apps/web-antd/src/views/mp/modules/wx-location/index.ts
View File

@@ -1 +0,0 @@
export { default as WxLocation } from './wx-location.vue';

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

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

12
apps/web-antd/src/views/mp/modules/wx-material-select/types.ts
View File

@@ -1,12 +0,0 @@
export enum NewsType {
Draft = '2',
Published = '1',
}
// TODO @hw：应该要用到？在 material-select.vue 里？
export enum MaterialType {
Image = 'image',
News = 'news',
Video = 'video',
Voice = 'voice',
}

282
apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue
View File

@@ -1,282 +0,0 @@
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { formatTime } from '@vben/utils';
import { Button, Pagination, Row, Spin, Table } from 'ant-design-vue';
import { getDraftPage } from '#/api/mp/draft';
import { getFreePublishPage } from '#/api/mp/freePublish';
import { getMaterialPage } from '#/api/mp/material';
import { WxNews } from '#/views/mp/modules/wx-news';
import { WxVideoPlayer } from '#/views/mp/modules/wx-video-play';
import { WxVoicePlayer } from '#/views/mp/modules/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(['selectMaterial']);
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) {
emit('selectMaterial', item);
}
/** 获取分页数据 */
async function getPage() {
loading.value = true;
try {
if (props.type === 'news' && props.newsType === NewsType.Published) {
// 【图文】+ 【已发布】
await getFreePublishPageFun();
} else if (props.type === 'news' && props.newsType === NewsType.Draft) {
// 【图文】+ 【草稿】
await getDraftPageFun();
} else {
// 【素材】
await getMaterialPageFun();
}
} finally {
loading.value = false;
}
}
/** 获取素材分页 */
async function getMaterialPageFun() {
const data = await getMaterialPage({
...queryParams,
type: props.type,
});
list.value = data.list;
total.value = data.total;
}
/** 获取已发布图文分页 */
async function getFreePublishPageFun() {
const data = await 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 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;
}
// TODO @hw：改成 grid 风格；
onMounted(async () => {
getPage();
});
</script>
<template>
<div class="pb-30px">
<!-- 类型：image -->
<div v-if="props.type === 'image'">
<Spin :spinning="loading">
<div class="waterfall">
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
<img class="material-img" :src="item.url" />
<p class="item-name">{{ item.name }}</p>
<Row class="ope-row">
<Button type="primary" @click="selectMaterialFun(item)">
选择
<IconifyIcon icon="lucide:circle-check" />
</Button>
</Row>
</div>
</div>
</Spin>
<!-- 分页组件 -->
<Pagination
:total="total"
v-model:current="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@change="getMaterialPageFun"
/>
</div>
<!-- 类型：voice -->
<div v-else-if="props.type === 'voice'">
<!-- 列表 -->
<Spin :spinning="loading">
<Table :data-source="list">
<Table.Column title="编号" data-index="mediaId" align="center" />
<Table.Column title="文件名" data-index="name" align="center" />
<Table.Column title="语音" align="center">
<template #default="{ record }">
<WxVoicePlayer :url="record.url" />
</template>
</Table.Column>
<Table.Column title="上传时间" align="center" width="180">
<template #default="{ record }">
{{ formatTime(record.createTime, 'YYYY-MM-DD HH:mm:ss') }}
</template>
</Table.Column>
<Table.Column title="操作" align="center" fixed="right">
<template #default="{ record }">
<Button type="link" @click="selectMaterialFun(record)">
选择
<IconifyIcon icon="lucide:plus" />
</Button>
</template>
</Table.Column>
</Table>
</Spin>
<!-- 分页组件 -->
<Pagination
:total="total"
v-model:current="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@change="getPage"
/>
</div>
<!-- 类型：video -->
<div v-else-if="props.type === 'video'">
<!-- 列表 -->
<Spin :spinning="loading">
<Table :data-source="list">
<Table.Column title="编号" data-index="mediaId" align="center" />
<Table.Column title="文件名" data-index="name" align="center" />
<Table.Column title="标题" data-index="title" align="center" />
<Table.Column title="介绍" data-index="introduction" align="center" />
<Table.Column title="视频" align="center">
<template #default="{ record }">
<WxVideoPlayer :url="record.url" />
</template>
</Table.Column>
<Table.Column title="上传时间" align="center" width="180">
<template #default="{ record }">
{{ formatTime(record.createTime, 'YYYY-MM-DD HH:mm:ss') }}
</template>
</Table.Column>
<Table.Column title="操作" align="center" fixed="right">
<template #default="{ record }">
<Button type="link" @click="selectMaterialFun(record)">
选择
<IconifyIcon icon="lucide:circle-plus" />
</Button>
</template>
</Table.Column>
</Table>
</Spin>
<!-- 分页组件 -->
<Pagination
:total="total"
v-model:current="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@change="getMaterialPageFun"
/>
</div>
<!-- 类型：news -->
<div v-else-if="props.type === 'news'">
<Spin :spinning="loading">
<div class="waterfall">
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
<div v-if="item.content && item.content.newsItem">
<WxNews :articles="item.content.newsItem" />
<Row class="ope-row">
<Button type="primary" @click="selectMaterialFun(item)">
选择
<IconifyIcon icon="lucide:circle-check" />
</Button>
</Row>
</div>
</div>
</div>
</Spin>
<!-- 分页组件 -->
<Pagination
:total="total"
v-model:current="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@change="getMaterialPageFun"
/>
</div>
</div>
</template>
<style lang="scss" scoped>
/** TODO @hw：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-gap: 10px;
width: 100%;
margin: 0 auto;
column-count: 5;
}
.waterfall-item {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #eaeaea;
break-inside: avoid;
}
.material-img {
width: 100%;
}
p {
line-height: 30px;
}
</style>

116
apps/web-antd/src/views/mp/modules/wx-msg/card.scss
View File

@@ -1,116 +0,0 @@
.avue-card {
&__item {
box-sizing: border-box;
height: 200px;
margin-bottom: 16px;
font-size: 14px;
font-feature-settings: 'tnum';
font-variant: tabular-nums;
line-height: 1.5;
color: rgb(0 0 0 / 65%);
cursor: pointer;
list-style: none;
background-color: #fff;
border: 1px solid #e8e8e8;
&:hover {
border-color: rgb(0 0 0 / 9%);
box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
}
&--add {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-size: 16px;
color: rgb(0 0 0 / 45%);
background-color: #fff;
border: 1px dashed #000;
border-color: #d9d9d9;
border-radius: 2px;
i {
margin-right: 10px;
}
&:hover {
color: #40a9ff;
background-color: #fff;
border-color: #40a9ff;
}
}
}
&__body {
display: flex;
padding: 24px;
}
&__detail {
flex: 1;
}
&__avatar {
width: 48px;
height: 48px;
margin-right: 12px;
overflow: hidden;
border-radius: 48px;
img {
width: 100%;
height: 100%;
}
}
&__title {
margin-bottom: 12px;
font-size: 16px;
color: rgb(0 0 0 / 85%);
&:hover {
color: #1890ff;
}
}
&__info {
display: -webkit-box;
height: 64px;
overflow: hidden;
-webkit-line-clamp: 3;
color: rgb(0 0 0 / 45%);
-webkit-box-orient: vertical;
}
&__menu {
display: flex;
justify-content: space-around;
height: 50px;
line-height: 50px;
color: rgb(0 0 0 / 45%);
text-align: center;
background: #f7f9fa;
&:hover {
color: #1890ff;
}
}
}
/** joolun 额外加的 */
.avue-comment__main {
flex: unset !important;
margin: 0 8px !important;
border-radius: 5px !important;
}
.avue-comment__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.avue-comment__body {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

109
apps/web-antd/src/views/mp/modules/wx-msg/comment.scss
View File

@@ -1,109 +0,0 @@
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
.avue-comment {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
&--reverse {
flex-direction: row-reverse;
.avue-comment__main {
&::before,
&::after {
right: -8px;
left: auto;
border-width: 8px 0 8px 8px;
}
&::before {
border-left-color: #dedede;
}
&::after {
margin-right: 1px;
margin-left: auto;
border-left-color: #f8f8f8;
}
}
}
&__avatar {
box-sizing: border-box;
width: 48px;
height: 48px;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 50%;
}
&__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 15px;
background: #f8f8f8;
border-bottom: 1px solid #eee;
}
&__author {
font-size: 14px;
font-weight: 700;
color: #999;
}
&__main {
position: relative;
flex: 1;
margin: 0 20px;
border: 1px solid #dedede;
border-radius: 2px;
&::before,
&::after {
position: absolute;
top: 10px;
right: 100%;
left: -8px;
display: block;
width: 0;
height: 0;
pointer-events: none;
content: ' ';
border-color: transparent;
border-style: solid solid outset;
border-width: 8px 8px 8px 0;
}
&::before {
z-index: 1;
border-right-color: #dedede;
}
&::after {
z-index: 2;
margin-left: 1px;
border-right-color: #f8f8f8;
}
}
&__body {
padding: 15px;
overflow: hidden;
font-family:
'Segoe UI', 'Lucida Grande', Helvetica, Arial, 'Microsoft YaHei',
FreeSans, Arimo, 'Droid Sans', 'wenquanyi micro hei', 'Hiragino Sans GB',
'Hiragino Sans GB W3', FontAwesome, sans-serif;
font-size: 14px;
color: #333;
background: #fff;
}
blockquote {
padding: 1px 0 1px 15px;
margin: 0;
font-family:
Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai,
FontAwesome, serif;
border-left: 4px solid #ddd;
}
}

3
apps/web-antd/src/views/mp/modules/wx-msg/index.ts
View File

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

197
apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue
View File

@@ -1,197 +0,0 @@
<!--
- Copyright (C) 2018-2019
- All rights reserved, Designed By www.joolun.com
芋道源码：
① 移除暂时用不到的 websocket
② 代码优化，补充注释，提升阅读性
-->
<script lang="ts" setup>
import type { User } from './types';
import type { Reply } from '#/views/mp/modules/wx-reply';
import { nextTick, onMounted, reactive, ref, unref } from 'vue';
import { Button, message, Spin } from 'ant-design-vue';
import { getMessagePage, sendMessage } from '#/api/mp/message';
import { getUser } from '#/api/mp/user';
import profile from '#/assets/imgs/profile.jpg';
import { ReplyType, WxReplySelect } from '#/views/mp/modules/wx-reply';
import MsgList from './msg-list.vue';
defineOptions({ name: 'WxMsg' });
const props = defineProps({
userId: {
type: Number,
required: true,
},
});
const accountId = ref(-1); // 公众号ID，需要通过userId初始化
const loading = ref(false); // 消息列表是否正在加载中
const hasMore = ref(true); // 是否可以加载更多
const list = ref<any[]>([]); // 消息列表
const queryParams = reactive({
pageNo: 1, // 当前页数
pageSize: 14, // 每页显示多少条
accountId,
});
const user: User = reactive({
nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
avatar: profile,
accountId, // 公众号账号编号
});
// ========= 消息发送 =========
const sendLoading = ref(false); // 发送消息是否加载中
const reply = ref<Reply>({
type: ReplyType.Text,
accountId: -1,
articles: [],
}); // 微信发送消息
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;
// API 返回的数据可能包含 headImageUrl，但类型定义中没有，使用类型断言
const userData = data as typeof data & { headImageUrl?: string };
user.avatar =
userData.headImageUrl && userData.headImageUrl.length > 0
? userData.headImageUrl
: user.avatar;
accountId.value = data.accountId;
reply.value.accountId = data.accountId;
refreshChange();
});
/** 执行发送 */
async function sendMsg() {
if (!unref(reply)) {
return;
}
// 公众号限制：客服消息，公众号只允许发送一条
if (
reply.value.type === ReplyType.News &&
reply.value.articles &&
reply.value.articles.length > 1
) {
reply.value.articles = [reply.value.articles[0]];
message.success('图文消息条数限制在 1 条以内，已默认发送第一条');
}
// 注意：sendMessage API 需要 openid，但这里传入的是 userId
// 这可能是后端 API 的特殊处理，使用类型断言绕过类型检查
const data = await sendMessage({
userId: props.userId,
...reply.value,
} 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(
{
pageNo: page.pageNo,
pageSize: page.pageSize,
userId: props.userId,
accountId: page.accountId,
},
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>
<ContentWrap>
<Spin :spinning="loading">
<div class="bg-background ml-2 mr-2 h-12 overflow-auto" ref="msgDivRef">
<!-- 加载更多 -->
<div v-if="!loading">
<div
class="cursor-pointer py-5 text-center"
v-if="hasMore"
@click="loadMore"
>
<span class="text-foreground">点击加载更多</span>
</div>
<div class="py-5 text-center" v-if="!hasMore">
<span class="text-foreground">没有更多了</span>
</div>
</div>
<!-- 消息列表 -->
<MsgList :list="list" :account-id="accountId" :user="user" />
</div>
</Spin>
<Spin :spinning="sendLoading">
<div class="p-[10px]">
<WxReplySelect ref="replySelectRef" v-model="reply" />
<Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
发送(S)
</Button>
</div>
</Spin>
</ContentWrap>
</template>

1
apps/web-antd/src/views/mp/modules/wx-music/index.ts
View File

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

1
apps/web-antd/src/views/mp/modules/wx-news/index.ts
View File

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

127
apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue
View File

@@ -1,127 +0,0 @@
<!--
- Copyright (C) 2018-2019
- All rights reserved, Designed By www.joolun.com
【微信消息 - 图文】
芋道源码：
① 代码优化，补充注释，提升阅读性
-->
<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 || article.thumbUrl"
class="material-img"
:preview="false"
style="width: 100%; height: 120px"
/>
<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 || article.thumbUrl"
class="material-img"
height="100%"
/>
</div>
</div>
</div>
</a>
</div>
</div>
</template>
<style lang="scss" scoped>
/** TODO @hw：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>

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

@@ -1,2 +0,0 @@
export * from './types';
export { default as WxReplySelect } from './wx-reply.vue';

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

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

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

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

1
apps/web-antd/src/views/mp/tag/data.ts
View File

@@ -41,6 +41,7 @@ export function useFormSchema(): VbenFormSchema[] {
} }
/** 列表的搜索表单 */ /** 列表的搜索表单 */
// TODO @YunaiV 这种方式获取刷新浏览器会导致空白
export function useGridFormSchema(): VbenFormSchema[] { export function useGridFormSchema(): VbenFormSchema[] {
return [ return [
{ {