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

apps/web-ele/src/views/_core/profile/base-setting.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { BasicOption } from '@vben/types';
+
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { ProfileBaseSetting } from '@vben/common-ui';
+
+import { getUserInfoApi } from '#/api';
+
+const profileBaseSettingRef = ref();
+
+const MOCK_ROLES_OPTIONS: BasicOption[] = [
+  {
+    label: '管理员',
+    value: 'super',
+  },
+  {
+    label: '用户',
+    value: 'user',
+  },
+  {
+    label: '测试',
+    value: 'test',
+  },
+];
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      fieldName: 'realName',
+      component: 'Input',
+      label: '姓名',
+    },
+    {
+      fieldName: 'username',
+      component: 'Input',
+      label: '用户名',
+    },
+    {
+      fieldName: 'roles',
+      component: 'Select',
+      componentProps: {
+        mode: 'tags',
+        options: MOCK_ROLES_OPTIONS,
+      },
+      label: '角色',
+    },
+    {
+      fieldName: 'introduction',
+      component: 'Textarea',
+      label: '个人简介',
+    },
+  ];
+});
+
+onMounted(async () => {
+  const data = await getUserInfoApi();
+  profileBaseSettingRef.value.getFormApi().setValues(data);
+});
+</script>
+<template>
+  <ProfileBaseSetting ref="profileBaseSettingRef" :form-schema="formSchema" />
+</template>

apps/web-ele/src/views/_core/profile/notification-setting.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { ProfileNotificationSetting } from '@vben/common-ui';
+
+const formSchema = computed(() => {
+  return [
+    {
+      value: true,
+      fieldName: 'accountPassword',
+      label: '账户密码',
+      description: '其他用户的消息将以站内信的形式通知',
+    },
+    {
+      value: true,
+      fieldName: 'systemMessage',
+      label: '系统消息',
+      description: '系统消息将以站内信的形式通知',
+    },
+    {
+      value: true,
+      fieldName: 'todoTask',
+      label: '待办任务',
+      description: '待办任务将以站内信的形式通知',
+    },
+  ];
+});
+</script>
+<template>
+  <ProfileNotificationSetting :form-schema="formSchema" />
+</template>

apps/web-ele/src/views/_core/profile/password-setting.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { computed, ref } from 'vue';
+
+import { ProfilePasswordSetting, z } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+const profilePasswordSettingRef = ref();
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      fieldName: 'oldPassword',
+      label: '旧密码',
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: '请输入旧密码',
+      },
+    },
+    {
+      fieldName: 'newPassword',
+      label: '新密码',
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: '请输入新密码',
+      },
+    },
+    {
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: '请再次输入新密码',
+      },
+      dependencies: {
+        rules(values) {
+          const { newPassword } = values;
+          return z
+            .string({ required_error: '请再次输入新密码' })
+            .min(1, { message: '请再次输入新密码' })
+            .refine((value) => value === newPassword, {
+              message: '两次输入的密码不一致',
+            });
+        },
+        triggerFields: ['newPassword'],
+      },
+    },
+  ];
+});
+
+function handleSubmit() {
+  ElMessage.success('密码修改成功');
+}
+</script>
+<template>
+  <ProfilePasswordSetting
+    ref="profilePasswordSettingRef"
+    class="w-1/3"
+    :form-schema="formSchema"
+    @submit="handleSubmit"
+  />
+</template>

apps/web-ele/src/views/_core/profile/security-setting.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { ProfileSecuritySetting } from '@vben/common-ui';
+
+const formSchema = computed(() => {
+  return [
+    {
+      value: true,
+      fieldName: 'accountPassword',
+      label: '账户密码',
+      description: '当前密码强度：强',
+    },
+    {
+      value: true,
+      fieldName: 'securityPhone',
+      label: '密保手机',
+      description: '已绑定手机：138****8293',
+    },
+    {
+      value: true,
+      fieldName: 'securityQuestion',
+      label: '密保问题',
+      description: '未设置密保问题，密保问题可有效保护账户安全',
+    },
+    {
+      value: true,
+      fieldName: 'securityEmail',
+      label: '备用邮箱',
+      description: '已绑定邮箱：ant***sign.com',
+    },
+    {
+      value: false,
+      fieldName: 'securityMfa',
+      label: 'MFA 设备',
+      description: '未绑定 MFA 设备，绑定后，可以进行二次确认',
+    },
+  ];
+});
+</script>
+<template>
+  <ProfileSecuritySetting :form-schema="formSchema" />
+</template>

apps/web-ele/src/views/ai/chat/index/index.vue

@@ -411,8 +411,8 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
           const lastMessage =
             activeMessageList.value[activeMessageList.value.length - 1];
           // 累加推理内容
-          lastMessage.reasoningContent =
-            (lastMessage.reasoningContent || '') +
+          lastMessage!.reasoningContent =
+            (lastMessage!.reasoningContent || '') +
             data.receive.reasoningContent;
         }
 
