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';
@@ -44,6 +45,7 @@ function addMenu() {
 /** 添加横向二级菜单；parent 表示要操作的父菜单 */
 function addSubMenu(i: number, parent: any) {
   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,7 +148,6 @@ function subMenuClicked(child: Menu, x: number, y: number) {
 
 /** 删除当前菜单 */
 async function onDeleteMenu() {
-  try {
   await confirm('确定要删除吗?');
   if (tempSelfObj.value.grand === Level.Parent) {
     // 一级菜单的删除方法
@@ -165,13 +166,11 @@ async function onDeleteMenu() {
   activeMenu.value = {};
   showRightPanel.value = false;
   activeIndex.value = MENU_NOT_SELECTED;
-  } catch {}
 }
 
 // ======================== 菜单编辑 ========================
 /** 保存菜单 */
 async function onSave() {
-  try {
   await confirm('确定要保存吗?');
   const hideLoading = message.loading({
     content: '保存中...',
@@ -179,19 +178,15 @@ async function onSave() {
   });
   try {
     await saveMenu(accountId.value, menuListToBackend());
-      getList();
+    await getList();
     message.success('发布成功');
   } finally {
     hideLoading();
   }
-  } catch {
-    //
-  }
 }
 
 /** 清空菜单 */
 async function onClear() {
-  try {
   await confirm('确定要删除吗?');
   const hideLoading = message.loading({
     content: '删除中...',
@@ -204,9 +199,6 @@ async function onClear() {
   } finally {
     hideLoading();
   }
-  } catch {
-    //
-  }
 }
 
 /** 将前端的 menuList，转换成后端接收的 menuList */
@@ -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;