Merge remote-tracking branch 'yudao/dev' into dev

apps/web-ele/src/api/mp/draft/index.ts

@@ -24,6 +24,49 @@ export namespace MpDraftApi {
     articles: Article[];
     createTime?: Date;
   }
+
+  /** 图文项（包含预览字段） */
+  export interface NewsItem {
+    title: string;
+    thumbMediaId: string;
+    author: string;
+    digest: string;
+    showCoverPic: number;
+    content: string;
+    contentSourceUrl: string;
+    needOpenComment: number;
+    onlyFansCanComment: number;
+    thumbUrl: string;
+    picUrl?: string; // 用于预览封面
+  }
+
+  /** 图文列表 */
+  export interface NewsItemList {
+    newsItem: NewsItem[];
+  }
+
+  /** 草稿文章（用于展示） */
+  export interface DraftArticle {
+    mediaId: string;
+    content: NewsItemList;
+    updateTime: number;
+  }
+}
+
+/** 创建空的图文项 */
+export function createEmptyNewsItem(): MpDraftApi.NewsItem {
+  return {
+    title: '',
+    thumbMediaId: '',
+    author: '',
+    digest: '',
+    showCoverPic: 0,
+    content: '',
+    contentSourceUrl: '',
+    needOpenComment: 0,
+    onlyFansCanComment: 0,
+    thumbUrl: '',
+  };
 }
 
 /** 查询草稿列表 */
@@ -50,13 +93,9 @@ export function updateDraft(
   mediaId: string,
   articles: MpDraftApi.Article[],
 ) {
-  return requestClient.put(
-    '/mp/draft/update',
-    { articles },
-    {
-      params: { accountId, mediaId },
-    },
-  );
+  return requestClient.put('/mp/draft/update', articles, {
+    params: { accountId, mediaId },
+  });
 }
 
 /** 删除草稿 */

apps/web-ele/src/api/mp/user/index.ts

@@ -21,13 +21,6 @@ export namespace MpUserApi {
     tagIds?: number[];
     createTime?: Date;
   }
-
-  /** 用户分页查询参数 */
-  export interface UserPageQuery extends PageParam {
-    accountId?: number;
-    nickname?: string;
-    tagId?: number;
-  }
 }
 
 /** 更新公众号粉丝 */
@@ -43,7 +36,7 @@ export function getUser(id: number) {
 }
 
 /** 获取公众号粉丝分页 */
