ZF/yudao-ui-admin-vben
1
0
Fork 0
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git synced 2025-12-30 10:32:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

!263 feat：【antd】【mp】迁移

Browse Source 
Merge pull request !263 from hw/reform-mp
This commit is contained in:
芋道源码
2025-11-17 01:29:13 +00:00
committed by Gitee
parent 32ffc2e556 3e1dac41b6
commit 6f0273ab4e
83 changed files with 1686 additions and 2134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

1
apps/web-antd/src/views/mall/promotion/combination/components/index.ts
View File

@@ -1,2 +1 @@
export { default as CombinationShowcase } from './showcase.vue';

1
apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue
View File

@@ -143,4 +143,3 @@ function emitActivityChange() {
@change="handleActivitySelected"
/>
</template>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
View File

@@ -1,3 +1,5 @@
/* eslint-disable vue/one-component-per-file */
// TODO @YunaiV eslint检测了
import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
import { defineComponent } from 'vue';

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/components';
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 { WxReply } from '#/views/mp/components';
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="回复消息">
<WxReply 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 { VxeGridPropTypes } from '#/adapter/vxe-table';
import type { MpAccountApi } from '#/api/mp/account';
import { markRaw } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { WxAccountSelect } from '#/views/mp/components';
import { getSimpleAccountList } from '#/api/mp/account';
import { WxReply } from '#/views/mp/components';
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 {
@@ -76,13 +93,84 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.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(WxReply),
// componentProps: {
// modelValue: { type: 'video', content: '12456' },
// },
modelPropName: 'modelValue',
});
return schema;
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'accountId',
label: '公众号',
component: markRaw(WxAccountSelect),
component: 'ApiSelect',
componentProps: {
options: accountList.map((item) => ({
label: item.name,
value: item.id,
})),
placeholder: '请选择公众号',
},
defaultValue: accountList[0]?.id,
},
];
}

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

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { computed, nextTick, onMounted, ref } from 'vue';
import { computed, nextTick, ref } from 'vue';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
@@ -16,20 +16,13 @@ import {
} from '#/api/mp/autoReply';
import { $t } from '#/locales';
import ReplyContentCell from './components/ReplyTable.vue';
import { MsgType } from './components/types';
import { useGridColumns, useGridFormSchema } from './data';
import ReplyContentCell from './modules/content.vue';
import Form from './modules/form.vue';
import { MsgType } from './types';
defineOptions({ name: 'MpAutoReply' });
/** 刷新表格 */
function handleRefresh() {
gridApi.query().then(() => {
updateTableDataLength();
});
}
const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
/** 切换回复类型 */
@@ -46,7 +39,6 @@ async function onTabChange(tabName: any) {
}
// 查询数据
await gridApi.query();
updateTableDataLength();
}
/** 新增按钮操作 */
@@ -54,7 +46,6 @@ async function handleCreate() {
const formValues = await gridApi.formApi.getValues();
formModalApi
.setData({
isCreating: true,
msgType: Number(msgType.value) as MsgType,
accountId: formValues.accountId,
})
@@ -66,8 +57,8 @@ async function handleEdit(row: any) {
const data = (await getAutoReply(row.id)) as any;
formModalApi
.setData({
isCreating: false,
msgType: Number(msgType.value) as MsgType,
accountId: row.accountId,
row: data,
})
.open();
@@ -83,9 +74,7 @@ async function handleDelete(row: any) {
try {
await deleteAutoReply(row.id);
message.success('删除成功');
await gridApi.query();
// 查询完成后更新数据长度
updateTableDataLength();
handleRefresh();
} finally {
hideLoading();
}
@@ -116,7 +105,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
});
},
},
autoLoad: false, // 禁用自动加载，等表单初始化完成后再加载
},
rowConfig: {
keyField: 'id',
@@ -129,49 +117,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
} as VxeTableGridOptions<any>,
});
// TODO @hw：按道理说，不太需呀哦这个？可以微信讨论下哈；
const tableDataLength = ref(0); // 表格数据长度，用于判断是否显示新增按钮
/** 更新表格数据长度（避免在模板中直接调用 getTableData 导致响应式循环） */
function updateTableDataLength() {
try {
if (!gridApi.grid) {
return;
}
const tableData = gridApi.grid.getTableData();
tableDataLength.value = tableData?.tableData?.length || 0;
} catch {
tableDataLength.value = 0;
}
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
// TODO @hw：这个要不改成，直接 tableaction 那判断；
// 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
const showCreateButton = computed(() => {
if (Number(msgType.value) !== MsgType.Follow) {
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 简化下
/** 页面挂载后，等待表单初始化完成再加载数据 */
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();
}
});
// DONE @hw：看看能不能参考 tag/index.vue 简化下
</script>
<template>
@@ -181,23 +145,26 @@ onMounted(async () => {
</template>
<FormModal @success="handleRefresh" />
<Grid>
<Grid table-title="自动回复列表">
<!-- 第一层：公众号选择（在表单中） -->
<!-- 第二层：tab 切换 -->
<template #toolbar-actions>
<!-- tab 切换 -->
<Tabs v-model:active-key="msgType" class="w-full" @change="onTabChange">
<!-- tab 项 -->
<Tabs
v-model:active-key="msgType"
class="w-full"
@change="(activeKey) => onTabChange(activeKey as string)"
>
<Tabs.TabPane :key="String(MsgType.Follow)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="lucide:star" class="mr-2px" /> 关注时回复
<IconifyIcon icon="ep:star" class="mr-2px" /> 关注时回复
</Row>
</template>
</Tabs.TabPane>
<Tabs.TabPane :key="String(MsgType.Message)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="lucide:message-circle" class="mr-2px" />
<IconifyIcon icon="ep:chat-line-round" class="mr-2px" />
消息回复
</Row>
</template>
@@ -205,13 +172,13 @@ onMounted(async () => {
<Tabs.TabPane :key="String(MsgType.Keyword)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="lucide:newspaper" class="mr-2px" />
关键词回复
<IconifyIcon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
</Row>
</template>
</Tabs.TabPane>
</Tabs>
</template>
<!-- 第三层：table -->
<template #toolbar-tools>
<TableAction
v-if="showCreateButton"

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

@@ -5,7 +5,7 @@ import {
WxVideoPlayer,
WxVoicePlayer,
} from '#/views/mp/components';
// TODO @hw：迁移到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
defineOptions({ name: 'ReplyContentCell' });
const props = defineProps<{

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

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

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

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

@@ -35,17 +35,41 @@ const emit = defineEmits<{
}>();
interface Props {
modelValue: Reply;
modelValue: Reply | undefined;
newsType?: NewsType;
}
// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
const defaultReply: Reply = {
accountId: -1,
type: ReplyType.Text,
};
const reply = computed<Reply>({
get: () => props.modelValue,
get: () => props.modelValue || defaultReply,
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 进行赋值会产生了循环调用
const currentTab = ref<ReplyType>(props.modelValue?.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply 进行赋值会产生了循环调用
// 监听 modelValue 变化，同步更新 currentTab 和缓存
watch(
() => props.modelValue,
(newValue) => {
if (newValue?.type) {
// 如果类型变化，更新 currentTab
if (newValue.type !== currentTab.value) {
currentTab.value = newValue.type;
}
// 如果 modelValue 有数据，更新对应 tab 的缓存
if (newValue.type) {
tabCache.set(newValue.type, { ...newValue });
}
}
},
{ immediate: true, deep: true },
);
watch(
currentTab,
@@ -56,16 +80,30 @@ watch(
return;
}
tabCache.set(oldTab, unref(reply));
// 保存旧tab的数据到缓存
const oldReply = unref(reply);
// 只有当旧tab的reply有实际数据时才缓存（避免缓存空数据）
if (oldReply && oldTab === oldReply.type) {
tabCache.set(oldTab, oldReply);
}
// 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
const temp = tabCache.get(newTab);
if (temp) {
reply.value = temp;
} else {
const newData = createEmptyReply(reply);
newData.type = newTab;
reply.value = newData;
// 如果当前reply的类型就是新tab的类型，说明这是从外部传入的数据，应该保留
const currentReply = unref(reply);
if (currentReply && currentReply.type === newTab) {
// 这是从外部传入的数据，直接缓存并使用
tabCache.set(newTab, currentReply);
// 不需要修改reply.value，因为它已经是正确的了
} else {
// 创建新的空reply
const newData = createEmptyReply(reply);
newData.type = newTab;
reply.value = newData;
}
}
},
{

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

@@ -1,9 +1,12 @@
import type { VbenFormSchema } from '#/adapter/form';
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/components';
/** 关联数据 */
let accountList: MpAccountApi.AccountSimple[] = [];
getSimpleAccountList().then((data) => (accountList = data));
/** 获取表格列配置 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
@@ -14,12 +17,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 300,
slots: { default: 'content' },
},
{
field: 'updateTime',
title: '更新时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '操作',
width: 200,
@@ -30,13 +27,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[] {
return [
{
fieldName: 'accountId',
label: '公众号',
component: markRaw(WxAccountSelect),
component: 'ApiSelect',
componentProps: {
options: accountList.map((item) => ({
label: item.name,
value: item.id,
})),
placeholder: '请选择公众号',
},
defaultValue: accountList[0]?.id,
},
];
}

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

@@ -1,10 +1,8 @@
<script lang="ts" setup>
import type { Article } from './components/types';
import type { Article } from './modules/types';
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 { $t } from '@vben/locales';
@@ -12,13 +10,16 @@ import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteDraft, getDraftPage } from '#/api/mp/draft';
// DONE @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
import { submitFreePublish } from '#/api/mp/freePublish';
import { createEmptyNewsItem } from '#/views/mp/draft/components/types';
import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
import DraftTableCell from './components/draft-table.vue';
import { useGridColumns, useGridFormSchema } from './data';
import DraftTableCell from './modules/draft-table.vue';
import Form from './modules/form.vue';
// DONE @hw：参考 tag/index.vue 放到 formValues.accountId;
// DONE @hw：看看这个 watch、provide 能不能简化掉；
defineOptions({ name: 'MpDraft' });
/** 刷新表格 */
@@ -31,120 +32,11 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true,
});
// TODO @hw：下面的方法，放到这个前面，和别的保持一致；
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
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 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() {
const formValues = await gridApi.formApi.getValues();
const accountId = formValues.accountId;
if (!accountId || accountId === -1) {
if (!accountId) {
message.warning('请先选择公众号');
return;
}
@@ -161,7 +53,7 @@ async function handleCreate() {
async function handleEdit(row: Article) {
const formValues = await gridApi.formApi.getValues();
const accountId = formValues.accountId;
if (!accountId || accountId === -1) {
if (!accountId) {
message.warning('请先选择公众号');
return;
}
@@ -170,7 +62,7 @@ async function handleEdit(row: Article) {
isCreating: false,
accountId,
mediaId: row.mediaId,
newsList: structuredClone(row.content.newsItem),
newsList: row.content.newsItem,
})
.open();
}
@@ -179,8 +71,8 @@ async function handleEdit(row: Article) {
async function handlePublish(row: Article) {
const formValues = await gridApi.formApi.getValues();
const accountId = formValues.accountId;
// TODO @hw：看看能不能去掉 -1 的判断哈？
if (!accountId || accountId === -1) {
// DONE @hw：看看能不能去掉 -1 的判断哈？
if (!accountId) {
message.warning('请先选择公众号');
return;
}
@@ -193,11 +85,10 @@ async function handlePublish(row: Article) {
content: '发布中...',
duration: 0,
});
// TODO @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
try {
await submitFreePublish(accountId, row.mediaId);
message.success('发布成功');
await gridApi.query();
handleRefresh();
} finally {
hideLoading();
}
@@ -207,7 +98,7 @@ async function handlePublish(row: Article) {
async function handleDelete(row: Article) {
const formValues = await gridApi.formApi.getValues();
const accountId = formValues.accountId;
if (!accountId || accountId === -1) {
if (!accountId) {
message.warning('请先选择公众号');
return;
}
@@ -219,25 +110,57 @@ async function handleDelete(row: Article) {
try {
await deleteDraft(accountId, row.mediaId);
message.success('删除成功');
await gridApi.query();
handleRefresh();
} finally {
hideLoading();
}
}
// TODO @hw：看看能不能参考 tag/index.vue 简化下
// 页面挂载后，等待表单初始化完成再加载数据
onMounted(async () => {
await nextTick();
if (gridApi.formApi) {
const formValues = await gridApi.formApi.getValues();
if (formValues.accountId) {
accountId.value = formValues.accountId;
gridApi.formApi.setLatestSubmissionValues(formValues);
await gridApi.query();
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
submitOnChange: true,
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
const drafts = await 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>
<template>
@@ -305,7 +228,12 @@ onMounted(async () => {
.vxe-table--body {
.vxe-body--column {
.vxe-cell {
height: auto !important;
padding: 0;
img {
width: 300px !important;
}
}
}
}

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

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

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

@@ -1,35 +1,38 @@
<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 { createDraft, updateDraft } from '#/api/mp/draft';
import NewsForm from '../components/news-form.vue';
import NewsForm from './news-form.vue';
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<{
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;
newsList?: NewsItem[];
}>();
const newsList = ref<NewsItem[]>([]);
// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
// DONE @hw：不需要 isSave，通过 modal 去 lock 就好啦。
const isSubmitting = ref(false);
// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
const isSaved = ref(false);
const getTitle = computed(() => {
return formData.value?.isCreating ? '新建图文' : '修改图文';
return formData.value?.mediaId ? '修改图文' : '新建图文';
});
// 提供 accountId 给子组件
provide(
'accountId',
computed(() => formData.value?.accountId),
);
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (!formData.value) {
@@ -39,18 +42,17 @@ const [Modal, modalApi] = useVbenModal({
isSubmitting.value = true;
modalApi.lock();
try {
if (formData.value.isCreating) {
await createDraft(formData.value.accountId, newsList.value);
message.success('新增成功');
} else if (formData.value.mediaId) {
if (formData.value.mediaId) {
await updateDraft(
formData.value.accountId,
formData.value.mediaId,
newsList.value,
);
message.success('更新成功');
} else {
await createDraft(formData.value.accountId, newsList.value);
message.success('新增成功');
}
isSaved.value = true;
await modalApi.close();
emit('success');
} finally {
@@ -58,26 +60,12 @@ const [Modal, modalApi] = useVbenModal({
modalApi.unlock();
}
},
async onBeforeClose() {
// 如果已经成功保存，直接关闭，不显示提示
if (isSaved.value) {
return true;
}
try {
await confirm('修改内容可能还未保存，确定关闭吗?');
return true;
} catch {
return false;
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
newsList.value = [];
isSaved.value = false;
return;
}
isSaved.value = false;
const data = modalApi.getData<{
accountId: number;
isCreating: boolean;
@@ -87,7 +75,11 @@ const [Modal, modalApi] = useVbenModal({
if (!data) {
return;
}
formData.value = data;
formData.value = {
accountId: data.accountId,
mediaId: data.mediaId,
newsList: data.newsList,
};
newsList.value = data.newsList || [];
},
});
@@ -99,7 +91,7 @@ const [Modal, modalApi] = useVbenModal({
<NewsForm
v-if="formData"
v-model="newsList"
:is-creating="formData.isCreating"
:is-creating="!formData.mediaId"
/>
</Spin>
</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;
});
// TODO @hw：注释使用 /** */
// 将图文向下移动
// DONE @hw：注释使用 /** */
/** 将图文向下移动 */
function moveDownNews(index: number) {
const current = newsList.value[index];
const next = newsList.value[index + 1];
@@ -56,7 +56,7 @@ function moveDownNews(index: number) {
}
}
// 将图文向上移动
/** 将图文向上移动 */
function moveUpNews(index: number) {
const current = newsList.value[index];
const prev = newsList.value[index - 1];
@@ -67,7 +67,7 @@ function moveUpNews(index: number) {
}
}
// 删除指定 index 的图文
/** 删除指定 index 的图文 */
async function removeNews(index: number) {
await confirm('确定删除该图文吗?');
newsList.value.splice(index, 1);
@@ -76,7 +76,7 @@ async function removeNews(index: number) {
}
}
// 添加一个图文
/** 添加一个图文 */
function plusNews() {
newsList.value.push(createEmptyNewsItem());
activeNewsIndex.value = newsList.value.length - 1;
@@ -86,19 +86,29 @@ function plusNews() {
<template>
<Layout>
<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
class="news-main father"
class="group relative mx-auto h-[120px] w-full cursor-pointer bg-white"
v-if="index === 0"
:class="{ activeAddNews: activeNewsIndex === index }"
:class="{
'border-[5px] border-[#2bb673]': activeNewsIndex === index,
}"
@click="activeNewsIndex = index"
>
<div class="news-content">
<img class="material-img" :src="news.thumbUrl" />
<div class="news-content-title">{{ news.title }}</div>
<div class="relative h-[120px] w-full bg-[#acadae]">
<img class="h-full w-full" :src="news.thumbUrl" />
<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
class="relative -bottom-[25px] hidden text-center group-hover:block"
v-if="newsList.length > 1"
>
<Button
type="default"
shape="circle"
@@ -120,18 +130,22 @@ function plusNews() {
</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"
:class="{ activeAddNews: activeNewsIndex === index }"
:class="{
'border-[5px] border-[#2bb673]': activeNewsIndex === index,
}"
@click="activeNewsIndex = index"
>
<div class="news-content-item">
<div class="news-content-item-title">{{ news.title }}</div>
<div class="news-content-item-img">
<img class="material-img" :src="news.thumbUrl" width="100%" />
<div class="relative -ml-[3px]">
<div class="inline-block w-[70%] text-xs">{{ news.title }}</div>
<div class="inline-block w-[25%] bg-[#acadae]">
<img class="h-full w-full" :src="news.thumbUrl" />
</div>
</div>
<div class="child">
<div
class="relative -bottom-[25px] hidden text-center group-hover:block"
>
<Button
v-if="newsList.length > index + 1"
shape="circle"
@@ -163,7 +177,10 @@ function plusNews() {
</div>
</div>
</div>
<Row justify="center" class="ope-row">
<Row
justify="center"
class="mt-[5px] border-t border-[#eaeaea] pt-[5px] text-center"
>
<Button
type="primary"
shape="circle"
@@ -175,7 +192,7 @@ function plusNews() {
</Row>
</div>
</Layout.Sider>
<Layout.Content :style="{ backgroundColor: '#fff' }">
<Layout.Content class="bg-white">
<div v-if="newsList.length > 0 && activeNewsItem">
<!-- 标题、作者、原文地址 -->
<Row :gutter="20">
@@ -185,13 +202,13 @@ function plusNews() {
placeholder="请输入标题（必填）"
/>
</Col>
<Col :span="24" style="margin-top: 5px">
<Col :span="24" class="mt-[5px]">
<Input
v-model:value="activeNewsItem.author"
placeholder="请输入作者"
/>
</Col>
<Col :span="24" style="margin-top: 5px">
<Col :span="24" class="mt-[5px]">
<Input
v-model:value="activeNewsItem.contentSourceUrl"
placeholder="请输入原文地址"
@@ -212,7 +229,7 @@ function plusNews() {
:rows="8"
v-model:value="activeNewsItem.digest"
placeholder="请输入摘要"
class="digest"
class="inline-block w-full align-top"
:maxlength="120"
:show-count="true"
/>
@@ -230,14 +247,6 @@ function plusNews() {
</template>
<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) {
margin-bottom: 20px;
}
@@ -245,94 +254,4 @@ function plusNews() {
:deep(.ant-row:last-child) {
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>

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 {
title: 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__';
@@ -7,3 +11,21 @@ export enum Level {
Parent = '1',
Undefined = '0',
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'accountId',
label: '公众号',
component: 'ApiSelect',
componentProps: {
api: getSimpleAccountList,
labelField: 'name',
valueField: 'id',
autoSelect: 'first',
placeholder: '请选择公众号',
},
},
];
}

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

@@ -1,17 +1,26 @@
<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 { 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 { WxAccountSelect } from '#/views/mp/components';
import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/components';
import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
import {
Level,
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' });
@@ -21,6 +30,25 @@ const accountId = ref(-1);
const accountName = ref<string>('');
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'）
@@ -50,12 +78,36 @@ const tempSelfObj = ref<{
const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
/** 侦听公众号变化 */
function onAccountChanged(id: number, name: string) {
accountId.value = id;
accountName.value = name;
async function onAccountChanged(values: Record<string, any>) {
accountId.value = values.accountId;
// 从 API 获取公众号列表并查找对应的公众号名称
const accountList = await getSimpleAccountList();
const account = accountList.find((item) => item.id === values.accountId);
accountName.value = account?.name || '';
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() {
loading.value = true;
@@ -249,21 +301,37 @@ function menuToBackend(menu: any) {
<DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
</template>
<ContentWrap>
<!-- 搜索工作栏 -->
<Form class="mb-10 w-full">
<Form.Item label="公众号" prop="accountId" class="w-60">
<WxAccountSelect @change="onAccountChanged" />
</Form.Item>
</Form>
<!-- 搜索工作栏 -->
<!-- <ContentWrap> -->
<AccountForm class="-mb-15px w-240px" @values-change="onAccountChanged" />
<!-- </ContentWrap> -->
<div class="clearfix public-account-management mt-10" v-loading="loading">
<!-- DONE @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
<ContentWrap>
<!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
<div
class="mx-auto w-[1200px] after:clear-both after:table after:content-['']"
v-loading="loading"
>
<!--左边配置菜单-->
<div class="left">
<div class="weixin-hd">
<div class="weixin-title">{{ accountName }}</div>
<div
class="relative float-left box-border block h-[715px] w-[350px] bg-[length:100%_auto] bg-no-repeat p-[518px_25px_88px]"
: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
class="bg-[position:0_0] bg-no-repeat pl-[43px] text-xs after:clear-both after:table after:content-['']"
:style="{ backgroundImage: `url(${menuFootImg})` }"
>
<MenuPreviewer
v-model="menuList"
:account-id="accountId"
@@ -273,27 +341,25 @@ function menuToBackend(menu: any) {
@submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
/>
</div>
<div class="save-div">
<!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
<div class="mt-[15px] flex items-center justify-center gap-[10px]">
<Button
class="save-btn"
type="primary"
@click="onSave"
v-access:code="['mp:menu:save']"
>
保存并发布菜单
</Button>
<Button
class="save-btn"
danger
@click="onClear"
v-access:code="['mp:menu:delete']"
>
<Button danger @click="onClear" v-access:code="['mp:menu:delete']">
清空菜单
</Button>
</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
:account-id="accountId"
:is-parent="isParent"
@@ -302,94 +368,10 @@ function menuToBackend(menu: any) {
/>
</div>
<!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
<div v-else class="right">
<div v-else class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5">
<p>请选择菜单配置</p>
</div>
</div>
</ContentWrap>
</Page>
</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

147
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>
// TODO @hw：名字可以缩写成 editor.vue，文件名
// DONE @hw：名字可以缩写成 editor.vue，文件名
import { computed, nextTick, ref, watch } from 'vue';
import { IconifyIcon } from '@vben/icons';
@@ -16,7 +16,7 @@ import {
import { WxMaterialSelect, WxNews, WxReply } from '#/views/mp/components';
import menuOptions from './menuOptions';
import { menuOptions } from './types';
const props = defineProps<{
accountId: number;
@@ -38,13 +38,13 @@ const menu = computed({
},
});
const showNewsDialog = ref(false);
const hackResetWxReplySelect = ref(false);
const hackResetReplySelect = ref(false);
const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
watch(menu, () => {
hackResetWxReplySelect.value = false; // 销毁组件
hackResetReplySelect.value = false; // 销毁组件
nextTick(() => {
hackResetWxReplySelect.value = true; // 重建组件
hackResetReplySelect.value = true; // 重建组件
});
});
@@ -81,8 +81,9 @@ function deleteMaterial() {
<template>
<div>
<div class="configure-page">
<div class="delete-btn">
<!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
<div>
<div class="mb-[15px] text-right">
<Button type="primary" danger @click="emit('delete')">
<IconifyIcon icon="lucide:trash-2" />
删除当前菜单
@@ -91,7 +92,7 @@ function deleteMaterial() {
<div>
<span>菜单名称：</span>
<Input
class="input-width"
class="mr-[2%] w-[240px]"
v-model:value="menu.name"
placeholder="请输入菜单名称"
:maxlength="isParent ? 4 : 7"
@@ -99,21 +100,21 @@ function deleteMaterial() {
/>
</div>
<div v-if="isLeave">
<div class="menu-content">
<div class="mt-5">
<span>菜单标识：</span>
<Input
class="input-width"
class="mr-[2%] w-[240px]"
v-model:value="menu.menuKey"
placeholder="请输入菜单 KEY"
allow-clear
/>
</div>
<div class="menu-content">
<div class="mt-5">
<span>菜单内容：</span>
<Select
v-model:value="menu.type"
placeholder="请选择"
class="input-width"
class="mr-[2%] w-[240px]"
allow-clear
>
<Select.Option
@@ -126,56 +127,69 @@ function deleteMaterial() {
</Select.Option>
</Select>
</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>
<Input
class="input-width"
class="mr-[2%] w-[240px]"
v-model:value="menu.url"
placeholder="请输入链接"
allow-clear
/>
</div>
<!-- TODO @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
<div class="configur-content" v-if="menu.type === 'miniprogram'">
<div class="applet">
<span>小程序的 appid ：</span>
<!-- DONE @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
<div
class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
v-if="menu.type === 'miniprogram'"
>
<div class="mb-5 flex items-center">
<div class="w-[20%]">小程序的 appid ：</div>
<Input
class="input-width"
class="mr-[2%] flex-1"
v-model:value="menu.miniProgramAppId"
placeholder="请输入小程序的appid"
allow-clear
/>
</div>
<div class="applet">
<span>小程序的页面路径：</span>
<div class="mb-5 flex items-center">
<div class="w-[20%]">小程序的页面路径：</div>
<Input
class="input-width"
class="mr-[2%] flex-1"
v-model:value="menu.miniProgramPagePath"
placeholder="请输入小程序的页面路径，如：pages/index"
allow-clear
/>
</div>
<div class="applet">
<span>小程序的备用网页：</span>
<div class="mb-5 flex items-center">
<div class="w-[20%]">小程序的备用网页：</div>
<Input
class="input-width"
class="mr-[2%] flex-1"
v-model:value="menu.url"
placeholder="不支持小程序的老版本客户端将打开本网页"
allow-clear
/>
</div>
<p class="blue">
<p class="mt-[10px] text-[#29b6f6]">
tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
</p>
</div>
<div
class="configur-content"
class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
v-if="menu.type === 'article_view_limited'"
>
<Row>
<div class="select-item" v-if="menu && menu.replyArticles">
<div
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
v-if="menu && menu.replyArticles"
>
<WxNews :articles="menu.replyArticles" />
<Row class="ope-row" justify="center" align="middle">
<Row
class="pt-[10px] text-center"
justify="center"
align="middle"
>
<Button
type="primary"
danger
@@ -188,8 +202,8 @@ function deleteMaterial() {
</div>
<div v-else>
<Row justify="center">
<!-- TODO @hw：html 标签里的 style 要用 tindwind 替代下； -->
<Col :span="24" style="text-align: center">
<!-- DONE @hw：html 标签里的 style 要用 tindwind 替代下； -->
<Col :span="24" class="text-center">
<Button type="primary" @click="showNewsDialog = true">
素材库选择
<IconifyIcon icon="lucide:circle-check" />
@@ -211,80 +225,13 @@ function deleteMaterial() {
</Modal>
</Row>
</div>
<!-- TODO @hw：貌似这个组件出不来 -->
<div
class="configur-content"
class="configur-content mt-5"
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
>
<WxReply v-if="hackResetWxReplySelect" v-model="menu.reply" />
<WxReply v-model="menu.reply" />
</div>
<!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
</div>
</div>
</div>
</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>
// TODO @hw：名字可以缩写成 previewer.vue，文件名
// DONE @hw：名字可以缩写成 previewer.vue，文件名
import type { Menu } from './types';
import { computed } from 'vue';
@@ -44,9 +44,8 @@ function addMenu() {
/** 添加横向二级菜单；parent 表示要操作的父菜单 */
function addSubMenu(i: number, parent: any) {
const subMenuKeyLength = parent.children.length; // 获取二级菜单 key 长度
// TODO @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
const addButton = {
// DONE @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
parent.children[parent.children.length] = {
name: '子菜单名称',
reply: {
// 用于存储回复内容
@@ -54,8 +53,11 @@ function addSubMenu(i: number, parent: any) {
accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
},
};
parent.children[subMenuKeyLength] = addButton;
subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength);
subMenuClicked(
parent.children[parent.children.length - 1],
i,
parent.children.length - 1,
);
}
/** 一级菜单点击 */
@@ -129,18 +131,23 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
@end="onParentDragEnd"
>
<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
@click="menuClicked(parent, x)"
class="menu-item"
:class="{ active: props.activeIndex === `${x}` }"
class="box-border flex h-[44px] w-full items-center justify-center leading-[44px]"
:class="{ 'border border-[#2bb673]': props.activeIndex === `${x}` }"
>
<IconifyIcon icon="lucide:panel-right-open" color="black" />
{{ parent.name }}
</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
v-model="parent.children"
item-key="id"
@@ -149,11 +156,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
@end="onChildDragEnd"
>
<template #item="{ element: child, index: y }">
<div class="menu-bottom subtitle">
<div
class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
>
<div
class="menu-sub-item"
v-if="parent.children"
:class="{ active: props.activeIndex === `${x}-${y}` }"
class="box-border h-[44px] text-center leading-[44px]"
:class="{
'border border-[#2bb673]':
props.activeIndex === `${x}-${y}`,
}"
@click="subMenuClicked(child, x, y)"
>
{{ child.name }}
@@ -161,13 +172,12 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
</div>
</template>
</draggable>
<!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号 -->
<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"
@click="addSubMenu(x, parent)"
>
<IconifyIcon icon="lucide:plus" class="plus" />
<IconifyIcon icon="lucide:plus" class="text-[#2bb673]" />
</div>
</div>
</div>
@@ -176,78 +186,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
<!-- 一级菜单加号 -->
<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"
@click="addMenu"
>
<IconifyIcon icon="lucide:plus" class="plus" />
<IconifyIcon icon="lucide:plus" class="text-[#2bb673]" />
</div>
</template>
<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 {
background: #f7fafc;
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>;
// 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;

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[] {
return [
{

100
apps/web-ele/src/views/mp/autoReply/data.ts
View File

@@ -1,19 +1,33 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { VxeGridPropTypes } from '#/adapter/vxe-table';
import type { MpAccountApi } from '#/api/mp/account';
import { markRaw } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictObj, getDictOptions } from '@vben/hooks';
import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
import { getSimpleAccountList } from '#/api/mp/account';
import { ReplySelect } from '#/views/mp/components';
import { MsgType } from './modules/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,
): VxeTableGridOptions['columns'] {
const columns: VxeTableGridOptions['columns'] = [];
export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
const columns: VxeGridPropTypes.Columns = [];
// 请求消息类型列（仅消息回复显示）
if (msgType === MsgType.Message) {
columns.push({
@@ -51,10 +65,8 @@ export function useGridColumns(
field: 'responseMessageType',
title: '回复消息类型',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.MP_MESSAGE_TYPE },
},
formatter: ({ cellValue }) =>
getDictObj(DICT_TYPE.MP_MESSAGE_TYPE, String(cellValue))?.label ?? '',
},
{
field: 'responseContent',
@@ -78,13 +90,79 @@ export function useGridColumns(
return columns;
}
/** 新增/修改的表单 */
export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
const schema: VbenFormSchema[] = [];
// 消息类型（仅消息回复显示）
if (Number(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 (Number(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 (Number(msgType) === MsgType.Keyword) {
schema.push({
fieldName: 'requestKeyword',
label: '关键词',
component: 'Input',
componentProps: {
placeholder: '请输入内容',
allowClear: true,
},
rules: 'required',
});
}
// 回复消息
schema.push({
fieldName: 'reply',
label: '回复消息',
component: markRaw(ReplySelect),
});
return schema;
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'accountId',
label: '公众号',
component: markRaw(WxAccountSelect),
component: 'ApiSelect',
componentProps: {
options: accountList.map((item) => ({
label: item.name,
value: item.id,
})),
placeholder: '请选择公众号',
},
defaultValue: accountList[0]?.id,
},
];
}

241
apps/web-ele/src/views/mp/autoReply/index.vue
View File

@@ -1,11 +1,10 @@
<script lang="ts" setup>
import type { TabPaneName } from 'element-plus';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { computed, nextTick, onMounted, ref } from 'vue';
import { computed, nextTick, ref } from 'vue';
import { ContentWrap, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import {
ElLoading,
@@ -21,26 +20,27 @@ import * as MpAutoReplyApi from '#/api/mp/autoReply';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Content from './modules/content.vue';
import Form from './modules/form.vue';
import ReplyContentCell from './modules/ReplyTable.vue';
import { MsgType } from './modules/types';
defineOptions({ name: 'MpAutoReply' });
const msgType = ref<MsgType>(MsgType.Keyword); // 消息类型
async function onTabChange(_tabName: TabPaneName) {
// 等待 msgType 更新完成
const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
/** 切换回复类型 */
async function onTabChange(tabName: string) {
msgType.value = tabName;
await nextTick();
const columns = useGridColumns(msgType.value);
// 更新 columns
const columns = useGridColumns(Number(msgType.value) as MsgType);
if (columns) {
// 使用 setGridOptions 更新列配置
gridApi.setGridOptions({ columns });
// 等待列配置更新完成
await nextTick();
}
// 查询数据
await gridApi.query();
// 查询完成后更新数据长度
updateTableDataLength();
}
/** 新增按钮操作 */
@@ -49,7 +49,6 @@ async function handleCreate() {
formModalApi
.setData({
isCreating: true,
msgType: msgType.value,
accountId: formValues.accountId,
})
@@ -59,8 +58,13 @@ async function handleCreate() {
/** 修改按钮操作 */
async function handleEdit(row: any) {
const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
const formValues = await gridApi.formApi.getValues();
formModalApi
.setData({ isCreating: false, msgType: msgType.value, row: data })
.setData({
msgType: msgType.value,
row: data,
accountId: formValues.accountId,
})
.open();
}
@@ -73,9 +77,7 @@ async function handleDelete(row: any) {
try {
await MpAutoReplyApi.deleteAutoReply(row.id);
ElMessage.success('删除成功');
await gridApi.query();
// 查询完成后更新数据长度
updateTableDataLength();
handleRefresh();
} finally {
loadingInstance.close();
}
@@ -93,9 +95,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
submitOnChange: true,
},
gridOptions: {
columns: useGridColumns(msgType.value),
height: 'calc(100vh - 300px)',
// height: '600px',
columns: useGridColumns(Number(msgType.value) as MsgType),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
@@ -103,13 +104,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
return await MpAutoReplyApi.getAutoReplyPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
type: msgType.value,
type: Number(msgType.value) as MsgType,
...formValues,
});
},
},
// 禁用自动加载，等表单初始化完成后再加载
autoLoad: false,
},
rowConfig: {
keyField: 'id',
@@ -122,44 +121,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
} as VxeTableGridOptions<any>,
});
// 表格数据长度，用于判断是否显示新增按钮
const tableDataLength = ref(0);
// 更新表格数据长度（避免在模板中直接调用 getTableData 导致响应式循环）
function updateTableDataLength() {
try {
if (!gridApi.grid) {
return;
}
const tableData = gridApi.grid.getTableData();
tableDataLength.value = tableData?.tableData?.length || 0;
} catch {
tableDataLength.value = 0;
}
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
// 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
const showCreateButton = computed(() => {
if (msgType.value !== MsgType.Follow) {
if (Number(msgType.value) !== MsgType.Follow) {
return true;
}
return tableDataLength.value <= 0;
});
// 页面挂载后，等待表单初始化完成再加载数据
onMounted(async () => {
// 等待 WxAccountSelect 组件加载并设置默认值
await nextTick();
if (gridApi.formApi) {
const formValues = await gridApi.formApi.getValues();
// 如果 accountId 有值，说明已经准备好了
if (formValues.accountId) {
// 设置为最新提交的值
gridApi.formApi.setLatestSubmissionValues(formValues);
// 触发首次查询
await gridApi.query();
updateTableDataLength();
}
try {
const tableData = gridApi.grid?.getTableData();
return (tableData?.tableData?.length || 0) <= 0;
} catch {
return true;
}
});
</script>
@@ -170,86 +146,83 @@ onMounted(async () => {
<DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
</template>
<!-- tab 切换 -->
<ContentWrap>
<ElTabs v-model="msgType" @tab-change="onTabChange">
<!-- tab 项 -->
<ElTabPane :name="MsgType.Follow">
<template #label>
<ElRow align="middle">
<Icon icon="ep:star" class="mr-2px" /> 关注时回复
</ElRow>
</template>
</ElTabPane>
<ElTabPane :name="MsgType.Message">
<template #label>
<ElRow align="middle">
<Icon icon="ep:chat-line-round" class="mr-2px" /> 消息回复
</ElRow>
</template>
</ElTabPane>
<ElTabPane :name="MsgType.Keyword">
<template #label>
<ElRow align="middle">
<Icon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
</ElRow>
</template>
</ElTabPane>
</ElTabs>
<!-- 列表 -->
<FormModal
@success="
() => {
gridApi.query().then(() => {
updateTableDataLength();
});
}
"
/>
<Grid table-title="自动回复列表">
<template #toolbar-tools>
<TableAction
v-if="showCreateButton"
:actions="[
{
label: $t('ui.actionTitle.create', ['自动回复']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['mp:auto-reply:create'],
onClick: handleCreate,
<FormModal @success="handleRefresh" />
<Grid table-title="自动回复列表">
<!-- 在工具栏上方放置 Tab 切换 -->
<template #toolbar-actions>
<ElTabs
v-model="msgType"
class="w-full"
@tab-change="(activeName) => onTabChange(activeName as string)"
>
<ElTabPane :name="String(MsgType.Follow)">
<template #label>
<ElRow align="middle">
<IconifyIcon icon="ep:star" class="mr-[2px]" /> 关注时回复
</ElRow>
</template>
</ElTabPane>
<ElTabPane :name="String(MsgType.Message)">
<template #label>
<ElRow align="middle">
<IconifyIcon icon="ep:chat-line-round" class="mr-[2px]" />
消息回复
</ElRow>
</template>
</ElTabPane>
<ElTabPane :name="String(MsgType.Keyword)">
<template #label>
<ElRow align="middle">
<IconifyIcon icon="fa:newspaper-o" class="mr-[2px]" />
关键词回复
</ElRow>
</template>
</ElTabPane>
</ElTabs>
</template>
<!-- 工具栏按钮 -->
<template #toolbar-tools>
<TableAction
v-if="showCreateButton"
:actions="[
{
label: $t('ui.actionTitle.create', ['自动回复']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['mp:auto-reply:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #replyContent="{ row }">
<Content :row="row" />
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['mp:auto-reply:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['mp:auto-reply:delete'],
popConfirm: {
title: '是否确认删除此数据?',
confirm: handleDelete.bind(null, row),
},
]"
/>
</template>
<template #replyContent="{ row }">
<ReplyContentCell :row="row" />
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['mp:auto-reply:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['mp:auto-reply:delete'],
popConfirm: {
title: '是否确认删除此数据?',
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</ContentWrap>
},
]"
/>
</template>
</Grid>
</Page>
</template>

128
apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue
View File

@@ -1,128 +0,0 @@
<script lang="ts" setup>
import type { FormInstance } from 'element-plus';
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 { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
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<FormInstance | null>(null); // 表单 ref
const RequestMessageTypes = [
'text',
'image',
'voice',
'video',
'shortvideo',
'location',
'link',
]; // 允许选择的请求消息类型
// 表单校验
const rules = {
requestKeyword: [
{ required: true, message: '请求的关键字不能为空', trigger: 'blur' },
],
requestMatch: [
{ required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' },
],
};
defineExpose({
resetFields: () => formRef.value?.resetFields(),
validate: async () => formRef.value?.validate(),
});
</script>
<template>
<div>
<ElForm ref="formRef" :model="replyForm" :rules="rules" label-width="80px">
<ElFormItem
label="消息类型"
prop="requestMessageType"
v-if="msgType === MsgType.Message"
>
<ElSelect v-model="replyForm.requestMessageType" placeholder="请选择">
<template
v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
:key="dict.value"
>
<ElOption
v-if="RequestMessageTypes.includes(dict.value as string)"
:label="dict.label"
:value="dict.value"
/>
</template>
</ElSelect>
</ElFormItem>
<ElFormItem
label="匹配类型"
prop="requestMatch"
v-if="msgType === MsgType.Keyword"
>
<ElSelect
v-model="replyForm.requestMatch"
placeholder="请选择匹配类型"
clearable
>
<ElOption
v-for="dict in getDictOptions(
DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
'number',
)"
:key="String(dict.value)"
:label="dict.label"
:value="dict.value"
/>
</ElSelect>
</ElFormItem>
<ElFormItem
label="关键词"
prop="requestKeyword"
v-if="msgType === MsgType.Keyword"
>
<ElInput
v-model="replyForm.requestKeyword"
placeholder="请输入内容"
clearable
/>
</ElFormItem>
<ElFormItem label="回复消息">
<WxReplySelect v-model="reply" />
</ElFormItem>
</ElForm>
</div>
</template>
<style scoped></style>

17
apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue → apps/web-ele/src/views/mp/autoReply/modules/content.vue
View File

@@ -1,8 +1,5 @@
<script lang="ts" setup>
import WxMusic from '#/views/mp/modules/wx-music';
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 { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/components';
defineOptions({ name: 'ReplyContentCell' });
@@ -17,14 +14,14 @@ const props = defineProps<{
{{ props.row.responseContent }}
</div>
<div v-else-if="props.row.responseMessageType === 'voice'">
<WxVoicePlayer
<VoicePlayer
v-if="props.row.responseMediaUrl"
:url="props.row.responseMediaUrl"
/>
</div>
<div v-else-if="props.row.responseMessageType === 'image'">
<a target="_blank" :href="props.row.responseMediaUrl">
<img :src="props.row.responseMediaUrl" style="width: 100px" />
<img :src="props.row.responseMediaUrl" class="w-[100px]" />
</a>
</div>
<div
@@ -33,17 +30,17 @@ const props = defineProps<{
props.row.responseMessageType === 'shortvideo'
"
>
<WxVideoPlayer
<VideoPlayer
v-if="props.row.responseMediaUrl"
:url="props.row.responseMediaUrl"
style="margin-top: 10px"
class="mt-[10px]"
/>
</div>
<div v-else-if="props.row.responseMessageType === 'news'">
<WxNews :articles="props.row.responseArticles" />
<News :articles="props.row.responseArticles" />
</div>
<div v-else-if="props.row.responseMessageType === 'music'">
<WxMusic
<Music
:title="props.row.responseTitle"
:description="props.row.responseDescription"
:thumb-media-url="props.row.responseThumbMediaUrl"

155
apps/web-ele/src/views/mp/autoReply/modules/form.vue
View File

@@ -1,61 +1,88 @@
<script lang="ts" setup>
import type { Reply } from '#/views/mp/modules/wx-reply';
import type { Reply } from '#/views/mp/components/reply/types';
import { computed, ref } from 'vue';
import { computed, nextTick, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import * as MpAutoReplyApi from '#/api/mp/autoReply';
import { useVbenForm } from '#/adapter/form';
import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
import { $t } from '#/locales';
import { ReplyType } from '#/views/mp/modules/wx-reply/modules/types';
import { ReplyType } from '#/views/mp/components/reply/types';
import ReplyForm from './ReplyForm.vue';
import { useFormSchema } from '../data';
import { MsgType } from './types';
const emit = defineEmits(['success']);
const formRef = ref<InstanceType<typeof ReplyForm> | null>(null);
const formData = ref<{ isCreating: boolean; msgType: MsgType; row?: any }>();
const replyForm = ref<any>({});
const reply = ref<Reply>({
type: ReplyType.Text,
accountId: -1,
});
const formData = ref<{
accountId?: number;
msgType: MsgType;
row?: any;
}>();
const getTitle = computed(() => {
return formData.value?.isCreating
? $t('ui.actionTitle.create', ['自动回复'])
: $t('ui.actionTitle.edit', ['自动回复']);
return formData.value?.row?.id
? $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(Number(formData.value?.msgType) as MsgType),
showDefaultActions: false,
});
// 注意：schema 的更新现在在 onOpenChange 中手动处理，避免时序问题
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
await formRef.value?.validate();
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// 处理回复消息
const submitForm: any = { ...replyForm.value };
submitForm.responseMessageType = reply.value.type;
submitForm.responseContent = reply.value.content;
submitForm.responseMediaId = reply.value.mediaId;
submitForm.responseMediaUrl = reply.value.url;
submitForm.responseTitle = reply.value.title;
submitForm.responseDescription = reply.value.description;
submitForm.responseThumbMediaId = reply.value.thumbMediaId;
submitForm.responseThumbMediaUrl = reply.value.thumbMediaUrl;
submitForm.responseArticles = reply.value.articles;
submitForm.responseMusicUrl = reply.value.musicUrl;
submitForm.responseHqMusicUrl = reply.value.hqMusicUrl;
const submitForm: any = await formApi.getValues();
// 确保 type 字段使用当前选中的 tab 值
submitForm.type = formData.value?.msgType;
// 确保 accountId 字段存在
submitForm.accountId = formData.value?.accountId;
// 编辑模式下，确保 id 字段存在（从 row 中获取，因为表单 schema 中没有 id 字段）
if (formData.value?.row?.id && !submitForm.id) {
submitForm.id = formData.value.row.id;
}
const reply = submitForm.reply as Reply | undefined;
if (reply) {
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();
try {
if (replyForm.value.id === undefined) {
await MpAutoReplyApi.createAutoReply(submitForm);
if (submitForm.id === undefined) {
await createAutoReply(submitForm);
ElMessage.success('新增成功');
} else {
await MpAutoReplyApi.updateAutoReply(submitForm);
await updateAutoReply(submitForm);
ElMessage.success('修改成功');
}
await modalApi.close();
@@ -67,50 +94,28 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
replyForm.value = {};
reply.value = {
type: ReplyType.Text,
accountId: -1,
};
return;
}
// 加载数据
const data = modalApi.getData<{
accountId?: number;
isCreating: boolean;
msgType: MsgType;
row?: any;
}>();
if (!data) {
return;
}
formData.value = data;
// 先更新 schema，确保表单字段正确
formApi.setState({ schema: useFormSchema(data.msgType) });
// 等待 schema 更新完成
await nextTick();
if (data.isCreating) {
// 新建：初始化表单
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) {
formData.value = data;
if (data.row?.id) {
// 编辑：加载数据
const rowData = data.row;
replyForm.value = { ...rowData };
delete replyForm.value.responseMessageType;
delete replyForm.value.responseContent;
delete replyForm.value.responseMediaId;
delete replyForm.value.responseMediaUrl;
delete replyForm.value.responseDescription;
delete replyForm.value.responseArticles;
reply.value = {
const formValues: any = { ...rowData };
formValues.reply = {
type: rowData.responseMessageType,
accountId: data.accountId || -1,
content: rowData.responseContent,
@@ -124,6 +129,22 @@ const [Modal, modalApi] = useVbenModal({
musicUrl: rowData.responseMusicUrl,
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);
}
},
});
@@ -131,12 +152,6 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal :title="getTitle" class="w-4/5">
<ReplyForm
v-if="formData"
v-model="replyForm"
v-model:reply="reply"
:msg-type="formData.msgType"
ref="formRef"
/>
<Form class="mx-4" />
</Modal>
</template>

10
apps/web-ele/src/views/mp/modules/wx-account-select/main.vue → apps/web-ele/src/views/mp/components/account-select/account-select.vue
View File

@@ -6,11 +6,11 @@ import { useRouter } from 'vue-router';
import { useTabs } from '@vben/hooks';
import { ElMessage } from 'element-plus';
import { ElMessage, ElOption, ElSelect } from 'element-plus';
import { getSimpleAccountList } from '#/api/mp/account';
defineOptions({ name: 'WxAccountSelect' });
defineOptions({ name: 'AccountSelect' });
const props = defineProps<{
modelValue?: number;
@@ -121,19 +121,19 @@ onMounted(() => {
</script>
<template>
<el-select
<ElSelect
v-model="currentId"
placeholder="请选择公众号"
class="!w-240px"
@change="onChanged"
>
<el-option
<ElOption
v-for="item in accountList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</ElSelect>
</template>
<style lang="scss" scoped>
:deep(.el-select__wrapper) {

1
apps/web-ele/src/views/mp/components/account-select/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from './account-select.vue';

22
apps/web-ele/src/views/mp/components/index.ts Normal file
View File

@@ -0,0 +1,22 @@
// 统一导出所有模块组件
export { default as AccountSelect } from './account-select/account-select.vue';
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';

1
apps/web-ele/src/views/mp/components/location/index.ts Normal file
View File

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

24
apps/web-ele/src/views/mp/modules/wx-location/main.vue → apps/web-ele/src/views/mp/components/location/location.vue
View File

@@ -2,7 +2,11 @@
【微信消息 - 定位】TODO @Dhb52 目前未启用
-->
<script lang="ts" setup>
defineOptions({ name: 'WxLocation' });
import { IconifyIcon } from '@vben/icons';
import { ElCol, ElLink, ElRow } from 'element-plus';
defineOptions({ name: 'Location' });
const props = defineProps({
locationX: {
@@ -36,26 +40,26 @@ defineExpose({
<template>
<div>
<el-link
<ElLink
type="primary"
target="_blank"
:href="`https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
locationY
}&pointy=${locationX}&name=${label}&ref=yudao`"
>
<el-col>
<el-row>
<ElCol>
<ElRow>
<img
:src="`https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${
locationX
},${locationY}&key=${qqMapKey}&size=250*180`"
/>
</el-row>
<el-row>
<Icon icon="ep:location" />
</ElRow>
<ElRow>
<IconifyIcon icon="ep:location" />
{{ label }}
</el-row>
</el-col>
</el-link>
</ElRow>
</ElCol>
</ElLink>
</div>
</template>

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

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

147
apps/web-ele/src/views/mp/modules/wx-material-select/main.vue → apps/web-ele/src/views/mp/components/material-select/material-select.vue
View File

@@ -6,18 +6,27 @@
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { formatTime } from '@vben/utils';
import {
ElButton,
ElPagination,
ElRow,
ElTable,
ElTableColumn,
} from 'element-plus';
import * as MpDraftApi from '#/api/mp/draft';
import * as MpFreePublishApi from '#/api/mp/freePublish';
import * as MpMaterialApi from '#/api/mp/material';
import 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 News from '#/views/mp/components/news/news.vue';
import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
import { NewsType } from './types';
defineOptions({ name: 'WxMaterialSelect' });
defineOptions({ name: 'MaterialSelect' });
const props = withDefaults(
defineProps<{
@@ -118,34 +127,37 @@ onMounted(async () => {
<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>
<el-row class="ope-row">
<el-button type="success" @click="selectMaterialFun(item)">
<ElRow class="ope-row">
<ElButton type="success" @click="selectMaterialFun(item)">
选择
<Icon icon="ep:circle-check" />
</el-button>
</el-row>
<IconifyIcon icon="ep:circle-check" />
</ElButton>
</ElRow>
</div>
</div>
<!-- 分页组件 -->
<Pagination
<ElPagination
background
layout="prev, pager, next, sizes, total"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@current-change="getMaterialPageFun"
@size-change="getMaterialPageFun"
/>
</div>
<!-- 类型：voice -->
<div v-else-if="props.type === 'voice'">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="语音" align="center">
<ElTable v-loading="loading" :data="list">
<ElTableColumn label="编号" align="center" prop="mediaId" />
<ElTableColumn label="文件名" align="center" prop="name" />
<ElTableColumn label="语音" align="center">
<template #default="scope">
<WxVoicePlayer :url="scope.row.url" />
<VoicePlayer :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column
</ElTableColumn>
<ElTableColumn
label="上传时间"
align="center"
prop="createTime"
@@ -154,41 +166,40 @@ onMounted(async () => {
(row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
"
/>
<el-table-column label="操作" align="center" fixed="right">
<ElTableColumn label="操作" align="center" fixed="right">
<template #default="scope">
<el-button
type="primary"
link
@click="selectMaterialFun(scope.row)"
>
<ElButton type="primary" link @click="selectMaterialFun(scope.row)">
选择
<Icon icon="ep:plus" />
</el-button>
<IconifyIcon icon="ep:plus" />
</ElButton>
</template>
</el-table-column>
</el-table>
</ElTableColumn>
</ElTable>
<!-- 分页组件 -->
<Pagination
<ElPagination
background
layout="prev, pager, next, sizes, total"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getPage"
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@current-change="getPage"
@size-change="getPage"
/>
</div>
<!-- 类型：video -->
<div v-else-if="props.type === 'video'">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="标题" align="center" prop="title" />
<el-table-column label="介绍" align="center" prop="introduction" />
<el-table-column label="视频" align="center">
<ElTable v-loading="loading" :data="list">
<ElTableColumn label="编号" align="center" prop="mediaId" />
<ElTableColumn label="文件名" align="center" prop="name" />
<ElTableColumn label="标题" align="center" prop="title" />
<ElTableColumn label="介绍" align="center" prop="introduction" />
<ElTableColumn label="视频" align="center">
<template #default="scope">
<WxVideoPlayer :url="scope.row.url" />
<VideoPlayer :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column
</ElTableColumn>
<ElTableColumn
label="上传时间"
align="center"
prop="createTime"
@@ -197,30 +208,29 @@ onMounted(async () => {
(row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
"
/>
<el-table-column
<ElTableColumn
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button
type="primary"
link
@click="selectMaterialFun(scope.row)"
>
<ElButton type="primary" link @click="selectMaterialFun(scope.row)">
选择
<Icon icon="akar-icons:circle-plus" />
</el-button>
<IconifyIcon icon="akar-icons:circle-plus" />
</ElButton>
</template>
</el-table-column>
</el-table>
</ElTableColumn>
</ElTable>
<!-- 分页组件 -->
<Pagination
<ElPagination
background
layout="prev, pager, next, sizes, total"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@current-change="getMaterialPageFun"
@size-change="getMaterialPageFun"
/>
</div>
<!-- 类型：news -->
@@ -228,22 +238,25 @@ onMounted(async () => {
<div class="waterfall" v-loading="loading">
<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" />
<el-row class="ope-row">
<el-button type="success" @click="selectMaterialFun(item)">
<News :articles="item.content.newsItem" />
<ElRow class="ope-row">
<ElButton type="success" @click="selectMaterialFun(item)">
选择
<Icon icon="ep:circle-check" />
</el-button>
</el-row>
<IconifyIcon icon="ep:circle-check" />
</ElButton>
</ElRow>
</div>
</div>
</div>
<!-- 分页组件 -->
<Pagination
<ElPagination
background
layout="prev, pager, next, sizes, total"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@current-change="getMaterialPageFun"
@size-change="getMaterialPageFun"
/>
</div>
</div>

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

116
apps/web-ele/src/views/mp/components/msg/card.scss Normal file
View File

@@ -0,0 +1,116 @@
.mp-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 额外加的 */
.mp-comment__main {
flex: unset !important;
margin: 0 8px !important;
border-radius: 5px !important;
}
.mp-comment__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.mp-comment__body {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

109
apps/web-ele/src/views/mp/components/msg/comment.scss Normal file
View File

@@ -0,0 +1,109 @@
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
.mp-comment {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
&--reverse {
flex-direction: row-reverse;
.mp-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-ele/src/views/mp/components/msg/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { default } from './msg.vue';
export { MsgType } from './types';

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

@@ -1,6 +1,8 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { ElTag } from 'element-plus';
const props = defineProps<{
item: any;
}>();
@@ -11,44 +13,44 @@ const item = ref(props.item);
<template>
<div>
<div v-if="item.event === 'subscribe'">
<el-tag type="success">关注</el-tag>
<ElTag type="success">关注</ElTag>
</div>
<div v-else-if="item.event === 'unsubscribe'">
<el-tag type="danger">取消关注</el-tag>
<ElTag type="danger">取消关注</ElTag>
</div>
<div v-else-if="item.event === 'CLICK'">
<el-tag>点击菜单</el-tag>
<ElTag>点击菜单</ElTag>
【{{ item.eventKey }}】
</div>
<div v-else-if="item.event === 'VIEW'">
<el-tag>点击菜单链接</el-tag>
<ElTag>点击菜单链接</ElTag>
【{{ item.eventKey }}】
</div>
<div v-else-if="item.event === 'scancode_waitmsg'">
<el-tag>扫码结果</el-tag>
<ElTag>扫码结果</ElTag>
【{{ item.eventKey }}】
</div>
<div v-else-if="item.event === 'scancode_push'">
<el-tag>扫码结果</el-tag>
<ElTag>扫码结果</ElTag>
【{{ item.eventKey }}】
</div>
<div v-else-if="item.event === 'pic_sysphoto'">
<el-tag>系统拍照发图</el-tag>
<ElTag>系统拍照发图</ElTag>
</div>
<div v-else-if="item.event === 'pic_photo_or_album'">
<el-tag>拍照或者相册</el-tag>
<ElTag>拍照或者相册</ElTag>
</div>
<div v-else-if="item.event === 'pic_weixin'">
<el-tag>微信相册</el-tag>
<ElTag>微信相册</ElTag>
</div>
<div v-else-if="item.event === 'location_select'">
<el-tag>选择地理位置</el-tag>
<ElTag>选择地理位置</ElTag>
</div>
<div v-else-if="item.event === 'SCAN'">
<el-tag>扫码</el-tag>
<ElTag>扫码</ElTag>
</div>
<div v-else>
<el-tag type="danger">未知事件类型</el-tag>
<ElTag type="danger">未知事件类型</ElTag>
</div>
</div>
</template>

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

20
apps/web-ele/src/views/mp/modules/wx-msg/modules/msg.vue → apps/web-ele/src/views/mp/components/msg/msg.vue
View File

@@ -1,11 +1,11 @@
<script lang="ts" setup>
import { ref } from 'vue';
import WxLocation from '#/views/mp/modules/wx-location';
import WxMusic from '#/views/mp/modules/wx-music';
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 Location from '#/views/mp/components/location/location.vue';
import Music from '#/views/mp/components/music/music.vue';
import News from '#/views/mp/components/news/news.vue';
import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
import { MsgType } from '../types';
import MsgEvent from './msg-event.vue';
@@ -26,7 +26,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.Voice">
<WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
<VoicePlayer :url="item.mediaUrl" :content="item.recognition" />
</div>
<div v-else-if="item.type === MsgType.Image">
@@ -39,7 +39,7 @@ const item = ref<any>(props.item);
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
class="text-center"
>
<WxVideoPlayer :url="item.mediaUrl" />
<VideoPlayer :url="item.mediaUrl" />
</div>
<div v-else-if="item.type === MsgType.Link" class="flex-1">
@@ -64,7 +64,7 @@ const item = ref<any>(props.item);
</div>
<div v-else-if="item.type === MsgType.Location">
<WxLocation
<Location
:label="item.label"
:location-y="item.locationY"
:location-x="item.locationX"
@@ -72,11 +72,11 @@ const item = ref<any>(props.item);
</div>
<div v-else-if="item.type === MsgType.News" class="w-[300px]">
<WxNews :articles="item.articles" />
<News :articles="item.articles" />
</div>
<div v-else-if="item.type === MsgType.Music">
<WxMusic
<Music
:title="item.title"
:description="item.description"
:thumb-media-url="item.thumbMediaUrl"

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

1
apps/web-ele/src/views/mp/components/music/index.ts Normal file
View File

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

4
apps/web-ele/src/views/mp/modules/wx-music/main.vue → apps/web-ele/src/views/mp/components/music/music.vue
View File

@@ -2,7 +2,7 @@
【微信消息 - 音乐】
-->
<script lang="ts" setup>
defineOptions({ name: 'WxMusic' });
defineOptions({ name: 'Music' });
const props = defineProps({
title: {
@@ -63,5 +63,5 @@ defineExpose({
<style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss */
@import url('../wx-msg/card.scss');
@import url('../msg/card.scss');
</style>

1
apps/web-ele/src/views/mp/components/news/index.ts Normal file
View File

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

0
apps/web-ele/src/views/mp/modules/wx-news/main.vue → apps/web-ele/src/views/mp/components/news/news.vue
View File

3
apps/web-ele/src/views/mp/components/reply/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { default } from './reply.vue';
export { createEmptyReply, type Reply, ReplyType } from './types';

63
apps/web-ele/src/views/mp/modules/wx-reply/main.vue → apps/web-ele/src/views/mp/components/reply/reply.vue
View File

@@ -8,27 +8,28 @@
④ 支持发送【视频】消息时，支持新建视频
-->
<script lang="ts" setup>
import type { Reply } from './modules/types';
import type { Reply } from './types';
import { computed, ref, unref, watch } from 'vue';
import { computed } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { ElRow, ElTabPane, ElTabs } from 'element-plus';
import TabImage from './modules/tab-image.vue';
import TabMusic from './modules/tab-music.vue';
import TabNews from './modules/tab-news.vue';
import TabText from './modules/tab-text.vue';
import TabVideo from './modules/tab-video.vue';
import TabVoice from './modules/tab-voice.vue';
import { createEmptyReply, NewsType, ReplyType } from './modules/types';
import { NewsType } from '../material-select/types';
import TabImage from './tab-image.vue';
import TabMusic from './tab-music.vue';
import TabNews from './tab-news.vue';
import TabText from './tab-text.vue';
import TabVideo from './tab-video.vue';
import TabVoice from './tab-voice.vue';
import { createEmptyReply, ReplyType } from './types';
defineOptions({ name: 'WxReplySelect' });
defineOptions({ name: 'ReplySelect' });
const props = withDefaults(
defineProps<{
modelValue: Reply;
modelValue: Reply | undefined;
newsType?: NewsType;
}>(),
{
@@ -38,40 +39,16 @@ const props = withDefaults(
const emit = defineEmits<{
(e: 'update:modelValue', v: Reply): void;
}>();
// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
const defaultReply: Reply = {
accountId: -1,
type: ReplyType.Text,
};
const reply = computed<Reply>({
get: () => props.modelValue,
get: () => props.modelValue || defaultReply,
set: (val) => emit('update:modelValue', val),
});
// 作为多个标签保存各自Reply的缓存
const tabCache = new Map<ReplyType, Reply>();
// 采用独立的ref来保存当前tab，避免在watch标签变化，对reply进行赋值会产生了循环调用
const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text);
watch(
currentTab,
(newTab, oldTab) => {
// 第一次进入：oldTab 为 undefined
// 判断 newTab 是因为 Reply 为 Partial
if (oldTab === undefined || newTab === undefined) {
return;
}
tabCache.set(oldTab, unref(reply));
// 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
const temp = tabCache.get(newTab);
if (temp) {
reply.value = temp;
} else {
const newData = createEmptyReply(reply);
newData.type = newTab;
reply.value = newData;
}
},
{
immediate: true,
},
);
/** 清除除了`type`, `accountId`的字段 */
function clear() {
@@ -84,7 +61,7 @@ defineExpose({
</script>
<template>
<ElTabs type="border-card" v-model="currentTab">
<ElTabs type="border-card" v-model="reply.type" @tab-change="clear">
<!-- 类型 1：文本 -->
<ElTabPane :name="ReplyType.Text">
<template #label>

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

@@ -18,7 +18,7 @@ import {
} from 'element-plus';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
const props = defineProps<{
modelValue: Reply;
@@ -122,7 +122,7 @@ function selectMaterial(item: any) {
append-to-body
destroy-on-close
>
<WxMaterialSelect
<MaterialSelect
type="image"
:account-id="reply.accountId"
@select-material="selectMaterial"

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

@@ -20,7 +20,7 @@ import {
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
// import { getAccessToken } from '@/utils/auth'
import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
// 设置上传的请求头部
@@ -129,7 +129,7 @@ function selectMaterial(item: any) {
append-to-body
destroy-on-close
>
<WxMaterialSelect
<MaterialSelect
type="image"
:account-id="reply.accountId"
@select-material="selectMaterial"

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

@@ -7,10 +7,10 @@ import { IconifyIcon } from '@vben/icons';
import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';
import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
import WxNews from '#/views/mp/modules/wx-news';
import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
import News from '#/views/mp/components/news/news.vue';
import { NewsType } from './types';
import { NewsType } from '../material-select/types';
const props = defineProps<{
modelValue: Reply;
@@ -45,7 +45,7 @@ function onDelete() {
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
v-if="reply.articles && reply.articles.length > 0"
>
<WxNews :articles="reply.articles" />
<News :articles="reply.articles" />
<ElCol class="pt-[10px] text-center">
<ElButton type="danger" circle @click="onDelete">
<IconifyIcon icon="ep:delete" />
@@ -74,7 +74,7 @@ function onDelete() {
append-to-body
destroy-on-close
>
<WxMaterialSelect
<MaterialSelect
type="news"
:account-id="reply.accountId"
:news-type="newsType"

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

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

@@ -19,8 +19,8 @@ import {
} from 'element-plus';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
const props = defineProps<{
modelValue: Reply;
@@ -97,7 +97,7 @@ function selectMaterial(item: any) {
placeholder="请输入描述"
/>
<ElRow 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" />
</ElRow>
<ElCol>
<ElRow class="text-center" align="middle">
@@ -113,7 +113,7 @@ function selectMaterial(item: any) {
append-to-body
destroy-on-close
>
<WxMaterialSelect
<MaterialSelect
type="video"
:account-id="reply.accountId"
@select-material="selectMaterial"

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

@@ -18,8 +18,8 @@ import {
} from 'element-plus';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
// 设置上传的请求头部
@@ -99,7 +99,7 @@ function selectMaterial(item: Reply) {
{{ reply.name }}
</p>
<ElRow class="w-full pt-[10px] text-center" justify="center">
<WxVoicePlayer :url="reply.url" />
<VoicePlayer :url="reply.url" />
</ElRow>
<ElRow class="w-full pt-[10px] text-center" justify="center">
<ElButton type="danger" circle @click="onDelete">
@@ -123,7 +123,7 @@ function selectMaterial(item: Reply) {
append-to-body
destroy-on-close
>
<WxMaterialSelect
<MaterialSelect
type="voice"
:account-id="reply.accountId"
@select-material="selectMaterial"

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

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

1
apps/web-ele/src/views/mp/components/video-play/index.ts Normal file
View File

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

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

@@ -13,11 +13,14 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { VideoPlayer } from '@videojs-player/vue';
import { ElDialog } from 'element-plus';
import 'video.js/dist/video-js.css';
defineOptions({ name: 'WxVideoPlayer' });
defineOptions({ name: 'VideoPlayer' });
const props = defineProps({
url: {
@@ -40,13 +43,13 @@ const playVideo = () => {
<template>
<div @click="playVideo()">
<!-- 提示 -->
<div>
<Icon icon="ep:video-play" :size="32" class="mr-5px" />
<div class="flex cursor-pointer flex-col items-center">
<IconifyIcon icon="ep:video-play" :size="32" class="mr-5px" />
<p class="text-sm">点击播放视频</p>
</div>
<!-- 弹窗播放 -->
<el-dialog v-model="dialogVideo" title="视频播放" append-to-body>
<ElDialog v-model="dialogVideo" title="视频播放" append-to-body>
<VideoPlayer
v-if="dialogVideo"
class="video-player vjs-big-play-centered"
@@ -70,6 +73,6 @@ const playVideo = () => {
<!-- @canplay="handleEvent($event)"-->
<!-- @canplaythrough="handleEvent($event)"-->
<!-- @timeupdate="handleEvent(player?.currentTime())"-->
</el-dialog>
</ElDialog>
</div>
</template>

1
apps/web-ele/src/views/mp/components/voice-play/index.ts Normal file
View File

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

8
apps/web-ele/src/views/mp/modules/wx-voice-play/main.vue → apps/web-ele/src/views/mp/components/voice-play/voice-play.vue
View File

@@ -12,10 +12,12 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
import BenzAMRRecorder from 'benz-amr-recorder';
defineOptions({ name: 'WxVoicePlayer' });
defineOptions({ name: 'VoicePlayer' });
const props = defineProps({
url: {
@@ -79,8 +81,8 @@ const amrStop = () => {
<template>
<div class="wx-voice-div" @click="playVoice">
<el-icon>
<Icon v-if="playing !== true" icon="ep:video-play" :size="32" />
<Icon v-else icon="ep:video-pause" :size="32" />
<IconifyIcon v-if="playing !== true" icon="ep:video-play" :size="32" />
<IconifyIcon v-else icon="ep:video-pause" :size="32" />
<span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
</el-icon>
<div v-if="content">

4
apps/web-ele/src/views/mp/draft/data.ts
View File

@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { markRaw } from 'vue';
import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
import AccountSelect from '#/views/mp/components/account-select/account-select.vue';
/** 获取表格列配置 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
@@ -35,7 +35,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
{
fieldName: 'accountId',
label: '公众号',
component: markRaw(WxAccountSelect),
component: markRaw(AccountSelect),
},
];
}

4
apps/web-ele/src/views/mp/draft/modules/cover-select.vue
View File

@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
// 设置上传的请求头部
@@ -130,7 +130,7 @@ function onUploadError(err: Error) {
append-to-body
destroy-on-close
>
<WxMaterialSelect
<MaterialSelect
type="image"
:account-id="accountId!"
@select-material="onMaterialSelected"

4
apps/web-ele/src/views/mp/draft/modules/draft-table.vue
View File

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

20
apps/web-ele/src/views/mp/menu/data.ts
View File

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

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

@@ -1,24 +1,28 @@
<script lang="ts" setup>
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 {
ElButton,
ElForm,
ElFormItem,
ElLoading,
ElMessage,
} from 'element-plus';
import { ElButton, ElLoading, ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { getSimpleAccountList } from '#/api/mp/account';
import * as MpMenuApi from '#/api/mp/menu';
import * as UtilsTree from '#/utils/tree';
import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
import {
Level,
MENU_NOT_SELECTED,
useGridFormSchema,
} from '#/views/mp/menu/data';
import MenuEditor from '#/views/mp/menu/modules/menu-editor.vue';
import MenuPreviewer from '#/views/mp/menu/modules/menu-previewer.vue';
import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
// Assets for backgrounds
import iphoneBackImg from './assets/iphone_backImg.png';
import menuFootImg from './assets/menu_foot.png';
import menuHeadImg from './assets/menu_head.png';
defineOptions({ name: 'MpMenu' });
@@ -56,10 +60,32 @@ const tempSelfObj = ref<{
});
const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
// 创建表单
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);
}
},
});
/** 侦听公众号变化 */
function onAccountChanged(id: number, name: string) {
accountId.value = id;
accountName.value = name;
async function onAccountChanged(values: Record<string, any>) {
accountId.value = values.accountId;
// 从 API 获取公众号列表并查找对应的公众号名称
const accountList = await getSimpleAccountList();
const account = accountList.find((item) => item.id === values.accountId);
accountName.value = account?.name || '';
getList();
}
@@ -257,6 +283,27 @@ function menuToBackend(menu: any) {
return result;
}
/** 初始化账号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();
});
</script>
<template>
@@ -267,21 +314,34 @@ function menuToBackend(menu: any) {
<!-- 搜索工作栏 -->
<!-- <ContentWrap> -->
<ElForm :inline="true" label-width="68px" class="-mb-15px w-240px">
<ElFormItem label="公众号" prop="accountId" class="w-240px">
<WxAccountSelect @change="onAccountChanged" />
</ElFormItem>
</ElForm>
<AccountForm class="-mb-15px w-240px" @values-change="onAccountChanged" />
<!-- </ContentWrap> -->
<ContentWrap>
<div class="clearfix public-account-management" v-loading="loading">
<div
class="public-account-management mx-auto flex w-full max-w-[1200px] flex-wrap items-start gap-[20px]"
v-loading="loading"
>
<!--左边配置菜单-->
<div class="left">
<div class="weixin-hd">
<div class="weixin-title">{{ accountName }}</div>
<div
class="left relative box-border block h-[715px] w-[350px] flex-shrink-0 bg-[length:100%_auto] bg-no-repeat px-[25px] pb-[88px] pt-[518px]"
:style="{ backgroundImage: `url(${iphoneBackImg})` }"
>
<div
class="relative bottom-[426px] left-0 h-[64px] w-[300px] bg-[length:100%_auto] bg-no-repeat text-center text-white"
:style="{ backgroundImage: `url(${menuHeadImg})` }"
>
<div
class="absolute left-0 top-[33px] w-full text-center text-[14px] text-white"
>
{{ accountName }}
</div>
</div>
<div class="clearfix weixin-menu">
<div
class="weixin-menu h-[46px] bg-no-repeat pl-[43px] text-[12px]"
:style="{ backgroundImage: `url(${menuFootImg})` }"
>
<MenuPreviewer
v-model="menuList"
:account-id="accountId"
@@ -291,9 +351,9 @@ function menuToBackend(menu: any) {
@submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
/>
</div>
<div class="save-div">
<div class="mt-[15px] text-center">
<ElButton
class="save-btn"
class="mx-2"
type="success"
@click="onSave"
v-access:code="['mp:menu:save']"
@@ -301,7 +361,7 @@ function menuToBackend(menu: any) {
保存并发布菜单
</ElButton>
<ElButton
class="save-btn"
class="mx-2"
type="danger"
@click="onClear"
v-access:code="['mp:menu:delete']"
@@ -311,7 +371,10 @@ function menuToBackend(menu: any) {
</div>
</div>
<!--右边配置-->
<div class="right" v-if="showRightPanel">
<div
class="right box-border flex-1 basis-[63%] bg-[#e8e7e7] p-[20px]"
v-if="showRightPanel"
>
<MenuEditor
:account-id="accountId"
:is-parent="isParent"
@@ -320,94 +383,13 @@ function menuToBackend(menu: any) {
/>
</div>
<!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
<div v-else class="right">
<p>请选择菜单配置</p>
<div
v-else
class="right box-border flex-1 basis-[63%] bg-[#e8e7e7] p-[20px]"
>
<p class="text-left">请选择菜单配置</p>
</div>
</div>
</ContentWrap>
</Page>
</template>
<style lang="scss" scoped>
/* 公共颜色变量 */
.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('./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('./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('./assets/iphone_backImg.png') no-repeat;
background-size: 100% auto;
.save-div {
margin-top: 15px;
text-align: center;
.save-btn {
bottom: 20px;
left: 100px;
}
}
}
/* 右边菜单内容 */
.right {
float: left;
box-sizing: border-box;
width: 63%;
padding: 20px;
margin-left: 20px;
background-color: #e8e7e7;
}
}
</style>

315
apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
View File

@@ -14,9 +14,9 @@ import {
ElSelect,
} from 'element-plus';
import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
import WxNews from '#/views/mp/modules/wx-news';
import WxReplySelect from '#/views/mp/modules/wx-reply';
import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
import News from '#/views/mp/components/news/news.vue';
import ReplySelect from '#/views/mp/components/reply/reply.vue';
import menuOptions from './menuOptions';
@@ -82,199 +82,150 @@ function deleteMaterial() {
</script>
<template>
<div>
<div class="configure-page">
<div class="delete-btn">
<ElButton type="danger" @click="emit('delete')">
<IconifyIcon icon="ep:delete" />
删除当前菜单
</ElButton>
</div>
<div>
<span>菜单名称：</span>
<div class="space-y-5">
<div class="flex justify-end">
<ElButton type="danger" @click="emit('delete')">
<IconifyIcon icon="ep:delete" />
删除当前菜单
</ElButton>
</div>
<div class="flex items-center gap-3">
<span class="w-[100px] text-base">菜单名称：</span>
<ElInput
class="w-[40%] min-w-[220px]"
v-model="menu.name"
placeholder="请输入菜单名称"
:maxlength="isParent ? 4 : 7"
clearable
/>
</div>
<div v-if="isLeave" class="space-y-5">
<div class="flex items-center gap-3">
<span class="w-[100px] text-base">菜单标识：</span>
<ElInput
class="input-width"
v-model="menu.name"
placeholder="请输入菜单名称"
:maxlength="isParent ? 4 : 7"
class="w-[40%] min-w-[220px]"
v-model="menu.menuKey"
placeholder="请输入菜单 KEY"
clearable
/>
</div>
<div v-if="isLeave">
<div class="menu-content">
<span>菜单标识：</span>
<ElInput
class="input-width"
v-model="menu.menuKey"
placeholder="请输入菜单 KEY"
clearable
<div class="flex items-center gap-3">
<span class="w-[100px] text-base">菜单内容：</span>
<ElSelect
v-model="menu.type"
clearable
placeholder="请选择"
class="w-[40%] min-w-[220px]"
>
<ElOption
v-for="item in menuOptions"
:label="item.label"
:value="item.value"
:key="item.value"
/>
</div>
<div class="menu-content">
<span>菜单内容：</span>
<ElSelect
v-model="menu.type"
clearable
placeholder="请选择"
class="menu_option"
>
<ElOption
v-for="item in menuOptions"
:label="item.label"
:value="item.value"
:key="item.value"
/>
</ElSelect>
</div>
<div class="configur-content" v-if="menu.type === 'view'">
<span>跳转链接：</span>
</ElSelect>
</div>
<div
class="rounded bg-white px-3 py-5 shadow-sm"
v-if="menu.type === 'view'"
>
<div class="flex items-center gap-3">
<span class="text-base">跳转链接：</span>
<ElInput
class="input-width"
class="w-[40%] min-w-[220px]"
v-model="menu.url"
placeholder="请输入链接"
clearable
/>
</div>
<div class="configur-content" v-if="menu.type === 'miniprogram'">
<div class="applet">
<span>小程序的 appid ：</span>
<ElInput
class="input-width"
v-model="menu.miniProgramAppId"
placeholder="请输入小程序的appid"
clearable
/>
</div>
<div class="applet">
<span>小程序的页面路径：</span>
<ElInput
class="input-width"
v-model="menu.miniProgramPagePath"
placeholder="请输入小程序的页面路径，如：pages/index"
clearable
/>
</div>
<div class="applet">
<span>小程序的备用网页：</span>
<ElInput
class="input-width"
v-model="menu.url"
placeholder="不支持小程序的老版本客户端将打开本网页"
clearable
/>
</div>
<p class="blue">
tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
</p>
</div>
<div
class="space-y-5 rounded bg-white px-3 py-5 shadow-sm"
v-if="menu.type === 'miniprogram'"
>
<div class="flex items-center gap-3">
<span class="inline-block w-[25%] min-w-[120px] text-base">
小程序的 appid ：
</span>
<ElInput
class="w-[40%] min-w-[220px]"
v-model="menu.miniProgramAppId"
placeholder="请输入小程序的appid"
clearable
/>
</div>
<div
class="configur-content"
v-if="menu.type === 'article_view_limited'"
>
<ElRow>
<div class="select-item" v-if="menu && menu.replyArticles">
<WxNews :articles="menu.replyArticles" />
<ElRow class="ope-row" justify="center" align="middle">
<ElButton type="danger" circle @click="deleteMaterial">
<IconifyIcon icon="ep:delete" />
<div class="flex items-center gap-3">
<span class="inline-block w-[25%] min-w-[120px] text-base">
小程序的页面路径：
</span>
<ElInput
class="w-[40%] min-w-[220px]"
v-model="menu.miniProgramPagePath"
placeholder="请输入小程序的页面路径，如：pages/index"
clearable
/>
</div>
<div class="flex items-center gap-3">
<span class="inline-block w-[25%] min-w-[120px] text-base">
小程序的备用网页：
</span>
<ElInput
class="w-[40%] min-w-[220px]"
v-model="menu.url"
placeholder="不支持小程序的老版本客户端将打开本网页"
clearable
/>
</div>
<p class="text-sm text-[#29b6f6]">
tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
</p>
</div>
<div
class="rounded bg-white px-3 py-5 shadow-sm"
v-if="menu.type === 'article_view_limited'"
>
<ElRow>
<div
class="mx-auto mb-2.5 w-[280px] border border-[#eaeaea] p-2.5"
v-if="menu && menu.replyArticles"
>
<News :articles="menu.replyArticles" />
<ElRow class="pt-2.5 text-center" justify="center" align="middle">
<ElButton type="danger" circle @click="deleteMaterial">
<IconifyIcon icon="ep:delete" />
</ElButton>
</ElRow>
</div>
<div v-else class="w-full">
<ElRow justify="center">
<ElCol :span="24" class="text-center">
<ElButton type="success" @click="showNewsDialog = true">
素材库选择
<IconifyIcon icon="ep:circle-check" />
</ElButton>
</ElRow>
</div>
<div v-else>
<ElRow justify="center">
<ElCol :span="24" style="text-align: center">
<ElButton type="success" @click="showNewsDialog = true">
素材库选择
<IconifyIcon icon="ep:circle-check" />
</ElButton>
</ElCol>
</ElRow>
</div>
<ElDialog
title="选择图文"
v-model="showNewsDialog"
width="80%"
destroy-on-close
>
<WxMaterialSelect
type="news"
:account-id="props.accountId"
@select-material="selectMaterial"
/>
</ElDialog>
</ElRow>
</div>
<div
class="configur-content"
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
>
<WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
</div>
</ElCol>
</ElRow>
</div>
<ElDialog
title="选择图文"
v-model="showNewsDialog"
width="80%"
destroy-on-close
>
<MaterialSelect
type="news"
:account-id="props.accountId"
@select-material="selectMaterial"
/>
</ElDialog>
</ElRow>
</div>
<div
class="rounded bg-white px-3 py-5 shadow-sm"
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
>
<ReplySelect v-model="menu.reply" />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.el-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: 40%;
}
.material {
.input-width {
width: 30%;
}
.el-textarea {
width: 80%;
}
}
}
</style>

104
apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue
View File

@@ -127,17 +127,26 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
@end="onParentDragEnd"
>
<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
class="flex h-11 w-full items-center justify-center border leading-[44px]"
:class="
props.activeIndex === `${x}`
? 'border-[#2bb673]'
: 'border-transparent'
"
@click="menuClicked(parent, x)"
class="menu-item"
:class="{ active: props.activeIndex === `${x}` }"
>
<IconifyIcon icon="ep:fold" color="black" />{{ parent.name }}
</div>
<!-- 以下为二级菜单-->
<div class="submenu" v-if="props.parentIndex === x && parent.children">
<div
class="absolute bottom-[45px] w-[85.5px]"
v-if="props.parentIndex === x && parent.children"
>
<draggable
v-model="parent.children"
item-key="id"
@@ -146,11 +155,17 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
@end="onChildDragEnd"
>
<template #item="{ element: child, index: y }">
<div class="menu-bottom subtitle">
<div
class="relative float-left box-border block w-[85.5px] border border-[#ebedee] bg-white text-center"
>
<div
class="menu-sub-item"
class="box-border h-11 border leading-[44px]"
:class="
props.activeIndex === `${x}-${y}`
? 'border-[#2bb673]'
: 'border-transparent'
"
v-if="parent.children"
:class="{ active: props.activeIndex === `${x}-${y}` }"
@click="subMenuClicked(child, x, y)"
>
{{ child.name }}
@@ -160,11 +175,11 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
</draggable>
<!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号 -->
<div
class="menu-bottom menu-addicon"
class="relative float-left box-border flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center"
v-if="!parent.children || parent.children.length < 5"
@click="addSubMenu(x, parent)"
>
<IconifyIcon icon="ep:plus" class="plus" />
<IconifyIcon icon="ep:plus" class="" />
</div>
</div>
</div>
@@ -173,80 +188,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
<!-- 一级菜单加号 -->
<div
class="menu-bottom menu-addicon"
class="relative float-left box-border flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center"
v-if="menuList.length < 3"
@click="addMenu"
>
<IconifyIcon icon="ep:plus" class="plus" />
<IconifyIcon icon="ep:plus" class="" />
</div>
</template>
<style lang="scss" scoped>
.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 {
background: #f7fafc;
border: 1px solid #4299e1;
opacity: 0.5;
@apply border border-[#4299e1] bg-[#f7fafc] opacity-50;
}
</style>

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

@@ -1 +0,0 @@
export { default } from './main.vue';

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

@@ -1 +0,0 @@
export { default } from './main.vue';

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

@@ -1,3 +0,0 @@
export { default } from './main.vue';
export { MsgType } from './types';

202
apps/web-ele/src/views/mp/modules/wx-msg/main.vue
View File

@@ -1,202 +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 { ElMessage } from 'element-plus';
import { getMessagePage, sendMessage } from '#/api/mp/message';
import { getUser } from '#/api/mp/user';
import profile from '#/assets/imgs/profile.jpg';
import WxReplySelect, { ReplyType } from '#/views/mp/modules/wx-reply';
import MsgList from './modules/msg-list.vue';
defineOptions({ name: 'WxMsg' });
const props = defineProps({
userId: {
type: Number,
required: true,
},
});
const message = ElMessage; // 消息弹窗
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>
<div
class="ml-[10px] mr-[10px] h-[50vh] overflow-auto bg-[#eaeaea]"
ref="msgDivRef"
>
<!-- 加载更多 -->
<div v-loading="loading"></div>
<div v-if="!loading">
<div
class="cursor-pointer py-5 text-center"
v-if="hasMore"
@click="loadMore"
>
<span class="text-[#999]">点击加载更多</span>
</div>
<div class="py-5 text-center" v-if="!hasMore">
<span class="text-[#999]">没有更多了</span>
</div>
</div>
<!-- 消息列表 -->
<MsgList :list="list" :account-id="accountId" :user="user" />
</div>
<div class="p-[10px]" v-loading="sendLoading">
<WxReplySelect ref="replySelectRef" v-model="reply" />
<el-button type="success" class="float-right mb-2 mt-2" @click="sendMsg">
发送(S)
</el-button>
</div>
</ContentWrap>
</template>
<style lang="scss" scoped></style>

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

@@ -1 +0,0 @@
export { default } from './main.vue';

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

@@ -1 +0,0 @@
export { default } from './main.vue';

8
apps/web-ele/src/views/mp/modules/wx-reply/index.ts
View File

@@ -1,8 +0,0 @@
export { default } from './main.vue';
export {
createEmptyReply,
NewsType,
type Reply,
ReplyType,
} from './modules/types';

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

@@ -1 +0,0 @@
export { default } from './main.vue';

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

@@ -1 +0,0 @@
export { default } from './main.vue';