review：【antd】【mp】代码评审

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

@@ -25,12 +25,12 @@ import menuHeadImg from './modules/assets/menu_head.png';
 defineOptions({ name: 'MpMenu' });
 
 // ======================== 列表查询 ========================
+
 const loading = ref(false); // 遮罩层
 const accountId = ref(-1);
 const accountName = ref<string>('');
 const menuList = ref<Menu[]>([]);
 
-// 创建表单
 const [AccountForm, accountFormApi] = useVbenForm({
   commonConfig: {
     componentProps: {
@@ -50,6 +50,7 @@ const [AccountForm, accountFormApi] = useVbenForm({
 });
 
 // ======================== 菜单操作 ========================
+
 // 当前选中菜单编码：
 //  * 一级（'x'）
 //  * 二级（'x-y'）
@@ -61,6 +62,7 @@ const activeIndex = ref<string>(MENU_NOT_SELECTED);
 const parentIndex = ref(-1);
 
 // ======================== 菜单编辑 ========================
+
 const showRightPanel = ref(false); // 右边配置显示默认详情还是配置详情
 const isParent = ref<boolean>(true); // 是否一级菜单，控制MenuEditor中name字段长度
 const activeMenu = ref<Menu>({}); // 选中菜单，MenuEditor的modelValue
@@ -84,25 +86,20 @@ async function onAccountChanged(values: Record<string, any>) {
   const accountList = await getSimpleAccountList();
   const account = accountList.find((item) => item.id === values.accountId);
   accountName.value = account?.name || '';
-  getList();
+  await getList();
 }
 
 /** 初始化账号ID - 作为备用方案，防止 handleValuesChange 未触发 */
 async function initAccountId() {
-  // 等待表单初始化完成
-  await nextTick();
-  try {
-    const values = await accountFormApi.getValues();
-    if (values?.accountId && accountId.value === -1) {
-      // 如果表单有值但 accountId 还是初始值，则手动触发一次
-      await onAccountChanged(values);
-    }
-  } catch {
-    // 忽略错误
+  await nextTick(); // 等待表单初始化完成
+  const values = await accountFormApi.getValues();
+  if (values?.accountId && accountId.value === -1) {
+    // 如果表单有值但 accountId 还是初始值，则手动触发一次
+    await onAccountChanged(values);
   }
 }
 
-// 组件挂载时初始化账号ID
+/** 组件挂载时初始化账号 ID */
 onMounted(async () => {
   await nextTick();
   await initAccountId();
@@ -170,6 +167,7 @@ function resetForm() {
 }
 
 // ======================== 菜单操作 ========================
+
 /** 一级菜单点击事件 */
 function menuClicked(parent: Menu, x: number) {
   // 右侧的表单相关
@@ -221,6 +219,7 @@ async function onDeleteMenu() {
 }
 
 // ======================== 菜单编辑 ========================
+
 /** 保存菜单 */
 async function onSave() {
   await confirm('确定要保存吗?');
@@ -302,13 +301,9 @@ function menuToBackend(menu: any) {
     </template>
 
     <!-- 搜索工作栏 -->
-    <!-- <ContentWrap> -->
     <AccountForm class="-mb-15px w-240px" @values-change="onAccountChanged" />
-    <!-- </ContentWrap> -->
 
-    <!-- DONE @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
     <ContentWrap>
-      <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
       <div
         class="mx-auto w-[1200px] after:clear-both after:table after:content-['']"
         v-loading="loading"
@@ -341,7 +336,6 @@ function menuToBackend(menu: any) {
               @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
             />
           </div>
-          <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
           <div class="mt-[15px] flex items-center justify-center gap-[10px]">
             <Button
               type="primary"

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

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// DONE @hw：名字可以缩写成 editor.vue，文件名
 import { computed, nextTick, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
@@ -49,6 +48,7 @@ watch(menu, () => {
 });
 
 // ======================== 菜单编辑（素材选择） ========================
+
 /** 选择素材 */
 function selectMaterial(item: any) {
   const articleId = item.articleId;
@@ -81,7 +81,6 @@ function deleteMaterial() {
 
 <template>
   <div>
-    <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
     <div>
       <div class="mb-[15px] text-right">
         <Button type="primary" danger @click="emit('delete')">
@@ -139,7 +138,6 @@ function deleteMaterial() {
             allow-clear
           />
         </div>
-        <!-- DONE @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
         <div
           class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
           v-if="menu.type === 'miniprogram'"
@@ -202,7 +200,6 @@ function deleteMaterial() {
             </div>
             <div v-else>
               <Row justify="center">
-                <!-- DONE @hw：html 标签里的 style 要用 tindwind 替代下； -->
                 <Col :span="24" class="text-center">
                   <Button type="primary" @click="showNewsDialog = true">
                     素材库选择

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

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

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

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// DONE @hw：名字可以缩写成 previewer.vue，文件名
 import type { Menu } from './types';
 
 import { computed } from 'vue';
@@ -44,7 +43,6 @@ function addMenu() {
 
 /** 添加横向二级菜单；parent 表示要操作的父菜单 */
 function addSubMenu(i: number, parent: any) {
-  // DONE @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
   parent.children[parent.children.length] = {
     name: '子菜单名称',
     reply: {

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

@@ -72,7 +72,6 @@ interface _Menu extends RawMenu {
 
 export type Menu = Partial<_Menu>;
 
-// DONE @hw：这个要不合并到 types 里；
 export const menuOptions = [
   {
     value: 'view',