review：【antd】【mp】菜单优化

apps/web-antd/src/views/mp/menu/components/index.ts

@@ -1,3 +1,4 @@
+// TODO @hw：如果只有自己组件里用，一般是 modules，所以这个目录要改成 modules 哈（自己模块的一部分）；如果要给外部的组件用，可以叫 components；
 export { default as MenuEditor } from './menu-editor.vue';
 export { default as MenuPreviewer } from './menu-previewer.vue';
 export * from './menuOptions';

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+// TODO @hw：名字可以缩写成 editor.vue，文件名
 import { computed, nextTick, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
@@ -136,6 +137,7 @@ function deleteMaterial() {
             allow-clear
           />
         </div>
+        <!-- TODO @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
         <div class="configur-content" v-if="menu.type === 'miniprogram'">
           <div class="applet">
             <span>小程序的 appid ：</span>
@@ -188,6 +190,7 @@ function deleteMaterial() {
             </div>
             <div v-else>
               <Row justify="center">
+                <!-- TODO @hw：html 标签里的 style 要用 tindwind 替代下； -->
                 <Col :span="24" style="text-align: center">
                   <Button type="primary" @click="showNewsDialog = true">
                     素材库选择
@@ -210,18 +213,21 @@ function deleteMaterial() {
             </Modal>
           </Row>
         </div>
+        <!-- TODO @hw：貌似这个组件出不来 -->
         <div
           class="configur-content"
           v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
         >
           <WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
         </div>
+        <!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
 :deep(.ant-input) {
   // width: 70%;
   margin-right: 2%;

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+// TODO @hw：名字可以缩写成 previewer.vue，文件名
 import type { Menu } from './types';
 
 import { computed } from 'vue';
@@ -43,7 +44,8 @@ function addMenu() {
 
 /** 添加横向二级菜单；parent 表示要操作的父菜单 */
 function addSubMenu(i: number, parent: any) {
-  const subMenuKeyLength = parent.children.length; // 获取二级菜单key长度
+  const subMenuKeyLength = parent.children.length; // 获取二级菜单 key 长度
+  // TODO @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
   const addButton = {
     name: '子菜单名称',
     reply: {
@@ -183,6 +185,7 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
 .menu-bottom {
   position: relative;
   float: left;

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

@@ -1,3 +1,4 @@
+// TODO @hw：这个要不合并到 types 里；
 export default [
   {
     value: 'view',

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

@@ -76,7 +76,9 @@ function handleQuery() {
 
 /** 将后端返回的 menuList，转换成前端的 menuList */
 function menuListToFrontend(list: any[]) {
-  if (!list) return [];
+  if (!list) {
+    return [];
+  }
 
   const result: RawMenu[] = [];
   list.forEach((item: RawMenu) => {
@@ -146,66 +148,56 @@ function subMenuClicked(child: Menu, x: number, y: number) {
 
 /** 删除当前菜单 */
 async function onDeleteMenu() {
-  try {
+  await confirm('确定要删除吗?');
-    await confirm('确定要删除吗?');
+  if (tempSelfObj.value.grand === Level.Parent) {
-    if (tempSelfObj.value.grand === Level.Parent) {
+    // 一级菜单的删除方法
-      // 一级菜单的删除方法
+    menuList.value.splice(tempSelfObj.value.x, 1);
-      menuList.value.splice(tempSelfObj.value.x, 1);
+  } else if (tempSelfObj.value.grand === Level.Child) {
-    } else if (tempSelfObj.value.grand === Level.Child) {
+    // 二级菜单的删除方法
-      // 二级菜单的删除方法
+    menuList.value[tempSelfObj.value.x]?.children?.splice(
-      menuList.value[tempSelfObj.value.x]?.children?.splice(
+      tempSelfObj.value.y,
-        tempSelfObj.value.y,
+      1,
-        1,
+    );
-      );
+  }
-    }
+  // 提示
-    // 提示
+  message.success('删除成功');
-    message.success('删除成功');
 
-    // 处理菜单的选中
+  // 处理菜单的选中
-    activeMenu.value = {};
+  activeMenu.value = {};
-    showRightPanel.value = false;
+  showRightPanel.value = false;
-    activeIndex.value = MENU_NOT_SELECTED;
+  activeIndex.value = MENU_NOT_SELECTED;
-  } catch {}
 }
 
 // ======================== 菜单编辑 ========================
 /** 保存菜单 */
 async function onSave() {
+  await confirm('确定要保存吗?');
+  const hideLoading = message.loading({
+    content: '保存中...',
+    duration: 0,
+  });
   try {
-    await confirm('确定要保存吗?');
+    await saveMenu(accountId.value, menuListToBackend());
-    const hideLoading = message.loading({
+    await getList();
-      content: '保存中...',
+    message.success('发布成功');
-      duration: 0,
+  } finally {
-    });
+    hideLoading();
-    try {
-      await saveMenu(accountId.value, menuListToBackend());
-      getList();
-      message.success('发布成功');
-    } finally {
-      hideLoading();
-    }
-  } catch {
-    //
   }
 }
 
 /** 清空菜单 */
 async function onClear() {
+  await confirm('确定要删除吗?');
+  const hideLoading = message.loading({
+    content: '删除中...',
+    duration: 0,
+  });
   try {
-    await confirm('确定要删除吗?');
+    await deleteMenu(accountId.value);
-    const hideLoading = message.loading({
+    handleQuery();
-      content: '删除中...',
+    message.success('清空成功');
-      duration: 0,
+  } finally {
-    });
+    hideLoading();
-    try {
-      await deleteMenu(accountId.value);
-      handleQuery();
-      message.success('清空成功');
-    } finally {
-      hideLoading();
-    }
-  } catch {
-    //
   }
 }
 
@@ -229,7 +221,7 @@ function menuListToBackend() {
 }
 
 /** 将前端的 menu，转换成后端接收的 menu */
-// TODO: @芋艿，需要根据后台API删除不需要的字段
+// TODO: @芋艿，需要根据后台 API 删除不需要的字段
 function menuToBackend(menu: any) {
   const result = {
     ...menu,
@@ -247,7 +239,6 @@ function menuToBackend(menu: any) {
   result.replyArticles = menu.reply.articles;
   result.replyMusicUrl = menu.reply.musicUrl;
   result.replyHqMusicUrl = menu.reply.hqMusicUrl;
-
   return result;
 }
 </script>
@@ -259,6 +250,7 @@ function menuToBackend(menu: any) {
     </template>
 
     <!-- 搜索工作栏 -->
+    <!-- TODO @hw：是不是少了一个框子哈？ -->
     <!-- <ContentWrap> -->
     <Form layout="inline" class="-mb-15px w-240px">
       <Form.Item label="公众号" prop="accountId" class="w-240px">
@@ -267,6 +259,7 @@ function menuToBackend(menu: any) {
     </Form>
     <!-- </ContentWrap> -->
 
+    <!-- TODO @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
     <ContentWrap>
       <div class="clearfix public-account-management" v-loading="loading">
         <!--左边配置菜单-->
@@ -322,6 +315,7 @@ function menuToBackend(menu: any) {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
 /* 公共颜色变量 */
 .clearfix {
   *zoom: 1;