diff --git a/src/views/mp/menu/assets/demo.png b/src/views/mp/menu/assets/demo.png
new file mode 100644
index 00000000..49c9a020
Binary files /dev/null and b/src/views/mp/menu/assets/demo.png differ
diff --git a/src/views/mp/menu/assets/iphone_backImg.png b/src/views/mp/menu/assets/iphone_backImg.png
new file mode 100644
index 00000000..bb09591a
Binary files /dev/null and b/src/views/mp/menu/assets/iphone_backImg.png differ
diff --git a/src/views/mp/menu/assets/logo.png b/src/views/mp/menu/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/src/views/mp/menu/assets/logo.png differ
diff --git a/src/views/mp/menu/assets/menu_foot.png b/src/views/mp/menu/assets/menu_foot.png
new file mode 100644
index 00000000..4a89d4bd
Binary files /dev/null and b/src/views/mp/menu/assets/menu_foot.png differ
diff --git a/src/views/mp/menu/assets/menu_head.png b/src/views/mp/menu/assets/menu_head.png
new file mode 100644
index 00000000..248cfb76
Binary files /dev/null and b/src/views/mp/menu/assets/menu_head.png differ
diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
new file mode 100644
index 00000000..652c6a92
--- /dev/null
+++ b/src/views/mp/menu/index.vue
@@ -0,0 +1,847 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="公众号" prop="accountId">
+        <el-select v-model="accountId" placeholder="请选择公众号">
+          <el-option
+            v-for="item in accounts"
+            :key="parseInt(item.id)"
+            :label="item.name"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :icon="ElIconSearch" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button :icon="ElIconRefresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <div class="public-account-management clearfix" v-loading="loading">
+      <!--左边配置菜单-->
+      <div class="left">
+        <div class="weixin-hd">
+          <div class="weixin-title">{{ name }}</div>
+        </div>
+        <div class="weixin-menu menu_main clearfix">
+          <div class="menu_bottom" v-for="(item, i) of menuList" :key="i">
+            <!-- 一级菜单 -->
+            <div
+              @click="menuClick(i, item)"
+              class="menu_item el-icon-s-fold"
+              :class="{ active: isActive === i }"
+            >
+              {{ item.name }}
+            </div>
+            <!-- 以下为二级菜单-->
+            <div class="submenu" v-if="isSubMenuFlag === i">
+              <template v-for="(subItem, k) in item.children">
+                <div v-if="item.children" class="subtitle menu_bottom">
+                  <div
+                    class="menu_subItem"
+                    :class="{ active: isSubMenuActive === i + '' + k }"
+                    @click="subMenuClick(subItem, i, k)"
+                  >
+                    {{ subItem.name }}
+                  </div>
+                </div>
+              </template>
+              <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
+              <div
+                class="menu_bottom menu_addicon"
+                v-if="!item.children || item.children.length < 5"
+                @click="addSubMenu(i, item)"
+              >
+                <el-icon><el-icon-plus /></el-icon>
+              </div>
+            </div>
+          </div>
+          <!-- 一级菜单加号 -->
+          <div
+            class="menu_bottom menu_addicon"
+            v-if="this.menuList.length < 3"
+            @click="addMenu"
+          >
+            <el-icon><el-icon-plus /></el-icon>
+          </div>
+        </div>
+        <div class="save_div">
+          <el-button
+            class="save_btn"
+            type="success"
+            size="small"
+            @click="handleSave"
+            v-hasPermi="['mp:menu:save']"
+            >保存并发布菜单</el-button
+          >
+          <el-button
+            class="save_btn"
+            type="danger"
+            size="small"
+            @click="handleDelete"
+            v-hasPermi="['mp:menu:delete']"
+            >清空菜单</el-button
+          >
+        </div>
+      </div>
+      <!--右边配置-->
+      <div v-if="showRightFlag" class="right">
+        <div class="configure_page">
+          <div class="delete_btn">
+            <el-button
+              size="mini"
+              type="danger"
+              :icon="ElIconDelete"
+              @click="deleteMenu(tempObj)"
+              >删除当前菜单</el-button
+            >
+          </div>
+          <div>
+            <span>菜单名称：</span>
+            <el-input
+              class="input_width"
+              v-model="tempObj.name"
+              placeholder="请输入菜单名称"
+              :maxlength="nameMaxLength"
+              clearable
+            />
+          </div>
+          <div v-if="showConfigureContent">
+            <div class="menu_content">
+              <span>菜单标识：</span>
+              <el-input
+                class="input_width"
+                v-model="tempObj.menuKey"
+                placeholder="请输入菜单 KEY"
+                clearable
+              />
+            </div>
+            <div class="menu_content">
+              <span>菜单内容：</span>
+              <el-select
+                v-model="tempObj.type"
+                clearable
+                placeholder="请选择"
+                class="menu_option"
+              >
+                <el-option
+                  v-for="item in menuOptions"
+                  :label="item.label"
+                  :value="item.value"
+                  :key="item.value"
+                />
+              </el-select>
+            </div>
+            <div class="configur_content" v-if="tempObj.type === 'view'">
+              <span>跳转链接：</span>
+              <el-input
+                class="input_width"
+                v-model="tempObj.url"
+                placeholder="请输入链接"
+                clearable
+              />
+            </div>
+            <div class="configur_content" v-if="tempObj.type === 'miniprogram'">
+              <div class="applet">
+                <span>小程序的 appid ：</span>
+                <el-input
+                  class="input_width"
+                  v-model="tempObj.miniProgramAppId"
+                  placeholder="请输入小程序的appid"
+                  clearable
+                />
+              </div>
+              <div class="applet">
+                <span>小程序的页面路径：</span>
+                <el-input
+                  class="input_width"
+                  v-model="tempObj.miniProgramPagePath"
+                  placeholder="请输入小程序的页面路径，如：pages/index"
+                  clearable
+                />
+              </div>
+              <div class="applet">
+                <span>小程序的备用网页：</span>
+                <el-input
+                  class="input_width"
+                  v-model="tempObj.url"
+                  placeholder="不支持小程序的老版本客户端将打开本网页"
+                  clearable
+                />
+              </div>
+              <p class="blue">
+                tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
+              </p>
+            </div>
+            <div
+              class="configur_content"
+              v-if="tempObj.type === 'article_view_limited'"
+            >
+              <el-row>
+                <div
+                  class="select-item"
+                  v-if="tempObj && tempObj.replyArticles"
+                >
+                  <wx-news :articles="tempObj.replyArticles" />
+                  <el-row class="ope-row">
+                    <el-button
+                      type="danger"
+                      :icon="ElIconDelete"
+                      circle
+                      @click="deleteMaterial"
+                    />
+                  </el-row>
+                </div>
+                <div v-else>
+                  <el-row>
+                    <el-col :span="24" style="text-align: center">
+                      <el-button type="success" @click="openMaterial">
+                        素材库选择<el-icon class="el-icon--right"
+                          ><el-icon-circle-check
+                        /></el-icon>
+                      </el-button>
+                    </el-col>
+                  </el-row>
+                </div>
+                <el-dialog
+                  title="选择图文"
+                  v-model="dialogNewsVisible"
+                  width="90%"
+                >
+                  <wx-material-select
+                    :objData="{ type: 'news', accountId: this.accountId }"
+                    @selectMaterial="selectMaterial"
+                  />
+                </el-dialog>
+              </el-row>
+            </div>
+            <div
+              class="configur_content"
+              v-if="
+                tempObj.type === 'click' || tempObj.type === 'scancode_waitmsg'
+              "
+            >
+              <wx-reply-select
+                :objData="tempObj.reply"
+                v-if="hackResetWxReplySelect"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
+      <div v-else class="right">
+        <p>请选择菜单配置</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import WxReplySelect from '/@/views/mp/components/wx-reply/main.vue'
+import WxNews from '/@/views/mp/components/wx-news/main.vue'
+// import WxMaterialSelect from '/@/views/mp/components/wx-material-select/main.vue'
+import { deleteMenu, getMenuList, saveObj } from '/@/api/mp/wx-menu'
+import { getSimpleAccounts } from '/@/api/mp/wx-account'
+
+export default {
+  data() {
+    return {
+      // ======================== 列表查询 ========================
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 查询参数
+      accountId: undefined,
+      // 公众号名
+      name: '',
+      menuList: {
+        children: [],
+      },
+      // ======================== 菜单操作 ========================
+      // 一级菜单点中样式
+      isActive: -1,
+      // 一级菜单点中样式
+      isSubMenuActive: -1,
+      // 二级菜单显示标志
+      isSubMenuFlag: -1,
+      // ======================== 菜单编辑 ========================
+      // 右边配置显示默认详情还是配置详情
+      showRightFlag: false,
+      // 菜单名称最大长度；1 级是 4 字符；2 级是 7 字符；
+      nameMaxLength: 0,
+      // 是否展示配置内容；如果有子菜单，就不显示配置内容
+      showConfigureContent: true,
+      // 重置 WxReplySelect 组件
+      hackResetWxReplySelect: false,
+      // 右边临时变量，作为中间值牵引关系
+      tempObj: {},
+      tempSelfObj: {
+        // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
+      },
+      // 跳转图文时的素材选择弹窗
+      dialogNewsVisible: false,
+      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: '选择地理位置',
+        },
+      ],
+      // 公众号账号列表
+      accounts: [],
+      ElIconSearch,
+      ElIconRefresh,
+      ElIconDelete,
+    }
+  },
+  components: {
+    WxReplySelect,
+    WxNews,
+    WxMaterialSelect,
+    ElIconPlus,
+    ElIconCircleCheck,
+  },
+  name: 'MpMenu',
+  created() {
+    getSimpleAccounts().then((response) => {
+      this.accounts = response.data
+      // 默认选中第一个
+      if (this.accounts.length > 0) {
+        this.setAccountId(this.accounts[0].id)
+      }
+      // 加载数据
+      this.getList()
+    })
+  },
+  methods: {
+    // ======================== 列表查询 ========================
+    /** 设置账号编号 */
+    setAccountId(accountId) {
+      this.accountId = accountId
+      this.name = this.accounts.find((item) => item.id === accountId)?.name
+    },
+    getList() {
+      this.loading = false
+      getMenuList(this.accountId)
+        .then((response) => {
+          response.data = this.convertMenuList(response.data)
+          this.menuList = this.handleTree(response.data, 'id')
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.resetForm()
+      // 默认选中第一个
+      if (this.accountId) {
+        this.setAccountId(this.accountId)
+      }
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm()
+      // 默认选中第一个
+      if (this.accounts.length > 0) {
+        this.setAccountId(this.accounts[0].id)
+      }
+      this.handleQuery()
+    },
+    // 将后端返回的 menuList，转换成前端的 menuList
+    convertMenuList(list) {
+      const menuList = []
+      list.forEach((item) => {
+        const menu = {
+          ...item,
+        }
+        if (item.type === 'click' || item.type === 'scancode_waitmsg') {
+          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,
+          }
+        }
+        menuList.push(menu)
+      })
+      return menuList
+    },
+    // 重置表单，清空表单数据
+    resetForm() {
+      // 菜单操作
+      this.isActive = -1
+      this.isSubMenuActive = -1
+      this.isSubMenuFlag = -1
+
+      // 菜单编辑
+      this.showRightFlag = false
+      this.nameMaxLength = 0
+      this.showConfigureContent = 0
+      this.hackResetWxReplySelect = true
+      this.hackResetWxReplySelect = false
+      this.tempObj = {}
+      this.tempSelfObj = {}
+      this.dialogNewsVisible = false
+    },
+
+    // ======================== 菜单操作 ========================
+    // 一级菜单点击事件
+    menuClick(i, item) {
+      // 右侧的表单相关
+      this.resetEditor()
+      this.showRightFlag = true // 右边菜单
+      this.tempObj = item // 这个如果放在顶部，flag 会没有。因为重新赋值了。
+      this.tempSelfObj.grand = '1' // 表示一级菜单
+      this.tempSelfObj.index = i // 表示一级菜单索引
+      this.nameMaxLength = 4
+      this.showConfigureContent = !(item.children && item.children.length > 0) // 有子菜单，就不显示配置内容
+
+      // 左侧的选中
+      this.isActive = i // 一级菜单选中样式
+      this.isSubMenuFlag = i // 二级菜单显示标志
+      this.isSubMenuActive = -1 // 二级菜单去除选中样式
+    },
+    // 二级菜单点击事件
+    subMenuClick(subItem, index, k) {
+      // 右侧的表单相关
+      this.resetEditor()
+      this.showRightFlag = true // 右边菜单
+      this.tempObj = subItem // 将点击的数据放到临时变量，对象有引用作用
+      this.tempSelfObj.grand = '2' // 表示二级菜单
+      this.tempSelfObj.index = index // 表示一级菜单索引
+      this.tempSelfObj.secondIndex = k // 表示二级菜单索引
+      this.nameMaxLength = 7
+      this.showConfigureContent = true
+
+      // 左侧的选中
+      this.isActive = -1 // 一级菜单去除样式
+      this.isSubMenuActive = index + '' + k // 二级菜单选中样式
+    },
+    // 添加横向一级菜单
+    addMenu() {
+      const menuKeyLength = this.menuList.length
+      const addButton = {
+        name: '菜单名称',
+        children: [],
+        reply: {
+          // 用于存储回复内容
+          type: 'text',
+          accountId: this.accountId, // 保证组件里，可以使用到对应的公众号
+        },
+      }
+      this.menuList[menuKeyLength] = addButton
+      this.menuClick(this.menuKeyLength - 1, addButton)
+    },
+    // 添加横向二级菜单；item 表示要操作的父菜单
+    addSubMenu(i, item) {
+      // 清空父菜单的属性，因为它只需要 name 属性即可
+      if (!item.children || item.children.length <= 0) {
+        item['children'] = []
+        // 关闭配置面板
+        this.showConfigureContent = false
+      }
+
+      let subMenuKeyLength = item.children.length // 获取二级菜单key长度
+      let addButton = {
+        name: '子菜单名称',
+        reply: {
+          // 用于存储回复内容
+          type: 'text',
+          accountId: this.accountId, // 保证组件里，可以使用到对应的公众号
+        },
+      }
+      item.children[subMenuKeyLength] = addButton
+      this.subMenuClick(item.children[subMenuKeyLength], i, subMenuKeyLength)
+    },
+    // 删除当前菜单
+    deleteMenu(item) {
+      this.$modal
+        .confirm('确定要删除吗?')
+        .then(() => {
+          // 删除数据
+          if (this.tempSelfObj.grand === '1') {
+            // 一级菜单的删除方法
+            this.menuList.splice(this.tempSelfObj.index, 1)
+          } else if (this.tempSelfObj.grand === '2') {
+            // 二级菜单的删除方法
+            this.menuList[this.tempSelfObj.index].children.splice(
+              this.tempSelfObj.secondIndex,
+              1
+            )
+          }
+          // 提示
+          this.$modal.msgSuccess('删除成功')
+
+          // 处理菜单的选中
+          this.tempObj = {}
+          this.showRightFlag = false
+          this.isActive = -1
+          this.isSubMenuActive = -1
+        })
+        .catch(() => {})
+    },
+
+    // ======================== 菜单编辑 ========================
+    handleSave() {
+      this.$modal
+        .confirm('确定要保证并发布该菜单吗？')
+        .then(() => {
+          this.loading = true
+          return saveObj(this.accountId, this.convertMenuFormList())
+        })
+        .then(() => {
+          this.getList()
+          this.$modal.msgSuccess('发布成功')
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    // 表单 Editor 重置
+    resetEditor() {
+      this.hackResetWxReplySelect = false // 销毁组件
+      this.$nextTick(() => {
+        this.hackResetWxReplySelect = true // 重建组件
+      })
+    },
+    handleDelete() {
+      this.$modal
+        .confirm('确定要清空所有菜单吗？')
+        .then(() => {
+          this.loading = true
+          return deleteMenu(this.accountId)
+        })
+        .then(() => {
+          this.handleQuery()
+          this.$modal.msgSuccess('清空成功')
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    // 将前端的 menuList，转换成后端接收的 menuList
+    convertMenuFormList() {
+      const menuList = []
+      this.menuList.forEach((item) => {
+        let menu = this.convertMenuForm(item)
+        menuList.push(menu)
+        // 处理子菜单
+        if (!item.children || item.children.length <= 0) {
+          return
+        }
+        menu.children = []
+        item.children.forEach((subItem) => {
+          menu.children.push(this.convertMenuForm(subItem))
+        })
+      })
+      return menuList
+    },
+    // 将前端的 menu，转换成后端接收的 menu
+    convertMenuForm(menu) {
+      let result = {
+        ...menu,
+        children: undefined, // 不处理子节点
+        reply: undefined, // 稍后复制
+      }
+      if (menu.type === 'click' || menu.type === 'scancode_waitmsg') {
+        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
+    },
+    // ======================== 菜单编辑（素材选择） ========================
+    openMaterial() {
+      this.dialogNewsVisible = true
+    },
+    selectMaterial(item) {
+      const articleId = item.articleId
+      const articles = item.content.newsItem
+      // 提示，针对多图文
+      if (articles.length > 1) {
+        this.$alert('您选择的是多图文，将默认跳转第一篇', '提示', {
+          confirmButtonText: '确定',
+        })
+      }
+      this.dialogNewsVisible = false
+
+      // 设置菜单的回复
+      this.tempObj.articleId = articleId
+      this.tempObj.replyArticles = []
+      articles.forEach((article) => {
+        this.tempObj.replyArticles.push({
+          title: article.title,
+          description: article.digest,
+          picUrl: article.picUrl,
+          url: article.url,
+        })
+      })
+    },
+    deleteMaterial() {
+      delete this.tempObj
+      delete this.tempObj
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped="scoped">
+.clearfix {
+  *zoom: 1;
+}
+.clearfix::after {
+  content: '';
+  display: table;
+  clear: both;
+}
+div {
+  text-align: left;
+}
+.weixin-hd {
+  color: #fff;
+  text-align: center;
+  position: relative;
+  bottom: 426px;
+  left: 0px;
+  width: 300px;
+  height: 64px;
+  background: transparent url('assets/menu_head.png') no-repeat 0 0;
+  background-position: 0 0;
+  background-size: 100%;
+}
+.weixin-title {
+  color: #fff;
+  font-size: 14px;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: 33px;
+  left: 0px;
+}
+.weixin-menu {
+  background: transparent url('assets/menu_foot.png') no-repeat 0 0;
+  padding-left: 43px;
+  font-size: 12px;
+}
+.menu_option {
+  width: 40% !important;
+}
+.public-account-management {
+  min-width: 1200px;
+  width: 1200px;
+  margin: 0 auto;
+  .left {
+    float: left;
+    display: inline-block;
+    width: 350px;
+    height: 715px;
+    background: url('assets/iphone_backImg.png') no-repeat;
+    background-size: 100% auto;
+    padding: 518px 25px 88px;
+    position: relative;
+    box-sizing: border-box;
+    /*第一级菜单*/
+    .menu_main {
+      .menu_bottom {
+        position: relative;
+        float: left;
+        display: inline-block;
+        box-sizing: border-box;
+        width: 85.5px;
+        text-align: center;
+        border: 1px solid #ebedee;
+        background-color: #fff;
+        cursor: pointer;
+        &.menu_addicon {
+          height: 46px;
+          line-height: 46px;
+        }
+        .menu_item {
+          height: 44px;
+          line-height: 44px;
+          text-align: center;
+          box-sizing: border-box;
+          width: 100%;
+          &.active {
+            border: 1px solid #2bb673;
+          }
+        }
+        .menu_subItem {
+          height: 44px;
+          line-height: 44px;
+          text-align: center;
+          box-sizing: border-box;
+          &.active {
+            border: 1px solid #2bb673;
+          }
+        }
+      }
+      i {
+        color: #2bb673;
+      }
+      /*第二级菜单*/
+      .submenu {
+        position: absolute;
+        width: 85.5px;
+        bottom: 45px;
+        .subtitle {
+          background-color: #fff;
+          box-sizing: border-box;
+        }
+      }
+    }
+    .save_div {
+      margin-top: 15px;
+      text-align: center;
+      .save_btn {
+        bottom: 20px;
+        left: 100px;
+      }
+    }
+  }
+  /*右边菜单内容*/
+  .right {
+    float: left;
+    width: 63%;
+    background-color: #e8e7e7;
+    padding: 20px;
+    margin-left: 20px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    .configure_page {
+      .delete_btn {
+        text-align: right;
+        margin-bottom: 15px;
+      }
+      .menu_content {
+        margin-top: 20px;
+      }
+      .configur_content {
+        margin-top: 20px;
+        background-color: #fff;
+        padding: 20px 10px;
+        border-radius: 5px;
+      }
+      .blue {
+        color: #29b6f6;
+        margin-top: 10px;
+      }
+      .applet {
+        margin-bottom: 20px;
+        span {
+          width: 20%;
+        }
+      }
+      .input_width {
+        width: 40%;
+      }
+      .material {
+        .input_width {
+          width: 30%;
+        }
+        .el-textarea {
+          width: 80%;
+        }
+      }
+    }
+  }
+  .el-input {
+    width: 70%;
+    margin-right: 2%;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.pagination {
+  text-align: right;
+  margin-right: 25px;
+}
+.select-item {
+  width: 280px;
+  padding: 10px;
+  margin: 0 auto 10px auto;
+  border: 1px solid #eaeaea;
+}
+.select-item2 {
+  padding: 10px;
+  margin: 0 auto 10px auto;
+  border: 1px solid #eaeaea;
+}
+.ope-row {
+  padding-top: 10px;
+  text-align: center;
+}
+.item-name {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+</style>
diff --git a/src/views/mp/wx-menu/index.vue b/src/views/mp/wx-menu/index.vue
index 652c6a92..724d6ffe 100644
--- a/src/views/mp/wx-menu/index.vue
+++ b/src/views/mp/wx-menu/index.vue
@@ -1,667 +1,263 @@
 <template>
-  <div class="app-container">
-    <!-- 搜索工作栏 -->
-    <el-form
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="68px"
-    >
-      <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="accountId" placeholder="请选择公众号">
-          <el-option
-            v-for="item in accounts"
-            :key="parseInt(item.id)"
-            :label="item.name"
-            :value="parseInt(item.id)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="ElIconSearch" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="ElIconRefresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <div class="public-account-management clearfix" v-loading="loading">
-      <!--左边配置菜单-->
-      <div class="left">
-        <div class="weixin-hd">
-          <div class="weixin-title">{{ name }}</div>
-        </div>
-        <div class="weixin-menu menu_main clearfix">
-          <div class="menu_bottom" v-for="(item, i) of menuList" :key="i">
-            <!-- 一级菜单 -->
-            <div
-              @click="menuClick(i, item)"
-              class="menu_item el-icon-s-fold"
-              :class="{ active: isActive === i }"
-            >
-              {{ item.name }}
-            </div>
-            <!-- 以下为二级菜单-->
-            <div class="submenu" v-if="isSubMenuFlag === i">
-              <template v-for="(subItem, k) in item.children">
-                <div v-if="item.children" class="subtitle menu_bottom">
-                  <div
-                    class="menu_subItem"
-                    :class="{ active: isSubMenuActive === i + '' + k }"
-                    @click="subMenuClick(subItem, i, k)"
-                  >
-                    {{ subItem.name }}
+  <div class="layout-padding">
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <el-card class="layout-padding-auto" shadow="hover">
+          <query-tree :query="deptData.queryList"
+                      @node-click="handleNodeClick"/>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card class="layout-padding-auto" shadow="hover">
+          <div v-loading="loading" class="public-account-management clearfix">
+            <div class="left">
+              <div class="weixin-hd">
+                <div class="weixin-title">{{ name }}</div>
+              </div>
+              <div class="weixin-menu menu_main clearfix">
+                <div v-for="(item, i) of menuList" :key="i" class="menu_bottom">
+                  <div :class="{ active: isActive === i }" class="menu_item el-icon-s-fold" @click="menuClick(i, item)">
+                    {{ item.name }}
+                  </div>
+                  <!-- 以下为二级菜单-->
+                  <div v-if="isSubMenuFlag === i" class="submenu">
+                    <template v-for="(subItem, k) in item.children">
+                      <div v-if="item.children" :key="k" class="subtitle menu_bottom">
+                        <div :class="{ active: isSubMenuActive === i + '' + k }" class="menu_subItem"
+                             @click="subMenuClick(subItem, i, k)">
+                          {{ subItem.name }}
+                        </div>
+                      </div>
+                    </template>
+                    <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
+                    <div v-if="!item.children || item.children.length < 5" class="menu_bottom menu_addicon"
+                         @click="addSubMenu(i, item)">
+                      <el-icon>
+                        <el-icon-plus/>
+                      </el-icon>
+                    </div>
                   </div>
                 </div>
-              </template>
-              <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
-              <div
-                class="menu_bottom menu_addicon"
-                v-if="!item.children || item.children.length < 5"
-                @click="addSubMenu(i, item)"
-              >
-                <el-icon><el-icon-plus /></el-icon>
-              </div>
-            </div>
-          </div>
-          <!-- 一级菜单加号 -->
-          <div
-            class="menu_bottom menu_addicon"
-            v-if="this.menuList.length < 3"
-            @click="addMenu"
-          >
-            <el-icon><el-icon-plus /></el-icon>
-          </div>
-        </div>
-        <div class="save_div">
-          <el-button
-            class="save_btn"
-            type="success"
-            size="small"
-            @click="handleSave"
-            v-hasPermi="['mp:menu:save']"
-            >保存并发布菜单</el-button
-          >
-          <el-button
-            class="save_btn"
-            type="danger"
-            size="small"
-            @click="handleDelete"
-            v-hasPermi="['mp:menu:delete']"
-            >清空菜单</el-button
-          >
-        </div>
-      </div>
-      <!--右边配置-->
-      <div v-if="showRightFlag" class="right">
-        <div class="configure_page">
-          <div class="delete_btn">
-            <el-button
-              size="mini"
-              type="danger"
-              :icon="ElIconDelete"
-              @click="deleteMenu(tempObj)"
-              >删除当前菜单</el-button
-            >
-          </div>
-          <div>
-            <span>菜单名称：</span>
-            <el-input
-              class="input_width"
-              v-model="tempObj.name"
-              placeholder="请输入菜单名称"
-              :maxlength="nameMaxLength"
-              clearable
-            />
-          </div>
-          <div v-if="showConfigureContent">
-            <div class="menu_content">
-              <span>菜单标识：</span>
-              <el-input
-                class="input_width"
-                v-model="tempObj.menuKey"
-                placeholder="请输入菜单 KEY"
-                clearable
-              />
-            </div>
-            <div class="menu_content">
-              <span>菜单内容：</span>
-              <el-select
-                v-model="tempObj.type"
-                clearable
-                placeholder="请选择"
-                class="menu_option"
-              >
-                <el-option
-                  v-for="item in menuOptions"
-                  :label="item.label"
-                  :value="item.value"
-                  :key="item.value"
-                />
-              </el-select>
-            </div>
-            <div class="configur_content" v-if="tempObj.type === 'view'">
-              <span>跳转链接：</span>
-              <el-input
-                class="input_width"
-                v-model="tempObj.url"
-                placeholder="请输入链接"
-                clearable
-              />
-            </div>
-            <div class="configur_content" v-if="tempObj.type === 'miniprogram'">
-              <div class="applet">
-                <span>小程序的 appid ：</span>
-                <el-input
-                  class="input_width"
-                  v-model="tempObj.miniProgramAppId"
-                  placeholder="请输入小程序的appid"
-                  clearable
-                />
-              </div>
-              <div class="applet">
-                <span>小程序的页面路径：</span>
-                <el-input
-                  class="input_width"
-                  v-model="tempObj.miniProgramPagePath"
-                  placeholder="请输入小程序的页面路径，如：pages/index"
-                  clearable
-                />
-              </div>
-              <div class="applet">
-                <span>小程序的备用网页：</span>
-                <el-input
-                  class="input_width"
-                  v-model="tempObj.url"
-                  placeholder="不支持小程序的老版本客户端将打开本网页"
-                  clearable
-                />
-              </div>
-              <p class="blue">
-                tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
-              </p>
-            </div>
-            <div
-              class="configur_content"
-              v-if="tempObj.type === 'article_view_limited'"
-            >
-              <el-row>
-                <div
-                  class="select-item"
-                  v-if="tempObj && tempObj.replyArticles"
-                >
-                  <wx-news :articles="tempObj.replyArticles" />
-                  <el-row class="ope-row">
-                    <el-button
-                      type="danger"
-                      :icon="ElIconDelete"
-                      circle
-                      @click="deleteMaterial"
-                    />
-                  </el-row>
+                <!-- 一级菜单加号 -->
+                <div v-if="menuList.length < 3" class="menu_bottom menu_addicon" @click="addMenu">
+                  <el-icon>
+                    <el-icon-plus/>
+                  </el-icon>
                 </div>
-                <div v-else>
-                  <el-row>
-                    <el-col :span="24" style="text-align: center">
-                      <el-button type="success" @click="openMaterial">
-                        素材库选择<el-icon class="el-icon--right"
-                          ><el-icon-circle-check
-                        /></el-icon>
-                      </el-button>
-                    </el-col>
-                  </el-row>
-                </div>
-                <el-dialog
-                  title="选择图文"
-                  v-model="dialogNewsVisible"
-                  width="90%"
-                >
-                  <wx-material-select
-                    :objData="{ type: 'news', accountId: this.accountId }"
-                    @selectMaterial="selectMaterial"
-                  />
-                </el-dialog>
-              </el-row>
+              </div>
             </div>
-            <div
-              class="configur_content"
-              v-if="
-                tempObj.type === 'click' || tempObj.type === 'scancode_waitmsg'
-              "
-            >
-              <wx-reply-select
-                :objData="tempObj.reply"
-                v-if="hackResetWxReplySelect"
-              />
+
+            <div v-if="showRightFlag" class="right">
+              <div class="configure_page">
+                <div class="delete_btn">
+                  <el-button icon="Delete" size="mini" type="danger" @click="deleteMenu(tempObj)">删除当前菜单
+                  </el-button>
+                </div>
+                <div>
+                  <span>菜单名称：</span>
+                  <el-input v-model="tempObj.name" class="input_width" clearable placeholder="请输入菜单名称"/>
+                </div>
+                <div v-if="showConfigureContent">
+                  <div class="menu_content">
+                    <span>菜单标识：</span>
+                    <el-input v-model="tempObj.menuKey" class="input_width" clearable placeholder="请输入菜单 KEY"/>
+                  </div>
+                  <div class="menu_content">
+                    <span>菜单内容：</span>
+                    <el-select v-model="tempObj.type" class="menu_option" clearable placeholder="请选择">
+                      <el-option v-for="item in menuOptions" :key="item.value" :label="item.label" :value="item.value"/>
+                    </el-select>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
-      <div v-else class="right">
-        <p>请选择菜单配置</p>
-      </div>
-    </div>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
-<script>
-// import WxReplySelect from '/@/views/mp/components/wx-reply/main.vue'
-import WxNews from '/@/views/mp/components/wx-news/main.vue'
-// import WxMaterialSelect from '/@/views/mp/components/wx-material-select/main.vue'
-import { deleteMenu, getMenuList, saveObj } from '/@/api/mp/wx-menu'
-import { getSimpleAccounts } from '/@/api/mp/wx-account'
+<script lang="ts" name="wx-menu" setup>
 
-export default {
-  data() {
-    return {
-      // ======================== 列表查询 ========================
-      // 遮罩层
-      loading: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 查询参数
-      accountId: undefined,
-      // 公众号名
-      name: '',
-      menuList: {
-        children: [],
-      },
-      // ======================== 菜单操作 ========================
-      // 一级菜单点中样式
-      isActive: -1,
-      // 一级菜单点中样式
-      isSubMenuActive: -1,
-      // 二级菜单显示标志
-      isSubMenuFlag: -1,
-      // ======================== 菜单编辑 ========================
-      // 右边配置显示默认详情还是配置详情
-      showRightFlag: false,
-      // 菜单名称最大长度；1 级是 4 字符；2 级是 7 字符；
-      nameMaxLength: 0,
-      // 是否展示配置内容；如果有子菜单，就不显示配置内容
-      showConfigureContent: true,
-      // 重置 WxReplySelect 组件
-      hackResetWxReplySelect: false,
-      // 右边临时变量，作为中间值牵引关系
-      tempObj: {},
-      tempSelfObj: {
-        // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
-      },
-      // 跳转图文时的素材选择弹窗
-      dialogNewsVisible: false,
-      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: '选择地理位置',
-        },
-      ],
-      // 公众号账号列表
-      accounts: [],
-      ElIconSearch,
-      ElIconRefresh,
-      ElIconDelete,
-    }
-  },
-  components: {
-    WxReplySelect,
-    WxNews,
-    WxMaterialSelect,
-    ElIconPlus,
-    ElIconCircleCheck,
-  },
-  name: 'MpMenu',
-  created() {
-    getSimpleAccounts().then((response) => {
-      this.accounts = response.data
-      // 默认选中第一个
-      if (this.accounts.length > 0) {
-        this.setAccountId(this.accounts[0].id)
-      }
-      // 加载数据
-      this.getList()
-    })
-  },
-  methods: {
-    // ======================== 列表查询 ========================
-    /** 设置账号编号 */
-    setAccountId(accountId) {
-      this.accountId = accountId
-      this.name = this.accounts.find((item) => item.id === accountId)?.name
-    },
-    getList() {
-      this.loading = false
-      getMenuList(this.accountId)
-        .then((response) => {
-          response.data = this.convertMenuList(response.data)
-          this.menuList = this.handleTree(response.data, 'id')
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.resetForm()
-      // 默认选中第一个
-      if (this.accountId) {
-        this.setAccountId(this.accountId)
-      }
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm()
-      // 默认选中第一个
-      if (this.accounts.length > 0) {
-        this.setAccountId(this.accounts[0].id)
-      }
-      this.handleQuery()
-    },
-    // 将后端返回的 menuList，转换成前端的 menuList
-    convertMenuList(list) {
-      const menuList = []
-      list.forEach((item) => {
-        const menu = {
-          ...item,
-        }
-        if (item.type === 'click' || item.type === 'scancode_waitmsg') {
-          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,
-          }
-        }
-        menuList.push(menu)
-      })
-      return menuList
-    },
-    // 重置表单，清空表单数据
-    resetForm() {
-      // 菜单操作
-      this.isActive = -1
-      this.isSubMenuActive = -1
-      this.isSubMenuFlag = -1
+// 部门树使用的数据
+import {fetchAccountList} from "/@/api/mp/wx-account";
+import {useMessage, useMessageBox} from "/@/hooks/message";
 
-      // 菜单编辑
-      this.showRightFlag = false
-      this.nameMaxLength = 0
-      this.showConfigureContent = 0
-      this.hackResetWxReplySelect = true
-      this.hackResetWxReplySelect = false
-      this.tempObj = {}
-      this.tempSelfObj = {}
-      this.dialogNewsVisible = false
-    },
+const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'))
+// 点击树
+const handleNodeClick = (e: any) => {
 
-    // ======================== 菜单操作 ========================
-    // 一级菜单点击事件
-    menuClick(i, item) {
-      // 右侧的表单相关
-      this.resetEditor()
-      this.showRightFlag = true // 右边菜单
-      this.tempObj = item // 这个如果放在顶部，flag 会没有。因为重新赋值了。
-      this.tempSelfObj.grand = '1' // 表示一级菜单
-      this.tempSelfObj.index = i // 表示一级菜单索引
-      this.nameMaxLength = 4
-      this.showConfigureContent = !(item.children && item.children.length > 0) // 有子菜单，就不显示配置内容
-
-      // 左侧的选中
-      this.isActive = i // 一级菜单选中样式
-      this.isSubMenuFlag = i // 二级菜单显示标志
-      this.isSubMenuActive = -1 // 二级菜单去除选中样式
-    },
-    // 二级菜单点击事件
-    subMenuClick(subItem, index, k) {
-      // 右侧的表单相关
-      this.resetEditor()
-      this.showRightFlag = true // 右边菜单
-      this.tempObj = subItem // 将点击的数据放到临时变量，对象有引用作用
-      this.tempSelfObj.grand = '2' // 表示二级菜单
-      this.tempSelfObj.index = index // 表示一级菜单索引
-      this.tempSelfObj.secondIndex = k // 表示二级菜单索引
-      this.nameMaxLength = 7
-      this.showConfigureContent = true
-
-      // 左侧的选中
-      this.isActive = -1 // 一级菜单去除样式
-      this.isSubMenuActive = index + '' + k // 二级菜单选中样式
-    },
-    // 添加横向一级菜单
-    addMenu() {
-      const menuKeyLength = this.menuList.length
-      const addButton = {
-        name: '菜单名称',
-        children: [],
-        reply: {
-          // 用于存储回复内容
-          type: 'text',
-          accountId: this.accountId, // 保证组件里，可以使用到对应的公众号
-        },
-      }
-      this.menuList[menuKeyLength] = addButton
-      this.menuClick(this.menuKeyLength - 1, addButton)
-    },
-    // 添加横向二级菜单；item 表示要操作的父菜单
-    addSubMenu(i, item) {
-      // 清空父菜单的属性，因为它只需要 name 属性即可
-      if (!item.children || item.children.length <= 0) {
-        item['children'] = []
-        // 关闭配置面板
-        this.showConfigureContent = false
-      }
-
-      let subMenuKeyLength = item.children.length // 获取二级菜单key长度
-      let addButton = {
-        name: '子菜单名称',
-        reply: {
-          // 用于存储回复内容
-          type: 'text',
-          accountId: this.accountId, // 保证组件里，可以使用到对应的公众号
-        },
-      }
-      item.children[subMenuKeyLength] = addButton
-      this.subMenuClick(item.children[subMenuKeyLength], i, subMenuKeyLength)
-    },
-    // 删除当前菜单
-    deleteMenu(item) {
-      this.$modal
-        .confirm('确定要删除吗?')
-        .then(() => {
-          // 删除数据
-          if (this.tempSelfObj.grand === '1') {
-            // 一级菜单的删除方法
-            this.menuList.splice(this.tempSelfObj.index, 1)
-          } else if (this.tempSelfObj.grand === '2') {
-            // 二级菜单的删除方法
-            this.menuList[this.tempSelfObj.index].children.splice(
-              this.tempSelfObj.secondIndex,
-              1
-            )
-          }
-          // 提示
-          this.$modal.msgSuccess('删除成功')
-
-          // 处理菜单的选中
-          this.tempObj = {}
-          this.showRightFlag = false
-          this.isActive = -1
-          this.isSubMenuActive = -1
-        })
-        .catch(() => {})
-    },
-
-    // ======================== 菜单编辑 ========================
-    handleSave() {
-      this.$modal
-        .confirm('确定要保证并发布该菜单吗？')
-        .then(() => {
-          this.loading = true
-          return saveObj(this.accountId, this.convertMenuFormList())
-        })
-        .then(() => {
-          this.getList()
-          this.$modal.msgSuccess('发布成功')
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    },
-    // 表单 Editor 重置
-    resetEditor() {
-      this.hackResetWxReplySelect = false // 销毁组件
-      this.$nextTick(() => {
-        this.hackResetWxReplySelect = true // 重建组件
-      })
-    },
-    handleDelete() {
-      this.$modal
-        .confirm('确定要清空所有菜单吗？')
-        .then(() => {
-          this.loading = true
-          return deleteMenu(this.accountId)
-        })
-        .then(() => {
-          this.handleQuery()
-          this.$modal.msgSuccess('清空成功')
-        })
-        .catch(() => {})
-        .finally(() => {
-          this.loading = false
-        })
-    },
-    // 将前端的 menuList，转换成后端接收的 menuList
-    convertMenuFormList() {
-      const menuList = []
-      this.menuList.forEach((item) => {
-        let menu = this.convertMenuForm(item)
-        menuList.push(menu)
-        // 处理子菜单
-        if (!item.children || item.children.length <= 0) {
-          return
-        }
-        menu.children = []
-        item.children.forEach((subItem) => {
-          menu.children.push(this.convertMenuForm(subItem))
-        })
-      })
-      return menuList
-    },
-    // 将前端的 menu，转换成后端接收的 menu
-    convertMenuForm(menu) {
-      let result = {
-        ...menu,
-        children: undefined, // 不处理子节点
-        reply: undefined, // 稍后复制
-      }
-      if (menu.type === 'click' || menu.type === 'scancode_waitmsg') {
-        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
-    },
-    // ======================== 菜单编辑（素材选择） ========================
-    openMaterial() {
-      this.dialogNewsVisible = true
-    },
-    selectMaterial(item) {
-      const articleId = item.articleId
-      const articles = item.content.newsItem
-      // 提示，针对多图文
-      if (articles.length > 1) {
-        this.$alert('您选择的是多图文，将默认跳转第一篇', '提示', {
-          confirmButtonText: '确定',
-        })
-      }
-      this.dialogNewsVisible = false
-
-      // 设置菜单的回复
-      this.tempObj.articleId = articleId
-      this.tempObj.replyArticles = []
-      articles.forEach((article) => {
-        this.tempObj.replyArticles.push({
-          title: article.title,
-          description: article.digest,
-          picUrl: article.picUrl,
-          url: article.url,
-        })
-      })
-    },
-    deleteMaterial() {
-      delete this.tempObj
-      delete this.tempObj
-    },
-  },
 }
+
+const deptData = reactive({
+  queryList: () => {
+    return fetchAccountList()
+  }
+})
+
+const loading = ref(false)
+
+const name = ref('测试公众号')
+
+const accountId = ref('') // 公众号id
+// 一级菜单点中样式
+const isActive = ref(-1)
+// 一级菜单点中样式
+const isSubMenuActive = ref('-1')
+// 二级菜单显示标志
+const isSubMenuFlag = ref(-1)
+
+const menuList = reactive([
+  {
+    name: '菜单名称',
+    children: []
+  }
+] as any)
+
+const menuOptions = ref([
+  {
+    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: '选择地理位置',
+  },
+])
+
+const showRightFlag = ref(false)
+
+let tempObj = ref({})
+
+const tempSelfObj = reactive({
+  grand: '', // 表示二级菜单
+  index: '',   // 表示一级菜单索引
+  secondIndex: '' // 表示二级菜单索引
+})
+
+const showConfigureContent = ref(true)
+
+// 一级菜单点击事件
+const menuClick = (i, item) => {
+  showRightFlag.value = true // 右边菜单
+  // Object.assign(tempObj, item) // 这个如果放在顶部，flag 会没有。因为重新赋值了。
+  tempObj.value = item
+  showConfigureContent.value = !(item.children && item.children.length > 0) // 有子菜单，就不显示配置内容
+  isActive.value = i
+  isSubMenuFlag.value = i
+  isSubMenuActive.value = '-1'
+}
+
+// 点击二级菜单
+const subMenuClick = (subItem, index, k) => {
+  showRightFlag.value = true // 右边菜单
+  // Object.assign(tempObj, subItem) // 这个如果放在顶部，flag 会没有。因为重新赋值了。
+  tempObj.value = subItem
+  showConfigureContent.value = true
+  isActive.value = -1 // 一级菜单去除样式
+  isSubMenuActive.value = (index + '' + k) // 二级菜单选中样式
+}
+
+// 添加横向二级菜单；item 表示要操作的父菜单
+const addSubMenu = (i, item) => {
+  if (!item.children || item.children.length <= 0) {
+    item['children'] = []
+    showConfigureContent.value = false
+  }
+  let addButton = {
+    name: '子菜单名称',
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: accountId.value, // 保证组件里，可以使用到对应的公众号
+    },
+  }
+  item.children.push(addButton)
+}
+
+// 添加横向一级菜单
+const addMenu = () => {
+  const addButton = {
+    name: '菜单名称',
+    children: [],
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: accountId.value, // 保证组件里，可以使用到对应的公众号
+    },
+  }
+  menuList.push(addButton)
+}
+
+const deleteMenu = () => {
+  useMessageBox().confirm("确定要删除吗?").then(() => {
+
+    if(tempSelfObj.grand === '1'){
+      menuList.splice(tempSelfObj.index, 1)
+    }else if(tempSelfObj.grand === '2'){
+      menuList[tempSelfObj.index].children.splice(tempSelfObj.secondIndex, 1)
+    }
+    useMessage().success("删除成功")
+    Object.assign(tempObj,{})
+    showRightFlag.value = false
+    isActive.value = -1
+    isSubMenuActive.value = '-1'
+  })
+
+}
+
+
 </script>
 
-<style lang="scss" scoped="scoped">
+<style lang="scss" scoped>
+/* 公共颜色变量 */
 .clearfix {
   *zoom: 1;
 }
+
 .clearfix::after {
-  content: '';
+  content: "";
   display: table;
   clear: both;
 }
+
 div {
   text-align: left;
 }
+
 .weixin-hd {
   color: #fff;
   text-align: center;
@@ -670,10 +266,11 @@ div {
   left: 0px;
   width: 300px;
   height: 64px;
-  background: transparent url('assets/menu_head.png') no-repeat 0 0;
+  background: transparent url("assets/menu_head.png") no-repeat 0 0;
   background-position: 0 0;
-  background-size: 100%;
+  background-size: 100%
 }
+
 .weixin-title {
   color: #fff;
   font-size: 14px;
@@ -683,24 +280,28 @@ div {
   top: 33px;
   left: 0px;
 }
+
 .weixin-menu {
-  background: transparent url('assets/menu_foot.png') no-repeat 0 0;
+  background: transparent url("assets/menu_foot.png") no-repeat 0 0;
   padding-left: 43px;
-  font-size: 12px;
+  font-size: 12px
 }
+
 .menu_option {
   width: 40% !important;
 }
+
 .public-account-management {
   min-width: 1200px;
   width: 1200px;
   margin: 0 auto;
+
   .left {
     float: left;
     display: inline-block;
     width: 350px;
     height: 715px;
-    background: url('assets/iphone_backImg.png') no-repeat;
+    background: url("assets/iphone_backImg.png") no-repeat;
     background-size: 100% auto;
     padding: 518px 25px 88px;
     position: relative;
@@ -717,47 +318,57 @@ div {
         border: 1px solid #ebedee;
         background-color: #fff;
         cursor: pointer;
+
         &.menu_addicon {
           height: 46px;
           line-height: 46px;
         }
+
         .menu_item {
           height: 44px;
           line-height: 44px;
           text-align: center;
           box-sizing: border-box;
           width: 100%;
+
           &.active {
             border: 1px solid #2bb673;
           }
         }
+
         .menu_subItem {
           height: 44px;
           line-height: 44px;
           text-align: center;
           box-sizing: border-box;
+
           &.active {
             border: 1px solid #2bb673;
           }
         }
       }
+
       i {
         color: #2bb673;
       }
+
       /*第二级菜单*/
       .submenu {
         position: absolute;
         width: 85.5px;
         bottom: 45px;
+
         .subtitle {
           background-color: #fff;
           box-sizing: border-box;
         }
       }
     }
+
     .save_div {
       margin-top: 15px;
       text-align: center;
+
       .save_btn {
         bottom: 20px;
         left: 100px;
@@ -785,27 +396,33 @@ div {
         margin-top: 20px;
         background-color: #fff;
         padding: 20px 10px;
-        border-radius: 5px;
+        border-radius: 5px
       }
+
       .blue {
         color: #29b6f6;
         margin-top: 10px;
       }
+
       .applet {
         margin-bottom: 20px;
+
         span {
           width: 20%;
         }
       }
+
       .input_width {
         width: 40%;
       }
+
       .material {
         .input_width {
           width: 30%;
         }
+
         .el-textarea {
-          width: 80%;
+          width: 80%
         }
       }
     }
@@ -816,7 +433,7 @@ div {
   }
 }
 </style>
-
+<!--素材样式-->
 <style lang="scss" scoped>
 .pagination {
   text-align: right;