feat：【antd】mp/account 的代码优化

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' },
     },

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),
               },
             },

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>