@@ -563,9 +563,9 @@ onMounted(async () => {
       />
 
       <!-- 右侧：详情部分 -->
-      <ElContainer direction="vertical" class="bg-card mx-4 flex-1">
+      <ElContainer direction="vertical" class="mx-4 flex-1 bg-card">
         <ElHeader
-          class="!bg-card border-border flex !h-12 items-center justify-between border-b !px-4"
+          class="flex !h-12 items-center justify-between border-b border-border !bg-card !px-4"
         >
           <div class="text-lg font-bold">
             {{ activeConversation?.title ? activeConversation?.title : '对话' }}
@@ -632,9 +632,9 @@ onMounted(async () => {
           </div>
         </ElMain>
 
-        <ElFooter height="auto" class="!bg-card flex flex-col !p-0">
+        <ElFooter height="auto" class="flex flex-col !bg-card !p-0">
           <form
-            class="border-border mx-4 mb-8 mt-2 flex flex-col rounded-xl border p-2"
+            class="mx-4 mb-8 mt-2 flex flex-col rounded-xl border border-border p-2"
           >
             <textarea
               class="box-border h-24 resize-none overflow-auto rounded-md p-2 focus:outline-none"

apps/web-ele/src/views/ai/chat/index/modules/conversation/list.vue

@@ -97,7 +97,7 @@ async function getChatConversationList() {
     // 1.1 获取 对话数据
     conversationList.value = await getChatConversationMyList();
     // 1.2 排序
-    conversationList.value.sort((a, b) => {
+    conversationList.value.toSorted((a, b) => {
       return Number(b.createTime) - Number(a.createTime);
     });
     // 1.3 没有任何对话情况
@@ -421,7 +421,7 @@ onMounted(async () => {
 
     <!-- 左底部：工具栏 -->
     <div
-      class="bg-card absolute bottom-1 left-0 right-0 mb-4 flex items-center justify-between px-5 leading-9 text-gray-400 shadow-sm"
+      class="absolute bottom-1 left-0 right-0 mb-4 flex items-center justify-between bg-card px-5 leading-9 text-gray-400 shadow-sm"
     >
       <div
         class="flex cursor-pointer items-center text-gray-400"

apps/web-ele/src/views/ai/chat/index/modules/message/file-upload.vue

@@ -138,14 +138,14 @@ async function uploadFile(fileItem: FileItem) {
     fileItem.progress = 100;
 
     // 调试日志
-    console.log('上传响应:', response);
+    console.warn('上传响应:', response);
 
     // 兼容不同的返回格式：{ url: '...' } 或 { data: '...' } 或直接是字符串
     const fileUrl =
       (response as any)?.url || (response as any)?.data || response;
     fileItem.url = fileUrl;
 
-    console.log('提取的文件 URL:', fileUrl);
+    console.warn('提取的文件 URL:', fileUrl);
 
     // 只有当 URL 有效时才添加到列表
     if (fileUrl && typeof fileUrl === 'string') {
@@ -242,7 +242,7 @@ onUnmounted(() => {
     <!-- Hover 显示的文件列表 -->
     <div
       v-if="hasFiles && showTooltip"
-      class="animate-in fade-in slide-in-from-bottom-1 absolute bottom-[calc(100%+8px)] left-1/2 z-[1000] min-w-[240px] max-w-[320px] -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-2 shadow-lg duration-200"
+      class="absolute bottom-[calc(100%+8px)] left-1/2 z-[1000] min-w-[240px] max-w-[320px] -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-2 shadow-lg duration-200 animate-in fade-in slide-in-from-bottom-1"
       @mouseenter="showTooltipHandler"
       @mouseleave="hideTooltipHandler"
     >

apps/web-ele/src/views/ai/chat/index/modules/message/knowledge.vue

@@ -66,7 +66,7 @@ function handleClick(doc: any) {
       <div
         v-for="(doc, index) in documentList"
         :key="index"
-        class="bg-card cursor-pointer rounded-lg p-2 px-3 transition-all hover:bg-blue-50"
+        class="cursor-pointer rounded-lg bg-card p-2 px-3 transition-all hover:bg-blue-50"
         @click="handleClick(doc)"
       >
         <div class="mb-1 text-sm text-gray-600">

apps/web-ele/src/views/ai/chat/index/modules/message/list.vue

@@ -233,7 +233,7 @@ onMounted(async () => {
   <!-- 回到底部按钮 -->
   <div
     v-if="isScrolling"
-    class="z-1000 absolute bottom-0 right-1/2"
+    class="absolute bottom-0 right-1/2 z-1000"
     @click="handleGoBottom"
   >
     <ElButton circle>

apps/web-ele/src/views/ai/chat/index/modules/role/list.vue

@@ -107,7 +107,7 @@ async function handleTabsScroll() {
                 <ElDropdownItem @click="handleMoreClick('edit', role)">
                   <div class="flex items-center">
                     <IconifyIcon icon="lucide:edit" color="#787878" />
-                    <span class="text-primary ml-2">编辑</span>
+                    <span class="ml-2 text-primary">编辑</span>
                   </div>
                 </ElDropdownItem>
               </ElDropdownMenu>

apps/web-ele/src/views/ai/chat/index/modules/role/repository.vue

@@ -183,12 +183,12 @@ onMounted(async () => {
 <template>
   <Drawer>
     <ElContainer
-      class="bg-card absolute inset-0 flex h-full w-full flex-col overflow-hidden"
+      class="absolute inset-0 flex h-full w-full flex-col overflow-hidden bg-card"
     >
       <FormModal @success="handlerAddRoleSuccess" />
 
       <ElMain class="relative m-0 flex-1 overflow-hidden p-0">
-        <div class="z-100 absolute right-5 top-5 flex items-center">
+        <div class="absolute right-5 top-5 z-100 flex items-center">
           <!-- 搜索输入框 -->
           <ElInput
             v-model="search"

apps/web-ele/src/views/ai/image/index/index.vue

@@ -89,7 +89,7 @@ onMounted(async () => {
 <template>
   <Page auto-content-height>
     <div class="absolute inset-0 m-4 flex h-full w-full flex-row">
-      <div class="bg-card left-0 mr-4 flex w-96 flex-col rounded-lg p-4">
+      <div class="left-0 mr-4 flex w-96 flex-col rounded-lg bg-card p-4">
         <div class="flex justify-center">
           <ElSegmented v-model="selectPlatform" :options="platformOptions" />
         </div>
@@ -120,7 +120,7 @@ onMounted(async () => {
           />
         </div>
       </div>
-      <div class="bg-card flex-1">
+      <div class="flex-1 bg-card">
         <ImageList ref="imageListRef" @on-regeneration="handleRegeneration" />
       </div>
     </div>

apps/web-ele/src/views/ai/image/index/modules/dall3/index.vue

@@ -231,7 +231,7 @@ defineExpose({ settingValues });
         @click="handleSizeClick(imageSize)"
       >
         <div
-          class="bg-card flex h-12 w-12 flex-col items-center justify-center rounded-lg border p-0"
+          class="flex h-12 w-12 flex-col items-center justify-center rounded-lg border bg-card p-0"
           :class="[
             selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
           ]"

apps/web-ele/src/views/ai/image/index/modules/list.vue

@@ -144,7 +144,7 @@ async function handleImageMidjourneyButtonClick(
   const data = {
     id: imageDetail.id,
     customId: button.customId,
-  } as AiImageApi.ImageMidjourneyActionVO;
+  } as AiImageApi.ImageMidjourneyAction;
   // 2. 发送 action
   await midjourneyAction(data);
   // 3. 刷新列表
@@ -206,7 +206,7 @@ onUnmounted(async () => {
     </div>
 
     <div
-      class="bg-card sticky bottom-0 z-50 flex h-16 items-center justify-center shadow-sm"
+      class="sticky bottom-0 z-50 flex h-16 items-center justify-center bg-card shadow-sm"
     >
       <ElPagination
         :total="pageTotal"

apps/web-ele/src/views/ai/image/index/modules/midjourney/index.vue

@@ -179,7 +179,7 @@ defineExpose({ settingValues });
         @click="handleSizeClick(imageSize)"
       >
         <div
-          class="bg-card flex h-12 w-12 items-center justify-center rounded-lg border p-0"
+          class="flex h-12 w-12 items-center justify-center rounded-lg border bg-card p-0"
           :class="[
             selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
           ]"

apps/web-ele/src/views/ai/image/square/index.vue

@@ -61,12 +61,12 @@ onMounted(async () => {
         </template>
       </ElInput>
       <div
-        class="bg-card grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2.5 shadow-sm"
+        class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2.5 bg-card shadow-sm"
       >
         <div
           v-for="item in list"
           :key="item.id"
-          class="bg-card relative cursor-pointer overflow-hidden transition-transform duration-300 hover:scale-105"
+          class="relative cursor-pointer overflow-hidden bg-card transition-transform duration-300 hover:scale-105"
         >
           <ElImage
             :src="item.picUrl"

apps/web-ele/src/views/ai/knowledge/document/form/index.vue

@@ -132,7 +132,7 @@ onMounted(async () => {
     <div class="mx-auto">
       <!-- 头部导航栏 -->
       <div
-        class="bg-card absolute left-0 right-0 top-0 z-10 flex h-12 items-center border-b px-4"
+        class="absolute left-0 right-0 top-0 z-10 flex h-12 items-center border-b bg-card px-4"
       >
         <!-- 左侧标题 -->
         <div class="flex w-48 items-center overflow-hidden">

apps/web-ele/src/views/ai/knowledge/document/form/modules/split-step.vue

@@ -263,7 +263,7 @@ onMounted(async () => {
               分片-{{ index + 1 }} · {{ segment.contentLength || 0 }} 字符数 ·
               {{ segment.tokens || 0 }} Token
             </div>
-            <div class="bg-card rounded-md p-2">
+            <div class="rounded-md bg-card p-2">
               {{ segment.content }}
             </div>
           </div>

apps/web-ele/src/views/ai/mindmap/index/modules/left.vue

@@ -25,8 +25,8 @@ defineExpose({
 });
 </script>
 <template>
-  <div class="bg-card flex w-80 flex-col rounded-lg p-5">
-    <h3 class="text-primary h-7 w-full text-center text-xl leading-7">
+  <div class="flex w-80 flex-col rounded-lg bg-card p-5">
+    <h3 class="h-7 w-full text-center text-xl leading-7 text-primary">
       思维导图创作中心
     </h3>
     <div class="mt-4 flex-grow overflow-y-auto">

apps/web-ele/src/views/ai/model/chatRole/modules/form.vue

@@ -13,7 +13,6 @@ import {
   getChatRole,
   updateChatRole,
 } from '#/api/ai/model/chatRole';
-import {} from '#/api/bpm/model';
 import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';

apps/web-ele/src/views/ai/model/model/modules/form.vue

@@ -9,7 +9,6 @@ import { ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
 import { createModel, getModel, updateModel } from '#/api/ai/model/model';
-import {} from '#/api/bpm/model';
 import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';

apps/web-ele/src/views/ai/music/index/list/audioBar/index.vue

@@ -39,7 +39,7 @@ function audioTimeUpdate(args: any) {
 
 <template>
   <div
-    class="b-1 b-l-none h-18 bg-card flex items-center justify-between border border-solid border-rose-100 px-2"
+    class="b-1 b-l-none h-18 flex items-center justify-between border border-solid border-rose-100 bg-card px-2"
   >
     <!-- 歌曲信息 -->
     <div class="flex gap-2.5">

apps/web-ele/src/views/ai/music/index/list/index.vue

@@ -17,7 +17,7 @@ const currentSong = ref({}); // 当前音乐
 const mySongList = ref<Recordable<any>[]>([]);
 const squareSongList = ref<Recordable<any>[]>([]);
 
-function generateMusic(formData: Recordable<any>) {
+function generateMusic(_formData: Recordable<any>) {
   loading.value = true;
   setTimeout(() => {
     mySongList.value = Array.from({ length: 20 }, (_, index) => {

apps/web-ele/src/views/ai/workflow/form/index.vue

@@ -204,7 +204,7 @@ onBeforeUnmount(() => {
     <div class="mx-auto">
       <!-- 头部导航栏 -->
       <div
-        class="bg-card absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b px-5"
+        class="absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b bg-card px-5"
       >
         <!-- 左侧标题 -->
         <div class="flex w-48 items-center overflow-hidden">

apps/web-ele/src/views/ai/workflow/form/modules/workflow-design.vue

@@ -256,7 +256,7 @@ defineExpose({ validate });
       </fieldset>
 
       <fieldset
-        class="bg-card m-0 mt-10 rounded-lg border border-gray-200 px-3 py-4"
+        class="m-0 mt-10 rounded-lg border border-gray-200 bg-card px-3 py-4"
       >
         <legend class="ml-2 px-2.5 text-base font-semibold text-gray-600">
           <h3>运行结果</h3>

apps/web-ele/src/views/ai/write/index/modules/left.vue

@@ -136,7 +136,7 @@ function handleSubmit() {
       <span>{{ label }}</span>
       <span
         v-if="hint"
-        class="text-primary-500 flex cursor-pointer select-none items-center text-xs"
+        class="flex cursor-pointer select-none items-center text-xs text-primary-500"
         @click="hintClick"
       >
         <IconifyIcon icon="lucide:circle-help" />
@@ -145,14 +145,14 @@ function handleSubmit() {
     </h3>
   </DefineLabel>
   <div class="flex flex-col" v-bind="$attrs">
-    <div class="bg-card flex w-full justify-center pt-2">
-      <div class="bg-card z-10 w-72 rounded-full p-1">
+    <div class="flex w-full justify-center bg-card pt-2">
+      <div class="z-10 w-72 rounded-full bg-card p-1">
         <div
           :class="
             selectedTab === AiWriteTypeEnum.REPLY &&
             'after:translate-x-[100%] after:transform'
           "
-          class="after:bg-card relative flex items-center after:absolute after:left-0 after:top-0 after:block after:h-7 after:w-1/2 after:rounded-full after:transition-transform after:content-['']"
+          class="relative flex items-center after:absolute after:left-0 after:top-0 after:block after:h-7 after:w-1/2 after:rounded-full after:bg-card after:transition-transform after:content-['']"
         >
           <ReuseTab
             v-for="tab in tabs"
@@ -166,7 +166,7 @@ function handleSubmit() {
       </div>
     </div>
     <div
-      class="bg-card box-border h-full w-96 flex-grow overflow-y-auto px-7 pb-2 lg:block"
+      class="box-border h-full w-96 flex-grow overflow-y-auto bg-card px-7 pb-2 lg:block"
     >
       <div>
         <template v-if="selectedTab === AiWriteTypeEnum.WRITING">

apps/web-ele/src/views/ai/write/index/modules/right.vue

@@ -72,7 +72,7 @@ watch(copied, (val) => {
       class="hide-scroll-bar box-border h-full overflow-y-auto"
     >
       <div
-        class="bg-card relative box-border min-h-full w-full flex-grow p-2 sm:p-5"
+        class="relative box-border min-h-full w-full flex-grow bg-card p-2 sm:p-5"
       >
         <ElButton
           v-show="isWriting"

apps/web-ele/src/views/ai/write/index/modules/tag.vue

@@ -21,7 +21,7 @@ const emits = defineEmits<{
     <span
       v-for="tag in props.tags"
       :key="tag.value"
-      class="bg-card border-card-100 mb-2 cursor-pointer rounded border-2 border-solid px-1 text-xs leading-6"
+      class="border-card-100 mb-2 cursor-pointer rounded border-2 border-solid bg-card px-1 text-xs leading-6"
       :class="
         modelValue === tag.value && '!border-primary-500 !text-primary-500'
       "

apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-model.vue

@@ -200,7 +200,7 @@ onMounted(() => {
 </script>
 <template>
   <div class="simple-process-model-container">
-    <div class="bg-card absolute right-0 top-0">
+    <div class="absolute right-0 top-0 bg-card">
       <ElRow type="flex" justify="end">
         <ElButtonGroup key="scale-control">
           <ElButton v-if="!readonly" @click="exportJson">

apps/web-ele/src/views/bpm/model/form/index.vue

@@ -395,7 +395,7 @@ onBeforeUnmount(() => {
     <div class="mx-auto">
       <!-- 头部导航栏 -->
       <div
-        class="bg-card absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b px-5"
+        class="absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b bg-card px-5"
       >
         <!-- 左侧标题 -->
         <div class="flex w-48 items-center overflow-hidden">

apps/web-ele/src/views/bpm/model/modules/category-draggable-model.vue

@@ -665,7 +665,7 @@ function handleRenameSuccess() {
                   link
                   size="small"
                   @click="modelOperation('update', row.id)"
-                  :disabled="!isManagerUser(row) || !hasPermiUpdate"
+                  :disabled="!isManagerUser(row) && !hasPermiUpdate"
                 >
                   修改
                 </ElButton>
@@ -673,7 +673,7 @@ function handleRenameSuccess() {
                   link
                   size="small"
                   @click="handleDeploy(row)"
-                  :disabled="!isManagerUser(row) || !hasPermiDeploy"
+                  :disabled="!isManagerUser(row) && !hasPermiDeploy"
                 >
                   发布
                 </ElButton>
@@ -717,7 +717,7 @@ function handleRenameSuccess() {
                       </el-dropdown-item>
                       <el-dropdown-item
                         @click="handleModelCommand('handleDelete', row)"
-                        :disabled="!isManagerUser(row) || !hasPermiDelete"
+                        :disabled="!isManagerUser(row) && !hasPermiDelete"
                       >
                         删除
                       </el-dropdown-item>

apps/web-ele/src/views/bpm/processInstance/index.vue

@@ -138,7 +138,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
         <template
           v-if="
             row.status === BpmProcessInstanceStatus.RUNNING &&
-            row.tasks!.length > 0
+            row.tasks?.length! > 0
           "
         >
           <!-- 单人审批 -->

apps/web-ele/src/views/crm/statistics/rank/chartOptions.ts

@@ -6,7 +6,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
       return {
         dataset: {
           dimensions: ['nickname', 'count'],
-          source: cloneDeep(res).reverse(),
+          source: cloneDeep(res).toReversed(),
         },
         grid: {
           left: 20,
@@ -54,7 +54,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
       return {
         dataset: {
           dimensions: ['nickname', 'count'],
-          source: cloneDeep(res).reverse(),
+          source: cloneDeep(res).toReversed(),
         },
         grid: {
           left: 20,
@@ -102,7 +102,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
       return {
         dataset: {
           dimensions: ['nickname', 'count'],
-          source: cloneDeep(res).reverse(),
+          source: cloneDeep(res).toReversed(),
         },
         grid: {
           left: 20,
@@ -150,7 +150,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
       return {
         dataset: {
           dimensions: ['nickname', 'count'],
-          source: cloneDeep(res).reverse(),
+          source: cloneDeep(res).toReversed(),
         },
         grid: {
           left: 20,
@@ -198,7 +198,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
       return {
         dataset: {
           dimensions: ['nickname', 'count'],
-          source: cloneDeep(res).reverse(),
+          source: cloneDeep(res).toReversed(),
         },
         grid: {
           left: 20,
@@ -246,7 +246,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
       return {
         dataset: {
           dimensions: ['nickname', 'count'],
-          source: cloneDeep(res).reverse(),
+          source: cloneDeep(res).toReversed(),
         },
         grid: {
           left: 20,
@@ -294,7 +294,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
       return {
         dataset: {
           dimensions: ['nickname', 'count'],
-          source: cloneDeep(res).reverse(),
+          source: cloneDeep(res).toReversed(),
         },
         grid: {
           left: 20,
@@ -342,7 +342,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
       return {
         dataset: {
           dimensions: ['nickname', 'count'],
-          source: cloneDeep(res).reverse(),
+          source: cloneDeep(res).toReversed(),
         },
         grid: {
           left: 20,

apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue

@@ -24,7 +24,7 @@ onMounted(() => {
           { name: '定制', value: 310 },
           { name: '技术支持', value: 274 },
           { name: '远程', value: 400 },
-        ].sort((a, b) => {
+        ].toSorted((a, b) => {
           return a.value - b.value;
         }),
         name: '商业占比',

apps/web-ele/src/views/erp/finance/payment/modules/item-form.vue

@@ -128,6 +128,7 @@ const handleOpenPurchaseIn = () => {
 
 const handleAddPurchaseIn = (rows: ErpPurchaseInApi.PurchaseIn[]) => {
   rows.forEach((row) => {
+    // TODO @芋艿
     const newItem: ErpFinancePaymentApi.FinancePaymentItem = {
       bizId: row.id,
       bizType: ErpBizType.PURCHASE_IN,
@@ -251,9 +252,9 @@ defineExpose({ validate });
       </template>
 
       <template #bottom>
-        <div class="border-border bg-muted mt-2 rounded border p-2">
-          <div class="text-muted-foreground flex justify-between text-sm">
-            <span class="text-foreground font-medium">合计：</span>
+        <div class="mt-2 rounded border border-border bg-muted p-2">
+          <div class="flex justify-between text-sm text-muted-foreground">
+            <span class="font-medium text-foreground">合计：</span>
             <div class="flex space-x-4">
               <span>
                 合计付款：{{ erpPriceInputFormatter(summaries.totalPrice) }}

apps/web-ele/src/views/erp/finance/receipt/modules/item-form.vue

@@ -127,6 +127,7 @@ function handleOpenSaleOut() {
 }
 
 function handleAddSaleOut(rows: ErpSaleOutApi.SaleOut[]) {
+  // TODO @芋艿
   rows.forEach((row) => {
     const newItem: ErpFinanceReceiptApi.FinanceReceiptItem = {
       bizId: row.id,
@@ -251,9 +252,9 @@ defineExpose({ validate });
       </template>
 
       <template #bottom>
-        <div class="border-border bg-muted mt-2 rounded border p-2">
-          <div class="text-muted-foreground flex justify-between text-sm">
-            <span class="text-foreground font-medium">合计：</span>
+        <div class="mt-2 rounded border border-border bg-muted p-2">
+          <div class="flex justify-between text-sm text-muted-foreground">
+            <span class="font-medium text-foreground">合计：</span>
             <div class="flex space-x-4">
               <span>
                 合计收款：{{ erpPriceInputFormatter(summaries.totalPrice) }}

apps/web-ele/src/views/erp/purchase/in/modules/item-form.vue

@@ -131,6 +131,7 @@ watch(
 
 /** 处理删除 */
 function handleDelete(row: ErpPurchaseInApi.PurchaseInItem) {
+  // TODO @芋艿
   const index = tableData.value.findIndex((item) => item.seq === row.seq);
   if (index !== -1) {
     tableData.value.splice(index, 1);
@@ -289,9 +290,9 @@ onMounted(async () => {
     </template>
 
     <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
+      <div class="mt-2 rounded border border-border bg-muted p-2">
+        <div class="flex justify-between text-sm text-muted-foreground">
+          <span class="font-medium text-foreground">合计：</span>
           <div class="flex space-x-4">
             <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
             <span>

apps/web-ele/src/views/erp/purchase/order/modules/item-form.vue

@@ -142,6 +142,7 @@ function handleAdd() {
 
 /** 处理删除 */
 function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrderItem) {
+  // TODO @芋艿
   const index = tableData.value.findIndex((item) => item.seq === row.seq);
   if (index !== -1) {
     tableData.value.splice(index, 1);
@@ -169,6 +170,7 @@ async function handleProductChange(productId: any, row: any) {
 
 /** 处理行数据变更 */
 function handleRowChange(row: any) {
+  // TODO @芋艿
   const index = tableData.value.findIndex((item) => item.seq === row.seq);
   if (index === -1) {
     tableData.value.push(row);
@@ -296,9 +298,9 @@ onMounted(async () => {
     </template>
 
     <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
+      <div class="mt-2 rounded border border-border bg-muted p-2">
+        <div class="flex justify-between text-sm text-muted-foreground">
+          <span class="font-medium text-foreground">合计：</span>
           <div class="flex space-x-4">
             <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
             <span>

apps/web-ele/src/views/erp/purchase/return/modules/item-form.vue

@@ -131,6 +131,7 @@ watch(
 
 /** 处理删除 */
 function handleDelete(row: ErpPurchaseReturnApi.PurchaseReturnItem) {
+  // TODO @芋艿
   const index = tableData.value.findIndex((item) => item.seq === row.seq);
   if (index !== -1) {
     tableData.value.splice(index, 1);
@@ -291,9 +292,9 @@ onMounted(async () => {
     </template>
 
     <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
+      <div class="mt-2 rounded border border-border bg-muted p-2">
+        <div class="flex justify-between text-sm text-muted-foreground">
+          <span class="font-medium text-foreground">合计：</span>
           <div class="flex space-x-4">
             <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
             <span>

apps/web-ele/src/views/erp/sale/order/modules/item-form.vue

@@ -142,6 +142,7 @@ function handleAdd() {
 
 /** 处理删除 */
 function handleDelete(row: ErpSaleOrderApi.SaleOrderItem) {
+  // TODO @芋艿
   const index = tableData.value.findIndex((item) => item.seq === row.seq);
   if (index !== -1) {
     tableData.value.splice(index, 1);
@@ -296,9 +297,9 @@ onMounted(async () => {
     </template>
 
     <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
+      <div class="mt-2 rounded border border-border bg-muted p-2">
+        <div class="flex justify-between text-sm text-muted-foreground">
+          <span class="font-medium text-foreground">合计：</span>
           <div class="flex space-x-4">
             <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
             <span>

apps/web-ele/src/views/erp/sale/out/modules/item-form.vue

@@ -131,6 +131,7 @@ watch(
 
 /** 处理删除 */
 function handleDelete(row: ErpSaleOutApi.SaleOutItem) {
+  // TODO @芋艿
   const index = tableData.value.findIndex((item) => item.seq === row.seq);
   if (index !== -1) {
     tableData.value.splice(index, 1);
@@ -289,9 +290,9 @@ onMounted(async () => {
     </template>
 
     <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
+      <div class="mt-2 rounded border border-border bg-muted p-2">
+        <div class="flex justify-between text-sm text-muted-foreground">
+          <span class="font-medium text-foreground">合计：</span>
           <div class="flex space-x-4">
             <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
             <span>

apps/web-ele/src/views/erp/sale/return/modules/item-form.vue

@@ -131,6 +131,7 @@ watch(
 
 /** 处理删除 */
 function handleDelete(row: ErpSaleReturnApi.SaleReturnItem) {
+  // TODO @芋艿
   const index = tableData.value.findIndex((item) => item.seq === row.seq);
   if (index !== -1) {
     tableData.value.splice(index, 1);
@@ -289,9 +290,9 @@ onMounted(async () => {
     </template>
 
     <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
+      <div class="mt-2 rounded border border-border bg-muted p-2">
+        <div class="flex justify-between text-sm text-muted-foreground">
+          <span class="font-medium text-foreground">合计：</span>
           <div class="flex space-x-4">
             <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
             <span>

apps/web-ele/src/views/erp/stock/check/modules/item-form.vue

@@ -106,6 +106,7 @@ function handleAdd() {
 
 /** 处理删除 */
 function handleDelete(row: ErpStockCheckApi.StockCheckItem) {
+  // TODO @芋艿
   const index = tableData.value.findIndex((item) => item.seq === row.seq);
   if (index !== -1) {
     tableData.value.splice(index, 1);
@@ -284,9 +285,9 @@ onMounted(async () => {
     </template>
 
     <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
+      <div class="mt-2 rounded border border-border bg-muted p-2">
+        <div class="flex justify-between text-sm text-muted-foreground">
+          <span class="font-medium text-foreground">合计：</span>
           <div class="flex space-x-4">
             <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
             <span>

apps/web-ele/src/views/erp/stock/in/modules/item-form.vue

@@ -86,6 +86,7 @@ watch(
 
 /** 处理新增 */
 function handleAdd() {
+  // TODO @芋艿
   const newRow = {
     id: undefined,
     warehouseId: undefined,

apps/web-ele/src/views/erp/stock/out/modules/item-form.vue

@@ -105,6 +105,7 @@ function handleAdd() {
 
 /** 处理删除 */
 function handleDelete(row: ErpStockOutApi.StockOutItem) {
+  // TODO @芋艿
   const index = tableData.value.findIndex((item) => item.seq === row.seq);
   if (index !== -1) {
     tableData.value.splice(index, 1);
@@ -271,7 +272,7 @@ onMounted(async () => {
     </template>
 
     <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
+      <div class="mt-2 rounded border border-border bg-muted p-2">
         <div class="text-muted-foreground flex justify-between text-sm">
           <span class="text-foreground font-medium">合计：</span>
           <div class="flex space-x-4">

apps/web-ele/src/views/infra/codegen/edit/index.vue

@@ -119,7 +119,7 @@ getDetail();
 
 <template>
   <Page auto-content-height v-loading="loading">
-    <div class="bg-card flex h-[95%] flex-col rounded-md p-4">
+    <div class="flex h-[95%] flex-col rounded-md bg-card p-4">
       <ElSteps :active="currentStep" class="mb-8 rounded shadow-sm" simple>
         <ElStep
           v-for="(step, index) in steps"

apps/web-ele/src/views/infra/webSocket/index.vue

@@ -47,7 +47,7 @@ const { status, data, send, close, open } = useWebSocket(server.value, {
 const messageList = ref(
   [] as { text: string; time: number; type?: string; userId?: string }[],
 ); // 消息列表
-const messageReverseList = computed(() => [...messageList.value].reverse());
+const messageReverseList = computed(() => [...messageList.value].toReversed());
 watchEffect(() => {
   if (!data.value) {
     return;

apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue

@@ -125,7 +125,7 @@ function emitSpuChange() {
     <!-- 添加商品按钮 -->
     <ElTooltip v-if="canAdd" content="选择商品">
       <div
-        class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors hover:border-primary hover:bg-primary/5"
         @click="handleOpenSpuSelect"
       >
         <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />

apps/web-ele/src/views/mall/promotion/combination/components/showcase.vue

@@ -111,6 +111,7 @@ function emitActivityChange() {
     >
       <ElTooltip :content="activity.name">
         <div class="relative h-full w-full">
+          <!-- TODO @芋艿 -->
           <ElImage
             :src="activity.picUrl"
             class="h-full w-full rounded-lg object-cover"
@@ -131,7 +132,7 @@ function emitActivityChange() {
     <!-- 添加活动按钮 -->
     <ElTooltip v-if="canAdd" content="选择活动">
       <div
-        class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors hover:border-primary hover:bg-primary/5"
         @click="handleOpenActivitySelect"
       >
         <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue

@@ -75,7 +75,7 @@ function handleHotAreaSelected(
 <template>
   <div class="h-40px flex items-center justify-center">
     <MagicCubeEditor
-      v-model="cellList as any"
+      v-model="cellList"
       :cols="cellCount"
       :cube-size="38"
       :rows="1"

apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts

@@ -57,10 +57,10 @@ export function isContains(hotArea: Rect, point: Point): boolean {
  */
 export function createRect(a: Point, b: Point): Rect {
   // 计算矩形的范围
-  let [left, left2] = [a.x, b.x].sort();
+  let [left, left2] = [a.x, b.x].toSorted();
   left = left ?? 0;
   left2 = left2 ?? 0;
-  let [top, top2] = [a.y, b.y].sort();
+  let [top, top2] = [a.y, b.y].toSorted();
   top = top ?? 0;
   top2 = top2 ?? 0;
   const right = left2 + 1;

apps/web-ele/src/views/mall/promotion/kefu/modules/conversation-list.vue

@@ -159,7 +159,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div
-    class="bg-background flex flex-shrink-0 flex-col border-r border-gray-200 p-4"
+    class="flex flex-shrink-0 flex-col border-r border-gray-200 bg-background p-4"
   >
     <div class="flex h-12 w-full flex-row items-center justify-between">
       <span class="text-lg font-bold">会话记录</span>
@@ -213,7 +213,7 @@ onBeforeUnmount(() => {
     <ul
       v-show="showRightMenu"
       :style="rightMenuStyle"
-      class="bg-background absolute z-[9999] m-0 w-32 list-none rounded-xl p-1 shadow-md"
+      class="absolute z-[9999] m-0 w-32 list-none rounded-xl bg-background p-1 shadow-md"
     >
       <li
         v-show="!rightClickConversation.adminPinned"

apps/web-ele/src/views/mall/promotion/kefu/modules/member/member-info.vue

@@ -139,13 +139,13 @@ async function getUserData() {
 </script>
 
 <template>
-  <div class="bg-background flex h-full flex-auto flex-col">
+  <div class="flex h-full flex-auto flex-col bg-background">
     <div
       class="mt-4 flex h-12 items-center justify-around before:absolute before:bottom-0 before:left-0 before:h-1 before:w-full before:scale-y-[0.3] before:bg-gray-200 before:content-['']"
     >
       <div
         :class="{
-          'before:border-primary before:border-b-2': tabActivation('会员信息'),
+          'before:border-b-2 before:border-primary': tabActivation('会员信息'),
         }"
         class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
         @click="handleClick('会员信息')"
@@ -154,7 +154,7 @@ async function getUserData() {
       </div>
       <div
         :class="{
-          'before:border-primary before:border-b-2': tabActivation('最近浏览'),
+          'before:border-b-2 before:border-primary': tabActivation('最近浏览'),
         }"
         class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
         @click="handleClick('最近浏览')"
@@ -163,7 +163,7 @@ async function getUserData() {
       </div>
       <div
         :class="{
-          'before:border-primary before:border-b-2': tabActivation('交易订单'),
+          'before:border-b-2 before:border-primary': tabActivation('交易订单'),
         }"
         class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
         @click="handleClick('交易订单')"

apps/web-ele/src/views/mall/promotion/kefu/modules/message-list.vue

@@ -97,7 +97,7 @@ function pushMessage(message: any) {
 /** 按照时间倒序，获取消息列表 */
 const getMessageList0 = computed(() => {
   // 使用展开运算符创建新数组，避免直接修改原数组
-  return [...messageList.value].sort(
+  return [...messageList.value].toSorted(
     (a: any, b: any) => a.createTime - b.createTime,
   );
 });
@@ -267,7 +267,7 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
 <template>
   <div
     v-if="showMessageList()"
-    class="bg-background flex h-full flex-auto flex-col p-4"
+    class="flex h-full flex-auto flex-col bg-background p-4"
   >
     <div class="flex h-full flex-auto flex-shrink-0 flex-col">
       <div class="flex h-12 w-full flex-row items-center justify-between">
@@ -423,7 +423,7 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
       </div>
     </div>
   </div>
-  <div v-else class="bg-background relative">
+  <div v-else class="relative bg-background">
     <ElEmpty description="请选择左侧的一个会话后开始" class="mt-[20%]" />
   </div>
 </template>

apps/web-ele/src/views/mall/promotion/kefu/modules/message/order-item.vue

@@ -78,7 +78,7 @@ function formatOrderStatus(order: any) {
       <div class="flex flex-row text-sm">
         <div>订单号：</div>
         <span
-          class="text-primary cursor-pointer hover:underline"
+          class="cursor-pointer text-primary hover:underline"
           @click="openDetail(getMessageContent.id)"
         >
           {{ getMessageContent.no }}

apps/web-ele/src/views/mall/promotion/point/components/showcase.vue

@@ -132,7 +132,7 @@ function emitActivityChange() {
     <!-- 添加活动按钮 -->
     <ElTooltip v-if="canAdd" content="选择活动">
       <div
-        class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors hover:border-primary hover:bg-primary/5"
         @click="handleOpenActivitySelect"
       >
         <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />

apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue

@@ -110,6 +110,7 @@ function emitActivityChange() {
     >
       <ElTooltip :content="activity.name">
         <div class="relative h-full w-full">
+          <!-- TODO @芋艿 -->
           <ElImage
             :src="activity.picUrl"
             class="h-full w-full rounded-lg object-cover"
@@ -130,7 +131,7 @@ function emitActivityChange() {
     <!-- 添加活动按钮 -->
     <ElTooltip v-if="canAdd" content="选择活动">
       <div
-        class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors hover:border-primary hover:bg-primary/5"
         @click="handleOpenActivitySelect"
       >
         <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />

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

@@ -1,55 +1,40 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridPropTypes } from '#/adapter/vxe-table';
-import type { MpAccountApi } from '#/api/mp/account';
 
 import { markRaw } from 'vue';
 
-import { DICT_TYPE } from '@vben/constants';
-import { getDictObj, getDictOptions } from '@vben/hooks';
+import {
+  AutoReplyMsgType,
+  DICT_TYPE,
+  RequestMessageTypes,
+} from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
-import { getSimpleAccountList } from '#/api/mp/account';
-import { WxReplySelect } from '#/views/mp/components';
-
-import { MsgType } from './modules/types';
-
-/** 关联数据 */
-let accountList: MpAccountApi.AccountSimple[] = [];
-getSimpleAccountList().then((data) => (accountList = data));
-
-// TODO @hw：要不要使用统一枚举？
-const RequestMessageTypes = new Set([
-  'image',
-  'link',
-  'location',
-  'shortvideo',
-  'text',
-  'video',
-  'voice',
-]); // 允许选择的请求消息类型
+import { WxReply } from '#/views/mp/components';
 
 /** 获取表格列配置 */
-export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
+export function useGridColumns(
+  msgType: AutoReplyMsgType,
+): VxeGridPropTypes.Columns {
   const columns: VxeGridPropTypes.Columns = [];
   // 请求消息类型列（仅消息回复显示）
-  if (msgType === MsgType.Message) {
+  if (msgType === AutoReplyMsgType.Message) {
     columns.push({
       field: 'requestMessageType',
       title: '请求消息类型',
       minWidth: 120,
     });
   }
-
   // 关键词列（仅关键词回复显示）
-  if (msgType === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     columns.push({
       field: 'requestKeyword',
       title: '关键词',
       minWidth: 150,
     });
   }
-
   // 匹配类型列（仅关键词回复显示）
-  if (msgType === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     columns.push({
       field: 'requestMatch',
       title: '匹配类型',
@@ -60,16 +45,16 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
       },
     });
   }
-
   // 回复消息类型列
   columns.push(
     {
       field: 'responseMessageType',
       title: '回复消息类型',
       minWidth: 120,
-      // TODO @hw：这里和 antd 有差别。两侧尽量统一；
-      formatter: ({ cellValue }) =>
-        getDictObj(DICT_TYPE.MP_MESSAGE_TYPE, String(cellValue))?.label ?? '',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_MESSAGE_TYPE },
+      },
     },
     {
       field: 'responseContent',
@@ -94,12 +79,10 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
 }
 
 /** 新增/修改的表单 */
-export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
+export function useFormSchema(msgType: AutoReplyMsgType): VbenFormSchema[] {
   const schema: VbenFormSchema[] = [];
-
   // 消息类型（仅消息回复显示）
-  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
-  if (Number(msgType) === MsgType.Message) {
+  if (msgType === AutoReplyMsgType.Message) {
     schema.push({
       fieldName: 'requestMessageType',
       label: '消息类型',
@@ -112,10 +95,8 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
       },
     });
   }
-
   // 匹配类型（仅关键词回复显示）
-  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
-  if (Number(msgType) === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     schema.push({
       fieldName: 'requestMatch',
       label: '匹配类型',
@@ -131,10 +112,8 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
       rules: 'required',
     });
   }
-
   // 关键词（仅关键词回复显示）
-  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
-  if (Number(msgType) === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     schema.push({
       fieldName: 'requestKeyword',
       label: '关键词',
@@ -147,31 +126,22 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
     });
   }
   // 回复消息
-  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
   schema.push({
     fieldName: 'reply',
     label: '回复消息',
-    component: markRaw(WxReplySelect),
+    component: markRaw(WxReply),
+    modelPropName: 'modelValue',
   });
   return schema;
 }
 
 /** 列表的搜索表单 */
-// TODO @hw：是不是用 wxselect 组件哈？
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: 'ApiSelect',
-      componentProps: {
-        options: accountList.map((item) => ({
-          label: item.name,
-          value: item.id,
-        })),
-        placeholder: '请选择公众号',
-      },
-      defaultValue: accountList[0]?.id,
+      component: 'Input',
     },
   ];
 }

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

@@ -1,19 +1,14 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpAutoReplyApi } from '#/api/mp/autoReply';
 
 import { computed, nextTick, ref } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { AutoReplyMsgType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
-import {
-  ElLoading,
-  ElMessage,
-  ElMessageBox,
-  ElRow,
-  ElTabPane,
-  ElTabs,
-} from 'element-plus';
+import { ElLoading, ElMessage, ElRow, ElTabPane, ElTabs } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -25,16 +20,15 @@ import { $t } from '#/locales';
 import { WxAccountSelect } from '#/views/mp/components';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import Content from './modules/content.vue';
+import ReplyContent from './modules/content.vue';
 import Form from './modules/form.vue';
-import { MsgType } from './modules/types';
 
 defineOptions({ name: 'MpAutoReply' });
 
-const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
+const msgType = ref<string>(String(AutoReplyMsgType.Keyword)); // 消息类型
 
 const showCreateButton = computed(() => {
-  if (Number(msgType.value) !== MsgType.Follow) {
+  if (Number(msgType.value) !== AutoReplyMsgType.Follow) {
     return true;
   }
   try {
@@ -61,7 +55,7 @@ async function onTabChange(tabName: string) {
   msgType.value = tabName;
   await nextTick();
   // 更新 columns
-  const columns = useGridColumns(Number(msgType.value) as MsgType);
+  const columns = useGridColumns(Number(msgType.value) as AutoReplyMsgType);
   if (columns) {
     // 使用 setGridOptions 更新列配置
     gridApi.setGridOptions({ columns });
@@ -77,37 +71,32 @@ async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
   formModalApi
     .setData({
-      // TODO @hw：这里和 antd 不同，需要 number 下么？
-      msgType: msgType.value,
+      msgType: Number(msgType.value) as AutoReplyMsgType,
       accountId: formValues.accountId,
     })
     .open();
 }
 
 /** 修改自动回复 */
-async function handleEdit(row: any) {
-  const data = (await getAutoReply(row.id)) as any;
-  // TODO @hw：这里使用 formValues，还是使用 row？
-  const formValues = await gridApi.formApi.getValues();
+async function handleEdit(row: MpAutoReplyApi.AutoReply) {
+  const data = await getAutoReply(row.id!);
   formModalApi
     .setData({
-      // TODO @hw：这里和 antd 不同，需要 number 下么？
-      msgType: msgType.value,
+      msgType: Number(msgType.value) as AutoReplyMsgType,
+      accountId: row.accountId,
       row: data,
-      accountId: formValues.accountId,
     })
     .open();
 }
 
 /** 删除自动回复 */
-async function handleDelete(row: any) {
-  await ElMessageBox.confirm('是否确认删除此数据?');
+async function handleDelete(row: MpAutoReplyApi.AutoReply) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', ['自动回复']),
   });
   try {
-    await deleteAutoReply(row.id);
-    ElMessage.success('删除成功');
+    await deleteAutoReply(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
     handleRefresh();
   } finally {
     loadingInstance.close();
@@ -124,7 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(Number(msgType.value) as MsgType),
+    columns: useGridColumns(Number(msgType.value) as AutoReplyMsgType),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -133,7 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getAutoReplyPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            type: Number(msgType.value) as MsgType,
+            type: Number(msgType.value) as AutoReplyMsgType,
             ...formValues,
           });
         },
@@ -148,8 +137,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-    // TODO @hw：这里要调整下，linter 报错；
-  } as VxeTableGridOptions<any>,
+  } as VxeTableGridOptions<MpAutoReplyApi.AutoReply>,
 });
 </script>
 
@@ -170,32 +158,34 @@ const [Grid, gridApi] = useVbenVxeGrid({
           class="w-full"
           @tab-change="(activeName) => onTabChange(activeName as string)"
         >
-          <ElTabPane :name="String(MsgType.Follow)">
+          <ElTabPane :name="String(AutoReplyMsgType.Follow)">
             <template #label>
               <ElRow align="middle">
-                <IconifyIcon icon="ep:star" class="mr-[2px]" /> 关注时回复
+                <IconifyIcon icon="lucide:star" class="mr-[2px]" /> 关注时回复
               </ElRow>
             </template>
           </ElTabPane>
-          <ElTabPane :name="String(MsgType.Message)">
+          <ElTabPane :name="String(AutoReplyMsgType.Message)">
             <template #label>
               <ElRow align="middle">
-                <IconifyIcon icon="ep:chat-line-round" class="mr-[2px]" />
+                <IconifyIcon
+                  icon="lucide:message-circle-more"
+                  class="mr-[2px]"
+                />
                 消息回复
               </ElRow>
             </template>
           </ElTabPane>
-          <ElTabPane :name="String(MsgType.Keyword)">
+          <ElTabPane :name="String(AutoReplyMsgType.Keyword)">
             <template #label>
               <ElRow align="middle">
-                <IconifyIcon icon="fa:newspaper-o" class="mr-[2px]" />
+                <IconifyIcon icon="lucide:newspaper" class="mr-[2px]" />
                 关键词回复
               </ElRow>
             </template>
           </ElTabPane>
         </ElTabs>
       </template>
-      <!-- 工具栏按钮 -->
       <template #toolbar-tools>
         <TableAction
           v-if="showCreateButton"
@@ -211,7 +201,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
         />
       </template>
       <template #replyContent="{ row }">
-        <Content :row="row" />
+        <ReplyContent :row="row" />
       </template>
       <template #actions="{ row }">
         <TableAction

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

@@ -4,22 +4,21 @@ import type { Reply } from '#/views/mp/components/wx-reply/types';
 import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { AutoReplyMsgType, ReplyType } from '@vben/constants';
 
 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/wx-reply/types';
 
 import { useFormSchema } from '../data';
-import { MsgType } from './types';
 
 const emit = defineEmits(['success']);
 
 const formData = ref<{
   accountId?: number;
-  msgType: MsgType;
+  msgType: AutoReplyMsgType;
   row?: any;
 }>();
 const getTitle = computed(() => {
@@ -37,8 +36,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 100,
   },
   layout: 'horizontal',
-  // TODO @hw：antd 和 ele 存在差异
-  schema: useFormSchema(Number(formData.value?.msgType) as MsgType),
+  schema: useFormSchema(AutoReplyMsgType.Keyword),
   showDefaultActions: false,
 });
 
@@ -59,8 +57,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;
+    const reply = submitForm.reply as Reply;
     if (reply) {
       submitForm.responseMessageType = reply.type;
       submitForm.responseContent = reply.content;
@@ -99,8 +96,7 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData<{
       accountId?: number;
-      // TODO @hw：antd 和 ele 存在差异
-      msgType: MsgType;
+      msgType: AutoReplyMsgType;
       row?: any;
     }>();
     if (!data) {
@@ -115,20 +111,22 @@ const [Modal, modalApi] = useVbenModal({
     if (data.row?.id) {
       // 编辑：加载数据
       const rowData = data.row;
-      const formValues: any = { ...rowData };
-      formValues.reply = {
-        type: rowData.responseMessageType,
-        accountId: data.accountId || -1,
-        content: rowData.responseContent,
-        mediaId: rowData.responseMediaId,
-        url: rowData.responseMediaUrl,
-        title: rowData.responseTitle,
-        description: rowData.responseDescription,
-        thumbMediaId: rowData.responseThumbMediaId,
-        thumbMediaUrl: rowData.responseThumbMediaUrl,
-        articles: rowData.responseArticles,
-        musicUrl: rowData.responseMusicUrl,
-        hqMusicUrl: rowData.responseHqMusicUrl,
+      const formValues: any = {
+        ...rowData,
+        reply: {
+          type: rowData.responseMessageType,
+          accountId: data.accountId || -1,
+          content: rowData.responseContent,
+          mediaId: rowData.responseMediaId,
+          url: rowData.responseMediaUrl,
+          title: rowData.responseTitle,
+          description: rowData.responseDescription,
+          thumbMediaId: rowData.responseThumbMediaId,
+          thumbMediaUrl: rowData.responseThumbMediaUrl,
+          articles: rowData.responseArticles,
+          musicUrl: rowData.responseMusicUrl,
+          hqMusicUrl: rowData.responseHqMusicUrl,
+        },
       };
       await formApi.setValues(formValues);
     } else {
@@ -138,8 +136,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,
+        requestMatch: data.msgType === AutoReplyMsgType.Keyword ? 1 : undefined,
         requestMessageType: undefined,
         reply: {
           type: ReplyType.Text,

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

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

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

@@ -1,22 +1,9 @@
 export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';
-
 export { default as WxLocation } from './wx-location/wx-location.vue';
-export * from './wx-material-select/types';
-
 export { default as WxMaterialSelect } from './wx-material-select/wx-material-select.vue';
-
-export * from './wx-msg/types';
-
+export { default as WxMsg } from './wx-msg/msg.vue';
 export { default as WxMusic } from './wx-music/wx-music.vue';
-
 export { default as WxNews } from './wx-news/wx-news.vue';
-
-export * from './wx-reply/types';
-
-export { default as WxReplySelect } from './wx-reply/wx-reply.vue';
-
+export { default as WxReply } from './wx-reply/wx-reply.vue';
 export { default as WxVideoPlayer } from './wx-video-play/wx-video-play.vue';
-
 export { default as WxVoicePlayer } from './wx-voice-play/wx-voice-play.vue';
-
-// TODO @hw：是不是要和 antd 保持一致哈？

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

@@ -1,3 +0,0 @@
-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

@@ -1,129 +1,63 @@
 <script lang="ts" setup>
 import type { MpAccountApi } from '#/api/mp/account';
 
-import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { useTabs } from '@vben/hooks';
-
 import { ElMessage, ElOption, ElSelect } from 'element-plus';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
-// TODO @hw：调整下代码，和 antd 代码风格，尽量保持一致；
-defineOptions({ name: 'AccountSelect' });
-
-const props = defineProps<{
-  modelValue?: number;
-}>();
+defineOptions({ name: 'WxAccountSelect' });
 
 const emit = defineEmits<{
   (e: 'change', id: number, name: string): void;
-  (e: 'update:modelValue', id: number): void;
 }>();
 
-const message = ElMessage; // 消息弹窗
-const { closeCurrentTab } = useTabs(); // 视图操作
 const { push } = useRouter();
 
-const account: MpAccountApi.AccountSimple = reactive({
+const account = ref<MpAccountApi.Account>({
   id: -1,
   name: '',
-});
-
-const accountList = ref<MpAccountApi.AccountSimple[]>([]);
-
-// 计算当前选中的 ID，优先使用 modelValue（表单绑定），否则使用内部 account.id
-const currentId = computed({
-  get: () => {
-    // 如果外部传入了 modelValue，优先使用外部的值
-    if (props.modelValue !== undefined && props.modelValue !== null) {
-      return props.modelValue;
-    }
-    return account.id;
-  },
-  set: (value: number) => {
-    // 更新内部状态
-    account.id = value;
-    // 同步到外部（表单系统）
-    emit('update:modelValue', value);
-    // 触发 change 事件（保持向后兼容）
-    const found = accountList.value.find(
-      (v: MpAccountApi.AccountSimple) => v.id === value,
-    );
-    if (found) {
-      account.name = found.name;
-      emit('change', value, found.name);
-    }
-  },
-});
-
-// 监听外部 modelValue 变化，同步到内部状态
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (
-      newValue !== undefined &&
-      newValue !== null &&
-      newValue !== account.id
-    ) {
-      account.id = newValue;
-      const found = accountList.value.find(
-        (v: MpAccountApi.AccountSimple) => v.id === newValue,
-      );
-      if (found) {
-        account.name = found.name;
-      }
-    }
-  },
-);
+}); // 当前选中的公众号
+const accountList = ref<MpAccountApi.Account[]>([]); // 公众号列表
 
 /** 查询公众号列表 */
 async function handleQuery() {
   accountList.value = await getSimpleAccountList();
   if (accountList.value.length === 0) {
-    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
-    await closeCurrentTab();
+    ElMessage.error(
+      '未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置',
+    );
     await push({ name: 'MpAccount' });
     return;
   }
 
-  // 如果外部没有传入值（modelValue 为空），默认选中第一个
-  if (props.modelValue === undefined || props.modelValue === null) {
-    const firstAccount = accountList.value[0];
-    if (firstAccount) {
-      currentId.value = firstAccount.id;
-      account.name = firstAccount.name;
-      emit('change', firstAccount.id, firstAccount.name);
-    }
-  } else {
-    // 如果外部有值，同步到内部状态
-    const found = accountList.value.find(
-      (v: MpAccountApi.AccountSimple) => v.id === props.modelValue,
-    );
-    if (found) {
-      account.id = props.modelValue;
-      account.name = found.name;
-    }
+  // 默认选中第一个，如无数据则不执行
+  const first = accountList.value[0];
+  if (first) {
+    account.value.id = first.id;
+    account.value.name = first.name;
+    emit('change', account.value.id, account.value.name);
   }
 }
 
-/** 公众号变化 */
-function onChanged(id?: number) {
-  if (id) {
-    currentId.value = id;
+/** 切换选中公众号 */
+function onChanged(id: number) {
+  const found = accountList.value.find((v) => v.id === id);
+  if (found) {
+    account.value.name = found.name;
+    emit('change', account.value.id, account.value.name);
   }
 }
 
 /** 初始化 */
-onMounted(() => {
-  handleQuery();
-});
+onMounted(handleQuery);
 </script>
 
 <template>
   <ElSelect
-    v-model="currentId"
+    v-model="account.id"
     placeholder="请选择公众号"
     class="!w-full"
     @change="onChanged"
@@ -136,8 +70,3 @@ onMounted(() => {
     />
   </ElSelect>
 </template>
-<style lang="scss" scoped>
-:deep(.el-select__wrapper) {
-  width: 240px !important;
-}
-</style>

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

@@ -1,3 +0,0 @@
-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/types.ts

@@ -0,0 +1,6 @@
+export interface WxLocationProps {
+  label: string;
+  locationX: number;
+  locationY: number;
+  qqMapKey?: string;
+}

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

@@ -1,65 +1,67 @@
-<!--
-  【微信消息 - 定位】TODO @Dhb52 目前未启用；；；；@hw：看看目前是不是没用起来哈？
--->
 <script lang="ts" setup>
+import type { WxLocationProps } from './types';
+
+import { computed, onMounted, ref } from 'vue';
+
 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';
+import { ElCol, ElLink, ElMessage, ElRow } from 'element-plus';
 
+import { getTradeConfig } from '#/api/mall/trade/config';
+
+/** 微信消息 - 定位 */
 defineOptions({ name: 'Location' });
 
-// TODO @hw：antd 和 ele 这里的风格，看看怎么统一！
-const props = defineProps({
-  locationX: {
-    required: true,
-    type: Number,
-  },
-  locationY: {
-    required: true,
-    type: Number,
-  },
-  label: {
-    // 地名
-    required: true,
-    type: String,
-  },
-  qqMapKey: {
-    // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
-    required: false,
-    type: String,
-    default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // 需要自定义
-  },
+const props = defineProps<WxLocationProps>();
+
+const fetchedQqMapKey = ref('');
+const resolvedQqMapKey = computed(
+  () => props.qqMapKey || fetchedQqMapKey.value || '',
+);
+
+const mapUrl = computed(() => {
+  return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${props.locationY}&pointy=${props.locationX}&name=${props.label}&ref=yudao`;
+});
+
+const mapImageUrl = computed(() => {
+  return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${resolvedQqMapKey.value}&size=250*180`;
+});
+
+async function fetchQqMapKey() {
+  try {
+    const data = await getTradeConfig();
+    fetchedQqMapKey.value = data.tencentLbsKey ?? '';
+    if (!fetchedQqMapKey.value) {
+      ElMessage.warning('请先配置腾讯位置服务密钥');
+    }
+  } catch {
+    ElMessage.error('获取腾讯位置服务密钥失败');
+  }
+}
+
+onMounted(async () => {
+  if (!props.qqMapKey) {
+    await fetchQqMapKey();
+  }
 });
 
 defineExpose({
   locationX: props.locationX,
   locationY: props.locationY,
   label: props.label,
-  qqMapKey: props.qqMapKey,
+  qqMapKey: resolvedQqMapKey,
 });
 </script>
 
 <template>
-  <!-- 微信消息 - 定位 -->
   <div>
-    <ElLink
-      type="primary"
-      target="_blank"
-      :href="`https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
-        locationY
-      }&pointy=${locationX}&name=${label}&ref=yudao`"
-    >
+    <ElLink type="primary" target="_blank" :href="mapUrl">
       <ElCol>
         <ElRow>
-          <img
-            :src="`https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${
-              locationX
-            },${locationY}&key=${qqMapKey}&size=250*180`"
-          />
+          <img :src="mapImageUrl" alt="地图位置" />
         </ElRow>
         <ElRow>
-          <IconifyIcon icon="ep:location" />
+          <IconifyIcon icon="lucide:map-pin" />
           {{ label }}
         </ElRow>
       </ElCol>

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

@@ -1,5 +0,0 @@
-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,12 +0,0 @@
-// TODO @hw：这里的枚举，看看要不要统一
-export enum NewsType {
-  Draft = '2',
-  Published = '1',
-}
-
-export enum MaterialType {
-  Image = 'image',
-  News = 'news',
-  Video = 'video',
-  Voice = 'voice',
-}

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
 
+import { NewsType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { formatTime } from '@vben/utils';
 
@@ -19,12 +20,10 @@ 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 是不是统一下；
+// TODO @hw：代码风格，看看 antd 和 ele 是不是统一下； 等antd此组件修改完再调整
 
 /** 微信素材选择 */
-defineOptions({ name: 'MaterialSelect' });
+defineOptions({ name: 'WxMaterialSelect' });
 
 const props = withDefaults(
   defineProps<{
@@ -37,15 +36,17 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['selectMaterial']);
+const emit = defineEmits<{
+  (e: 'selectMaterial', item: any): void;
+}>();
 
 const loading = ref(false); // 遮罩层
 const total = ref(0); // 总条数
 const list = ref<any[]>([]); // 数据列表
 const queryParams = reactive({
+  accountId: props.accountId,
   pageNo: 1,
   pageSize: 10,
-  accountId: props.accountId,
 }); // 查询参数
 
 /** 选择素材 */
@@ -117,14 +118,23 @@ onMounted(async () => {
   <div class="pb-30px">
     <!-- 类型：image -->
     <div v-if="props.type === 'image'">
-      <div class="waterfall" v-loading="loading">
-        <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
-          <img class="material-img" :src="item.url" />
-          <p class="item-name">{{ item.name }}</p>
-          <ElRow class="ope-row">
+      <div
+        class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+        v-loading="loading"
+      >
+        <div
+          class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
+          v-for="item in list"
+          :key="item.mediaId"
+        >
+          <img class="w-full" :src="item.url" />
+          <p class="truncate text-center text-xs leading-[30px]">
+            {{ item.name }}
+          </p>
+          <ElRow class="flex justify-center pt-2.5">
             <ElButton type="success" @click="selectMaterialFun(item)">
               选择
-              <IconifyIcon icon="ep:circle-check" />
+              <IconifyIcon icon="lucide:circle-check" />
             </ElButton>
           </ElRow>
         </div>
@@ -164,7 +174,7 @@ onMounted(async () => {
           <template #default="scope">
             <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
               选择
-              <IconifyIcon icon="ep:plus" />
+              <IconifyIcon icon="lucide:plus" />
             </ElButton>
           </template>
         </ElTableColumn>
@@ -211,7 +221,7 @@ onMounted(async () => {
           <template #default="scope">
             <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
               选择
-              <IconifyIcon icon="akar-icons:circle-plus" />
+              <IconifyIcon icon="lucide:circle-plus" />
             </ElButton>
           </template>
         </ElTableColumn>
@@ -229,14 +239,21 @@ onMounted(async () => {
     </div>
     <!-- 类型：news -->
     <div v-else-if="props.type === 'news'">
-      <div class="waterfall" v-loading="loading">
-        <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+      <div
+        class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+        v-loading="loading"
+      >
+        <div
+          class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
+          v-for="item in list"
+          :key="item.mediaId"
+        >
           <div v-if="item.content && item.content.newsItem">
             <News :articles="item.content.newsItem" />
-            <ElRow class="ope-row">
+            <ElRow class="flex justify-center pt-2.5">
               <ElButton type="success" @click="selectMaterialFun(item)">
                 选择
-                <IconifyIcon icon="ep:circle-check" />
+                <IconifyIcon icon="lucide:circle-check" />
               </ElButton>
             </ElRow>
           </div>
@@ -255,54 +272,3 @@ onMounted(async () => {
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-@media (width >= 992px) and (width <= 1300px) {
-  .waterfall {
-    column-count: 3;
-  }
-
-  p {
-    color: red;
-  }
-}
-
-@media (width >= 768px) and (width <= 991px) {
-  .waterfall {
-    column-count: 2;
-  }
-
-  p {
-    color: orange;
-  }
-}
-
-@media (width <= 767px) {
-  .waterfall {
-    column-count: 1;
-  }
-}
-
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
-
-.waterfall {
-  column-gap: 10px;
-  width: 100%;
-  margin: 0 auto;
-  column-count: 5;
-}
-
-.waterfall-item {
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #eaeaea;
-  break-inside: avoid;
-}
-
-.material-img {
-  width: 100%;
-}
-
-p {
-  line-height: 30px;
-}
-</style>

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

@@ -1,5 +0,0 @@
-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

@@ -1,14 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { ElTag } from 'element-plus';
 
-const props = defineProps<{
+defineOptions({ name: 'MsgEvent' });
+
+defineProps<{
   item: any;
 }>();
-
-// TODO @hw：看看用 antd 的风格，还是 ele 的风格，就是下面的 item。
-const item = ref(props.item);
 </script>
 
 <template>

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

@@ -1,22 +1,17 @@
 <script lang="ts" setup>
-import type { User } from '../types';
+import type { MpUserApi } from '#/api/mp/user/index';
 
+import { preferences } from '@vben/preferences';
 import { formatDateTime } from '@vben/utils';
 
-import avatarWechat from '#/assets/imgs/wechat.png';
-
-import Msg from './wx-msg.vue';
-
-// 确保 User 类型被识别为已使用
-// TODO @hw：是不是不用 PropsUser 哈？
-type PropsUser = User;
+import Msg from './msg.vue';
 
 defineOptions({ name: 'MsgList' });
 
 const props = defineProps<{
   accountId: number;
   list: any[];
-  user: PropsUser;
+  user: Partial<MpUserApi.User>;
 }>();
 
 const SendFrom = {
@@ -24,46 +19,58 @@ const SendFrom = {
   User: 1,
 } as const; // 发送来源
 
-// TODO @hw：是不是用 SendFrom ，或者 number？
-type SendFromType = (typeof SendFrom)[keyof typeof SendFrom];
+function getAvatar(sendFrom: number) {
+  return sendFrom === SendFrom.User
+    ? props.user.avatar
+    : preferences.app.defaultAvatar;
+}
 
-// 显式引用枚举成员供模板使用
-// TODO @hw：是不是用 SendFrom 就好啦？
-const MpBotValue = SendFrom.MpBot;
-const UserValue = SendFrom.User;
-
-const getAvatar = (sendFrom: SendFromType) =>
-  sendFrom === UserValue ? props.user.avatar : avatarWechat;
-
-const getNickname = (sendFrom: SendFromType) =>
-  sendFrom === UserValue ? props.user.nickname : '公众号';
+function getNickname(sendFrom: number) {
+  return sendFrom === SendFrom.User ? props.user.nickname : '公众号';
+}
 </script>
 <template>
-  <div v-for="item in props.list" :key="item.id">
+  <div class="execution" v-for="item in props.list" :key="item.id">
     <div
       class="mb-[30px] flex items-start"
-      :class="{ 'flex-row-reverse': item.sendFrom === MpBotValue }"
+      :class="{ 'flex-row-reverse': item.sendFrom === SendFrom.MpBot }"
     >
-      <div class="w-20 text-center">
+      <div class="flex w-20 flex-col items-center text-center">
         <img
           :src="getAvatar(item.sendFrom)"
-          class="box-border h-12 w-12 rounded-full border border-transparent align-middle"
+          class="mb-2 h-12 w-12 rounded-full border border-transparent object-cover"
         />
-        <div class="text-sm font-bold text-[#999]">
+        <div class="text-sm font-semibold text-[#999]">
           {{ getNickname(item.sendFrom) }}
         </div>
       </div>
-      <div class="relative mx-5 flex-1 rounded-[5px] border border-[#dedede]">
+      <div class="relative mx-2 flex-1 rounded-[5px] border border-[#dedede]">
+        <span
+          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#dedede]"
+          :class="{
+            '-right-2 left-auto border-l-[8px] border-r-0 border-l-[#dedede]':
+              item.sendFrom === SendFrom.MpBot,
+          }"
+        ></span>
+        <span
+          class="pointer-events-none absolute -left-[7px] top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#f8f8f8]"
+          :class="{
+            '-right-[7px] left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':
+              item.sendFrom === SendFrom.MpBot,
+          }"
+        ></span>
         <div
           class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
         >
-          <div class="mp-comment__create_time">
+          <div class="text-xs text-gray-500">
             {{ formatDateTime(item.createTime) }}
           </div>
         </div>
         <div
-          class="overflow-hidden rounded-b-[5px] bg-white px-[15px] py-[15px] text-sm text-[#333]"
-          :style="item.sendFrom === MpBotValue ? 'background: #6BED72;' : ''"
+          class="overflow-hidden rounded-b-[5px] p-[15px] text-sm text-[#333]"
+          :class="
+            item.sendFrom === SendFrom.MpBot ? 'bg-[#6BED72]' : 'bg-white'
+          "
         >
           <Msg :item="item" />
         </div>
@@ -71,11 +78,3 @@ const getNickname = (sendFrom: SendFromType) =>
     </div>
   </div>
 </template>
-
-<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/msg.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import { MpMsgType } from '@vben/constants';
+
+import {
+  WxLocation,
+  WxMusic,
+  WxNews,
+  WxVideoPlayer,
+  WxVoicePlayer,
+} from '#/views/mp/components';
+
+import MsgEvent from './msg-event.vue';
+
+defineOptions({ name: 'WxMsg' });
+
+withDefaults(
+  defineProps<{
+    item?: any;
+  }>(),
+  {
+    item: {},
+  },
+);
+</script>
+
+<template>
+  <div>
+    <MsgEvent v-if="item.type === MpMsgType.Event" :item="item" />
+
+    <div v-else-if="item.type === MpMsgType.Text">{{ item.content }}</div>
+
+    <div v-else-if="item.type === MpMsgType.Voice">
+      <WxVideoPlayer :url="item.mediaUrl" :content="item.recognition" />
+    </div>
+
+    <div v-else-if="item.type === MpMsgType.Image">
+      <a target="_blank" :href="item.mediaUrl">
+        <img :src="item.mediaUrl" class="w-[100px]" />
+      </a>
+    </div>
+
+    <div
+      v-else-if="item.type === MpMsgType.Video || item.type === 'shortvideo'"
+      class="text-center"
+    >
+      <WxVoicePlayer :url="item.mediaUrl" />
+    </div>
+
+    <div v-else-if="item.type === MpMsgType.Link" class="flex-1">
+      <el-link
+        type="success"
+        :underline="false"
+        target="_blank"
+        :href="item.url"
+      >
+        <div
+          class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
+        >
+          <i class="el-icon-link"></i>{{ item.title }}
+        </div>
+      </el-link>
+      <div
+        class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
+        style="height: unset"
+      >
+        {{ item.description }}
+      </div>
+    </div>
+
+    <div v-else-if="item.type === MpMsgType.Location">
+      <WxLocation
+        :label="item.label"
+        :location-y="item.locationY"
+        :location-x="item.locationX"
+      />
+    </div>
+
+    <div v-else-if="item.type === MpMsgType.News" class="w-[300px]">
+      <WxNews :articles="item.articles" />
+    </div>
+
+    <div v-else-if="item.type === MpMsgType.Music">
+      <WxMusic
+        :title="item.title"
+        :description="item.description"
+        :thumb-media-url="item.thumbMediaUrl"
+        :music-url="item.musicUrl"
+        :hq-music-url="item.hqMusicUrl"
+      />
+    </div>
+  </div>
+</template>

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

@@ -1,19 +0,0 @@
-// TODO @hw：是不是放枚举里？
-export enum MsgType {
-  Event = 'event',
-  Image = 'image',
-  Link = 'link',
-  Location = 'location',
-  Music = 'music',
-  News = 'news',
-  Text = 'text',
-  Video = 'video',
-  Voice = 'voice',
-}
-
-// TODO @hw：用 MpUserApi 里的 user 可以么？
-export interface User {
-  nickname: string;
-  avatar: string;
-  accountId: number;
-}

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

@@ -1,90 +1,176 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { MpUserApi } from '#/api/mp/user/index';
 
-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 { nextTick, onMounted, reactive, ref, unref } from 'vue';
 
-import { MsgType } from '../types';
-import MsgEvent from './msg-event.vue';
+import { preferences } from '@vben/preferences';
 
-defineOptions({ name: 'Msg' });
+import { ElButton, ElMessage } from 'element-plus';
 
-// TODO @hw：这个貌似和 antd 的差很多？
+import { getMessagePage, sendMessage } from '#/api/mp/message';
+import { getUser } from '#/api/mp/user';
+import { WxReply } from '#/views/mp/components';
+
+import MsgList from './msg-list.vue';
+
+defineOptions({ name: 'WxMsg' });
 
 const props = defineProps<{
-  item: any;
+  userId: number;
 }>();
 
-const item = ref<any>(props.item);
+const accountId = ref(-1); // 公众号ID，需要通过userId初始化
+const loading = ref(false); // 消息列表是否正在加载中
+const hasMore = ref(true); // 是否可以加载更多
+const list = ref<any[]>([]); // 消息列表
+const queryParams = reactive({
+  accountId,
+  pageNo: 1, // 当前页数
+  pageSize: 14, // 每页显示多少条
+});
+
+const user: Partial<MpUserApi.User> = reactive({
+  accountId, // 公众号账号编号
+  avatar: preferences.app.defaultAvatar,
+  nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
+});
+
+// ========= 消息发送 =========
+const sendLoading = ref(false); // 发送消息是否加载中
+const reply = ref<any>({
+  accountId: -1,
+  articles: [],
+  type: 'text',
+}); // 微信发送消息
+
+const replySelectRef = ref<InstanceType<typeof WxReply> | null>(null); // WxReply组件ref，用于消息发送成功后清除内容
+const msgDivRef = ref<HTMLDivElement | null>(null); // 消息显示窗口ref，用于滚动到底部
+
+/** 完成加载 */
+onMounted(async () => {
+  const data = await getUser(props.userId);
+  user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname;
+  user.avatar = data.avatar?.length > 0 ? data.avatar : user.avatar;
+  accountId.value = data.accountId;
+  reply.value.accountId = data.accountId;
+
+  refreshChange();
+});
+
+/** 执行发送 */
+async function sendMsg() {
+  if (!unref(reply)) {
+    return;
+  }
+  // 公众号限制：客服消息，公众号只允许发送一条
+  if (
+    reply.value.type === 'news' &&
+    reply.value.articles &&
+    reply.value.articles.length > 1
+  ) {
+    reply.value.articles = [reply.value.articles[0]];
+    ElMessage.success('图文消息条数限制在 1 条以内，已默认发送第一条');
+  }
+
+  const data = await sendMessage({
+    ...reply.value,
+    userId: props.userId,
+  } as any);
+  sendLoading.value = false;
+
+  list.value = [...list.value, data];
+  await scrollToBottom();
+
+  // 发送后清空数据
+  replySelectRef.value?.clear();
+}
+
+function loadMore() {
+  queryParams.pageNo++;
+  getPage(queryParams, null);
+}
+
+async function getPage(page: any, params: any = null) {
+  loading.value = true;
+  const dataTemp = await getMessagePage(
+    Object.assign(
+      {
+        accountId: page.accountId,
+        pageNo: page.pageNo,
+        pageSize: page.pageSize,
+        userId: props.userId,
+      },
+      params,
+    ),
+  );
+
+  const scrollHeight = msgDivRef.value?.scrollHeight ?? 0;
+  // 处理数据
+  const data = dataTemp.list.toReversed();
+  list.value = [...data, ...list.value];
+  loading.value = false;
+  if (data.length < queryParams.pageSize || data.length === 0) {
+    hasMore.value = false;
+  }
+  queryParams.pageNo = page.pageNo;
+  queryParams.pageSize = page.pageSize;
+  // 滚动到原来的位置
+  if (queryParams.pageNo === 1) {
+    // 定位到消息底部
+    await scrollToBottom();
+  } else if (data.length > 0) {
+    // 定位滚动条
+    await nextTick();
+    if (scrollHeight !== 0 && msgDivRef.value) {
+      msgDivRef.value.scrollTop =
+        msgDivRef.value.scrollHeight - scrollHeight - 100;
+    }
+  }
+}
+
+function refreshChange() {
+  getPage(queryParams);
+}
+
+/** 定位到消息底部 */
+async function scrollToBottom() {
+  await nextTick();
+  if (msgDivRef.value) {
+    msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight;
+  }
+}
 </script>
 
 <template>
-  <div>
-    <MsgEvent v-if="item.type === MsgType.Event" :item="item" />
-
-    <div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
-
-    <div v-else-if="item.type === MsgType.Voice">
-      <VoicePlayer :url="item.mediaUrl" :content="item.recognition" />
-    </div>
-
-    <div v-else-if="item.type === MsgType.Image">
-      <a target="_blank" :href="item.mediaUrl">
-        <img :src="item.mediaUrl" class="w-[100px]" />
-      </a>
-    </div>
-
-    <div
-      v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
-      class="text-center"
-    >
-      <VideoPlayer :url="item.mediaUrl" />
-    </div>
-
-    <div v-else-if="item.type === MsgType.Link" class="flex-1">
-      <el-link
-        type="success"
-        :underline="false"
-        target="_blank"
-        :href="item.url"
-      >
+  <div class="flex h-full flex-col">
+    <div ref="msgDivRef" class="mx-2.5 flex-1 overflow-auto bg-[#eaeaea]">
+      <!-- 加载更多 -->
+      <div v-loading="loading"></div>
+      <div v-if="!loading">
         <div
-          class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
+          v-if="hasMore"
+          class="cursor-pointer rounded p-3 text-center text-sm text-[#409eff] transition-colors duration-300 hover:bg-[#f5f7fa]"
+          @click="loadMore"
         >
-          <i class="el-icon-link"></i>{{ item.title }}
+          <span>点击加载更多</span>
+        </div>
+        <div
+          v-else
+          class="cursor-not-allowed rounded p-3 text-center text-sm text-[#909399] hover:bg-transparent"
+        >
+          <span>没有更多了</span>
         </div>
-      </el-link>
-      <div
-        class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
-        style="height: unset"
-      >
-        {{ item.description }}
       </div>
+
+      <!-- 消息列表 -->
+      <MsgList :list="list" :account-id="accountId" :user="user" />
     </div>
 
-    <div v-else-if="item.type === MsgType.Location">
-      <Location
-        :label="item.label"
-        :location-y="item.locationY"
-        :location-x="item.locationX"
-      />
-    </div>
-
-    <div v-else-if="item.type === MsgType.News" class="w-[300px]">
-      <News :articles="item.articles" />
-    </div>
-
-    <div v-else-if="item.type === MsgType.Music">
-      <Music
-        :title="item.title"
-        :description="item.description"
-        :thumb-media-url="item.thumbMediaUrl"
-        :music-url="item.musicUrl"
-        :hq-music-url="item.hqMusicUrl"
-      />
+    <div class="p-2.5" v-loading="sendLoading">
+      <WxReply ref="replySelectRef" v-model="reply" />
+      <ElButton type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
+        发送(S)
+      </ElButton>
     </div>
   </div>
 </template>

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

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

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

@@ -0,0 +1,7 @@
+export interface WxMusicProps {
+  title?: string;
+  description?: string;
+  musicUrl?: string;
+  hqMusicUrl?: string;
+  thumbMediaUrl: string;
+}

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

@@ -1,34 +1,23 @@
 <script lang="ts" setup>
-/** 微信消息 - 音乐 */
-defineOptions({ name: 'Music' });
+import type { WxMusicProps } from './types';
 
-const props = defineProps({
-  title: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  description: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  musicUrl: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  hqMusicUrl: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  thumbMediaUrl: {
-    required: true,
-    type: String,
-  },
+import { computed } from 'vue';
+
+import { ElLink } from 'element-plus';
+
+/** 微信消息 - 音乐 */
+defineOptions({ name: 'WxMusic' });
+
+const props = withDefaults(defineProps<WxMusicProps>(), {
+  title: '',
+  description: '',
+  musicUrl: '',
+  hqMusicUrl: '',
+  thumbMediaUrl: '',
 });
 
+const href = computed(() => props.hqMusicUrl || props.musicUrl);
+
 defineExpose({
   musicUrl: props.musicUrl,
 });
@@ -36,33 +25,30 @@ defineExpose({
 
 <template>
   <div>
-    <!-- TODO @hw：ElLink -->
-    <el-link
+    <ElLink
       type="success"
       :underline="false"
       target="_blank"
-      :href="hqMusicUrl ? hqMusicUrl : musicUrl"
+      :href="href"
+      class="block"
     >
-      <div class="mp-card__body bg-background rounded-sm p-2.5">
-        <div class="mp-card__avatar">
-          <img :src="thumbMediaUrl" alt="" />
+      <div
+        class="flex items-center rounded-sm border border-[#e8e8e8] bg-background p-4 transition hover:border-black/10 hover:shadow-sm"
+      >
+        <div
+          class="mr-3 h-12 w-12 overflow-hidden rounded-full border border-transparent"
+        >
+          <img :src="thumbMediaUrl" alt="" class="h-full w-full object-cover" />
         </div>
-        <div class="mp-card__detail">
-          <div class="mp-card__title" style="margin-bottom: unset">
+        <div class="flex-1">
+          <div class="mb-3 text-base font-medium text-[#000000d9]">
             {{ title }}
           </div>
-          <div class="mp-card__info" style="height: unset">
+          <div class="line-clamp-3 h-16 overflow-hidden text-sm text-black/45">
             {{ description }}
           </div>
         </div>
       </div>
-    </el-link>
+    </ElLink>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
-
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
-@import url('../wx-msg/card.scss');
-</style>

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

@@ -1,3 +0,0 @@
-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

@@ -1,13 +1,4 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  【微信消息 - 图文】
-  芋道源码：
-  ① 代码优化，补充注释，提升阅读性
--->
 <script lang="ts" setup>
-import { ElImage } from 'element-plus';
-
 /** 微信消息 - 图文 */
 defineOptions({ name: 'WxNews' });
 
@@ -26,17 +17,21 @@ defineExpose({
 </script>
 
 <template>
-  <div class="news-home">
+  <div class="mx-auto flex w-full flex-col gap-[10px] bg-white">
     <div v-for="(article, index) in articles" :key="index" class="news-div">
       <!-- 头条 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
-        <div class="news-main">
-          <div class="news-content flex items-center justify-center">
-            <ElImage
-              :src="article.picUrl || article.thumbUrl"
-              class="material-img"
+        <div class="mx-auto w-full">
+          <div class="relative w-full bg-[#acadae]">
+            <img
+              :src="article.picUrl"
+              :preview="false"
+              class="flex w-[100%] items-center justify-center object-cover"
             />
-            <div class="news-content-title">
+            <div
+              class="absolute bottom-0 left-0 ml-[10px] inline-block w-[98%] whitespace-normal p-[1%] text-base text-white"
+              style="box-sizing: unset !important"
+            >
               <span>{{ article.title }}</span>
             </div>
           </div>
@@ -44,14 +39,15 @@ defineExpose({
       </a>
       <!-- 二条/三条等等 -->
       <a v-else :href="article.url" target="_blank">
-        <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 flex items-center justify-center">
+        <div class="bg-white">
+          <div class="relative box-border p-[10px]">
+            <div class="flex items-center">
+              <div class="flex-1 text-sm">{{ article.title }}</div>
+
               <img
-                :src="article.picUrl || article.thumbUrl"
-                class="material-img"
-                height="100%"
+                :src="article.picUrl"
+                class="h-[70px] w-[70px] object-cover"
+                alt="文章图片"
               />
             </div>
           </div>
@@ -60,71 +56,3 @@ defineExpose({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
-
-.news-home {
-  width: 100%;
-  margin: auto;
-  background-color: #fff;
-}
-
-.news-main {
-  width: 100%;
-  margin: auto;
-}
-
-.news-content {
-  position: relative;
-  width: 100%;
-  background-color: #acadae;
-}
-
-.news-content-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  box-sizing: unset !important;
-  display: inline-block;
-  width: 98%;
-  padding: 1%;
-  font-size: 12px;
-  color: #fff;
-  white-space: normal;
-  background-color: black;
-  opacity: 0.65;
-}
-
-.news-main-item {
-  padding: 5px 0;
-  background-color: #fff;
-  border-top: 1px solid #eaeaea;
-}
-
-.news-content-item {
-  position: relative;
-}
-
-.news-content-item-title {
-  display: inline-block;
-  width: 70%;
-  margin-left: 1%;
-  font-size: 10px;
-  white-space: normal;
-}
-
-.news-content-item-img {
-  display: inline-block;
-  width: 25%;
-  margin-right: 1%;
-  background-color: #acadae;
-}
-
-.material-img {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-</style>

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

@@ -1,5 +0,0 @@
-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

@@ -20,6 +20,8 @@ import {
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 
+defineOptions({ name: 'TabImage' });
+
 const props = defineProps<{
   modelValue: Reply;
 }>();
@@ -28,12 +30,9 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-// TODO @hw：直接用 ElMessage
-const message = ElMessage;
-
+const accessStore = useAccessStore();
 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 HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
 const reply = computed<Reply>({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
@@ -56,7 +55,7 @@ function beforeImageUpload(rawFile: UploadRawFile) {
 /** 上传成功 */
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
+    ElMessage.error(`上传出错：${res.msg}`);
     return false;
   }
 
@@ -103,7 +102,7 @@ function selectMaterial(item: any) {
       </p>
       <ElRow class="pt-[10px] text-center" justify="center">
         <ElButton type="danger" circle @click="onDelete">
-          <IconifyIcon icon="ep:delete" />
+          <IconifyIcon icon="lucide:trash-2" />
         </ElButton>
       </ElRow>
     </div>
@@ -115,7 +114,7 @@ function selectMaterial(item: any) {
         class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
       >
         <ElButton type="success" @click="showDialog = true">
-          素材库选择 <IconifyIcon icon="ep:circle-check" />
+          素材库选择 <IconifyIcon icon="lucide:circle-check" />
         </ElButton>
         <ElDialog
           title="选择图片"
@@ -158,4 +157,4 @@ function selectMaterial(item: any) {
       </ElCol>
     </ElRow>
   </div>
-</template>
+</template>

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

@@ -1,7 +1,6 @@
 <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';
@@ -22,6 +21,8 @@ import {
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 
+defineOptions({ name: 'TabMusic' });
+
 const props = defineProps<{
   modelValue: Reply;
 }>();
@@ -30,8 +31,6 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-const message = ElMessage;
-
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 const reply = computed<Reply>({
@@ -56,7 +55,7 @@ function beforeImageUpload(rawFile: UploadRawFile) {
 /** 上传成功 */
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
+    ElMessage.error(`上传出错：${res.msg}`);
     return false;
   }
 
@@ -72,7 +71,6 @@ function onUploadSuccess(res: any) {
 /** 选择素材 */
 function selectMaterial(item: any) {
   showDialog.value = false;
-
   reply.value.thumbMediaId = item.mediaId;
   reply.value.thumbMediaUrl = item.url;
 }
@@ -90,7 +88,7 @@ function selectMaterial(item: any) {
                 v-if="reply.thumbMediaUrl"
                 :src="reply.thumbMediaUrl"
               />
-              <IconifyIcon v-else icon="ep:plus" />
+              <IconifyIcon v-else icon="lucide:plus" />
             </ElRow>
             <ElRow align="middle" justify="center" class="mt-[2%]">
               <div>

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

@@ -3,6 +3,7 @@ import type { Reply } from './types';
 
 import { computed, ref } from 'vue';
 
+import { NewsType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';
@@ -10,8 +11,6 @@ import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';
 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 '../wx-material-select/types';
-
 defineOptions({ name: 'TabNews' });
 
 const props = defineProps<{
@@ -52,10 +51,11 @@ function onDelete() {
         <News :articles="reply.articles" />
         <ElCol class="pt-[10px] text-center">
           <ElButton type="danger" circle @click="onDelete">
-            <IconifyIcon icon="ep:delete" />
+            <IconifyIcon icon="lucide:trash-2" />
           </ElButton>
         </ElCol>
       </div>
+
       <!-- 选择素材 -->
       <ElCol :span="24" v-if="!reply.content">
         <ElRow class="text-center" align="middle">
@@ -66,7 +66,7 @@ function onDelete() {
                   ? '选择已发布图文'
                   : '选择草稿箱图文'
               }}
-              <IconifyIcon icon="ep:circle-check" />
+              <IconifyIcon icon="lucide:circle-check" />
             </ElButton>
           </ElCol>
         </ElRow>

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

@@ -32,17 +32,13 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-// TODO @hw：还是用 ElMessage
-const message = ElMessage;
-
+const accessStore = useAccessStore();
 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 HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
 
 const reply = computed<Reply>({
   get: () => props.modelValue,
-  // TODO @hw：这里 antd 和 ele 有差异，要统一么？
-  set: (val: Reply) => emit('update:modelValue', val),
+  set: (val) => emit('update:modelValue', val),
 });
 
 const showDialog = ref(false);
@@ -62,7 +58,7 @@ function beforeVideoUpload(rawFile: UploadRawFile) {
 /** 上传成功 */
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
+    ElMessage.error(`上传出错：${res.msg}`);
     return false;
   }
 
@@ -109,7 +105,7 @@ function selectMaterial(item: any) {
           <!-- 选择素材 -->
           <ElCol :span="12">
             <ElButton type="success" @click="showDialog = true">
-              素材库选择 <IconifyIcon icon="ep:circle-check" />
+              素材库选择 <IconifyIcon icon="lucide:circle-check" />
             </ElButton>
             <ElDialog
               title="选择视频"
@@ -138,7 +134,7 @@ function selectMaterial(item: any) {
               :on-success="onUploadSuccess"
             >
               <ElButton type="primary">
-                新建视频 <IconifyIcon icon="ep:upload" />
+                新建视频 <IconifyIcon icon="lucide:upload" />
               </ElButton>
             </ElUpload>
           </ElCol>

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

@@ -31,16 +31,13 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-// TODO @hw：用 ElMessage
-const message = ElMessage;
-
+const accessStore = useAccessStore();
 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 HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
+
 const reply = computed<Reply>({
   get: () => props.modelValue,
-  // TODO @hw：这里要和 antd 统一么？还是 ele 和它统一
-  set: (val: Reply) => emit('update:modelValue', val),
+  set: (val) => emit('update:modelValue', val),
 });
 
 const showDialog = ref(false);
@@ -60,7 +57,7 @@ function beforeVoiceUpload(rawFile: UploadRawFile) {
 /** 上传成功 */
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
+    ElMessage.error(`上传出错：${res.msg}`);
     return false;
   }
 
@@ -106,7 +103,7 @@ function selectMaterial(item: Reply) {
       </ElRow>
       <ElRow class="w-full pt-[10px] text-center" justify="center">
         <ElButton type="danger" circle @click="onDelete">
-          <IconifyIcon icon="ep:delete" />
+          <IconifyIcon icon="lucide:trash-2" />
         </ElButton>
       </ElRow>
     </div>
@@ -117,7 +114,7 @@ function selectMaterial(item: Reply) {
         class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
       >
         <ElButton type="success" @click="showDialog = true">
-          素材库选择<IconifyIcon icon="ep:circle-check" />
+          素材库选择<IconifyIcon icon="lucide:circle-check" />
         </ElButton>
         <ElDialog
           title="选择语音"
@@ -158,4 +155,4 @@ function selectMaterial(item: Reply) {
       </ElCol>
     </ElRow>
   </div>
-</template>
+</template>

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

@@ -1,54 +1,42 @@
 import type { Ref } from 'vue';
 
+import type { ReplyType } from '@vben/constants';
+
 import { unref } from 'vue';
 
-// TODO @hw：和 antd 风格，保持一致；
-enum ReplyType {
-  Image = 'image',
-  Music = 'music',
-  News = 'news',
-  Text = 'text',
-  Video = 'video',
-  Voice = 'voice',
-}
-
-interface _Reply {
+export interface Reply {
   accountId: number;
-  type: ReplyType;
-  name?: null | string;
+  articles?: any[];
   content?: null | string;
-  mediaId?: null | string;
-  url?: null | string;
-  title?: null | string;
   description?: null | string;
-  thumbMediaId?: null | string;
-  thumbMediaUrl?: null | string;
-  musicUrl?: null | string;
   hqMusicUrl?: null | string;
   introduction?: null | string;
-  articles?: any[];
+  mediaId?: null | string;
+  musicUrl?: null | string;
+  name?: null | string;
+  thumbMediaId?: null | string;
+  thumbMediaUrl?: null | string;
+  title?: null | string;
+  type: ReplyType;
+  url?: null | string;
 }
 
-type Reply = _Reply; // Partial<_Reply>
-
 /** 利用旧的 reply[accountId, type] 初始化新的 Reply */
-const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
+export function createEmptyReply(old: Ref<Reply> | Reply): Reply {
   return {
     accountId: unref(old).accountId,
-    type: unref(old).type,
-    name: null,
+    articles: [],
     content: null,
-    mediaId: null,
-    url: null,
-    title: null,
     description: null,
-    thumbMediaId: null,
-    thumbMediaUrl: null,
-    musicUrl: null,
     hqMusicUrl: null,
     introduction: null,
-    articles: [],
+    mediaId: null,
+    musicUrl: null,
+    name: null,
+    thumbMediaId: null,
+    thumbMediaUrl: null,
+    title: null,
+    type: unref(old).type,
+    url: null,
   };
-};
-
-export { createEmptyReply, type Reply, ReplyType };
+}

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

@@ -1,38 +1,36 @@
 <script lang="ts" setup>
 import type { Reply } from './types';
 
-import { computed } from 'vue';
+import { computed, ref, unref, watch } from 'vue';
 
+import { NewsType, ReplyType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { ElRow, ElTabPane, ElTabs } from 'element-plus';
 
-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';
 import TabText from './tab-text.vue';
 import TabVideo from './tab-video.vue';
 import TabVoice from './tab-voice.vue';
-import { createEmptyReply, ReplyType } from './types';
+import { createEmptyReply } from './types';
 
 /** 消息回复选择 */
 defineOptions({ name: 'WxReplySelect' });
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: Reply | undefined;
-    newsType?: NewsType;
-  }>(),
-  {
-    newsType: () => NewsType.Published,
-  },
-);
-
+const props = withDefaults(defineProps<Props>(), {
+  newsType: undefined,
+});
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
+interface Props {
+  modelValue: Reply | undefined;
+  newsType?: NewsType;
+}
+
 const defaultReply: Reply = {
   accountId: -1,
   type: ReplyType.Text,
@@ -43,6 +41,67 @@ const reply = computed<Reply>({
   set: (val) => emit('update:modelValue', val),
 });
 
+const tabCache = new Map<ReplyType, Reply>(); // 作为多个标签保存各自 Reply 的缓存
+const currentTab = ref<ReplyType>(props.modelValue?.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply 进行赋值会产生了循环调用
+
+// 监听 modelValue 变化，同步更新 currentTab 和缓存
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue?.type) {
+      // 如果类型变化，更新 currentTab
+      if (newValue.type !== currentTab.value) {
+        currentTab.value = newValue.type;
+      }
+      // 如果 modelValue 有数据，更新对应 tab 的缓存
+      if (newValue.type) {
+        tabCache.set(newValue.type, { ...newValue });
+      }
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+watch(
+  currentTab,
+  (newTab, oldTab) => {
+    // 第一次进入：oldTab 为 undefined
+    // 判断 newTab 是因为 Reply 为 Partial
+    if (oldTab === undefined || newTab === undefined) {
+      return;
+    }
+
+    // 保存旧tab的数据到缓存
+    const oldReply = unref(reply);
+    // 只有当旧tab的reply有实际数据时才缓存（避免缓存空数据）
+    if (oldReply && oldTab === oldReply.type) {
+      tabCache.set(oldTab, oldReply);
+    }
+
+    // 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
+    const temp = tabCache.get(newTab);
+    if (temp) {
+      reply.value = temp;
+    } else {
+      // 如果当前reply的类型就是新tab的类型，说明这是从外部传入的数据，应该保留
+      const currentReply = unref(reply);
+      if (currentReply && currentReply.type === newTab) {
+        // 这是从外部传入的数据，直接缓存并使用
+        tabCache.set(newTab, currentReply);
+        // 不需要修改reply.value，因为它已经是正确的了
+      } else {
+        // 创建新的空reply
+        const newData = createEmptyReply(reply);
+        newData.type = newTab;
+        reply.value = newData;
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
 /** 清除除了`type`, `accountId`的字段 */
 function clear() {
   reply.value = createEmptyReply(reply);
@@ -58,7 +117,9 @@ defineExpose({
     <!-- 类型 1：文本 -->
     <ElTabPane :name="ReplyType.Text">
       <template #label>
-        <ElRow align="middle"><IconifyIcon icon="ep:document" /> 文本</ElRow>
+        <ElRow align="middle">
+          <IconifyIcon icon="lucide:file-text" /> 文本
+        </ElRow>
       </template>
       <TabText v-model="reply.content" />
     </ElTabPane>
@@ -67,7 +128,7 @@ defineExpose({
     <ElTabPane :name="ReplyType.Image">
       <template #label>
         <ElRow align="middle">
-          <IconifyIcon icon="ep:picture" class="mr-5px" /> 图片
+          <IconifyIcon icon="lucide:image" class="mr-5px" /> 图片
         </ElRow>
       </template>
       <TabImage v-model="reply" />
@@ -76,7 +137,7 @@ defineExpose({
     <!-- 类型 3：语音 -->
     <ElTabPane :name="ReplyType.Voice">
       <template #label>
-        <ElRow align="middle"><IconifyIcon icon="ep:phone" /> 语音</ElRow>
+        <ElRow align="middle"> <IconifyIcon icon="lucide:mic" /> 语音 </ElRow>
       </template>
       <TabVoice v-model="reply" />
     </ElTabPane>
@@ -84,7 +145,7 @@ defineExpose({
     <!-- 类型 4：视频 -->
     <ElTabPane :name="ReplyType.Video">
       <template #label>
-        <ElRow align="middle"><IconifyIcon icon="ep:share" /> 视频</ElRow>
+        <ElRow align="middle"><IconifyIcon icon="lucide:video" /> 视频</ElRow>
       </template>
       <TabVideo v-model="reply" />
     </ElTabPane>
@@ -92,7 +153,9 @@ defineExpose({
     <!-- 类型 5：图文 -->
     <ElTabPane :name="ReplyType.News">
       <template #label>
-        <ElRow align="middle"><IconifyIcon icon="ep:reading" /> 图文</ElRow>
+        <ElRow align="middle">
+          <IconifyIcon icon="lucide:newspaper" /> 图文
+        </ElRow>
       </template>
       <TabNews v-model="reply" :news-type="newsType" />
     </ElTabPane>
@@ -100,9 +163,9 @@ defineExpose({
     <!-- 类型 6：音乐 -->
     <ElTabPane :name="ReplyType.Music">
       <template #label>
-        <ElRow align="middle"><IconifyIcon icon="ep:service" />音乐</ElRow>
+        <ElRow align="middle"> <IconifyIcon icon="lucide:music" />音乐 </ElRow>
       </template>
       <TabMusic v-model="reply" />
     </ElTabPane>
   </ElTabs>
-</template>
+</template>

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

@@ -1,3 +0,0 @@
-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

@@ -11,26 +11,22 @@ import 'video.js/dist/video-js.css';
 /** 微信消息 - 视频 */
 defineOptions({ name: 'WxVideoPlayer' });
 
-// TODO @hw：antd 或者 ele，props 保持一致；
-const props = defineProps({
-  url: {
-    type: String,
-    required: true,
-  },
-});
+const props = defineProps<{
+  url: string;
+}>();
 
 const dialogVideo = ref(false);
 
-const playVideo = () => {
+function playVideo() {
   dialogVideo.value = true;
-};
+}
 </script>
 
 <template>
   <div @click="playVideo()">
     <!-- 提示 -->
     <div class="flex cursor-pointer flex-col items-center">
-      <IconifyIcon icon="ep:video-play" :size="32" class="mr-5px" />
+      <IconifyIcon icon="lucide:circle-play" :size="32" class="mr-5px" />
       <p class="text-sm">点击播放视频</p>
     </div>
 
@@ -47,19 +43,6 @@ const playVideo = () => {
         :width="800"
         :playback-rates="[0.7, 1.0, 1.5, 2.0]"
       />
-      <!-- TODO @hw：删除掉？ -->
-      <!--     事件，暫時沒用
-      @mounted="handleMounted"-->
-      <!--        @ready="handleEvent($event)"-->
-      <!--        @play="handleEvent($event)"-->
-      <!--        @pause="handleEvent($event)"-->
-      <!--        @ended="handleEvent($event)"-->
-      <!--        @loadeddata="handleEvent($event)"-->
-      <!--        @waiting="handleEvent($event)"-->
-      <!--        @playing="handleEvent($event)"-->
-      <!--        @canplay="handleEvent($event)"-->
-      <!--        @canplaythrough="handleEvent($event)"-->
-      <!--        @timeupdate="handleEvent(player?.currentTime())"-->
     </ElDialog>
   </div>
 </template>

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

@@ -1,3 +0,0 @@
-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

@@ -5,29 +5,27 @@ import { IconifyIcon } from '@vben/icons';
 
 // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
 import BenzAMRRecorder from 'benz-amr-recorder';
+import { ElTag } from 'element-plus';
 
 /** 微信消息 - 语音 */
-defineOptions({ name: 'VoicePlayer' });
+defineOptions({ name: 'WxVoicePlayer' });
 
-// TODO @hw：antd 和 ele 代码风格一致；
-const props = defineProps({
-  url: {
-    type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
-    required: true,
+const props = withDefaults(
+  defineProps<{
+    content?: string; // 语音文本
+    url: string; // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
+  }>(),
+  {
+    content: '',
   },
-  content: {
-    type: String, // 语音文本
-    required: false,
-    default: '',
-  },
-});
+);
 
-const amr = ref();
+const amr = ref<any>();
 const playing = ref(false);
-const duration = ref();
+const duration = ref<number>();
 
 /** 处理点击，播放或暂停 */
-const playVoice = () => {
+function playVoice() {
   // 情况一：未初始化，则创建 BenzAMRRecorder
   if (amr.value === undefined) {
     amrInit();
@@ -39,10 +37,10 @@ const playVoice = () => {
   } else {
     amrPlay();
   }
-};
+}
 
 /** 音频初始化 */
-const amrInit = () => {
+function amrInit() {
   amr.value = new BenzAMRRecorder();
   // 设置播放
   amr.value.initWithUrl(props.url).then(() => {
@@ -53,50 +51,39 @@ const amrInit = () => {
   amr.value.onEnded(() => {
     playing.value = false;
   });
-};
+}
 
 /** 音频播放 */
-const amrPlay = () => {
+function amrPlay() {
   playing.value = true;
   amr.value.play();
-};
+}
 
 /** 音频暂停 */
-const amrStop = () => {
+function amrStop() {
   playing.value = false;
   amr.value.stop();
-};
-// TODO 芋艿：下面样式有点问题
+}
+// TODO dylan：下面样式有点问题
 </script>
 
 <template>
-  <div class="wx-voice-div" @click="playVoice">
-    <el-icon>
-      <IconifyIcon v-if="playing !== true" icon="ep:video-play" :size="32" />
-      <IconifyIcon v-else icon="ep:video-pause" :size="32" />
-      <span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
-    </el-icon>
+  <div
+    class="flex min-h-[50px] min-w-[120px] flex-col items-center justify-center rounded-[10px] bg-[#eaeaea] px-3 py-2"
+    @click="playVoice"
+  >
+    <div class="flex items-center">
+      <IconifyIcon
+        v-if="playing !== true"
+        icon="lucide:circle-play"
+        :size="32"
+      />
+      <IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
+      <span class="ml-2 text-xs" v-if="duration">{{ duration }} 秒</span>
+    </div>
     <div v-if="content">
-      <el-tag type="success" size="small">语音识别</el-tag>
+      <ElTag type="success" size="small">语音识别</ElTag>
       {{ content }}
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.wx-voice-div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 120px;
-  height: 50px;
-  padding: 5px;
-  background-color: #eaeaea;
-  border-radius: 10px;
-}
-
-.amr-duration {
-  margin-left: 5px;
-  font-size: 11px;
-}
-</style>

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

@@ -1,14 +1,28 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { formatDateTime } from '@vben/utils';
+
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
-      field: 'content',
-      title: '图文内容',
-      minWidth: 300,
-      slots: { default: 'content' },
+      field: 'cover',
+      title: '图片',
+      width: 360,
+      slots: { default: 'cover' },
+    },
+    {
+      field: 'title',
+      title: '标题',
+      slots: { default: 'title' },
+    },
+    {
+      field: 'updateTime',
+      title: '修改时间',
+      formatter: ({ row }) => {
+        return formatDateTime(row.updateTime * 1000);
+      },
     },
     {
       title: '操作',

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

@@ -1,29 +1,22 @@
 <script lang="ts" setup>
-import type { Article } from './modules/types';
-
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpDraftApi } from '#/api/mp/draft';
 
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
-import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
+import { ElImage, ElLink, ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteDraft, getDraftPage } from '#/api/mp/draft';
-import * as MpFreePublishApi from '#/api/mp/freePublish';
+import { createEmptyNewsItem, deleteDraft, getDraftPage } from '#/api/mp/draft';
+import { submitFreePublish } from '#/api/mp/freePublish';
 import { WxAccountSelect } from '#/views/mp/components';
-import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import DraftTableCell from './modules/draft-table.vue';
 import Form from './modules/form.vue';
 
 defineOptions({ name: 'MpDraft' });
 
-const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: Form,
-  destroyOnClose: true,
-});
-
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
@@ -35,7 +28,90 @@ function handleAccountChange(accountId: number) {
   gridApi.formApi.submitForm();
 }
 
-// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
+/** 新增草稿 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+  formModalApi
+    .setData({
+      isCreating: true,
+      accountId,
+      newsList: [createEmptyNewsItem()],
+    })
+    .open();
+}
+
+/** 修改草稿 */
+async function handleEdit(row: MpDraftApi.DraftArticle) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+  formModalApi
+    .setData({
+      isCreating: false,
+      accountId,
+      mediaId: row.mediaId,
+      newsList: row.content.newsItem,
+    })
+    .open();
+}
+
+/** 删除草稿 */
+async function handleDelete(row: MpDraftApi.DraftArticle) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+  const hideLoading = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
+  });
+  try {
+    await deleteDraft(accountId, row.mediaId);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    hideLoading.close();
+  }
+}
+
+/** 发布草稿 */
+async function handlePublish(row: MpDraftApi.DraftArticle) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+  await confirm(
+    '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。' +
+      '已发布内容不会推送给用户，也不会展示在公众号主页中。 ' +
+      '发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。',
+  );
+  const hideLoading = ElLoading.service({
+    text: '发布中...',
+  });
+  try {
+    await submitFreePublish(accountId, row.mediaId);
+    ElMessage.success('发布成功');
+    handleRefresh();
+  } finally {
+    hideLoading.close();
+  }
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
@@ -63,7 +139,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             }
           });
           return {
-            list: drafts.list as unknown as Article[],
+            list: drafts.list,
             total: drafts.total,
           };
         },
@@ -78,101 +154,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<Article>,
+  } as VxeTableGridOptions<MpDraftApi.DraftArticle>,
 });
-
-/** 新增按钮操作 */
-async function handleCreate() {
-  const formValues = await gridApi.formApi.getValues();
-  const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
-    ElMessage.warning('请先选择公众号');
-    return;
-  }
-
-  formModalApi
-    .setData({
-      isCreating: true,
-      accountId,
-      newsList: [createEmptyNewsItem()],
-    })
-    .open();
-}
-
-/** 修改按钮操作 */
-async function handleEdit(row: Article) {
-  const formValues = await gridApi.formApi.getValues();
-  const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
-    ElMessage.warning('请先选择公众号');
-    return;
-  }
-
-  formModalApi
-    .setData({
-      isCreating: false,
-      accountId,
-      mediaId: row.mediaId,
-      newsList: row.content.newsItem,
-    })
-    .open();
-}
-
-/** 发布按钮操作 */
-async function handlePublish(row: Article) {
-  const formValues = await gridApi.formApi.getValues();
-  const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
-    ElMessage.warning('请先选择公众号');
-    return;
-  }
-
-  const content =
-    '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。' +
-    '已发布内容不会推送给用户，也不会展示在公众号主页中。 ' +
-    '发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。';
-  try {
-    await ElMessageBox.confirm(content);
-    const loadingInstance = ElLoading.service({
-      text: '发布中...',
-    });
-    try {
-      await MpFreePublishApi.submitFreePublish(accountId, row.mediaId);
-      ElMessage.success('发布成功');
-      await gridApi.query();
-    } finally {
-      loadingInstance.close();
-    }
-  } catch {
-    //
-  }
-}
-
-/** 删除按钮操作 */
-async function handleDelete(row: Article) {
-  const formValues = await gridApi.formApi.getValues();
-  const accountId = formValues.accountId;
-  if (!accountId) {
-    ElMessage.warning('请先选择公众号');
-    return;
-  }
-
-  try {
-    await ElMessageBox.confirm('此操作将永久删除该草稿, 是否继续?');
-    const loadingInstance = ElLoading.service({
-      text: '删除中...',
-    });
-    try {
-      await deleteDraft(accountId, row.mediaId);
-      ElMessage.success('删除成功');
-      handleRefresh();
-    } finally {
-      loadingInstance.close();
-    }
-  } catch {
-    //
-  }
-}
 </script>
 
 <template>
@@ -200,15 +183,45 @@ async function handleDelete(row: Article) {
           ]"
         />
       </template>
-      <template #content="{ row }">
-        <DraftTableCell :row="row" />
+      <template #cover="{ row }">
+        <div
+          v-if="row.content?.newsItem && row.content.newsItem.length > 0"
+          class="flex flex-col items-center justify-center gap-1"
+        >
+          <ElImage
+            v-for="(item, index) in row.content.newsItem"
+            :key="index"
+            :src="item.picUrl || item.thumbUrl"
+            :preview-src-list="[item.picUrl || item.thumbUrl]"
+            class="h-36 !w-[300px] rounded object-cover"
+            :alt="`文章 ${index + 1} 封面图`"
+          />
+        </div>
+        <span v-else class="text-gray-400">-</span>
+      </template>
+      <template #title="{ row }">
+        <div
+          v-if="row.content?.newsItem && row.content.newsItem.length > 0"
+          class="space-y-1"
+        >
+          <div
+            v-for="(item, index) in row.content.newsItem"
+            :key="index"
+            class="flex h-36 items-center justify-center"
+          >
+            <ElLink :href="(item as any).url" target="_blank">
+              {{ item.title }}
+            </ElLink>
+          </div>
+        </div>
+        <span v-else class="text-gray-400">-</span>
       </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
             {
               label: '发布',
-              type: 'success',
+              type: 'primary',
               link: true,
               icon: ACTION_ICON.UPLOAD,
               auth: ['mp:free-publish:submit'],
@@ -247,10 +260,6 @@ async function handleDelete(row: Article) {
       .vxe-cell {
         height: auto !important;
         padding: 0;
-
-        img {
-          width: 300px !important;
-        }
       }
     }
   }

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

@@ -1,165 +0,0 @@
-// TODO @hw：要不要删除
-export default {
-  list: [
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-q-G9pdsmZw0OYG4FzHQkKfpLfEwIH51wy2bxisx8PvW',
-      content: {
-        newsItem: [
-          {
-            title: '我是标题（OOO）',
-            author: '我是作者',
-            digest: '我是摘要',
-            content: '我是内容',
-            contentSourceUrl: 'https://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9XaFphcmtJVFh3VEc4Q1MxQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN2QxTE56SFBCYXc2RE9NcUxIeS1CQjJuUHhTWjBlN2VOeGRpRi1fZUhwN1FNQjdrQV9yRU9EU0hibHREZmZoVW5acnZrN3ZjaWsxejR3RGpKczBzTHFIM0dFNFZWVkpBc0dWWlAzUEhlVmpnfn4%3D&chksm=1f6354802814dd969ef83c0f3babe555c614270b30bc383beaf7ffd13b0257f0fe5ced9af694#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
-          },
-          {
-            title: '我是标题（XXX）',
-            author: '我是作者',
-            digest: '我是摘要',
-            content: '我是内容',
-            contentSourceUrl: 'https://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9yTlYwOEs1clpwcE5OUEhCQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN0NSMjFqN3N1aUZMbFNVLTZHN2ZDME9qOGp2THk2RFNlSTlKZ3Y1czFVZDdQQm5IeUg3dEppSUtpQUh5SExOOTRkT3dHNUdBdHdWSWlOendlREV3dS1jUEVQbFpiVTZmVW5iRWhZcGdkNTFRfn4%3D&chksm=1f6354802814dd96a403151cd44c7da4eecf0e475d25423e46ecd795b513bafd829a75daef9b#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
-          },
-        ],
-      },
-      updateTime: 1_673_655_730,
-    },
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-jGpXnO73ihN0lsNXknCRQHapp2xgHMRxHKG50LituFe',
-      content: {
-        newsItem: [
-          {
-            title: '我是标题（修改）',
-            author: '我是作者',
-            digest: '我是摘要',
-            content: '我是内容',
-            contentSourceUrl: 'https://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl95WVFXYndIZnZJd0t5cjgvQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN1dlNURPbWswbEF4RDd5dVJTdjQ4cm9Cc0Q1TWhpMUh6SE1hVEE3ZHljaHhlZjZYSGF5N2JNSHpDTlh6ajNZbkpGTGpTcUQ4M3NMdW41ZUpXNFZZQ1VKbVlaMVp5ekxEV1czREdsY1dOYTZnfn4%3D&chksm=1f6354be2814dda8e6238037c2ebd52b1c8e80e93249a861ad80e4d40e5ca7207233475ca689#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
-          },
-        ],
-      },
-      updateTime: 1_673_655_584,
-    },
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-v5SrbNCPpD6M_p3TmSrYwTjKogs-0DMJgmjMyNZPeMO',
-      content: {
-        newsItem: [
-          {
-            title: '1321',
-            author: '3232',
-            digest: '1333',
-            content: '<p>444</p>',
-            contentSourceUrl: 'http://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-tlQmcl3RdC-Jcgns6IQtf7zenGy3b86WLT7GzUcrb1T',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9jelJiaDAzbmdpSkJOZ2M2QWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNDNXVVc2ZDRYeTY0Zm1weXR6dE9vQWh1TzEwbEpUVnRfVzJyaGFDNXBkZ0ZXM2JFOTNaRHNhOHRUeFdEanhMeS01X01kMUNWQ1BpRER3cjYwTl9pMnpFLUJhZXFucVVfM1pDUXlTUEl1S25nfn4%3D&chksm=1f6354bc2814ddaa56a90ad5bc3d078601c8d1589ba01827a8170587bc830ff9747b5f59c3a0#rd',
-            thumbUrl:
-              'http://mmbiz.qpic.cn/mmbiz_png/btUmCVHwbJUoicwBiacjVeQbu6QxgBVrukfSJXz509boa21SpH8OVHAqXCJiaiaAaHQJNxwwsa0gHRXVr0G5EZYamw/0?wx_fmt=png',
-          },
-        ],
-      },
-      updateTime: 1_673_628_969,
-    },
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-vdWrisK5EZbk4Y3tzh8P0PG0eEUbnQrh0BcsEb3WNP0',
-      content: {
-        newsItem: [
-          {
-            title: 'tudou',
-            author: 'haha',
-            digest: '312',
-            content: '<p>132312</p>',
-            contentSourceUrl: 'http://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qdkJ1ZjBoUmg2Uk9TS3RlQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNVg2aTJsaC1fMkU2eXNacUplN3VDTTZFZkhtMjhuTUZvWkxsNDBRSXExY2tiVXRHb09TaHgtREhzY3doZ0JYeC1TSTZ5eWZldXJsOWtfbV8yMi1aYkcyZ2pOY0haM0Ntb3VSWEtxUGVFRlNBfn4%3D&chksm=1f6354ba2814ddacf0184b24d310483641ef190b1faac098c285eb416c70017e2f54decfa1af#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG.png',
-          },
-        ],
-      },
-      updateTime: 1_673_628_760,
-    },
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-u9kTIm1DhWZDdXyxsxUVv2Z5DAB99IPxkIRTUUD206k',
-      content: {
-        newsItem: [
-          {
-            title: '12',
-            author: '333',
-            digest: '123',
-            content: '123',
-            contentSourceUrl: 'https://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qVVhpSDZUaFJWTzBBWWRVQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNWRnTDJWYmF2NER0clV1bThmQ0xUR3hqQnJkZ3BJSUNmNDJmc0lCZ1dadkVnZ3Z5bkN4YWtVUjhoaWZWYzZURUR4NnpMd0Y4Z3U5aUdib0lkMzI4Rjg3SG9JX2FycTMxbUctOHplaTlQVVhnfn4%3D&chksm=1f6354b62814dda076c778af33f06580165d8aa81f7798d55cfabb1886b5c74d9b2124a3535c#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8.jpg',
-          },
-        ],
-      },
-      updateTime: 1_673_626_494,
-    },
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-sO24upobaENDmeByfBTfaozB3aOqSMAV0lGy-UkHXE7',
-      content: {
-        newsItem: [
-          {
-            title: '我是标题',
-            author: '我是作者',
-            digest: '我是摘要',
-            content: '我是内容',
-            contentSourceUrl: 'https://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9LT2dqRnpMNUpsR0hjYWtBQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNGNmazZTdlE5WkxvU0tfX2V5cjV2WjJiR0xjQUhyREFSZWo2eWNrUW9EYVh6ZkpWRXBLR3FmTEV6YldBMno3Q2ZvVXBSdzlaVDc3aFhndEpQWUwzWmFMUWt0YVVURE1VZ1FsQTdPMlRtc3JBfn4%3D&chksm=1f6354aa2814ddbcc2637382f963a8742993ac38ebcebe6e3411df5ac82ac7bbdb391be6494a#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
-          },
-        ],
-      },
-      updateTime: 1_673_534_279,
-    },
-  ],
-  total: 6,
-};

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus';
 
-import type { NewsItem } from './types';
+import type { MpDraftApi } from '#/api/mp/draft';
 
 import { computed, inject, reactive, ref } from 'vue';
 
@@ -11,22 +11,20 @@ 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/wx-material-select/wx-material-select.vue';
-
-// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
+import { WxMaterialSelect } from '#/views/mp/components/';
 
 const props = defineProps<{
   isFirst: boolean;
-  modelValue: NewsItem;
+  modelValue: MpDraftApi.NewsItem;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', v: NewsItem): void;
+  (e: 'update:modelValue', v: MpDraftApi.NewsItem): void;
 }>();
 
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传永久素材的地址
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
-const newsItem = computed<NewsItem>({
+const newsItem = computed<MpDraftApi.NewsItem>({
   get() {
     return props.modelValue;
   },
@@ -36,7 +34,7 @@ const newsItem = computed<NewsItem>({
 });
 
 const accountId = inject<number>('accountId');
-const showImageDialog = ref(false);
+const dialogVisible = ref(false);
 
 const fileList = ref<UploadFiles>([]);
 interface UploadData {
@@ -48,15 +46,20 @@ const uploadData: UploadData = reactive({
   accountId: accountId!,
 });
 
-/** 素材选择完成事件*/
+function handleOpenDialog() {
+  dialogVisible.value = true;
+}
+
+/** 素材选择完成事件 */
 function onMaterialSelected(item: any) {
-  showImageDialog.value = false;
+  dialogVisible.value = false;
   newsItem.value.thumbMediaId = item.mediaId;
   newsItem.value.thumbUrl = item.url;
 }
 
-const onBeforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
-  useBeforeUpload(UploadType.Image, 2)(rawFile);
+/** 上传前校验 */
+const onBeforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) =>
+  useBeforeUpload(UploadType.Image, 2)(file as any);
 
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
@@ -66,12 +69,12 @@ function onUploadSuccess(res: any) {
 
   // 重置上传文件的表单
   fileList.value = [];
-
   // 设置草稿的封面字段
   newsItem.value.thumbMediaId = res.data.mediaId;
   newsItem.value.thumbUrl = res.data.url;
 }
 
+/** 上传失败处理 */
 function onUploadError(err: Error) {
   ElMessage.error(`上传失败: ${err.message}`);
 }
@@ -91,7 +94,7 @@ function onUploadError(err: Error) {
       />
       <IconifyIcon
         v-else
-        icon="ep:plus"
+        icon="lucide:plus"
         class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
         :class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
       />
@@ -113,7 +116,7 @@ function onUploadError(err: Error) {
           <ElButton
             size="small"
             type="primary"
-            @click="showImageDialog = true"
+            @click="handleOpenDialog"
             class="ml-1.5"
           >
             素材库选择
@@ -127,12 +130,12 @@ function onUploadError(err: Error) {
       </div>
       <ElDialog
         title="选择图片"
-        v-model="showImageDialog"
+        v-model="dialogVisible"
         width="80%"
         append-to-body
         destroy-on-close
       >
-        <MaterialSelect
+        <WxMaterialSelect
           type="image"
           :account-id="accountId!"
           @select-material="onMaterialSelected"

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

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

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

@@ -1,97 +1,78 @@
 <script lang="ts" setup>
-import type { NewsItem } from './types';
+import type { MpDraftApi } from '#/api/mp/draft';
 
 import { computed, provide, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessage } from 'element-plus';
 
-import * as MpDraftApi from '#/api/mp/draft';
+import { createDraft, updateDraft } from '#/api/mp/draft';
 
 import NewsForm from './news-form.vue';
 
 const emit = defineEmits(['success']);
 
-// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
-
 const formData = ref<{
   accountId: number;
-  isCreating: boolean;
   mediaId?: string;
-  newsList?: NewsItem[];
+  newsList?: MpDraftApi.NewsItem[];
 }>();
-const newsList = ref<NewsItem[]>([]);
-const isSubmitting = ref(false);
-const isSaved = ref(false);
+const newsList = ref<MpDraftApi.NewsItem[]>([]);
 
 const getTitle = computed(() => {
-  return formData.value?.isCreating ? '新建图文' : '修改图文';
+  return formData.value?.mediaId ? '修改图文' : '新建图文';
 });
 
-// 提供 accountId 给子组件
 provide(
   'accountId',
   computed(() => formData.value?.accountId),
-);
+); // 提供 accountId 给子组件
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     if (!formData.value) {
       return;
     }
-
-    isSubmitting.value = true;
     modalApi.lock();
     try {
-      if (formData.value.isCreating) {
-        await MpDraftApi.createDraft(formData.value.accountId, newsList.value);
-        ElMessage.success('新增成功');
-      } else if (formData.value.mediaId) {
-        await MpDraftApi.updateDraft(
+      if (formData.value.mediaId) {
+        await updateDraft(
           formData.value.accountId,
           formData.value.mediaId,
           newsList.value,
         );
         ElMessage.success('更新成功');
+      } else {
+        await createDraft(formData.value.accountId, newsList.value);
+        ElMessage.success('新增成功');
       }
-      isSaved.value = true;
       await modalApi.close();
       emit('success');
     } finally {
-      isSubmitting.value = false;
       modalApi.unlock();
     }
   },
-  async onBeforeClose() {
-    // 如果已经成功保存，直接关闭，不显示提示
-    if (isSaved.value) {
-      return true;
-    }
-    try {
-      await ElMessageBox.confirm('修改内容可能还未保存，确定关闭吗?');
-      return true;
-    } catch {
-      return false;
-    }
-  },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
       newsList.value = [];
-      isSaved.value = false;
       return;
     }
-    isSaved.value = false;
     const data = modalApi.getData<{
       accountId: number;
       isCreating: boolean;
       mediaId?: string;
-      newsList?: NewsItem[];
+      newsList?: MpDraftApi.NewsItem[];
     }>();
     if (!data) {
       return;
     }
-    formData.value = data;
+    formData.value = {
+      accountId: data.accountId,
+      mediaId: data.mediaId,
+      newsList: data.newsList,
+    };
     newsList.value = data.newsList || [];
   },
 });
@@ -102,8 +83,7 @@ const [Modal, modalApi] = useVbenModal({
     <NewsForm
       v-if="formData"
       v-model="newsList"
-      v-loading="isSubmitting"
-      :is-creating="formData.isCreating"
+      :is-creating="!formData.mediaId"
     />
   </Modal>
 </template>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { NewsItem } from './types';
+import type { MpDraftApi } from '#/api/mp/draft';
 
 import { computed, ref } from 'vue';
 
@@ -16,23 +16,23 @@ import {
   ElRow,
 } from 'element-plus';
 
+import { createEmptyNewsItem } from '#/api/mp/draft';
 import { Tinymce as RichTextarea } from '#/components/tinymce';
 
 import CoverSelect from './cover-select.vue';
-import { createEmptyNewsItem } from './types';
 
 defineOptions({ name: 'NewsForm' });
 
 const props = defineProps<{
   isCreating: boolean;
-  modelValue: NewsItem[] | null;
+  modelValue: MpDraftApi.NewsItem[] | null;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', v: NewsItem[]): void;
+  (e: 'update:modelValue', v: MpDraftApi.NewsItem[]): void;
 }>();
 
-const newsList = computed<NewsItem[]>({
+const newsList = computed<MpDraftApi.NewsItem[]>({
   get() {
     return props.modelValue === null
       ? [createEmptyNewsItem()]
@@ -93,27 +93,32 @@ function plusNews() {
 <template>
   <ElContainer>
     <ElAside width="40%">
-      <div class="mx-auto mb-2.5 w-3/5 border border-gray-200 p-2.5">
+      <div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
         <div v-for="(news, index) in newsList" :key="index">
           <div
-            class="group mx-auto h-[120px] w-full cursor-pointer bg-white"
+            class="group relative mx-auto mb-[10px] w-full cursor-pointer border-[2px] bg-white"
             v-if="index === 0"
-            :class="{
-              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
-            }"
+            :class="
+              activeNewsIndex === index
+                ? 'border-green-500'
+                : 'border-transparent'
+            "
             @click="activeNewsIndex = index"
           >
-            <div class="relative h-[120px] w-full bg-[#acadae]">
-              <img class="h-full w-full" :src="news.thumbUrl" />
+            <div class="relative w-full bg-[#acadae]">
+              <img
+                class="max-h-[200px] min-h-[100px] w-full object-cover"
+                :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"
+                class="absolute bottom-0 left-0 mb-[5px] ml-[5px] inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap p-[1%] text-[18px] text-white"
               >
                 {{ news.title }}
               </div>
             </div>
             <div
+              class="absolute bottom-0 right-[-45px] top-0 flex flex-col justify-center gap-[10px] py-[5px] text-center"
               v-if="newsList.length > 1"
-              class="relative -bottom-6 hidden text-center group-hover:block"
             >
               <ElButton
                 type="info"
@@ -121,38 +126,43 @@ function plusNews() {
                 size="small"
                 @click="() => moveDownNews(index)"
               >
-                <IconifyIcon icon="ep:arrow-down-bold" />
+                <IconifyIcon icon="lucide:arrow-down" />
               </ElButton>
               <ElButton
                 v-if="isCreating"
                 type="danger"
                 circle
                 size="small"
+                class="!ml-0"
                 @click="() => removeNews(index)"
               >
-                <IconifyIcon icon="ep:delete" />
+                <IconifyIcon icon="lucide:trash-2" />
               </ElButton>
             </div>
           </div>
-          <!-- TODO @hw：1）每个文章的选中框太粗了；2）没完全覆盖住文章；；；最好首个文章，和第个文章的情况，都看看 -->
           <div
-            class="group mx-auto w-full cursor-pointer border-t border-gray-200 bg-white py-1.5"
+            class="group relative mx-auto mb-[10px] cursor-pointer border-[2px] bg-white"
             v-if="index > 0"
-            :class="{
-              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
-            }"
+            :class="
+              activeNewsIndex === index
+                ? 'border-green-500'
+                : 'border-transparent'
+            "
             @click="activeNewsIndex = index"
           >
-            <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 class="relative flex items-center justify-between">
+              <div
+                class="mb-[5px] ml-[5px] h-[25px] flex-1 overflow-hidden text-ellipsis whitespace-nowrap p-[1%] text-[16px]"
+              >
+                {{ news.title }}
               </div>
+              <img
+                class="block h-[90px] w-[90px] object-cover"
+                :src="news.thumbUrl"
+              />
             </div>
-            <!-- TODO @hw：这里的按钮，交互不太对。应该在每个卡片的里面；或者类似公众号现在的交互，放到右侧；。。。复现本周：如果有 2 个文章的时候 -->
-            <!-- TODO @hw：当有 2 个文章的时候，挪到第二个文章的时候，卡片会变大。期望：不变大 -->
             <div
-              class="relative -bottom-6 hidden text-center group-hover:block"
+              class="absolute bottom-0 right-[-45px] top-0 flex flex-col justify-center gap-[10px] py-[5px] text-center"
             >
               <ElButton
                 v-if="newsList.length > index + 1"
@@ -161,25 +171,27 @@ function plusNews() {
                 size="small"
                 @click="() => moveDownNews(index)"
               >
-                <IconifyIcon icon="ep:arrow-down-bold" />
+                <IconifyIcon icon="lucide:arrow-down" />
               </ElButton>
               <ElButton
                 v-if="index > 0"
                 type="info"
                 circle
                 size="small"
+                class="!ml-0"
                 @click="() => moveUpNews(index)"
               >
-                <IconifyIcon icon="ep:arrow-up-bold" />
+                <IconifyIcon icon="lucide:arrow-up" />
               </ElButton>
               <ElButton
                 v-if="isCreating"
                 type="danger"
                 size="small"
                 circle
+                class="!ml-0"
                 @click="() => removeNews(index)"
               >
-                <IconifyIcon icon="ep:delete" />
+                <IconifyIcon icon="lucide:trash-2" />
               </ElButton>
             </div>
           </div>
@@ -194,7 +206,7 @@ function plusNews() {
             @click="plusNews"
             v-if="newsList.length < 8 && isCreating"
           >
-            <IconifyIcon icon="ep:plus" />
+            <IconifyIcon icon="lucide:plus" />
           </ElButton>
         </ElRow>
       </div>