From 402cab05b9d76e4cec94e37a46fcfd85b0a87c9d Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 25 Oct 2025 14:16:10 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91mp/account?=
 =?UTF-8?q?=20=E7=9A=84=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/mp/account/data.ts    | 21 +++++----
 apps/web-antd/src/views/mp/account/index.vue  | 46 +++++++------------
 .../src/views/mp/account/modules/form.vue     |  2 +-
 3 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/apps/web-antd/src/views/mp/account/data.ts b/apps/web-antd/src/views/mp/account/data.ts
index 8eca221a0..eb57a796a 100644
--- a/apps/web-antd/src/views/mp/account/data.ts
+++ b/apps/web-antd/src/views/mp/account/data.ts
@@ -38,7 +38,7 @@ export function useFormSchema(): VbenFormSchema[] {
       help: '在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者ID(AppID)」',
       rules: 'required',
       componentProps: {
-        placeholder: '请输入appId',
+        placeholder: '请输入公众号 appId',
       },
     },
     {
@@ -48,7 +48,7 @@ export function useFormSchema(): VbenFormSchema[] {
       help: '在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者密码(AppSecret)」',
       rules: 'required',
       componentProps: {
-        placeholder: '请输入appSecret',
+        placeholder: '请输入公众号 appSecret',
       },
     },
     {
@@ -57,7 +57,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Input',
       rules: 'required',
       componentProps: {
-        placeholder: '请输入token',
+        placeholder: '请输入公众号 token',
       },
     },
     {
@@ -65,7 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '消息加解密密钥',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入aesKey',
+        placeholder: '请输入消息加解密密钥',
       },
     },
     {
@@ -88,6 +88,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入名称',
+        allowClear: true,
       },
     },
   ];
@@ -99,18 +100,22 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     {
       title: '名称',
       field: 'name',
+      minWidth: 150,
     },
     {
       title: '微信号',
       field: 'account',
+      minWidth: 180,
     },
     {
       title: 'appId',
       field: 'appId',
+      minWidth: 180,
     },
     {
       title: '服务器地址(URL)',
       field: 'utl',
+      minWidth: 360,
       slots: {
         default: ({ row }) => {
           return `http://服务端地址/admin-api/mp/open/${row.appId}`;
@@ -120,17 +125,17 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     {
       title: '二维码',
       field: 'qrCodeUrl',
-      slots: {
-        default: 'qrCodeUrl',
-      },
+      minWidth: 120,
+      cellRender: { name: 'CellImage' },
     },
     {
       title: '备注',
       field: 'remark',
+      minWidth: 150,
     },
     {
       title: '操作',
-      width: 260,
+      width: 200,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/mp/account/index.vue b/apps/web-antd/src/views/mp/account/index.vue
index 4f1ca82ac..4fd7ab516 100644
--- a/apps/web-antd/src/views/mp/account/index.vue
+++ b/apps/web-antd/src/views/mp/account/index.vue
@@ -46,9 +46,7 @@ async function handleDelete(row: MpAccountApi.Account) {
   });
   try {
     await deleteAccount(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -58,14 +56,12 @@ async function handleDelete(row: MpAccountApi.Account) {
 /** 生成二维码 */
 async function handleGenerateQrCode(row: MpAccountApi.Account) {
   const hideLoading = message.loading({
-    content: '生成二维码',
+    content: '正在生成二维码中...',
     duration: 0,
   });
   try {
     await generateAccountQrCode(row.id as number);
-    message.success({
-      content: '生成二维码成功',
-    });
+    message.success($t('ui.actionMessage.operationSuccess'));
     handleRefresh();
   } finally {
     hideLoading();
@@ -75,14 +71,12 @@ async function handleGenerateQrCode(row: MpAccountApi.Account) {
 /** 清空 API 配额 */
 async function handleCleanQuota(row: MpAccountApi.Account) {
   const hideLoading = message.loading({
-    content: '正在清空 API 配额',
+    content: $t('ui.actionMessage.processing', ['清空 API 配额']),
     duration: 0,
   });
   try {
     await clearAccountQuota(row.id as number);
-    message.success({
-      content: '清空 API 配额成功',
-    });
+    message.success($t('ui.actionMessage.operationSuccess'));
   } finally {
     hideLoading();
   }
@@ -109,6 +103,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -135,22 +130,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <template #qrCodeUrl="{ row }">
-        <a v-if="row.qrCodeUrl" :href="row.qrCodeUrl" target="_blank">
-          <img :src="row.qrCodeUrl" alt="二维码" />
-        </a>
-        <TableAction
-          :actions="[
-            {
-              label: '生成二维码',
-              type: 'link',
-              icon: 'qrcode',
-              auth: ['mp:account:qr-code'],
-              onClick: handleGenerateQrCode.bind(null, row),
-            },
-          ]"
-        />
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -172,14 +151,23 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 confirm: handleDelete.bind(null, row),
               },
             },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '生成二维码',
+              type: 'link',
+              icon: 'qrcode',
+              auth: ['mp:account:qr-code'],
+              onClick: handleGenerateQrCode.bind(null, row),
+            },
             {
               label: '清空 API 配额',
               type: 'link',
               danger: true,
-              icon: ACTION_ICON.DELETE,
+              icon: 'clear',
               auth: ['mp:account:clear-quota'],
               popConfirm: {
-                title: '清空 API 配额',
+                title: '你确认要清空 API 配额？',
                 confirm: handleCleanQuota.bind(null, row),
               },
             },
diff --git a/apps/web-antd/src/views/mp/account/modules/form.vue b/apps/web-antd/src/views/mp/account/modules/form.vue
index 9423073a2..cb2b79ed3 100644
--- a/apps/web-antd/src/views/mp/account/modules/form.vue
+++ b/apps/web-antd/src/views/mp/account/modules/form.vue
@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>