fix: todo修复
This commit is contained in:
hw
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
apps/web-antd/src/views/mp/menu/modules/assets/menu_foot.png
Normal file
BIN
apps/web-antd/src/views/mp/menu/modules/assets/menu_foot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
apps/web-antd/src/views/mp/menu/modules/assets/menu_head.png
Normal file
BIN
apps/web-antd/src/views/mp/menu/modules/assets/menu_head.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
240
apps/web-antd/src/views/mp/menu/modules/editor.vue
Normal file
240
apps/web-antd/src/views/mp/menu/modules/editor.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<script lang="ts" setup>
|
||||
// DONE @hw：名字可以缩写成 editor.vue，文件名
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Row,
|
||||
Select,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { MaterialSelect, News, ReplySelect } from '#/views/mp/modules';
|
||||
|
||||
import { menuOptions } from './types';
|
||||
|
||||
const props = defineProps<{
|
||||
accountId: number;
|
||||
isParent: boolean;
|
||||
modelValue: any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'delete', v: void): void;
|
||||
(e: 'update:modelValue', v: any): void;
|
||||
}>();
|
||||
|
||||
const menu = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(val) {
|
||||
emit('update:modelValue', val);
|
||||
},
|
||||
});
|
||||
const showNewsDialog = ref(false);
|
||||
const hackResetReplySelect = ref(false);
|
||||
const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
|
||||
|
||||
watch(menu, () => {
|
||||
hackResetReplySelect.value = false; // 销毁组件
|
||||
nextTick(() => {
|
||||
hackResetReplySelect.value = true; // 重建组件
|
||||
});
|
||||
});
|
||||
|
||||
// ======================== 菜单编辑（素材选择） ========================
|
||||
/** 选择素材 */
|
||||
function selectMaterial(item: any) {
|
||||
const articleId = item.articleId;
|
||||
const articles = item.content.newsItem;
|
||||
// 提示，针对多图文
|
||||
if (articles.length > 1) {
|
||||
message.warning('您选择的是多图文，将默认跳转第一篇');
|
||||
}
|
||||
showNewsDialog.value = false;
|
||||
|
||||
// 设置菜单的回复
|
||||
menu.value.articleId = articleId;
|
||||
menu.value.replyArticles = [];
|
||||
articles.forEach((article: any) => {
|
||||
menu.value.replyArticles.push({
|
||||
title: article.title,
|
||||
description: article.digest,
|
||||
picUrl: article.picUrl,
|
||||
url: article.url,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除素材 */
|
||||
function deleteMaterial() {
|
||||
delete menu.value.articleId;
|
||||
delete menu.value.replyArticles;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
|
||||
<div>
|
||||
<div class="mb-[15px] text-right">
|
||||
<Button type="primary" danger @click="emit('delete')">
|
||||
<IconifyIcon icon="lucide:trash-2" />
|
||||
删除当前菜单
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<span>菜单名称：</span>
|
||||
<Input
|
||||
class="mr-[2%] w-[240px]"
|
||||
v-model:value="menu.name"
|
||||
placeholder="请输入菜单名称"
|
||||
:maxlength="isParent ? 4 : 7"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isLeave">
|
||||
<div class="mt-5">
|
||||
<span>菜单标识：</span>
|
||||
<Input
|
||||
class="mr-[2%] w-[240px]"
|
||||
v-model:value="menu.menuKey"
|
||||
placeholder="请输入菜单 KEY"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<span>菜单内容：</span>
|
||||
<Select
|
||||
v-model:value="menu.type"
|
||||
placeholder="请选择"
|
||||
class="mr-[2%] w-[240px]"
|
||||
allow-clear
|
||||
>
|
||||
<Select.Option
|
||||
v-for="item in menuOptions"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</Select.Option>
|
||||
</Select>
|
||||
</div>
|
||||
<div
|
||||
class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
|
||||
v-if="menu.type === 'view'"
|
||||
>
|
||||
<span>跳转链接：</span>
|
||||
<Input
|
||||
class="mr-[2%] w-[240px]"
|
||||
v-model:value="menu.url"
|
||||
placeholder="请输入链接"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<!-- 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="mr-[2%] flex-1"
|
||||
v-model:value="menu.miniProgramAppId"
|
||||
placeholder="请输入小程序的appid"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-5 flex items-center">
|
||||
<div class="w-[20%]">小程序的页面路径：</div>
|
||||
<Input
|
||||
class="mr-[2%] flex-1"
|
||||
v-model:value="menu.miniProgramPagePath"
|
||||
placeholder="请输入小程序的页面路径，如：pages/index"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-5 flex items-center">
|
||||
<div class="w-[20%]">小程序的备用网页：</div>
|
||||
<Input
|
||||
class="mr-[2%] flex-1"
|
||||
v-model:value="menu.url"
|
||||
placeholder="不支持小程序的老版本客户端将打开本网页"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-[10px] text-[#29b6f6]">
|
||||
tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
|
||||
v-if="menu.type === 'article_view_limited'"
|
||||
>
|
||||
<Row>
|
||||
<div
|
||||
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
|
||||
v-if="menu && menu.replyArticles"
|
||||
>
|
||||
<News :articles="menu.replyArticles" />
|
||||
<Row
|
||||
class="pt-[10px] text-center"
|
||||
justify="center"
|
||||
align="middle"
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
shape="circle"
|
||||
@click="deleteMaterial"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" />
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Row justify="center">
|
||||
<!-- DONE @hw：html 标签里的 style 要用 tindwind 替代下； -->
|
||||
<Col :span="24" class="text-center">
|
||||
<Button type="primary" @click="showNewsDialog = true">
|
||||
素材库选择
|
||||
<IconifyIcon icon="lucide:circle-check" />
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<Modal
|
||||
title="选择图文"
|
||||
v-model:open="showNewsDialog"
|
||||
width="80%"
|
||||
destroy-on-close
|
||||
>
|
||||
<MaterialSelect
|
||||
type="news"
|
||||
:account-id="props.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</Modal>
|
||||
</Row>
|
||||
</div>
|
||||
<!-- TODO @hw：貌似这个组件出不来 -->
|
||||
<!--TODO @hw 这个组件显示逻辑是要有两个菜单才会显示，之前的代码逻辑我这边也不是很清楚，待沟通 -->
|
||||
<div
|
||||
class="configur-content mt-5"
|
||||
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
|
||||
>
|
||||
<ReplySelect v-model="menu.reply" />
|
||||
</div>
|
||||
<!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
5
apps/web-antd/src/views/mp/menu/modules/index.ts
Normal file
5
apps/web-antd/src/views/mp/menu/modules/index.ts
Normal 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';
|
||||
203
apps/web-antd/src/views/mp/menu/modules/previewer.vue
Normal file
203
apps/web-antd/src/views/mp/menu/modules/previewer.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<script lang="ts" setup>
|
||||
// DONE @hw：名字可以缩写成 previewer.vue，文件名
|
||||
import type { Menu } from './types';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import draggable from 'vuedraggable';
|
||||
|
||||
const props = defineProps<{
|
||||
accountId: number;
|
||||
activeIndex: string;
|
||||
modelValue: Menu[];
|
||||
parentIndex: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Menu[]): void;
|
||||
(e: 'menuClicked', parent: Menu, x: number): void;
|
||||
(e: 'submenuClicked', child: Menu, x: number, y: number): void;
|
||||
}>();
|
||||
|
||||
const menuList = computed<Menu[]>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
/** 添加横向一级菜单 */
|
||||
function addMenu() {
|
||||
const index = menuList.value.length;
|
||||
const menu = {
|
||||
name: '菜单名称',
|
||||
children: [],
|
||||
reply: {
|
||||
// 用于存储回复内容
|
||||
type: 'text',
|
||||
accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
|
||||
},
|
||||
};
|
||||
menuList.value[index] = menu;
|
||||
menuClicked(menu, index - 1);
|
||||
}
|
||||
|
||||
/** 添加横向二级菜单；parent 表示要操作的父菜单 */
|
||||
function addSubMenu(i: number, parent: any) {
|
||||
// DONE @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
|
||||
parent.children[parent.children.length] = {
|
||||
name: '子菜单名称',
|
||||
reply: {
|
||||
// 用于存储回复内容
|
||||
type: 'text',
|
||||
accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
|
||||
},
|
||||
};
|
||||
subMenuClicked(
|
||||
parent.children[parent.children.length - 1],
|
||||
i,
|
||||
parent.children.length - 1,
|
||||
);
|
||||
}
|
||||
|
||||
/** 一级菜单点击 */
|
||||
function menuClicked(parent: Menu, x: number) {
|
||||
emit('menuClicked', parent, x);
|
||||
}
|
||||
|
||||
/** 二级菜单点击 */
|
||||
function subMenuClicked(child: Menu, x: number, y: number) {
|
||||
emit('submenuClicked', child, x, y);
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理一级菜单展开后被拖动，激活(展开)原来活动的一级菜单
|
||||
*
|
||||
* @param options - 拖动参数对象
|
||||
* @param options.oldIndex - 一级菜单拖动前的位置
|
||||
* @param options.newIndex - 一级菜单拖动后的位置
|
||||
*/
|
||||
function onParentDragEnd({
|
||||
oldIndex,
|
||||
newIndex,
|
||||
}: {
|
||||
newIndex: number;
|
||||
oldIndex: number;
|
||||
}) {
|
||||
// 二级菜单没有展开，直接返回
|
||||
if (props.activeIndex === '__MENU_NOT_SELECTED__') {
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用一个辅助数组来模拟菜单移动，然后找到展开的二级菜单的新下标`newParent`
|
||||
const positions = Array.from({ length: menuList.value.length }).fill(false);
|
||||
positions[props.parentIndex] = true;
|
||||
const [out] = positions.splice(oldIndex, 1); // 移出菜单，保存到变量out
|
||||
positions.splice(newIndex, 0, out ?? false); // 把out变量插入被移出的菜单
|
||||
const newParentIndex = positions.indexOf(true);
|
||||
|
||||
// 找到菜单元素，触发一级菜单点击
|
||||
const parent = menuList.value[newParentIndex];
|
||||
if (parent && newParentIndex !== -1) {
|
||||
emit('menuClicked', parent, newParentIndex);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理二级菜单展开后被拖动，激活被拖动的菜单
|
||||
*
|
||||
* @param options - 拖动参数对象
|
||||
* @param options.newIndex - 二级菜单拖动后的位置
|
||||
*/
|
||||
function onChildDragEnd({ newIndex }: { newIndex: number }) {
|
||||
const x = props.parentIndex;
|
||||
const y = newIndex;
|
||||
const children = menuList.value[x]?.children;
|
||||
if (children && children?.length > 0) {
|
||||
const child = children[y];
|
||||
if (child) {
|
||||
emit('submenuClicked', child, x, y);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<draggable
|
||||
v-model="menuList"
|
||||
item-key="id"
|
||||
ghost-class="draggable-ghost"
|
||||
:animation="400"
|
||||
@end="onParentDragEnd"
|
||||
>
|
||||
<template #item="{ element: parent, index: x }">
|
||||
<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="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="absolute bottom-[45px] left-0 w-[85.5px]"
|
||||
v-if="props.parentIndex === x && parent.children"
|
||||
>
|
||||
<draggable
|
||||
v-model="parent.children"
|
||||
item-key="id"
|
||||
ghost-class="draggable-ghost"
|
||||
:animation="400"
|
||||
@end="onChildDragEnd"
|
||||
>
|
||||
<template #item="{ element: child, index: y }">
|
||||
<div
|
||||
class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
|
||||
>
|
||||
<div
|
||||
class="box-border h-[44px] text-center leading-[44px]"
|
||||
:class="{
|
||||
'border border-[#2bb673]':
|
||||
props.activeIndex === `${x}-${y}`,
|
||||
}"
|
||||
@click="subMenuClicked(child, x, y)"
|
||||
>
|
||||
{{ child.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<div
|
||||
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="text-[#2bb673]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<!-- 一级菜单加号 -->
|
||||
<div
|
||||
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="text-[#2bb673]" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.draggable-ghost {
|
||||
background: #f7fafc;
|
||||
border: 1px solid #4299e1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
117
apps/web-antd/src/views/mp/menu/modules/types.ts
Normal file
117
apps/web-antd/src/views/mp/menu/modules/types.ts
Normal file
@@ -0,0 +1,117 @@
|
||||
export interface Replay {
|
||||
title: string;
|
||||
description: string;
|
||||
picUrl: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export type MenuType =
|
||||
| ''
|
||||
| 'article_view_limited'
|
||||
| 'click'
|
||||
| 'location_select'
|
||||
| 'pic_photo_or_album'
|
||||
| 'pic_sysphoto'
|
||||
| 'pic_weixin'
|
||||
| 'scancode_push'
|
||||
| 'scancode_waitmsg'
|
||||
| 'view';
|
||||
|
||||
interface _RawMenu {
|
||||
// db
|
||||
id: number;
|
||||
parentId: number;
|
||||
accountId: number;
|
||||
appId: string;
|
||||
createTime: number;
|
||||
|
||||
// mp-native
|
||||
name: string;
|
||||
menuKey: string;
|
||||
type: MenuType;
|
||||
url: string;
|
||||
miniProgramAppId: string;
|
||||
miniProgramPagePath: string;
|
||||
articleId: string;
|
||||
replyMessageType: string;
|
||||
replyContent: string;
|
||||
replyMediaId: string;
|
||||
replyMediaUrl: string;
|
||||
replyThumbMediaId: string;
|
||||
replyThumbMediaUrl: string;
|
||||
replyTitle: string;
|
||||
replyDescription: string;
|
||||
replyArticles: Replay;
|
||||
replyMusicUrl: string;
|
||||
replyHqMusicUrl: string;
|
||||
}
|
||||
|
||||
export type RawMenu = Partial<_RawMenu>;
|
||||
|
||||
interface _Reply {
|
||||
type: string;
|
||||
accountId: number;
|
||||
content: string;
|
||||
mediaId: string;
|
||||
url: string;
|
||||
thumbMediaId: string;
|
||||
thumbMediaUrl: string;
|
||||
title: string;
|
||||
description: string;
|
||||
articles: null | Replay[];
|
||||
musicUrl: string;
|
||||
hqMusicUrl: string;
|
||||
}
|
||||
|
||||
export type Reply = Partial<_Reply>;
|
||||
|
||||
interface _Menu extends RawMenu {
|
||||
children: _Menu[];
|
||||
reply: Reply;
|
||||
}
|
||||
|
||||
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;
|
||||
Reference in New Issue
Block a user