From f8abee2b6314a7b05543cb8b09edbb709fc9f3e3 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 9 Nov 2025 15:31:20 +0800
Subject: [PATCH] =?UTF-8?q?review=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90m?=
 =?UTF-8?q?p=E3=80=91=E8=8F=9C=E5=8D=95=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/mp/menu/components/index.ts     |  1 +
 .../views/mp/menu/components/menu-editor.vue  |  6 ++
 .../mp/menu/components/menu-previewer.vue     |  5 +-
 .../views/mp/menu/components/menuOptions.ts   |  1 +
 apps/web-antd/src/views/mp/menu/index.vue     | 94 +++++++++----------
 5 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/apps/web-antd/src/views/mp/menu/components/index.ts b/apps/web-antd/src/views/mp/menu/components/index.ts
index 7c8c99267..02a277aba 100644
--- a/apps/web-antd/src/views/mp/menu/components/index.ts
+++ b/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';
diff --git a/apps/web-antd/src/views/mp/menu/components/menu-editor.vue b/apps/web-antd/src/views/mp/menu/components/menu-editor.vue
index 53b79e871..6044b520d 100644
--- a/apps/web-antd/src/views/mp/menu/components/menu-editor.vue
+++ b/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%;
diff --git a/apps/web-antd/src/views/mp/menu/components/menu-previewer.vue b/apps/web-antd/src/views/mp/menu/components/menu-previewer.vue
index 3cad2eb7d..cbdc1bee5 100644
--- a/apps/web-antd/src/views/mp/menu/components/menu-previewer.vue
+++ b/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;
diff --git a/apps/web-antd/src/views/mp/menu/components/menuOptions.ts b/apps/web-antd/src/views/mp/menu/components/menuOptions.ts
index 9ba818fc4..565f0e221 100644
--- a/apps/web-antd/src/views/mp/menu/components/menuOptions.ts
+++ b/apps/web-antd/src/views/mp/menu/components/menuOptions.ts
@@ -1,3 +1,4 @@
+// TODO @hw：这个要不合并到 types 里；
 export default [
   {
     value: 'view',
diff --git a/apps/web-antd/src/views/mp/menu/index.vue b/apps/web-antd/src/views/mp/menu/index.vue
index 2c0e43c9a..91b20b332 100644
--- a/apps/web-antd/src/views/mp/menu/index.vue
+++ b/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('确定要删除吗?');
-    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('删除成功');
+  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 {}
+  // 处理菜单的选中
+  activeMenu.value = {};
+  showRightPanel.value = false;
+  activeIndex.value = MENU_NOT_SELECTED;
 }
 
 // ======================== 菜单编辑 ========================
 /** 保存菜单 */
 async function onSave() {
+  await confirm('确定要保存吗?');
+  const hideLoading = message.loading({
+    content: '保存中...',
+    duration: 0,
+  });
   try {
-    await confirm('确定要保存吗?');
-    const hideLoading = message.loading({
-      content: '保存中...',
-      duration: 0,
-    });
-    try {
-      await saveMenu(accountId.value, menuListToBackend());
-      getList();
-      message.success('发布成功');
-    } finally {
-      hideLoading();
-    }
-  } catch {
-    //
+    await saveMenu(accountId.value, menuListToBackend());
+    await getList();
+    message.success('发布成功');
+  } finally {
+    hideLoading();
   }
 }
 
 /** 清空菜单 */
 async function onClear() {
+  await confirm('确定要删除吗?');
+  const hideLoading = message.loading({
+    content: '删除中...',
+    duration: 0,
+  });
   try {
-    await confirm('确定要删除吗?');
-    const hideLoading = message.loading({
-      content: '删除中...',
-      duration: 0,
-    });
-    try {
-      await deleteMenu(accountId.value);
-      handleQuery();
-      message.success('清空成功');
-    } finally {
-      hideLoading();
-    }
-  } catch {
-    //
+    await deleteMenu(accountId.value);
+    handleQuery();
+    message.success('清空成功');
+  } finally {
+    hideLoading();
   }
 }
 
@@ -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;