-export function getUserPage(params: MpUserApi.UserPageQuery) {
+export function getUserPage(params: PageParam) {
   return requestClient.get<PageResult<MpUserApi.User>>('/mp/user/page', {
     params,
   });

apps/web-ele/src/components/form-create/helpers.ts

@@ -21,15 +21,21 @@ import {
 
 /** 编码表单 Conf */
 export function encodeConf(designerRef: any) {
-  return JSON.stringify(designerRef.value.getOption());
+  // 关联案例：https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/834/
+  return formCreate.toJson(designerRef.value.getOption());
+}
+
+/** 解码表单 Conf */
+export function decodeConf(conf: string) {
+  return formCreate.parseJson(conf);
 }
 
 /** 编码表单 Fields */
 export function encodeFields(designerRef: any) {
-  const rule = JSON.parse(designerRef.value.getJson());
+  const rule = designerRef.value.getRule();
   const fields: string[] = [];
-  rule.forEach((item: unknown) => {
-    fields.push(JSON.stringify(item));
+  rule.forEach((item: any) => {
+    fields.push(formCreate.toJson(item));
   });
   return fields;
 }
@@ -49,7 +55,7 @@ export function setConfAndFields(
   conf: string,
   fields: string | string[],
 ) {
-  designerRef.value.setOption(formCreate.parseJson(conf));
+  designerRef.value.setOption(decodeConf(conf));
   // 处理 fields 参数类型，确保传入 decodeFields 的是 string[] 类型
   const fieldsArray = Array.isArray(fields) ? fields : [fields];
   designerRef.value.setRule(decodeFields(fieldsArray));
@@ -65,7 +71,7 @@ export function setConfAndFields2(
   if (isRef(detailPreview)) {
     detailPreview = detailPreview.value;
   }
-  detailPreview.option = formCreate.parseJson(conf);
+  detailPreview.option = decodeConf(conf);
   detailPreview.rule = decodeFields(fields);
   if (value) {
     detailPreview.value = value;

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx

@@ -1,3 +1,4 @@
+/*  eslint-disable vue/one-component-per-file */
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 
 import { defineComponent } from 'vue';

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue

@@ -24,7 +24,7 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
 import CouponSelect from '#/views/mall/promotion/coupon/components/select.vue';
@@ -65,9 +65,7 @@ watch(
   () => formData.value.couponIds,
   async () => {
     if (formData.value.couponIds?.length > 0) {
-      couponList.value = await CouponTemplateApi.getCouponTemplateList(
-        formData.value.couponIds,
-      );
+      couponList.value = await getCouponTemplateList(formData.value.couponIds);
     }
   },
   {

apps/web-ele/src/views/mp/autoReply/data.ts

@@ -8,7 +8,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictObj, getDictOptions } from '@vben/hooks';
 
 import { getSimpleAccountList } from '#/api/mp/account';
-import { ReplySelect } from '#/views/mp/components';
+import { WxReplySelect } from '#/views/mp/components';
 
 import { MsgType } from './modules/types';
 
@@ -16,6 +16,7 @@ import { MsgType } from './modules/types';
 let accountList: MpAccountApi.AccountSimple[] = [];
 getSimpleAccountList().then((data) => (accountList = data));
 
+// TODO @hw：要不要使用统一枚举？
 const RequestMessageTypes = new Set([
   'image',
   'link',
@@ -25,6 +26,7 @@ const RequestMessageTypes = new Set([
   'video',
   'voice',
 ]); // 允许选择的请求消息类型
+
 /** 获取表格列配置 */
 export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
   const columns: VxeGridPropTypes.Columns = [];
@@ -65,6 +67,7 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
       field: 'responseMessageType',
       title: '回复消息类型',
       minWidth: 120,
+      // TODO @hw：这里和 antd 有差别。两侧尽量统一；
       formatter: ({ cellValue }) =>
         getDictObj(DICT_TYPE.MP_MESSAGE_TYPE, String(cellValue))?.label ?? '',
     },
@@ -93,7 +96,9 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
 /** 新增/修改的表单 */
 export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
   const schema: VbenFormSchema[] = [];
+
   // 消息类型（仅消息回复显示）
+  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
   if (Number(msgType) === MsgType.Message) {
     schema.push({
       fieldName: 'requestMessageType',
@@ -109,6 +114,7 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
   }
 
   // 匹配类型（仅关键词回复显示）
+  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
   if (Number(msgType) === MsgType.Keyword) {
     schema.push({
       fieldName: 'requestMatch',
@@ -127,6 +133,7 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
   }
 
   // 关键词（仅关键词回复显示）
+  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
   if (Number(msgType) === MsgType.Keyword) {
     schema.push({
       fieldName: 'requestKeyword',
@@ -140,15 +147,17 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
     });
   }
   // 回复消息
+  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
   schema.push({
     fieldName: 'reply',
     label: '回复消息',
-    component: markRaw(ReplySelect),
+    component: markRaw(WxReplySelect),
   });
   return schema;
 }
 
 /** 列表的搜索表单 */
+// TODO @hw：是不是用 wxselect 组件哈？
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {

apps/web-ele/src/views/mp/autoReply/index.vue

@@ -16,8 +16,13 @@ import {
 } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import {
+  deleteAutoReply,
+  getAutoReply,
+  getAutoReplyPage,
+} from '#/api/mp/autoReply';
 import { $t } from '#/locales';
+import { WxAccountSelect } from '#/views/mp/components';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Content from './modules/content.vue';
@@ -27,6 +32,30 @@ import { MsgType } from './modules/types';
 defineOptions({ name: 'MpAutoReply' });
 
 const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
+
+const showCreateButton = computed(() => {
+  if (Number(msgType.value) !== MsgType.Follow) {
+    return true;
+  }
+  try {
+    const tableData = gridApi.grid?.getTableData();
+    return (tableData?.tableData?.length || 0) <= 0;
+  } catch {
+    return true;
+  }
+}); // 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 公众号变化时查询数据 */
+function handleAccountChange(accountId: number) {
+  gridApi.formApi.setValues({ accountId });
+  gridApi.formApi.submitForm();
+}
+
 /** 切换回复类型 */
 async function onTabChange(tabName: string) {
   msgType.value = tabName;
@@ -43,24 +72,26 @@ async function onTabChange(tabName: string) {
   await gridApi.query();
 }
 
-/** 新增按钮操作 */
+/** 新增自动回复 */
 async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
-
   formModalApi
     .setData({
+      // TODO @hw：这里和 antd 不同，需要 number 下么？
       msgType: msgType.value,
       accountId: formValues.accountId,
     })
     .open();
 }
 
-/** 修改按钮操作 */
+/** 修改自动回复 */
 async function handleEdit(row: any) {
-  const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
+  const data = (await getAutoReply(row.id)) as any;
+  // TODO @hw：这里使用 formValues，还是使用 row？
   const formValues = await gridApi.formApi.getValues();
   formModalApi
     .setData({
+      // TODO @hw：这里和 antd 不同，需要 number 下么？
       msgType: msgType.value,
       row: data,
       accountId: formValues.accountId,
@@ -68,14 +99,14 @@ async function handleEdit(row: any) {
     .open();
 }
 
-/** 删除按钮操作 */
+/** 删除自动回复 */
 async function handleDelete(row: any) {
   await ElMessageBox.confirm('是否确认删除此数据?');
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', ['自动回复']),
   });
   try {
-    await MpAutoReplyApi.deleteAutoReply(row.id);
+    await deleteAutoReply(row.id);
     ElMessage.success('删除成功');
     handleRefresh();
   } finally {
@@ -91,8 +122,6 @@ const [FormModal, formModalApi] = useVbenModal({
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
-    // 表单值变化时自动提交，这样 accountId 会被正确传递到查询函数
-    submitOnChange: true,
   },
   gridOptions: {
     columns: useGridColumns(Number(msgType.value) as MsgType),
@@ -101,7 +130,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await MpAutoReplyApi.getAutoReplyPage({
+          return await getAutoReplyPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             type: Number(msgType.value) as MsgType,
@@ -109,6 +138,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           });
         },
       },
+      autoLoad: false,
     },
     rowConfig: {
       keyField: 'id',
@@ -118,26 +148,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
+    // TODO @hw：这里要调整下，linter 报错；
   } as VxeTableGridOptions<any>,
 });
-
-/** 刷新表格 */
-function handleRefresh() {
-  gridApi.query();
-}
-
-// 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
-const showCreateButton = computed(() => {
-  if (Number(msgType.value) !== MsgType.Follow) {
-    return true;
-  }
-  try {
-    const tableData = gridApi.grid?.getTableData();
-    return (tableData?.tableData?.length || 0) <= 0;
-  } catch {
-    return true;
-  }
-});
 </script>
 
 <template>
@@ -147,8 +160,10 @@ const showCreateButton = computed(() => {
     </template>
 
     <FormModal @success="handleRefresh" />
-    <Grid table-title="自动回复列表">
-      <!-- 在工具栏上方放置 Tab 切换 -->
+    <Grid>
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
       <template #toolbar-actions>
         <ElTabs
           v-model="msgType"

apps/web-ele/src/views/mp/autoReply/modules/content.vue

@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/components';
+import {
+  WxMusic,
+  WxNews,
+  WxVideoPlayer,
+  WxVoicePlayer,
+} from '#/views/mp/components';
 
 defineOptions({ name: 'ReplyContentCell' });
 
@@ -14,7 +19,7 @@ const props = defineProps<{
       {{ props.row.responseContent }}
     </div>
     <div v-else-if="props.row.responseMessageType === 'voice'">
-      <VoicePlayer
+      <WxVoicePlayer
         v-if="props.row.responseMediaUrl"
         :url="props.row.responseMediaUrl"
       />
@@ -30,17 +35,17 @@ const props = defineProps<{
         props.row.responseMessageType === 'shortvideo'
       "
     >
-      <VideoPlayer
+      <WxVideoPlayer
         v-if="props.row.responseMediaUrl"
         :url="props.row.responseMediaUrl"
         class="mt-[10px]"
       />
     </div>
     <div v-else-if="props.row.responseMessageType === 'news'">
-      <News :articles="props.row.responseArticles" />
+      <WxNews :articles="props.row.responseArticles" />
     </div>
     <div v-else-if="props.row.responseMessageType === 'music'">
-      <Music
+      <WxMusic
         :title="props.row.responseTitle"
         :description="props.row.responseDescription"
         :thumb-media-url="props.row.responseThumbMediaUrl"

apps/web-ele/src/views/mp/autoReply/modules/form.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Reply } from '#/views/mp/components/reply/types';
+import type { Reply } from '#/views/mp/components/wx-reply/types';
 
 import { computed, nextTick, ref } from 'vue';
 
@@ -10,7 +10,7 @@ import { ElMessage } from 'element-plus';
 import { useVbenForm } from '#/adapter/form';
 import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
 import { $t } from '#/locales';
-import { ReplyType } from '#/views/mp/components/reply/types';
+import { ReplyType } from '#/views/mp/components/wx-reply/types';
 
 import { useFormSchema } from '../data';
 import { MsgType } from './types';
@@ -37,12 +37,11 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 100,
   },
   layout: 'horizontal',
+  // TODO @hw：antd 和 ele 存在差异
   schema: useFormSchema(Number(formData.value?.msgType) as MsgType),
   showDefaultActions: false,
 });
 
-// 注意：schema 的更新现在在 onOpenChange 中手动处理，避免时序问题
-
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -60,6 +59,7 @@ const [Modal, modalApi] = useVbenModal({
     if (formData.value?.row?.id && !submitForm.id) {
       submitForm.id = formData.value.row.id;
     }
+    // TODO @hw：antd 和 ele 存在差异
     const reply = submitForm.reply as Reply | undefined;
     if (reply) {
       submitForm.responseMessageType = reply.type;
@@ -99,6 +99,7 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData<{
       accountId?: number;
+      // TODO @hw：antd 和 ele 存在差异
       msgType: MsgType;
       row?: any;
     }>();
@@ -137,6 +138,7 @@ const [Modal, modalApi] = useVbenModal({
         accountId: data.accountId || -1,
         type: data.msgType,
         requestKeyword: undefined,
+        // TODO @hw：antd 和 ele 存在差异
         requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
         requestMessageType: undefined,
         reply: {

apps/web-ele/src/views/mp/autoReply/modules/types.ts

@@ -1,5 +1,6 @@
 // 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
 // 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
+// TODO @hw：ele 相比 antd 多了，看看要不要统一下；
 export enum MsgType {
   Follow = 1,
   Keyword = 3,

apps/web-ele/src/views/mp/components/account-select/index.ts

@@ -1 +0,0 @@
-export { default } from './account-select.vue';

apps/web-ele/src/views/mp/components/index.ts

@@ -1,24 +1,22 @@
-// 统一导出所有模块组件
+export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';
 
-export { default as AccountSelect } from './account-select/account-select.vue';
-export { default as WxAccountSelect } from './account-select/account-select.vue';
+export { default as WxLocation } from './wx-location/wx-location.vue';
+export * from './wx-material-select/types';
 
-// TODO @hw：还是带着 wx 前缀。。。貌似好点，我的锅！！！
-export { default as Location } from './location/location.vue';
-export { default as MaterialSelect } from './material-select/material-select.vue';
+export { default as WxMaterialSelect } from './wx-material-select/wx-material-select.vue';
 
-export * from './material-select/types';
+export * from './wx-msg/types';
 
-export * from './msg/types';
+export { default as WxMusic } from './wx-music/wx-music.vue';
 
-export { default as Music } from './music/music.vue';
+export { default as WxNews } from './wx-news/wx-news.vue';
 
-export { default as News } from './news/news.vue';
+export * from './wx-reply/types';
 
-export { default as ReplySelect } from './reply/reply.vue';
+export { default as WxReplySelect } from './wx-reply/wx-reply.vue';
 
-export * from './reply/types';
+export { default as WxVideoPlayer } from './wx-video-play/wx-video-play.vue';
 
-export { default as VideoPlayer } from './video-play/video-play.vue';
+export { default as WxVoicePlayer } from './wx-voice-play/wx-voice-play.vue';
 
-export { default as VoicePlayer } from './voice-play/voice-play.vue';
+// TODO @hw：是不是要和 antd 保持一致哈？

apps/web-ele/src/views/mp/components/location/index.ts

@@ -1 +0,0 @@
-export { default } from './location.vue';

apps/web-ele/src/views/mp/components/material-select/index.ts

@@ -1,3 +0,0 @@
-export { default } from './material-select.vue';
-
-export { MaterialType, NewsType } from './types';

apps/web-ele/src/views/mp/components/msg/index.ts

@@ -1,3 +0,0 @@
-export { default } from './msg.vue';
-
-export { MsgType } from './types';

apps/web-ele/src/views/mp/components/music/index.ts

@@ -1 +0,0 @@
-export { default } from './music.vue';

apps/web-ele/src/views/mp/components/news/index.ts

@@ -1 +0,0 @@
-export { default } from './news.vue';

apps/web-ele/src/views/mp/components/reply/index.ts

@@ -1,3 +0,0 @@
-export { default } from './reply.vue';
-
-export { createEmptyReply, type Reply, ReplyType } from './types';

apps/web-ele/src/views/mp/components/video-play/index.ts

@@ -1 +0,0 @@
-export { default } from './video-play.vue';

apps/web-ele/src/views/mp/components/voice-play/index.ts

@@ -1 +0,0 @@
-export { default } from './voice-play.vue';

apps/web-ele/src/views/mp/components/wx-account-select/index.ts

@@ -0,0 +1,3 @@
+export { default } from './wx-account-select.vue';
+
+// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

apps/web-ele/src/views/mp/components/wx-account-select/wx-account-select.vue

@@ -10,6 +10,7 @@ import { ElMessage, ElOption, ElSelect } from 'element-plus';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
+// TODO @hw：调整下代码，和 antd 代码风格，尽量保持一致；
 defineOptions({ name: 'AccountSelect' });
 
 const props = defineProps<{

apps/web-ele/src/views/mp/components/wx-location/index.ts

@@ -0,0 +1,3 @@
+export { default as WxLocation } from './wx-location.vue';
+
+// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

apps/web-ele/src/views/mp/components/wx-location/wx-location.vue

@@ -1,13 +1,15 @@
 <!--
-  【微信消息 - 定位】TODO @Dhb52 目前未启用
+  【微信消息 - 定位】TODO @Dhb52 目前未启用；；；；@hw：看看目前是不是没用起来哈？
 -->
 <script lang="ts" setup>
 import { IconifyIcon } from '@vben/icons';
 
+// TODO @dylan：@hw：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
 import { ElCol, ElLink, ElRow } from 'element-plus';
 
 defineOptions({ name: 'Location' });
 
+// TODO @hw：antd 和 ele 这里的风格，看看怎么统一！
 const props = defineProps({
   locationX: {
     required: true,
@@ -39,6 +41,7 @@ defineExpose({
 </script>
 
 <template>
+  <!-- 微信消息 - 定位 -->
   <div>
     <ElLink
       type="primary"

apps/web-ele/src/views/mp/components/wx-material-select/index.ts

@@ -0,0 +1,5 @@
+export { MaterialType, NewsType } from './types';
+
+export { default } from './wx-material-select.vue';
+
+// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

apps/web-ele/src/views/mp/components/wx-material-select/types.ts

@@ -1,3 +1,4 @@
+// TODO @hw：这里的枚举，看看要不要统一
 export enum NewsType {
   Draft = '2',
   Published = '1',

apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue

@@ -1,8 +1,3 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  芋道源码：
--->
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
 
@@ -20,12 +15,15 @@ import {
 import * as MpDraftApi from '#/api/mp/draft';
 import * as MpFreePublishApi from '#/api/mp/freePublish';
 import * as MpMaterialApi from '#/api/mp/material';
-import News from '#/views/mp/components/news/news.vue';
-import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
-import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
+import News from '#/views/mp/components/wx-news/wx-news.vue';
+import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
+import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
 
 import { NewsType } from './types';
 
+// TODO @hw：代码风格，看看 antd 和 ele 是不是统一下；
+
+/** 微信素材选择 */
 defineOptions({ name: 'MaterialSelect' });
 
 const props = withDefaults(
@@ -41,18 +39,14 @@ const props = withDefaults(
 
 const emit = defineEmits(['selectMaterial']);
 
-// 遮罩层
-const loading = ref(false);
-// 总条数
-const total = ref(0);
-// 数据列表
-const list = ref<any[]>([]);
-// 查询参数
+const loading = ref(false); // 遮罩层
+const total = ref(0); // 总条数
+const list = ref<any[]>([]); // 数据列表
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   accountId: props.accountId,
-});
+}); // 查询参数
 
 /** 选择素材 */
 function selectMaterialFun(item: any) {
@@ -288,6 +282,8 @@ onMounted(async () => {
   }
 }
 
+/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+
 .waterfall {
   column-gap: 10px;
   width: 100%;

apps/web-ele/src/views/mp/components/wx-msg/index.ts

@@ -0,0 +1,5 @@
+export { MsgType } from './types';
+
+export { default } from './wx-msg.vue';
+
+// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   item: any;
 }>();
 
+// TODO @hw：看看用 antd 的风格，还是 ele 的风格，就是下面的 item。
 const item = ref(props.item);
 </script>
 

apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue

@@ -5,9 +5,10 @@ import { formatDateTime } from '@vben/utils';
 
 import avatarWechat from '#/assets/imgs/wechat.png';
 
-import Msg from './msg.vue';
+import Msg from './wx-msg.vue';
 
 // 确保 User 类型被识别为已使用
+// TODO @hw：是不是不用 PropsUser 哈？
 type PropsUser = User;
 
 defineOptions({ name: 'MsgList' });
@@ -18,15 +19,16 @@ const props = defineProps<{
   user: PropsUser;
 }>();
 
-// 使用常量对象替代枚举，避免 linter 误报
 const SendFrom = {
   MpBot: 2,
   User: 1,
-} as const;
+} as const; // 发送来源
 
+// TODO @hw：是不是用 SendFrom ，或者 number？
 type SendFromType = (typeof SendFrom)[keyof typeof SendFrom];
 
 // 显式引用枚举成员供模板使用
+// TODO @hw：是不是用 SendFrom 就好啦？
 const MpBotValue = SendFrom.MpBot;
 const UserValue = SendFrom.User;
 
@@ -72,6 +74,8 @@ const getNickname = (sendFrom: SendFromType) =>
 
 <style lang="scss" scoped>
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
+/** TODO @dylan：@hw 看看有没适合 tindwind 的哈。 */
+
 @import url('../comment.scss');
 @import url('../card.scss');
 </style>

apps/web-ele/src/views/mp/components/wx-msg/types.ts

@@ -1,3 +1,4 @@
+// TODO @hw：是不是放枚举里？
 export enum MsgType {
   Event = 'event',
   Image = 'image',
@@ -10,6 +11,7 @@ export enum MsgType {
   Voice = 'voice',
 }
 
+// TODO @hw：用 MpUserApi 里的 user 可以么？
 export interface User {
   nickname: string;
   avatar: string;

apps/web-ele/src/views/mp/components/wx-msg/wx-msg.vue

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import Location from '#/views/mp/components/location/location.vue';
-import Music from '#/views/mp/components/music/music.vue';
-import News from '#/views/mp/components/news/news.vue';
-import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
-import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
+import Location from '#/views/mp/components/wx-location/wx-location.vue';
+import Music from '#/views/mp/components/wx-music/wx-music.vue';
+import News from '#/views/mp/components/wx-news/wx-news.vue';
+import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
+import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
 
 import { MsgType } from '../types';
 import MsgEvent from './msg-event.vue';
 
 defineOptions({ name: 'Msg' });
 
+// TODO @hw：这个貌似和 antd 的差很多？
+
 const props = defineProps<{
   item: any;
 }>();
@@ -86,5 +88,3 @@ const item = ref<any>(props.item);
     </div>
   </div>
 </template>
-
-<style scoped></style>

apps/web-ele/src/views/mp/components/wx-music/index.ts

@@ -0,0 +1,3 @@
+export { default } from './wx-music.vue';
+
+// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

apps/web-ele/src/views/mp/components/wx-music/wx-music.vue

@@ -1,7 +1,5 @@
-<!--
-  【微信消息 - 音乐】
--->
 <script lang="ts" setup>
+/** 微信消息 - 音乐 */
 defineOptions({ name: 'Music' });
 
 const props = defineProps({
@@ -38,6 +36,7 @@ defineExpose({
 
 <template>
   <div>
+    <!-- TODO @hw：ElLink -->
     <el-link
       type="success"
       :underline="false"
@@ -62,6 +61,8 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
-@import url('../msg/card.scss');
+@import url('../wx-msg/card.scss');
 </style>

apps/web-ele/src/views/mp/components/wx-news/index.ts

@@ -0,0 +1,3 @@
+export { default as WxNews } from './wx-news.vue';
+
+// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

apps/web-ele/src/views/mp/components/wx-news/wx-news.vue

@@ -6,6 +6,9 @@
   ① 代码优化，补充注释，提升阅读性
 -->
 <script lang="ts" setup>
+import { ElImage } from 'element-plus';
+
+/** 微信消息 - 图文 */
 defineOptions({ name: 'WxNews' });
 
 const props = withDefaults(
@@ -28,11 +31,10 @@ defineExpose({
       <!-- 头条 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
         <div class="news-main">
-          <div class="news-content">
-            <el-image
+          <div class="news-content flex items-center justify-center">
+            <ElImage
               :src="article.picUrl || article.thumbUrl"
               class="material-img"
-              style="width: 100%; height: 120px"
             />
             <div class="news-content-title">
               <span>{{ article.title }}</span>
@@ -45,7 +47,7 @@ defineExpose({
         <div class="news-main-item">
           <div class="news-content-item">
             <div class="news-content-item-title">{{ article.title }}</div>
-            <div class="news-content-item-img">
+            <div class="news-content-item-img flex items-center justify-center">
               <img
                 :src="article.picUrl || article.thumbUrl"
                 class="material-img"
@@ -60,6 +62,8 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+
 .news-home {
   width: 100%;
   margin: auto;
@@ -118,6 +122,9 @@ defineExpose({
 }
 
 .material-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
 }
 </style>

apps/web-ele/src/views/mp/components/wx-reply/index.ts

@@ -0,0 +1,5 @@
+export { createEmptyReply, type Reply, ReplyType } from './types';
+
+export { default } from './wx-reply.vue';
+
+// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue

@@ -18,7 +18,7 @@ import {
 } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -28,9 +28,11 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
+// TODO @hw：直接用 ElMessage
 const message = ElMessage;
 
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+// TODO @hw：看看要不要和 antd 保持一致的风格；
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 const reply = computed<Reply>({
   get: () => props.modelValue,
@@ -41,9 +43,9 @@ const showDialog = ref(false);
 const fileList = ref([]);
 const uploadData = reactive({
   accountId: reply.value.accountId,
-  type: 'image',
-  title: '',
   introduction: '',
+  title: '',
+  type: 'image',
 });
 
 /** 图片上传前校验 */
@@ -156,6 +158,4 @@ function selectMaterial(item: any) {
       </ElCol>
     </ElRow>
   </div>
-</template>
-
-<style lang="scss" scoped></style>
+</template>

apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { UploadRawFile } from 'element-plus';
 
+// TODO @hw：类似 tab-image.vue 的建议
 import type { Reply } from './types';
 
 import { computed, reactive, ref } from 'vue';
@@ -19,10 +20,7 @@ import {
 } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-// import { getAccessToken } from '@/utils/auth'
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
-
-// 设置上传的请求头部
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -45,9 +43,9 @@ const showDialog = ref(false);
 const fileList = ref([]);
 const uploadData = reactive({
   accountId: reply.value.accountId,
-  type: 'thumb', // 音乐类型为thumb
-  title: '',
   introduction: '',
+  title: '',
+  type: 'thumb', // 音乐类型为 thumb
 });
 
 /** 图片上传前校验 */

apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue

@@ -7,18 +7,22 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';
 
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
-import News from '#/views/mp/components/news/news.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
+import News from '#/views/mp/components/wx-news/wx-news.vue';
 
-import { NewsType } from '../material-select/types';
+import { NewsType } from '../wx-material-select/types';
+
+defineOptions({ name: 'TabNews' });
 
 const props = defineProps<{
   modelValue: Reply;
   newsType: NewsType;
 }>();
+
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
+
 const reply = computed<Reply>({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
@@ -84,5 +88,3 @@ function onDelete() {
     </ElRow>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue

@@ -19,8 +19,10 @@ import {
 } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
-import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
+import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
+
+defineOptions({ name: 'TabVideo' });
 
 const props = defineProps<{
   modelValue: Reply;
@@ -30,13 +32,16 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
+// TODO @hw：还是用 ElMessage
 const message = ElMessage;
 
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+// TODO @hw：这里 antd 和 ele 有差异，要统一么？
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 
 const reply = computed<Reply>({
   get: () => props.modelValue,
+  // TODO @hw：这里 antd 和 ele 有差异，要统一么？
   set: (val: Reply) => emit('update:modelValue', val),
 });
 
@@ -44,9 +49,9 @@ const showDialog = ref(false);
 const fileList = ref([]);
 const uploadData = reactive({
   accountId: reply.value.accountId,
-  type: 'video',
-  title: '',
   introduction: '',
+  title: '',
+  type: 'video',
 });
 
 /** 视频上传前校验 */
@@ -142,5 +147,3 @@ function selectMaterial(item: any) {
     </ElRow>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

apps/web-ele/src/views/mp/components/wx-reply/tab-voice.vue

@@ -18,10 +18,10 @@ import {
 } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
-import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
+import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
 
-// 设置上传的请求头部
+defineOptions({ name: 'TabVoice' });
 
 const props = defineProps<{
   modelValue: Reply;
@@ -31,12 +31,15 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
+// TODO @hw：用 ElMessage
 const message = ElMessage;
 
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+// TODO @hw：antd 和 ele 写法的统一；
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 const reply = computed<Reply>({
   get: () => props.modelValue,
+  // TODO @hw：这里要和 antd 统一么？还是 ele 和它统一
   set: (val: Reply) => emit('update:modelValue', val),
 });
 
@@ -44,9 +47,9 @@ const showDialog = ref(false);
 const fileList = ref([]);
 const uploadData = reactive({
   accountId: reply.value.accountId,
-  type: 'voice',
-  title: '',
   introduction: '',
+  title: '',
+  type: 'voice',
 });
 
 /** 语音上传前校验 */
@@ -155,6 +158,4 @@ function selectMaterial(item: Reply) {
       </ElCol>
     </ElRow>
   </div>
-</template>
-
-<style lang="scss" scoped></style>
+</template>

apps/web-ele/src/views/mp/components/wx-reply/types.ts

@@ -2,6 +2,7 @@ import type { Ref } from 'vue';
 
 import { unref } from 'vue';
 
+// TODO @hw：和 antd 风格，保持一致；
 enum ReplyType {
   Image = 'image',
   Music = 'music',
@@ -30,7 +31,7 @@ interface _Reply {
 
 type Reply = _Reply; // Partial<_Reply>
 
-/** 利用旧的reply[accountId, type]初始化新的Reply */
+/** 利用旧的 reply[accountId, type] 初始化新的 Reply */
 const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
   return {
     accountId: unref(old).accountId,

apps/web-ele/src/views/mp/components/wx-reply/wx-reply.vue

@@ -1,12 +1,3 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  芋道源码：
-  ① 移除多余的 rep 为前缀的变量，让 message 消息更简单
-  ② 代码优化，补充注释，提升阅读性
-  ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
-  ④ 支持发送【视频】消息时，支持新建视频
--->
 <script lang="ts" setup>
 import type { Reply } from './types';
 
@@ -16,7 +7,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElRow, ElTabPane, ElTabs } from 'element-plus';
 
-import { NewsType } from '../material-select/types';
+import { NewsType } from '../wx-material-select/types';
 import TabImage from './tab-image.vue';
 import TabMusic from './tab-music.vue';
 import TabNews from './tab-news.vue';
@@ -25,7 +16,8 @@ import TabVideo from './tab-video.vue';
 import TabVoice from './tab-voice.vue';
 import { createEmptyReply, ReplyType } from './types';
 
-defineOptions({ name: 'ReplySelect' });
+/** 消息回复选择 */
+defineOptions({ name: 'WxReplySelect' });
 
 const props = withDefaults(
   defineProps<{
@@ -36,14 +28,15 @@ const props = withDefaults(
     newsType: () => NewsType.Published,
   },
 );
+
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
-// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
+
 const defaultReply: Reply = {
   accountId: -1,
   type: ReplyType.Text,
-};
+}; // 提供一个默认的 Reply 对象，避免 undefined 导致的错误
 
 const reply = computed<Reply>({
   get: () => props.modelValue || defaultReply,
@@ -112,6 +105,4 @@ defineExpose({
       <TabMusic v-model="reply" />
     </ElTabPane>
   </ElTabs>
-</template>
-
-<style lang="scss" scoped></style>
+</template>

apps/web-ele/src/views/mp/components/wx-video-play/index.ts

@@ -0,0 +1,3 @@
+export { default } from './wx-video-play.vue';
+
+// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue

@@ -1,15 +1,3 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  【微信消息 - 视频】
-  芋道源码：
-  ① bug 修复：
-    1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
-      存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
-    2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
-  ② 体验优化：弹窗关闭后，自动暂停视频的播放
-
--->
 <script lang="ts" setup>
 import { ref } from 'vue';
 
@@ -20,8 +8,10 @@ import { ElDialog } from 'element-plus';
 
 import 'video.js/dist/video-js.css';
 
-defineOptions({ name: 'VideoPlayer' });
+/** 微信消息 - 视频 */
+defineOptions({ name: 'WxVideoPlayer' });
 
+// TODO @hw：antd 或者 ele，props 保持一致；
 const props = defineProps({
   url: {
     type: String,
@@ -31,10 +21,6 @@ const props = defineProps({
 
 const dialogVideo = ref(false);
 
-// const handleEvent = (log) => {
-//   console.log('Basic player event', log)
-// }
-
 const playVideo = () => {
   dialogVideo.value = true;
 };
@@ -61,6 +47,7 @@ const playVideo = () => {
         :width="800"
         :playback-rates="[0.7, 1.0, 1.5, 2.0]"
       />
+      <!-- TODO @hw：删除掉？ -->
       <!--     事件，暫時沒用
       @mounted="handleMounted"-->
       <!--        @ready="handleEvent($event)"-->

apps/web-ele/src/views/mp/components/wx-voice-play/index.ts

@@ -0,0 +1,3 @@
+export { default } from './wx-voice-play.vue';
+
+// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue

@@ -1,14 +1,3 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  【微信消息 - 语音】
-   芋道源码：
-  ① bug 修复：
-    1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
-      存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
-    2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
-  ② 代码优化：将 props 中的 reply 调成为 data 中对应的属性，并补充相关注释
--->
 <script lang="ts" setup>
 import { ref } from 'vue';
 
@@ -17,8 +6,10 @@ import { IconifyIcon } from '@vben/icons';
 // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
 import BenzAMRRecorder from 'benz-amr-recorder';
 
+/** 微信消息 - 语音 */
 defineOptions({ name: 'VoicePlayer' });
 
+// TODO @hw：antd 和 ele 代码风格一致；
 const props = defineProps({
   url: {
     type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
@@ -92,6 +83,7 @@ const amrStop = () => {
   </div>
 </template>
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .wx-voice-div {
   display: flex;
   align-items: center;

apps/web-ele/src/views/mp/draft/data.ts

@@ -1,10 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { markRaw } from 'vue';
-
-import AccountSelect from '#/views/mp/components/account-select/account-select.vue';
-
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
@@ -14,12 +10,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 300,
       slots: { default: 'content' },
     },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
     {
       title: '操作',
       width: 200,
@@ -35,7 +25,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: markRaw(AccountSelect),
+      component: 'Input',
     },
   ];
 }

apps/web-ele/src/views/mp/draft/index.vue

@@ -3,15 +3,14 @@ import type { Article } from './modules/types';
 
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { nextTick, onMounted, provide, ref, watch } from 'vue';
-
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MpDraftApi from '#/api/mp/draft';
+import { deleteDraft, getDraftPage } from '#/api/mp/draft';
 import * as MpFreePublishApi from '#/api/mp/freePublish';
+import { WxAccountSelect } from '#/views/mp/components';
 import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -25,10 +24,22 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 公众号变化时查询数据 */
+function handleAccountChange(accountId: number) {
+  gridApi.formApi.setValues({ accountId });
+  gridApi.formApi.submitForm();
+}
+
+// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
-    submitOnChange: true,
   },
   gridOptions: {
     columns: useGridColumns(),
@@ -37,68 +48,23 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          // 更新 accountId
-          if (formValues?.accountId) {
-            accountId.value = formValues.accountId;
-          }
-          const drafts = await MpDraftApi.getDraftPage({
+          const drafts = await getDraftPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
           });
-          // 处理 API 返回的数据，兼容不同的数据结构
-          const formattedList: Article[] = drafts.list.map((draft: any) => {
-            // 如果已经是 content.newsItem 格式，直接使用
-            if (draft.content?.newsItem) {
-              const newsItem = draft.content.newsItem.map((item: any) => ({
-                ...item,
-                picUrl: item.thumbUrl || item.picUrl,
-              }));
-              return {
-                mediaId: draft.mediaId,
-                content: {
-                  newsItem,
-                },
-                updateTime:
-                  draft.updateTime ||
-                  (draft.createTime
-                    ? new Date(draft.createTime).getTime()
-                    : Date.now()),
-              };
+          // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
+          drafts.list.forEach((draft: any) => {
+            const newsList = draft.content?.newsItem;
+            if (newsList) {
+              newsList.forEach((item: any) => {
+                item.picUrl = item.thumbUrl || item.picUrl;
+              });
             }
-            // 如果是 articles 格式，转换为 content.newsItem 格式
-            if (draft.articles) {
-              const newsItem = draft.articles.map((article: any) => ({
-                ...article,
-                thumbUrl: article.thumbUrl || article.thumbMediaId,
-                picUrl: article.thumbUrl || article.thumbMediaId,
-              }));
-              return {
-                mediaId: draft.mediaId,
-                content: {
-                  newsItem,
-                },
-                updateTime:
-                  draft.updateTime ||
-                  (draft.createTime
-                    ? new Date(draft.createTime).getTime()
-                    : Date.now()),
-              };
-            }
-            // 默认返回空结构
-            return {
-              mediaId: draft.mediaId || '',
-              content: {
-                newsItem: [],
-              },
-              updateTime: draft.updateTime || Date.now(),
-            };
           });
           return {
-            page: {
-              total: drafts.total,
-            },
-            result: formattedList,
+            list: drafts.list as unknown as Article[],
+            total: drafts.total,
           };
         },
       },
@@ -115,21 +81,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<Article>,
 });
 
-// 提供 accountId 给子组件
-const accountId = ref<number>(-1);
-
-// 监听表单提交，更新 accountId
-watch(
-  () => gridApi.formApi?.getLatestSubmissionValues?.()?.accountId,
-  (newAccountId) => {
-    if (newAccountId !== undefined) {
-      accountId.value = newAccountId;
-    }
-  },
-);
-
-provide('accountId', accountId);
-
 /** 新增按钮操作 */
 async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
@@ -162,7 +113,7 @@ async function handleEdit(row: Article) {
       isCreating: false,
       accountId,
       mediaId: row.mediaId,
-      newsList: structuredClone(row.content.newsItem),
+      newsList: row.content.newsItem,
     })
     .open();
 }
@@ -201,7 +152,7 @@ async function handlePublish(row: Article) {
 async function handleDelete(row: Article) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
     ElMessage.warning('请先选择公众号');
     return;
   }
@@ -212,9 +163,9 @@ async function handleDelete(row: Article) {
       text: '删除中...',
     });
     try {
-      await MpDraftApi.deleteDraft(accountId, row.mediaId);
+      await deleteDraft(accountId, row.mediaId);
       ElMessage.success('删除成功');
-      await gridApi.query();
+      handleRefresh();
     } finally {
       loadingInstance.close();
     }
@@ -222,19 +173,6 @@ async function handleDelete(row: Article) {
     //
   }
 }
-
-// 页面挂载后，等待表单初始化完成再加载数据
-onMounted(async () => {
-  await nextTick();
-  if (gridApi.formApi) {
-    const formValues = await gridApi.formApi.getValues();
-    if (formValues.accountId) {
-      accountId.value = formValues.accountId;
-      gridApi.formApi.setLatestSubmissionValues(formValues);
-      await gridApi.query();
-    }
-  }
-});
 </script>
 
 <template>
@@ -243,20 +181,17 @@ onMounted(async () => {
       <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
     </template>
 
-    <FormModal
-      @success="
-        () => {
-          gridApi.query();
-        }
-      "
-    />
+    <FormModal @success="handleRefresh" />
 
     <Grid table-title="草稿列表">
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: '新增',
+              label: $t('ui.actionTitle.create', ['图文草稿']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['mp:draft:create'],
@@ -310,7 +245,12 @@ onMounted(async () => {
   .vxe-table--body {
     .vxe-body--column {
       .vxe-cell {
+        height: auto !important;
         padding: 0;
+
+        img {
+          width: 300px !important;
+        }
       }
     }
   }

apps/web-ele/src/views/mp/draft/mock.js

@@ -1,3 +1,4 @@
+// TODO @hw：要不要删除
 export default {
   list: [
     {

apps/web-ele/src/views/mp/draft/modules/cover-select.vue

@@ -11,9 +11,9 @@ import { useAccessStore } from '@vben/stores';
 import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 
-// 设置上传的请求头部
+// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
 
 const props = defineProps<{
   isFirst: boolean;
@@ -80,20 +80,22 @@ function onUploadError(err: Error) {
 <template>
   <div>
     <p>封面:</p>
-    <div class="thumb-div">
+    <div
+      class="inline-flex w-full flex-col items-center justify-center text-center"
+    >
       <ElImage
         v-if="newsItem.thumbUrl"
-        style="width: 300px; max-height: 300px"
+        class="max-h-[300px] w-[300px]"
         :src="newsItem.thumbUrl"
         fit="contain"
       />
       <IconifyIcon
         v-else
         icon="ep:plus"
-        class="avatar-uploader-icon"
-        :class="isFirst ? 'avatar' : 'avatar1'"
+        class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
+        :class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
       />
-      <div class="thumb-but">
+      <div class="m-1.5">
         <ElUpload
           :action="UPLOAD_URL"
           :headers="HEADERS"
@@ -112,12 +114,12 @@ function onUploadError(err: Error) {
             size="small"
             type="primary"
             @click="showImageDialog = true"
-            style="margin-left: 5px"
+            class="ml-1.5"
           >
             素材库选择
           </ElButton>
           <template #tip>
-            <div class="el-upload__tip">
+            <div class="ml-1.5">
               支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
             </div>
           </template>
@@ -139,43 +141,3 @@ function onUploadError(err: Error) {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.el-upload__tip {
-  margin-left: 5px;
-}
-
-.thumb-div {
-  display: inline-block;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  text-align: center;
-
-  .avatar-uploader-icon {
-    width: 120px;
-    height: 120px;
-    font-size: 28px;
-    line-height: 120px;
-    color: #8c939d;
-    text-align: center;
-    border: 1px solid #d9d9d9;
-  }
-
-  .avatar {
-    width: 230px;
-    height: 120px;
-  }
-
-  .avatar1 {
-    width: 120px;
-    height: 120px;
-  }
-
-  .thumb-but {
-    margin: 5px;
-  }
-}
-</style>

apps/web-ele/src/views/mp/draft/modules/draft-table.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import type { Article } from './types';
 
-import News from '#/views/mp/components/news/news.vue';
+import News from '#/views/mp/components/wx-news/wx-news.vue';
 
+// TODO @hw：按照微信里说的，感觉这个可以干掉。少点组件哈。= = mp 模块，小组件可太多了。。。
 defineOptions({ name: 'DraftTableCell' });
 
 const props = defineProps<{
@@ -11,15 +12,9 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="draft-content">
+  <div class="p-2.5">
     <div v-if="props.row.content && props.row.content.newsItem">
       <News :articles="props.row.content.newsItem" />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.draft-content {
-  padding: 10px;
-}
-</style>

apps/web-ele/src/views/mp/draft/modules/form.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { NewsItem } from './types';
 
-import { computed, ref } from 'vue';
+import { computed, provide, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
@@ -13,6 +13,8 @@ import NewsForm from './news-form.vue';
 
 const emit = defineEmits(['success']);
 
+// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
+
 const formData = ref<{
   accountId: number;
   isCreating: boolean;
@@ -27,6 +29,11 @@ const getTitle = computed(() => {
   return formData.value?.isCreating ? '新建图文' : '修改图文';
 });
 
+// 提供 accountId 给子组件
+provide(
+  'accountId',
+  computed(() => formData.value?.accountId),
+);
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     if (!formData.value) {

apps/web-ele/src/views/mp/draft/modules/news-form.vue

@@ -3,6 +3,7 @@ import type { NewsItem } from './types';
 
 import { computed, ref } from 'vue';
 
+import { confirm } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import {
@@ -12,7 +13,6 @@ import {
   ElContainer,
   ElInput,
   ElMain,
-  ElMessageBox,
   ElRow,
 } from 'element-plus';
 
@@ -28,7 +28,6 @@ const props = defineProps<{
   modelValue: NewsItem[] | null;
 }>();
 
-// v-model=newsList
 const emit = defineEmits<{
   (e: 'update:modelValue', v: NewsItem[]): void;
 }>();
@@ -53,7 +52,7 @@ const activeNewsItem = computed(() => {
   return item;
 });
 
-// 将图文向下移动
+/** 将图文向下移动 */
 function moveDownNews(index: number) {
   const current = newsList.value[index];
   const next = newsList.value[index + 1];
@@ -64,7 +63,7 @@ function moveDownNews(index: number) {
   }
 }
 
-// 将图文向上移动
+/** 将图文向上移动 */
 function moveUpNews(index: number) {
   const current = newsList.value[index];
   const prev = newsList.value[index - 1];
@@ -75,20 +74,16 @@ function moveUpNews(index: number) {
   }
 }
 
-// 删除指定 index 的图文
+/** 删除指定 index 的图文 */
 async function removeNews(index: number) {
-  try {
-    await ElMessageBox.confirm('确定删除该图文吗?');
-    newsList.value.splice(index, 1);
-    if (activeNewsIndex.value === index) {
-      activeNewsIndex.value = 0;
-    }
-  } catch {
-    // empty
+  await confirm('确定删除该图文吗?');
+  newsList.value.splice(index, 1);
+  if (activeNewsIndex.value === index) {
+    activeNewsIndex.value = 0;
   }
 }
 
-// 添加一个图文
+/** 添加一个图文 */
 function plusNews() {
   newsList.value.push(createEmptyNewsItem());
   activeNewsIndex.value = newsList.value.length - 1;
@@ -98,19 +93,28 @@ function plusNews() {
 <template>
   <ElContainer>
     <ElAside width="40%">
-      <div class="select-item">
+      <div class="mx-auto mb-2.5 w-3/5 border border-gray-200 p-2.5">
         <div v-for="(news, index) in newsList" :key="index">
           <div
-            class="news-main father"
+            class="group mx-auto h-[120px] w-full cursor-pointer bg-white"
             v-if="index === 0"
-            :class="{ activeAddNews: activeNewsIndex === index }"
+            :class="{
+              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
+            }"
             @click="activeNewsIndex = index"
           >
-            <div class="news-content">
-              <img class="material-img" :src="news.thumbUrl" />
-              <div class="news-content-title">{{ news.title }}</div>
+            <div class="relative h-[120px] w-full bg-[#acadae]">
+              <img class="h-full w-full" :src="news.thumbUrl" />
+              <div
+                class="absolute bottom-0 left-0 inline-block h-[25px] w-[98%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-[15px] text-white opacity-65"
+              >
+                {{ news.title }}
+              </div>
             </div>
-            <div class="child" v-if="newsList.length > 1">
+            <div
+              v-if="newsList.length > 1"
+              class="relative -bottom-6 hidden text-center group-hover:block"
+            >
               <ElButton
                 type="info"
                 circle
@@ -130,19 +134,26 @@ function plusNews() {
               </ElButton>
             </div>
           </div>
+          <!-- TODO @hw：1）每个文章的选中框太粗了；2）没完全覆盖住文章；；；最好首个文章，和第个文章的情况，都看看 -->
           <div
-            class="news-main-item father"
+            class="group mx-auto w-full cursor-pointer border-t border-gray-200 bg-white py-1.5"
             v-if="index > 0"
-            :class="{ activeAddNews: activeNewsIndex === index }"
+            :class="{
+              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
+            }"
             @click="activeNewsIndex = index"
           >
-            <div class="news-content-item">
-              <div class="news-content-item-title">{{ news.title }}</div>
-              <div class="news-content-item-img">
-                <img class="material-img" :src="news.thumbUrl" width="100%" />
+            <div class="relative -ml-0.5">
+              <div class="inline-block w-[70%] text-xs">{{ news.title }}</div>
+              <div class="inline-block w-1/4 bg-[#acadae]">
+                <img class="h-full w-full" :src="news.thumbUrl" width="100%" />
               </div>
             </div>
-            <div class="child">
+            <!-- TODO @hw：这里的按钮，交互不太对。应该在每个卡片的里面；或者类似公众号现在的交互，放到右侧；。。。复现本周：如果有 2 个文章的时候 -->
+            <!-- TODO @hw：当有 2 个文章的时候，挪到第二个文章的时候，卡片会变大。期望：不变大 -->
+            <div
+              class="relative -bottom-6 hidden text-center group-hover:block"
+            >
               <ElButton
                 v-if="newsList.length > index + 1"
                 circle
@@ -173,7 +184,10 @@ function plusNews() {
             </div>
           </div>
         </div>
-        <ElRow justify="center" class="ope-row">
+        <ElRow
+          justify="center"
+          class="mt-1.5 border-t border-gray-200 pt-1.5 text-center"
+        >
           <ElButton
             type="primary"
             circle
@@ -188,7 +202,7 @@ function plusNews() {
     <ElMain>
       <div v-if="newsList.length > 0 && activeNewsItem">
         <!-- 标题、作者、原文地址 -->
-        <ElRow :gutter="20">
+        <ElRow :gutter="20" class="mb-5 last:mb-0">
           <ElInput
             v-model="activeNewsItem.title"
             placeholder="请输入标题（必填）"
@@ -196,16 +210,16 @@ function plusNews() {
           <ElInput
             v-model="activeNewsItem.author"
             placeholder="请输入作者"
-            style="margin-top: 5px"
+            class="mt-1.5"
           />
           <ElInput
             v-model="activeNewsItem.contentSourceUrl"
             placeholder="请输入原文地址"
-            style="margin-top: 5px"
+            class="mt-1.5"
           />
         </ElRow>
         <!-- 封面和摘要 -->
-        <ElRow :gutter="20">
+        <ElRow :gutter="20" class="mb-5 last:mb-0">
           <ElCol :span="12">
             <CoverSelect
               v-model="activeNewsItem"
@@ -219,123 +233,16 @@ function plusNews() {
               type="textarea"
               v-model="activeNewsItem.digest"
               placeholder="请输入摘要"
-              class="digest"
+              class="inline-block w-full align-top"
               maxlength="120"
             />
           </ElCol>
         </ElRow>
         <!--富文本编辑器组件-->
-        <ElRow>
+        <ElRow class="mb-5 last:mb-0">
           <RichTextarea v-model="activeNewsItem.content" />
         </ElRow>
       </div>
     </ElMain>
   </ElContainer>
 </template>
-
-<style lang="scss" scoped>
-.ope-row {
-  padding-top: 5px;
-  margin-top: 5px;
-  text-align: center;
-  border-top: 1px solid #eaeaea;
-}
-
-.el-row {
-  margin-bottom: 20px;
-}
-
-.el-row:last-child {
-  margin-bottom: 0;
-}
-
-.digest {
-  display: inline-block;
-  width: 100%;
-  vertical-align: top;
-}
-
-/* 新增图文 */
-.news-main {
-  width: 100%;
-  height: 120px;
-  margin: auto;
-  background-color: #fff;
-}
-
-.news-content {
-  position: relative;
-  width: 100%;
-  height: 120px;
-  background-color: #acadae;
-}
-
-.news-content-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: inline-block;
-  width: 98%;
-  height: 25px;
-  padding: 1%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 15px;
-  color: #fff;
-  white-space: nowrap;
-  background-color: black;
-  opacity: 0.65;
-}
-
-.news-main-item {
-  width: 100%;
-  padding: 5px 0;
-  margin: auto;
-  background-color: #fff;
-  border-top: 1px solid #eaeaea;
-}
-
-.news-content-item {
-  position: relative;
-  margin-left: -3px;
-}
-
-.news-content-item-title {
-  display: inline-block;
-  width: 70%;
-  font-size: 12px;
-}
-
-.news-content-item-img {
-  display: inline-block;
-  width: 25%;
-  background-color: #acadae;
-}
-
-.select-item {
-  width: 60%;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-
-  .activeAddNews {
-    border: 5px solid #2bb673;
-  }
-}
-
-.father .child {
-  position: relative;
-  bottom: 25px;
-  display: none;
-  text-align: center;
-}
-
-.father:hover .child {
-  display: block;
-}
-
-.material-img {
-  width: 100%;
-  height: 100%;
-}
-</style>

apps/web-ele/src/views/mp/draft/modules/types.ts

@@ -1,3 +1,4 @@
+// TODO @hw：合并到 api 里，参考 antd 的做法；
 interface NewsItem {
   title: string;
   thumbMediaId: string;

apps/web-ele/src/views/mp/menu/data.ts

@@ -1,6 +1,7 @@
 import type { VbenFormSchema } from '#/adapter/form';
 
 import { getSimpleAccountList } from '#/api/mp/account';
+
 /** 菜单未选中标识 */
 export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
 
@@ -10,6 +11,7 @@ export enum Level {
   Parent = '1',
   Undefined = '0',
 }
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [

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

@@ -19,7 +19,7 @@ import {
 import MenuEditor from '#/views/mp/menu/modules/menu-editor.vue';
 import MenuPreviewer from '#/views/mp/menu/modules/menu-previewer.vue';
 
-// Assets for backgrounds
+// TODO @hw：是不是资源的地址，统一下；antd 和 ele，目录不同。建议按照 ele 的方法先；
 import iphoneBackImg from './assets/iphone_backImg.png';
 import menuFootImg from './assets/menu_foot.png';
 import menuHeadImg from './assets/menu_head.png';
@@ -27,12 +27,14 @@ import menuHeadImg from './assets/menu_head.png';
 defineOptions({ name: 'MpMenu' });
 
 // ======================== 列表查询 ========================
+
 const loading = ref(false); // 遮罩层
 const accountId = ref(-1);
 const accountName = ref<string>('');
 const menuList = ref<Menu[]>([]);
 
 // ======================== 菜单操作 ========================
+
 // 当前选中菜单编码：
 //  * 一级（'x'）
 //  * 二级（'x-y'）
@@ -44,6 +46,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
@@ -60,7 +63,6 @@ const tempSelfObj = ref<{
 });
 const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
 
-// 创建表单
 const [AccountForm, accountFormApi] = useVbenForm({
   commonConfig: {
     componentProps: {
@@ -304,6 +306,7 @@ onMounted(async () => {
   await nextTick();
   await initAccountId();
 });
+// TODO @hw：这个界面：整理下代码，整体的风格、方法的顺序、注释，参考 antd 哈；
 </script>
 
 <template>

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

@@ -14,12 +14,13 @@ import {
   ElSelect,
 } from 'element-plus';
 
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
-import News from '#/views/mp/components/news/news.vue';
-import ReplySelect from '#/views/mp/components/reply/reply.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
+import News from '#/views/mp/components/wx-news/wx-news.vue';
+import ReplySelect from '#/views/mp/components/wx-reply/wx-reply.vue';
 
 import menuOptions from './menuOptions';
 
+// TODO @hw：去掉 menu- 前缀
 const props = defineProps<{
   accountId: number;
   isParent: boolean;
@@ -40,6 +41,7 @@ const menu = computed({
   },
 });
 const showNewsDialog = ref(false);
+// TODO @hw：这个 reset 还有用么？
 const hackResetWxReplySelect = ref(false);
 const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
 
@@ -51,6 +53,7 @@ watch(menu, () => {
 });
 
 // ======================== 菜单编辑（素材选择） ========================
+
 /** 选择素材 */
 function selectMaterial(item: any) {
   const articleId = item.articleId;

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

@@ -7,6 +7,8 @@ import { IconifyIcon } from '@vben/icons';
 
 import draggable from 'vuedraggable';
 
+// TODO @hw：文件名，不用带 menu- 前缀；
+
 const props = defineProps<{
   accountId: number;
   activeIndex: string;

apps/web-ele/src/views/mp/menu/modules/menuOptions.ts

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

apps/web-ele/src/views/mp/user/modules/form.vue

@@ -39,11 +39,11 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    /** 提交表单 */
+    // 提交表单
     const values = (await formApi.getValues()) as MpUserApi.User;
     try {
       await updateUser({ ...formData.value, ...values });
-      /** 关闭并提示 */
+      // 关闭并提示
       await modalApi.close();
       emit('success');
       ElMessage.success($t('ui.actionMessage.operationSuccess'));
@@ -56,7 +56,7 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-    /** 加载数据 */
+    // 加载数据
     const data = modalApi.getData<{ id: number }>();
     if (!data || !data.id) {
       return;
@@ -64,7 +64,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = await getUser(data.id);
-      /** 设置到 values */
+      // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();