feat: antd菜单模块迁移

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

@@ -0,0 +1,9 @@
+/** 菜单未选中标识 */
+export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
+
+/** 菜单级别枚举 */
+export enum Level {
+  Child = '2',
+  Parent = '1',
+  Undefined = '0',
+}

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

@@ -1,29 +1,407 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { Menu, RawMenu } from './modules/types';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+
+import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { Button, Form, message } from 'ant-design-vue';
+
+import * as MpMenuApi from '#/api/mp/menu';
+import { Level, MENU_NOT_SELECTED } 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';
+
+defineOptions({ name: 'MpMenu' });
+
+// ======================== 列表查询 ========================
+const loading = ref(false); // 遮罩层
+const accountId = ref(-1);
+const accountName = ref<string>('');
+const menuList = ref<Menu[]>([]);
+
+// ======================== 菜单操作 ========================
+// 当前选中菜单编码：
+//  * 一级（'x'）
+//  * 二级（'x-y'）
+//  * 未选中（MENU_NOT_SELECTED）
+const activeIndex = ref<string>(MENU_NOT_SELECTED);
+// 二级菜单显示标志: 归属的一级菜单index
+// * 未初始化：-1
+// * 初始化：x
+const parentIndex = ref(-1);
+
+// ======================== 菜单编辑 ========================
+const showRightPanel = ref(false); // 右边配置显示默认详情还是配置详情
+const isParent = ref<boolean>(true); // 是否一级菜单，控制MenuEditor中name字段长度
+const activeMenu = ref<Menu>({}); // 选中菜单，MenuEditor的modelValue
+
+// 一些临时值放在这里进行判断，如果放在 activeMenu，由于引用关系，menu 也会多了多余的参数
+const tempSelfObj = ref<{
+  grand: Level;
+  x: number;
+  y: number;
+}>({
+  grand: Level.Undefined,
+  x: 0,
+  y: 0,
+});
+const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
+
+/** 侦听公众号变化 */
+function onAccountChanged(id: number, name: string) {
+  accountId.value = id;
+  accountName.value = name;
+  getList();
+}
+
+/** 查询并转换菜单 */
+async function getList() {
+  loading.value = true;
+  try {
+    const data = await MpMenuApi.getMenuList(accountId.value);
+    const menuData = menuListToFrontend(data);
+    menuList.value = handleTree(menuData, 'id') as Menu[];
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  resetForm();
+  getList();
+}
+
+/** 将后端返回的 menuList，转换成前端的 menuList */
+function menuListToFrontend(list: any[]) {
+  if (!list) return [];
+
+  const result: RawMenu[] = [];
+  list.forEach((item: RawMenu) => {
+    const menu: any = {
+      ...item,
+    };
+    menu.reply = {
+      type: item.replyMessageType,
+      accountId: item.accountId,
+      content: item.replyContent,
+      mediaId: item.replyMediaId,
+      url: item.replyMediaUrl,
+      title: item.replyTitle,
+      description: item.replyDescription,
+      thumbMediaId: item.replyThumbMediaId,
+      thumbMediaUrl: item.replyThumbMediaUrl,
+      articles: item.replyArticles,
+      musicUrl: item.replyMusicUrl,
+      hqMusicUrl: item.replyHqMusicUrl,
+    };
+    result.push(menu as RawMenu);
+  });
+  return result;
+}
+
+/** 重置表单，清空表单数据 */
+function resetForm() {
+  // 菜单操作
+  activeIndex.value = MENU_NOT_SELECTED;
+  parentIndex.value = -1;
+
+  // 菜单编辑
+  showRightPanel.value = false;
+  activeMenu.value = {};
+  tempSelfObj.value = { grand: Level.Undefined, x: 0, y: 0 };
+  dialogNewsVisible.value = false;
+}
+
+// ======================== 菜单操作 ========================
+/** 一级菜单点击事件 */
+function menuClicked(parent: Menu, x: number) {
+  // 右侧的表单相关
+  showRightPanel.value = true; // 右边菜单
+  activeMenu.value = parent; // 这个如果放在顶部，flag 会没有。因为重新赋值了。
+  tempSelfObj.value.grand = Level.Parent; // 表示一级菜单
+  tempSelfObj.value.x = x; // 表示一级菜单索引
+  isParent.value = true;
+
+  // 左侧的选中
+  activeIndex.value = `${x}`; // 菜单选中样式
+  parentIndex.value = x; // 二级菜单显示标志
+}
+
+/** 二级菜单点击事件 */
+function subMenuClicked(child: Menu, x: number, y: number) {
+  // 右侧的表单相关
+  showRightPanel.value = true; // 右边菜单
+  activeMenu.value = child; // 将点击的数据放到临时变量，对象有引用作用
+  tempSelfObj.value.grand = Level.Child; // 表示二级菜单
+  tempSelfObj.value.x = x; // 表示一级菜单索引
+  tempSelfObj.value.y = y; // 表示二级菜单索引
+  isParent.value = false;
+
+  // 左侧的选中
+  activeIndex.value = `${x}-${y}`;
+}
+
+/** 删除当前菜单 */
+async function onDeleteMenu() {
+  try {
+    await confirm('确定要删除吗?');
+    if (tempSelfObj.value.grand === Level.Parent) {
+      // 一级菜单的删除方法
+      menuList.value.splice(tempSelfObj.value.x, 1);
+    } else if (tempSelfObj.value.grand === Level.Child) {
+      // 二级菜单的删除方法
+      menuList.value[tempSelfObj.value.x]?.children?.splice(
+        tempSelfObj.value.y,
+        1,
+      );
+    }
+    // 提示
+    message.success('删除成功');
+
+    // 处理菜单的选中
+    activeMenu.value = {};
+    showRightPanel.value = false;
+    activeIndex.value = MENU_NOT_SELECTED;
+  } catch {
+    //
+  }
+}
+
+// ======================== 菜单编辑 ========================
+/** 保存菜单 */
+async function onSave() {
+  try {
+    await confirm('确定要保存吗?');
+    const hideLoading = message.loading({
+      content: '保存中...',
+      duration: 0,
+    });
+    try {
+      await MpMenuApi.saveMenu(accountId.value, menuListToBackend());
+      getList();
+      message.success('发布成功');
+    } finally {
+      hideLoading();
+    }
+  } catch {
+    //
+  }
+}
+
+/** 清空菜单 */
+async function onClear() {
+  try {
+    await confirm('确定要删除吗?');
+    const hideLoading = message.loading({
+      content: '删除中...',
+      duration: 0,
+    });
+    try {
+      await MpMenuApi.deleteMenu(accountId.value);
+      handleQuery();
+      message.success('清空成功');
+    } finally {
+      hideLoading();
+    }
+  } catch {
+    //
+  }
+}
+
+/** 将前端的 menuList，转换成后端接收的 menuList */
+function menuListToBackend() {
+  const result: any[] = [];
+  menuList.value.forEach((item) => {
+    const menu = menuToBackend(item);
+    result.push(menu);
+
+    // 处理子菜单
+    if (!item.children || item.children.length <= 0) {
+      return;
+    }
+    menu.children = [];
+    item.children.forEach((subItem) => {
+      menu.children.push(menuToBackend(subItem));
+    });
+  });
+  return result;
+}
+
+/** 将前端的 menu，转换成后端接收的 menu */
+// TODO: @芋艿，需要根据后台API删除不需要的字段
+function menuToBackend(menu: any) {
+  const result = {
+    ...menu,
+    children: undefined, // 不处理子节点
+    reply: undefined, // 稍后复制
+  };
+  result.replyMessageType = menu.reply.type;
+  result.replyContent = menu.reply.content;
+  result.replyMediaId = menu.reply.mediaId;
+  result.replyMediaUrl = menu.reply.url;
+  result.replyTitle = menu.reply.title;
+  result.replyDescription = menu.reply.description;
+  result.replyThumbMediaId = menu.reply.thumbMediaId;
+  result.replyThumbMediaUrl = menu.reply.thumbMediaUrl;
+  result.replyArticles = menu.reply.articles;
+  result.replyMusicUrl = menu.reply.musicUrl;
+  result.replyHqMusicUrl = menu.reply.hqMusicUrl;
+
+  return result;
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/menu/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/menu/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
+    </template>
+
+    <!-- 搜索工作栏 -->
+    <!-- <ContentWrap> -->
+    <Form layout="inline" class="-mb-15px w-240px">
+      <Form.Item label="公众号" prop="accountId" class="w-240px">
+        <WxAccountSelect @change="onAccountChanged" />
+      </Form.Item>
+    </Form>
+    <!-- </ContentWrap> -->
+
+    <ContentWrap>
+      <div class="clearfix public-account-management" v-loading="loading">
+        <!--左边配置菜单-->
+        <div class="left">
+          <div class="weixin-hd">
+            <div class="weixin-title">{{ accountName }}</div>
+          </div>
+          <div class="clearfix weixin-menu">
+            <MenuPreviewer
+              v-model="menuList"
+              :account-id="accountId"
+              :active-index="activeIndex"
+              :parent-index="parentIndex"
+              @menu-clicked="(parent, x) => menuClicked(parent, x)"
+              @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
+            />
+          </div>
+          <div class="save-div">
+            <Button
+              class="save-btn"
+              type="primary"
+              @click="onSave"
+              v-hasPermi="['mp:menu:save']"
+            >
+              保存并发布菜单
+            </Button>
+            <Button
+              class="save-btn"
+              danger
+              @click="onClear"
+              v-hasPermi="['mp:menu:delete']"
+            >
+              清空菜单
+            </Button>
+          </div>
+        </div>
+        <!--右边配置-->
+        <div class="right" v-if="showRightPanel">
+          <MenuEditor
+            :account-id="accountId"
+            :is-parent="isParent"
+            v-model="activeMenu"
+            @delete="onDeleteMenu"
+          />
+        </div>
+        <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
+        <div v-else class="right">
+          <p>请选择菜单配置</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;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+    }
+  }
+
+  /* 右边菜单内容 */
+  .right {
+    float: left;
+    box-sizing: border-box;
+    width: 63%;
+    padding: 20px;
+    margin-left: 20px;
+    background-color: #e8e7e7;
+  }
+}
+</style>

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

