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

fix: ele统一风格

Browse Source
This commit is contained in:
hw
2025-11-13 18:35:10 +08:00
parent 7733d0a7f4
commit cdae277868
82 changed files with 823 additions and 1159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@ import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { getSimpleAccountList } from '#/api/mp/account';
import { ReplySelect } from '#/views/mp/modules';
import { ReplySelect } from '#/views/mp/components';
import { MsgType } from './types';

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

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/modules';
import { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/components';
// DONE @hw：迁移到 /apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
defineOptions({ name: 'ReplyContentCell' });

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

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { Reply } from '#/views/mp/modules/reply/types';
import type { Reply } from '#/views/mp/components/reply/types';
import { computed, nextTick, ref } from 'vue';
@@ -10,7 +10,7 @@ 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/modules/reply/types';
import { ReplyType } from '#/views/mp/components/reply/types';
import { useFormSchema } from '../data';
import { MsgType } from '../types';

0
apps/web-antd/src/views/mp/modules/index.ts → apps/web-antd/src/views/mp/components/index.ts
View File

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

2
apps/web-antd/src/views/mp/modules/material-select/material-select.vue → apps/web-antd/src/views/mp/components/material-select/material-select.vue
View File

@@ -12,7 +12,7 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDraftPage } from '#/api/mp/draft';
import { getFreePublishPage } from '#/api/mp/freePublish';
import { getMaterialPage } from '#/api/mp/material';
import { News, VideoPlayer, VoicePlayer } from '#/views/mp/modules/index';
import { News, VideoPlayer, VoicePlayer } from '#/views/mp/components/index';
import { NewsType } from './types';

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

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

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

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

@@ -9,7 +9,7 @@ import {
News,
VideoPlayer,
VoicePlayer,
} from '#/views/mp/modules';
} from '#/views/mp/components';
import MsgEvent from './msg-event.vue';
import { MsgType } from './types';

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

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

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

@@ -38,7 +38,7 @@ defineExpose({
:preview="false"
/>
<div
class="absolute bottom-0 left-0 inline-block w-[98%] whitespace-normal bg-black p-[1%] text-xs text-white opacity-65"
class="absolute bottom-0 left-0 inline-block w-[100%] whitespace-normal bg-black p-[1%] text-xs text-white opacity-65"
>
<span>{{ article.title }}</span>
</div>

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

@@ -29,7 +29,7 @@ defineOptions({ name: 'ReplySelect' });
const props = withDefaults(
defineProps<{
modelValue: Reply;
modelValue: Reply | undefined;
newsType?: NewsType;
}>(),
{

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

@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import { MaterialSelect } from '#/views/mp/modules';
import { MaterialSelect } from '#/views/mp/components';
const props = defineProps<{
modelValue: Reply;

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

@@ -19,7 +19,7 @@ import {
} from 'ant-design-vue';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import { MaterialSelect } from '#/views/mp/modules';
import { MaterialSelect } from '#/views/mp/components';
const props = defineProps<{
modelValue: Reply;

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

@@ -7,7 +7,7 @@ import { IconifyIcon } from '@vben/icons';
import { Button, Col, Modal, Row } from 'ant-design-vue';
import { MaterialSelect, News } from '#/views/mp/modules';
import { MaterialSelect, News } from '#/views/mp/components';
import { NewsType } from '../material-select/types';

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

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

@@ -20,7 +20,7 @@ import {
} from 'ant-design-vue';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import { MaterialSelect, VideoPlayer } from '#/views/mp/modules';
import { MaterialSelect, VideoPlayer } from '#/views/mp/components';
const props = defineProps<{
modelValue: Reply;

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

@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import { MaterialSelect, VoicePlayer } from '#/views/mp/modules';
import { MaterialSelect, VoicePlayer } from '#/views/mp/components';
const props = defineProps<{
modelValue: Reply;

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

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

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

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

@@ -17,12 +17,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 300,
slots: { default: 'content' },
},
{
field: 'updateTime',
title: '更新时间',
minWidth: 180,
formatter: 'formatDateTime', // TODO @YunaiV 接口返回数据不对，需要乘1000
},
// {
// field: 'updateTime',
// title: '更新时间',
// minWidth: 180,
// formatter: 'formatDateTime', // TODO @YunaiV 接口返回数据不对，需要乘1000
// },
{
title: '操作',
width: 200,

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

@@ -230,6 +230,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
.vxe-body--column {
.vxe-cell {
padding: 0;
height: auto !important;
img {
width: 300px !important;
}
}
}
}

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

@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import { MaterialSelect } from '#/views/mp/modules';
import { MaterialSelect } from '#/views/mp/components';
const props = defineProps<{
isFirst: boolean;

2
apps/web-antd/src/views/mp/draft/modules/draft-table.vue
View File

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

2
apps/web-antd/src/views/mp/menu/modules/editor.vue
View File

@@ -14,7 +14,7 @@ import {
Select,
} from 'ant-design-vue';
import { MaterialSelect, News, ReplySelect } from '#/views/mp/modules';
import { MaterialSelect, News, ReplySelect } from '#/views/mp/components';
import { menuOptions } from './types';

6
apps/web-ele/.env.development
View File

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

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,
},
];
}

245
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,132 +121,108 @@ 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>
<template>
<Page auto-content-height>
<DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
<template #doc>
<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';

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

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

@@ -7,18 +7,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<{
@@ -119,34 +128,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"
@@ -155,41 +167,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"
@@ -198,30 +209,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 -->
@@ -229,22 +239,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

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

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

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: {
@@ -66,5 +66,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';

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

@@ -6,7 +6,9 @@
① 代码优化，补充注释，提升阅读性
-->
<script lang="ts" setup>
defineOptions({ name: 'WxNews' });
import { ElImage } from 'element-plus';
defineOptions({ name: 'News' });
const props = withDefaults(
defineProps<{
@@ -29,7 +31,7 @@ defineExpose({
<a v-if="index === 0" :href="article.url" target="_blank">
<div class="news-main">
<div class="news-content">
<el-image
<ElImage
:src="article.picUrl || article.thumbUrl"
class="material-img"
style="width: 100%; height: 120px"
@@ -46,7 +48,7 @@ defineExpose({
<div class="news-content-item">
<div class="news-content-item-title">{{ article.title }}</div>
<div class="news-content-item-img">
<img
<ElImage
:src="article.picUrl || article.thumbUrl"
class="material-img"
height="100%"

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

@@ -0,0 +1,7 @@
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';