@@ -0,0 +1,286 @@
+<script lang="ts" setup>
+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 WxMaterialSelect from '#/views/mp/modules/wx-material-select/main.vue';
+import WxNews from '#/views/mp/modules/wx-news/main.vue';
+import WxReplySelect from '#/views/mp/modules/wx-reply/main.vue';
+
+import menuOptions from './menuOptions';
+
+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 hackResetWxReplySelect = ref(false);
+const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
+
+watch(menu, () => {
+  hackResetWxReplySelect.value = false; // 销毁组件
+  nextTick(() => {
+    hackResetWxReplySelect.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>
+    <div class="configure-page">
+      <div class="delete-btn">
+        <Button type="primary" danger @click="emit('delete')">
+          <IconifyIcon icon="ep:delete" />
+          删除当前菜单
+        </Button>
+      </div>
+      <div>
+        <span>菜单名称：</span>
+        <Input
+          class="input-width"
+          v-model:value="menu.name"
+          placeholder="请输入菜单名称"
+          :maxlength="isParent ? 4 : 7"
+          allow-clear
+        />
+      </div>
+      <div v-if="isLeave">
+        <div class="menu-content">
+          <span>菜单标识：</span>
+          <Input
+            class="input-width"
+            v-model:value="menu.menuKey"
+            placeholder="请输入菜单 KEY"
+            allow-clear
+          />
+        </div>
+        <div class="menu-content">
+          <span>菜单内容：</span>
+          <Select
+            v-model:value="menu.type"
+            placeholder="请选择"
+            class="input-width"
+            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="configur-content" v-if="menu.type === 'view'">
+          <span>跳转链接：</span>
+          <Input
+            class="input-width"
+            v-model:value="menu.url"
+            placeholder="请输入链接"
+            allow-clear
+          />
+        </div>
+        <div class="configur-content" v-if="menu.type === 'miniprogram'">
+          <div class="applet">
+            <span>小程序的 appid ：</span>
+            <Input
+              class="input-width"
+              v-model:value="menu.miniProgramAppId"
+              placeholder="请输入小程序的appid"
+              allow-clear
+            />
+          </div>
+          <div class="applet">
+            <span>小程序的页面路径：</span>
+            <Input
+              class="input-width"
+              v-model:value="menu.miniProgramPagePath"
+              placeholder="请输入小程序的页面路径，如：pages/index"
+              allow-clear
+            />
+          </div>
+          <div class="applet">
+            <span>小程序的备用网页：</span>
+            <Input
+              class="input-width"
+              v-model:value="menu.url"
+              placeholder="不支持小程序的老版本客户端将打开本网页"
+              allow-clear
+            />
+          </div>
+          <p class="blue">
+            tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
+          </p>
+        </div>
+        <div
+          class="configur-content"
+          v-if="menu.type === 'article_view_limited'"
+        >
+          <Row>
+            <div class="select-item" v-if="menu && menu.replyArticles">
+              <WxNews :articles="menu.replyArticles" />
+              <Row class="ope-row" justify="center" align="middle">
+                <Button
+                  type="primary"
+                  danger
+                  shape="circle"
+                  @click="deleteMaterial"
+                >
+                  <IconifyIcon icon="ep:delete" />
+                </Button>
+              </Row>
+            </div>
+            <div v-else>
+              <Row justify="center">
+                <Col :span="24" style="text-align: center">
+                  <Button type="primary" @click="showNewsDialog = true">
+                    素材库选择
+                    <IconifyIcon icon="ep:circle-check" />
+                  </Button>
+                </Col>
+              </Row>
+            </div>
+            <Modal
+              title="选择图文"
+              v-model:open="showNewsDialog"
+              width="80%"
+              destroy-on-close
+            >
+              <WxMaterialSelect
+                type="news"
+                :account-id="props.accountId"
+                @select-material="selectMaterial"
+              />
+            </Modal>
+          </Row>
+        </div>
+        <div
+          class="configur-content"
+          v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
+        >
+          <WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-input) {
+  // width: 70%;
+  margin-right: 2%;
+}
+
+.configure-page {
+  .delete-btn {
+    margin-bottom: 15px;
+    text-align: right;
+  }
+
+  .menu-content {
+    margin-top: 20px;
+  }
+
+  .configur-content {
+    padding: 20px 10px;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+
+    .select-item {
+      width: 280px;
+      padding: 10px;
+      margin: 0 auto 10px;
+      border: 1px solid #eaeaea;
+
+      .ope-row {
+        padding-top: 10px;
+        text-align: center;
+      }
+    }
+  }
+
+  .blue {
+    margin-top: 10px;
+    color: #29b6f6;
+  }
+
+  .applet {
+    margin-bottom: 20px;
+
+    span {
+      width: 20%;
+    }
+  }
+
+  .input-width {
+    width: 240px;
+  }
+
+  .material {
+    .input-width {
+      width: 30%;
+    }
+
+    :deep(.ant-input) {
+      width: 80%;
+    }
+  }
+}
+</style>

apps/web-antd/src/views/mp/menu/modules/menu-previewer.vue

@@ -0,0 +1,252 @@
+<script lang="ts" setup>
+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) {
+  const subMenuKeyLength = parent.children.length; // 获取二级菜单key长度
+  const addButton = {
+    name: '子菜单名称',
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
+    },
+  };
+  parent.children[subMenuKeyLength] = addButton;
+  subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength);
+}
+
+/** 一级菜单点击 */
+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="menu-bottom">
+        <!-- 一级菜单 -->
+        <div
+          @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">
+          <draggable
+            v-model="parent.children"
+            item-key="id"
+            ghost-class="draggable-ghost"
+            :animation="400"
+            @end="onChildDragEnd"
+          >
+            <template #item="{ element: child, index: y }">
+              <div class="menu-bottom subtitle">
+                <div
+                  class="menu-sub-item"
+                  v-if="parent.children"
+                  :class="{ active: props.activeIndex === `${x}-${y}` }"
+                  @click="subMenuClicked(child, x, y)"
+                >
+                  {{ child.name }}
+                </div>
+              </div>
+            </template>
+          </draggable>
+          <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
+          <div
+            class="menu-bottom menu-addicon"
+            v-if="!parent.children || parent.children.length < 5"
+            @click="addSubMenu(x, parent)"
+          >
+            <IconifyIcon icon="ep:plus" class="plus" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </draggable>
+
+  <!-- 一级菜单加号 -->
+  <div
+    class="menu-bottom menu-addicon"
+    v-if="menuList.length < 3"
+    @click="addMenu"
+  >
+    <IconifyIcon icon="ep:plus" class="plus" />
+  </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;
+}
+</style>

apps/web-antd/src/views/mp/menu/modules/menuOptions.ts

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

apps/web-antd/src/views/mp/menu/modules/types.ts

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